🔨 执行日志.

orion-ops-ui/src/views/exec/exec-command/components/log-panel-view.vue

@@ -7,40 +7,159 @@
       <!-- 面板头部 -->
       <div class="log-header">
         <!-- 左侧信息 -->
-        <div class="log-header-left">
-          <a-space :size="12">
-            <!-- 状态 -->
-            <a-tag :color="getDictValue(execHostStatusKey, host.status, 'color')">
-              {{ getDictValue(execHostStatusKey, host.status) }}
-            </a-tag>
-            <!-- exitStatus -->
-            <a-tag v-if="host.exitStatus || host.exitStatus === 0"
-                   :color="host.exitStatus === 0 ? 'arcoblue' : 'orangered'"
-                   title="exit status">
-              <template #icon>
-                <icon-check v-if="host.exitStatus === 0" />
-                <icon-exclamation v-else />
-              </template>
-              <span class="tag-value">{{ host.exitStatus }}</span>
-            </a-tag>
-            <!-- 持续时间 -->
-            <a-tag color="arcoblue" title="持续时间">
-              <template #icon>
-                <icon-loading v-if="host.status === execHostStatus.WAITING || host.status === execHostStatus.RUNNING" />
-                <icon-clock-circle v-else />
-              </template>
-              <span class="tag-value">{{ formatDuration(host.startTime, host.finishTime) || '0s' }}</span>
-            </a-tag>
-          </a-space>
-        </div>
+        <a-space class="log-header-left" :size="12">
+          <!-- 状态 -->
+          <a-tag :color="getDictValue(execHostStatusKey, host.status, 'color')">
+            {{ getDictValue(execHostStatusKey, host.status) }}
+          </a-tag>
+          <!-- exitStatus -->
+          <a-tag v-if="host.exitStatus || host.exitStatus === 0"
+                 :color="host.exitStatus === 0 ? 'arcoblue' : 'orangered'"
+                 title="exit status">
+            <template #icon>
+              <icon-check v-if="host.exitStatus === 0" />
+              <icon-exclamation v-else />
+            </template>
+            <span class="tag-value">{{ host.exitStatus }}</span>
+          </a-tag>
+          <!-- 持续时间 -->
+          <a-tag color="arcoblue" title="持续时间">
+            <template #icon>
+              <icon-loading v-if="host.status === execHostStatus.WAITING || host.status === execHostStatus.RUNNING" />
+              <icon-clock-circle v-else />
+            </template>
+            <span class="tag-value">{{ formatDuration(host.startTime, host.finishTime) || '0s' }}</span>
+          </a-tag>
+        </a-space>
         <!-- 右侧操作 -->
-        <div class="log-header-right">TODO</div>
-      </div>
-      <!-- 日志面板 -->
-      <div class="log-wrapper">
-        <div class="log-appender"
-             :ref="e => addRef(host.id, e) as unknown as VNodeRef" />
+        <a-space class="log-header-right" :size="12">
+          <!-- 搜索 -->
+          <span class="log-action click-icon-wrapper"
+                title="搜索"
+                @click="() => appender?.addFontSize(1)">
+            <icon-find-replace />
+          </span>
+          <!-- 增大字号 -->
+          <span class="log-action click-icon-wrapper"
+                title="增大字号"
+                @click="() => appender?.addFontSize(1)">
+            <icon-zoom-in />
+          </span>
+          <!-- 减小字号 -->
+          <span class="log-action click-icon-wrapper"
+                title="减小字号"
+                @click="() => appender?.addFontSize(-1)">
+            <icon-zoom-out />
+          </span>
+          <!-- 去顶部 -->
+          <span class="log-action click-icon-wrapper"
+                title="去顶部"
+                @click="() => appender?.toTop()">
+            <icon-up />
+          </span>
+          <!-- 去底部 -->
+          <span class="log-action click-icon-wrapper"
+                title="去底部"
+                @click="() => appender?.toBottom()">
+            <icon-down />
+          </span>
+          <!-- 全选 -->
+          <span class="log-action click-icon-wrapper"
+                title="全选"
+                @click="() => appender?.selectAll()">
+            <icon-expand />
+          </span>
+          <!-- 复制 -->
+          <span class="log-action click-icon-wrapper"
+                title="复制"
+                @click="() => appender?.copy()">
+            <icon-copy />
+          </span>
+          <!-- 复制全部 -->
+          <span class="log-action click-icon-wrapper"
+                title="复制全部"
+                @click="() => appender?.copyAll()">
+            <icon-brush />
+          </span>
+          <!-- 清空 -->
+          <span class="log-action click-icon-wrapper"
+                title="清空"
+                @click="() => appender?.clear()">
+            <icon-delete />
+          </span>
+          <!-- 下载 -->
+          <span class="log-action click-icon-wrapper"
+                title="下载"
+                @click="downloadLogFile(host.id)">
+            <icon-download />
+          </span>
+          <!-- 设置固定 -->
+          <a-switch type="round"
+                    checked-text="固定"
+                    unchecked-text="跟随"
+                    @change="(e: any) => appender?.setFixed(e as boolean)" />
+        </a-space>
       </div>
