From c750ce8ed2eb56ff046b5a0c72bf0aa9a5a34279 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Tue, 16 Jan 2024 18:52:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E7=BD=AE=E5=BF=AB=E6=8D=B7?=
 =?UTF-8?q?=E9=94=AE.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model/TerminalPreferenceModel.java        | 43 ++++++++
 .../strategy/TerminalPreferenceStrategy.java  | 22 +++++
 .../src/store/modules/terminal/index.ts       |  4 +-
 .../components/layout/terminal-content.vue    |  9 +-
 .../block-setting-item.vue                    |  0
 .../terminal-action-bar-block.vue             |  0
 .../terminal-display-block.vue                |  2 +-
 .../terminal-display-setting.vue              |  0
 .../terminal-example.vue                      |  0
 .../terminal-general-setting.vue              |  0
 .../terminal-interact-block.vue               |  0
 .../terminal-plugins-block.vue                |  0
 .../terminal-right-menu-block.vue             |  0
 .../terminal-session-block.vue                |  0
 .../setting/terminal-shortcut-block.vue       | 99 +++++++++++++++++++
 .../setting/terminal-shortcut-setting.vue     | 25 +++++
 .../terminal-theme-block.vue                  |  0
 .../terminal-theme-setting.vue                |  0
 .../components/xterm/terminal-view.vue        |  2 +-
 .../terminal/handler/terminal-tab-manager.ts  |  8 +-
 20 files changed, 203 insertions(+), 11 deletions(-)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/block-setting-item.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-action-bar-block.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-display-block.vue (98%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-display-setting.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-example.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-general-setting.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-interact-block.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-plugins-block.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-right-menu-block.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-session-block.vue (100%)
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-block.vue
 create mode 100644 orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-setting.vue
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-theme-block.vue (100%)
 rename orion-ops-ui/src/views/host/terminal/components/{view-setting => setting}/terminal-theme-setting.vue (100%)

diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java
index ab98f0b7..5b911ca7 100644
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java
@@ -47,6 +47,9 @@ public class TerminalPreferenceModel implements PreferenceModel {
     @Schema(description = "会话设置")
     private JSONObject sessionSetting;
 
+    @Schema(description = "快捷键设置")
+    private JSONObject shortcutSetting;
+
     @Data
     @Builder
     @NoArgsConstructor
@@ -145,4 +148,44 @@ public class TerminalPreferenceModel implements PreferenceModel {
 
     }
 
+    @Data
+    @Builder
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class ShortcutSettingModel implements IJsonObject {
+
+        @Schema(description = "是否启用")
+        private Boolean enabled;
+
+        @Schema(description = "快捷键定义")
+        private List<ShortcutKeysModel> keys;
+
+    }
+
+    @Data
+    @Builder
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class ShortcutKeysModel implements IJsonObject {
+
+        @Schema(description = "快捷键操作")
+        private String item;
+
+        @Schema(description = "ctrl 按键")
+        private Boolean ctrlKey;
+
+        @Schema(description = "shift 按键")
+        private Boolean shiftKey;
+
+        @Schema(description = "alt 按键")
+        private Boolean altKey;
+
+        @Schema(description = "实际按键")
+        private String code;
+
+        @Schema(description = "是否启用")
+        private Boolean enabled;
+
+    }
+
 }
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 ca11bcca..6dbaa239 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
@@ -58,6 +58,27 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
                 .scrollBackLine(1000)
                 .build()
                 .toJsonString();
+        // 默认快捷键设置
+        String shortcutSetting = TerminalPreferenceModel.ShortcutSettingModel.builder()
+                .enabled(true)
+                .keys(Lists.of(
+                        new TerminalPreferenceModel.ShortcutKeysModel("copy", true, true, false, "KeyC", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("paste", true, true, false, "KeyV", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("toTop", true, true, false, "ArrowUp", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("toBottom", true, true, false, "ArrowDown", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("selectAll", true, true, false, "KeyA", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("search", true, true, false, "KeyF", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("commandEditor", true, false, true, "KeyE", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("fontSizePlus", true, false, true, "Equal", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("fontSizeSubtract", true, false, true, "Minus", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("closeTab", true, false, true, "KeyW", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("changeToPrevTab", true, false, true, "ArrowLeft", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("changeToNextTab", true, false, true, "ArrowRight", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("openCopyTerminalTab", true, false, true, "KeyO", true),
+                        new TerminalPreferenceModel.ShortcutKeysModel("openNewConnectTab", true, false, true, "KeyN", true)
+                        ))
+                .build()
+                .toJsonString();
         // 默认配置
         return TerminalPreferenceModel.builder()
                 .newConnectionType("group")
@@ -68,6 +89,7 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
                 .interactSetting(JSONObject.parseObject(defaultInteractSetting))
                 .pluginsSetting(JSONObject.parseObject(defaultPluginsSetting))
                 .sessionSetting(JSONObject.parseObject(defaultSessionSetting))
+                .shortcutSetting(JSONObject.parseObject(shortcutSetting))
                 .build();
     }
 
diff --git a/orion-ops-ui/src/store/modules/terminal/index.ts b/orion-ops-ui/src/store/modules/terminal/index.ts
index 21c753ba..31451696 100644
--- a/orion-ops-ui/src/store/modules/terminal/index.ts
+++ b/orion-ops-ui/src/store/modules/terminal/index.ts
@@ -27,8 +27,6 @@ export const TerminalPreferenceItem = {
   NEW_CONNECTION_TYPE: 'newConnectionType',
   // 终端主题
   THEME: 'theme',
-  // 快捷键设置
-  SHORTCUT_SETTING: 'shortcutSetting',
   // 显示设置
   DISPLAY_SETTING: 'displaySetting',
   // 操作栏设置
@@ -41,6 +39,8 @@ export const TerminalPreferenceItem = {
   PLUGINS_SETTING: 'pluginsSetting',
   // 会话设置
   SESSION_SETTING: 'sessionSetting',
+  // 快捷键设置
+  SHORTCUT_SETTING: 'shortcutSetting',
 };
 
 export default defineStore('terminal', {
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue
index deab98a8..a94b28ec 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-content.vue
@@ -16,6 +16,8 @@
           <terminal-theme-setting v-else-if="tab.key === InnerTabs.THEME_SETTING.key" />
           <!-- 终端设置 -->
           <terminal-general-setting v-else-if="tab.key === InnerTabs.TERMINAL_SETTING.key" />
+          <!-- 快捷键设置 -->
+          <terminal-shortcut-setting v-else-if="tab.key === InnerTabs.SHORTCUT_SETTING.key" />
         </template>
         <!-- 终端 -->
         <template v-else-if="tab.type === TerminalTabType.TERMINAL">
@@ -41,9 +43,10 @@
   import { addEventListen, removeEventListen } from '@/utils/event';
   import EmptyRecommend from './empty-recommend.vue';
   import NewConnectionView from '../new-connection/new-connection-view.vue';
-  import TerminalDisplaySetting from '../view-setting/terminal-display-setting.vue';
-  import TerminalThemeSetting from '../view-setting/terminal-theme-setting.vue';
-  import TerminalGeneralSetting from '../view-setting/terminal-general-setting.vue';
+  import TerminalDisplaySetting from '../setting/terminal-display-setting.vue';
+  import TerminalThemeSetting from '../setting/terminal-theme-setting.vue';
+  import TerminalGeneralSetting from '../setting/terminal-general-setting.vue';
+  import TerminalShortcutSetting from '../setting/terminal-shortcut-setting.vue';
   import TerminalView from '../xterm/terminal-view.vue';
 
   const { preference, tabManager, sessionManager } = useTerminalStore();
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/setting/block-setting-item.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/block-setting-item.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/block-setting-item.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-action-bar-block.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-action-bar-block.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-action-bar-block.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-action-bar-block.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-block.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-display-block.vue
similarity index 98%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-block.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-display-block.vue
index c701ad3b..f5acc2b0 100644
--- a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-block.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-display-block.vue
@@ -103,7 +103,7 @@
   import { fontFamilyKey, fontSizeKey, fontWeightKey, fontFamilySuffix, cursorStyleKey } from '../../types/terminal.const';
   import { labelFilter } from '@/types/form';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
-  import TerminalExample from '../view-setting/terminal-example.vue';
+  import TerminalExample from '../setting/terminal-example.vue';
 
   const { toOptions, toRadioOptions } = useDictStore();
   const { preference, updateTerminalPreference } = useTerminalStore();
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-setting.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-display-setting.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-display-setting.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-display-setting.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-example.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-example.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-example.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-example.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-general-setting.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-general-setting.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-general-setting.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-general-setting.vue
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/setting/terminal-interact-block.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-interact-block.vue
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/setting/terminal-plugins-block.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-plugins-block.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-plugins-block.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-right-menu-block.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-right-menu-block.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-right-menu-block.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-right-menu-block.vue
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/setting/terminal-session-block.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-session-block.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-block.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-block.vue
new file mode 100644
index 00000000..3257efa0
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-block.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="terminal-setting-block">
+    <!-- 顶部 -->
+    <div class="terminal-setting-subtitle-wrapper">
+      <h3 class="terminal-setting-subtitle">
+        终端快捷键
+      </h3>
+    </div>
+    <!-- 加载中 -->
+    <a-skeleton v-if="loading"
+                class="skeleton-wrapper"
+                :animation="true">
+      <a-skeleton-line :rows="8" />
+    </a-skeleton>
+    <!-- 内容区域 -->
+    <div v-else class="terminal-setting-body terminal-shortcut-container">
+      <!-- 提示 -->
+      <a-alert class="mb16">选择后会立刻保存, 刷新页面后生效 (设置时需要避免浏览器内置快捷键)</a-alert>
+      <div class="shortcut-row">
+        <a-space>
+          <a-tag checkable :default-checked="true">ctrl</a-tag>
+          <a-tag checkable :default-checked="true">shift</a-tag>
+          <a-tag checkable :default-checked="true">alt</a-tag>
+          <icon-plus />
+          <a-tag :default-checked="true">alt</a-tag>
+        </a-space>
+      </div>
+      <div class="shortcut-row">2</div>
+      <div class="shortcut-row">3</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'TerminalShortcutBlock'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { useTerminalStore } from '@/store';
+  import { TerminalPreferenceItem } from '@/store/modules/terminal';
+  import { onMounted, ref } from 'vue';
+  import { getPreference } from '@/api/user/preference';
+  import useLoading from '@/hooks/loading';
+
+  const { updateTerminalPreference } = useTerminalStore();
+  const { loading, setLoading } = useLoading();
+
+
+  // 加载用户快捷键
+  onMounted(async () => {
+    try {
+      const { data } = await getPreference<Record<string, any>>('TERMINAL', [TerminalPreferenceItem.SHORTCUT_SETTING]);
+    } catch (e) {
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+  @terminal-width: 458px;
+  @terminal-height: 138px;
+
+  .terminal-shortcut-container {
+    flex-direction: column;
+
+    .shortcut-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      background: var(--color-fill-2);
+      height: 48px;
+      padding: 8px;
+      border-radius: 4px;
+      transition: .3s;
+
+      &:hover {
+        background: var(--color-fill-3);
+      }
+    }
+
+    :deep(.arco-tag) {
+      background: #FFFFFF;
+      width: 44px;
+      display: flex;
+      justify-content: center;
+      height: 26px;
+      font-size: 14px;
+      user-select: none;
+    }
+
+    :deep(.arco-tag-checked) {
+      color: #FFFFFF;
+      background: rgb(var(--arcoblue-5));
+    }
+  }
+
+</style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-setting.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-setting.vue
new file mode 100644
index 00000000..b133af5e
--- /dev/null
+++ b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-shortcut-setting.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="terminal-setting-container">
+    <div class="terminal-setting-wrapper">
+      <!-- 主标题 -->
+      <h2 class="terminal-setting-title">快捷键设置</h2>
+      <!-- 快捷键设置 -->
+      <terminal-shortcut-block />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'terminalShortcutSetting'
+  };
+</script>
+
+<script lang="ts" setup>
+  import TerminalShortcutBlock from './terminal-shortcut-block.vue';
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-block.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-theme-block.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-block.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-theme-block.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-setting.vue b/orion-ops-ui/src/views/host/terminal/components/setting/terminal-theme-setting.vue
similarity index 100%
rename from orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-theme-setting.vue
rename to orion-ops-ui/src/views/host/terminal/components/setting/terminal-theme-setting.vue
diff --git a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
index 75edc4d2..1b4a7926 100644
--- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
@@ -93,9 +93,9 @@
   const session = ref<ITerminalSession>();
 
   // TODO
-  // 设置快捷键
   // 截屏
   // sftp
+  // 代码片段
 
   // 发送命令
   const writeCommandInput = async (e: KeyboardEvent) => {
diff --git a/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts b/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts
index 3be26542..77f8fc93 100644
--- a/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts
+++ b/orion-ops-ui/src/views/host/terminal/handler/terminal-tab-manager.ts
@@ -10,10 +10,10 @@ export default class TerminalTabManager implements ITerminalTabManager {
 
   constructor() {
     // fixme
-    // this.active = InnerTabs.SHORTCUT_SETTING.key;
-    // this.items = [InnerTabs.SHORTCUT_SETTING];
-    this.active = InnerTabs.NEW_CONNECTION.key;
-    this.items = [InnerTabs.NEW_CONNECTION];
+    this.active = InnerTabs.SHORTCUT_SETTING.key;
+    this.items = [InnerTabs.SHORTCUT_SETTING];
+    // this.active = InnerTabs.NEW_CONNECTION.key;
+    // this.items = [InnerTabs.NEW_CONNECTION];
   }
 
   // 点击 tab