fix

app/src/components/TerminalPart.vue

@@ -13,101 +13,65 @@
 </template>
 <script setup>
 import { Terminal } from 'xterm'
-import { onMounted, ref } from 'vue'
 import { FitAddon } from 'xterm-addon-fit'
 import { AttachAddon } from 'xterm-addon-attach'
-import { stdin, stdout, exit } from 'process'
 import 'xterm/css/xterm.css'
 import { io } from 'socket.io-client'
 // import connect from 'server/src/client'
 
+import { onMounted, ref } from 'vue'
+
 const rows = ref(40)
 const cols = ref(100)
 const terminal = ref(null)
-export default {
-  name: 'TerminalPart',
-  data() {
-    return {
-      term: '', // 保存terminal实例
-      rows: 40,
-      cols: 100,
-    }
-  },
-  mounted() {
-    this.initXterm()
-  },
-  methods: {
-    initXterm() {
-      const xthis = this
-      const term = new Terminal({
-        rendererType: 'canvas', // 渲染类型
-        rows: xthis.rows, // 行数
-        cols: xthis.cols, // 不指定行数，自动回车后光标从下一行开始
-        convertEol: true, // 启用时，光标将设置为下一行的开头
-        // scrollback: 50, //终端中的回滚量
-        disableStdin: false, // 是否应禁用输入
-        // cursorStyle: "underline", //光标样式
-        cursorBlink: true, // 光标闪烁
-        theme: {
-          foreground: '#ECECEC', // 字体
-          background: '#000000', // 背景色
-          cursor: 'help', // 设置光标
-          lineHeight: 20,
-        },
-      })
-      const ws = 'wss://odyssey.wancat.cc'
-      // const ws = 'ws://localhost:3000'
-      const socket = io(ws, {
-        query: {
-          // session_id: sessionId,
-          session_id: '64cb80132077b982b86bdc4f',
-        },
-      })
-      socket.on('message', function incoming(data) {
-        console.log(data)
-        term.write(data)
-      })
-      socket.on('connect', function open() {
-        console.log('Connected to the server.')
-      })
-      // socket.on('message', function incoming(data) {
-      //   stdout.write(data)
-      // })
-      socket.on('disconnect', function close() {
-        console.log('Disconnected from the server.')
-        exit()
-      })
-      socket.on('message', (message) => {
-        console.log(message)
-        term.write(message)
-      })
-      term.onData((data) => {
-        // xthis.socket.emit('data', new TextEncoder().encode(`\x00${data}`))
-        // socket.send('data', new TextEncoder().encode(`\x00${data}`))
-        console.log(data)
-        socket.send(data)
-      })
-      // term.onData(function (key) {
-      //     let order = {
-      //       Data: key,
-      //       Op: "stdin"
-      //     };
-      //     xthis.onSend(order);
-      //   });
-      //   xthis.term = term;
-      // }
-      // const attachAddon = new AttachAddon(socket)
-      // 创建terminal实例
-      // term.loadAddon(attachAddon)
-      term.open(this.$refs.terminal)
-      // 换行并输入起始符 $
-      term.prompt = () => {
-        term.write('\r\n\x1b[33mLinux Odyssey$\x1b[0m ')
-      }
-      term.prompt()
-      // canvas背景全屏
-      const fitAddon = new FitAddon()
-      term.loadAddon(fitAddon)
+
+onMounted(() => {
+  const term = new Terminal({
+    rendererType: 'canvas', // 渲染类型
+    rows: rows.value, // 行数
+    cols: cols.value, // 不指定行数，自动回车后光标从下一行开始
+    convertEol: true, // 启用时，光标将设置为下一行的开头
+    // scrollback: 50, //终端中的回滚量
+    disableStdin: false, // 是否应禁用输入
+    // cursorStyle: "underline", //光标样式
+    cursorBlink: true, // 光标闪烁
+    theme: {
+      foreground: '#ECECEC', // 字体
+      background: '#000000', // 背景色
+      cursor: 'help', // 设置光标
+      lineHeight: 20,
+    },
+  })
+  // const host = 'wss://odyssey.wancat.cc'
+  const host = 'ws://localhost:3000'
+  const socket = io(host, {
+    query: {
+      // session_id: sessionId,
+      session_id: '64d0de0367459c13004bc83f',
+    },
+  })
+  socket.on('connect', function open() {
+    console.log('Connected to the server.')
+  })
+  socket.on('disconnect', function close() {
+    console.log('Disconnected from the server.')
+  })
+  socket.on('message', (message) => {
+    console.log(message)
+    term.write(message)
+  })
+  term.onData((key) => {
+    console.log(key)
+    socket.send(key)
+  })
+  term.open(terminal.value)
+
+  const fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  fitAddon.fit()
+  function resizeScreen() {
+    try {
+      // 窗口大小改变时，触发xterm的resize方法使自适应
       fitAddon.fit()
     } catch (e) {
       console.log('e', e.message)