feat: 终端内搜索.

2024-01-13 02:22:03 +08:00
parent c16a461e5c
commit c0475dc7de
10 changed files with 314 additions and 77 deletions
--- a/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less
+++ b/orion-ops-ui/src/views/host/terminal/assets/styles/layout.less
@@ -10,6 +10,14 @@ body {
  --color-content-text-1: rgba(0, 0, 0, .8);
  --color-content-text-2: rgba(0, 0, 0, .85);
  --color-content-text-3: rgba(0, 0, 0, .95);
+  --search-bg-focus: rgba(234, 234, 234, .75);
+  --search-bg: rgba(234, 234, 234, .95);
+  --search-color-text: #0E0E0E;
+  --search-color-text-focus: #0F0F0F;
+  --search-bg-icon-hover: rgba(12, 12, 12, .04);
+  --search-bg-icon-hover-focus: rgba(12, 12, 12, .08);
+  --search-bg-icon-selected: rgba(12, 12, 12, .06);
+  --search-bg-icon-selected-focus: rgba(12, 12, 12, .10);
 }

 // 暗色主题配色常量
@@ -24,6 +32,14 @@ body[terminal-theme='dark'] {
  --color-content-text-1: rgba(255, 255, 255, .8);
  --color-content-text-2: rgba(255, 255, 255, .85);
  --color-content-text-3: rgba(255, 255, 255, .95);
+  --search-bg: rgba(12, 12, 12, .75);
+  --search-bg-focus: rgba(12, 12, 12, .95);
+  --search-color-text: #E0E0E0;
+  --search-color-text-focus: #F0F0F0;
+  --search-bg-icon-hover: rgba(255, 255, 255, .07);
+  --search-bg-icon-hover-focus: rgba(255, 255, 255, .12);
+  --search-bg-icon-selected: rgba(255, 255, 255, .12);
+  --search-bg-icon-selected-focus: rgba(255, 255, 255, .16);
 }

 // 布局常量
--- a/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue
@@ -35,7 +35,7 @@
  import { InnerTabs, TerminalTabType } from '../../types/terminal.const';
  import { get } from 'lodash';

