From b6ac893942a10077f6955b9594ecef7eca9503bf Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Thu, 7 Mar 2024 01:39:51 +0800
Subject: [PATCH] feat:  add xterm.js dependence #4

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 package-lock.json                         | 23 +++++++++-
 package.json                              |  4 +-
 src/views/ssh/components/ssh-terminal.vue | 51 +++++++++++++++++++++++
 src/views/ssh/index.vue                   |  5 ++-
 4 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ssh/components/ssh-terminal.vue

diff --git a/package-lock.json b/package-lock.json
index 9724b90..7015ff1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.4",
       "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",
@@ -16,7 +17,8 @@
         "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",
@@ -2727,6 +2729,11 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
       "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
     },
+    "node_modules/@xterm/xterm": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.4.0.tgz",
+      "integrity": "sha512-GlyzcZZ7LJjhFevthHtikhiDIl8lnTSgol6eTM4aoSNLcuXu3OEhnbqdCVIjtIil3jjabf3gDtb1S8FGahsuEw=="
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -7067,6 +7074,20 @@
         "node": ">=12"
       }
     },
+    "node_modules/xterm": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
+      "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
+      "peer": true
+    },
+    "node_modules/xterm-addon-fit": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.8.0.tgz",
+      "integrity": "sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==",
+      "peerDependencies": {
+        "xterm": "^5.0.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index a1e3d44..4eb0a7f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   },
   "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",
@@ -24,7 +25,8 @@
     "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",
diff --git a/src/views/ssh/components/ssh-terminal.vue b/src/views/ssh/components/ssh-terminal.vue
new file mode 100644
index 0000000..dadbdb5
--- /dev/null
+++ b/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>
diff --git a/src/views/ssh/index.vue b/src/views/ssh/index.vue
index 708f6ea..f9e88ab 100644
--- a/src/views/ssh/index.vue
+++ b/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();