From 6c0ad50b4e0c1df93c2b768afcb29e300c408fb3 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Fri, 12 Jan 2024 00:30:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=8C=E6=AD=A5=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E9=85=8D=E7=BD=AE=E9=A1=B9.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../strategy/TerminalPreferenceStrategy.java  |  1 -
 .../src/store/modules/terminal/index.ts       | 19 ++++++++-
 .../src/store/modules/terminal/types.ts       | 29 +++++++++++++
 .../view-setting/block-setting-item.vue       |  3 ++
 .../view-setting/terminal-interact-block.vue  | 42 +++++++++----------
 .../view-setting/terminal-plugins-block.vue   | 30 +++++++------
 .../view-setting/terminal-session-block.vue   | 25 +++++++----
 7 files changed, 103 insertions(+), 46 deletions(-)

diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java
index 2ad68b3a..552c3077 100644
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java
@@ -30,7 +30,6 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
                 .cursorBlink(true)
                 .build()
                 .toJsonString();
-
         // 默认交互设置
         String defaultInteractSetting = TerminalPreferenceModel.InteractSettingModel.builder()
                 .fastScrollModifier(true)
diff --git a/orion-ops-ui/src/store/modules/terminal/index.ts b/orion-ops-ui/src/store/modules/terminal/index.ts
index 74aa23a0..36ecdc92 100644
--- a/orion-ops-ui/src/store/modules/terminal/index.ts
+++ b/orion-ops-ui/src/store/modules/terminal/index.ts
@@ -1,4 +1,12 @@
-import type { TerminalActionBarSetting, TerminalDisplaySetting, TerminalPreference, TerminalState } from './types';
+import type {
+  TerminalActionBarSetting,
+  TerminalDisplaySetting,
+  TerminalInteractSetting,
+  TerminalPluginsSetting,
+  TerminalPreference,
+  TerminalSessionSetting,
+  TerminalState
+} from './types';
 import type { TerminalTheme } from '@/api/asset/host-terminal';
 import { getTerminalThemes } from '@/api/asset/host-terminal';
 import { defineStore } from 'pinia';
