perf: 选项显示图标

packages/ui/certd-client/src/components/icon-select.vue

@@ -0,0 +1,16 @@
+<template>
+  <a-select>
+    <a-select-option v-for="item of options" :keu="item.value" :value="item.value" :label="item.label">
+      <span class="flex-o">
+        <fs-icon :icon="item.icon" class="fs-16 color-blue mr-5" />
+        {{ item.label }}
+      </span>
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  options: { value: any; label: string; icon: string }[];
+}>();
+</script>

packages/ui/certd-client/src/components/index.ts

@@ -7,7 +7,8 @@ import FoldBox from "./fold-box.vue";
 import { CronLight } from "@vue-js-cron/light";
 import "@vue-js-cron/light/dist/light.css";
 import Plugins from "./plugins/index";
-
+import LoadingButton from "./loading-button.vue";
+import IconSelect from "./icon-select.vue";
 export default {
   install(app: any) {
     app.component("PiContainer", PiContainer);
@@ -22,6 +23,9 @@ export default {
     app.component("InfoCircleOutlined", InfoCircleOutlined);
     app.component("UndoOutlined", UndoOutlined);
 
+    app.component("LoadingButton", LoadingButton);
+    app.component("IconSelect", IconSelect);
+
     app.use(vip);
     app.use(Plugins);
   }

packages/ui/certd-client/src/components/loading-button.vue

@@ -0,0 +1,24 @@
+<template>
+  <a-button :loading="loading" @click="onClick">
+    <slot></slot>
+  </a-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const props = defineProps<{
+  click?: () => Promise<void>;
+}>();
+
+const loading = ref(false);
+function onClick() {
+  loading.value = true;
+  try {
+    if (props.click) {
+      props.click();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

packages/ui/certd-client/src/components/plugins/cert/dns-provider-selector/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-select class="dns-provider-selector" :value="modelValue" :options="options" @update:value="onChanged"> </a-select>
+  <icon-select class="dns-provider-selector" :value="modelValue" :options="options" @update:value="onChanged"> </icon-select>
 </template>
 
 <script lang="ts">
@@ -24,7 +24,8 @@ export default {
       for (let item of list) {
         array.push({
           value: item.name,
-          label: item.title
+          label: item.title,
+          icon: item.icon
         });
       }
       options.value = array;

packages/ui/certd-client/src/components/vip-button/index.vue

@@ -12,18 +12,19 @@
   </div>
 </template>
 <script lang="tsx" setup>
-import { computed, reactive } from "vue";
+import { computed, onMounted, reactive } from "vue";
 import dayjs from "dayjs";
 import { message, Modal } from "ant-design-vue";
 import * as api from "./api";
 import { useSettingStore } from "/@/store/modules/settings";
 import { useRouter } from "vue-router";
 import { useUserStore } from "/@/store/modules/user";
+import { mitter } from "/@/utils/util.mitt";
 
 const settingStore = useSettingStore();
 const props = withDefaults(
   defineProps<{
-    mode?: "button" | "nav" | "icon";
+    mode?: "comm" | "button" | "nav" | "icon";
   }>(),
   {
     mode: "button"
@@ -36,7 +37,29 @@ type Text = {
 const text = computed<Text>(() => {
   const vipLabel = settingStore.vipLabel;
   const map = {
+    isComm: {
+      comm: {
+        name: `${vipLabel}已开通`,
+        title: "到期时间：" + expireTime.value
+      },
+      button: {
+        name: `${vipLabel}已开通`,
+        title: "到期时间：" + expireTime.value
+      },
+      icon: {
+        name: "",
+        title: `${vipLabel}已开通`
+      },
+      nav: {
+        name: `${vipLabel}`,
+        title: "到期时间：" + expireTime.value
+      }
+    },
     isPlus: {
+      comm: {
+        name: "商业版功能",
+        title: "升级商业版，获取商业授权"
+      },
       button: {
         name: `${vipLabel}已开通`,
         title: "到期时间：" + expireTime.value
@@ -51,13 +74,17 @@ const text = computed<Text>(() => {
       }
     },
     free: {
+      comm: {
+        name: "商业版功能",
+        title: "升级商业版，获取商业授权"
+      },
       button: {
-        name: "此为专业版功能",
+        name: "专业版功能",
         title: "升级专业版，享受更多VIP特权"
       },
       icon: {
         name: "",
-        title: "此为专业版功能"
+        title: "专业版功能"
       },
       nav: {
         name: "基础版",
@@ -65,7 +92,9 @@ const text = computed<Text>(() => {
       }
     }
   };
-  if (settingStore.isPlus) {
+  if (settingStore.isComm) {
+    return map.isComm[props.mode];
+  } else if (settingStore.isPlus) {
     return map.isPlus[props.mode];
   } else {
     return map.free[props.mode];
@@ -313,6 +342,13 @@ function openUpgrade() {
     }
   });
 }
+onMounted(() => {
+  mitter.on("openVipModal", () => {
+    if (props.mode === "nav" && !settingStore.isPlus) {
+      openUpgrade();
+    }
+  });
+});
 </script>
 
 <style lang="less">