🔨 执行日志.

orion-ops-ui/src/components/app/navbar/index.vue

@@ -332,6 +332,7 @@
     display: flex;
     align-items: center;
     padding-left: 20px;
+    color: var(--color-text-1);
 
     &-logo {
       width: 32px;

orion-ops-ui/src/components/xtrem/log-appender/appender.const.ts

@@ -33,6 +33,7 @@ export interface LogDomRef {
 export interface LogAppenderConf {
   id: number;
   el: HTMLElement;
+  fixed: boolean;
   terminal: Terminal;
   addons: LogAddons;
 }
@@ -49,8 +50,38 @@ export interface ILogAppender {
   // 初始化
   init(refs: Array<LogDomRef>): Promise<void>;
 
-  // 自适应
-  fit(): void;
+  // 设置当前元素
+  setCurrent(id: number): void;
+
+  // 查找关键字
+  find(word: string, next: boolean, options: any): void;
+
+  // 聚焦
+  focus(): void;
+
+  // 设置固定
+  setFixed(fixed: boolean): void;
+
+  // 去顶部
+  toTop(): void;
+
+  // 去底部
+  toBottom(): void;
+
+  // 添加字体大小
+  addFontSize(addSize: number): void;
+
+  // 复制
+  copy(): void;
+
+  // 复制全部
+  copyAll(): void;
+
+  // 选中全部
+  selectAll(): void;
+
+  // 清空
+  clear(): void;
 
   // 关闭 client
   closeClient(): void;

orion-ops-ui/src/components/xtrem/log-appender/log-appender.ts

@@ -1,38 +1,38 @@
-import type { ExecTailRequest } from '@/api/exec/exec';
-import { getExecLogTailToken } from '@/api/exec/exec';
 import type { ILogAppender, LogAddons, LogAppenderConf, LogDomRef } from './appender.const';
+import type { ExecTailRequest } from '@/api/exec/exec';
 import { AppenderOptions } from './appender.const';
+import { getExecLogTailToken } from '@/api/exec/exec';
 import { webSocketBaseUrl } from '@/utils/env';
 import { Message } from '@arco-design/web-vue';
 import { createWebSocket } from '@/utils';
+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 { CanvasAddon } from 'xterm-addon-canvas';
-import { useDebounceFn } from '@vueuse/core';
-import { addEventListen, removeEventListen } from '@/utils/event';
-
-// todo SEARCH addon setfixed
-// todo font-size totop copy tobottom selectall clear
-// todo 批量执行的 warn
 
 // 执行日志 appender 实现
 export default class LogAppender implements ILogAppender {
 
-  private config: ExecTailRequest;
+  private current: LogAppenderConf;
 
   private client?: WebSocket;
 
+  private readonly config: ExecTailRequest;
+
   private readonly appenderRel: Record<string, LogAppenderConf>;
 
   private keepAliveTask?: number;
 
-  private readonly fitFn: () => {};
+  private readonly fitAllFn: () => {};
 
   constructor(config: ExecTailRequest) {
+    this.current = undefined as unknown as LogAppenderConf;
     this.config = config;
     this.appenderRel = {};
-    this.fitFn = useDebounceFn(this.fit).bind(this);
+    this.fitAllFn = useDebounceFn(this.fitAll).bind(this);
   }
 
   // 初始化
@@ -49,6 +49,8 @@ export default class LogAppender implements ILogAppender {
     for (let logDomRef of logDomRefs) {
       // 初始化 terminal
       const terminal = new Terminal(AppenderOptions);
+      // 初始化快捷键
+      this.initCustomKey(terminal);
       // 初始化插件
       const addons = this.initAddons(terminal);
       // 打开终端
@@ -57,12 +59,46 @@ export default class LogAppender implements ILogAppender {
       addons.fit.fit();
       this.appenderRel[logDomRef.id] = {
         ...logDomRef,
+        fixed: false,
         terminal,
         addons
       };
     }
+    // 设置当前对象
+    this.current = this.appenderRel[logDomRefs[0].id];
     // 注册自适应事件
-    addEventListen(window, 'resize', this.fitFn);
+    addEventListen(window, 'resize', this.fitAllFn);
+  }
+
+  // 初始化快捷键操作
+  initCustomKey(terminal: Terminal) {
+    terminal.attachCustomKeyEventHandler((e: KeyboardEvent) => {
+      if (e.type !== 'keydown') {
+        return true;
+      }
+      if (e.ctrlKey && e.code === 'KeyC') {
+        // 复制
+        e.preventDefault();
+        this.copy();
+        return false;
+      } else if (e.ctrlKey && e.code === 'KeyL') {
+        // 清空
+        e.preventDefault();
+        this.clear();
+        return false;
+      } else if (e.ctrlKey && e.code === 'KeyA') {
+        // 全选
+        e.preventDefault();
+        this.selectAll();
+        return false;
+      } else if (e.ctrlKey && e.code === 'KeyF') {
+        // 搜索
+        e.preventDefault();
+        // TODO open search
+        return false;
+      }
+      return true;
+    });
   }
 
   // 初始化插件
@@ -102,10 +138,92 @@ export default class LogAppender implements ILogAppender {
     }, 15000);
   }
 
-  // 自适应
-  fit(): void {
+  // 设置当前元素
+  setCurrent(id: number): void {
+    const rel = this.appenderRel[id];
+    if (!rel) {
+      return;
+    }
+    this.current = rel;
+    // 自适应
+    rel.addons.fit.fit();
+    // 非固定跳转到最底部
+    if (!rel.fixed) {
+      rel.terminal.scrollToBottom();
+    }
+    this.focus();
+  }
+
+  // 查找关键字
+  find(word: string, next: boolean, options: any) {
+    if (next) {
+      this.current.addons.search.findNext(word, options);
+    } else {
+      this.current.addons.search.findPrevious(word, options);
+    }
+  }
+
+  // 设置固定
+  setFixed(fixed: boolean): void {
+    this.current.fixed = fixed;
+    this.focus();
+  }
+
+  // 去顶部
+  toTop(): void {
+    this.current.terminal.scrollToTop();
+    this.focus();
+  }
+
+  // 去底部
+  toBottom(): void {
+    this.current.terminal.scrollToBottom();
+    this.focus();
+  }
+
+  // 添加字体大小
+  addFontSize(addSize: number): void {
+    this.current.terminal.options['fontSize'] = this.current.terminal.options['fontSize'] as number + addSize;
+    this.current.addons.fit.fit();
+    this.focus();
+  }
+
+  // 复制
+  copy(): void {
+    copyText(this.current.terminal.getSelection(), '已复制');
+    this.focus();
+  }
+
+  // 复制全部
+  copyAll(): void {
+    this.selectAll();
+    this.copy();
+    this.current.terminal.clearSelection();
+    this.focus();
+  }
+
+  // 选中全部
+  selectAll(): void {
+    this.current.terminal.selectAll();
+    this.focus();
+  }
+
+  // 清空
+  clear(): void {
+    this.current.terminal.clear();
+    this.current.terminal.clearSelection();
+    this.focus();
+  }
+
+  // 聚焦
+  focus(): void {
+    this.current.terminal.focus();
+  }
+
+  // 自适应全部
+  fitAll(): void {
     Object.values(this.appenderRel).forEach(s => {
-      s.addons?.fit?.fit();
+      s.addons.fit.fit();
     });
   }
 
@@ -129,7 +247,7 @@ export default class LogAppender implements ILogAppender {
       }
     });
     // 移除自适应事件
-    removeEventListen(window, 'resize', this.fitFn);
+    removeEventListen(window, 'resize', this.fitAllFn);
   }
 
   // 关闭

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

@@ -0,0 +1,202 @@
+<template>
+  <div class="search-modal" v-show="visible">
+    <!-- 输入框-->
+    <input class="search-input"
+           ref="inputRef"
+           v-model="inputValue"
+           placeholder="搜索关键字"
+           @keyup.enter="find(true)"
+           @keyup.esc="close" />
+    <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: 'xtermSearchModal'
+  };
+</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: 30;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--bg);
+    transition: background-color .2s;
+
+    &:focus-within, &:hover {
+      background: var(--bg-focus);
+
+      .search-input {
+        color: var(--color-text-focus);
+      }
+
+      .icon-wrapper {
+        color: var(--color-text-focus);
+        transition: background-color .2s;
+
+        &:hover {
+          background: var(--bg-icon-hover-focus);
+        }
+
+        &.selected {
+          background: var(--bg-icon-selected-focus);
+        }
+      }
+    }
+  }
+
+  .search-input {
+    border: none;
+    background: red;
+    background: none;
+    width: 130px;
+    outline: none;
+    height: 18px;
+    font-size: 12px;
+    color: var(--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(--color-text);
+
+      &:not(:first-child) {
+        margin-left: 2px;
+      }
+
+      &:hover {
+        background: var(--bg-icon-hover);
+      }
+
+      &.selected {
+        background: var(--bg-icon-selected);
+      }
+    }
+  }
+
+</style>