feat: 命令片段.

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

@@ -8,7 +8,7 @@
     <icon-actions class="bottom-actions"
                   :actions="bottomActions"
                   position="left" />
-    <!-- 代码片段 -->
+    <!-- 命令片段 -->
     <snippet-drawer ref="snippetRef" />
   </div>
 </template>

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

@@ -6,7 +6,7 @@
     <template #title>
       <span class="snippet-drawer-title">
         <icon-code />
-        代码片段
+        命令片段
       </span>
     </template>
     <!-- 命令容器 -->
@@ -15,8 +15,7 @@
       <div class="snippet-header-container">
         <!-- 头部操作 -->
         <div class="snippet-header">
-          <a-button>新建分组</a-button>
+          <a-button>新建</a-button>
-          <a-button>新建命令</a-button>
           <a-button>搜索</a-button>
         </div>
         <!-- 提示 -->
@@ -24,22 +23,38 @@
                  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 v-if="snippet.groups.length"
-          <a-collapse-item header="group 1" key="1" style="border: none;">
+                    :bordered="false">
-          </a-collapse-item>
+          <a-collapse-item v-for="group in snippet.groups"
-          <a-collapse-item header="group 2" key="2" style="border: none;">
+                           :key="group.id"
-          </a-collapse-item>
+                           :header="group.name">
-          <a-collapse-item header="group 3" key="3" style="border: none;">
+            <!-- 总量 -->
+            <template #extra>
+              {{ group.idList.length }} 条
+            </template>
+            {{ group }}
           </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>
+        <div>
-        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 v-for="item in snippet.snippets"
-        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>
+               :key="item.id"
+               class="snippet-item-wrapper">
+            <div class="snippet-item">
+
+            <span class="snippet-item-title">
+              {{ item.name }}
+            </span>
+              <span class="snippet-item-command">
+              {{ item.command }}
+            </span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </a-drawer>
@@ -52,12 +67,67 @@
 </script>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
+
+  export interface SnippetGroupResponse {
+    groups: Array<SnippetGroup>;
+    snippets: Array<Snippet>;
+  }
+
+  export interface SnippetGroup {
+    id: number;
+    name: string;
+    idList: Array<number>;
+  }
+
+  export interface Snippet {
+    id: number;
+    name: string;
+    command: string;
+  }
+
   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 snippet = ref<SnippetGroupResponse>({
+    groups: [{
+      id: 1,
+      name: 'group1',
+      idList: [1, 2]
+    }, {
+      id: 2,
+      name: 'group2',
+      idList: [3, 4]
+    }],
+    snippets: [{
+      id: 1,
+      name: 'command1command1command1command1command1command1command1command1command1command1command1command1command1command1command1',
+      command: 'echo 123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123'
+    }, {
+      id: 2,
+      name: 'command2',
+      command: 'echo 123123123123123123123123123123123123123123'
+    }, {
+      id: 3,
+      name: 'command3',
+      command: 'echo 123123123123123123123123123123123123123123'
+    }, {
+      id: 4,
+      name: 'command4',
+      command: 'echo 123123123123123123123123123123123123123123'
+    }, {
+      id: 5,
+      name: 'command5',
+      command: 'echo 123123123123123123123123123123123123123123'
+    }, {
+      id: 6,
+      name: 'command6',
+      command: 'echo 123123123123123123123123123123123123123123'
+    }]
+  });
 
   // 打开
   const open = () => {
@@ -90,7 +160,7 @@
       .snippet-header {
       }
 
-      .snippet-tips{
+      .snippet-tips {
         margin-top: 8px;
       }
     }
@@ -100,11 +170,65 @@
     position: relative;
     //height: calc(100% - 104px);
     overflow: auto;
-    padding: 0 12px 12px 12px;
   }
 
-  :deep(.arco-collapse-item-header) {
+  .snippet-item-wrapper {
+    padding: 4px 12px;
+
+    .snippet-item {
+      display: flex;
+      flex-direction: column;
+      padding: 8px;
+      background: var(--color-fill-1);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+      will-change: transform;
+
+      &:hover {
+        transform: scale(1.02);
+        background: var(--color-fill-2);
+      }
+
+      &-title {
+        color: var(--color-text-1);
+        margin-bottom: 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &-command {
+        color: var(--color-text-2);
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre;
+        word-break: break-all;
+      }
+
+    }
+  }
+
+  :deep(.arco-collapse-item) {
     border: none;
+
+    .arco-collapse-item-header-title {
+      user-select: none;
+    }
+
+    .arco-collapse-item-header {
+      border: none;
+    }
+
+    .arco-collapse-item-content {
+      background-color: unset;
+      padding: 0;
+    }
+
+    .arco-collapse-item-content-box {
+      padding: 0;
+    }
+
   }
 
 </style>

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

@@ -93,7 +93,6 @@
   const session = ref<ITerminalSession>();
 
   // TODO
-  // 代码片段
   // sftp
 
   // 发送命令

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

@@ -208,7 +208,7 @@ export const TerminalShortcutItems: Array<ShortcutKeyItem> = [
   },
 ];
 
-// 代码片段操作提示
+// 命令片段操作提示
 export const snippetTipsKey = 'snippet:opt';
 
 // 打开 sshModal key