From 80d4f146a4c9f1fa0b9878e963f27bda928e8cf2 Mon Sep 17 00:00:00 2001 From: wanghaohao Date: Fri, 1 Sep 2023 14:39:47 +0800 Subject: [PATCH 1/2] Terminal bug modification --- frontend/vue/components/KyTerminal/index.vue | 65 +++++++++--- frontend/vue/main.js | 21 +++- frontend/vue/views/IFrame/IFrame.vue | 16 ++- frontend/vue/views/UserManager/UserMan.vue | 100 ++++++++----------- 4 files changed, 127 insertions(+), 75 deletions(-) diff --git a/frontend/vue/components/KyTerminal/index.vue b/frontend/vue/components/KyTerminal/index.vue index 66f1b8a9..e3eea6df 100644 --- a/frontend/vue/components/KyTerminal/index.vue +++ b/frontend/vue/components/KyTerminal/index.vue @@ -24,7 +24,8 @@ import { AttachAddon } from 'xterm-addon-attach' import { debounce } from 'lodash' // resize相关 import Config from '../../../config/index.js' import 'xterm/css/xterm.css' - +import Base64 from "crypto-js/enc-base64" +import Utf8 from "crypto-js/enc-utf8" const packResize = (col, row) => JSON.stringify({ Op: 'resize', @@ -35,9 +36,9 @@ export default { name: 'Terminal', props: { msg: { - type: String + type: String } - }, + }, data() { return { first: true, @@ -56,7 +57,7 @@ export default { theme: { background: '#181d28' }, - cols: 10 + cols: 200 } } }, @@ -65,16 +66,19 @@ export default { return this.ws && this.ws.readyState === 1 }, socketUrl() { - return (location.protocol === "http:" ? "ws" : "wss") + "://" + - Config.dev.proxyTable['/'].target.split('//')[1] + - "/ws"+ "?" + "msg=" + this.msg + "&rows=" + this.rows + "&cols=" + this.cols; + console.log("Config", Config, this.rows, this.cols) + return (location.protocol === "http:" ? "ws" : "wss") + "://" + + Config.dev.proxyTable['/api/v1'].target.split('//')[1] + + "/ws" + "?" + "msg=" + this.msg + "&rows=" + this.rows + "&cols=" + this.cols; } }, mounted() { this.initSocket(); + // this.onTerminalResize() setTimeout(() => { - this.fitAddon.fit() - }, 60) + // this.fitAddon.fit() + this.onTerminalKeyPress() + }, 100) }, beforeDestroy() { this.ws.close(); @@ -83,6 +87,7 @@ export default { methods: { initTerm() { const term = new Terminal(this.option) + console.log('term', term) this.attachAddon = new AttachAddon(this.ws); this.fitAddon = new FitAddon() term.loadAddon(this.attachAddon) @@ -95,36 +100,54 @@ export default { // resize 相关 resizeRemoteTerminal() { + console.log(this.isWsOpen, 234) const { cols, rows } = this.term - this.isWsOpen && this.ws.send(packResize(cols, rows)) + // this.isWsOpen && this.ws.send(packResize(cols, rows)) + this.isWsOpen && this.ws.send('2' + Base64.stringify(Utf8.parse( + JSON.stringify({ + columns: cols, + rows: rows + }) + ))) }, onResize: debounce(function () { this.fitAddon.fit() }, 500), onTerminalResize() { + console.log('hihi', this.term) window.addEventListener('resize', this.onResize) this.term.onResize(this.resizeRemoteTerminal) + // this.resizeRemoteTerminal() }, removeResizeListener() { window.removeEventListener('resize', this.onResize) }, - + onTerminalKeyPress() { + this.term.onData(data => { + console.log(33333333, this.isWsOpen, data) + this.isWsOpen && this.ws.send('1' + Base64.stringify(Utf8.parse(data))) + }) + }, // socket initSocket() { this.ws = new WebSocket(this.socketUrl) this.openSocket() this.closeSocket() this.errorSocket() + this.messageSocket() }, // 打开连接 openSocket() { this.ws.onopen = () => { - this.initTerm(); + this.term = this.initTerm(); + // this.initTerm(); + console.log('连上了') } }, // 关闭连接 closeSocket() { this.ws.onclose = () => { + console.log('关上了') } }, // 连接错误 @@ -133,6 +156,20 @@ export default { this.$message.error('websoket连接失败,请刷新!') } }, + // 接收消息 + messageSocket() { + this.ws.onmessage = res => { + console.log('data', res.data) + const term = this.term + if (this.first) { + this.first = false + term.reset() + term.element && term.focus() + this.resizeRemoteTerminal() + } + } + } + } } // @@ -143,8 +180,10 @@ export default { background: rgb(24, 29, 40); padding: 12px; color: rgb(255, 255, 255); + .xterm-scroll-area::-webkit-scrollbar-thumb { - background-color: #b7c4d1; /* 滚动条的背景颜色 */ + background-color: #b7c4d1; + /* 滚动条的背景颜色 */ } } diff --git a/frontend/vue/main.js b/frontend/vue/main.js index f80ecb9c..f37151bf 100644 --- a/frontend/vue/main.js +++ b/frontend/vue/main.js @@ -32,8 +32,25 @@ import 'vue-draggable-resizable/dist/VueDraggableResizable.css' // import './mock/index.js' //引入mockjs,上线后注掉 import microApp from '@micro-zoe/micro-app' //注入微服务 - -microApp.start() +const lifeCycles = { + created() { + // microApp.setData('Plugin0', { path: '/' }) + console.log('标签初始化后，加载资源前触发') + }, + beforemount() { + console.log('加载资源完成后，开始渲染之前触发') + }, + mounted() { + console.log('子应用渲染结束后触发') + }, + unmount() { + console.log('子应用卸载时触发') + }, + error() { + console.log('子应用渲染出错时触发，只有会导致渲染终止的错误才会触发此生命周期') + } +} +microApp.start({ lifeCycles }) Vue.prototype.$http = axios diff --git a/frontend/vue/views/IFrame/IFrame.vue b/frontend/vue/views/IFrame/IFrame.vue index fecf159d..307da2e7 100644 --- a/frontend/vue/views/IFrame/IFrame.vue +++ b/frontend/vue/views/IFrame/IFrame.vue @@ -1,8 +1,8 @@ @@ -28,24 +28,36 @@ export default { }, // 即将被渲染，只在初始化时执行一次 beforemount() { + console.log('beforemount') }, // 已经渲染完成，只在初始化时执行一次 mounted() { + console.log('mounted') + this.loading = false; }, // 已卸载 afterhidden() { + console.log('afterhidden') + }, // 即将重新渲染，初始化时不执行 beforeshow() { + console.log('beforeshow') + + this.loading = true; }, // 已经重新渲染，初始化时不执行 aftershow() { + console.log('aftershowssss') + this.loading = false; }, // 渲染出错 error() { + console.log('errorvvvsss') + this.loading = false; } } diff --git a/frontend/vue/views/UserManager/UserMan.vue b/frontend/vue/views/UserManager/UserMan.vue index cd775b05..30751f6c 100644 --- a/frontend/vue/views/UserManager/UserMan.vue +++ b/frontend/vue/views/UserManager/UserMan.vue @@ -1,72 +1,53 @@ - - - - + + + + @@ -102,10 +83,10 @@ export default { this.display = false; this.title = ""; this.type = ""; - if(type === 'success') { + if (type === 'success') { this.refresh(); } - }, + }, handleRoles(roles) { if (roles && roles.length > 0) { let roleString = ""; @@ -121,12 +102,12 @@ export default { return "暂无"; } }, - refresh(){ + refresh() { this.$refs.table.handleSearch(); }, searchUser() { - searchUser({'email':this.emailInput}).then((res) => { - if(res.data.code === 200) { + searchUser({ 'email': this.emailInput }).then((res) => { + if (res.data.code === 200) { this.$refs.table.handleLoadSearch(res.data.data); } }) @@ -143,8 +124,8 @@ export default { this.type = "update"; }, handleReset(email) { - resetPwd({'email': email}).then((res) => { - if(res.data.code === 200){ + resetPwd({ 'email': email }).then((res) => { + if (res.data.code === 200) { this.$message.success("重置密码成功") this.refresh(); } else { @@ -157,8 +138,8 @@ export default { this.$refs.table.selectRow.rows.forEach(item => { delDatas.push(item.email); }); - delUser({email: delDatas}).then(res => { - if(res.status === 200) { + delUser({ email: delDatas }).then(res => { + if (res.status === 200) { this.$message.success(res.data.msg); this.refresh(); } else { @@ -168,10 +149,11 @@ export default { }, handleExport() { - const xlsxParam = { raw: true }; + const xlsxParam = { raw: true }; const exportTabElement = document.querySelector('#exportTab'); const fixed = exportTabElement.querySelector(".el-table__fixed") || exportTabElement.querySelector(".el-table__fixed-right"); let t2b = null; + console.log(exportTabElement, 33333) if (fixed) { const parentNode = fixed.parentNode; parentNode.removeChild(fixed); @@ -180,21 +162,22 @@ export default { } else { t2b = XLSX.utils.table_to_book(exportTabElement, xlsxParam); } + t2b.Sheets.Sheet1['!cols'][6] = { hidden: true } const userExcel = XLSX.write(t2b, { bookType: 'xlsx', bookSST: true, type: 'array' }); try { FileSaver.saveAs( new Blob([userExcel], { - type: 'application/octet-stream' - }), 'userInfo.xlsx'); + type: 'application/octet-stream' + }), 'userInfo.xlsx'); } catch (e) { - console.log(e, userExcel); - this.$message.error("导出失败") + console.log(e, userExcel); + this.$message.error("导出失败") } return userExcel; }, beforeUpload(file) { const fileData = file.name.split("."); - if (fileData[fileData.length-1] !== 'xlsx') { + if (fileData[fileData.length - 1] !== 'xlsx') { this.$message.error('请上传xlsx格式表格!'); return false; } @@ -213,9 +196,10 @@ export default {