diff --git a/frontend/config/index.js b/frontend/config/index.js index 00cda387a9a3f35bb1c05ee2a97d1f8a23f42b0e..dd407e4027240e90a2fc8d28491103a8200380e5 100644 --- a/frontend/config/index.js +++ b/frontend/config/index.js @@ -16,7 +16,8 @@ // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') -const basePath = 'http://localhost:8888'; +// const basePath = 'http://localhost:8888'; +const basePath = 'http://10.41.121.4:8888'; //'http://172.17.127.21:8000', // wang //172.17.127.18:10086, zhang module.exports = { @@ -35,6 +36,11 @@ module.exports = { '^/config/macList': '/macList' //路径重写 } }, + '/plugin': { + target: 'http://10.41.121.4:8888', + changeOrigin: true, //改变源 + secure: true, + } }, // Various Dev Server settings host: '0.0.0.0', diff --git a/frontend/vue/components/KyTerminal/index.vue b/frontend/vue/components/KyTerminal/index.vue index 66f1b8a9d10e0e673fd7aeeacef5afb7b396db3d..e3eea6df05bc9159d55e220e5a695cb03925393c 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 f80ecb9c056d7b35ef28253831ec508da5674284..f37151bf12698fb0e0f5cd0913358189c76e793b 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 fecf159da998404e0562b8d69d0831eef5078cd5..dee0b7e18bc1e05e78118950a677bbcfeea5dc6e 100644 --- a/frontend/vue/views/IFrame/IFrame.vue +++ b/frontend/vue/views/IFrame/IFrame.vue @@ -1,7 +1,7 @@