perf: 优化首页图标

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

@@ -86,6 +86,11 @@ h6 {
   align-items: baseline;
 }
 
+.flex-evenly {
+  display: flex;
+  justify-content: space-evenly;
+}
+
 .flex {
   display: flex;
 }
@@ -312,7 +317,11 @@ h6 {
 }
 
 .fs-16 {
-  font-size: 16px;
+  font-size: 16px !important;
+}
+
+.fs-28 {
+  font-size: 28px !important;
 }
 
 .w-50\% {

packages/ui/certd-client/src/views/framework/home/dashboard/index.vue

@@ -67,7 +67,7 @@
     <div class="statistic-data m-20">
       <a-row :gutter="20" class="flex-wrap">
         <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount" :sub-counts="count.pipelineEnableCount">
+          <statistic-card icon="fluent-color:data-line-24" :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount" :sub-counts="count.pipelineEnableCount">
             <template v-if="count.pipelineCount === 0" #default>
               <div class="flex-center flex-1 flex-col">
                 <div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noPipeline") }}</div>
@@ -85,7 +85,7 @@
           </statistic-card>
         </a-col> -->
         <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.certCount')" :count="count.certCount" :sub-counts="count.certStatusCount">
+          <statistic-card icon="fluent-color:certificate-24" :title="t('certd.dashboard.certCount')" :count="count.certCount" :sub-counts="count.certStatusCount">
             <template v-if="count.certCount === 0" #default>
               <div class="flex-center flex-1 flex-col">
                 <div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noCert") }}</div>
@@ -97,12 +97,12 @@
           </statistic-card>
         </a-col>
         <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.recentRun')" :footer="false">
+          <statistic-card icon="fluent-color:data-trending-24" :title="t('certd.dashboard.recentRun')" :footer="false">
             <day-count v-if="count.historyCountPerDay" :data="count.historyCountPerDay" :title="t('certd.dashboard.runCount')"></day-count>
           </statistic-card>
         </a-col>
         <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.expiringCerts')">
+          <statistic-card icon="fluent-color:alert-urgent-24" :title="t('certd.dashboard.expiringCerts')">
             <expiring-list v-if="count.expiringList" :data="count.expiringList"></expiring-list>
           </statistic-card>
         </a-col>
@@ -112,8 +112,11 @@
     <div v-if="pluginGroups" class="plugin-list">
       <a-card>
         <template #title>
-          {{ t("certd.dashboard.supportedTasks") }}
+          <div class="flex items-center">
-          <a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
+            <fs-icon icon="fluent-color:puzzle-piece-24" class="mr-5 fs-28" />
+            <div class="mr-5">{{ t("certd.dashboard.supportedTasks") }}</div>
+            <a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
+          </div>
         </template>
         <a-row :gutter="10">
           <a-col v-for="item of pluginGroups.groups.all.plugins" :key="item.name" class="plugin-item-col" :xl="4" :md="6" :xs="24">
@@ -264,7 +267,7 @@ function transformStatusCount() {
   const certCount = count.value.certCount;
   count.value.certStatusCount = [
     { name: t("certd.dashboard.certExpiredCount"), value: certCount.expired, color: "red", checkIcon: "mingcute:warning-fill:#f44336" },
-    { name: t("certd.dashboard.certExpiringCount"), value: certCount.expiring, color: "yellow", checkIcon: "mingcute:alert-fill:#ff9800" },
+    { name: t("certd.dashboard.certExpiringCount"), value: certCount.expiring, color: "yellow", checkIcon: "mingcute:alert-fill:#ff9800", title: "到期不足15天" },
     { name: t("certd.dashboard.certNoExpireCount"), value: certCount.notExpired, color: "green" },
   ];
   count.value.certCount = certCount.total;

packages/ui/certd-client/src/views/framework/home/dashboard/statistic-card.vue

@@ -3,7 +3,10 @@
     <a-card>
       <div class="data-item">
         <div class="header">
-          <div class="title">{{ title }}</div>
+          <div class="title">
+            <fs-icon :icon="icon" class="statistic-icon"></fs-icon>
+            {{ title }}
+          </div>
           <div class="more"></div>
         </div>
         <div class="content">
@@ -11,11 +14,11 @@
             <div v-if="count !== 0" class="value flex items-center w-full">
               <div class="total flex-center flex-1 flex-col">
                 <span>{{ count }}</span>
-                <span class="title">{{ title }}</span>
+                <span class="sub-title">{{ title }}</span>
               </div>
               <a-divider type="vertical h-10"></a-divider>
-              <div class="sub flex-1 flex-col h-[80%] flex-between pl-4">
+              <div class="sub flex-1 flex-col h-[80%] flex-evenly pl-4">
-                <div v-for="item in subCounts" :key="item.name" class="sub-item flex justify-center w-full">
+                <div v-for="item in subCounts" :key="item.name" class="sub-item flex justify-center w-full" :title="item.title">
                   <div class="flex items-center w-[60%] ellipsis overflow-hidden">
                     <div class="status-indicator" :class="`bg-${item.color}`"></div>
                     {{ item.name }}：
@@ -43,6 +46,7 @@
 <script setup lang="ts">
 import { FsIcon } from "@fast-crud/fast-crud";
 const props = defineProps<{
+  icon: string;
   title: string;
   count?: number;
   subCounts?: {
@@ -50,6 +54,7 @@ const props = defineProps<{
     value: number;
     color: string;
     checkIcon?: string;
+    title?: string;
   }[];
 }>();
 const slots = defineSlots();
@@ -58,6 +63,9 @@ const slots = defineSlots();
 .statistic-card {
   margin-bottom: 10px;
 
+  .ant-card-body {
+    padding: 15px 24px;
+  }
   .icon-text {
     display: inline-flex;
     justify-content: left;
@@ -72,13 +80,33 @@ const slots = defineSlots();
   .data-item {
     display: flex;
     flex-direction: column;
-    height: 188px;
+    height: 200px;
 
     .header {
       display: flex;
       justify-content: space-between;
-      //padding-bottom: 10px;
+      margin-top: 6px;
-      color: #8077a4;
+      margin-bottom: 6px;
+      color: #494949;
+      align-items: center;
+
+      .title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 16px;
+      }
+
+      .more {
+        display: flex;
+        align-items: center;
+      }
+
+      .statistic-icon {
+        font-size: 28px;
+        margin-right: 5px;
+      }
     }
 
     .content {
@@ -96,13 +124,12 @@ const slots = defineSlots();
         .value {
           font-size: 50px;
           font-weight: 700;
-          color: #323232;
-
           .total {
-            .title {
+            color: hsl(var(--primary));
-              font-size: 14px;
+            .sub-title {
+              font-size: 12px;
               font-weight: 400;
-              color: #8077a4;
+              color: #626262;
             }
           }
 
@@ -137,9 +164,6 @@ const slots = defineSlots();
           }
         }
       }
-
-      x-vue-echarts {
-      }
     }
 
     .footer {
@@ -157,8 +181,6 @@ const slots = defineSlots();
       > * {
         cursor: pointer;
       }
-
-      margin-bottom: -10px;
     }
   }
 }

packages/ui/certd-client/vite.config.ts

@@ -6,6 +6,9 @@ import { createHtmlPlugin } from "vite-plugin-html";
 import { loadEnv } from "vite";
 import * as path from "path";
 import DefineOptions from "unplugin-vue-define-options/vite";
+import { theme } from "ant-design-vue";
+const { defaultAlgorithm, defaultSeed } = theme;
+const mapToken = defaultAlgorithm(defaultSeed);
 // import WindiCSS from "vite-plugin-windicss";
 // import { generateModifyVars } from "./build/modify-vars";
 // import { configThemePlugin } from "./build/theme-plugin";
@@ -76,7 +79,7 @@ export default ({ command, mode }) => {
           // 修改默认主题颜色，配置less变量
           // modifyVars: generateModifyVars(),
           javascriptEnabled: true,
-          // modifyVars: mapToken
+          modifyVars: mapToken,
         },
       },
     },