changed WidgetTerminal to TerminalPart, add xterm attach but seemed not fit to use on http://localhost:3000

app/package.json

@@ -15,7 +15,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "axios": "^1.4.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "xterm": "^5.2.1",
+    "xterm-addon-attach": "^0.8.0",
+    "xterm-addon-fit": "^0.7.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

app/src/App.vue

@@ -73,3 +73,4 @@ import VisualizationPart from './components/VisualizationPart.vue'
     </div>
   </div>
 </template>
+<script></script>

app/src/components/TerminalPart.vue

@@ -3,9 +3,112 @@
 <template>
   <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
   <button class="text-text h-[5%]">Terminal</button>
-  <div class="bg-background-secondary h-[calc(100%-5%)] p-4">
-    <p class="text-text-primary">
+  <div
+    id="terminal"
+    ref="terminal"
+    class="bg-background-secondary h-[calc(100%-5%)] p-0.5"
+  >
+    <!-- <p class="text-text-primary">
       zeko@first-command<span class="text-text">:~$</span>
-    </p>
+    </p> -->
   </div>
 </template>
+<script>
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import { AttachAddon } from 'xterm-addon-attach'
+import 'xterm/css/xterm.css'
+// import connect from 'server/src/client'
+
+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 socket = new WebSocket('http://localhost:3000')
+      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)
+      fitAddon.fit()
+      function resizeScreen() {
+        try {
+          // 窗口大小改变时，触发xterm的resize方法使自适应
+          fitAddon.fit()
+        } catch (e) {
+          console.log('e', e.message)
+        }
+      }
+      window.addEventListener('resize', resizeScreen)
+      xthis.term = term
+      xthis.runFakeTerminal()
+    },
+    runFakeTerminal() {
+      const xthis = this
+      const { term } = xthis
+      if (term.xinitialized) return
+      // 初始化
+      term.xinitialized = true
+      term.writeln('Welcome to \x1b[1;32mLinux Odyssey\x1b[0m!')
+      term.prompt()
+      // 添加事件监听器，支持输入方法
+      term.onKey((e) => {
+        const printable =
+          !e.domEvent.altKey &&
+          !e.domEvent.altGraphKey &&
+          !e.domEvent.ctrlKey &&
+          !e.domEvent.metaKey
+        if (e.domEvent.keyCode === 13) {
+          term.prompt()
+        } else if (e.domEvent.keyCode === 8) {
+          // back 删除的情况
+          if (term.xcore.buffer.x > 2) {
+            term.write('\b \b')
+          }
+        } else if (printable) {
+          term.write(e.key)
+        }
+        console.log(1, 'print', e.key)
+      })
+      term.onData((key) => {
+        // 粘贴的情况
+        if (key.length > 1) term.write(key)
+      })
+    },
+  },
+}
+</script>

yarn.lock

@@ -4887,6 +4887,21 @@ xmlhttprequest-ssl@~2.0.0:
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
   integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
+xterm-addon-attach@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-attach/-/xterm-addon-attach-0.8.0.tgz#86e0ed08460efffb7d4bad74a57b600226594def"
+  integrity sha512-k8N5boSYn6rMJTTNCgFpiSTZ26qnYJf3v/nJJYexNO2sdAHDN3m1ivVQWVZ8CHJKKnZQw1rc44YP2NtgalWHfQ==
+
+xterm-addon-fit@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.7.0.tgz#b8ade6d96e63b47443862088f6670b49fb752c6a"
+  integrity sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==
+
+xterm@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-5.2.1.tgz#b3fea7bdb55b9be1d4b31f4cd1091f26ac42afb8"
+  integrity sha512-cs5Y1fFevgcdoh2hJROMVIWwoBHD80P1fIP79gopLHJIE4kTzzblanoivxTiQ4+92YM9IxS36H1q0MxIJXQBcA==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"