feat: add xterm.js dependence #4

Signed-off-by: seven <[email protected]>

package.json

@@ -17,14 +17,16 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1.5.2",
+    "@xterm/xterm": "^5.4.0",
     "oh-vue-icons": "^1.0.0-rc3",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
     "ulidx": "^2.3.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.5.8",

src/views/ssh/components/ssh-terminal.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div ref="terminalContainer"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '@xterm/xterm/css/xterm.css';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from 'xterm-addon-fit';
+
+const terminal = new Terminal({
+  cursorBlink: true, // 光标闪烁
+  cursorStyle: 'bar',
+  cursorInactiveStyle: 'underline', // 光标样式
+});
+const fitAddon = new FitAddon();
+
+const terminalContainer = ref();
+
+// Handle the key event
+terminal.onKey(e => {
+  const code = e.domEvent.code.toLowerCase();
+  const enter = () => terminal.write('\r\n');
+  const backspace = () => terminal.write('\b \b');
+  const write = (key: string) => terminal.write(key);
+  const keyActions: { [key: string]: () => void } = {
+    enter,
+    backspace,
+  };
+  (keyActions[code] || (() => write(e.key)))();
+});
+
+onMounted(() => {
+  terminal.loadAddon(fitAddon);
+  // Attach the terminal to the container
+  terminal.open(terminalContainer.value);
+  fitAddon.fit();
+
+  // Example: Write text to the terminal
+  terminal.write('Welcome to the Vue 3 + xterm.js example!\r\n');
+
+  // Optional: Add terminal handling logic, e.g., for executing commands
+  // terminal.onData((data: string) => {
+  //   terminal.write(data);
+  //   console.log('terminal on data', data);
+  // });
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/ssh/index.vue

@@ -11,7 +11,9 @@
       <div class="table-select">
         <ssh-selector />
       </div>
-      <div class="editor-container"></div>
+      <div class="editor-container">
+        <ssh-terminal />
+      </div>
     </div>
   </div>
   <ssh-modal ref="sshModalRef" />
@@ -21,6 +23,7 @@
 import sshModal from './components/ssh-dialog.vue';
 import sshList from './components/ssh-list.vue';
 import sshSelector from './components/ssh-selector.vue';
+import sshTerminal from './components/ssh-terminal.vue';
 import { useAppStore } from '../../store';
 
 const appStore = useAppStore();