feat: 代码片段列表.

orion-ops-ui/src/assets/style/arco-extends.less

@@ -33,6 +33,7 @@
     &.pass {
       background-color: rgb(var(--green-6));
     }
+
     &.error {
       background-color: rgb(var(--red-6));
     }
@@ -135,13 +136,6 @@
 
 // 抽屉
 .arco-drawer {
-  &-header {
-    border-bottom: unset;
-  }
-
-  &-footer {
-    border-top: unset;
-  }
 
   &-body {
     padding: 0;

orion-ops-ui/src/views/host/terminal/assets/styles/layout.less

@@ -280,11 +280,6 @@ body[terminal-theme='dark'] .arco-modal-container {
   background: var(--color-sidebar-tooltip-bg);
 }
 
-// tooltip 箭头
-.terminal-tooltip-arrow {
-  display: none;
-}
-
 // 终端右键菜单
 .terminal-context-menu {
   .arco-dropdown-option {

orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue

@@ -4,8 +4,9 @@
                :key="index"
                :position="position as any"
                :mini="true"
+               :show-arrow="false"
                content-class="terminal-tooltip-content"
-               arrow-class="terminal-tooltip-arrow"
+               :auto-fix-position="false"
                :content="action.content">
       <div class="terminal-sidebar-icon-wrapper" v-if="action.visible !== false">
         <div class="terminal-sidebar-icon"

orion-ops-ui/src/views/host/terminal/components/layout/terminal-right-sidebar.vue

@@ -8,6 +8,8 @@
     <icon-actions class="bottom-actions"
                   :actions="bottomActions"
                   position="left" />
+    <!-- 代码片段 -->
+    <snippet-drawer ref="snippetRef" />
   </div>
 </template>
 
@@ -21,32 +23,23 @@
   import type { SidebarAction } from '../../types/terminal.type';
   import { useTerminalStore } from '@/store';
   import { TerminalTabType } from '../../types/terminal.const';
-  import IconActions from './icon-actions.vue';
   import { Message } from '@arco-design/web-vue';
+  import { ref } from 'vue';
+  import IconActions from './icon-actions.vue';
+  import SnippetDrawer from '../snippet/snippet-drawer.vue';
 
-  const emits = defineEmits(['openSnippet', 'openSftp', 'openTransfer']);
+  const emits = defineEmits(['openSftp', 'openTransfer']);
 
   const { tabManager, sessionManager } = useTerminalStore();
 
-  // 终端截屏
-  const screenshot = () => {
-    const tab = tabManager.getCurrentTab();
-    if (!tab || tab.type !== TerminalTabType.TERMINAL) {
-      Message.warning('请切换到终端标签页');
-      return;
-    }
-    // 获取处理器并截图
-    sessionManager.getSession(tab.key)
-      ?.handler
-      ?.screenshot();
-  };
+  const snippetRef = ref();
 
   // 顶部操作
   const topActions = [
     {
-      icon: 'icon-code-block',
+      icon: 'icon-code',
       content: '打开命令片段',
-      click: () => emits('openSnippet')
+      click: () => snippetRef.value.open()
     },
     {
       icon: 'icon-folder',
@@ -68,10 +61,23 @@
     {
       icon: 'icon-camera',
       content: '截图',
-      click: screenshot
+      click: () => screenshot()
     },
   ];
 
+  // 终端截屏
+  const screenshot = () => {
+    const tab = tabManager.getCurrentTab();
+    if (!tab || tab.type !== TerminalTabType.TERMINAL) {
+      Message.warning('请切换到终端标签页');
+      return;
+    }
+    // 获取处理器并截图
+    sessionManager.getSession(tab.key)
+      ?.handler
+      ?.screenshot();
+  };
+
 </script>
 
 <style lang="less" scoped>

orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue

@@ -45,6 +45,7 @@
                   <!-- 修改别名 -->
                   <a-tooltip position="top"
                              :mini="true"
+                             :auto-fix-position="false"
                              content-class="terminal-tooltip-content"
                              arrow-class="terminal-tooltip-content"
                              content="修改别名">
@@ -82,6 +83,7 @@
               <!-- ip -->
               <a-tooltip position="top"
                          :mini="true"
+                         :auto-fix-position="false"
                          content-class="terminal-tooltip-content"
                          arrow-class="terminal-tooltip-content"
                          :content="item.address">
@@ -112,6 +114,7 @@
                 <!-- 连接主机 -->
                 <a-tooltip position="top"
                            :mini="true"
+                           :auto-fix-position="false"
                            content-class="terminal-tooltip-content"
                            arrow-class="terminal-tooltip-content"
                            content="连接主机">
@@ -124,6 +127,7 @@
                 <!-- 连接设置 -->
                 <a-tooltip position="top"
                            :mini="true"
+                           :auto-fix-position="false"
                            content-class="terminal-tooltip-content"
                            arrow-class="terminal-tooltip-content"
                            content="连接设置">
@@ -136,6 +140,7 @@
                 <!-- 收藏 -->
                 <a-tooltip position="top"
                            :mini="true"
+                           :auto-fix-position="false"
                            content-class="terminal-tooltip-content"
                            arrow-class="terminal-tooltip-content"
                            content="收藏">

orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue

@@ -0,0 +1,110 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :width="368"
+            :footer="false">
+    <!-- 表头 -->
+    <template #title>
+      <span class="snippet-drawer-title">
+        <icon-code />
+        代码片段
+      </span>
+    </template>
+    <!-- 命令容器 -->
+    <div class="snippet-container">
+      <!-- 命令头部 -->
+      <div class="snippet-header-container">
+        <!-- 头部操作 -->
+        <div class="snippet-header">
+          <a-button>新建分组</a-button>
+          <a-button>新建命令</a-button>
+          <a-button>搜索</a-button>
+        </div>
+        <!-- 提示 -->
+        <a-alert v-if="isNotTipped(snippetTipsKey)"
+                 class="snippet-tips"
+                 :closable="true"
+                 @on-close="closeTips">
+          双击命令直接粘贴
+        </a-alert>
+      </div>
+      <!-- 命令片段 -->
+      <div class="snippet-list-container">
+        <a-collapse :default-active-key="['1']" :bordered="false">
+          <a-collapse-item header="group 1" key="1" style="border: none;">
+          </a-collapse-item>
+          <a-collapse-item header="group 2" key="2" style="border: none;">
+          </a-collapse-item>
+          <a-collapse-item header="group 3" key="3" style="border: none;">
+          </a-collapse-item>
+        </a-collapse>
+        123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>
+        123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>
+        123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'snippetDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { useTipsStore } from '@/store';
+  import useVisible from '@/hooks/visible';
+  import { snippetTipsKey } from '../../types/terminal.const';
+
+  const { isNotTipped, setTipped } = useTipsStore();
+  const { visible, setVisible } = useVisible(true);
+
+  // 打开
+  const open = () => {
+    setVisible(true);
+    // loading
+  };
+
+  // 关闭提示
+  const closeTips = () => {
+    console.log('close');
+  };
+
+  defineExpose({ open });
+
+</script>
+
+<style lang="less" scoped>
+  .snippet-drawer-title {
+    font-size: 14px;
+  }
+
+  .snippet-container {
+    position: relative;
+    height: 100%;
+
+    .snippet-header-container {
+      padding: 12px;
+      //height: 104px;
+
+      .snippet-header {
+      }
+
+      .snippet-tips{
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .snippet-list-container {
+    position: relative;
+    //height: calc(100% - 104px);
+    overflow: auto;
+    padding: 0 12px 12px 12px;
+  }
+
+  :deep(.arco-collapse-item-header) {
+    border: none;
+  }
+
+</style>

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

@@ -5,7 +5,8 @@
            ref="inputRef"
            v-model="inputValue"
            placeholder="搜索关键字"
-           @keyup.enter="find(true)" />
+           @keyup.enter="find(true)"
+           @keyup.esc="close" />
     <div class="options-wrapper">
       <!-- 上一个-->
       <div class="icon-wrapper"
@@ -124,7 +125,7 @@
     width: 272px;
     height: 32px;
     padding: 4px;
-    z-index: 9999;
+    z-index: 30;
     border-radius: 2px;
     display: flex;
     align-items: center;

orion-ops-ui/src/views/host/terminal/index.vue

@@ -11,7 +11,7 @@
         <terminal-left-sidebar />
       </div>
       <!-- 内容区域 -->
-      <div class="host-layout-content">
+      <div id="terminal-layout-content" class="host-layout-content">
         <!-- 主机加载中骨架 -->
         <loading-skeleton v-if="contentLoading" />
         <!-- 终端内容区域 -->
@@ -116,7 +116,6 @@
       height: var(--header-height);
       background: var(--color-bg-header);
       position: relative;
-      z-index: 9999;
     }
 
     &-main {

orion-ops-ui/src/views/host/terminal/types/terminal.const.ts

@@ -208,6 +208,9 @@ export const TerminalShortcutItems: Array<ShortcutKeyItem> = [
   },
 ];
 
+// 代码片段操作提示
+export const snippetTipsKey = 'snippet:opt';
+
 // 打开 sshModal key
 export const openSshModalKey = Symbol();