feat: 用户套餐，用户支付功能

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

@@ -12,14 +12,19 @@
           <div>
             <span>您好，{{ userInfo.nickName || userInfo.username }}， 欢迎使用 【{{ siteInfo.title }}】</span>
           </div>
-          <div>
-            <a-tag color="green" class="flex-inline pointer"> <fs-icon icon="ion:time-outline" class="mr-5"></fs-icon> {{ now }}</a-tag>
-            <a-badge v-if="userStore.isAdmin" :dot="hasNewVersion">
-              <a-tag color="blue" class="flex-inline pointer" :title="'最新版本:' + latestVersion" @click="openUpgradeUrl()">
-                <fs-icon icon="ion:rocket-outline" class="mr-5"></fs-icon>
-                v{{ version }}
-              </a-tag>
-            </a-badge>
+          <div class="flex-o">
+            <a-tag color="green" class="flex-inline pointer m-0"> <fs-icon icon="ion:time-outline"></fs-icon> {{ now }}</a-tag>
+            <template v-if="userStore.isAdmin">
+              <a-divider type="vertical" />
+              <a-badge :dot="hasNewVersion">
+                <a-tag color="blue" class="flex-inline pointer m-0" :title="'最新版本:' + latestVersion" @click="openUpgradeUrl()">
+                  <fs-icon icon="ion:rocket-outline" class="mr-5"></fs-icon>
+                  v{{ version }}
+                </a-tag>
+              </a-badge>
+            </template>
+            <a-divider type="vertical" />
+            <suite-card class="m-0"></suite-card>
           </div>
         </div>
       </div>
@@ -82,7 +87,7 @@
     <div v-if="pluginGroups" class="plugin-list">
       <a-card>
         <template #title>
-          支持的部署任务列表 <a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
+          已支持的部署任务总览 <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" :key="item.name" class="plugin-item-col" :span="4">
@@ -118,7 +123,7 @@ import TutorialButton from "/@/components/tutorial/index.vue";
 import DayCount from "./charts/day-count.vue";
 import PieCount from "./charts/pie-count.vue";
 import ExpiringList from "./charts/expiring-list.vue";
-
+import SuiteCard from "./suite-card.vue";
 import { useSettingStore } from "/@/store/modules/settings";
 import { SiteInfo } from "/@/api/modules/api.basic";
 import { UserInfoRes } from "/@/api/modules/api.user";

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="my-suite-card">
+    <div class="flex-o">
+      <a-popover>
+        <template #content>
+          <div>
+            <div class="flex-between mt-5">
+              <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 流水线条数：</div>
+              <suite-value :model-value="detail.pipelineCount.max" :used="detail.pipelineCount.used" unit="条" />
+            </div>
+            <div class="flex-between mt-5">
+              <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" />域名数量：</div>
+              <suite-value :model-value="detail.domainCount.max" :used="detail.domainCount.used" unit="个" />
+            </div>
+            <div class="flex-between mt-5">
+              <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 部署次数：</div>
+              <suite-value :model-value="detail.deployCount.max" :used="detail.deployCount.used" unit="次" />
+            </div>
+            <div class="flex-between mt-5">
+              <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 监控站点数：</div>
+              <suite-value :model-value="detail.monitorCount.max" :used="detail.monitorCount.used" unit="次" />
+            </div>
+          </div>
+        </template>
+        <div class="flex-o">
+          <fs-icon icon="ant-design:gift-outlined" class="color-green mr-5" />
+          <a-tag v-for="(item, index) of detail.suites" :key="index" color="green" class="pointer flex-o">
+            <span class="mr-5">
+              {{ item.title }}
+            </span>
+            <span>(<expires-time-text :value="item.expiresTime" />)</span>
+          </a-tag>
+        </div>
+      </a-popover>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import SuiteValue from "/@/views/sys/suite/product/suite-value.vue";
+import { computed, ref } from "vue";
+import { request } from "/@/api/service";
+import dayjs from "dayjs";
+import ExpiresTimeText from "/@/components/expires-time-text.vue";
+
+defineOptions({
+  name: "SuiteCard"
+});
+
+type SuiteValue = {
+  max: number;
+  used: number;
+};
+type SuiteDetail = {
+  suites?: any[];
+  expiresTime?: number;
+  pipelineCount?: SuiteValue;
+  domainCount?: SuiteValue;
+  deployCount?: SuiteValue;
+  monitorCount?: SuiteValue;
+};
+const detail = ref<SuiteDetail>({});
+
+const api = {
+  async SuiteDetailGet() {
+    return await request({
+      url: "/mine/suite/detail",
+      method: "post"
+    });
+  }
+};
+async function loadSuiteDetail() {
+  detail.value = await api.SuiteDetailGet();
+}
+
+loadSuiteDetail();
+</script>