From d31199298368776a0244d55423c777903bd3b4e4 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Mon, 2 Feb 2026 02:29:26 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20vip=20modal=20content=E8=BD=AC?=
 =?UTF-8?q?=E5=88=B0=E5=8D=95=E7=8B=AC=E7=9A=84=E7=BB=84=E4=BB=B6=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/vip-button/api.ts          |   7 +
 .../src/components/vip-button/index.vue       | 300 +-----------------
 .../vip-button/vip-modal-content.vue          | 295 +++++++++++++++++
 .../controller/sys/plus/plus-controller.ts    |   5 +
 4 files changed, 316 insertions(+), 291 deletions(-)
 create mode 100644 packages/ui/certd-client/src/components/vip-button/vip-modal-content.vue

diff --git a/packages/ui/certd-client/src/components/vip-button/api.ts b/packages/ui/certd-client/src/components/vip-button/api.ts
index 7e05c3375..f76bf7379 100644
--- a/packages/ui/certd-client/src/components/vip-button/api.ts
+++ b/packages/ui/certd-client/src/components/vip-button/api.ts
@@ -15,3 +15,10 @@ export async function getVipTrial(vipType: string) {
     data: { vipType },
   });
 }
+
+export async function getTodayVipOrderCount() {
+  return await request({
+    url: "/sys/plus/getTodayVipOrderCount",
+    method: "post",
+  });
+}
diff --git a/packages/ui/certd-client/src/components/vip-button/index.vue b/packages/ui/certd-client/src/components/vip-button/index.vue
index e72457e8d..68a7d61c1 100644
--- a/packages/ui/certd-client/src/components/vip-button/index.vue
+++ b/packages/ui/certd-client/src/components/vip-button/index.vue
@@ -14,16 +14,20 @@
 <script lang="tsx" setup>
 import { message, Modal } from "ant-design-vue";
 import dayjs from "dayjs";
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import * as api from "./api";
-import { useSettingStore } from "/@/store/settings";
+import { useSettingStore } from "/src/store/settings/index";
 import { useUserStore } from "/@/store/user";
 import { env } from "/@/utils/util.env";
 import { mitter } from "/@/utils/util.mitt";
+import VipModalContent from "./vip-modal-content.vue";
 const { t } = useI18n();
 
