完善录屏和前端配置页面
This commit is contained in:
dushixiang
@ -135,7 +135,7 @@ class App extends Component {
|
||||
style={{lineHeight: '64px'}}>
|
||||
|
||||
<Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
|
||||
<Link to={'/dashboard'}>
|
||||
<Link to={'/'}>
|
||||
控制面板
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
@ -214,7 +214,7 @@ class App extends Component {
|
||||
|
||||
</Header>*/}
|
||||
|
||||
<Route path="/dashboard" component={Dashboard}/>
|
||||
<Route path="/" exact component={Dashboard}/>
|
||||
<Route path="/user" component={User}/>
|
||||
<Route path="/asset" component={Asset}/>
|
||||
<Route path="/credential" component={Credential}/>
|
||||
|
||||
@ -28,7 +28,7 @@ class LoginForm extends Component {
|
||||
// 跳转登录
|
||||
sessionStorage.removeItem('current');
|
||||
sessionStorage.removeItem('openKeys');
|
||||
localStorage.setItem('X-Auth-Token', result.data);
|
||||
localStorage.setItem('X-Auth-Token', result['data']);
|
||||
// this.props.history.push();
|
||||
window.location.href = "/"
|
||||
|
||||
|
||||
@ -23,7 +23,8 @@ import {differTime, formatDate, itemRender} from "../../utils/utils";
|
||||
import Playback from "./Playback";
|
||||
import {message} from "antd/es";
|
||||
import {
|
||||
DeleteOutlined, DeleteTwoTone,
|
||||
DeleteOutlined,
|
||||
DeleteTwoTone,
|
||||
ExclamationCircleOutlined,
|
||||
PlaySquareTwoTone,
|
||||
SyncOutlined,
|
||||
@ -293,11 +294,19 @@ class OfflineSession extends Component {
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
let disabled = true;
|
||||
let color = '#d9d9d9'
|
||||
if (record['recording'] && record['recording'].length > 0) {
|
||||
disabled = false
|
||||
color = ''
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small' icon={<PlaySquareTwoTone />} onClick={() => this.showPlayback(record.id)}>回放</Button>
|
||||
<Button type="link" size='small' icon={<DeleteTwoTone />} onClick={() => {
|
||||
<Button type="link" size='small'
|
||||
disabled={disabled}
|
||||
icon={<PlaySquareTwoTone twoToneColor={color}/>} onClick={() => this.showPlayback(record.id)}>回放</Button>
|
||||
<Button type="link" size='small' icon={<DeleteTwoTone/>} onClick={() => {
|
||||
confirm({
|
||||
title: '您确定要删除此会话吗?',
|
||||
content: '',
|
||||
|
||||
@ -3,171 +3,171 @@ import Guacamole from "guacamole-common-js";
|
||||
|
||||
class Playback extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
let sessionId = this.props.sessionId;
|
||||
this.initPlayer(sessionId);
|
||||
}
|
||||
componentDidMount() {
|
||||
let sessionId = this.props.sessionId;
|
||||
this.initPlayer(sessionId);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
initPlayer(sessionId) {
|
||||
var RECORDING_URL = '/recording/' + sessionId + '.guac';
|
||||
initPlayer(sessionId) {
|
||||
var RECORDING_URL = '/sessions/' + sessionId + '/recording';
|
||||
|
||||
var player = document.getElementById('player');
|
||||
var display = document.getElementById('display');
|
||||
var playPause = document.getElementById('play-pause');
|
||||
var position = document.getElementById('position');
|
||||
var positionSlider = document.getElementById('position-slider');
|
||||
var duration = document.getElementById('duration');
|
||||
var player = document.getElementById('player');
|
||||
var display = document.getElementById('display');
|
||||
var playPause = document.getElementById('play-pause');
|
||||
var position = document.getElementById('position');
|
||||
var positionSlider = document.getElementById('position-slider');
|
||||
var duration = document.getElementById('duration');
|
||||
|
||||
var tunnel = new Guacamole.StaticHTTPTunnel(RECORDING_URL);
|
||||
var recording = new Guacamole.SessionRecording(tunnel);
|
||||
var tunnel = new Guacamole.StaticHTTPTunnel(RECORDING_URL);
|
||||
var recording = new Guacamole.SessionRecording(tunnel);
|
||||
|
||||
var recordingDisplay = recording.getDisplay();
|
||||
var recordingDisplay = recording.getDisplay();
|
||||
|
||||
/**
|
||||
* Converts the given number to a string, adding leading zeroes as necessary
|
||||
* to reach a specific minimum length.
|
||||
*
|
||||
* @param {Numer} num
|
||||
* The number to convert to a string.
|
||||
*
|
||||
* @param {Number} minLength
|
||||
* The minimum length of the resulting string, in characters.
|
||||
*
|
||||
* @returns {String}
|
||||
* A string representation of the given number, with leading zeroes
|
||||
* added as necessary to reach the specified minimum length.
|
||||
*/
|
||||
var zeroPad = function zeroPad(num, minLength) {
|
||||
/**
|
||||
* Converts the given number to a string, adding leading zeroes as necessary
|
||||
* to reach a specific minimum length.
|
||||
*
|
||||
* @param {Numer} num
|
||||
* The number to convert to a string.
|
||||
*
|
||||
* @param {Number} minLength
|
||||
* The minimum length of the resulting string, in characters.
|
||||
*
|
||||
* @returns {String}
|
||||
* A string representation of the given number, with leading zeroes
|
||||
* added as necessary to reach the specified minimum length.
|
||||
*/
|
||||
var zeroPad = function zeroPad(num, minLength) {
|
||||
|
||||
// Convert provided number to string
|
||||
var str = num.toString();
|
||||
// Convert provided number to string
|
||||
var str = num.toString();
|
||||
|
||||
// Add leading zeroes until string is long enough
|
||||
while (str.length < minLength)
|
||||
str = '0' + str;
|
||||
// Add leading zeroes until string is long enough
|
||||
while (str.length < minLength)
|
||||
str = '0' + str;
|
||||
|
||||
return str;
|
||||
return str;
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts the given millisecond timestamp into a human-readable string in
|
||||
* MM:SS format.
|
||||
*
|
||||
* @param {Number} millis
|
||||
* An arbitrary timestamp, in milliseconds.
|
||||
*
|
||||
* @returns {String}
|
||||
* A human-readable string representation of the given timestamp, in
|
||||
* MM:SS format.
|
||||
*/
|
||||
var formatTime = function formatTime(millis) {
|
||||
/**
|
||||
* Converts the given millisecond timestamp into a human-readable string in
|
||||
* MM:SS format.
|
||||
*
|
||||
* @param {Number} millis
|
||||
* An arbitrary timestamp, in milliseconds.
|
||||
*
|
||||
* @returns {String}
|
||||
* A human-readable string representation of the given timestamp, in
|
||||
* MM:SS format.
|
||||
*/
|
||||
var formatTime = function formatTime(millis) {
|
||||
|
||||
// Calculate total number of whole seconds
|
||||
var totalSeconds = Math.floor(millis / 1000);
|
||||
// Calculate total number of whole seconds
|
||||
var totalSeconds = Math.floor(millis / 1000);
|
||||
|
||||
// Split into seconds and minutes
|
||||
var seconds = totalSeconds % 60;
|
||||
var minutes = Math.floor(totalSeconds / 60);
|
||||
// Split into seconds and minutes
|
||||
var seconds = totalSeconds % 60;
|
||||
var minutes = Math.floor(totalSeconds / 60);
|
||||
|
||||
// Format seconds and minutes as MM:SS
|
||||
return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
|
||||
// Format seconds and minutes as MM:SS
|
||||
return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
// Add playback display to DOM
|
||||
display.appendChild(recordingDisplay.getElement());
|
||||
// Add playback display to DOM
|
||||
display.appendChild(recordingDisplay.getElement());
|
||||
|
||||
// Begin downloading the recording
|
||||
recording.connect();
|
||||
// Begin downloading the recording
|
||||
recording.connect();
|
||||
|
||||
// If playing, the play/pause button should read "Pause"
|
||||
recording.onplay = function () {
|
||||
playPause.textContent = 'Pause';
|
||||
};
|
||||
// If playing, the play/pause button should read "Pause"
|
||||
recording.onplay = function () {
|
||||
playPause.textContent = 'Pause';
|
||||
};
|
||||
|
||||
// If paused, the play/pause button should read "Play"
|
||||
recording.onpause = function () {
|
||||
playPause.textContent = 'Play';
|
||||
};
|
||||
// If paused, the play/pause button should read "Play"
|
||||
recording.onpause = function () {
|
||||
playPause.textContent = 'Play';
|
||||
};
|
||||
|
||||
// Toggle play/pause when display or button are clicked
|
||||
display.onclick = playPause.onclick = function () {
|
||||
if (!recording.isPlaying())
|
||||
recording.play();
|
||||
else
|
||||
recording.pause();
|
||||
};
|
||||
// Toggle play/pause when display or button are clicked
|
||||
display.onclick = playPause.onclick = function () {
|
||||
if (!recording.isPlaying())
|
||||
recording.play();
|
||||
else
|
||||
recording.pause();
|
||||
};
|
||||
|
||||
// Fit display within containing div
|
||||
recordingDisplay.onresize = function displayResized(width, height) {
|
||||
// Fit display within containing div
|
||||
recordingDisplay.onresize = function displayResized(width, height) {
|
||||
|
||||
// Do not scale if display has no width
|
||||
if (!width)
|
||||
return;
|
||||
// Do not scale if display has no width
|
||||
if (!width)
|
||||
return;
|
||||
|
||||
// Scale display to fit width of container
|
||||
recordingDisplay.scale(display.offsetWidth / width);
|
||||
// Scale display to fit width of container
|
||||
recordingDisplay.scale(display.offsetWidth / width);
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
// Update slider and status when playback position changes
|
||||
recording.onseek = function positionChanged(millis) {
|
||||
position.textContent = formatTime(millis);
|
||||
positionSlider.value = millis;
|
||||
};
|
||||
// Update slider and status when playback position changes
|
||||
recording.onseek = function positionChanged(millis) {
|
||||
position.textContent = formatTime(millis);
|
||||
positionSlider.value = millis;
|
||||
};
|
||||
|
||||
// Update slider and status when duration changes
|
||||
recording.onprogress = function durationChanged(millis) {
|
||||
duration.textContent = formatTime(millis);
|
||||
positionSlider.max = millis;
|
||||
};
|
||||
// Update slider and status when duration changes
|
||||
recording.onprogress = function durationChanged(millis) {
|
||||
duration.textContent = formatTime(millis);
|
||||
positionSlider.max = millis;
|
||||
};
|
||||
|
||||
// Seek within recording if slider is moved
|
||||
positionSlider.onchange = function sliderPositionChanged() {
|
||||
// Seek within recording if slider is moved
|
||||
positionSlider.onchange = function sliderPositionChanged() {
|
||||
|
||||
// Request seek
|
||||
recording.seek(positionSlider.value, function seekComplete() {
|
||||
// Request seek
|
||||
recording.seek(positionSlider.value, function seekComplete() {
|
||||
|
||||
// Seek has completed
|
||||
player.className = '';
|
||||
// Seek has completed
|
||||
player.className = '';
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
// Seek is in progress
|
||||
player.className = 'seeking';
|
||||
// Seek is in progress
|
||||
player.className = 'seeking';
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div id="player">
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div id="player">
|
||||
|
||||
<div id="display">
|
||||
<div className="notification-container">
|
||||
<div className="seek-notification">
|
||||
</div>
|
||||
<div id="display">
|
||||
<div className="notification-container">
|
||||
<div className="seek-notification">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="controls">
|
||||
<button id="play-pause">Play</button>
|
||||
<input id="position-slider" type="range"/>
|
||||
<span id="position">00:00</span>
|
||||
<span>/</span>
|
||||
<span id="duration">00:00</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="controls">
|
||||
<button id="play-pause">Play</button>
|
||||
<input id="position-slider" type="range"/>
|
||||
<span id="position">00:00</span>
|
||||
<span>/</span>
|
||||
<span id="duration">00:00</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Playback;
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Layout, PageHeader, Switch, Select} from "antd";
|
||||
import {Button, Form, Input, Layout, PageHeader, Select, Switch, Tabs, Typography} from "antd";
|
||||
import {itemRender} from '../../utils/utils'
|
||||
import {Form, Input, Button, Checkbox} from "antd";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
|
||||
const {Content} = Layout;
|
||||
const {Option} = Select;
|
||||
const {TabPane} = Tabs;
|
||||
const {Title} = Typography;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@ -20,20 +21,24 @@ const routes = [
|
||||
];
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 3},
|
||||
wrapperCol: {span: 9},
|
||||
labelCol: {span: 12},
|
||||
wrapperCol: {span: 12},
|
||||
};
|
||||
|
||||
const formTailLayout = {
|
||||
labelCol: {span: 3},
|
||||
wrapperCol: {span: 9, offset: 3},
|
||||
labelCol: {span: 12},
|
||||
wrapperCol: {span: 12},
|
||||
};
|
||||
|
||||
class Setting extends Component {
|
||||
|
||||
state = {}
|
||||
state = {
|
||||
properties: {}
|
||||
}
|
||||
|
||||
settingFormRef = React.createRef();
|
||||
settingFormRef1 = React.createRef();
|
||||
settingFormRef2 = React.createRef();
|
||||
settingFormRef3 = React.createRef();
|
||||
|
||||
componentDidMount() {
|
||||
this.getProperties();
|
||||
@ -51,198 +56,259 @@ class Setting extends Component {
|
||||
getProperties = async () => {
|
||||
|
||||
// eslint-disable-next-line no-extend-native
|
||||
String.prototype.bool = function() {
|
||||
String.prototype.bool = function () {
|
||||
return (/^true$/i).test(this);
|
||||
};
|
||||
|
||||
let result = await request.get('/properties');
|
||||
if (result.code === 1) {
|
||||
let properties = {}
|
||||
if (result['code'] === 1) {
|
||||
let properties = result['data'];
|
||||
|
||||
for (let i = 0; i < result.data.length; i++) {
|
||||
let item = result.data[i];
|
||||
if (item['name'].startsWith('enable') ||
|
||||
item['name'].startsWith('disable')) {
|
||||
properties[item['name']] = item['value'].bool()
|
||||
}else {
|
||||
properties[item['name']] = item['value']
|
||||
for (let key in properties) {
|
||||
if(!properties.hasOwnProperty(key)){
|
||||
continue;
|
||||
}
|
||||
if(key.startsWith('enable') || key.startsWith("disable")){
|
||||
properties[key] = properties[key].bool();
|
||||
}
|
||||
}
|
||||
this.settingFormRef.current.setFieldsValue(properties)
|
||||
console.log(properties)
|
||||
this.setState({
|
||||
properties: properties
|
||||
})
|
||||
|
||||
if (this.settingFormRef1.current) {
|
||||
this.settingFormRef1.current.setFieldsValue(properties)
|
||||
}
|
||||
|
||||
if (this.settingFormRef2.current) {
|
||||
this.settingFormRef2.current.setFieldsValue(properties)
|
||||
}
|
||||
|
||||
if (this.settingFormRef3.current) {
|
||||
this.settingFormRef3.current.setFieldsValue(properties)
|
||||
}
|
||||
} else {
|
||||
message.error(result.message);
|
||||
message.error(result['message']);
|
||||
}
|
||||
}
|
||||
|
||||
handleOnTabChange = () => {
|
||||
this.getProperties()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="系统设置"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="系统设置"
|
||||
>
|
||||
</PageHeader>
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="系统设置"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="系统设置"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
<Content className="site-layout-background page-content">
|
||||
|
||||
<Form ref={this.settingFormRef} name="password" onFinish={this.changeProperties}>
|
||||
<h3>Guacd 服务配置</h3>
|
||||
<Tabs tabPosition={'left'} onChange={this.handleOnTabChange} tabBarStyle={{width: 150}}>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="host"
|
||||
label="监听地址"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '监听地址',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入监听地址"/>
|
||||
</Form.Item>
|
||||
<TabPane tab="RDP配置" key="1">
|
||||
<Form ref={this.settingFormRef1} name="password" onFinish={this.changeProperties}
|
||||
layout="vertical">
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="port"
|
||||
label="监听端口"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '监听端口',
|
||||
min: 1,
|
||||
max: 65535
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='number' placeholder="请输入监听端口"/>
|
||||
</Form.Item>
|
||||
<Title level={3}>RDP配置(远程桌面)</Title>
|
||||
|
||||
|
||||
<h3>远程桌面（RDP）配置</h3>
|
||||
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-drive"
|
||||
label="启用设备映射"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="drive-name"
|
||||
label="设备名称"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备名称',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入设备名称"/>
|
||||
</Form.Item>
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(checked, event) => {
|
||||
this.setState({
|
||||
properties: {
|
||||
...this.state.properties,
|
||||
'enable-drive': checked,
|
||||
}
|
||||
})
|
||||
}}/>
|
||||
</Form.Item>
|
||||
{
|
||||
this.state.properties['enable-drive'] === true ?
|
||||
<>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="drive-name"
|
||||
label="设备名称"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备名称',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入设备名称"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="drive-path"
|
||||
label="设备路径"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备路径',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入设备路径"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="drive-path"
|
||||
label="设备路径"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备路径',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入设备路径"/>
|
||||
</Form.Item>
|
||||
</> : null
|
||||
}
|
||||
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-wallpaper"
|
||||
label="启用桌面墙纸"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-theming"
|
||||
label="启用桌面主题"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-font-smoothing"
|
||||
label="启用字体平滑（ClearType）"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-full-window-drag"
|
||||
label="启用全窗口拖拽"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-desktop-composition"
|
||||
label="启用桌面合成效果（Aero）"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-menu-animations"
|
||||
label="启用菜单动画"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="disable-bitmap-caching"
|
||||
label="禁用位图缓存"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="disable-offscreen-caching"
|
||||
label="禁用离屏缓存"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="disable-glyph-caching"
|
||||
label="禁用字形缓存"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<h3>SSH配置</h3>
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
更新
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</TabPane>
|
||||
<TabPane tab="SSH配置" key="2">
|
||||
<Form ref={this.settingFormRef2} name="password" onFinish={this.changeProperties}
|
||||
layout="vertical">
|
||||
|
||||
<Form.Item
|
||||
<Title level={3}>SSH配置</Title>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="font-name"
|
||||
label="字体名称"
|
||||
@ -252,11 +318,11 @@ class Setting extends Component {
|
||||
message: '字体名称',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入字体名称"/>
|
||||
</Form.Item>
|
||||
>
|
||||
<Input type='text' placeholder="请输入字体名称"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="font-size"
|
||||
label="字体大小"
|
||||
@ -266,11 +332,11 @@ class Setting extends Component {
|
||||
message: '字体大小',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='number' placeholder="请输入字体大小"/>
|
||||
</Form.Item>
|
||||
>
|
||||
<Input type='number' placeholder="请输入字体大小"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="color-scheme"
|
||||
label="颜色主题"
|
||||
@ -281,33 +347,108 @@ class Setting extends Component {
|
||||
},
|
||||
]}
|
||||
initialValue="gray-black"
|
||||
>
|
||||
<Select style={{width: 120}} onChange={null}>
|
||||
<Option value="gray-black">黑底灰字</Option>
|
||||
<Option value="green-black">黑底绿字</Option>
|
||||
<Option value="white-black">黑底白字</Option>
|
||||
<Option value="black-white">白底黑字</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
>
|
||||
<Select style={{width: 120}} onChange={null}>
|
||||
<Option value="gray-black">黑底灰字</Option>
|
||||
<Option value="green-black">黑底绿字</Option>
|
||||
<Option value="white-black">黑底白字</Option>
|
||||
<Option value="black-white">白底黑字</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
更新
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</TabPane>
|
||||
<TabPane tab="其他配置" key="3">
|
||||
<Title level={3}>Guacd 服务配置</Title>
|
||||
<Form ref={this.settingFormRef3} name="password" onFinish={this.changeProperties}
|
||||
layout="vertical">
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-sftp"
|
||||
label="启用SFTP"
|
||||
name="host"
|
||||
label="Guacd监听地址"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Guacd监听地址',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入Guacd监听地址"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="port"
|
||||
label="Guacd监听端口"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Guacd监听端口',
|
||||
min: 1,
|
||||
max: 65535
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='number' placeholder="请输入Guacd监听端口"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-recording"
|
||||
label="开启录屏"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(checked, event) => {
|
||||
this.setState({
|
||||
properties: {
|
||||
...this.state.properties,
|
||||
'enable-recording': checked,
|
||||
}
|
||||
})
|
||||
}}/>
|
||||
</Form.Item>
|
||||
{
|
||||
this.state.properties['enable-recording'] === true ?
|
||||
<>
|
||||
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="recording-path"
|
||||
label="录屏存放路径"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入录屏存放路径',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入录屏存放路径"/>
|
||||
</Form.Item>
|
||||
</> : null
|
||||
}
|
||||
|
||||
</Content>
|
||||
</>
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
更新
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
|
||||
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user