-  const totalCount = 8;
+  const totalCount = 7;
  const { tabManager, hosts, openTerminal } = useTerminalStore();

  const combinedHandlers = ref<Array<CombinedHandlerItem>>([{
@@ -104,7 +104,7 @@
  .combined-container {
    padding: 12px;
    margin: 64px auto;
-    width: 424px;
+    width: 398px;
    height: 448px;
    display: flex;
    flex-direction: column;
@@ -145,7 +145,7 @@
      width: calc(100% - @handler-height - 12px);
      display: flex;
      align-items: center;
-      font-size: 14px;
+      font-size: 12px;

      &-wrapper {
        display: block;
--- a/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="search-modal" v-show="visible">
+    <!-- 输入框-->
+    <input class="search-input"
+           ref="inputRef"
+           v-model="inputValue"
+           placeholder="搜索关键字"
+           @keyup.enter="find(true)" />
+    <div class="options-wrapper">
+      <!-- 上一个-->
+      <div class="icon-wrapper"
+           title="上一个"
+           @click="find(false)">
+        <icon-up />
+      </div>
+      <!-- 下一个 -->
+      <div class="icon-wrapper"
+           title="下一个"
+           @click="find(true)">
+        <icon-down />
+      </div>
+      <!-- 区分大小写 -->
+      <div class="icon-wrapper"
+           :class="{ selected: searchOptions.caseSensitive }"
+           title="区分大小写"
+           @click="toggleOption('caseSensitive')">
+        <icon-font-colors />
+      </div>
+      <!-- 单词匹配 -->
+      <div class="icon-wrapper word-option"
+           :class="{ selected: searchOptions.wholeWord }"
+           title="单词匹配"
+           @click="toggleOption('wholeWord')">
+        <icon-formula />
+      </div>
+      <!-- 正则匹配 -->
+      <div class="icon-wrapper"
+           :class="{ selected: searchOptions.regex }"
+           title="正则匹配"
+           @click="toggleOption('regex')">
+        <icon-italic />
+      </div>
+      <!-- 关闭 -->
+      <div class="icon-wrapper"
+           title="关闭"
+           @click="close">
+        <icon-close />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'terminalSearchModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ISearchOptions } from 'xterm-addon-search';
+  import useVisible from '@/hooks/visible';
+  import { nextTick, ref } from 'vue';
+
+  const emits = defineEmits(['find', 'close']);
+
+  const { visible, setVisible } = useVisible();
+
+  const inputRef = ref();
+  const inputValue = ref();
+  const searchOptions = ref<ISearchOptions>({
+    caseSensitive: false,
+    wholeWord: false,
+    regex: false
+  });
+
+  // 打开
+  const open = () => {
+    setVisible(true);
+    nextTick(() => {
+      inputRef.value.focus();
+    });
+  };
+
+  // 关闭
+  const close = () => {
+    setVisible(false);
+    inputValue.value = undefined;
+    emits('close');
+  };
+
+  // 切换状态
+  const toggle = () => {
+    if (visible.value) {
+      close();
+    } else {
+      open();
+    }
+  };
+
+  // 查找
+  const find = (next: boolean) => {
+    inputRef.value.focus();
+    if (inputValue.value) {
+      emits('find', inputValue.value, next, searchOptions.value);
+    }
+  };
+
+  // 切换选项
+  const toggleOption = (key: string) => {
+    searchOptions.value[key as keyof ISearchOptions] =
+      !searchOptions.value[key as keyof ISearchOptions] as any;
+    inputRef.value.focus();
+  };
+
+  defineExpose({ open, close, toggle });
+
+</script>
+
+<style lang="less" scoped>
+  .search-modal {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 272px;
+    height: 32px;
+    padding: 4px;
+    z-index: 9999;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--search-bg);
+    transition: background-color .2s;
+
+    &:focus-within, &:hover {
+      background: var(--search-bg-focus);
+
+      .search-input {
+        color: var(--search-color-text-focus);
+      }
+
+      .icon-wrapper {
+        color: var(--search-color-text-focus);
+        transition: background-color .2s;
+
+        &:hover {
+          background: var(--search-bg-icon-hover-focus);
+        }
+
+        &.selected {
+          background: var(--search-bg-icon-selected-focus);
+        }
+      }
+    }
+  }
+
+  .search-input {
+    border: none;
+    background: red;
+    background: none;
+    width: 130px;
+    outline: none;
+    height: 18px;
+    font-size: 12px;
+    color: var(--search-color-text);
+  }
+
+  .word-option {
+    transform: rotate(-90deg)
+  }
+
+  .options-wrapper {
+    display: flex;
+    align-items: center;
+
+    .icon-wrapper {
+      font-size: 12px;
+      cursor: pointer;
+      border-radius: 4px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--search-color-text);
+
+      &:not(:first-child) {
+        margin-left: 2px;
+      }
+
+      &:hover {
+        background: var(--search-bg-icon-hover);
+      }
+
+      &.selected {
+        background: var(--search-bg-icon-selected);
+      }
+    }
+  }
+
+</style>
--- 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
@@ -42,14 +42,18 @@
           background: preference.theme.schema.background
         }">
      <div class="terminal-inst" ref="terminalRef" />
+      <!-- 搜索模态框 -->
+      <terminal-search-modal ref="searchModal"
+                             @find="findWords"
+                             @close="focus" />
    </div>
    <!-- 命令编辑器 -->
-    <shell-editor-modal ref="modal"
+    <shell-editor-modal ref="editorModal"
                        :closable="false"
                        :body-style="{ padding: '16px' }"
                        :dark="preference.theme.dark"
                        cancel-text="关闭"
-                        @ok="writeCommand(modal.getValue())"
+                        @ok="writeCommand(editorModal.getValue())"
                        @cancel="focus" />
  </div>
 </template>
@@ -68,6 +72,7 @@
  import { ActionBarItems, connectStatusKey } from '../../types/terminal.const';
  import IconActions from '../layout/icon-actions.vue';
  import ShellEditorModal from '@/components/view/shell-editor/shell-editor-modal.vue';
+  import TerminalSearchModal from './terminal-search-modal.vue';

  const props = defineProps<{
    tab: TerminalTabItem
@@ -77,18 +82,18 @@
  const { getDictValue } = useDictStore();
  const { preference, tabManager, sessionManager } = useTerminalStore();

-  const modal = ref();
+  const editorModal = ref();
+  const searchModal = ref();
  const commandInput = ref();
  const terminalRef = ref();
  const session = ref<ITerminalSession>();

  // TODO
-  // index 页面
-  // 搜索 search color 配置
  // 右键菜单补充     启用右键菜单 enableRightClickMenu  粘贴逻辑
-  // 快捷键补充 粘贴逻辑
+  // 设置快捷键  粘贴逻辑
+  // 读取快捷键并且禁用快捷键
  // 截屏
-  // 主机获取逻辑 最近连接逻辑
+  // sftp

  // 发送命令
  const writeCommandInput = async (e: KeyboardEvent) => {
@@ -111,6 +116,11 @@
    session.value?.focus();
  };

+  // 查询关键字
+  const findWords = (word: string, next: boolean, options: any) => {
+    session.value?.find(word, next, options);
+  };
+
  // 操作禁用状态
  const actionsDisableStatus = computed<Record<string, boolean | undefined>>(() => {
    return {
@@ -132,6 +142,8 @@
    checkAll: () => session.value?.selectAll(),
    // 复制选中部分
    copy: () => session.value?.copySelection(),
+    // 搜索
+    search: () => searchModal.value.toggle(),
    // 粘贴
    paste: async () => session.value?.pasteTrimEnd(await readText()),
    // ctrl + c
@@ -139,10 +151,7 @@
    // 回车
    enter: () => session.value?.paste(String.fromCharCode(13)),
    // 命令编辑器
-    commandEditor: () => modal.value.open('', ''),
-    // 搜索
-    search: () => {
-    },
+    commandEditor: () => editorModal.value.open('', ''),
    // 增大字号
    fontSizePlus: () => {
      if (session.value) {
--- a/orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts
+++ b/orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts
@@ -7,7 +7,7 @@ import { InputProtocol } from '../types/terminal.protocol';
 import { ITerminalOptions, Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { WebLinksAddon } from 'xterm-addon-web-links';
-import { SearchAddon } from 'xterm-addon-search';
+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';
@@ -235,6 +235,15 @@ export default class TerminalSession implements ITerminalSession {
    return selection;
  }

+  // 查找
+  find(word: string, next: boolean, options: ISearchOptions): void {
+    if (next) {
+      this.addons.search.findNext(word, options);
+    } else {
+      this.addons.search.findPrevious(word, options);
+    }
+  }
+
  // 去顶部
  toTop(): void {
    this.inst.scrollToTop();
--- a/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
+++ b/orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
@@ -21,7 +21,7 @@ export const InnerTabs = {
  DISPLAY_SETTING: {
    key: 'displaySetting',
    title: '显示设置',
-    icon: 'icon-dice',
+    icon: 'icon-stamp',
    type: TerminalTabType.SETTING
  },
  THEME_SETTING: {
@@ -88,6 +88,10 @@ export const ActionBarItems = [
    item: 'paste',
    icon: 'icon-paste',
    content: '粘贴',
+  }, {
+    item: 'search',
+    icon: 'icon-find-replace',
+    content: '搜索',
  }, {
    item: 'interrupt',
    icon: 'icon-formula',
@@ -100,10 +104,6 @@ export const ActionBarItems = [
    item: 'commandEditor',
    icon: 'icon-code-square',
    content: '命令编辑器',
-  }, {
-    item: 'search',
-    icon: 'icon-search',
-    content: '搜索',
  }, {
    item: 'fontSizePlus',
    icon: 'icon-zoom-in',
--- a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
+++ b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
@@ -3,7 +3,7 @@ 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 { SearchAddon } from 'xterm-addon-search';
+import type { ISearchOptions, SearchAddon } from 'xterm-addon-search';
 import type { ImageAddon } from 'xterm-addon-image';
 import type { CSSProperties } from 'vue';
 import type { HostQueryResponse } from '@/api/asset/host';
@@ -169,6 +169,8 @@ export interface ITerminalSession {
  selectAll: () => void;
  // 复制选中
  copySelection: () => string;
+  // 查找
+  find: (word: string, next: boolean, options: ISearchOptions) => void;
  // 去顶部
  toTop: () => void;
  // 去底部