feat: 查询命令分组.

orion-ops-ui/src/api/asset/command-snippet-group.ts

@@ -1,3 +1,4 @@
+import type { CommandSnippetQueryResponse } from './command-snippet';
 import axios from 'axios';
 
 /**
@@ -20,6 +21,7 @@ export interface CommandSnippetGroupUpdateRequest extends CommandSnippetGroupCre
 export interface CommandSnippetGroupQueryResponse {
   id: number;
   name: string;
+  items: Array<CommandSnippetQueryResponse>;
 }
 
 /**

orion-ops-ui/src/api/asset/command-snippet.ts

@@ -20,12 +20,16 @@ export interface CommandSnippetUpdateRequest extends CommandSnippetCreateRequest
 /**
  * 命令片段查询响应
  */
-export interface CommandSnippetQueryResponse {
+export interface CommandSnippetQueryResponse extends CommandSnippetQueryResponseExtra {
   id: number;
   groupId: number;
   name: string;
   command: string;
-  expand?: boolean;
+}
+
+export interface CommandSnippetQueryResponseExtra {
+  visible: boolean;
+  expand: boolean;
 }
 
 /**
@@ -33,7 +37,7 @@ export interface CommandSnippetQueryResponse {
  */
 export interface CommandSnippetWrapperResponse {
   groups: Array<CommandSnippetGroupQueryResponse>;
-  items: Array<CommandSnippetQueryResponse>;
+  ungroupedItems: Array<CommandSnippetQueryResponse>;
 }
 
 /**
@@ -54,7 +58,7 @@ export function updateCommandSnippet(request: CommandSnippetUpdateRequest) {
  * 查询全部命令片段
  */
 export function getCommandSnippetList() {
-  return axios.get<Array<CommandSnippetQueryResponse>>('/asset/command-snippet/list');
+  return axios.get<CommandSnippetWrapperResponse>('/asset/command-snippet/list');
 }
 
 /**

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

@@ -10,7 +10,7 @@
       </span>
     </template>
     <!-- 命令容器 -->
-    <div class="snippet-container">
+    <a-spin class="snippet-container" :loading="loading">
       <!-- 命令头部 -->
       <div class="snippet-header">
         <!-- 创建命令 -->
@@ -19,19 +19,26 @@
         </span>
         <!-- 搜索框 -->
         <a-input-search class="snippet-header-input"
+                        v-model="filterValue"
                         placeholder="名称"
-                        allow-clear />
+                        allow-clear
+                        @search="filterSnippet"
+                        @keyup.enter="filterSnippet" />
       </div>
       <!-- 命令片段 -->
-      <div class="snippet-list-container">
+      <div v-if="snippet" class="snippet-list-container">
+        <!-- 命令片段组 -->
         <snippet-group :snippet="snippet" />
-        <div>
-          <snippet-item v-for="item in snippet.items"
-                        :key="item.id"
-                        :item="item" />
+        <!-- 未分组命令片段 -->
+        <div class="ungrouped-snippet-container">
+          <template v-for="item in snippet.ungroupedItems">
+            <snippet-item v-if="item.visible"
+                          :key="item.id"
+                          :item="item" />
+          </template>
         </div>
       </div>
-    </div>
+    </a-spin>
   </a-drawer>
 </template>
 
@@ -46,26 +53,59 @@
   import { onMounted, ref } from 'vue';
   import useVisible from '@/hooks/visible';
   import useLoading from '@/hooks/loading';
+  import { getCommandSnippetList } from '@/api/asset/command-snippet';
   import SnippetItem from './snippet-item.vue';
   import SnippetGroup from './snippet-group.vue';
 
-  const { loading, toggle } = useLoading();
+  const { loading, setLoading } = useLoading();
   const { visible, setVisible } = useVisible();
-  const snippet = ref<CommandSnippetWrapperResponse>({
-    groups: [],
-    items: []
-  });
+
+  const filterValue = ref<string>();
+  const snippet = ref<CommandSnippetWrapperResponse>();
 
   // 打开
-  const open = () => {
+  const open = async () => {
     setVisible(true);
-
-    console.log('loading');
-    // loading
+    // 加载数据
+    await fetchData();
   };
 
   defineExpose({ open });
 
+  // 加载数据
+  const fetchData = async () => {
+    if (snippet.value) {
+      return;
+    }
+    setLoading(true);
+    try {
+      // 查询
+      const { data } = await getCommandSnippetList();
+      snippet.value = data;
+      // 设置状态
+      filterSnippet();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 过滤
+  const filterSnippet = () => {
+    snippet.value?.groups.forEach(g => {
+      g.items?.forEach(s => {
+        s.visible = !filterValue.value
+          || s.name.toLowerCase().includes(filterValue.value.toLowerCase())
+          || s.command.toLowerCase().includes(filterValue.value.toLowerCase());
+      });
+    });
+    snippet.value?.ungroupedItems.forEach(s => {
+      s.visible = !filterValue.value
+        || s.name.toLowerCase().includes(filterValue.value.toLowerCase())
+        || s.command.toLowerCase().includes(filterValue.value.toLowerCase());
+    });
+  };
+
   onMounted(() => {
     open();
   });
@@ -82,6 +122,8 @@
     position: relative;
     background: var(--color-bg-2);
     height: 100%;
+    width: 100%;
+    display: block;
 
     .snippet-header {
       padding: 12px;

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

@@ -1,16 +1,21 @@
 <template>
   <a-collapse :bordered="false">
-    <a-collapse-item v-for="group in snippet.groups"
-                     :key="group.id"
-                     :header="group.name">
-      <!-- 总量 -->
-      <template #extra>
-        {{ 1 }} 条
-      </template>
-      <snippet-item v-for="item in snippet.items"
-                    :key="item.id"
-                    :item="item" />
-    </a-collapse-item>
+    <template v-for="group in snippet.groups">
+      <a-collapse-item v-if="calcTotal(group) > 0"
+                       :key="group.id"
+                       :header="group.name">
+        <!-- 总量 -->
+        <template #extra>
+          {{ calcTotal(group) }} 条
+        </template>
+        <!-- snippet -->
+        <template v-for="item in group.items">
+          <snippet-item v-if="item.visible"
+                        :key="item.id"
+                        :item="item" />
+        </template>
+      </a-collapse-item>
+    </template>
   </a-collapse>
 </template>
 
@@ -21,6 +26,7 @@
 </script>
 
 <script lang="ts" setup>
+  import type { CommandSnippetGroupQueryResponse } from '@/api/asset/command-snippet-group';
   import type { CommandSnippetWrapperResponse } from '@/api/asset/command-snippet';
   import SnippetItem from './snippet-item.vue';
 
@@ -28,6 +34,11 @@
     snippet: CommandSnippetWrapperResponse
   }>();
 
+  // 计算总量
+  const calcTotal = (group: CommandSnippetGroupQueryResponse) => {
+    return group.items.filter(s => s.visible).length;
+  };
+
 </script>
 
 <style lang="less" scoped>