perf: tab增加图标显示

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

@@ -3,7 +3,9 @@
   justify-content: center;
   align-items: center;
   font-size:16px;
-
+}
+.fs-icon {
+  font-size:16px;
 }
 
 .ant-btn {

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

@@ -24,7 +24,13 @@
         </template>
         <div class="flex-col h-100 w-100 overflow-hidden">
           <a-tabs v-model:active-key="pluginGroupActive" tab-position="left" class="flex-1 overflow-hidden">
-            <a-tab-pane v-for="group of computedPluginGroups" :key="group.key" :tab="group.title" class="scroll-y">
+            <a-tab-pane v-for="group of computedPluginGroups" :key="group.key" class="scroll-y">
+              <template #tab>
+                <div class="cd-step-form-tab-label">
+                  <fs-icon :icon="group.icon" class="mr-2" />
+                  <div>{{ group.title }}</div>
+                </div>
+              </template>
               <a-row v-if="!group.plugins || group.plugins.length === 0" :gutter="10">
                 <a-col class="flex-o">
                   <div class="flex-o m-10">没有找到插件</div>
@@ -412,11 +418,36 @@ export default {
 </script>
 
 <style lang="less">
+.cd-step-form-tab-label {
+  // 包括dropdown
+  display: flex;
+  align-items: center;
+  //width: 120px;
+  .fs-iconify.fs-icon {
+    display: flex;
+    align-items: center;
+    margin-top: -5px;
+  }
+  .fs-icon {
+    svg {
+      vertical-align: middle !important;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
 .step-form-drawer {
   max-width: 100%;
   .ant-tabs-right > div > .ant-tabs-nav .ant-tabs-tab {
     padding: 8px 10px;
   }
+  .ant-tabs-nav .ant-tabs-tab {
+    margin-top: 10px !important;
+    .fs-icon {
+      color: #00b7ff;
+    }
+  }
   &.fullscreen {
     .pi-step-form {
       .body {
@@ -465,7 +496,6 @@ export default {
 
       .step-plugin {
       }
-
       .ant-tabs-content {
         height: 100%;
       }

packages/ui/certd-client/src/views/certd/pipeline/pipeline/type.ts

@@ -45,14 +45,15 @@ export class PluginGroups {
       key: "all",
       title: "全部",
       order: 0,
-      plugins: []
+      plugins: [],
+      icon: "material-symbols:border-all-rounded",
     };
     for (const key in groups) {
       all.plugins.push(...groups[key].plugins);
     }
     this.groups = {
       all,
-      ...groups
+      ...groups,
     };
   }
 
@@ -81,7 +82,7 @@ export class PluginGroups {
       currentStageIndex,
       currentTaskIndex,
       currentStepIndex,
-      currentTask
+      currentTask,
     });
     const options: any[] = [];
     for (const step of steps) {
@@ -90,7 +91,7 @@ export class PluginGroups {
         options.push({
           value: `step.${step.id}.${key}`,
           label: `${stepDefine.output[key].title}【from：${step.title}】`,
-          type: step.type
+          type: step.type,
         });
       }
     }