From 446cb6cbbfeac2a794e6282782d88e6094921ea4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 8 Apr 2025 13:10:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20register=20?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E6=B3=A8=E5=86=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/auth.ts            |  12 ++
 apps/web-antd/src/store/auth.ts               |   5 +-
 .../views/_core/authentication/register.vue   | 145 ++++++++++++++++--
 .../src/langs/en-US/authentication.json       |   2 +
 .../src/langs/zh-CN/authentication.json       |   2 +
 5 files changed, 151 insertions(+), 15 deletions(-)

diff --git a/apps/web-antd/src/api/core/auth.ts b/apps/web-antd/src/api/core/auth.ts
index 576446b45..b9e6fd86a 100644
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -35,6 +35,13 @@ export namespace AuthApi {
     code: string;
   }
 
+  /** 注册接口参数 */
+  export interface RegisterParams {
+    tenantName: string
+    username: string
+    password: string
+    captchaVerification: string
+  }
 }
 
 /** 登录 */
@@ -93,4 +100,9 @@ export const sendSmsCode = (data: AuthApi.SmsCodeParams) => {
 /** 短信验证码登录 */
 export const smsLogin = (data: AuthApi.SmsLoginParams) => {
   return requestClient.post('/system/auth/sms-login', data)
+}
+
+/** 注册 */
+export const register = (data: AuthApi.RegisterParams) => {
+  return requestClient.post('/system/auth/register', data)
 }
\ No newline at end of file
diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts
index 543b77ed1..a66737a27 100644
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -9,7 +9,7 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
 
-import { type AuthApi, getAuthPermissionInfoApi, loginApi, logoutApi, smsLogin } from '#/api';
+import { type AuthApi, getAuthPermissionInfoApi, loginApi, logoutApi, smsLogin, register } from '#/api';
 import { $t } from '#/locales';
 
 export const useAuthStore = defineStore('auth', () => {
@@ -27,7 +27,7 @@ export const useAuthStore = defineStore('auth', () => {
    * @param onSuccess 登录成功后的回调函数
    */
   async function authLogin(
-    type: 'mobile' | 'username',
+    type: 'mobile' | 'username' | 'register',
     params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
@@ -36,6 +36,7 @@ export const useAuthStore = defineStore('auth', () => {
     try {
       loginLoading.value = true;
       const { accessToken, refreshToken } = type === 'mobile' ? await smsLogin(params as AuthApi.SmsLoginParams)
+        : type === 'register' ? await register(params as AuthApi.RegisterParams)
         : await loginApi(params);
 
       // 如果成功获取到 accessToken
diff --git a/apps/web-antd/src/views/_core/authentication/register.vue b/apps/web-antd/src/views/_core/authentication/register.vue
index b1a5de726..f255f499f 100644
--- a/apps/web-antd/src/views/_core/authentication/register.vue
+++ b/apps/web-antd/src/views/_core/authentication/register.vue
@@ -1,18 +1,120 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import type { Recordable } from '@vben/types';
+import { type AuthApi, checkCaptcha, getCaptcha } from '#/api/core/auth';
 
-import { computed, h, ref } from 'vue';
+import { computed, h, onMounted, ref } from 'vue';
 
-import { AuthenticationRegister, z } from '@vben/common-ui';
+import { AuthenticationRegister, Verification, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
+import { useAppConfig } from '@vben/hooks';
+
+import { useAccessStore } from '@vben/stores';
+import { useAuthStore } from '#/store';
+import { getTenantSimpleList, getTenantByWebsite } from '#/api/core/auth';
+
+const { tenantEnable, captchaEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
+const registerRef = ref();
+const verifyRef = ref();
+const accessStore = useAccessStore();
+const authStore = useAuthStore();
+
+const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+const fetchTenantList = async () => {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: number | null = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    registerRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+};
+
+/** 执行注册 */
+const handleRegister = async (values: any) => {
+  // 如果开启验证码，则先验证验证码
+  if (captchaEnable) {
+    verifyRef.value.show();
+    return;
+  }
+
+  // 无验证码，直接登录
+  await authStore.authLogin('register', values);
+};
+
+/** 验证码通过，执行注册 */
+const handleVerifySuccess = async ({ captchaVerification }: any) => {
+  try {
+    await authStore.authLogin('register', {
+      ...(await registerRef.value.getFormApi().getValues()),
+      captchaVerification,
+    });
+  } catch (error) {
+    console.error('Error in handleRegister:', error);
+  }
+};
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z
+        .number()
+        .nullable()
+        .refine((val) => val != null && val > 0, $t('authentication.tenantTip'))
+        .default(null),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(values.tenantId);
+          }
+        },
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
@@ -22,6 +124,15 @@ const formSchema = computed((): VbenFormSchema[] => {
       label: $t('authentication.username'),
       rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
     },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.nicknameTip'),
+      },
+      fieldName: 'nickname',
+      label: $t('authentication.nickname'),
+      rules: z.string().min(1, { message: $t('authentication.nicknameTip') }),
+    },
     {
       component: 'VbenInputPassword',
       componentProps: {
@@ -80,17 +191,25 @@ const formSchema = computed((): VbenFormSchema[] => {
     },
   ];
 });
-
-function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log('register submit:', value);
-}
 </script>
 
 <template>
-  <AuthenticationRegister
-    :form-schema="formSchema"
-    :loading="loading"
-    @submit="handleSubmit"
-  />
+  <div>
+    <AuthenticationRegister
+      ref="registerRef"
+      :form-schema="formSchema"
+      :loading="loading"
+      @submit="handleRegister"
+    />
+    <Verification
+      ref="verifyRef"
+      v-if="captchaEnable"
+      :captcha-type="captchaType"
+      :check-captcha-api="checkCaptcha"
+      :get-captcha-api="getCaptcha"
+      :img-size="{ width: '400px', height: '200px' }"
+      mode="pop"
+      @on-success="handleVerifySuccess"
+    />
+  </div>
 </template>
diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json
index 2a14aa819..319589600 100644
--- a/packages/locales/src/langs/en-US/authentication.json
+++ b/packages/locales/src/langs/en-US/authentication.json
@@ -8,10 +8,12 @@
   "selectAccount": "Quick Select Account",
   "username": "Username",
   "password": "Password",
+  "nickname": "Nickname",
   "tenant": "Tenant",
   "usernameTip": "Please enter username",
   "passwordErrorTip": "Password is incorrect",
   "passwordTip": "Please enter password",
+  "nicknameTip": "Please enter nickname",
   "tenantTip": "Please select tenant",
   "verifyRequiredTip": "Please complete the verification first",
   "rememberMe": "Remember Me",
diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json
index fd705106a..8d7e7e77b 100644
--- a/packages/locales/src/langs/zh-CN/authentication.json
+++ b/packages/locales/src/langs/zh-CN/authentication.json
@@ -8,9 +8,11 @@
   "selectAccount": "快速选择账号",
   "username": "账号",
   "password": "密码",
+  "nickname": "昵称",
   "tenant": "租户",
   "usernameTip": "请输入用户名",
   "passwordTip": "请输入密码",
+  "nicknameTip": "请输入昵称",
   "tenantTip": "请选择租户",
   "verifyRequiredTip": "请先完成验证",
   "passwordErrorTip": "密码错误",