perf: 插件选择支持搜索

packages/ui/certd-client/src/style/common.less

@@ -68,6 +68,17 @@ h1, h2, h3, h4, h5, h6 {
   flex: 1;
 }
 
+.flex-col{
+    display: flex;
+    flex-direction: column;
+}
+
+.scroll-y{
+    overflow-y: auto;
+
+}
+
+
 .mb-2 {
   margin-bottom: 2px;
 }
@@ -137,6 +148,13 @@ h1, h2, h3, h4, h5, h6 {
 .w-100 {
   width: 100%;
 }
+.h-100 {
+  height: 100%;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
 
 .block-header {
   margin: 3px;

packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/step-form/index.vue

@@ -8,43 +8,61 @@
     </template>
     <template v-if="currentStep">
       <pi-container v-if="currentStep._isAdd" class="pi-step-form">
-        <a-tabs tab-position="left">
+        <template #header>
-          <a-tab-pane v-for="group of pluginGroups.groups" :key="group.key" :tab="group.title">
+          <a-row :gutter="10" class="mb-10">
-            <a-row :gutter="10">
+            <a-col :span="24" style="padding-left: 20px">
-              <a-col v-for="item of group.plugins" :key="item.key" class="step-plugin" :span="12">
+              <a-input-search v-model:value="pluginSearch.keyword" placeholder="搜索插件" :allow-clear="true" :show-search="true"></a-input-search>
-                <a-card
+            </a-col>
-                  hoverable
+          </a-row>
-                  :class="{ current: item.name === currentStep.type }"
+        </template>
-                  @click="stepTypeSelected(item)"
+        <div class="flex-col h-100 w-100 overflow-hidden">
-                  @dblclick="
+          <a-tabs v-model:active-key="pluginGroupActive" tab-position="left" class="flex-1 overflow-hidden">
-                    stepTypeSelected(item);
+            <a-tab-pane v-for="group of computedPluginGroups" :key="group.key" :tab="group.title" class="scroll-y">
-                    stepTypeSave();
+              <a-row v-if="!group.plugins || group.plugins.length === 0" :gutter="10">
-                  "
+                <a-col class="flex-o">
-                >
+                  <div class="flex-o m-10">没有找到插件</div>
-                  <a-card-meta>
+                </a-col>
-                    <template #title>
+              </a-row>
-                      <a-avatar :src="item.icon || '/images/plugin.png'" />
+              <a-row v-else :gutter="10">
-                      <span class="title">{{ item.title }}</span>
+                <a-col v-for="item of group.plugins" :key="item.key" class="step-plugin" :span="12">
-                      <vip-button v-if="item.needPlus" mode="icon" />
+                  <a-card
-                    </template>
+                    hoverable
-                    <template #description>
+                    :class="{ current: item.name === currentStep.type }"
-                      <span :title="item.desc">{{ item.desc }}</span>
+                    @click="stepTypeSelected(item)"
-                    </template>
+                    @dblclick="
-                  </a-card-meta>
+                      stepTypeSelected(item);
-                </a-card>
+                      stepTypeSave();
-              </a-col>
+                    "
-            </a-row>
+                  >
-          </a-tab-pane>
+                    <a-card-meta>
-        </a-tabs>
+                      <template #title>
-        <div style="padding: 20px; margin-left: 100px">
+                        <a-avatar :src="item.icon || '/images/plugin.png'" />
-          <a-button v-if="editMode" type="primary" @click="stepTypeSave"> 确定 </a-button>
+                        <span class="title">{{ item.title }}</span>
+                        <vip-button v-if="item.needPlus" mode="icon" />
+                      </template>
+                      <template #description>
+                        <span :title="item.desc">{{ item.desc }}</span>
+                      </template>
+                    </a-card-meta>
+                  </a-card>
+                </a-col>
+              </a-row>
+            </a-tab-pane>
+          </a-tabs>
         </div>
+        <template #footer>
+          <div style="padding: 20px; margin-left: 100px">
+            <a-button v-if="editMode" type="primary" @click="stepTypeSave"> 确定 </a-button>
+          </div>
+        </template>
       </pi-container>
       <pi-container v-else class="pi-step-form">
-        <a-form ref="stepFormRef" class="step-form" :model="currentStep" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <template #header>
           <div class="mb-10">
             <a-alert type="info" :message="currentPlugin.title" :description="currentPlugin.desc"> </a-alert>
           </div>
+        </template>
+        <a-form ref="stepFormRef" class="step-form" :model="currentStep" :label-col="labelCol" :wrapper-col="wrapperCol">
           <fs-form-item
             v-model="currentStep.title"
             :item="{
@@ -66,9 +84,9 @@
         </a-form>
 
         <template #footer>
-          <a-form-item v-if="editMode" :wrapper-col="{ span: 14, offset: 4 }">
+          <div v-if="editMode" class="bottom-button">
             <a-button type="primary" @click="stepSave"> 确定 </a-button>
-          </a-form-item>
+          </div>
         </template>
       </pi-container>
     </template>
@@ -77,7 +95,7 @@
 
 <script lang="tsx">
 import { message, Modal } from "ant-design-vue";
-import { computed, inject, Ref, ref } from "vue";
+import { computed, inject, Ref, ref, watch } from "vue";
 import _ from "lodash-es";
 import { nanoid } from "nanoid";
 import { CopyOutlined } from "@ant-design/icons-vue";
@@ -263,7 +281,45 @@ export default {
       const blankFn = () => {
         return {};
       };
+
+      const pluginSearch = ref({
+        keyword: "",
+        result: []
+      });
+      const pluginGroupActive = ref("all");
+      const computedPluginGroups: any = computed(() => {
+        const groups = pluginGroups.groups;
+        if (pluginSearch.value.keyword) {
+          const keyword = pluginSearch.value.keyword.toLowerCase();
+          const list = groups.all.plugins.filter((plugin) => {
+            return (
+              plugin.title?.toLowerCase().includes(keyword) || plugin.desc?.toLowerCase().includes(keyword) || plugin.name?.toLowerCase().includes(keyword)
+            );
+          });
+          return {
+            search: { key: "search", title: "搜索结果", plugins: list }
+          };
+        } else {
+          return groups;
+        }
+      });
+      watch(
+        () => {
+          return pluginSearch.value.keyword;
+        },
+        (val: any) => {
+          if (val) {
+            pluginGroupActive.value = "search";
+          } else {
+            pluginGroupActive.value = "all";
+          }
+        }
+      );
+
       return {
+        pluginGroupActive,
+        computedPluginGroups,
+        pluginSearch,
         stepTypeSelected,
         stepTypeSave,
         pluginGroups,
@@ -321,8 +377,23 @@ export default {
 
 <style lang="less">
 .pi-step-form {
+  .bottom-button {
+    padding: 20px;
+    padding-bottom: 5px;
+    margin-left: 100px;
+  }
+
   .body {
-    padding: 10px;
+    padding: 0px;
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+    .ant-tabs-tabpane {
+      padding-right: 10px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
     .ant-card {
       margin-bottom: 10px;