perf: 优化加量包展示效果

packages/ui/certd-client/src/views/certd/suite/mine/api.ts

@@ -9,6 +9,7 @@ export type SuiteValue = {
 export type SuiteDetail = {
   enabled?: boolean;
   suites?: any[];
+  addons?: any[];
   expiresTime?: number;
   pipelineCount?: SuiteValue;
   domainCount?: SuiteValue;

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

@@ -3,7 +3,16 @@
     <div class="flex-o flex-wrap">
       <a-popover>
         <template #content>
-          <div>
+          <div style="width: 300px">
+            <div v-if="detail.addonList.length > 0" class="flex flex-wrap">
+              <a-tag v-for="(item, index) of detail.addonList" :key="index" color="green" class="pointer flex-o m-1">
+                <span class="mr-5">
+                  {{ item.title }}
+                </span>
+                <span>(<expires-time-text :value="item.expiresTime" />)</span>
+              </a-tag>
+              <a-divider class="m-5" />
+            </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="条" />
@@ -30,12 +39,13 @@
         </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">
+          <a-tag v-for="(item, index) of detail.suiteList" :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>
+          <a-tag v-if="detail.addonList.length > 0" color="green" class="pointer flex-o">加量包+{{ detail.addonList.length }}</a-tag>
           <div v-if="detail.suites?.length === 0" class="flex-o ml-5">暂无套餐 <a-button class="ml-5" type="primary" size="small" @click="goBuy">去购买</a-button></div>
         </div>
       </a-popover>
@@ -59,6 +69,10 @@ const detail = ref<SuiteDetail>({});
 
 async function loadSuiteDetail() {
   detail.value = await mySuiteApi.SuiteDetailGet();
+  const suites = detail.value.suites.filter(item => item.productType === "suite");
+  const addons = detail.value.suites.filter(item => item.productType === "addon");
+  detail.value.suiteList = suites;
+  detail.value.addonList = addons;
 }
 
 loadSuiteDetail();