chore: 1

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

@@ -6,20 +6,41 @@
       <span v-if="userStore.plusInfo?.isPlus">
         <a-tooltip>
           <template #title> 到期时间：{{ expireTime }} </template>
-          <span @click="openUpgrade">专业版</span>
+          <span @click="openUpgrade">{{ texts.plus }}</span>
         </a-tooltip>
       </span>
-      <span v-else @click="openUpgrade"> 当前免费版 </span>
+      <span v-else @click="openUpgrade"> {{ texts.free }} </span>
     </div>
   </div>
 </template>
 <script lang="tsx" setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } from "vue";
 import { useUserStore } from "/src/store/modules/user";
 import dayjs from "dayjs";
 import { message, Modal } from "ant-design-vue";
 import * as api from "./api";
 
+const props = defineProps<{
+  mode: "button" | "nav";
+}>();
+type Texts = {
+  plus: string;
+  free: string;
+};
+const texts = computed<Texts>(() => {
+  if (props.mode === "button") {
+    return {
+      plus: "已开通",
+      free: "专业版功能"
+    };
+  } else {
+    return {
+      plus: "专业版",
+      free: "免费版，立即升级"
+    };
+  }
+});
+
 const userStore = useUserStore();
 const expireTime = ref("");
 if (userStore.plusInfo?.isPlus) {
@@ -91,6 +112,7 @@ function openUpgrade() {
   align-items: center;
   justify-content: center;
   height: 100%;
+  cursor: pointer;
   &.isPlus {
     color: #c5913f;
   }

packages/ui/certd-client/src/views/certd/settings/email-setting.vue

@@ -14,11 +14,11 @@
         @finish-failed="onFinishFailed"
       >
         <a-form-item label="使用邮件代理" name="usePlus">
-          <a-switch v-model:checked="formState.usePlus" :disabled="!userStore.isPlus" />
-          <div class="helper">专业版功能，免除繁琐的邮件配置，直接发邮件</div>
-          <div>
-            <vip-button></vip-button>
+          <div class="flex-o">
+            <a-switch v-model:checked="formState.usePlus" :disabled="!userStore.isPlus" />
+            <vip-button class="ml-5" mode="button"></vip-button>
           </div>
+          <div class="helper">专业版功能，免除繁琐的邮件配置，直接发邮件</div>
         </a-form-item>
         <template v-if="!formState.usePlus">
           <a-form-item label="SMTP域名" name="host" :rules="[{ required: true, message: '请输入smtp域名或ip' }]">