reactor：【system 系统管理】user 进一步统一代码风格

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

@@ -4,6 +4,7 @@ import type { SystemUserApi } from '#/api/system/user';
 
 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
 import { handleTree } from '@vben/utils';
 
 import { z } from '#/adapter/form';
@@ -45,6 +46,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Input',
       rules: 'required',
     },
+    // TODO @xingyu：【重要】这个字段出不来
     {
       fieldName: 'deptId',
       label: '归属部门',
@@ -126,31 +128,50 @@ export function useResetPasswordFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'newPassword',
-      label: '新密码',
-      component: 'InputPassword',
+      component: 'VbenInputPassword',
       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',
-      label: '确认密码',
-      component: 'InputPassword',
+      component: 'VbenInputPassword',
       componentProps: {
-        placeholder: '请再次输入新密码',
+        passwordStrength: true,
+        placeholder: $t('authentication.confirmPassword'),
       },
       dependencies: {
-        rules(values: Record<string, any>) {
-          const { newPassword } = values;
+        rules(values) {
           return z
-            .string()
-            .nonempty('确认密码不能为空')
-            .refine((value) => value === newPassword, '两次输入的密码不一致');
+            .string({ message: '请输入确认密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
         },
-        triggerFields: ['newPassword'],
+        triggerFields: ['newPassword', 'confirmPassword'],
       },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
     },
   ];
 }
@@ -207,6 +228,7 @@ export function useImportFormSchema(): VbenFormSchema[] {
       rules: 'required',
       help: '仅允许导入 xls、xlsx 格式文件',
     },
+    // TODO @xingyu：【重要】看不到 switch 这个按钮
     {
       fieldName: 'updateSupport',
       label: '是否覆盖',
@@ -266,26 +288,32 @@ export function useGridColumns<T = SystemUserApi.User>(
     {
       field: 'id',
       title: '用户编号',
+      minWidth: 100,
     },
     {
       field: 'username',
       title: '用户名称',
+      minWidth: 120,
     },
     {
       field: 'nickname',
       title: '用户昵称',
+      minWidth: 120,
     },
     {
       field: 'deptName',
       title: '部门',
+      minWidth: 120,
     },
     {
       field: 'mobile',
       title: '手机号码',
+      minWidth: 120,
     },
     {
       field: 'status',
       title: '状态',
+      minWidth: 100,
       align: 'center',
       cellRender: {
         attrs: { beforeChange: onStatusChange },
@@ -299,6 +327,7 @@ export function useGridColumns<T = SystemUserApi.User>(
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {

apps/web-antd/src/views/system/user/index.vue

@@ -50,7 +50,7 @@ const [ImportModal, importModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -62,10 +62,9 @@ async function handleExport() {
 
 /** 选择部门 */
 const searchDeptId = ref<number | undefined>(undefined);
-
 async function handleDeptSelect(dept: SystemDeptApi.Dept) {
   searchDeptId.value = dept.id;
-  onRefresh();
+  handleRefresh();
 }
 
 /** 创建用户 */
@@ -87,15 +86,29 @@ function handleEdit(row: SystemUserApi.User) {
 async function handleDelete(row: SystemUserApi.User) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.username]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteUser(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.username]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 批量删除用户 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteUserList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -110,23 +123,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 批量删除用户 */
-async function handleDeleteBatch() {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteUserList(checkedIds.value);
-    checkedIds.value = [];
-    message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
 /** 重置密码 */
 function handleResetPassword(row: SystemUserApi.User) {
   resetPasswordModalApi.setData(row).open();
@@ -210,10 +206,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
-    <ResetPasswordModal @success="onRefresh" />
-    <AssignRoleModal @success="onRefresh" />
-    <ImportModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
+    <ResetPasswordModal @success="handleRefresh" />
+    <AssignRoleModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
 
     <div class="flex h-full w-full">
       <!-- 左侧部门树 -->
@@ -248,11 +244,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   onClick: handleImport,
                 },
                 {
-                  label: '批量删除',
+                  label: $t('ui.actionTitle.deleteBatch'),
                   type: 'primary',
                   danger: true,
-                  disabled: isEmpty(checkedIds),
                   icon: ACTION_ICON.DELETE,
+                  disabled: isEmpty(checkedIds),
                   auth: ['system:user:delete'],
                   onClick: handleDeleteBatch,
                 },

apps/web-antd/src/views/system/user/modules/form.vue

@@ -26,8 +26,9 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
   },
-  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,