From 1b425df9adaa20c5af4cfc3c1640e3b73da7201d Mon Sep 17 00:00:00 2001
From: caiyuchao <caiyuchao@agrandtech.com>
Date: Mon, 21 Jul 2025 17:08:51 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=A6=96=E6=AC=A1=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/auth.ts            |   1 +
 .../src/locales/langs/en-US/page.json         |   3 +-
 .../src/locales/langs/zh-CN/page.json         |   3 +-
 apps/web-antd/src/router/routes/core.ts       |   9 +
 apps/web-antd/src/store/auth.ts               |   5 +
 .../_core/authentication/reset-password.vue   | 174 ++++++++++++++++++
 .../common-ui/src/ui/authentication/index.ts  |   1 +
 .../src/ui/authentication/reset-password.vue  | 116 ++++++++++++
 .../src/langs/en-US/authentication.json       |   1 +
 .../src/langs/zh-CN/authentication.json       |   1 +
 10 files changed, 312 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-antd/src/views/_core/authentication/reset-password.vue
 create mode 100644 packages/effects/common-ui/src/ui/authentication/reset-password.vue

diff --git a/apps/web-antd/src/api/core/auth.ts b/apps/web-antd/src/api/core/auth.ts
index ccb6da3..a2e0b0c 100644
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -52,6 +52,7 @@ export namespace AuthApi {
     password: string;
     mobile: string;
     code: string;
+    username: string;
   }
 
   /** 社交快捷登录接口参数 */
diff --git a/apps/web-antd/src/locales/langs/en-US/page.json b/apps/web-antd/src/locales/langs/en-US/page.json
index 00a8c90..546cbcd 100644
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -4,7 +4,8 @@
     "register": "Register",
     "codeLogin": "Code Login",
     "qrcodeLogin": "Qr Code Login",
-    "forgetPassword": "Forget Password"
+    "forgetPassword": "Forget Password",
+    "resetPassword": "Reset Password"
   },
   "dashboard": {
     "title": "Dashboard",
diff --git a/apps/web-antd/src/locales/langs/zh-CN/page.json b/apps/web-antd/src/locales/langs/zh-CN/page.json
index 41d8fec..1551a55 100644
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -4,7 +4,8 @@
     "register": "注册",
     "codeLogin": "验证码登录",
     "qrcodeLogin": "二维码登录",
-    "forgetPassword": "忘记密码"
+    "forgetPassword": "忘记密码",
+    "resetPassword": "重置密码"
   },
   "dashboard": {
     "title": "首页",
diff --git a/apps/web-antd/src/router/routes/core.ts b/apps/web-antd/src/router/routes/core.ts
index 22fd001..2628f2c 100644
--- a/apps/web-antd/src/router/routes/core.ts
+++ b/apps/web-antd/src/router/routes/core.ts
@@ -82,6 +82,15 @@ const coreRoutes: RouteRecordRaw[] = [
           title: $t('page.auth.forgetPassword'),
         },
       },
+      {
+        name: 'ResetPassword',
+        path: 'reset-password',
+        component: () =>
+          import('#/views/_core/authentication/reset-password.vue'),
+        meta: {
+          title: $t('page.auth.resetPassword'),
+        },
+      },
       {
         name: 'Register',
         path: 'register',
diff --git a/apps/web-antd/src/store/auth.ts b/apps/web-antd/src/store/auth.ts
index 3d9ca96..941f793 100644
--- a/apps/web-antd/src/store/auth.ts
+++ b/apps/web-antd/src/store/auth.ts
@@ -87,6 +87,11 @@ export const useAuthStore = defineStore('auth', () => {
             message: $t('authentication.loginSuccess'),
           });
         }
