perf: 支持短信验证码登录

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

@@ -1,162 +1,29 @@
 <template>
   <fs-page class="page-sys-settings">
-    <template #header>
-      <div class="title">系统设置</div>
-    </template>
-    <div class="sys-settings-form settings-form">
-      <a-form
-        :model="formState"
-        name="basic"
-        :label-col="{ span: 8 }"
-        :wrapper-col="{ span: 16 }"
-        autocomplete="off"
-        @finish="onFinish"
-        @finish-failed="onFinishFailed"
-      >
-        <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>
-
-        <a-form-item label="ICP备案号" :name="['public', 'icpNo']">
-          <a-input v-model:value="formState.public.icpNo" placeholder="粤ICP备xxxxxxx号" />
-        </a-form-item>
-
-        <a-form-item label="HTTP代理" :name="['private', 'httpProxy']" :rules="urlRules">
-          <a-input v-model:value="formState.private.httpProxy" placeholder="http://192.168.1.2:18010/" />
-          <div class="helper">当某些网站被墙时可以配置</div>
-        </a-form-item>
-
-        <a-form-item label="HTTPS代理" :name="['private', 'httpsProxy']" :rules="urlRules">
-          <div class="flex">
-            <a-input v-model:value="formState.private.httpsProxy" placeholder="http://192.168.1.2:18010/" />
-            <a-button class="ml-5" type="primary" :loading="testProxyLoading" title="保存后，再点击测试" @click="testProxy">测试</a-button>
-          </div>
-          <div class="helper">一般这两个代理填一样的，保存后再测试</div>
-        </a-form-item>
-
-        <a-form-item label="双栈网络" :name="['private', 'dnsResultOrder']">
-          <a-select v-model:value="formState.private.dnsResultOrder">
-            <a-select-option value="verbatim">默认</a-select-option>
-            <a-select-option value="ipv4first">IPV4优先</a-select-option>
-            <a-select-option value="ipv6first">IPV6优先</a-select-option>
-          </a-select>
-          <div class="helper">如果选择IPv6优先，需要在docker-compose.yaml中启用ipv6</div>
-        </a-form-item>
-
-        <a-form-item label="启用公共CNAME服务" :name="['private', 'commonCnameEnabled']">
-          <a-switch v-model:checked="formState.private.commonCnameEnabled" />
-          <div class="helper">
-            是否可以使用公共CNAME服务，如果禁用，且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>，则无法使用CNAME代理方式申请证书
-          </div>
-        </a-form-item>
-
-        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-          <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
-        </a-form-item>
-      </a-form>
+    <!--    <template #header>-->
+    <!--      <div class="title">系统设置</div>-->
+    <!--    </template>-->
+    <div class="sys-settings-body">
+      <a-tabs type="card" class="sys-settings-tabs">
+        <a-tab-pane key="site" tab="基本设置">
+          <SettingBase />
+        </a-tab-pane>
+        <a-tab-pane key="register" tab="注册设置">
+          <SettingRegister />
+        </a-tab-pane>
+      </a-tabs>
     </div>
   </fs-page>
 </template>
 
 <script setup lang="tsx">
-import { reactive, ref } from "vue";
-import * as api from "./api";
 import { SysSettings } from "./api";
-import { notification } from "ant-design-vue";
-import { useSettingStore } from "/@/store/modules/settings";
-import { merge } from "lodash-es";
-import { util } from "/@/utils";
-import NotificationSelector from "/src/views/certd/notification/notification-selector/index.vue";
+import SettingBase from "/@/views/sys/settings/tabs/base.vue";
+import SettingRegister from "/@/views/sys/settings/tabs/register.vue";
+
 defineOptions({
   name: "SysSettings"
 });
