perf: 选项显示图标

packages/ui/certd-client/src/views/sys/settings/tabs/register.vue

@@ -4,28 +4,31 @@
       <a-form-item label="开启自助注册" :name="['public', 'registerEnabled']">
         <a-switch v-model:checked="formState.public.registerEnabled" />
       </a-form-item>
-
-      <a-form-item label="限制用户流水线数量" :name="['public', 'limitUserPipelineCount']">
-        <a-input-number v-model:value="formState.public.limitUserPipelineCount" />
-        <div class="helper">0为不限制</div>
-      </a-form-item>
-      <a-form-item label="管理其他用户流水线" :name="['public', 'managerOtherUserPipeline']">
-        <a-switch v-model:checked="formState.public.managerOtherUserPipeline" />
-      </a-form-item>
-
       <template v-if="formState.public.registerEnabled">
+        <a-form-item label="限制用户流水线数量" :name="['public', 'limitUserPipelineCount']">
+          <a-input-number v-model:value="formState.public.limitUserPipelineCount" />
+          <div class="helper">0为不限制</div>
+        </a-form-item>
+        <a-form-item label="管理其他用户流水线" :name="['public', 'managerOtherUserPipeline']">
+          <a-switch v-model:checked="formState.public.managerOtherUserPipeline" />
+        </a-form-item>
+
         <a-form-item label="开启用户名注册" :name="['public', 'usernameRegisterEnabled']">
           <a-switch v-model:checked="formState.public.usernameRegisterEnabled" />
         </a-form-item>
+
         <a-form-item label="开启邮箱注册" :name="['public', 'emailRegisterEnabled']">
-          <a-switch v-model:checked="formState.public.emailRegisterEnabled" />
+          <div class="flex-o">
+            <a-switch v-model:checked="formState.public.emailRegisterEnabled" :disabled="!settingsStore.isPlus" title="专业版功能" />
+            <vip-button class="ml-5" mode="button"></vip-button>
+          </div>
           <div class="helper">需要<router-link to="/sys/settings/email">设置邮箱服务器</router-link></div>
         </a-form-item>
-        <a-form-item label="开启密码登录" :name="['public', 'passwordLoginEnabled']">
-          <a-switch v-model:checked="formState.public.passwordLoginEnabled" />
-        </a-form-item>
         <a-form-item label="开启手机号登录、注册" :name="['public', 'smsLoginEnabled']">
-          <a-switch v-model:checked="formState.public.smsLoginEnabled" />
+          <div class="flex-o">
+            <a-switch v-model:checked="formState.public.smsLoginEnabled" :disabled="!settingsStore.isComm" title="商业版功能" />
+            <vip-button class="ml-5" mode="comm"></vip-button>
+          </div>
         </a-form-item>
         <template v-if="formState.public.smsLoginEnabled">
           <a-form-item label="短信提供商" :name="['private', 'sms', 'type']">
@@ -34,18 +37,25 @@
             </a-select>
           </a-form-item>
 
-          <a-form-item label="阿里云授权" :name="['private', 'sms', 'config', 'accessId']">
+          <a-form-item label="阿里云授权" :name="['private', 'sms', 'config', 'accessId']" :rules="rules.required">
             <access-selector v-model="formState.private.sms.config.accessId" />
           </a-form-item>
 
-          <a-form-item label="短信签名" :name="['private', 'sms', 'config', 'signName']">
+          <a-form-item label="短信签名" :name="['private', 'sms', 'config', 'signName']" :rules="rules.required">
             <a-input v-model:value="formState.private.sms.config.signName" />
           </a-form-item>
 
-          <a-form-item label="验证码模版ID" :name="['private', 'sms', 'config', 'codeTemplateId']">
+          <a-form-item label="验证码模版ID" :name="['private', 'sms', 'config', 'codeTemplateId']" :rules="rules.required">
             <a-input v-model:value="formState.private.sms.config.codeTemplateId" />
             <div class="helper">需要配置一个变量为{code}的验证码模版</div>
           </a-form-item>
+          <a-form-item label="短信测试">
+            <div class="flex">
+              <a-input v-model:value="testMobile" placeholder="输入测试手机号" />
+              <loading-button class="ml-5" title="保存后再点击测试" type="primary" :click="testSendSms">测试</loading-button>
+            </div>
+            <div class="helper">保存后再点击测试</div>
+          </a-form-item>
         </template>
       </template>
 
@@ -63,13 +73,23 @@ import * as api from "/@/views/sys/settings/api";
 import { merge } from "lodash-es";
 import { useSettingStore } from "/@/store/modules/settings";
 import { notification } from "ant-design-vue";
-import { util } from "/@/utils";
-import AccessSelector from "/@/views/certd/access/access-selector/index.vue";
 
 defineOptions({
   name: "SettingRegister"
 });
 
+const testMobile = ref("");
+function testSendSms() {
+  if (!testMobile.value) {
+    notification.error({
+      message: "请输入测试手机号"
+    });
+    return;
+  }
+  api.TestSms({
+    mobile: testMobile.value
+  });
+}
 const formState = reactive<Partial<SysSettings>>({
   public: {
     registerEnabled: false
@@ -82,6 +102,22 @@ const formState = reactive<Partial<SysSettings>>({
   }
 });
 
+const rules = {
+  leastOneLogin: {
+    validator: (rule: any, value: any) => {
+      if (!formState.public.passwordLoginEnabled && !formState.public.smsLoginEnabled) {
+        return Promise.reject("密码登录和手机号登录至少开启一个");
+      }
+      return Promise.resolve();
+    }
+  },
+  required: {
+    required: true,
+    trigger: "change",
+    message: "此项必填"
+  }
+};
+
 async function loadSysSettings() {
   const data: any = await api.SysSettingsGet();
   merge(formState, data);