@@ -17,6 +25,12 @@ export const PreferenceItem = {
   DISPLAY_SETTING: 'displaySetting',
   // 操作栏设置
   ACTION_BAR_SETTING: 'actionBarSetting',
+  // 交互设置
+  INTERACT_SETTING: 'interactSetting',
+  // 插件设置
+  PLUGINS_SETTING: 'pluginsSetting',
+  // 会话设置
+  SESSION_SETTING: 'sessionSetting',
 };
 
 export default defineStore('terminal', {
@@ -26,6 +40,9 @@ export default defineStore('terminal', {
       theme: {} as TerminalTheme,
       displaySetting: {} as TerminalDisplaySetting,
       actionBarSetting: {} as TerminalActionBarSetting,
+      interactSetting: {} as TerminalInteractSetting,
+      pluginsSetting: {} as TerminalPluginsSetting,
+      sessionSetting: {} as TerminalSessionSetting,
     },
     tabManager: new TerminalTabManager(),
     sessionManager: new TerminalSessionManager()
diff --git a/orion-ops-ui/src/store/modules/terminal/types.ts b/orion-ops-ui/src/store/modules/terminal/types.ts
index 46a5b6c8..58af71fb 100644
--- a/orion-ops-ui/src/store/modules/terminal/types.ts
+++ b/orion-ops-ui/src/store/modules/terminal/types.ts
@@ -13,6 +13,9 @@ export interface TerminalPreference {
   theme: TerminalTheme;
   displaySetting: TerminalDisplaySetting;
   actionBarSetting: TerminalActionBarSetting;
+  interactSetting: TerminalInteractSetting;
+  pluginsSetting: TerminalPluginsSetting;
+  sessionSetting: TerminalSessionSetting;
 }
 
 // 显示设置
@@ -34,3 +37,29 @@ export interface TerminalActionBarSetting {
   [key: string]: unknown;
 }
 
+// 交互设置
+export interface TerminalInteractSetting {
+  fastScrollModifier: boolean;
+  altClickMovesCursor: boolean;
+  rightClickSelectsWord: boolean;
+  selectionChangeCopy: boolean;
+  copyAutoTrim: boolean;
+  pasteAutoTrim: boolean;
+  rightClickPaste: boolean;
+  enableRightClickMenu: boolean;
+  enableBell: boolean;
+  wordSeparator: string;
+}
+
+// 插件设置
+export interface TerminalPluginsSetting {
+  enableWeblinkPlugin: boolean;
+  enableWebglPlugin: boolean;
+  enableImagePlugin: boolean;
+}
+
+// 会话设置
+export interface TerminalSessionSetting {
+  terminalEmulationType: string;
+  scrollBackLine: number;
+}
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/block-setting-item.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/block-setting-item.vue
index d2eeca53..2e080db3 100644
--- a/orion-ops-ui/src/views/host/terminal/components/view-setting/block-setting-item.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/block-setting-item.vue
@@ -64,5 +64,8 @@
     :deep(.arco-input-wrapper) {
       background-color: var(--color-fill-3)
     }
+    :deep(.arco-select) {
+      background-color: var(--color-fill-3)
+    }
   }
 </style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
index a790a52d..4b94fea6 100644
--- a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
@@ -14,9 +14,7 @@
         <!-- 快速滚动 -->
         <block-setting-item label="快速滚动" desc="alt + 鼠标滚轮快速滚动">
           <a-switch type="round"
-                    v-model="formModel.fastScrollModifier"
-                    checked-value="alt"
-                    unchecked-value="none" />
+                    v-model="formModel.fastScrollModifier" />
         </block-setting-item>
         <!-- 点击移动光标 -->
         <block-setting-item label="点击移动光标" desc="alt + 鼠标左键可以切换光标位置">
@@ -57,7 +55,7 @@
         <!-- 启用右键菜单 -->
         <block-setting-item label="启用右键菜单" desc="右键终端将打开自定义菜单, 启用后需要关闭右键粘贴">
           <a-switch type="round"
-                    v-model="formModel.pasteAutoTrim" />
+                    v-model="formModel.enableRightClickMenu" />
         </block-setting-item>
       </a-row>
       <a-row class="mb16" align="stretch" :gutter="16">
@@ -67,7 +65,7 @@
                     v-model="formModel.enableBell" />
         </block-setting-item>
         <!-- 单词分隔符 -->
-        <block-setting-item label="单词分隔符" desc="在终端中双击文本将使用该分隔符进行分割">
+        <block-setting-item label="单词分隔符" desc="在终端中双击文本将使用该分隔符进行分割 (一般不用修改)">
           <a-input size="small"
                    v-model="formModel.wordSeparator"
                    placeholder="单词分隔符"
@@ -85,26 +83,24 @@
 </script>
 
 <script lang="ts" setup>
-
-  // 快速滚动 fastScrollModifier
-  // 点击移动光标 altClickMovesCursor
-
-  // 右键选中词条  rightClickSelectsWord
-  // 自动将选中内容复制到剪切板 selectionChangeCopy onSelectionChange
-
-  // 复制时删除空格 pasteAutoTrim
-  // 粘贴时删除空格 copyAutoTrim
-
-  // 右键粘贴 rightClickPaste
-  // 启用右键菜单 enableRightClickMenu
-
-  // 启用响铃  enableBell
-  // 单词分隔符  /\()"'` -.,:;<>~!@#$%^&*|+=[]{}~?│    wordSeparator
-
-  import { ref } from 'vue';
+  import type { TerminalInteractSetting } from '@/store/modules/terminal/types';
+  import { ref, watch } from 'vue';
+  import { useTerminalStore } from '@/store';
+  import { PreferenceItem } from '@/store/modules/terminal';
   import BlockSettingItem from './block-setting-item.vue';
 
-  const formModel = ref<Record<string, any>>({});
+  const { preference, updateTerminalPreference } = useTerminalStore();
+
+  const formModel = ref<TerminalInteractSetting>({ ...preference.interactSetting });
+
+  // 监听内容变化
+  watch(formModel, (v) => {
+    if (!v) {
+      return;
+    }
+    // 同步
+    updateTerminalPreference(PreferenceItem.INTERACT_SETTING, formModel.value, true);
+  }, { deep: true });
 
 </script>
 
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-plugins-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-plugins-block.vue
index 17328415..e60df109 100644
--- a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-plugins-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-plugins-block.vue
@@ -10,11 +10,9 @@
     <div class="terminal-setting-body setting-body">
       <a-row class="mb16" align="stretch" :gutter="16">
         <!-- 超链接插件 -->
-        <block-setting-item label="超链接插件" desc="自动检测 http url 并可以点击">
+        <block-setting-item label="超链接插件" desc="自动检测 http(https) url 并可以点击">
           <a-switch type="round"
-                    v-model="formModel.enableWeblinkPlugin"
-                    checked-value="alt"
-                    unchecked-value="none" />
+                    v-model="formModel.enableWeblinkPlugin" />
         </block-setting-item>
         <!-- WebGL 渲染插件 -->
         <block-setting-item label="WebGL 渲染插件" desc="使用 WebGL 加速渲染终端 (建议开启, 若无法开启终端请关闭)">
@@ -40,16 +38,24 @@
 </script>
 
 <script lang="ts" setup>
-
-  // fixme
-  // 自动检测 url 并可以点击  enableWeblinkPlugin
-  // 启用 webgl 支持  enableWebglPlugin
-  // 支持显示图片 使用 sixel 打开图片 enableImagePlugin
-
-  import { ref } from 'vue';
+  import type { TerminalPluginsSetting } from '@/store/modules/terminal/types';
+  import { ref, watch } from 'vue';
+  import { useTerminalStore } from '@/store';
+  import { PreferenceItem } from '@/store/modules/terminal';
   import BlockSettingItem from './block-setting-item.vue';
 
-  const formModel = ref<Record<string, any>>({});
+  const { preference, updateTerminalPreference } = useTerminalStore();
+
+  const formModel = ref<TerminalPluginsSetting>({ ...preference.pluginsSetting });
+
+  // 监听内容变化
+  watch(formModel, (v) => {
+    if (!v) {
+      return;
+    }
+    // 同步
+    updateTerminalPreference(PreferenceItem.PLUGINS_SETTING, formModel.value, true);
+  }, { deep: true });
 
 </script>
 
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue
index 4ad81eed..faacf3d3 100644
--- a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue
@@ -22,7 +22,7 @@
                           size="small"
                           :min="1"
                           :max="10000"
-                          placeholder="缓冲区行数"
+                          placeholder="缓冲区行数 默认 1000 行"
                           allow-clear
                           hide-button />
         </block-setting-item>
@@ -38,19 +38,26 @@
 </script>
 
 <script lang="ts" setup>
+  import type { TerminalSessionSetting } from '@/store/modules/terminal/types';
+  import { ref, watch } from 'vue';
+  import { useDictStore, useTerminalStore } from '@/store';
+  import { PreferenceItem } from '@/store/modules/terminal';
   import { terminalEmulationTypeKey } from '../../types/terminal.const';
+  import BlockSettingItem from './block-setting-item.vue';
 
   const { toOptions } = useDictStore();
+  const { preference, updateTerminalPreference } = useTerminalStore();
 
-  // TODO
-  // terminalEmulationType: xterm 256color
-  // scrollBackLine 保存在缓冲区的行数 1000
+  const formModel = ref<TerminalSessionSetting>({ ...preference.sessionSetting });
 
-  import { ref } from 'vue';
-  import BlockSettingItem from './block-setting-item.vue';
-  import { useDictStore } from '@/store';
-
-  const formModel = ref<Record<string, any>>({});
+  // 监听内容变化
+  watch(formModel, (v) => {
+    if (!v) {
+      return;
+    }
+    // 同步
+    updateTerminalPreference(PreferenceItem.SESSION_SETTING, formModel.value, true);
+  }, { deep: true });
 
 </script>