完善录屏和前端配置页面

pkg/api/property.go

@@ -7,7 +7,7 @@ import (
 )
 
 func PropertyGetEndpoint(c echo.Context) error {
-	properties := model.FindAllTemp()
+	properties := model.FindAllPropertiesMap()
 	return Success(c, properties)
 }
 

pkg/api/session.go

@@ -43,7 +43,7 @@ func SessionDeleteEndpoint(c echo.Context) error {
 	split := strings.Split(sessionIds, ",")
 	for i := range split {
 		model.DeleteSessionById(split[i])
-		drivePath, err := model.GetDrivePath()
+		drivePath, err := model.GetRecordingPath()
 		if err != nil {
 			continue
 		}

pkg/api/tunnel.go

@@ -1,14 +1,15 @@
 package api
 
 import (
-	"next-terminal/pkg/config"
-	"next-terminal/pkg/guacd"
-	"next-terminal/pkg/model"
 	"fmt"
 	"github.com/gorilla/websocket"
 	"github.com/labstack/echo/v4"
 	"github.com/pkg/sftp"
 	"log"
+	"next-terminal/pkg/config"
+	"next-terminal/pkg/guacd"
+	"next-terminal/pkg/model"
+	"path"
 	"strconv"
 )
 
@@ -33,17 +34,6 @@ func TunEndpoint(c echo.Context) error {
 
 	propertyMap := model.FindAllPropertiesMap()
 
-	for name := range propertyMap {
-
-		if name == model.GuacdFontSize {
-			fontSize, _ := strconv.Atoi(propertyMap[name])
-			fontSize = fontSize * 2
-			configuration.SetParameter(name, strconv.Itoa(fontSize))
-		} else {
-			configuration.SetParameter(name, propertyMap[name])
-		}
-	}
-
 	var session model.Session
 	var sftpClient *sftp.Client
 
@@ -59,6 +49,22 @@ func TunEndpoint(c echo.Context) error {
 			return err
 		}
 
+		for name := range propertyMap {
+			if name == guacd.FontSize {
+				fontSize, _ := strconv.Atoi(propertyMap[name])
+				fontSize = fontSize * 2
+				configuration.SetParameter(name, strconv.Itoa(fontSize))
+			} else {
+				configuration.SetParameter(name, propertyMap[name])
+			}
+		}
+
+		if propertyMap[guacd.EnableRecording] == "true" {
+			configuration.SetParameter(guacd.CreateRecordingPath, path.Join(propertyMap[guacd.CreateRecordingPath], sessionId))
+		} else {
+			configuration.SetParameter(guacd.CreateRecordingPath, "")
+		}
+
 		configuration.Protocol = session.Protocol
 		switch configuration.Protocol {
 		case "rdp":
@@ -97,7 +103,7 @@ func TunEndpoint(c echo.Context) error {
 		configuration.SetParameter("port", strconv.Itoa(session.Port))
 	}
 
-	addr := propertyMap[model.GuacdHost] + ":" + propertyMap[model.GuacdPort]
+	addr := propertyMap[guacd.Host] + ":" + propertyMap[guacd.Port]
 	tunnel, err := guacd.NewTunnel(addr, configuration)
 	if err != nil {
 		return err
@@ -118,6 +124,7 @@ func TunEndpoint(c echo.Context) error {
 		session.ConnectionId = tunnel.UUID
 		session.Width = intWidth
 		session.Height = intHeight
+		session.Recording = configuration.GetParameter(guacd.RecordingPath)
 
 		model.UpdateSessionById(&session, sessionId)
 	}

pkg/guacd/guacd.go

@@ -8,6 +8,31 @@ import (
 	"strings"
 )
 
+const (
+	Host                = "host"
+	Port                = "port"
+	EnableRecording     = "enable-recording"
+	RecordingPath       = "recording-path"
+	CreateRecordingPath = "create-recording-path"
+
+	FontName    = "font-name"
+	FontSize    = "font-size"
+	ColorScheme = "color-scheme"
+
+	EnableDrive              = "enable-drive"
+	DriveName                = "drive-name"
+	DrivePath                = "drive-path"
+	EnableWallpaper          = "enable-wallpaper"
+	EnableTheming            = "enable-theming"
+	EnableFontSmoothing      = "enable-font-smoothing"
+	EnableFullWindowDrag     = "enable-full-window-drag"
+	EnableDesktopComposition = "enable-desktop-composition"
+	EnableMenuAnimations     = "enable-menu-animations"
+	DisableBitmapCaching     = "disable-bitmap-caching"
+	DisableOffscreenCaching  = "disable-offscreen-caching"
+	DisableGlyphCaching      = "disable-glyph-caching"
+)
+
 const Delimiter = ';'
 const Version = "VERSION_1_1_0"
 

pkg/handle/runner.go

@@ -1,6 +1,7 @@
 package handle
 
 import (
+	"next-terminal/pkg/guacd"
 	"next-terminal/pkg/model"
 	"next-terminal/pkg/utils"
 	"os"
@@ -50,148 +51,165 @@ func RunDataFix() {
 func InitProperties() {
 	propertyMap := model.FindAllPropertiesMap()
 
-	if len(propertyMap[model.GuacdHost]) == 0 {
+	if len(propertyMap[guacd.Host]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdHost,
+			Name:  guacd.Host,
 			Value: "127.0.0.1",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdPort]) == 0 {
+	if len(propertyMap[guacd.Port]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdPort,
+			Name:  guacd.Port,
 			Value: "4822",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdDriveName]) == 0 {
+	if len(propertyMap[guacd.EnableRecording]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdDriveName,
+			Name:  guacd.EnableRecording,
+			Value: "true",
+		}
+		_ = model.CreateNewProperty(&property)
+	}
+
+	if len(propertyMap[guacd.RecordingPath]) == 0 {
+		path, _ := os.Getwd()
+		property := model.Property{
+			Name:  guacd.RecordingPath,
+			Value: path + "/recording/",
+		}
+		_ = model.CreateNewProperty(&property)
+	}
+
+	if len(propertyMap[guacd.CreateRecordingPath]) == 0 {
+		property := model.Property{
+			Name:  guacd.CreateRecordingPath,
+			Value: "true",
+		}
+		_ = model.CreateNewProperty(&property)
+	}
+
+	if len(propertyMap[guacd.DriveName]) == 0 {
+		property := model.Property{
+			Name:  guacd.DriveName,
 			Value: "File-System",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdDrivePath]) == 0 {
+	if len(propertyMap[guacd.DrivePath]) == 0 {
 
 		path, _ := os.Getwd()
 
 		property := model.Property{
-			Name:  model.GuacdDrivePath,
+			Name:  guacd.DrivePath,
 			Value: path + "/drive/",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdFontName]) == 0 {
+	if len(propertyMap[guacd.FontName]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdFontName,
+			Name:  guacd.FontName,
 			Value: "menlo",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdFontSize]) == 0 {
+	if len(propertyMap[guacd.FontSize]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdFontSize,
+			Name:  guacd.FontSize,
 			Value: "12",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdColorScheme]) == 0 {
+	if len(propertyMap[guacd.ColorScheme]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdColorScheme,
+			Name:  guacd.ColorScheme,
 			Value: "gray-black",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdEnableSftp]) == 0 {
+	if len(propertyMap[guacd.EnableDrive]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdEnableSftp,
+			Name:  guacd.EnableDrive,
 			Value: "true",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdEnableDrive]) == 0 {
+	if len(propertyMap[guacd.EnableWallpaper]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdEnableDrive,
+			Name:  guacd.EnableWallpaper,
-			Value: "true",
-		}
-		_ = model.CreateNewProperty(&property)
-	}
-
-	if len(propertyMap[model.GuacdEnableWallpaper]) == 0 {
-		property := model.Property{
-			Name:  model.GuacdEnableWallpaper,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdEnableTheming]) == 0 {
+	if len(propertyMap[guacd.EnableTheming]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdEnableTheming,
+			Name:  guacd.EnableTheming,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdEnableFontSmoothing]) == 0 {
+	if len(propertyMap[guacd.EnableFontSmoothing]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdEnableFontSmoothing,
+			Name:  guacd.EnableFontSmoothing,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdEnableFullWindowDrag]) == 0 {
+	if len(propertyMap[guacd.EnableFullWindowDrag]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdEnableFullWindowDrag,
+			Name:  guacd.EnableFullWindowDrag,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdEnableDesktopComposition]) == 0 {
+	if len(propertyMap[guacd.EnableDesktopComposition]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdEnableDesktopComposition,
+			Name:  guacd.EnableDesktopComposition,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdEnableMenuAnimations]) == 0 {
+	if len(propertyMap[guacd.EnableMenuAnimations]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdEnableMenuAnimations,
+			Name:  guacd.EnableMenuAnimations,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdDisableBitmapCaching]) == 0 {
+	if len(propertyMap[guacd.DisableBitmapCaching]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdDisableBitmapCaching,
+			Name:  guacd.DisableBitmapCaching,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdDisableOffscreenCaching]) == 0 {
+	if len(propertyMap[guacd.DisableOffscreenCaching]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdDisableOffscreenCaching,
+			Name:  guacd.DisableOffscreenCaching,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)
 	}
 
-	if len(propertyMap[model.GuacdDisableGlyphCaching]) == 0 {
+	if len(propertyMap[guacd.DisableGlyphCaching]) == 0 {
 		property := model.Property{
-			Name:  model.GuacdDisableGlyphCaching,
+			Name:  guacd.DisableGlyphCaching,
 			Value: "false",
 		}
 		_ = model.CreateNewProperty(&property)

pkg/model/property.go

@@ -2,30 +2,7 @@ package model
 
 import (
 	"next-terminal/pkg/config"
-	"errors"
+	"next-terminal/pkg/guacd"
-)
-
-const (
-	GuacdHost = "host"
-	GuacdPort = "port"
-
-	GuacdFontName    = "font-name"
-	GuacdFontSize    = "font-size"
-	GuacdColorScheme = "color-scheme"
-	GuacdEnableSftp  = "enable-sftp"
-
-	GuacdEnableDrive              = "enable-drive"
-	GuacdDriveName                = "drive-name"
-	GuacdDrivePath                = "drive-path"
-	GuacdEnableWallpaper          = "enable-wallpaper"
-	GuacdEnableTheming            = "enable-theming"
-	GuacdEnableFontSmoothing      = "enable-font-smoothing"
-	GuacdEnableFullWindowDrag     = "enable-full-window-drag"
-	GuacdEnableDesktopComposition = "enable-desktop-composition"
-	GuacdEnableMenuAnimations     = "enable-menu-animations"
-	GuacdDisableBitmapCaching     = "disable-bitmap-caching"
-	GuacdDisableOffscreenCaching  = "disable-offscreen-caching"
-	GuacdDisableGlyphCaching      = "disable-glyph-caching"
 )
 
 type Property struct {
@@ -69,10 +46,17 @@ func FindAllPropertiesMap() map[string]string {
 }
 
 func GetDrivePath() (string, error) {
-	propertiesMap := FindAllPropertiesMap()
+	property, err := FindPropertyByName(guacd.DrivePath)
-	drivePath := propertiesMap[GuacdDrivePath]
+	if err != nil {
-	if len(drivePath) == 0 {
+		return "", err
-		return "", errors.New("获取RDP挂载目录失败")
 	}
-	return drivePath, nil
+	return property.Value, nil
+}
+
+func GetRecordingPath() (string, error) {
+	property, err := FindPropertyByName(guacd.RecordingPath)
+	if err != nil {
+		return "", err
+	}
+	return property.Value, nil
 }

pkg/model/session.go

@@ -26,6 +26,7 @@ type Session struct {
 	Width            int            `json:"width"`
 	Height           int            `json:"height"`
 	Status           string         `json:"status"`
+	Recording        string         `json:"recording"`
 	ConnectedTime    utils.JsonTime `json:"connectedTime"`
 	DisconnectedTime utils.JsonTime `json:"disconnectedTime"`
 }
@@ -47,6 +48,7 @@ type SessionVo struct {
 	Width            int            `json:"width"`
 	Height           int            `json:"height"`
 	Status           string         `json:"status"`
+	Recording        string         `json:"recording"`
 	ConnectedTime    utils.JsonTime `json:"connectedTime"`
 	DisconnectedTime utils.JsonTime `json:"disconnectedTime"`
 	AssetName        string         `json:"assetName"`
@@ -60,7 +62,7 @@ func FindPageSession(pageIndex, pageSize int, status, userId, clientIp, assetId,
 
 	params = append(params, status)
 
-	itemSql := "SELECT s.id, s.protocol, s.connection_id, s.asset_id, s.creator, s.client_ip, s.width, s.height, s.ip, s.port, s.username, s.status, s.connected_time, s.disconnected_time, a.name AS asset_name, u.nickname AS creator_name FROM sessions s LEFT JOIN assets a ON s.asset_id = a.id LEFT JOIN users u ON s.creator = u.id WHERE s.STATUS = ? "
+	itemSql := "SELECT s.id, s.protocol,s.recording, s.connection_id, s.asset_id, s.creator, s.client_ip, s.width, s.height, s.ip, s.port, s.username, s.status, s.connected_time, s.disconnected_time, a.name AS asset_name, u.nickname AS creator_name FROM sessions s LEFT JOIN assets a ON s.asset_id = a.id LEFT JOIN users u ON s.creator = u.id WHERE s.STATUS = ? "
 	countSql := "select count(*) from sessions as s where s.status = ? "
 
 	if len(userId) > 0 {

web/src/App.js

@@ -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}/>

web/src/components/Login.js

@@ -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 = "/"
 

web/src/components/session/OfflineSession.js

@@ -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,10 +294,18 @@ 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'
+                                    disabled={disabled}
+                                    icon={<PlaySquareTwoTone twoToneColor={color}/>} onClick={() => this.showPlayback(record.id)}>回放</Button>
                             <Button type="link" size='small' icon={<DeleteTwoTone/>} onClick={() => {
                                 confirm({
                                     title: '您确定要删除此会话吗?',

web/src/components/session/Playback.js

@@ -13,7 +13,7 @@ class Playback extends Component {
     }
 
     initPlayer(sessionId) {
-    var RECORDING_URL = '/recording/' + sessionId + '.guac';
+        var RECORDING_URL = '/sessions/' + sessionId + '/recording';
 
         var player = document.getElementById('player');
         var display = document.getElementById('display');

web/src/components/setting/Setting.js

@@ -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},
+    labelCol: {span: 12},
-    wrapperCol: {span: 9},
+    wrapperCol: {span: 12},
 };
 
 const formTailLayout = {
-    labelCol: {span: 3},
+    labelCol: {span: 12},
-    wrapperCol: {span: 9, offset: 3},
+    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();
@@ -56,23 +61,40 @@ class Setting extends Component {
         };
 
         let result = await request.get('/properties');
-        if (result.code === 1) {
+        if (result['code'] === 1) {
-            let properties = {}
+            let properties = result['data'];
 
-            for (let i = 0; i < result.data.length; i++) {
+            for (let key in properties) {
-                let item = result.data[i];
+                if(!properties.hasOwnProperty(key)){
-                if (item['name'].startsWith('enable') ||
+                    continue;
-                        item['name'].startsWith('disable')) {
+                }
-                    properties[item['name']] = item['value'].bool()
+                if(key.startsWith('enable') || key.startsWith("disable")){
-                }else {
+                    properties[key] = properties[key].bool();
-                    properties[item['name']] = item['value']
                 }
             }
-            this.settingFormRef.current.setFieldsValue(properties)
+            console.log(properties)
+            this.setState({
+                properties: properties
+            })
 
-        } else {
+            if (this.settingFormRef1.current) {
-            message.error(result.message);
+                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']);
+        }
+    }
+
+    handleOnTabChange = () => {
+        this.getProperties()
     }
 
     render() {
@@ -91,51 +113,37 @@ class Setting extends Component {
 
                 <Content className="site-layout-background page-content">
 
-                        <Form ref={this.settingFormRef} name="password" onFinish={this.changeProperties}>
+                    <Tabs tabPosition={'left'} onChange={this.handleOnTabChange} tabBarStyle={{width: 150}}>
-                            <h3>Guacd 服务配置</h3>
 
-                            <Form.Item
+                        <TabPane tab="RDP配置" key="1">
-                                    {...formItemLayout}
+                            <Form ref={this.settingFormRef1} name="password" onFinish={this.changeProperties}
-                                    name="host"
+                                  layout="vertical">
-                                    label="监听地址"
-                                    rules={[
-                                        {
-                                            required: true,
-                                            message: '监听地址',
-                                        },
-                                    ]}
-                            >
-                                <Input type='text' placeholder="请输入监听地址"/>
-                            </Form.Item>
 
-                            <Form.Item
+                                <Title level={3}>RDP配置(远程桌面)</Title>
-                                    {...formItemLayout}
-                                    name="port"
-                                    label="监听端口"
-                                    rules={[
-                                        {
-                                            required: true,
-                                            message: '监听端口',
-                                            min: 1,
-                                            max: 65535
-                                        },
-                                    ]}
-                            >
-                                <Input type='number' placeholder="请输入监听端口"/>
-                            </Form.Item>
-
-
-                            <h3>远程桌面（RDP）配置</h3>
 
                                 <Form.Item
                                     {...formItemLayout}
                                     name="enable-drive"
                                     label="启用设备映射"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
-                                <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
+                                    <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"
@@ -163,12 +171,19 @@ class Setting extends Component {
                                             >
                                                 <Input type='text' placeholder="请输入设备路径"/>
                                             </Form.Item>
+                                        </> : null
+                                }
 
                                 <Form.Item
                                     {...formItemLayout}
                                     name="enable-wallpaper"
                                     label="启用桌面墙纸"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -178,6 +193,11 @@ class Setting extends Component {
                                     name="enable-theming"
                                     label="启用桌面主题"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -187,6 +207,11 @@ class Setting extends Component {
                                     name="enable-font-smoothing"
                                     label="启用字体平滑（ClearType）"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -195,6 +220,11 @@ class Setting extends Component {
                                     name="enable-full-window-drag"
                                     label="启用全窗口拖拽"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -203,6 +233,11 @@ class Setting extends Component {
                                     name="enable-desktop-composition"
                                     label="启用桌面合成效果（Aero）"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -211,6 +246,11 @@ class Setting extends Component {
                                     name="enable-menu-animations"
                                     label="启用菜单动画"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -219,6 +259,11 @@ class Setting extends Component {
                                     name="disable-bitmap-caching"
                                     label="禁用位图缓存"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -227,6 +272,11 @@ class Setting extends Component {
                                     name="disable-offscreen-caching"
                                     label="禁用离屏缓存"
                                     valuePropName="checked"
+                                    rules={[
+                                        {
+                                            required: true,
+                                        },
+                                    ]}
                                 >
                                     <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
                                 </Form.Item>
@@ -236,11 +286,27 @@ class Setting extends Component {
                                     name="disable-glyph-caching"
                                     label="禁用字形缓存"
                                     valuePropName="checked"
+                                    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">
+
+                                <Title level={3}>SSH配置</Title>
 
                                 <Form.Item
                                     {...formItemLayout}
@@ -290,21 +356,96 @@ class Setting extends Component {
                                     </Select>
                                 </Form.Item>
 
-                            <Form.Item
-                                    {...formItemLayout}
-                                    name="enable-sftp"
-                                    label="启用SFTP"
-                                    valuePropName="checked"
-                            >
-                                <Switch checkedChildren="开启" unCheckedChildren="关闭"/>
-                            </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="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"
+                                    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
+                                                {...formItemLayout}
+                                                name="recording-path"
+                                                label="录屏存放路径"
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        message: '请输入录屏存放路径',
+                                                    },
+                                                ]}
+                                            >
+                                                <Input type='text' placeholder="请输入录屏存放路径"/>
+                                            </Form.Item>
+                                        </> : null
+                                }
+
+                                <Form.Item {...formTailLayout}>
+                                    <Button type="primary" htmlType="submit">
+                                        更新
+                                    </Button>
+                                </Form.Item>
+                            </Form>
+                        </TabPane>
+                    </Tabs>
+
 
                 </Content>
             </>