⚡ 升级依赖版本.

orion-visor-module-infra/orion-visor-module-infra-service/src/main/java/com/orion/visor/module/infra/handler/preference/model/TerminalPreferenceModel.java

@@ -65,6 +65,9 @@ public class TerminalPreferenceModel implements PreferenceModel {
         @Schema(description = "行高")
         private Double lineHeight;
 
+        @Schema(description = "字间距")
+        private Integer letterSpacing;
+
         @Schema(description = "文本字重")
         private String fontWeight;
 
@@ -129,6 +132,9 @@ public class TerminalPreferenceModel implements PreferenceModel {
         @Schema(description = "WebGL 渲染插件")
         private Boolean enableWebglPlugin;
 
+        @Schema(description = "unicode11 插件")
+        private Boolean enableUnicodePlugin;
+
         @Schema(description = "图片渲染插件")
         private Boolean enableImagePlugin;
 

orion-visor-module-infra/orion-visor-module-infra-service/src/main/java/com/orion/visor/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java

@@ -24,6 +24,7 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
                 .fontFamily("_")
                 .fontSize(13)
                 .lineHeight(1.12)
+                .letterSpacing(1)
                 .fontWeight("normal")
                 .fontWeightBold("bold")
                 .cursorStyle("bar")
@@ -48,6 +49,7 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
         String defaultPluginsSetting = TerminalPreferenceModel.PluginsSettingModel.builder()
                 .enableWeblinkPlugin(true)
                 .enableWebglPlugin(true)
+                .enableUnicodePlugin(true)
                 .enableImagePlugin(false)
                 .build()
                 .toJsonString();

orion-visor-ui/package.json

@@ -36,6 +36,14 @@
     "@dangojs/a-query-header": "^0.0.31",
     "@sanqi377/arco-vue-icon-picker": "^1.0.7",
     "@vueuse/core": "^9.3.0",
+    "@xterm/addon-canvas": "^0.7.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-image": "^0.8.0",
+    "@xterm/addon-search": "^0.15.0",
+    "@xterm/addon-unicode11": "^0.8.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/addon-webgl": "^0.18.0",
+    "@xterm/xterm": "^5.5.0",
     "axios": "^0.24.0",
     "cron-parser": "^4.9.0",
     "dayjs": "^1.11.5",
@@ -49,18 +57,12 @@
     "pinia": "^2.0.23",
     "query-string": "^8.0.3",
     "sortablejs": "^1.15.0",
+    "streamsaver": "^2.0.6",
     "ts-md5": "^1.3.1",
     "vue": "^3.2.40",
     "vue-echarts": "^6.2.3",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.0.14",
-    "xterm": "^5.3.0",
-    "xterm-addon-canvas": "^0.5.0",
-    "xterm-addon-fit": "^0.8.0",
-    "xterm-addon-image": "^0.5.0",
-    "xterm-addon-search": "^0.13.0",
-    "xterm-addon-web-links": "^0.9.0",
-    "xterm-addon-webgl": "^0.16.0"
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@arco-plugins/vite-vue": "^1.4.5",
@@ -71,6 +73,7 @@
     "@types/mockjs": "^1.0.7",
     "@types/nprogress": "^0.2.0",
     "@types/sortablejs": "^1.15.0",
+    "@types/streamsaver": "^2.0.4",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "@vitejs/plugin-vue": "^3.1.2",

orion-visor-ui/src/components/exec/log/const.ts

@@ -1,8 +1,9 @@
-import type { IDisposable, ITerminalInitOnlyOptions, ITerminalOptions, Terminal } from 'xterm';
-import type { FitAddon } from 'xterm-addon-fit';
-import type { SearchAddon } from 'xterm-addon-search';
-import type { WebLinksAddon } from 'xterm-addon-web-links';
-import type { WebglAddon } from 'xterm-addon-webgl';
+import type { IDisposable, ITerminalInitOnlyOptions, ITerminalOptions, Terminal } from '@xterm/xterm';
+import type { FitAddon } from '@xterm/addon-fit';
+import type { SearchAddon } from '@xterm/addon-search';
+import type { WebLinksAddon } from '@xterm/addon-web-links';
+import type { WebglAddon } from '@xterm/addon-webgl';
+import type { Unicode11Addon } from '@xterm/addon-unicode11';
 
 // 执行类型
 export type ExecType = 'BATCH' | 'JOB';
@@ -61,6 +62,7 @@ export const LogAppenderOptions: ITerminalOptions & ITerminalInitOnlyOptions = {
   fontSize: 13,
   lineHeight: 1.12,
   convertEol: true,
+  allowProposedApi: true,
 };
 
 // dom 引用
@@ -85,6 +87,7 @@ export interface LogAddons extends Record<string, IDisposable> {
   webgl: WebglAddon;
   search: SearchAddon;
   weblink: WebLinksAddon;
+  unicode: Unicode11Addon;
 }
 
 // 执行日志 appender 定义

orion-visor-ui/src/components/exec/log/panel/log-appender.ts

@@ -8,11 +8,12 @@ import { Message } from '@arco-design/web-vue';
 import { useDebounceFn } from '@vueuse/core';
 import { addEventListen, removeEventListen } from '@/utils/event';
 import { copy as copyText } from '@/hooks/copy';
-import { Terminal } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
-import { SearchAddon } from 'xterm-addon-search';
-import { WebLinksAddon } from 'xterm-addon-web-links';
-import { WebglAddon } from 'xterm-addon-webgl';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { SearchAddon } from '@xterm/addon-search';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { WebglAddon } from '@xterm/addon-webgl';
+import { Unicode11Addon } from '@xterm/addon-unicode11';
 
 // 执行日志 appender 实现
 export default class LogAppender implements ILogAppender {
@@ -130,15 +131,19 @@ export default class LogAppender implements ILogAppender {
     const search = new SearchAddon();
     const webgl = new WebglAddon();
     const weblink = new WebLinksAddon();
+    const unicode = new Unicode11Addon();
     terminal.loadAddon(fit);
     terminal.loadAddon(search);
     terminal.loadAddon(webgl);
     terminal.loadAddon(weblink);
+    terminal.loadAddon(unicode);
+    terminal.unicode.activeVersion = '11';
     return {
       fit,
       search,
       webgl,
-      weblink
+      weblink,
+      unicode
     };
   }
 

orion-visor-ui/src/components/exec/log/panel/log-item.vue

@@ -176,7 +176,7 @@
   import { downloadExecJobLogFile } from '@/api/job/exec-job-log';
   import { downloadFile } from '@/utils/file';
   import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
-  import 'xterm/css/xterm.css';
+  import '@xterm/xterm/css/xterm.css';
 
   const props = defineProps<{
     type: ExecType;

orion-visor-ui/src/components/xtrem/search-modal/index.vue

@@ -58,7 +58,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { ISearchOptions } from 'xterm-addon-search';
+  import type { ISearchOptions } from '@xterm/addon-search';
   import useVisible from '@/hooks/visible';
   import { nextTick, ref } from 'vue';
 

orion-visor-ui/src/store/modules/terminal/types.ts

@@ -29,6 +29,7 @@ export interface TerminalDisplaySetting {
   fontFamily?: string;
   fontSize?: number;
   lineHeight?: number;
+  letterSpacing?: number;
   fontWeight?: string | number;
   fontWeightBold?: string | number;
   cursorStyle?: string;
@@ -61,6 +62,7 @@ export interface TerminalInteractSetting {
 export interface TerminalPluginsSetting {
   enableWeblinkPlugin: boolean;
   enableWebglPlugin: boolean;
+  enableUnicodePlugin: boolean;
   enableImagePlugin: boolean;
 }
 

orion-visor-ui/src/views/host/terminal/components/setting/display/terminal-display-block.vue

@@ -13,72 +13,86 @@
       <a-form class="terminal-setting-form"
               :model="formModel"
               layout="vertical">
-        <a-space>
+        <a-row :gutter="48">
           <!-- 字体样式 -->
-          <a-form-item field="fontFamily" label="字体样式">
-            <a-select v-model="formModel.fontFamily"
-                      class="form-item-font-family"
-                      placeholder="请选择字体样式"
-                      :options="toOptions(fontFamilyKey)"
-                      :allow-create="true"
-                      :filter-option="labelFilter">
-              <template #option="{ data }">
-                <span :style="{ fontFamily: data.value }">{{ data.label }}</span>
-              </template>
-              <template #label="{ data }">
-                <span :style="{ fontFamily: data.value }">{{ data.label }}</span>
-              </template>
-            </a-select>
-          </a-form-item>
+          <a-col :span="12">
+            <a-form-item field="fontFamily" label="字体样式">
+              <a-select v-model="formModel.fontFamily"
+                        placeholder="请选择字体样式"
+                        :options="toOptions(fontFamilyKey)"
+                        :allow-create="true"
+                        :filter-option="labelFilter">
+                <template #option="{ data }">
+                  <span :style="{ fontFamily: data.value }">{{ data.label }}</span>
+                </template>
+                <template #label="{ data }">
+                  <span :style="{ fontFamily: data.value }">{{ data.label }}</span>
+                </template>
+              </a-select>
+            </a-form-item>
+          </a-col>
           <!-- 字体大小 -->
-          <a-form-item field="fontSize" label="字体大小">
-            <a-select v-model="formModel.fontSize"
-                      class="form-item-font-size"
-                      placeholder="请选择字体大小"
-                      :options="toOptions(fontSizeKey)" />
-          </a-form-item>
+          <a-col :span="12">
+            <a-form-item field="fontSize" label="字体大小">
+              <a-select v-model="formModel.fontSize"
+                        placeholder="请选择字体大小"
+                        :options="toOptions(fontSizeKey)" />
+            </a-form-item>
+          </a-col>
           <!-- 行高 -->
-          <a-form-item field="lineHeight" label="行高">
-            <a-input-number v-model="formModel.lineHeight"
-                            class="form-item-line-height"
-                            placeholder="请输入行高"
-                            :precision="2"
-                            :min="1"
-                            :max="2"
-                            hide-button />
-          </a-form-item>
-        </a-space>
-        <a-space>
+          <a-col :span="12">
+            <a-form-item field="lineHeight" label="行高">
+              <a-input-number v-model="formModel.lineHeight"
+                              placeholder="请输入行高"
+                              :precision="2"
+                              :step="0.05"
+                              :min="1"
+                              :max="2" />
+            </a-form-item>
+          </a-col>
+          <!-- 字间距 -->
+          <a-col :span="12">
+            <a-form-item field="lineHeight" label="字间距 (px)">
+              <a-input-number v-model="formModel.letterSpacing"
+                              placeholder="请输入字间距"
+                              :precision="0"
+                              :step="1"
+                              :min="-5"
+                              :max="5" />
+            </a-form-item>
+          </a-col>
           <!-- 普通文本字重 -->
-          <a-form-item field="fontWeight" label="普通文本字重">
-            <a-select v-model="formModel.fontWeight"
-                      class="form-item-font-weight"
-                      placeholder="请选择字重"
-                      :options="toOptions(fontWeightKey)" />
-          </a-form-item>
+          <a-col :span="12">
+            <a-form-item field="fontWeight" label="普通文本字重">
+              <a-select v-model="formModel.fontWeight"
+                        placeholder="请选择字重"
+                        :options="toOptions(fontWeightKey)" />
+            </a-form-item>
+          </a-col>
           <!-- 加粗文本字重 -->
-          <a-form-item field="fontWeightBold" label="加粗文本字重">
-            <a-select v-model="formModel.fontWeightBold"
-                      class="form-item-font-bold-weight"
-                      placeholder="请选择字重"
-                      :options="toOptions(fontWeightKey)" />
-          </a-form-item>
-        </a-space>
-        <a-space>
+          <a-col :span="12">
+            <a-form-item field="fontWeightBold" label="加粗文本字重">
+              <a-select v-model="formModel.fontWeightBold"
+                        placeholder="请选择字重"
+                        :options="toOptions(fontWeightKey)" />
+            </a-form-item>
+          </a-col>
           <!-- 光标样式 -->
-          <a-form-item field="cursorStyle" label="光标样式">
-            <a-radio-group type="button"
-                           v-model="formModel.cursorStyle"
-                           class="form-item-cursor-style usn"
-                           :options="toRadioOptions(cursorStyleKey)" />
-          </a-form-item>
+          <a-col :span="12">
+            <a-form-item field="cursorStyle" label="光标样式">
+              <a-radio-group type="button"
+                             v-model="formModel.cursorStyle"
+                             class="form-item-cursor-style usn"
+                             :options="toRadioOptions(cursorStyleKey)" />
+            </a-form-item>
+          </a-col>
           <!-- 光标闪烁 -->
-          <a-form-item field="cursorBlink" label="光标是否闪烁">
-            <a-switch v-model="formModel.cursorBlink"
-                      type="round"
-                      class="form-item-cursor-blink" />
-          </a-form-item>
-        </a-space>
+          <a-col :span="12">
+            <a-form-item field="cursorBlink" label="光标是否闪烁">
+              <a-switch v-model="formModel.cursorBlink" type="round" />
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form>
       <!-- 预览区域 -->
       <div class="terminal-example">
@@ -101,7 +115,7 @@
 
 <script lang="ts" setup>
   import type { TerminalDisplaySetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
   import { useDictStore, useTerminalStore } from '@/store';
   import { fontFamilyKey, fontSizeKey, fontWeightKey, fontFamilySuffix, cursorStyleKey } from '../../../types/terminal.const';
   import { labelFilter } from '@/types/form';
@@ -112,7 +126,7 @@
   const { preference, updateTerminalPreference } = useTerminalStore();
 
   const previewTerminal = ref();
-  const formModel = ref<TerminalDisplaySetting>({ ...preference.displaySetting });
+  const formModel = ref<TerminalDisplaySetting>({});
 
   // 监听内容变化
   watch(formModel, (v) => {
@@ -137,17 +151,24 @@
     previewTerminal.value.term.focus();
   }, { deep: true });
 
+  // 初始化配置
+  onMounted(() => {
+    formModel.value = { ...preference.displaySetting };
+  });
+
 </script>
 
 <style lang="less" scoped>
   @terminal-width: 458px;
 
   .setting-body {
-    height: 248px;
+    height: 326px;
     justify-content: space-between;
   }
 
   :deep(.arco-form) {
+    width: 412px;
+
     .arco-form-item-label {
       user-select: none;
     }
@@ -156,31 +177,10 @@
       margin-bottom: 14px;
     }
 
-    .form-item-font-family {
-      width: 158px;
-    }
-
-    .form-item-font-size {
-      width: 148px;
-    }
-
-    .form-item-line-height {
-      width: 114px;
-    }
-
-    .form-item-font-weight, .form-item-font-bold-weight {
-      width: 178px;
-    }
-
-    .form-item-font-weight {
-      margin-right: 70px;
-    }
-
     .form-item-cursor-style {
-      margin-right: 90px;
 
       .arco-radio-button-content {
-        padding: 0 20px;
+        padding: 0 24px;
       }
     }
   }

orion-visor-ui/src/views/host/terminal/components/setting/general/terminal-plugins-block.vue

@@ -21,6 +21,11 @@
         </block-setting-item>
       </a-row>
       <a-row class="mb16" align="stretch" :gutter="16">
+        <!-- unicode11 插件 -->
+        <block-setting-item label="unicode11 插件" desc="支持 Unicode 11 字符集">
+          <a-switch type="round"
+                    v-model="formModel.enableUnicodePlugin" />
+        </block-setting-item>
         <!-- 图片渲染插件 -->
         <block-setting-item label="图片渲染插件" desc="支持使用 sixel 打开图片 (一般不需要开启)">
           <a-switch type="round"

orion-visor-ui/src/views/host/terminal/components/setting/terminal-example.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
   import type { TerminalThemeSchema } from '@/api/asset/host-terminal';
-  import { Terminal } from 'xterm';
+  import { Terminal } from '@xterm/xterm';
   import { onMounted, onUnmounted, ref } from 'vue';
 
   const props = defineProps<{

orion-visor-ui/src/views/host/terminal/handler/sftp-transfer-downloader.ts

@@ -40,6 +40,7 @@ export default class SftpTransferDownloader implements ISftpTransferDownloader {
   downloadFinish() {
     if (this.abort) {
       // 中断则不触发下载
+      this.blobArr = [];
       return;
     }
     try {

orion-visor-ui/src/views/host/terminal/handler/ssh-session.ts

@@ -1,16 +1,18 @@
 import type { UnwrapRef } from 'vue';
+import type { ISearchOptions } from '@xterm/addon-search';
 import type { TerminalPreference } from '@/store/modules/terminal/types';
 import type { ISshSession, ISshSessionHandler, ITerminalChannel, XtermAddons, XtermDomRef } from '../types/terminal.type';
 import { useTerminalStore } from '@/store';
 import { InputProtocol } from '../types/terminal.protocol';
 import { fontFamilySuffix, TerminalShortcutType, TerminalStatus } from '../types/terminal.const';
-import { Terminal } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
-import { WebLinksAddon } from 'xterm-addon-web-links';
-import { ISearchOptions, SearchAddon } from 'xterm-addon-search';
-import { ImageAddon } from 'xterm-addon-image';
-import { CanvasAddon } from 'xterm-addon-canvas';
-import { WebglAddon } from 'xterm-addon-webgl';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { SearchAddon } from '@xterm/addon-search';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { ImageAddon } from '@xterm/addon-image';
+import { Unicode11Addon } from '@xterm/addon-unicode11';
+import { CanvasAddon } from '@xterm/addon-canvas';
+import { WebglAddon } from '@xterm/addon-webgl';
 import { playBell } from '@/utils/bell';
 import { addEventListen } from '@/utils/event';
 import SshSessionHandler from './ssh-session-handler';
@@ -63,9 +65,10 @@ export default class SshSession implements ISshSession {
       fastScrollModifier: !!preference.interactSetting.fastScrollModifier ? 'alt' : 'none',
       altClickMovesCursor: !!preference.interactSetting.altClickMovesCursor,
       rightClickSelectsWord: !!preference.interactSetting.rightClickSelectsWord,
-      fontFamily: preference.displaySetting.fontFamily + fontFamilySuffix,
       wordSeparator: preference.interactSetting.wordSeparator,
+      fontFamily: preference.displaySetting.fontFamily + fontFamilySuffix,
       scrollback: preference.sessionSetting.scrollBackLine,
+      allowProposedApi: true,
     });
     // 处理器
     this.handler = new SshSessionHandler(this, domRef);
@@ -192,12 +195,20 @@ export default class SshSession implements ISshSession {
     if (preference.pluginsSetting.enableImagePlugin) {
       this.addons.image = new ImageAddon();
     }
+    // unicode11 插件
+    if (preference.pluginsSetting.enableUnicodePlugin) {
+      this.addons.unicode = new Unicode11Addon();
+    }
     // 加载插件
     for (const addon of Object.values(this.addons)) {
       if (addon) {
         this.inst.loadAddon(addon);
       }
     }
+    // 设置 unicode11 版本
+    if (this.addons.unicode) {
+      this.inst.unicode.activeVersion = '11';
+    }
   }
 
   // 设置已连接

orion-visor-ui/src/views/host/terminal/index.vue

@@ -60,7 +60,7 @@
   import CommandSnippetDrawer from '@/views/host/command-snippet/components/command-snippet-drawer.vue';
   import PathBookmarkDrawer from '@/views/host/path-bookmark/components/path-bookmark-drawer.vue';
   import '@/assets/style/host-terminal-layout.less';
-  import 'xterm/css/xterm.css';
+  import '@xterm/xterm/css/xterm.css';
 
   const terminalStore = useTerminalStore();
   const dictStore = useDictStore();

orion-visor-ui/src/views/host/terminal/types/terminal.type.ts

@@ -1,10 +1,11 @@
-import type { Terminal } from 'xterm';
-import type { FitAddon } from 'xterm-addon-fit';
-import type { CanvasAddon } from 'xterm-addon-canvas';
-import type { WebglAddon } from 'xterm-addon-webgl';
-import type { WebLinksAddon } from 'xterm-addon-web-links';
-import type { ISearchOptions, SearchAddon } from 'xterm-addon-search';
-import type { ImageAddon } from 'xterm-addon-image';
+import type { Terminal } from '@xterm/xterm';
+import type { FitAddon } from '@xterm/addon-fit';
+import type { CanvasAddon } from '@xterm/addon-canvas';
+import type { WebglAddon } from '@xterm/addon-webgl';
+import type { WebLinksAddon } from '@xterm/addon-web-links';
+import type { ISearchOptions, SearchAddon } from '@xterm/addon-search';
+import type { ImageAddon } from '@xterm/addon-image';
+import type { Unicode11Addon } from '@xterm/addon-unicode11';
 import type { CSSProperties } from 'vue';
 import type { HostQueryResponse } from '@/api/asset/host';
 
@@ -225,6 +226,7 @@ export interface XtermAddons {
   weblink: WebLinksAddon;
   search: SearchAddon;
   image: ImageAddon;
+  unicode: Unicode11Addon;
 }
 
 // 终端会话定义