+      } else if (type === 'username') {
+        router.push({
+          name: 'ResetPassword',
+          query: { username: params.username },
+        });
       }
     } finally {
       loginLoading.value = false;
diff --git a/apps/web-antd/src/views/_core/authentication/reset-password.vue b/apps/web-antd/src/views/_core/authentication/reset-password.vue
new file mode 100644
index 0000000..72f5334
--- /dev/null
+++ b/apps/web-antd/src/views/_core/authentication/reset-password.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import type { AuthApi } from '#/api';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { AuthenticationResetPassword, z } from '@vben/common-ui';
+import { isTenantEnable } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import { smsResetPassword } from '#/api';
+import { getTenantByWebsite, getTenantSimpleList } from '#/api/core/auth';
+import { useAuthStore } from '#/store';
+
+defineOptions({ name: 'ForgetPassword' });
+
+const authStore = useAuthStore();
+
+const route = useRoute();
+
+const accessStore = useAccessStore();
+const router = useRouter();
+const tenantEnable = isTenantEnable();
+
+const loading = ref(false);
+const CODE_LENGTH = 4;
+const forgetPasswordRef = ref();
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+async function fetchTenantList() {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: null | number = 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);
+    forgetPasswordRef.value
+      .getFormApi()
+      .setFieldValue('tenantId', tenantId?.toString());
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+}
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id.toString(),
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(Number(values.tenantId));
+          }
+        },
+      },
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string({ required_error: $t('authentication.passwordTip') })
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+    },
+  ];
+});
+
+/**
+ * 处理重置密码操作
+ * @param values 表单数据
+ */
+async function handleSubmit(values: Recordable<any>) {
+  loading.value = true;
+  try {
+    const { mobile, code, password } = values;
+    const resetForm = {
+      mobile,
+      code,
+      password,
+      username: Array.isArray(route?.query?.username)
+        ? (route.query.username[0] ?? '')
+        : (route?.query?.username ?? ''),
+    };
+    await smsResetPassword(resetForm);
+    await message.success($t('authentication.resetPasswordSuccess'), 1);
+    // 重置成功后跳转到首页
+    // router.push('/');
+    await authStore.authLogin('username', resetForm);
+  } catch (error) {
+    console.error('重置密码失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <AuthenticationResetPassword
+    ref="forgetPasswordRef"
+    :form-schema="formSchema"
+    :loading="loading"
+    @submit="handleSubmit"
+  />
+</template>
diff --git a/packages/effects/common-ui/src/ui/authentication/index.ts b/packages/effects/common-ui/src/ui/authentication/index.ts
index 868f002..3ce24f9 100644
--- a/packages/effects/common-ui/src/ui/authentication/index.ts
+++ b/packages/effects/common-ui/src/ui/authentication/index.ts
@@ -6,4 +6,5 @@ export { default as AuthenticationLoginExpiredModal } from './login-expired-moda
 export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
+export { default as AuthenticationResetPassword } from './reset-password.vue';
 export type { AuthenticationProps } from './types';
diff --git a/packages/effects/common-ui/src/ui/authentication/reset-password.vue b/packages/effects/common-ui/src/ui/authentication/reset-password.vue
new file mode 100644
index 0000000..285b6bd
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/authentication/reset-password.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  formSchema: VbenFormSchema[];
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+}
+
+defineOptions({
+  name: 'ForgetPassword',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Record<string, any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+const router = useRouter();
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.resetPassword') }}
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.firstLoginResetPassword') }}
+        </slot>
+      </template>
+    </Title>
+    <Form />
+
+    <div>
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        aria-label="submit"
+        class="mt-2 w-full"
+        @click="handleSubmit"
+      >
+        <slot name="submitButtonText">
+          {{ submitButtonText || $t('authentication.resetPassword') }}
+        </slot>
+      </VbenButton>
+      <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
+        {{ $t('common.back') }}
+      </VbenButton>
+    </div>
+  </div>
+</template>
diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json
index dfa211a..2967625 100644
--- a/packages/locales/src/langs/en-US/authentication.json
+++ b/packages/locales/src/langs/en-US/authentication.json
@@ -33,6 +33,7 @@
   "passwordStrength": "Use 8 or more characters with a mix of letters, numbers & symbols",
   "forgetPassword": "Forget Password?",
   "forgetPasswordSubtitle": "Enter your email and we'll send you instructions to reset your password",
+  "firstLoginResetPassword": "Please reset your password on first login",
   "resetPasswordSuccess": "Reset password success",
   "emailTip": "Please enter email",
   "emailValidErrorTip": "The email format you entered is incorrect",
diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json
index 6fd9826..d590e8d 100644
--- a/packages/locales/src/langs/zh-CN/authentication.json
+++ b/packages/locales/src/langs/zh-CN/authentication.json
@@ -33,6 +33,7 @@
   "passwordStrength": "使用 8 个或更多字符，混合字母、数字和符号",
   "forgetPassword": "忘记密码?",
   "forgetPasswordSubtitle": "输入您的电子邮件，我们将向您发送重置密码的连接",
+  "firstLoginResetPassword": "首次登录请重置密码",
   "resetPasswordSuccess": "重置密码成功",
   "emailTip": "请输入邮箱",
   "emailValidErrorTip": "你输入的邮箱格式不正确",