-
-const formState = reactive<Partial<SysSettings>>({
-  public: {
-    registerEnabled: false,
-    limitUserPipelineCount: 0,
-    managerOtherUserPipeline: false,
-    icpNo: ""
-  },
-  private: {}
-});
-
-const urlRules = ref({
-  type: "url",
-  message: "请输入正确的URL"
-});
-
-async function loadSysSettings() {
-  const data: any = await api.SysSettingsGet();
-  merge(formState, data);
-}
-
-const saveLoading = ref(false);
-loadSysSettings();
-const settingsStore = useSettingStore();
-const onFinish = async (form: any) => {
-  try {
-    saveLoading.value = true;
-    await api.SysSettingsSave(form);
-    await settingsStore.loadSysSettings();
-    notification.success({
-      message: "保存成功"
-    });
-  } finally {
-    saveLoading.value = false;
-  }
-};
-
-const onFinishFailed = (errorInfo: any) => {
-  // console.log("Failed:", errorInfo);
-};
-
-async function stopOtherUserTimer() {
-  await api.stopOtherUserTimer();
-  notification.success({
-    message: "停止成功"
-  });
-}
-
-const testProxyLoading = ref(false);
-async function testProxy() {
-  testProxyLoading.value = true;
-  try {
-    const res = await api.TestProxy();
-    let success = true;
-    if (res.google !== true || res.baidu !== true) {
-      success = false;
-    }
-    const content = () => {
-      return (
-        <div>
-          <div>Google: {res.google === true ? "成功" : util.maxLength(res.google)}</div>
-          <div>Baidu: {res.baidu === true ? "成功" : util.maxLength(res.google)}</div>
-        </div>
-      );
-    };
-    if (!success) {
-      notification.error({
-        message: "测试失败",
-        description: content
-      });
-      return;
-    }
-    notification.success({
-      message: "测试完成",
-      description: content
-    });
-  } finally {
-    testProxyLoading.value = false;
-  }
-}
 </script>
 
 <style lang="less">
@@ -165,5 +32,20 @@ async function testProxy() {
     width: 500px;
     margin: 20px;
   }
