From 98dbf26ea325d76f8273694c7ce43a35c1bd7cef Mon Sep 17 00:00:00 2001
From: chaoszhu <zhulj@aupup.com>
Date: Tue, 23 Jul 2024 12:36:01 +0800
Subject: [PATCH] =?UTF-8?q?:arrow=5Fup:=20=E5=8D=87=E7=BA=A7xterm=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json                              | 11 ++-
 .../terminal/components/terminal-tab.vue      | 50 +++++--------
 yarn.lock                                     | 71 ++++++-------------
 3 files changed, 42 insertions(+), 90 deletions(-)

diff --git a/web/package.json b/web/package.json
index bc9e4bd..8f97ef5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,6 +25,10 @@
     "@codemirror/language": "^6.10.2",
     "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-search": "^0.15.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
     "axios": "^1.7.2",
     "codemirror": "^6.0.1",
     "crypto-js": "^4.2.0",
@@ -34,12 +38,7 @@
     "socket.io-client": "^4.7.5",
     "vue": "^3.4.31",
     "vue-codemirror": "^6.1.1",
-    "vue-router": "^4.4.0",
-    "xterm": "^4.19.0",
-    "xterm-addon-fit": "^0.5.0",
-    "xterm-addon-search": "^0.9.0",
-    "xterm-addon-search-bar": "^0.2.0",
-    "xterm-addon-web-links": "^0.6.0"
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
diff --git a/web/src/views/terminal/components/terminal-tab.vue b/web/src/views/terminal/components/terminal-tab.vue
index d5371ca..a64d503 100644
--- a/web/src/views/terminal/components/terminal-tab.vue
+++ b/web/src/views/terminal/components/terminal-tab.vue
@@ -4,12 +4,12 @@
 
 <script setup>
 import { ref, onMounted, computed, onBeforeUnmount, getCurrentInstance } from 'vue'
-import { Terminal } from 'xterm'
-import 'xterm/css/xterm.css'
-import { FitAddon } from 'xterm-addon-fit'
-import { SearchAddon } from 'xterm-addon-search'
-import { SearchBarAddon } from 'xterm-addon-search-bar'
-import { WebLinksAddon } from 'xterm-addon-web-links'
+import { Terminal } from '@xterm/xterm'
+import '@xterm/xterm/css/xterm.css'
+import { FitAddon } from '@xterm/addon-fit'
+import { SearchAddon } from '@xterm/addon-search'
+// import { SearchBarAddon } from 'xterm-addon-search-bar'
+import { WebLinksAddon } from '@xterm/addon-web-links'
 import socketIo from 'socket.io-client'
 
 const { io } = socketIo
