From b90266214d8007bb09a0eac4e22b82bb00a84c80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=83=98?= <hzh0292@qq.com>
Date: Mon, 8 Jul 2024 10:25:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DWebSSH=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E9=A6=96=E6=AC=A1=E6=89=93=E5=BC=80=E6=97=A0=E6=B3=95=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E9=93=BA=E6=BB=A1=E6=95=B4=E4=B8=AA=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E7=AA=97=E5=8F=A3=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/terminal/xterm.vue    | 259 +++++++++---------
 .../src/components/terminal/xterm.vue         | 259 +++++++++---------
 2 files changed, 246 insertions(+), 272 deletions(-)

diff --git a/frontend/src/components/terminal/xterm.vue b/frontend/src/components/terminal/xterm.vue
index f696bae..ae1d9f9 100644
--- a/frontend/src/components/terminal/xterm.vue
+++ b/frontend/src/components/terminal/xterm.vue
@@ -5,153 +5,140 @@
 </template>
 
 <script>
-    import "@xterm/xterm/css/xterm.css"
-    import "@xterm/xterm/lib/xterm.js";
-    import { getJWTAuthorization } from '@/api/request'
-    import { Terminal } from '@xterm/xterm'
-    import { FitAddon } from "@xterm/addon-fit"
-    import { AttachAddon } from '@xterm/addon-attach'
-    export default {
-        name: "LyXterm",
-        props:{
-            fontSize:{
-                type:Number,
-                default:15
-            },
-            wsuri: {
-                type: String,
-                default: ''
-            },
+import "@xterm/xterm/css/xterm.css"
+import "@xterm/xterm/lib/xterm.js"
+import { getJWTAuthorization } from '@/api/request'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from "@xterm/addon-fit"
+import { AttachAddon } from '@xterm/addon-attach'
+export default {
+    name: "LyXterm",
+    props: {
+        fontSize: {
+            type: Number,
+            default: 15
         },
-        data(){
-            return{
-                term: null,
-                lyws: null,
-                cols: 50,
-                rows: 50,
-            }
-        },
-        mounted() {
-            this.initXterm()
-            this.initSocket()
-            window.addEventListener('resize', this.listenResize);
+        wsuri: {
+            type: String,
+            default: ''
         },
-        unmounted() {
-            this.lyws && this.lyws.close()
-            // this.term && this.term.dispose()
-            window.removeEventListener("resize", this.listenResize);
+    },
+    data() {
+        return {
+            term: null,
+            lyws: null,
+            cols: 50,
+            rows: 50,
+        }
+    },
+    mounted() {
+        this.initXterm()
+        this.initSocket()
+        window.addEventListener('resize', this.listenResize)
+    },
+    unmounted() {
+        this.lyws && this.lyws.close()
+        window.removeEventListener("resize", this.listenResize)
+    },
+    methods: {
+        initXterm() {
+            this.term = new Terminal({
+                rendererType: "canvas", // 渲染类型
+                fontSize: this.fontSize,
+                fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
+                scrollback: 500, // 终端中的回滚量
+                convertEol: true, // 启用时，光标将设置为下一行的开头
+                cursorBlink: true, // 光标闪烁
+                disableStdin: false, // 是否应禁用输入。
+                cursorStyle: "block", // 光标样式
+                theme: {
+                    foreground: "yellow", // 字体
+                    background: "black", // 背景色
+                    cursor: "yellow" // 设置光标
+                },
+            })
+            this.term.open(this.$refs.lyxterm)
+            this.term.fitAddon = new FitAddon()
+            this.term.loadAddon(this.term.fitAddon)
         },
-        methods:{
-            //Xterm主题
-            initXterm() {
-                let init_width = 9;
-                let init_height = 22;
-                const _width = window.innerWidth
-                const _height = window.innerHeight
-                this.cols = Math.floor(_width / init_width)
-                this.rows = Math.floor(_height / init_height)
-                this.term = new Terminal({
-                    cols: this.cols,
-                    rows: this.rows,
-                    rendererType: "canvas", //渲染类型
-                    fontSize: this.fontSize,
-                    scrollback: 500,//终端中的回滚量
-                    convertEol: true, //启用时，光标将设置为下一行的开头
-                    cursorBlink: true, //光标闪烁
-                    disableStdin: false, //是否应禁用输入。
-                    cursorStyle: "block", //光标样式
-                    theme: {
-                        foreground: "yellow", //字体
-                        background: "black", //背景色#060101
-                        cursor: "yellow" //设置光标
-                    },
-                })
-                this.term.open(this.$refs.lyxterm)
-            },
-            //websocket初始化
-            initSocket () {
-                this.term.fitAddon = new FitAddon()
-                this.term.loadAddon(this.term.fitAddon)
-                this.lyws = new WebSocket(this.wsuri,['JWTLYADMIN',getJWTAuthorization()])
-                const attachAddon = new AttachAddon(this.lyws)
-                this.term.loadAddon(attachAddon)
-                // 链接成功后
+        // websocket初始化
+        initSocket() {
+            this.lyws = new WebSocket(this.wsuri, ['JWTLYADMIN', getJWTAuthorization()])
+            const attachAddon = new AttachAddon(this.lyws)
+            this.term.loadAddon(attachAddon)
+            // 链接成功后
+            this.term.fitAddon.fit()
+            this.term.focus()
+            // websocket关闭之后操作
+            this.lyws.onclose = () => {
                 this.term.fitAddon.fit()
-                this.term.focus();
-                //websocket关闭之后操作
-                this.lyws.onclose = () => {
-                    this.term.fitAddon.fit()
-                    console.log("close socket");
-                    this.term.write('\r\n连接已被关闭...\r\n')
-                };
-                //websocket链接成功之后操作
-                this.lyws.onopen = () => {
-                    this.term.fitAddon.fit()
-                    this.term.write("Welcome To Django-Vue-Lyadmin WebSSH ☺\r\n")
-                    this.termResize({cols:this.cols,rows:this.rows})
-                };
+                console.log("close socket")
+                this.term.write('\r\n连接已被关闭...\r\n')
+            }
+            // websocket链接成功之后操作
+            this.lyws.onopen = () => {
+                this.term.write("Welcome To Django-Vue-Lyadmin WebSSH ☺\r\n")
+                this.termResize({ cols: this.cols, rows: this.rows })
+            }
 
-                //websocket错误信息
-                this.lyws.onerror = () => {
-                    console.log("websocket 链接错误");
-                    this.term.fitAddon.fit()
-                    this.lyws.close()
-                    this.lyws =null
-                };
-                let that = this
-                this.term.onData(function (data){
-                    if(!that.lyws || that.lyws.readyState == 3 || that.lyws.readyState == 2){
-                        that.term.write('\r\n连接丢失,正在尝试重新连接!\r\n')
-                        that.reconnect()
-                    }
-                })
-                this.term.onResize(({ cols, rows }) => {
-                    this.term.fitAddon.fit()
-                    this.termResize({cols:cols,rows:rows})
-                })
-                // window.onresize = function () {
-                //     that.term.fitAddon.fit()
-                //     if(that.term){
-                //         that.term.focus()
-                //     }
-                // }
-            },
-            termResize(size){
-                if(this.lyws){
-                    size['resize'] = 1;
-                    this.lyws.send(JSON.stringify(size));
-                }
-            },
-            listenResize(){
-                if(this.term){
-                    this.term.fitAddon.fit()
-                    this.term.focus()
-                }
-            },
-            reconnect(){
-                if(!this.lyws || this.lyws.readyState == 3 || this.lyws.readyState == 2){
-                    this.initSocket()
+            // websocket错误信息
+            this.lyws.onerror = () => {
+                console.log("websocket 链接错误")
+                this.term.fitAddon.fit()
+                this.lyws.close()
+                this.lyws = null
+            }
+            let that = this
+            this.term.onData(() => {
+                if (!that.lyws || that.lyws.readyState == 3 || that.lyws.readyState == 2) {
+                    that.term.write('\r\n连接丢失,正在尝试重新连接!\r\n')
+                    that.reconnect()
                 }
-            },
+            })
+            this.term.onResize(({ cols, rows }) => {
+                this.term.fitAddon.fit()
+                this.termResize({ cols: cols, rows: rows })
+            })
         },
-    }
+        termResize() {
+            if (this.lyws) {
+                let size = this.term.fitAddon.proposeDimensions()
+                size['resize'] = 1
+                this.lyws.send(JSON.stringify(size))
+            }
+        },
+        listenResize() {
+            if (this.term) {
+                this.term.fitAddon.fit()
+                this.term.focus()
+            }
+        },
+        reconnect() {
+            if (!this.lyws || this.lyws.readyState == 3 || this.lyws.readyState == 2) {
+                this.initSocket()
+            }
+        },
+    },
+}
 </script>
 
 <style lang="scss" scoped>
-    .xtermbox {
-        width: 100%;
-        height: 100%;
-        background: black;
-        .lyxterm{
-            width: 100%;
-            height: 100%;
-        }
-    }
-    .xterm {
-        position: absolute;
-        left: 0;
-        top: 0;
+.xtermbox {
+    width: 100%;
+    height: 100%;
+    background: black;
+
+    .lyxterm {
         width: 100%;
         height: 100%;
     }
+}
+
+.xterm {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/frontend_vite/src/components/terminal/xterm.vue b/frontend_vite/src/components/terminal/xterm.vue
index f696bae..ae1d9f9 100644
--- a/frontend_vite/src/components/terminal/xterm.vue
+++ b/frontend_vite/src/components/terminal/xterm.vue
@@ -5,153 +5,140 @@
 </template>
 
 <script>
-    import "@xterm/xterm/css/xterm.css"
-    import "@xterm/xterm/lib/xterm.js";
-    import { getJWTAuthorization } from '@/api/request'
-    import { Terminal } from '@xterm/xterm'
-    import { FitAddon } from "@xterm/addon-fit"
-    import { AttachAddon } from '@xterm/addon-attach'
-    export default {
-        name: "LyXterm",
-        props:{
-            fontSize:{
-                type:Number,
-                default:15
-            },
-            wsuri: {
-                type: String,
-                default: ''
-            },
+import "@xterm/xterm/css/xterm.css"
+import "@xterm/xterm/lib/xterm.js"
+import { getJWTAuthorization } from '@/api/request'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from "@xterm/addon-fit"
+import { AttachAddon } from '@xterm/addon-attach'
+export default {
+    name: "LyXterm",
+    props: {
+        fontSize: {
+            type: Number,
+            default: 15
         },
-        data(){
-            return{
-                term: null,
-                lyws: null,
-                cols: 50,
-                rows: 50,
-            }
-        },
-        mounted() {
-            this.initXterm()
-            this.initSocket()
-            window.addEventListener('resize', this.listenResize);
+        wsuri: {
+            type: String,
+            default: ''
         },
-        unmounted() {
-            this.lyws && this.lyws.close()
-            // this.term && this.term.dispose()
-            window.removeEventListener("resize", this.listenResize);
+    },
+    data() {
+        return {
+            term: null,
+            lyws: null,
+            cols: 50,
+            rows: 50,
+        }
+    },
+    mounted() {
+        this.initXterm()
+        this.initSocket()
+        window.addEventListener('resize', this.listenResize)
+    },
+    unmounted() {
+        this.lyws && this.lyws.close()
+        window.removeEventListener("resize", this.listenResize)
+    },
+    methods: {
+        initXterm() {
+            this.term = new Terminal({
+                rendererType: "canvas", // 渲染类型
+                fontSize: this.fontSize,
+                fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
+                scrollback: 500, // 终端中的回滚量
+                convertEol: true, // 启用时，光标将设置为下一行的开头
+                cursorBlink: true, // 光标闪烁
+                disableStdin: false, // 是否应禁用输入。
+                cursorStyle: "block", // 光标样式
+                theme: {
+                    foreground: "yellow", // 字体
+                    background: "black", // 背景色
+                    cursor: "yellow" // 设置光标
+                },
+            })
+            this.term.open(this.$refs.lyxterm)
+            this.term.fitAddon = new FitAddon()
+            this.term.loadAddon(this.term.fitAddon)
         },
-        methods:{
-            //Xterm主题
-            initXterm() {
-                let init_width = 9;
-                let init_height = 22;
-                const _width = window.innerWidth
-                const _height = window.innerHeight
-                this.cols = Math.floor(_width / init_width)
-                this.rows = Math.floor(_height / init_height)
-                this.term = new Terminal({
-                    cols: this.cols,
-                    rows: this.rows,
-                    rendererType: "canvas", //渲染类型
-                    fontSize: this.fontSize,
-                    scrollback: 500,//终端中的回滚量
-                    convertEol: true, //启用时，光标将设置为下一行的开头
-                    cursorBlink: true, //光标闪烁
-                    disableStdin: false, //是否应禁用输入。
-                    cursorStyle: "block", //光标样式
-                    theme: {
-                        foreground: "yellow", //字体
-                        background: "black", //背景色#060101
-                        cursor: "yellow" //设置光标
-                    },
-                })
-                this.term.open(this.$refs.lyxterm)
-            },
-            //websocket初始化
-            initSocket () {
-                this.term.fitAddon = new FitAddon()
-                this.term.loadAddon(this.term.fitAddon)
-                this.lyws = new WebSocket(this.wsuri,['JWTLYADMIN',getJWTAuthorization()])
-                const attachAddon = new AttachAddon(this.lyws)
-                this.term.loadAddon(attachAddon)
-                // 链接成功后
+        // websocket初始化
+        initSocket() {
+            this.lyws = new WebSocket(this.wsuri, ['JWTLYADMIN', getJWTAuthorization()])
+            const attachAddon = new AttachAddon(this.lyws)
+            this.term.loadAddon(attachAddon)
+            // 链接成功后
+            this.term.fitAddon.fit()
+            this.term.focus()
+            // websocket关闭之后操作
+            this.lyws.onclose = () => {
                 this.term.fitAddon.fit()
-                this.term.focus();
-                //websocket关闭之后操作
-                this.lyws.onclose = () => {
-                    this.term.fitAddon.fit()
-                    console.log("close socket");
-                    this.term.write('\r\n连接已被关闭...\r\n')
-                };
-                //websocket链接成功之后操作
-                this.lyws.onopen = () => {
-                    this.term.fitAddon.fit()
-                    this.term.write("Welcome To Django-Vue-Lyadmin WebSSH ☺\r\n")
-                    this.termResize({cols:this.cols,rows:this.rows})
-                };
+                console.log("close socket")
+                this.term.write('\r\n连接已被关闭...\r\n')
+            }
+            // websocket链接成功之后操作
+            this.lyws.onopen = () => {
+                this.term.write("Welcome To Django-Vue-Lyadmin WebSSH ☺\r\n")
+                this.termResize({ cols: this.cols, rows: this.rows })
+            }
 
-                //websocket错误信息
-                this.lyws.onerror = () => {
-                    console.log("websocket 链接错误");
-                    this.term.fitAddon.fit()
-                    this.lyws.close()
-                    this.lyws =null
-                };
-                let that = this
-                this.term.onData(function (data){
-                    if(!that.lyws || that.lyws.readyState == 3 || that.lyws.readyState == 2){
-                        that.term.write('\r\n连接丢失,正在尝试重新连接!\r\n')
-                        that.reconnect()
-                    }
-                })
-                this.term.onResize(({ cols, rows }) => {
-                    this.term.fitAddon.fit()
-                    this.termResize({cols:cols,rows:rows})
-                })
-                // window.onresize = function () {
-                //     that.term.fitAddon.fit()
-                //     if(that.term){
-                //         that.term.focus()
-                //     }
-                // }
-            },
-            termResize(size){
-                if(this.lyws){
-                    size['resize'] = 1;
-                    this.lyws.send(JSON.stringify(size));
-                }
-            },
-            listenResize(){
-                if(this.term){
-                    this.term.fitAddon.fit()
-                    this.term.focus()
-                }
-            },
-            reconnect(){
-                if(!this.lyws || this.lyws.readyState == 3 || this.lyws.readyState == 2){
-                    this.initSocket()
+            // websocket错误信息
+            this.lyws.onerror = () => {
+                console.log("websocket 链接错误")
+                this.term.fitAddon.fit()
+                this.lyws.close()
+                this.lyws = null
+            }
+            let that = this
+            this.term.onData(() => {
+                if (!that.lyws || that.lyws.readyState == 3 || that.lyws.readyState == 2) {
+                    that.term.write('\r\n连接丢失,正在尝试重新连接!\r\n')
+                    that.reconnect()
                 }
-            },
+            })
+            this.term.onResize(({ cols, rows }) => {
+                this.term.fitAddon.fit()
+                this.termResize({ cols: cols, rows: rows })
+            })
         },
-    }
+        termResize() {
+            if (this.lyws) {
+                let size = this.term.fitAddon.proposeDimensions()
+                size['resize'] = 1
+                this.lyws.send(JSON.stringify(size))
+            }
+        },
+        listenResize() {
+            if (this.term) {
+                this.term.fitAddon.fit()
+                this.term.focus()
+            }
+        },
+        reconnect() {
+            if (!this.lyws || this.lyws.readyState == 3 || this.lyws.readyState == 2) {
+                this.initSocket()
+            }
+        },
+    },
+}
 </script>
 
 <style lang="scss" scoped>
-    .xtermbox {
-        width: 100%;
-        height: 100%;
-        background: black;
-        .lyxterm{
-            width: 100%;
-            height: 100%;
-        }
-    }
-    .xterm {
-        position: absolute;
-        left: 0;
-        top: 0;
+.xtermbox {
+    width: 100%;
+    height: 100%;
+    background: black;
+
+    .lyxterm {
         width: 100%;
         height: 100%;
     }
+}
+
+.xterm {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
 </style>
\ No newline at end of file
-- 
Gitee