+
+  .sys-settings-body {
+    height: 100%;
+    padding-top: 20px;
+    padding-left: 20px;
+    .sys-settings-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .ant-tabs-content-holder {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="sys-settings-form sys-settings-base">
+    <a-form
+      :model="formState"
+      name="basic"
+      :label-col="{ span: 8 }"
+      :wrapper-col="{ span: 16 }"
+      autocomplete="off"
+      @finish="onFinish"
+      @finish-failed="onFinishFailed"
+    >
+      <a-form-item label="ICP备案号" :name="['public', 'icpNo']">
+        <a-input v-model:value="formState.public.icpNo" placeholder="粤ICP备xxxxxxx号" />
+      </a-form-item>
+
+      <a-form-item label="HTTP代理" :name="['private', 'httpProxy']" :rules="urlRules">
+        <a-input v-model:value="formState.private.httpProxy" placeholder="http://192.168.1.2:18010/" />
+        <div class="helper">当某些网站被墙时可以配置</div>
+      </a-form-item>
+
+      <a-form-item label="HTTPS代理" :name="['private', 'httpsProxy']" :rules="urlRules">
+        <div class="flex">
+          <a-input v-model:value="formState.private.httpsProxy" placeholder="http://192.168.1.2:18010/" />
+          <a-button class="ml-5" type="primary" :loading="testProxyLoading" title="保存后，再点击测试" @click="testProxy">测试</a-button>
+        </div>
+        <div class="helper">一般这两个代理填一样的，保存后再测试</div>
+      </a-form-item>
+
+      <a-form-item label="双栈网络" :name="['private', 'dnsResultOrder']">
+        <a-select v-model:value="formState.private.dnsResultOrder">
+          <a-select-option value="verbatim">默认</a-select-option>
+          <a-select-option value="ipv4first">IPV4优先</a-select-option>
+          <a-select-option value="ipv6first">IPV6优先</a-select-option>
+        </a-select>
+        <div class="helper">如果选择IPv6优先，需要在docker-compose.yaml中启用ipv6</div>
+      </a-form-item>
+
+      <a-form-item label="启用公共CNAME服务" :name="['private', 'commonCnameEnabled']">
+        <a-switch v-model:checked="formState.private.commonCnameEnabled" />
+        <div class="helper">
+          是否可以使用公共CNAME服务，如果禁用，且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>，则无法使用CNAME代理方式申请证书
+        </div>
+      </a-form-item>
+
+      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+        <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { reactive, ref } from "vue";
+import { SysSettings } from "/@/views/sys/settings/api";
+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";
+
+defineOptions({
+  name: "SettingBase"
+});
+
+const formState = reactive<Partial<SysSettings>>({
+  public: {
+    icpNo: ""
+  },
+  private: {}
+});
+
+const urlRules = ref({
+  type: "url",
+  message: "请输入正确的URL"
+});
+
+async function loadSysSettings() {
+  const data: any = await api.SysSettingsGet();
+  merge(formState, data);
+}
+
+const saveLoading = ref(false);
+loadSysSettings();
+const settingsStore = useSettingStore();
+const onFinish = async (form: any) => {
+  try {
+    saveLoading.value = true;
+    await api.SysSettingsSave(form);
+    await settingsStore.loadSysSettings();
+    notification.success({
+      message: "保存成功"
+    });
+  } finally {
+    saveLoading.value = false;
+  }
+};
+
+const onFinishFailed = (errorInfo: any) => {
+  // console.log("Failed:", errorInfo);
+};
+
+async function stopOtherUserTimer() {
+  await api.stopOtherUserTimer();
+  notification.success({
+    message: "停止成功"
+  });
+}
+
+const testProxyLoading = ref(false);
+async function testProxy() {
+  testProxyLoading.value = true;
+  try {
+    const res = await api.TestProxy();
+    let success = true;
+    if (res.google !== true || res.baidu !== true) {
+      success = false;
+    }
+    const content = () => {
+      return (
+        <div>
+          <div>Google: {res.google === true ? "成功" : util.maxLength(res.google)}</div>
+          <div>Baidu: {res.baidu === true ? "成功" : util.maxLength(res.google)}</div>
+        </div>
+      );
+    };
+    if (!success) {
+      notification.error({
+        message: "测试失败",
+        description: content
+      });
+      return;
+    }
+    notification.success({
+      message: "测试完成",
+      description: content
+    });
+  } finally {
+    testProxyLoading.value = false;
+  }
+}
+</script>
+<style lang="less">
+.sys-settings-base {
+}
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div class="sys-settings-form sys-settings-register">
+    <a-form :model="formState" name="register" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish">
+      <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', '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="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" />
+        </a-form-item>
+        <template v-if="formState.public.smsLoginEnabled">
+          <a-form-item label="短信提供商" :name="['private', 'sms', 'type']">
+            <a-select v-model:value="formState.private.sms.type">
+              <a-select-option value="aliyun">阿里云</a-select-option>
+            </a-select>
+          </a-form-item>
+
+          <a-form-item label="阿里云授权" :name="['private', 'sms', 'config', 'accessId']">
+            <access-selector v-model="formState.private.sms.config.accessId" />
+          </a-form-item>
+
+          <a-form-item label="短信签名" :name="['private', 'sms', 'config', 'signName']">
+            <a-input v-model:value="formState.private.sms.config.signName" />
+          </a-form-item>
+
+          <a-form-item label="验证码模版ID" :name="['private', 'sms', 'config', 'codeTemplateId']">
+            <a-input v-model:value="formState.private.sms.config.codeTemplateId" />
+            <div class="helper">需要配置一个变量为{code}的验证码模版</div>
+          </a-form-item>
+        </template>
+      </template>
+
+      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+        <a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { reactive, ref } from "vue";
+import { SysSettings } from "/@/views/sys/settings/api";
+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 formState = reactive<Partial<SysSettings>>({
+  public: {
+    registerEnabled: false
+  },
+  private: {
+    sms: {
+      type: "aliyun",
+      config: {}
+    }
+  }
+});
+
+async function loadSysSettings() {
+  const data: any = await api.SysSettingsGet();
+  merge(formState, data);
+}
+
+const saveLoading = ref(false);
+loadSysSettings();
+const settingsStore = useSettingStore();
+const onFinish = async (form: any) => {
+  try {
+    saveLoading.value = true;
+    await api.SysSettingsSave(form);
+    await settingsStore.loadSysSettings();
+    notification.success({
+      message: "保存成功"
+    });
+  } finally {
+    saveLoading.value = false;
+  }
+};
+</script>
+<style lang="less">
+.sys-settings-site {
+}
+</style>