+      <!-- 右键菜单 -->
+      <a-dropdown :popup-max-height="false"
+                  trigger="contextMenu"
+                  position="bl"
+                  alignPoint>
+        <!-- 日志面板 -->
+        <div class="log-wrapper">
+          <!-- terminal -->
+          <div class="log-appender"
+               :ref="e => addRef(host.id, e as HTMLElement) as unknown as VNodeRef" />
+          <!-- 搜索框 -->
+          <xterm-search-modal ref="searchModal"
+                              class="search-modal"
+                              @find="searchWords"
+                              @close="searchClose" />
+        </div>
+        <!-- 右键菜单 -->
+        <template #content>
+          <!-- 去顶部 -->
+          <a-doption style="line-height: 30px; padding: 0 8px;"
+                     @click="() => appender?.toTop()">
+            <template #icon>
+              <icon-up />
+            </template>
+            <span>去顶部</span>
+          </a-doption>
+          <!-- 去底部 -->
+          <a-doption style="line-height: 30px; padding: 0 8px;"
+                     @click="() => appender?.toBottom()">
+            <template #icon>
+              <icon-down />
+            </template>
+            <span>去底部</span>
+          </a-doption>
+          <!-- 全选 -->
+          <a-doption style="line-height: 30px; padding: 0 8px;"
+                     @click="() => appender?.selectAll()">
+            <template #icon>
+              <icon-expand />
+            </template>
+            <span>全选</span>
+          </a-doption>
+          <!-- 复制 -->
+          <a-doption style="line-height: 30px; padding: 0 8px;"
+                     @click="() => appender?.copy()">
+            <template #icon>
+              <icon-copy />
+            </template>
+            <span>复制</span>
+          </a-doption>
+          <!-- 清空 -->
+          <a-doption style="line-height: 30px; padding: 0 8px;"
+                     @click="() => appender?.clear()">
+            <template #icon>
+              <icon-delete />
+            </template>
+            <span>清空</span>
+          </a-doption>
+        </template>
+      </a-dropdown>
     </div>
   </div>
 </template>
@@ -56,10 +175,13 @@
   import type { ExecCommandResponse } from '@/api/exec/exec';
   import type { LogDomRef, ILogAppender } from '@/components/xtrem/log-appender/appender.const';
   import { nextTick, ref, watch } from 'vue';
+  import { downloadExecLogFile } from '@/api/exec/exec';
+  import { downloadFile } from '@/utils/file';
   import { formatDuration } from '@/utils';
   import { execHostStatus, execHostStatusKey } from '@/views/exec/exec-log/types/const';
   import { useDictStore } from '@/store';
   import LogAppender from '@/components/xtrem/log-appender/log-appender';
