refactor: 优化 ele 密码组件使用 VbenInputPassword

apps/web-ele/src/adapter/form.ts

@@ -8,6 +8,9 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+/** 手机号正则表达式（中国） */
+const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
+
 setupVbenForm<ComponentType>({
   config: {
     modelPropNameMap: {
@@ -16,18 +19,39 @@ setupVbenForm<ComponentType>({
     },
   },
   defineRules: {
+    // 输入项目必填国际化适配
     required: (value, _params, ctx) => {
       if (value === undefined || value === null || value.length === 0) {
         return $t('ui.formRules.required', [ctx.label]);
       }
       return true;
     },
+    // 选择项目必填国际化适配
     selectRequired: (value, _params, ctx) => {
       if (value === undefined || value === null) {
         return $t('ui.formRules.selectRequired', [ctx.label]);
       }
       return true;
     },
+    // 手机号非必填
+    mobile: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return true;
+      } else if (!MOBILE_REGEX.test(value)) {
+        return $t('ui.formRules.mobile', [ctx.label]);
+      }
+      return true;
+    },
+    // 手机号必填
+    mobileRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.required', [ctx.label]);
+      }
+      if (!MOBILE_REGEX.test(value)) {
+        return $t('ui.formRules.mobile', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

apps/web-ele/src/views/_core/profile/modules/reset-pwd.vue

@@ -14,7 +14,11 @@ const [Form, formApi] = useVbenForm({
   },
   schema: [
     {
-      component: 'InputPassword',
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
       fieldName: 'oldPassword',
       label: '旧密码',
       rules: z
@@ -23,7 +27,11 @@ const [Form, formApi] = useVbenForm({
         .max(20, '密码长度不能超过 20 个字符'),
     },
     {
-      component: 'InputPassword',
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: '请输入新密码',
+      },
       dependencies: {
         rules(values) {
           return z
@@ -42,7 +50,11 @@ const [Form, formApi] = useVbenForm({
       rules: 'required',
     },
     {
-      component: 'InputPassword',
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.confirmPassword'),
+      },
       dependencies: {
         rules(values) {
           return z

apps/web-ele/src/views/system/user/data.ts

@@ -3,6 +3,7 @@ import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemUserApi } from '#/api/system/user';
 
 import { useAccess } from '@vben/access';
+import { $t } from '@vben/locales';
 import { handleTree } from '@vben/utils';
 
 import { z } from '#/adapter/form';
@@ -132,31 +133,50 @@ export function useResetPasswordFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'newPassword',
+      component: 'VbenInputPassword',
-      label: '新密码',
-      component: 'InputPassword',
       componentProps: {
+        passwordStrength: true,
         placeholder: '请输入新密码',
       },
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入新密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value !== values.oldPassword,
+              '新旧密码不能相同',
+            );
+        },
+        triggerFields: ['newPassword', 'oldPassword'],
+      },
+      fieldName: 'newPassword',
+      label: '新密码',
       rules: 'required',
     },
     {
-      fieldName: 'confirmPassword',
+      component: 'VbenInputPassword',
-      label: '确认密码',
-      component: 'InputPassword',
       componentProps: {
-        placeholder: '请再次输入新密码',
+        passwordStrength: true,
+        placeholder: $t('authentication.confirmPassword'),
       },
       dependencies: {
-        rules(values: Record<string, any>) {
+        rules(values) {
-          const { newPassword } = values;
           return z
-            .string()
+            .string({ message: '请输入确认密码' })
-            .nonempty('确认密码不能为空')
+            .min(5, '密码长度不能少于 5 个字符')
-            .refine((value) => value === newPassword, '两次输入的密码不一致');
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
         },
-        triggerFields: ['newPassword'],
+        triggerFields: ['newPassword', 'confirmPassword'],
       },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
     },
   ];
 }

apps/web-ele/src/views/system/user/modules/reset-password-form.vue

@@ -57,7 +57,6 @@ const [Modal, modalApi] = useVbenModal({
     await formApi.setValues(data);
   },
 });
-// TODO @puhui999：重置密码展示不对；
 </script>
 
 <template>