evan/next-terminal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加对会话操作的优化提示

Browse Source
This commit is contained in:
dushixiang
2021-01-25 23:23:19 +08:00
parent 31f3bad243
commit ac99332453
9 changed files with 175 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/access/Access.js
View File

@ -503,7 +503,7 @@ class Access extends Component {
let stateChecker = setInterval(async () => {
let result = await request.get(`/sessions/${sessionId}`);
if (result['code'] !== 1) {
message.error(result['message']);
clearInterval(stateChecker);
} else {
let session = result['data'];
if (session['status'] === 'connected') {

80
web/src/components/access/Monitor.js
View File

@ -1,6 +1,6 @@
import React, {Component} from 'react';
import Guacamole from 'guacamole-common-js';
import {message, Modal} from 'antd'
import {Modal, Result, Spin} from 'antd'
import qs from "qs";
import {wsServer} from "../../common/constants";
import {getToken} from "../../utils/utils";
@ -20,9 +20,12 @@ class Access extends Component {
state = {
client: {},
containerOverflow: 'hidden',
containerWidth: 0,
containerHeight: 0,
rate: 1
width: 0,
height: 0,
rate: 1,
loading: false,
tip: '',
closed: false,
};
async componentDidMount() {
@ -38,8 +41,8 @@ class Access extends Component {
height = height * 2;
}
this.setState({
containerWidth: width * rate,
containerHeight: height * rate,
width: width * rate,
height: height * rate,
rate: rate,
})
this.renderDisplay(connectionId);
@ -53,40 +56,47 @@ class Access extends Component {
onTunnelStateChange = (state) => {
console.log('onTunnelStateChange', state);
if (state === Guacamole.Tunnel.State.CLOSED) {
this.setState({
loading: false,
closed: true,
});
}
};
onClientStateChange = (state) => {
switch (state) {
case STATE_IDLE:
console.log('初始化');
message.destroy();
message.loading('正在初始化中...', 0);
this.setState({
loading: true,
tip: '正在初始化中...'
});
break;
case STATE_CONNECTING:
console.log('正在连接...');
message.destroy();
message.loading('正在努力连接中...', 0);
this.setState({
loading: true,
tip: '正在努力连接中...'
});
break;
case STATE_WAITING:
console.log('正在等待...');
message.destroy();
message.loading('正在等待服务器响应...', 0);
this.setState({
loading: true,
tip: '正在等待服务器响应...'
});
break;
case STATE_CONNECTED:
console.log('连接成功。');
message.destroy();
message.success('连接成功');
this.setState({
loading: false
});
if (this.state.client) {
this.state.client.getDisplay().scale(this.state.rate);
}
break;
case STATE_DISCONNECTING:
console.log('连接正在关闭中...');
message.destroy();
break;
case STATE_DISCONNECTED:
console.log('连接关闭。');
message.destroy();
break;
default:
break;
@ -211,16 +221,26 @@ class Access extends Component {
render() {
return (
<div>
<div className="container" style={{
overflow: this.state.containerOverflow,
width: this.state.containerWidth,
height: this.state.containerHeight
}}>
<Spin spinning={this.state.loading} tip={this.state.tip}>
<div>
{
this.state.closed ?
<Result
title="远程连接已关闭"
/> :
<div className="container" style={{
overflow: this.state.containerOverflow,
width: this.state.width,
height: this.state.height
}}>
<div id="display"/>
</div>
}
<div id="display"/>
</div>
</div>
</Spin>
);
}
}

45
web/src/components/session/OnlineSession.js
View File

@ -470,27 +470,32 @@ class OnlineSession extends Component {
loading={this.state.loading}
/>
<Modal
className='monitor'
title={this.state.sessionTitle}
centered
maskClosable={false}
visible={this.state.accessVisible}
footer={null}
width={window.innerWidth * 0.8}
height={window.innerWidth * 0.8 / this.state.sessionWidth * this.state.sessionHeight}
onCancel={() => {
this.setState({accessVisible: false})
}}
>
<Monitor connectionId={this.state.connectionId}
width={this.state.sessionWidth}
height={this.state.sessionHeight}
protocol={this.state.sessionProtocol}
rate={window.innerWidth * 0.8 / this.state.sessionWidth}>
{
this.state.accessVisible ?
<Modal
className='monitor'
title={this.state.sessionTitle}
centered
maskClosable={false}
visible={this.state.accessVisible}
footer={null}
width={window.innerWidth * 0.8}
height={window.innerWidth * 0.8 / this.state.sessionWidth * this.state.sessionHeight}
onCancel={() => {
message.destroy();
this.setState({accessVisible: false})
}}
>
<Monitor connectionId={this.state.connectionId}
width={this.state.sessionWidth}
height={this.state.sessionHeight}
protocol={this.state.sessionProtocol}
rate={window.innerWidth * 0.8 / this.state.sessionWidth}>
</Monitor>
</Modal> : undefined
}
</Monitor>
</Modal>
</Content>
</>
);