+  import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
   import 'xterm/css/xterm.css';
 
   const props = defineProps<{
@@ -71,11 +193,12 @@
 
   const logRefs = ref<Array<LogDomRef>>([]);
   const appender = ref<ILogAppender>();
+  const searchModal = ref();
 
-  // 切换标签自适应
-  watch(() => props.current, () => {
+  // 切换标签
+  watch(() => props.current, (val) => {
     nextTick(() => {
-      appender.value?.fit();
+      appender.value?.setCurrent(val);
     });
   });
 
@@ -107,10 +230,27 @@
     });
   };
 
+  // 搜索关键字
+  const searchWords = (word: string, next: boolean, options: any) => {
+    appender.value?.find(word, next, options);
+  };
+
+  // 关闭搜索框
+  const searchClose = () => {
+    appender.value?.focus();
+  };
+
+  // 下载文件
+  const downloadLogFile = async (id: number) => {
+    const data = await downloadExecLogFile(id);
+    downloadFile(data);
+  };
+
 </script>
 
 <style lang="less" scoped>
-  @header-height: 38px;
+  @header-height: 40px;
+
   .log-view {
     width: 100%;
     height: 100%;
@@ -136,8 +276,10 @@
       font-weight: 600;
     }
 
-    &-right {
-
+    .log-action {
+      width: 24px;
+      height: 24px;
+      font-size: 16px;
     }
   }
 
@@ -157,4 +299,16 @@
       }
     }
   }
+
+  .search-modal {
+    --bg-focus: rgba(255, 255, 255, .85);
+    --bg: rgba(255, 255, 255, .95);
+    --color-text: #0E0E0E;
+    --color-text-focus: #0F0F0F;
+    --bg-icon-hover: rgba(12, 12, 12, .04);
+    --bg-icon-hover-focus: rgba(12, 12, 12, .08);
+    --bg-icon-selected: rgba(12, 12, 12, .06);
+    --bg-icon-selected-focus: rgba(12, 12, 12, .10);
+  }
+
 </style>

orion-ops-ui/src/views/exec/exec-command/components/log-panel.vue

@@ -138,9 +138,10 @@
   @host-real-width: @host-width + 16px;
 
   .log-panel-container {
-    width: 100%;
-    height: 100%;
+    width: calc(100% - 32px);
+    height: calc(100% - 32px);
     display: flex;
+    position: absolute;
   }
 
   .host-container, .log-container {

orion-ops-ui/src/views/host/terminal/components/ssh/ssh-search-modal.vue

@@ -1,202 +0,0 @@
-<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: 'sshSearchModal'
-  };
-</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(--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>

orion-ops-ui/src/views/host/terminal/components/ssh/ssh-view.vue

@@ -44,9 +44,10 @@
         <!-- 终端实例 -->
         <div class="ssh-inst" ref="terminalRef" />
         <!-- 搜索模态框 -->
-        <ssh-search-modal ref="searchModal"
-                          @find="findWords"
-                          @close="focus" />
+        <xterm-search-modal ref="searchModal"
+                            class="search-modal"
+                            @find="findWords"
+                            @close="focus" />
       </div>
     </ssh-context-menu>
     <!-- 命令编辑器 -->
@@ -74,8 +75,8 @@
   import { ActionBarItems, connectStatusKey } from '../../types/terminal.const';
   import ShellEditorModal from '@/components/view/shell-editor/modal/index.vue';
   import IconActions from '../layout/icon-actions.vue';
-  import SshSearchModal from './ssh-search-modal.vue';
   import SshContextMenu from './ssh-context-menu.vue';
+  import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
 
   const props = defineProps<{
     tab: TerminalTabItem
@@ -251,4 +252,15 @@
     }
   }
 
+  .search-modal {
+    --bg-focus: var(--search-bg-focus);
+    --bg: var(--search-bg);
+    --color-text: var(--search-color-text);
+    --color-text-focus: var(--search-color-text-focus);
+    --bg-icon-hover: var(--search-bg-icon-hover);
+    --bg-icon-hover-focus: var(--search-bg-icon-hover-focus);
+    --bg-icon-selected: var(--search-bg-icon-selected);
+    --bg-icon-selected-focus: var(--search-bg-icon-selected-focus);
+  }
+
 </style>