@@ -101,7 +101,7 @@ const connectIO = () => {
 
 const reConnect = () => {
   socket.value.close && socket.value.close()
-  $message.warn('终端连接断开')
+  $message.warning('终端连接断开')
   // $messageBox.alert(
   //   '<strong>终端连接断开</strong>',
   //   'Error',
@@ -123,10 +123,11 @@ const createLocalTerminal = () => {
     disableStdin: false,
     fontSize: 18,
     minimumContrastRatio: 7,
+    allowTransparency: true,
     theme: {
       foreground: '#ECECEC',
-      background: '#000000',
-      cursor: 'help',
+      background: '#000000', // 'transparent',
+      // cursor: 'help',
       selection: '#ff9900',
       lineHeight: 20
     }
@@ -171,11 +172,12 @@ const onWebLinks = () => {
   term.value.loadAddon(new WebLinksAddon())
 }
 
+// :TODO: 重写终端搜索功能
 const onFindText = () => {
   const searchAddon = new SearchAddon()
-  searchBar.value = new SearchBarAddon({ searchAddon })
+  // searchBar.value = new SearchBarAddon({ searchAddon })
   term.value.loadAddon(searchAddon)
-  term.value.loadAddon(searchBar.value)
+  // term.value.loadAddon(searchBar.value)
 }
 
 const onSelectionChange = () => {
@@ -247,6 +249,10 @@ defineExpose({
 .terminal_tab_container {
   min-height: 200px;
 
+  // background-image: url('@/assets/bg.jpg');
+  // background-size: cover;
+  // background-repeat: no-repeat;
+
   :deep(.xterm) {
     height: 100%;
   }
@@ -255,28 +261,6 @@ defineExpose({
   :deep(.xterm-screen) {
     padding: 0 0 0 10px;
     border-radius: var(--el-border-radius-base);
-
-    // 滚动条整体部分
-    &::-webkit-scrollbar {
-      height: 5px;
-      width: 5px;
-      background-color: #ffffff;
-    }
-
-    // 底层轨道
-    &::-webkit-scrollbar-track {
-      background-color: #000;
-      border-radius: 0;
-    }
-
-    // 滚动滑块
-    &::-webkit-scrollbar-thumb {
-      border-radius: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: #067ef7;
-    }
   }
 }
 </style>
diff --git a/yarn.lock b/yarn.lock
index 9253058..016cf39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1360,6 +1360,26 @@
   dependencies:
     vue-demi "*"
 
+"@xterm/addon-fit@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-fit/-/addon-fit-0.10.0.tgz#bebf87fadd74e3af30fdcdeef47030e2592c6f55"
+  integrity sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==
+
+"@xterm/addon-search@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-search/-/addon-search-0.15.0.tgz#5c772d5f14c26546c4bfbeb0c3d4b3333057411f"
+  integrity sha512-ZBZKLQ+EuKE83CqCmSSz5y1tx+aNOCUaA7dm6emgOX+8J9H1FWXZyrKfzjwzV+V14TV3xToz1goIeRhXBS5qjg==
+
+"@xterm/addon-web-links@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz#f283513b8c713757bad8e3bf04b6becc3b4e585f"
+  integrity sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==
+
+"@xterm/xterm@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@xterm/xterm/-/xterm-5.5.0.tgz#275fb8f6e14afa6e8a0c05d4ebc94523ff775396"
+  integrity sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==
+
 accepts@^1.3.5, accepts@~1.3.4:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@@ -1493,14 +1513,6 @@ axios@^1.7.2:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1833,11 +1845,6 @@ cookies@~0.9.0:
     depd "~2.0.0"
     keygrip "~1.1.0"
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -3828,11 +3835,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
@@ -3927,11 +3929,6 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-rxjs-compat@^6.5.4:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.6.7.tgz#6eb4ef75c0a58ea672854a701ccc8d49f41e69cb"
-  integrity sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw==
-
 rxjs@^7.8.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
@@ -4672,34 +4669,6 @@ 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-fit@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
-  integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
-
-xterm-addon-search-bar@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-search-bar/-/xterm-addon-search-bar-0.2.0.tgz#e03c020a5ed22f1e8d503946b26a14ade508bc91"
-  integrity sha512-xvXmBA/ShbnzGe5CCy0kqPNNGqjkpuaRgH3Z1iW0V71vCAPRrtJ/v/hMnysZBH7WGUYhlCQr1cJZagW2fBVvSg==
-  dependencies:
-    babel-runtime "^6.26.0"
-    rxjs-compat "^6.5.4"
-
-xterm-addon-search@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.9.0.tgz#95278ebb818cfcf882209ae75be96e0bea5d52a5"
-  integrity sha512-aoolI8YuHvdGw+Qjg8g2M4kst0v86GtB7WeBm4F0jNXA005/6QbWWy9eCsvnIDLJOFI5JSSrZnD6CaOkvBQYPA==
-
-xterm-addon-web-links@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.6.0.tgz#0296cb6c99588847894670d998c9ea6a6aeb26ee"
-  integrity sha512-H6XzjWWZu8FBo+fnYpxdPk9w5M6drbsvwPEJZGRS38MihiQaVFpKlCMKdfRgDbKGE530tw1yH54rhpZfHgt2/A==
-
-xterm@^4.19.0:
-  version "4.19.0"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0.tgz#c0f9d09cd61de1d658f43ca75f992197add9ef6d"
-  integrity sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ==
-
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"