chore: 教程优化

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

@@ -14,24 +14,43 @@
     </div>
 
     <div class="statistic-data m-20">
-      <a-row gutter="20">
-        <a-col span="6">
+      <a-row :gutter="20">
+        <a-col :span="6">
           <statistic-card title="流水线数量"></statistic-card>
         </a-col>
-        <a-col span="6">
-          <statistic-card title="授权数量"></statistic-card>
-        </a-col>
-        <a-col span="6">
+        <a-col :span="6">
           <statistic-card title="运行次数"></statistic-card>
         </a-col>
-        <a-col span="6">
-          <statistic-card title="下次触发时间"></statistic-card>
+        <a-col :span="6">
+          <statistic-card title="最近运行"></statistic-card>
         </a-col>
-        <a-col span="6">
-          <statistic-card title="下次证书更新时间"></statistic-card>
+        <a-col :span="6">
+          <statistic-card title="最近到期证书"></statistic-card>
         </a-col>
       </a-row>
     </div>
+
+    <div v-if="pluginGroups" class="plugin-list">
+      <a-card>
+        <template #title>
+          支持的部署任务列表 <a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
+        </template>
+        <a-row :gutter="10">
+          <a-col v-for="item of pluginGroups.groups.all.plugins" class="plugin-item-col" :span="4">
+            <a-card>
+              <div class="plugin-item">
+                <div class="icon">
+                  <fs-icon :icon="item.icon" class="font-size-16 color-blue" />
+                </div>
+                <div class="text">
+                  <div class="title">{{ item.title }}</div>
+                </div>
+              </div>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-card>
+    </div>
   </div>
 </template>
 
@@ -42,14 +61,26 @@ defineOptions({
   name: "DashboardUser"
 });
 import { useUserStore } from "/@/store/modules/user";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import dayjs from "dayjs";
 import StatisticCard from "/@/views/framework/home/dashboard/statistic-card.vue";
+import * as pluginApi from "/@/views/certd/pipeline/api.plugin";
+import { PluginGroups } from "/@/views/certd/pipeline/pipeline/type";
 
 const userStore = useUserStore();
 const now = computed(() => {
   return dayjs().format("YYYY-MM-DD HH:mm:ss");
 });
+
+async function getPluginGroups() {
+  const groups = await pluginApi.GetGroups({});
+  return new PluginGroups(groups);
+}
+
+const pluginGroups = ref();
+onMounted(async () => {
+  pluginGroups.value = await getPluginGroups();
+});
 </script>
 
 <style lang="less">
@@ -70,5 +101,29 @@ const now = computed(() => {
       }
     }
   }
+
+  .plugin-list {
+    margin: 0 20px;
+
+    .plugin-item-col {
+      margin-bottom: 10px;
+      .plugin-item {
+        display: flex;
+        justify-items: center;
+        line-height: 20px;
+        .icon {
+          display: flex;
+          justify-items: center;
+          font-size: 20px;
+          margin-right: 8px;
+        }
+        .text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: keep-all;
+        }
+      }
+    }
+  }
 }
 </style>

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

@@ -26,6 +26,7 @@ const props = defineProps<{
 </script>
 <style lang="less">
 .statistic-card {
+  margin-bottom: 10px;
   .icon-text {
     display: inline-flex;
     justify-content: left;