保存快捷键.

2024-01-17 00:48:20 +08:00
parent c750ce8ed2
commit 0eed20e54f
11 changed files with 281 additions and 90 deletions
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PreferenceController.http
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PreferenceController.http
@@ -26,3 +26,8 @@ Authorization: {{token}}
 GET {{baseUrl}}/infra/preference/get?type=SYSTEM
 Authorization: {{token}}

+
+### 查询默认偏好
+GET {{baseUrl}}/infra/preference/get-default?type=TERMINAL&items=shortcutSetting
+Authorization: {{token}}
+
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PreferenceController.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/controller/PreferenceController.java
@@ -57,5 +57,14 @@ public class PreferenceController {
        return preferenceService.getPreferenceByType(type, items);
    }

+    @GetMapping("/get-default")
+    @Operation(summary = "查询默认偏好")
+    @Parameter(name = "type", description = "type", required = true)
+    @Parameter(name = "items", description = "items")
+    public Map<String, Object> getDefaultPreference(@RequestParam("type") String type,
+                                                    @RequestParam(name = "items", required = false) List<String> items) {
+        return preferenceService.getDefaultPreferenceByType(type, items);
+    }
+
 }

--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/PreferenceService.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/PreferenceService.java
@@ -41,6 +41,15 @@ public interface PreferenceService {
     */
    Map<String, Object> getPreferenceByType(String type, List<String> items);

+    /**
+     * 查询默认偏好
+     *
+     * @param type  type
+     * @param items items
+     * @return rows
+     */
+    Map<String, Object> getDefaultPreferenceByType(String type, List<String> items);
+
    /**
     * 获取用户偏好
     *
--- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/PreferenceServiceImpl.java
+++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/service/impl/PreferenceServiceImpl.java
@@ -139,6 +139,22 @@ public class PreferenceServiceImpl implements PreferenceService {
        return partial;
    }

+    @Override
+    public Map<String, Object> getDefaultPreferenceByType(String type, List<String> items) {
+        PreferenceTypeEnum preferenceType = Valid.valid(PreferenceTypeEnum::of, type);
+        // 获取默认值
+        Map<String, String> defaultModel = preferenceType.getStrategy()
+                .getDefault()
+                .toMap();
+        Map<String, Object> result = Maps.newMap();
+        if (Lists.isEmpty(items)) {
+            defaultModel.forEach((k, v) -> result.put(k, Refs.unref(defaultModel.get(k))));
+        } else {
+            items.forEach(s -> result.put(s, Refs.unref(defaultModel.get(s))));
+        }
+        return result;
+    }
+
    @Override
    @Async("asyncExecutor")
    public Future<Map<String, Object>> getPreferenceAsync(Long userId, PreferenceTypeEnum type) {
--- a/orion-ops-ui/src/api/user/preference.ts
+++ b/orion-ops-ui/src/api/user/preference.ts
@@ -49,3 +49,18 @@ export function getPreference<T>(type: PreferenceType, items: Array<string> | un
  });
 }

+/**
+ * 查询默认偏好
+ */
+export function getDefaultPreference<T>(type: PreferenceType, items: Array<string> | undefined = undefined) {
+  return axios.get<T>('/infra/preference/get-default', {
+    params: {
+      type,
+      items
+    },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}
+
--- a/orion-ops-ui/src/store/modules/terminal/types.ts
+++ b/orion-ops-ui/src/store/modules/terminal/types.ts
@@ -77,9 +77,13 @@ export interface TerminalShortcutSetting {
 // 终端快捷键
 export interface TerminalShortcutKey {
  item: string;
+  enabled: boolean;
  ctrlKey: boolean;
  shiftKey: boolean;
  altKey: boolean;
  code: string;
-  enabled: boolean;
+  // extra
+  edit: boolean;
+  content: string;
+  type: number;
 }
--- a/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less
+++ b/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less
@@ -144,6 +144,8 @@ body[terminal-theme='dark'] .arco-modal-container {
  --color-bg-4: #313132;
  --color-bg-5: #373739;
  --color-bg-white: #f6f6f6;
+  --color-neutral-1: rgba(255, 255, 255, 0.04);
+  --color-neutral-2: rgba(255, 255, 255, 0.08);
  --color-neutral-3: rgba(255, 255, 255, 0.12);
  --color-text-1: rgba(255, 255, 255, 0.9);
  --color-text-2: rgba(255, 255, 255, 0.7);
--- 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
@@ -37,7 +37,7 @@
 </script>

 <script lang="ts" setup>
-  import { TerminalTabType, InnerTabs, TerminalTabShortcutItems } from '../../types/terminal.const';
+  import { TerminalTabType, InnerTabs, TerminalShortcutKeys } from '../../types/terminal.const';
  import { useTerminalStore } from '@/store';
  import { onMounted, onUnmounted, watch } from 'vue';
  import { addEventListen, removeEventListen } from '@/utils/event';
@@ -98,21 +98,21 @@
    }
    // 触发逻辑
    switch (key.item) {
-      case TerminalTabShortcutItems.CLOSE_TAB.item:
+      case TerminalShortcutKeys.CLOSE_TAB:
        // 关闭 tab
        if (tabManager.active) {
          tabManager.deleteTab(tabManager.active);
        }
        break;
-      case TerminalTabShortcutItems.CHANGE_TO_PREV_TAB.item:
+      case TerminalShortcutKeys.CHANGE_TO_PREV_TAB:
        // 切换至前一个 tab
        tabManager.changeToPrevTab();
        break;
-      case TerminalTabShortcutItems.CHANGE_TO_NEXT_TAB.item:
+      case TerminalShortcutKeys.CHANGE_TO_NEXT_TAB:
        // 切换至后一个 tab
        tabManager.changeToNextTab();
        break;
-      case TerminalTabShortcutItems.OPEN_NEW_CONNECT_TAB.item:
+      case TerminalShortcutKeys.OPEN_NEW_CONNECT_TAB:
        // 切换到新建连接 tab
        tabManager.openTab(InnerTabs.NEW_CONNECTION);
        break;
--- 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
@@ -3,30 +3,72 @@
    <!-- 顶部 -->
    <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-line :rows="4" />
    </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>
+      <a-alert class="mb16">刷新页面后生效 (设置时需要避免浏览器内置快捷键)</a-alert>
+      <template v-for="item in shortcutKeys">
+        <div class="shortcut-row" v-if="item.type === TerminalShortcutType.SYSTEM">
+          <!-- label -->
+          <span class="shortcut-label">{{ item.content }}</span>
+          <!-- 快捷键 -->
+          <a-space class="shortcut-key-container"
+                   :class="[item.edit ? 'edit-container' : '']">
+            <a-tag v-if="item.edit || item.ctrlKey"
+                   v-model:checked="item.ctrlKey"
+                   :checkable="item.edit">
+              ctrl
+            </a-tag>
+            <a-tag v-if="item.edit || item.shiftKey"
+                   v-model:checked="item.shiftKey"
+                   :checkable="item.edit">
+              shift
+            </a-tag>
+            <a-tag v-if="item.edit || item.altKey"
+                   v-model:checked="item.altKey"
+                   :checkable="item.edit">
+              alt
+            </a-tag>
+            <!-- 触发按键-->
+            <a-tag v-if="item.code && !item.edit" :checkable="item.edit">{{ item.code }}</a-tag>
+            <a-input v-if="item.edit"
+                     v-model="item.code"
+                     :data-item="item.item"
+                     :ref="setEditRef"
+                     class="trigger-input"
+                     size="small"
+                     @keyup="e => item.code = e.code" />
+          </a-space>
+          <!-- 操作 -->
+          <a-space class="shortcut-actions-container">
+            <!-- 屏蔽 -->
+            <div class="click-icon-wrapper" title="屏蔽">
+              <icon-stop />
+            </div>
+            <!-- 设置 -->
+            <div class="click-icon-wrapper" v-if="!item.edit"
+                 title="设置"
+                 @click="() => item.edit = true">
+              <icon-settings />
+            </div>
+            <!-- 保存 -->
+            <div class="click-icon-wrapper" v-else
+                 title="保存"
+                 @click="() => item.edit = false">
+              <icon-check />
+            </div>
+          </a-space>
+        </div>
+      </template>
    </div>
  </div>
 </template>
@@ -38,29 +80,68 @@
 </script>

 <script lang="ts" setup>
+  import type { TerminalShortcutSetting, TerminalShortcutKey } from '@/store/modules/terminal/types';
  import { useTerminalStore } from '@/store';
  import { TerminalPreferenceItem } from '@/store/modules/terminal';
-  import { onMounted, ref } from 'vue';
+  import { nextTick, onMounted, ref } from 'vue';
  import { getPreference } from '@/api/user/preference';
  import useLoading from '@/hooks/loading';
+  import { TerminalShortcutType, TerminalShortcutItems } from '../../types/terminal.const';

  const { updateTerminalPreference } = useTerminalStore();
-  const { loading, setLoading } = useLoading();
+  const { loading, setLoading } = useLoading(true);

+  const shortcutKeys = ref<Array<TerminalShortcutKey>>([]);
+
+  // 设置 ref
+  const setEditRef = (el: HTMLElement) => {
+    // 自动聚焦
+    nextTick(() => {
+      el && el.focus();
+    });
+  };

  // 加载用户快捷键
  onMounted(async () => {
+    setLoading(true);
    try {
+      // 加载偏好
      const { data } = await getPreference<Record<string, any>>('TERMINAL', [TerminalPreferenceItem.SHORTCUT_SETTING]);
+      const setting = data[TerminalPreferenceItem.SHORTCUT_SETTING] as TerminalShortcutSetting;
+      // 设置快捷键
+      const keys: Array<TerminalShortcutKey> = [];
+      for (const shortcutItem of TerminalShortcutItems) {
+        const shortcutKey = setting.keys?.find(s => s.item === shortcutItem.item);
+        if (shortcutKey) {
+          // 存在
+          keys.push({
+            ...shortcutItem,
+            ...shortcutKey,
+            edit: false,
+          });
+        } else {
+          // 不存在
+          keys.push({
+            ...shortcutItem,
+            ctrlKey: false,
+            shiftKey: false,
+            altKey: false,
+            code: '',
+            enabled: false,
+            edit: false,
+          });
+        }
+      }
+      shortcutKeys.value = keys;
    } catch (e) {
+    } finally {
+      setLoading(false);
    }
  });

 </script>

 <style lang="less" scoped>
-  @terminal-width: 458px;
-  @terminal-height: 138px;

  .terminal-shortcut-container {
    flex-direction: column;
@@ -69,30 +150,58 @@
      display: flex;
      align-items: center;
      margin-bottom: 8px;
-      background: var(--color-fill-2);
-      height: 48px;
-      padding: 8px;
+      background: var(--color-neutral-1);
+      height: 42px;
+      padding: 8px 16px;
      border-radius: 4px;
+      user-select: none;
      transition: .3s;

      &:hover {
-        background: var(--color-fill-3);
+        background: var(--color-neutral-2);
+
+        .shortcut-actions-container {
+          display: flex;
+        }
+      }
+    }
+
+    .shortcut-label {
+      font-size: 14px;
+      width: 218px;
+    }
+
+    .shortcut-key-container {
+      width: 268px;
+    }
+
+    .trigger-input {
+      width: 68px;
+    }
+
+    .shortcut-actions-container {
+      display: none;
+
+      .click-icon-wrapper {
+        font-size: 16px;
+        padding: 4px;
      }
    }

    :deep(.arco-tag) {
-      background: #FFFFFF;
+      background: var(--color-neutral-2);
+      color: var(--color-text-3);
+
      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));
+      background: var(--color-neutral-3);
+      color: var(--color-text-1);
    }
  }

--- a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
+++ b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
@@ -1,4 +1,6 @@
 // tab 类型
+import { ShortcutKeyItem } from '@/views/host/terminal/types/terminal.type';
+
 export const TerminalTabType = {
  SETTING: 'setting',
  TERMINAL: 'terminal',
@@ -127,66 +129,85 @@ export const ActionBarItems = [
  }
 ];

-// 终端 tab 快捷键操作
-export const TerminalTabShortcutItems = {
-  CHANGE_TO_PREV_TAB: {
-    item: 'changeToPrevTab',
-    content: '切换为前一个 tab'
-  },
-  CHANGE_TO_NEXT_TAB: {
-    item: 'changeToNextTab',
-    content: '切换为后一个 tab'
-  },
-  CLOSE_TAB: {
-    item: 'closeTab',
-    content: '关闭当前 tab'
-  },
-  OPEN_NEW_CONNECT_TAB: {
-    item: 'openNewConnectTab',
-    content: '打开新建连接 tab'
-  },
-  OPEN_COPY_TERMINAL_TAB: {
-    item: 'openCopyTerminalTab',
-    content: '复制当前终端 tab'
-  },
-  COPY: {
-    item: 'copy',
-    content: '复制'
-  },
-  PASTE: {
-    item: 'paste',
-    content: '粘贴'
-  },
-  TO_TOP: {
-    item: 'toTop',
-    content: '去顶部'
-  },
-  TO_BOTTOM: {
-    item: 'toBottom',
-    content: '去底部'
-  },
-  SELECT_ALL: {
-    item: 'selectAll',
-    content: '全选'
-  },
-  SEARCH: {
-    item: 'search',
-    content: '搜索'
-  },
-  FONT_SIZE_PLUS: {
-    item: 'fontSizePlus',
-    content: '增大字号'
-  },
-  FONT_SIZE_SUBTRACT: {
-    item: 'fontSizeSubtract',
-    content: '减小字号'
-  },
-  COMMAND_EDITOR: {
-    item: 'commandEditor',
-    content: '命令编辑器'
-  },
+// 终端快捷键操作类型
+export const TerminalShortcutType = {
+  SYSTEM: 1,
+  TERMINAL: 2
 };

+// 终端操作快捷键 key
+export const TerminalShortcutKeys = {
+  // 切换为前一个 tab
+  CHANGE_TO_PREV_TAB: 'changeToPrevTab',
+  // 切换为后一个 tab
+  CHANGE_TO_NEXT_TAB: 'changeToNextTab',
+  // 关闭 tab
+  CLOSE_TAB: 'closeTab',
+  // 打开新建连接 tab
+  OPEN_NEW_CONNECT_TAB: 'openNewConnectTab',
+};
+
+// 终端操作快捷键
+export const TerminalShortcutItems: Array<ShortcutKeyItem> = [
+  {
+    item: TerminalShortcutKeys.CHANGE_TO_PREV_TAB,
+    content: '切换为前一个 tab',
+    type: TerminalShortcutType.SYSTEM
+  }, {
+    item: TerminalShortcutKeys.CHANGE_TO_NEXT_TAB,
+    content: '切换为后一个 tab',
+    type: TerminalShortcutType.SYSTEM
+  }, {
+    item: TerminalShortcutKeys.CLOSE_TAB,
+    content: '关闭当前 tab',
+    type: TerminalShortcutType.SYSTEM
+  }, {
+    item: TerminalShortcutKeys.OPEN_NEW_CONNECT_TAB,
+    content: '打开新建连接 tab',
+    type: TerminalShortcutType.SYSTEM
+  }, {
+    item: 'openCopyTerminalTab',
+    content: '复制当前终端 tab',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'copy',
+    content: '复制',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'paste',
+    content: '粘贴',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'toTop',
+    content: '去顶部',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'toBottom',
+    content: '去底部',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'selectAll',
+    content: '全选',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'search',
+    content: '搜索',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'fontSizePlus',
+    content: '增大字号',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'fontSizeSubtract',
+    content: '减小字号',
+    type: TerminalShortcutType.TERMINAL
+  }, {
+    item: 'commandEditor',
+    content: '命令编辑器',
+    type: TerminalShortcutType.TERMINAL
+  },
+];
+
 // 打开 sshModal key
 export const openSshModalKey = Symbol();

--- a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
+++ b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
@@ -49,6 +49,7 @@ export interface ContextMenuItem {
 export interface ShortcutKeyItem {
  item: string;
  content: string;
+  type: number;
 }

 // ssh 额外配置