feat: naive system init

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

@@ -0,0 +1,347 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+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';
+import { getDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      label: '用户密码',
+      fieldName: 'password',
+      component: 'InputPassword',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'deptId',
+      label: '归属部门',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getDeptList();
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择归属部门',
+        treeDefaultExpandAll: true,
+      },
+    },
+    {
+      fieldName: 'postIds',
+      label: '岗位',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimplePostList,
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择岗位',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱',
+      component: 'Input',
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '用户性别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '用户状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+      },
+    },
+  ];
+}
+
+/** 重置密码的表单 */
+export function useResetPasswordFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      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',
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入确认密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
+        },
+        triggerFields: ['newPassword', 'confirmPassword'],
+      },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 分配角色的表单 */
+export function useAssignRoleFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'roleIds',
+      label: '角色',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleRoleList,
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择角色',
+      },
+    },
+  ];
+}
+
+/** 用户导入的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '用户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的用户数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'DatePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: SystemUserApi.User,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      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 },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { NCard } from 'naive-ui';
+
+import { message } from '#/adapter/naive';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteUser,
+  deleteUserList,
+  exportUser,
+  getUserPage,
+  updateUserStatus,
+} from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import AssignRoleForm from './modules/assign-role-form.vue';
+import DeptTree from './modules/dept-tree.vue';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+import ResetPasswordForm from './modules/reset-password-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ResetPasswordModal, resetPasswordModalApi] = useVbenModal({
+  connectedComponent: ResetPasswordForm,
+  destroyOnClose: true,
+});
+
+const [AssignRoleModal, assignRoleModalApi] = useVbenModal({
+  connectedComponent: AssignRoleForm,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportUser(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '用户.xls', source: data });
+}
+
+/** 选择部门 */
+const searchDeptId = ref<number | undefined>(undefined);
+async function handleDeptSelect(dept: SystemDeptApi.Dept) {
+  searchDeptId.value = dept.id;
+  handleRefresh();
+}
+
+/** 创建用户 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 导入用户 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 编辑用户 */
+function handleEdit(row: SystemUserApi.User) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除用户 */
+async function handleDelete(row: SystemUserApi.User) {
+  const hideLoading = message.loading(
+    $t('ui.actionMessage.deleting', [row.username]),
+    { duration: 0 },
+  );
+  try {
+    await deleteUser(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
+    handleRefresh();
+  } finally {
+    hideLoading.destroy();
+  }
+}
+
+/** 批量删除用户 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading($t('ui.actionMessage.deletingBatch'), {
+    duration: 0,
+  });
+  try {
+    await deleteUserList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    hideLoading.destroy();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemUserApi.User[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 重置密码 */
+function handleResetPassword(row: SystemUserApi.User) {
+  resetPasswordModalApi.setData(row).open();
+}
+
+/** 分配角色 */
+function handleAssignRole(row: SystemUserApi.User) {
+  assignRoleModalApi.setData(row).open();
+}
+
+/** 更新用户状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: SystemUserApi.User,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新用户状态
+        const res = await updateUserStatus(row.id!, newStatus);
+        if (res) {
+          // 提示并返回成功
+          message.success($t('ui.actionMessage.operationSuccess'));
+          resolve(true);
+        } else {
+          reject(new Error('更新失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            deptId: searchDeptId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemUserApi.User>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+      <DocAlert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
+      <DocAlert
+        title="Excel 导入导出"
+        url="https://doc.iocoder.cn/excel-import-and-export/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ResetPasswordModal @success="handleRefresh" />
+    <AssignRoleModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <div class="flex h-full w-full">
+      <!-- 左侧部门树 -->
+      <NCard class="mr-4 h-full w-1/6">
+        <DeptTree @select="handleDeptSelect" />
+      </NCard>
+      <!-- 右侧用户列表 -->
+      <div class="w-5/6">
+        <Grid table-title="用户列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['用户']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['system:user:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['system:user:export'],
+                  onClick: handleExport,
+                },
+                {
+                  label: $t('ui.actionTitle.import', ['用户']),
+                  type: 'primary',
+                  icon: ACTION_ICON.UPLOAD,
+                  auth: ['system:user:import'],
+                  onClick: handleImport,
+                },
+                {
+                  label: $t('ui.actionTitle.deleteBatch'),
+                  type: 'error',
+                  icon: ACTION_ICON.DELETE,
+                  disabled: isEmpty(checkedIds),
+                  auth: ['system:user:delete'],
+                  onClick: handleDeleteBatch,
+                },
+              ]"
+            />
+          </template>
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: $t('common.edit'),
+                  type: 'primary',
+                  text: true,
+                  icon: ACTION_ICON.EDIT,
+                  auth: ['system:user:update'],
+                  onClick: handleEdit.bind(null, row),
+                },
+                {
+                  label: $t('common.delete'),
+                  type: 'error',
+                  text: true,
+                  icon: ACTION_ICON.DELETE,
+                  auth: ['system:user:delete'],
+                  popConfirm: {
+                    title: $t('ui.actionMessage.deleteConfirm', [row.username]),
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+              :drop-down-actions="[
+                {
+                  label: '分配角色',
+                  type: 'primary',
+                  text: true,
+                  auth: ['system:permission:assign-user-role'],
+                  onClick: handleAssignRole.bind(null, row),
+                },
+                {
+                  label: '重置密码',
+                  type: 'primary',
+                  text: true,
+                  auth: ['system:user:update-password'],
+                  onClick: handleResetPassword.bind(null, row),
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>

apps/web-naive/src/views/system/user/modules/assign-role-form.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/naive';
+import { assignUserRole, getUserRoleList } from '#/api/system/permission';
+import { $t } from '#/locales';
+
+import { useAssignRoleFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignRoleFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const values = await formApi.getValues();
+    try {
+      await assignUserRole({
+        userId: values.id,
+        roleIds: values.roleIds,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const roleIds = await getUserRoleList(data.id);
+      // 设置到 values
+      await formApi.setValues({
+        ...data,
+        roleIds,
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="分配角色">
+    <Form class="mx-4" />
+  </Modal>
+</template>

apps/web-naive/src/views/system/user/modules/dept-tree.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { TreeOption, TreeOverrideNodeClickBehaviorReturn } from 'naive-ui';
+
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { NInput, NSpin, NTree } from 'naive-ui';
+
+import { getSimpleDeptList } from '#/api/system/dept';
+
+const emit = defineEmits(['select']);
+const deptList = ref<SystemDeptApi.Dept[]>([]); // 部门列表
+const deptTree = ref<any[]>([]); // 部门树
+const expandedKeys = ref<number[]>([]); // 展开的节点
+const loading = ref(false); // 加载状态
+const searchValue = ref(''); // 搜索值
+
+/** 处理搜索逻辑 */
+function handleSearch(e: any) {
+  const value = e.target.value;
+  searchValue.value = value;
+  const filteredList = value
+    ? deptList.value.filter((item) =>
+        item.name.toLowerCase().includes(value.toLowerCase()),
+      )
+    : deptList.value;
+  deptTree.value = handleTree(filteredList);
+  // 展开所有节点
+  expandedKeys.value = deptTree.value.map((node) => node.id!);
+}
+
+/** 选中部门 */
+function handleSelect({
+  option,
+}: {
+  option: TreeOption;
+}): TreeOverrideNodeClickBehaviorReturn {
+  emit('select', option);
+  return 'default';
+}
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    loading.value = true;
+    const data = await getSimpleDeptList();
+    deptList.value = data;
+    deptTree.value = handleTree(data);
+  } catch (error) {
+    console.error('获取部门数据失败', error);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <NInput
+      placeholder="搜索部门"
+      allow-clear
+      v-model:value="searchValue"
+      @change="handleSearch"
+      class="w-full"
+    >
+      <template #prefix>
+        <IconifyIcon icon="lucide:search" class="size-4" />
+      </template>
+    </NInput>
+    <NSpin :show="loading" class="w-full">
+      <NTree
+        v-if="deptTree.length > 0"
+        class="pt-2"
+        :data="deptTree"
+        :default-expand-all="true"
+        key-field="id"
+        label-field="name"
+        children-field="children"
+        :override-default-node-click-behavior="handleSelect"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </NSpin>
+  </div>
+</template>

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

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/naive';
+import { createUser, getUser, updateUser } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemUserApi.User>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['用户'])
+    : $t('ui.actionTitle.create', ['用户']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemUserApi.User;
+    try {
+      await (formData.value?.id ? updateUser(data) : createUser(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>

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

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { UploadFileInfo } from 'naive-ui';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { NButton, NUpload } from 'naive-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/naive';
+import { importUser, importUserTemplate } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await importUser(data.file, data.updateSupport);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: UploadFileInfo) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importUserTemplate();
+  downloadFileFromBlobPart({ fileName: '用户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal title="导入用户" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <NUpload
+            :show-file-list="false"
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <NButton type="primary"> 选择 Excel 文件 </NButton>
+          </NUpload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <NButton @click="handleDownload"> 下载导入模板 </NButton>
+      </div>
+    </template>
+  </Modal>
+</template>

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

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/naive';
+import { resetUserPassword } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useResetPasswordFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useResetPasswordFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await resetUserPassword(data.id, data.newPassword);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 设置到 values
+    await formApi.setValues(data);
+  },
+});
+</script>
+
+<template>
+  <Modal title="重置密码">
+    <Form class="mx-4" />
+  </Modal>
+</template>