+defineOptions({
+  name: "VipButton",
+});
 const settingStore = useSettingStore();
 const props = withDefaults(
   defineProps<{
@@ -113,58 +117,16 @@ const expireTime = computed(() => {
 
 const expiredDays = computed(() => {
   if (settingStore.plusInfo?.isPlus && !settingStore.isPlus) {
-    //已过期多少天
     const days = dayjs().diff(dayjs(settingStore.plusInfo.expireTime), "day");
     return `${settingStore.vipLabel}已过期${days}天`;
   }
   return "";
 });
 
-const formState = reactive({
-  code: "",
-  inviteCode: "",
-});
-
 const router = useRouter();
-async function doActive() {
-  if (!formState.code) {
-    message.error(t("vip.enterCode"));
-    throw new Error(t("vip.enterCode"));
-  }
-  const res = await api.doActive(formState);
-  if (res) {
-    await settingStore.init();
-    const vipLabel = settingStore.vipLabel;
-    Modal.success({
-      title: t("vip.successTitle"),
-      content: t("vip.successContent", {
-        vipLabel,
-        expireDate: dayjs(settingStore.plusInfo.expireTime).format("YYYY-MM-DD"),
-      }),
-      onOk() {
-        if (!(settingStore.installInfo.bindUserId > 0)) {
-          Modal.confirm({
-            title: t("vip.bindAccountTitle"),
-            content: t("vip.bindAccountContent"),
-            onOk() {
-              router.push("/sys/account");
-            },
-          });
-        }
-      },
-    });
-  }
-}
-
-const computedSiteId = computed(() => settingStore.installInfo?.siteId);
 const [modal, contextHolder] = Modal.useModal();
 const userStore = useUserStore();
 
-function goAccount() {
-  Modal.destroyAll();
-  router.push("/sys/account");
-}
-
 async function getVipTrial(vipType = "plus") {
   const res = await api.getVipTrial(vipType);
   message.success(t("vip.congratulations_vip_trial", { duration: res.duration }));
@@ -253,6 +215,7 @@ function openUpgrade() {
       throw new Error(t("vip.already_perpetual_plus"));
     }
   }
+
   function goBuyPlusPage() {
     checkPerpetualPlus();
     if (settingStore.isComm) {
@@ -264,6 +227,7 @@ function openUpgrade() {
     }
     window.open(goBuyUrl);
   }
+
   function goBuyCommPage() {
     checkPerpetualPlus();
     if (settingStore.isPlus && !settingStore.isComm) {
@@ -278,75 +242,6 @@ function openUpgrade() {
     }
     window.open(goBuyCommUrl);
   }
-  const vipTypeDefine = {
-    free: {
-      title: t("vip.basic_edition"),
-      desc: t("vip.community_free_version"),
-      type: "free",
-      icon: "lucide:package-open",
-      privilege: [t("vip.unlimited_certificate_application"), t("vip.unlimited_domain_count"), t("vip.unlimited_certificate_pipelines"), t("vip.common_deployment_plugins"), t("vip.email_webhook_notifications")],
-    },
-    plus: {
-      title: t("vip.professional_edition"),
-      desc: t("vip.open_source_support"),
-      type: "plus",
-      privilege: [t("vip.vip_group_priority"), t("vip.unlimited_site_certificate_monitoring"), t("vip.more_notification_methods"), t("vip.plugins_fully_open")],
-      trial: {
-        title: t("vip.click_to_get_7_day_trial"),
-        click: () => {
-          openStarModal("plus");
-        },
-      },
-      icon: "stash:thumb-up",
-      priceText: productInfo.plus.priceText || `¥${productInfo.plus.price}/${t("vip.years")}`,
-      discountText: productInfo.plus.discountText || `¥${productInfo.plus.price3}/3${t("vip.years")}`,
-      tooltip: productInfo.plus.tooltip,
-      get() {
-        return (
-          <a-tooltip title={t("vip.afdian_support_vip")}>
-            <a-button size="small" type="primary" onClick={goBuyPlusPage}>
-              {t("vip.get_after_support")}
-            </a-button>
-          </a-tooltip>
-        );
-      },
-    },
-    comm: {
-      title: t("vip.business_edition"),
-      desc: t("vip.commercial_license"),
-      type: "comm",
-      icon: "vaadin:handshake",
-      privilege: [t("vip.all_pro_privileges"), t("vip.allow_commercial_use_modify_logo_title"), t("vip.data_statistics"), t("vip.plugin_management"), t("vip.unlimited_multi_users"), t("vip.support_user_payment")],
-      priceText: productInfo.comm.priceText || `¥${productInfo.comm.price}/${t("vip.years")}`,
-      discountText: productInfo.comm.discountText || `¥${productInfo.comm.price3}/3${t("vip.years")}`,
-      tooltip: productInfo.comm.tooltip,
-      trial: {
-        title: t("vip.click_to_get_7_day_trial"),
-        click: () => {
-          openStarModal("comm");
-        },
-      },
-      get() {
-        return (
-          <a-button size="small" type="primary" onClick={goBuyCommPage}>
-            {t("vip.buy")}
-          </a-button>
-        );
-      },
-    },
-  };
-
-  const manualActiveFlag = ref();
-  function showManualActivation() {
-    manualActiveFlag.value = true;
-  }
-
-  function goBindAccount() {
-    modalRef?.destroy();
-    router.push({
-      path: "/sys/account",
-    });
-  }
   const modalRef = modal.success({
     title,
     class: "vip-modal",
@@ -354,119 +249,7 @@ function openUpgrade() {
     okText: t("vip.close"),
     width: 1100,
     content: () => {
-      let manualActiveBlock: any = "";
-      if (manualActiveFlag.value) {
-        manualActiveBlock = (
-          <div>
-            <div class="mt-10">
-              <a-input-search class="w-2/6" v-model:value={formState.code} placeholder={placeholder} enter-button={t("vip.activate")} onSearch={doActive}></a-input-search>
-            </div>
-            <div class="mt-10">
-              {t("vip.activation_code_one_use")}
-              <a onClick={goAccount}>{t("vip.bind_account")}</a>，{t("vip.transfer_vip")}
-            </div>
-          </div>
-        );
-      }
-      const vipLabel = settingStore.vipLabel;
-      let plusInfo: any = "";
-      if (isPlus) {
-        plusInfo = (
-          <div class="mt-10 flex flex-col md:flex-row ">
-            <span class="mr-2">
-              {t("vip.current")} {vipLabel} {t("vip.activated_expire_time")} {settingStore.expiresText}
-            </span>
-            <a href="https://app.handfree.work/subject/#/page/detail/1" target="_blank">
-              {t("vip.learn_more")}
-            </a>
-          </div>
-        );
-      }
-
-      const slots = [];
-      for (const key in vipTypeDefine) {
-        // @ts-ignore
-        const item = vipTypeDefine[key];
-        const vipBlockClass = `vip-block  ${key === settingStore.plusInfo.vipType ? "current" : ""}`;
-        slots.push(
-          <div class="w-full md:w-1/3 mb-4 p-5">
-            <div class={vipBlockClass}>
-              <h3 class="block-header ">
-                <span class="flex-o">{item.title}</span>
-                {item.trial && (
-                  <span class="trial">
-                    <a-tooltip title={item.trial.message}>
-                      <a onClick={item.trial.click}>{item.trial.title}</a>
-                    </a-tooltip>
-                  </span>
-                )}
-              </h3>
-              <div style="color:green" class="flex-o">
-                <fs-icon icon={item.icon} class="fs-16 flex-o" />
-                {item.desc}
-              </div>
-              <ul class="flex-1 privilege">
-                {item.privilege.map((p: string) => (
-                  <li class="flex-baseline">
-                    <fs-icon class="color-green" icon="ion:checkmark-sharp" />
-                    {p}
-                  </li>
-                ))}
-              </ul>
-              <div class="footer flex-between flex-vc">
-                <div class="price-show">
-                  {item.priceText && (
-                    <span class="flex">
-                      <span class="-text">{item.priceText}</span>
-                      <a-tooltip class="ml-5" title={item.discountText}>
-                        <fs-icon class="pointer color-red" icon="ic:outline-discount"></fs-icon>
-                      </a-tooltip>
-                    </span>
-                  )}
-                  {!item.priceText && (
-                    <span>
-                      <span class="price-text">{t("vip.freee")}</span>
-                    </span>
-                  )}
-                </div>
-                <div class="get-show">{item.get && <div>{item.get()}</div>}</div>
-              </div>
-            </div>
-          </div>
-        );
-      }
-      return (
-        <div class="mt-10 mb-10 vip-active-modal">
-          {productInfo.notice && (
-            <div class="mb-10">
-              <a-alert type="error" message={productInfo.notice}></a-alert>
-            </div>
-          )}
-          <div class="vip-type-vs">
-            <a-row gutter={20}>{slots}</a-row>
-          </div>
-          <div>
-            <a href="https://certd.docmirror.cn/guide/donate/#相关问题" target="_blank">
-              {t("vip.question")}
-            </a>
-          </div>
-          <div class="mt-10">
-            <div class=" w-100 flex-col md:flex-row ">
-              <span>{t("vip.site_id")}：</span>
-              <fs-copyable v-model={computedSiteId.value} class="mr-2"></fs-copyable>
-              <a onClick={goBindAccount}>{t("vip.not_effective")}</a>
-            </div>
-          </div>
-          {plusInfo}
-          <div class="mt-10 ">
-            <span class="mr-2">{t("vip.have_activation_code")}</span>
-            <span>
-              <a onClick={showManualActivation}>{t("vip.manual_activation")}</a>
-            </span>
-          </div>
-          <div class="mt-10">{manualActiveBlock}</div>
-        </div>
-      );
+      return <VipModalContent placeholder={placeholder} isPlus={isPlus} productInfo={productInfo} goBuyPlusPage={goBuyPlusPage} goBuyCommPage={goBuyCommPage} openStarModal={openStarModal} modalRef={modalRef} />;
     },
   });
 }
@@ -502,69 +285,4 @@ onMounted(() => {
   .text {
   }
 }
-
-.vip-active-modal {
-  .vip-block {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    border: 1px solid #eee;
-    border-radius: 5px;
-    height: 275px;
-    line-height: 24px;
-
-    .privilege {
-      margin-top: 5px;
-    }
-
-    //background-color: rgba(250, 237, 167, 0.79);
-    &.current {
-      border-color: green;
-    }
-
-    .block-header {
-      padding: 0px;
-      display: flex;
-      justify-content: space-between;
-
-      .trial {
-        font-size: 12px;
-        font-wight: 400;
-      }
-    }
-
-    .footer {
-      padding-top: 5px;
-      margin-top: 0px;
-      border-top: 1px solid #eee;
-
-      .price-text {
-        font-size: 18px;
-        color: red;
-      }
-    }
-  }
-
-  ul {
-    list-style-type: unset;
-    margin-left: 0px;
-    padding: 0;
-  }
-
-  .color-green {
-    color: green;
-  }
-
-  .vip-type-vs {
-    .privilege {
-      .fs-icon {
-        color: green;
-      }
-    }
-
-    .fs-icon {
-      margin-right: 5px;
-    }
-  }
-}
 </style>
diff --git a/packages/ui/certd-client/src/components/vip-button/vip-modal-content.vue b/packages/ui/certd-client/src/components/vip-button/vip-modal-content.vue
new file mode 100644
index 000000000..dd48fb087
--- /dev/null
+++ b/packages/ui/certd-client/src/components/vip-button/vip-modal-content.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="mt-10 mb-10 vip-active-modal">
+    <div v-if="productInfo.notice" class="mb-10">
+      <a-alert type="error" :message="productInfo.notice"></a-alert>
+    </div>
+    <div class="vip-type-vs">
+      <a-row :gutter="20">
+        <div v-for="(item, key) in vipTypeDefine" :key="key" class="w-full md:w-1/3 mb-4 p-5">
+          <div :class="`vip-block  ${key === settingStore.plusInfo.vipType ? 'current' : ''}`">
+            <h3 class="block-header">
+              <span class="flex-o">{{ item.title }}</span>
+              <span v-if="item.trial" class="trial">
+                <a-tooltip :title="item.trial.message">
+                  <a @click="item.trial.click">{{ item.trial.title }}</a>
+                </a-tooltip>
+              </span>
+            </h3>
+            <div style="color: green" class="flex-o">
+              <fs-icon :icon="item.icon" class="fs-16 flex-o" />
+              {{ item.desc }}
+            </div>
+            <ul class="flex-1 privilege">
+              <li v-for="p in item.privilege" :key="p" class="flex-baseline">
+                <fs-icon class="color-green" icon="ion:checkmark-sharp" />
+                {{ p }}
+              </li>
+            </ul>
+            <div class="footer flex-between flex-vc">
+              <div class="price-show">
+                <span v-if="item.priceText" class="flex">
+                  <span class="-text">{{ item.priceText }}</span>
+                  <a-tooltip class="ml-5" :title="item.discountText">
+                    <fs-icon class="pointer color-red" icon="ic:outline-discount"></fs-icon>
+                  </a-tooltip>
+                </span>
+                <span v-else>
+                  <span class="price-text">{{ t("vip.freee") }}</span>
+                </span>
+              </div>
+              <div class="get-show">
+                <template v-if="item.type === 'plus'">
+                  <a-tooltip :title="t('vip.afdian_support_vip')">
+                    <a-button size="small" type="primary" @click="goBuyPlusPage">
+                      {{ t("vip.get_after_support") }}
+                    </a-button>
+                  </a-tooltip>
+                </template>
+                <template v-else-if="item.type === 'comm'">
+                  <a-button size="small" type="primary" @click="goBuyCommPage">
+                    {{ t("vip.buy") }}
+                  </a-button>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-row>
+    </div>
+    <div>
+      <a href="https://certd.docmirror.cn/guide/donate/#相关问题" target="_blank">
+        {{ t("vip.question") }}
+      </a>
+    </div>
+    <div class="mt-10">
+      <div class="w-100 flex-col md:flex-row">
+        <span>{{ t("vip.site_id") }}：</span>
+        <fs-copyable v-model="computedSiteId" class="mr-2"></fs-copyable>
+        <a @click="goBindAccount">{{ t("vip.not_effective") }}</a>
+      </div>
+    </div>
+    <div v-if="isPlus" class="mt-10 flex flex-col md:flex-row">
+      <span class="mr-2"> {{ t("vip.current") }} {{ vipLabel }} {{ t("vip.activated_expire_time") }} {{ settingStore.expiresText }} </span>
+      <a href="https://app.handfree.work/subject/#/page/detail/1" target="_blank">
+        {{ t("vip.learn_more") }}
+      </a>
+    </div>
+    <div class="mt-10">
+      <span class="mr-2">{{ t("vip.have_activation_code") }}</span>
+      <span>
+        <a @click="showManualActivation">{{ t("vip.manual_activation") }}</a>
+      </span>
+    </div>
+    <div v-if="manualActiveFlag" class="mt-10">
+      <div class="mt-10">
+        <a-input-search v-model:value="formState.code" class="w-2/6" :placeholder="placeholder" :enter-button="t('vip.activate')" @search="doActive"></a-input-search>
+      </div>
+      <div class="mt-10">
+        {{ t("vip.activation_code_one_use") }}
+        <a @click="goAccount">{{ t("vip.bind_account") }}</a
+        >，{{ t("vip.transfer_vip") }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { message, Modal } from "ant-design-vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useSettingStore } from "/@/store/settings";
+import * as api from "./api";
+
+const { t } = useI18n();
+const router = useRouter();
+const settingStore = useSettingStore();
+
+const props = defineProps<{
+  placeholder: string;
+  isPlus: boolean;
+  productInfo: any;
+  goBuyPlusPage: () => void;
+  goBuyCommPage: () => void;
+  openStarModal: (vipType: string) => void;
+  modalRef: any;
+}>();
+
+const formState = reactive({
+  code: "",
+  inviteCode: "",
+});
+
+async function doActive() {
+  if (!formState.code) {
+    message.error(t("vip.enterCode"));
+    throw new Error(t("vip.enterCode"));
+  }
+  const res = await api.doActive(formState);
+  if (res) {
+    await settingStore.init();
+    const vipLabel = settingStore.vipLabel;
+    Modal.success({
+      title: t("vip.successTitle"),
+      content: t("vip.successContent", {
+        vipLabel,
+        expireDate: dayjs(settingStore.plusInfo.expireTime).format("YYYY-MM-DD"),
+      }),
+      onOk() {
+        if (!(settingStore.installInfo.bindUserId > 0)) {
+          Modal.confirm({
+            title: t("vip.bindAccountTitle"),
+            content: t("vip.bindAccountContent"),
+            onOk() {
+              router.push("/sys/account");
+            },
+          });
+        }
+      },
+    });
+  }
+}
+
+const vipLabel = computed(() => settingStore.vipLabel);
+const computedSiteId = computed(() => settingStore.installInfo?.siteId);
+
+const manualActiveFlag = ref(false);
+
+function showManualActivation() {
+  manualActiveFlag.value = true;
+}
+
+function goAccount() {
+  props.modalRef?.destroy();
+  router.push("/sys/account");
+}
+
+function goBindAccount() {
+  props.modalRef?.destroy();
+  router.push({
+    path: "/sys/account",
+  });
+}
+
+const vipTypeDefine: any = {
+  free: {
+    title: t("vip.basic_edition"),
+    desc: t("vip.community_free_version"),
+    type: "free",
+    icon: "lucide:package-open",
+    privilege: [t("vip.unlimited_certificate_application"), t("vip.unlimited_domain_count"), t("vip.unlimited_certificate_pipelines"), t("vip.common_deployment_plugins"), t("vip.email_webhook_notifications")],
+  },
+  plus: {
+    title: t("vip.professional_edition"),
+    desc: t("vip.open_source_support"),
+    type: "plus",
+    privilege: [t("vip.vip_group_priority"), t("vip.unlimited_site_certificate_monitoring"), t("vip.more_notification_methods"), t("vip.plugins_fully_open")],
+    trial: {
+      title: t("vip.click_to_get_7_day_trial"),
+      click: () => {
+        props.openStarModal("plus");
+      },
+    },
+    icon: "stash:thumb-up",
+    priceText: props.productInfo.plus.priceText || `¥${props.productInfo.plus.price}/${t("vip.years")}`,
+    discountText: props.productInfo.plus.discountText || `¥${props.productInfo.plus.price3}/3${t("vip.years")}`,
+    tooltip: props.productInfo.plus.tooltip,
+  },
+  comm: {
+    title: t("vip.business_edition"),
+    desc: t("vip.commercial_license"),
+    type: "comm",
+    icon: "vaadin:handshake",
+    privilege: [t("vip.all_pro_privileges"), t("vip.allow_commercial_use_modify_logo_title"), t("vip.data_statistics"), t("vip.plugin_management"), t("vip.unlimited_multi_users"), t("vip.support_user_payment")],
+    priceText: props.productInfo.comm.priceText || `¥${props.productInfo.comm.price}/${t("vip.years")}`,
+    discountText: props.productInfo.comm.discountText || `¥${props.productInfo.comm.price3}/3${t("vip.years")}`,
+    tooltip: props.productInfo.comm.tooltip,
+    trial: {
+      title: t("vip.click_to_get_7_day_trial"),
+      click: () => {
+        props.openStarModal("comm");
+      },
+    },
+  },
+};
+
+const TodayVipOrderCountRef = ref(0);
+
+async function getTodayVipOrderCount() {
+  const res = await api.getTodayVipOrderCount();
+  if (res) {
+    TodayVipOrderCountRef.value = res.count;
+  }
+}
+
+onMounted(async () => {
+  getTodayVipOrderCount();
+});
+</script>
+
+<style lang="less">
+.vip-active-modal {
+  .vip-block {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    height: 275px;
+    line-height: 24px;
+
+    .privilege {
+      margin-top: 5px;
+    }
+
+    &.current {
+      border-color: green;
+    }
+
+    .block-header {
+      padding: 0px;
+      display: flex;
+      justify-content: space-between;
+
+      .trial {
+        font-size: 12px;
+        font-wight: 400;
+      }
+    }
+
+    .footer {
+      padding-top: 5px;
+      margin-top: 0px;
+      border-top: 1px solid #eee;
+
+      .price-text {
+        font-size: 18px;
+        color: red;
+      }
+    }
+  }
+
+  ul {
+    list-style-type: unset;
+    margin-left: 0px;
+    padding: 0;
+  }
+
+  .color-green {
+    color: green;
+  }
+
+  .vip-type-vs {
+    .privilege {
+      .fs-icon {
+        color: green;
+      }
+    }
+
+    .fs-icon {
+      margin-right: 5px;
+    }
+  }
+}
+</style>
diff --git a/packages/ui/certd-server/src/controller/sys/plus/plus-controller.ts b/packages/ui/certd-server/src/controller/sys/plus/plus-controller.ts
index b7720b0a5..c8902f3aa 100644
--- a/packages/ui/certd-server/src/controller/sys/plus/plus-controller.ts
+++ b/packages/ui/certd-server/src/controller/sys/plus/plus-controller.ts
@@ -48,6 +48,11 @@ export class SysPlusController extends BaseController {
     const res = await this.plusService.getVipTrial(vipType);
     return this.ok(res);
   }
+  @Post('/getTodayVipOrderCount', { summary: 'sys:settings:edit' })
+  async getTodayVipOrderCount() {
+    const res = await this.plusService.getTodayOrderCount();
+    return this.ok(res);
+  }
   //
   // @Get('/test', { summary: Constants.per.guest })
   // async test() {