feat(@vben/web-antd): 优化用户管理

apps/web-antd/src/adapter/vxe-table.ts

@@ -1,8 +1,16 @@
+import type { Recordable } from '@vben/types';
+
 import { h } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+import { $te } from '@vben/locales';
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import { get, isFunction, isString } from '@vben/utils';
 
-import { Button, Image } from 'ant-design-vue';
+import { objectOmit } from '@vueuse/core';
+import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
+
+import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
@@ -44,6 +52,25 @@ setupVbenVxeTable({
       },
     });
 
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault({ options, props }, { column, row }) {
+        const value = get(row, column.field);
+        const tagOptions = options ?? [
+          { color: 'success', label: $t('common.enabled'), value: true },
+          { color: 'error', label: $t('common.disabled'), value: false },
+        ];
+        const tagItem = tagOptions.find((item) => item.value === value);
+        return h(
+          Tag,
+          {
+            ...props,
+            ...objectOmit(tagItem ?? {}, ['label']),
+          },
+          { default: () => tagItem?.label ?? value },
+        );
+      },
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellLink' },
     vxeUI.renderer.add('CellLink', {
       renderTableDefault(renderOpts) {
@@ -55,6 +82,181 @@ setupVbenVxeTable({
         );
       },
     });
+    vxeUI.renderer.add('CellSwitch', {
+      renderTableDefault({ attrs, props }, { column, row }) {
+        const loadingKey = `__loading_${column.field}`;
+        const finallyProps = {
+          checkedChildren: $t('common.enabled'),
+          checkedValue: true,
+          unCheckedChildren: $t('common.disabled'),
+          unCheckedValue: false,
+          ...props,
+          checked: row[column.field],
+          loading: row[loadingKey] ?? false,
+          'onUpdate:checked': onChange,
+        };
+        async function onChange(newVal: any) {
+          row[loadingKey] = true;
+          try {
+            const result = await attrs?.beforeChange?.(newVal, row);
+            if (result !== false) {
+              row[column.field] = newVal;
+            }
+          } finally {
+            row[loadingKey] = false;
+          }
+        }
+        return h(Switch, finallyProps);
+      },
+    });
+    /**
+     * 注册表格的操作按钮渲染器
+     */
+    vxeUI.renderer.add('CellOperation', {
+      renderTableDefault({ attrs, options, props }, { column, row }) {
+        const defaultProps = { size: 'small', type: 'link', ...props };
+        let align = 'end';
+        switch (column.align) {
+          case 'center': {
+            align = 'center';
+            break;
+          }
+          case 'left': {
+            align = 'start';
+            break;
+          }
+          default: {
+            align = 'end';
+            break;
+          }
+        }
+        const presets: Recordable<Recordable<any>> = {
+          delete: {
+            danger: true,
+            text: $t('common.delete'),
+          },
+          edit: {
+            text: $t('common.edit'),
+          },
+        };
+        const operations: Array<Recordable<any>> = (
+          options || ['edit', 'delete']
+        )
+          .map((opt) => {
+            if (isString(opt)) {
+              return presets[opt]
+                ? { code: opt, ...presets[opt], ...defaultProps }
+                : {
+                    code: opt,
+                    text: $te(`common.${opt}`) ? $t(`common.${opt}`) : opt,
+                    ...defaultProps,
+                  };
+            } else {
+              return { ...defaultProps, ...presets[opt.code], ...opt };
+            }
+          })
+          .map((opt) => {
+            const optBtn: Recordable<any> = {};
+            Object.keys(opt).forEach((key) => {
+              optBtn[key] = isFunction(opt[key]) ? opt[key](row) : opt[key];
+            });
+            return optBtn;
+          })
+          .filter((opt) => opt.show !== false);
+
+        function renderBtn(opt: Recordable<any>, listen = true) {
+          return h(
+            Button,
+            {
+              ...props,
+              ...opt,
+              icon: undefined,
+              onClick: listen
+                ? () =>
+                    attrs?.onClick?.({
+                      code: opt.code,
+                      row,
+                    })
+                : undefined,
+            },
+            {
+              default: () => {
+                const content = [];
+                if (opt.icon) {
+                  content.push(
+                    h(IconifyIcon, { class: 'size-5', icon: opt.icon }),
+                  );
+                }
+                content.push(opt.text);
+                return content;
+              },
+            },
+          );
+        }
+
+        function renderConfirm(opt: Recordable<any>) {
+          let viewportWrapper: HTMLElement | null = null;
+          return h(
+            Popconfirm,
+            {
+              /**
+               * 当popconfirm用在固定列中时，将固定列作为弹窗的容器时可能会因为固定列较窄而无法容纳弹窗
+               * 将表格主体区域作为弹窗容器时又会因为固定列的层级较高而遮挡弹窗
+               * 将body或者表格视口区域作为弹窗容器时又会导致弹窗无法跟随表格滚动。
+               * 鉴于以上各种情况，一种折中的解决方案是弹出层展示时，禁止操作表格的滚动条。
+               * 这样既解决了弹窗的遮挡问题，又不至于让弹窗随着表格的滚动而跑出视口区域。
+               */
+              getPopupContainer(el) {
+                viewportWrapper = el.closest('.vxe-table--viewport-wrapper');
+                return document.body;
+              },
+              placement: 'topLeft',
+              title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
+              ...props,
+              ...opt,
+              icon: undefined,
+              onOpenChange: (open: boolean) => {
+                // 当弹窗打开时，禁止表格的滚动
+                if (open) {
+                  viewportWrapper?.style.setProperty('pointer-events', 'none');
+                } else {
+                  viewportWrapper?.style.removeProperty('pointer-events');
+                }
+              },
+              onConfirm: () => {
+                attrs?.onClick?.({
+                  code: opt.code,
+                  row,
+                });
+              },
+            },
+            {
+              default: () => renderBtn({ ...opt }, false),
+              description: () =>
+                h(
+                  'div',
+                  { class: 'truncate' },
+                  $t('ui.actionMessage.deleteConfirm', [
+                    row[attrs?.nameField || 'name'],
+                  ]),
+                ),
+            },
+          );
+        }
+
+        const btns = operations.map((opt) =>
+          opt.code === 'delete' ? renderConfirm(opt) : renderBtn(opt),
+        );
+        return h(
+          'div',
+          {
+            class: 'flex table-operations',
+            style: { justifyContent: align },
+          },
+          btns,
+        );
+      },
+    });
 
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
@@ -63,5 +265,12 @@ setupVbenVxeTable({
 });
 
 export { useVbenVxeGrid };
+export type OnActionClickParams<T = Recordable<any>> = {
+  code: string;
+  row: T;
+};
+export type OnActionClickFn<T = Recordable<any>> = (
+  params: OnActionClickParams<T>,
+) => void;
 
 export type * from '@vben/plugins/vxe-table';

apps/web-antd/src/api/core/dept.ts

@@ -0,0 +1,76 @@
+import { requestClient } from '#/api/request';
+
+export namespace DeptApi {
+  export interface Dept {
+    remark: string;
+    createTime: string;
+    name: string;
+    enabled: string;
+    id: string;
+    children?: Dept[];
+  }
+
+  export interface DeptRecord extends Dept {
+    id: string;
+  }
+
+  export interface DeptTreeData {
+    id: number;
+    label: string;
+    children?: DeptTreeData[];
+  }
+}
+
+// 添加部门
+export function createDept(data: DeptApi.Dept) {
+  return requestClient.post(`/rest/dept`, data);
+}
+
+// 更新部门信息
+export function updateDept(id: string, data: DeptApi.DeptRecord) {
+  return requestClient.patch(`/rest/dept/${id}`, data);
+}
+
+// 删除部门
+export function removeDept(id: string) {
+  return requestClient.delete(`/rest/dept/${id}`);
+}
+
+// 模糊查询获取部门列表
+export function queryDeptList(data: DeptApi.DeptRecord) {
+  return requestClient.get('/rest/dept', { data });
+}
+
+// 获取部门列表
+export function deptList() {
+  return requestClient.get(`/rest/dept`);
+}
+
+// 启用状态
+export function enabledDept(id: string) {
+  return requestClient.patch(`/rest/dept/toggle/${id}`, id);
+}
+
+export function getAllDeptTree(id?: number | string) {
+  return requestClient.get('/rest/dept/tree', { params: { id } });
+}
+
+// export function getDeptTree(params?: Partial<DeptRecord>) {
+//   return axios.get<DeptRecord[]>(`/dept/trees`, {
+//     params,
+//     paramsSerializer: (obj) => {
+//       return qs.stringify(obj);
+//     },
+//   });
+// }
+// export function listDepts(params?: ListParams<Partial<DeptRecord>>) {
+//   return axios.get<DeptRecord[]>(`/dept`, {
+//     params,
+//     paramsSerializer: (obj) => {
+//       return qs.stringify(obj);
+//     },
+//   });
+// }
+// export function queryDepts(params?: ListParams<Partial<DeptRecord>>) {
+//   return queryList(`/dept`, params);
+// }

apps/web-antd/src/api/core/index.ts

@@ -1,6 +1,8 @@
 export * from './auth';
 export * from './chatflow';
+export * from './dept';
 export * from './menu';
+export * from './role';
 export * from './server';
 export * from './user';
 export * from './workflow';

apps/web-antd/src/api/core/role.ts

@@ -0,0 +1,73 @@
+import { requestClient } from '#/api/request';
+
+export namespace RoleApi {
+  export interface Role {
+    [key: string]: any;
+    name: string;
+    dataScope: string;
+    enabled: boolean;
+    deptId: string;
+    remark?: string;
+    createBy: string;
+    createTime: string;
+    createId: string;
+    // authorities: (number | undefined)[];
+    id: string;
+  }
+
+  export interface RoleListParams {
+    page: number;
+    size: number;
+    sort: string;
+    name?: string;
+    enabled?: boolean;
+    deptId?: string;
+  }
+
+  export interface RoleListRecord extends Role {
+    name: string;
+  }
+}
+
+// 查询所有的角色列表、
+export function queryRoleList(data: RoleApi.RoleListParams) {
+  // return axios.get('/rest/role',data);
+  return requestClient.get<Array<RoleApi.Role>>('/rest/role', { params: data });
+}
+
+// 切换启用状态
+export function enabledRole(id: string) {
+  return requestClient.patch(`/rest/role/${id}/toggle`);
+}
+
+// 删除
+export function removeRole(id: string) {
+  return requestClient.delete(`/rest/role/${id}`);
+}
+
+// 添加
+export function createRole(data: RoleApi.Role) {
+  return requestClient.post(`/rest/role`, data);
+}
+
+// 更新
+export function updateRole(id: any, data: RoleApi.Role) {
+  return requestClient.patch(`/rest/role/${id}`, data);
+}
+
+// 获取详情
+export function getDetail(id: string) {
+  return requestClient.get<RoleApi.Role>(`/rest/role/${id}`);
+}
+
+export const queryMenuList = (data: string) => {
+  return requestClient.get('/rest/menu/tree', {
+    params: {
+      name: data,
+    },
+  });
+};
+
+// export function queryRoles(params?: ListParams<Partial<Role>>) {
+//   return queryList<Role>(`/rest/role/query`, params);
+// }

apps/web-antd/src/api/core/user.ts

@@ -76,9 +76,10 @@ export namespace UserApi {
     createAt?: string;
   }
 
-  export interface UserState {
+  export interface User {
     username?: string;
     nickName?: string;
+    name: string;
     avatar?: string;
     email?: string;
     phone?: string;
@@ -112,7 +113,7 @@ export function register(data: UserApi.CreateRecord) {
 }
 
 // 新建用户
-export function create(data: UserApi.CreateRecord) {
+export function createUser(data: UserApi.CreateRecord) {
   return requestClient.post('/rest/user', data);
 }
 
@@ -127,32 +128,32 @@ export function queryUserList(params: any) {
 }
 
 // 根据id查询用户信息
-export function userDetail(id: string) {
+export function userDetail(id: any) {
   return requestClient.get(`/rest/user/${id}`);
 }
 
 // 是否启用
-export function enabled(id: string) {
+export function enabledUser(id: any) {
   return requestClient.patch(`/rest/user/${id}/toggle`);
 }
 
 // 删除用户
-export function remove(id: string) {
+export function removeUser(id: string) {
   return requestClient.delete(`/rest/user/${id}`);
 }
 
 // 更新用户信息
-export function update(data: UserApi.UserRecord) {
-  return requestClient.patch<UserApi.Res>(`/rest/user/${data.id}`, data);
+export function updateUser(id: any, data: UserApi.UserRecord) {
+  return requestClient.patch<UserApi.Res>(`/rest/user/${id}`, data);
 }
 
-export function selfUpdate(data: UserApi.UserState) {
+export function selfUpdate(data: UserApi.User) {
   return requestClient.patch<UserApi.Res>(`/rest/user/self`, data);
 }
 
 // 获取个人用户信息
 export function getUserInfo() {
-  return requestClient.get<UserApi.UserState>('/rest/user/self');
+  return requestClient.get<UserApi.User>('/rest/user/self');
 }
 
 // 部门的审核员
@@ -161,9 +162,5 @@ export function deptAudit(id: string, roleId: string) {
 }
 
 export function getUserDetail(id: number) {
-  return requestClient.get<UserApi.UserState>(`/user/${id}`);
-}
-
-export function getAllDeptTree(id?: number | string) {
-  return requestClient.get('/rest/dept/tree', { params: { id } });
+  return requestClient.get<UserApi.User>(`/user/${id}`);
 }

apps/web-antd/src/router/routes/modules/system.ts

@@ -0,0 +1,46 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { EosRole, IconSystem, MdiUser, RiDept } from '@vben/icons';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'system',
+    path: '/system',
+    meta: {
+      icon: IconSystem,
+      title: '系统管理',
+      order: 4,
+    },
+    children: [
+      {
+        name: 'role',
+        path: '/system/role',
+        component: () => import('#/views/role/list.vue'),
+        meta: {
+          icon: EosRole,
+          title: '角色管理',
+        },
+      },
+      {
+        name: 'dept',
+        path: '/system/dept',
+        component: () => import('#/views/dept/list.vue'),
+        meta: {
+          icon: RiDept,
+          title: '部门管理',
+        },
+      },
+      {
+        name: 'user',
+        path: '/system/user',
+        component: () => import('#/views/user/list.vue'),
+        meta: {
+          icon: MdiUser,
+          title: '用户管理',
+        },
+      },
+    ],
+  },
+];
+
+export default routes;

apps/web-antd/src/router/routes/modules/user.ts

@@ -1,18 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { MdiUser } from '@vben/icons';
-
-const routes: RouteRecordRaw[] = [
-  {
-    name: 'user',
-    path: '/user',
-    component: () => import('#/views/user/index.vue'),
-    meta: {
-      icon: MdiUser,
-      title: '用户管理',
-      order: 4,
-    },
-  },
-];
-
-export default routes;

apps/web-antd/src/views/dept/data.ts

@@ -0,0 +1,128 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { DeptApi } from '#/api';
+
+import { z } from '#/adapter/form';
+import { getAllDeptTree } from '#/api';
+import { $t } from '#/locales';
+
+/**
+ * 获取编辑表单的字段配置。如果没有使用多语言，可以直接export一个数组常量
+ */
+export function useSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '部门名称',
+      rules: z.string(),
+    },
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: getAllDeptTree(1),
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'pid',
+      label: '上级部门',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: true,
+      fieldName: 'enabled',
+      label: '状态',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 50,
+        rows: 3,
+        showCount: true,
+      },
+      fieldName: 'remark',
+      label: '备注',
+      rules: z.string().optional(),
+    },
+  ];
+}
+
+/**
+ * 获取表格列配置
+ * @description 使用函数的形式返回列数据而不是直接export一个Array常量，是为了响应语言切换时重新翻译表头
+ * @param onActionClick 表格操作按钮点击事件
+ */
+export function useColumns(
+  onActionClick?: OnActionClickFn<DeptApi.Dept>,
+): VxeTableGridOptions<DeptApi.Dept>['columns'] {
+  return [
+    {
+      align: 'left',
+      field: 'name',
+      fixed: 'left',
+      title: '部门名称',
+      treeNode: true,
+      width: 150,
+    },
+    {
+      cellRender: {
+        name: 'CellTag',
+      },
+      field: 'enabled',
+      title: '状态',
+      width: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+    },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '部门',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'append',
+            text: '新增下级',
+          },
+          'edit', // 默认的编辑按钮
+          {
+            code: 'delete', // 默认的删除按钮
+            disabled: (row: DeptApi.Dept) => {
+              return !!(row.children && row.children.length > 0);
+            },
+          },
+        ],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: '操作',
+      width: 200,
+    },
+  ];
+}

apps/web-antd/src/views/dept/list.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { DeptApi } from '#/api';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAllDeptTree, removeDept } from '#/api';
+import { $t } from '#/locales';
+
+import { useColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/**
+ * 编辑部门
+ * @param row
+ */
+function onEdit(row: DeptApi.Dept) {
+  formModalApi.setData(row).open();
+}
+
+/**
+ * 添加下级部门
+ * @param row
+ */
+function onAppend(row: DeptApi.Dept) {
+  formModalApi.setData({ pid: row.id }).open();
+}
+
+/**
+ * 创建新部门
+ */
+function onCreate() {
+  formModalApi.setData(null).open();
+}
+
+/**
+ * 删除部门
+ * @param row
+ */
+function onDelete(row: DeptApi.Dept) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  removeDept(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      refreshGrid();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+/**
+ * 表格操作按钮的回调函数
+ */
+function onActionClick({ code, row }: OnActionClickParams<DeptApi.Dept>) {
+  switch (code) {
+    case 'append': {
+      onAppend(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridEvents: {},
+  gridOptions: {
+    columns: useColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          const res = await getAllDeptTree(1);
+          return {
+            items: res,
+          };
+        },
+      },
+    },
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      zoom: true,
+    },
+    treeConfig: {
+      parentField: 'pid',
+      rowField: 'id',
+      transform: false,
+    },
+  } as VxeTableGridOptions,
+});
+
+/**
+ * 刷新表格
+ */
+function refreshGrid() {
+  gridApi.query();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormModal @success="refreshGrid" />
+    <Grid table-title="部门列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['部门']) }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/dept/modules/form.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { DeptApi } from '#/api';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDept, updateDept } from '#/api';
+import { $t } from '#/locales';
+
+import { useSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<DeptApi.Dept>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['部门'])
+    : $t('ui.actionTitle.create', ['部门']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: useSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (valid) {
+      modalApi.lock();
+      const data = await formApi.getValues();
+      try {
+        await (formData.value?.id
+          ? updateDept(formData.value.id, data)
+          : createDept(data));
+        modalApi.close();
+        emit('success');
+      } finally {
+        modalApi.lock(false);
+      }
+    }
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<DeptApi.Dept>();
+      if (data) {
+        if (data.pid === 0) {
+          data.pid = undefined;
+        }
+        formData.value = data;
+        formApi.setValues(formData.value);
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+    <template #prepend-footer>
+      <div class="flex-auto">
+        <Button type="primary" danger @click="resetForm">
+          {{ $t('common.reset') }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>

apps/web-antd/src/views/role/data.ts

@@ -0,0 +1,127 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { RoleApi } from '#/api';
+
+import { $t } from '#/locales';
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '角色名称',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: '状态',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+    },
+    {
+      component: 'Input',
+      fieldName: 'permissions',
+      formItemClass: 'items-start',
+      label: '权限',
+      modelPropName: 'modelValue',
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '角色名称',
+    },
+    { component: 'Input', fieldName: 'id', label: '角色ID' },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+      },
+      fieldName: 'enabled',
+      label: '状态',
+    },
+    {
+      component: 'Input',
+      fieldName: 'remark',
+      label: '备注',
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+  ];
+}
+
+export function useColumns<T = RoleApi.Role>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '角色ID',
+      width: 200,
+    },
+    {
+      field: 'name',
+      title: '角色名称',
+      width: 200,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: onStatusChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'enabled',
+      title: '角色状态',
+      width: 100,
+    },
+    {
+      field: 'remark',
+      minWidth: 100,
+      title: '备注',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: $t('system.role.name'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      width: 200,
+    },
+  ];
+}

apps/web-antd/src/views/role/list.vue

@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { RoleApi } from '#/api';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { enabledRole, queryRoleList, removeRole } from '#/api';
+import { $t } from '#/locales';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const res = await queryRoleList({
+            page: page.currentPage,
+            size: page.pageSize,
+            ...formValues,
+          });
+          return {
+            total: res.total,
+            items: res.records,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<RoleApi.Role>,
+});
+
+function onActionClick(e: OnActionClickParams<RoleApi.Role>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(newStatus: number, row: RoleApi.Role) {
+  const status: Recordable<string> = {
+    0: '禁用',
+    1: '启用',
+  };
+  try {
+    await confirm(
+      `你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await enabledRole(row.id);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function onEdit(row: RoleApi.Role) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: RoleApi.Role) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  removeRole(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer />
+    <Grid table-title="角色列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['角色']) }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/role/modules/form.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { RoleApi } from '#/api';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer, VbenTree } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createRole, queryMenuList, updateRole } from '#/api';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<RoleApi.Role>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const permissions = ref<DataNode[]>([]);
+const loadingPermissions = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+    drawerApi.lock();
+    (id.value ? updateRole(id.value, values) : createRole(values))
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<RoleApi.Role>();
+      formApi.resetForm();
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+        formApi.setValues(data);
+      } else {
+        id.value = undefined;
+      }
+
+      if (permissions.value.length === 0) {
+        loadPermissions();
+      }
+    }
+  },
+});
+
+async function loadPermissions() {
+  loadingPermissions.value = true;
+  try {
+    const res = await queryMenuList('all');
+    permissions.value = res as unknown as DataNode[];
+  } finally {
+    loadingPermissions.value = false;
+  }
+}
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', '角色')
+    : $t('common.create', '角色');
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+    if (node.index % 3 >= 1) {
+      classes.push('!pl-0');
+    }
+  }
+
+  return classes.join(' ');
+}
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #permissions="slotProps">
+        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
+          <VbenTree
+            :tree-data="permissions"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="meta.title"
+            icon-field="meta.icon"
+          >
+            <template #node="{ value }">
+              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
+              {{ $t(value.meta.title) }}
+            </template>
+          </VbenTree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>

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

@@ -0,0 +1,197 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { UserApi } from '#/api';
+
+import { ref } from 'vue';
+
+import { getAllDeptTree, queryRoleList } from '#/api';
+import { $t } from '#/locales';
+
+const treeData = ref([]);
+const optionsRoleData = ref([]);
+
+queryRoleList('').then((res) => {
+  optionsRoleData.value = res.records.map((item) => ({
+    label: item.name,
+    value: item.id,
+  }));
+});
+
+function transformToTreeData(data: any) {
+  return data.map((item) => ({
+    value: item.id,
+    label: item.name,
+    ...(item.children && { children: transformToTreeData(item.children) }),
+  }));
+}
+
+// 使用示例
+getAllDeptTree(1).then((res) => {
+  treeData.value = transformToTreeData(res);
+});
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: '用户名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '昵称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: 'Email',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'phone',
+      label: '电话',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'password',
+      label: '密码',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'address',
+      label: '地址',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: true,
+      fieldName: 'enable',
+      label: '状态',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        mode: 'multiple',
+        // api: queryRoleList(''),
+        options: optionsRoleData,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+      },
+      fieldName: 'roleIds',
+      label: '所属角色',
+    },
+    {
+      component: 'TreeSelect',
+      componentProps: {
+        allowClear: true,
+        // api: getAllDeptTree(1),
+        treeData,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'deptId',
+      label: '所属部门',
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: '用户名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+      },
+      fieldName: 'enableState',
+      label: '状态',
+    },
+    // {
+    //   component: 'Input',
+    //   fieldName: 'remark',
+    //   label: '备注',
+    // },
+    // {
+    //   component: 'RangePicker',
+    //   fieldName: 'createTime',
+    //   label: '创建时间',
+    // },
+  ];
+}
+
+export function useColumns<T = UserApi.User>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'username',
+      title: '用户名称',
+      width: 200,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: onStatusChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'enableState',
+      title: '用户状态',
+      width: 100,
+    },
+    {
+      field: 'remark',
+      minWidth: 100,
+      title: '备注',
+    },
+    {
+      field: 'createTime',
+      slots: { default: 'createTime' },
+      title: '创建时间',
+      width: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '用户',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      width: 130,
+    },
+  ];
+}

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

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { getAllDeptTree, queryUserList } from '#/api';
-
-import UserTableView from './user-table-view.vue';
-
-const generateFormModel = () => {
-  return {
-    id: '',
-    username: '',
-    name: '',
-    phone: '',
-    email: '',
-    createdTime: [],
-    enableState: '',
-    deptId: '',
-    page: 1,
-    current: 1,
-    size: 10,
-  };
-};
-const treeData = ref([]);
-
-const renderData = ref([]);
-const formModel = ref(generateFormModel());
-// const deptOptions = ref([]);
-
-const getDeptData = async () => {
-  try {
-    treeData.value = await getAllDeptTree(0);
-  } catch {}
-};
-
-const getUserTableData = async (params: any) => {
-  try {
-    const res = await queryUserList(params);
-    renderData.value = res.records;
-  } catch {}
-};
-
-// 查询
-const search = () => {
-  getUserTableData({
-    // ...pagination,
-    ...formModel.value,
-  });
-};
-
-// const handleSelectDept = (id: any[]) => {
-//   const [deptId] = id;
-//   formModel.value.deptId = deptId;
-//   search();
-// };
-
-const handleSelectUser = (data: any) => {
-  formModel.value = data;
-  search();
-};
-
-getUserTableData({ page: 1, size: 10, current: 1 });
-getDeptData();
-</script>
-
-<template>
-  <div class="px-1">
-    <div class="mt-5 flex flex-col lg:flex-row">
-      <!--      <div class="mr-4 w-full lg:w-1/4">-->
-      <!--        <UserDeptTree :treeData="treeData" @select="handleSelectDept" />-->
-      <!--      </div>-->
-      <div class="w-full">
-        <UserTableView :render-data="renderData" @change="handleSelectUser" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>

apps/web-antd/src/views/user/list.vue

@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { UserApi } from '#/api';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { enabledUser, queryUserList, removeUser } from '#/api';
+import { $t } from '#/locales';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const res = await queryUserList({
+            page: page.currentPage,
+            size: page.size,
+            ...formValues,
+          });
+          return {
+            items: res.records,
+            total: res.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<UserApi.User>,
+});
+
+function onActionClick(e: OnActionClickParams<UserApi.User>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(newStatus: number, row: UserApi.User) {
+  const status: Recordable<string> = {
+    0: '禁用',
+    1: '启用',
+  };
+  try {
+    await confirm(
+      `你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await enabledUser(row.id);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function onEdit(row: UserApi.User) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: UserApi.User) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  removeUser(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer />
+    <Grid table-title="用户列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['用户']) }}
+        </Button>
+      </template>
+      <template #createTime="{ row }">
+        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { UserApi } from '#/api';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer, VbenTree } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createUser, updateUser, userDetail } from '#/api';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<UserApi.User>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const permissions = ref<DataNode[]>([]);
+const loadingPermissions = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+    drawerApi.lock();
+    (id.value ? updateUser(id.value, values) : createUser(values))
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<UserApi.User>();
+      await formApi.resetForm();
+      if (data.id) {
+        formData.value = await userDetail(data.id);
+        id.value = data.id;
+        formApi.setValues(data);
+      } else {
+        id.value = undefined;
+      }
+
+      // if (permissions.value.length === 0) {
+      //   loadPermissions();
+      // }
+    }
+  },
+});
+
+// async function loadPermissions() {
+//   loadingPermissions.value = true;
+//   try {
+//     const res = await getMenuList();
+//     permissions.value = res as unknown as DataNode[];
+//   } finally {
+//     loadingPermissions.value = false;
+//   }
+// }
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', '用户')
+    : $t('common.create', '用户');
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+    if (node.index % 3 >= 1) {
+      classes.push('!pl-0');
+    }
+  }
+
+  return classes.join(' ');
+}
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #permissions="slotProps">
+        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
+          <VbenTree
+            :tree-data="permissions"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="meta.title"
+            icon-field="meta.icon"
+          >
+            <template #node="{ value }">
+              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
+              {{ $t(value.meta.title) }}
+            </template>
+          </VbenTree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>

apps/web-antd/src/views/user/user-edit.vue

@@ -1,245 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-const props = defineProps({
-  prem: {
-    type: Object,
-    default: () => ({}),
-  },
-  isCreate: Boolean,
-});
-// const emit = defineEmits(['refresh']);
-const modalTitle = computed(() => {
-  return props.isCreate ? '新增用户' : '编辑用户';
-});
-// const checkKeys = ref<number[]>([]);
-
-const CreateRef = ref();
-const open = ref<boolean>(false);
-
-const formData = ref({
-  value: undefined,
-  code: undefined,
-  username: '',
-  nickName: '',
-  password: '',
-  phone: '',
-  email: '',
-  enabled: '',
-  address: '',
-  deptId: undefined,
-  roleIds: [],
-  permissionIds: [],
-  authorities: [],
-});
-
-// const formDifer = ref{};
-
-// 部门数据
-const deptOptions = ref();
-// const getDeptData = async () => {
-//   const res = await getAllDeptTree(0);
-//   deptOptions.value = res.data;
-// };
-// 角色数据
-const roleOptions = ref();
-// const getRoleData = async () => {
-//   const res = await queryRoleList('');
-//   roleOptions.value = res.data.records.filter((item: any) => {
-//     return item.enabled !== false;
-//   });
-// };
-
-// 组件被点击
-const handleClick = () => {
-  // getDeptData();
-  // getRoleData();
-  // const userId = props.prem?.id;
-  // 编辑
-  // if (!props.isCreate && userId) {
-  //   formData.value = props.prem;
-  //   formDifer = { ...props.prem };
-  // }
-  open.value = true;
-};
-
-// 做出只编辑的部分
-// const diffDataForm = (newData: any, oldData: any) => {
-//   const result = {}; // 报错编辑的字段内容
-//   Object.keys(oldData).forEach((key) => {
-//     if (oldData[key] !== newData[key]) {
-//       result[key] = newData[key];
-//     }
-//   });
-//   return result;
-// };
-
-// 提交
-// const handleSubmit = async () => {
-//   const valid = await CreateRef.value?.validate();
-//   if (!valid) {
-//     formData.value.permissionIds = checkKeys.value;
-//     // 新增
-//     if (props.isCreate) {
-//       // formData.value.username = formData.value.email;
-//       const res = await userStore.createUser(formData.value);
-//       if (res.status === 200) {
-//         Message.success({
-//           content: '新建成功',
-//           duration: 5 * 1000,
-//         });
-//       }
-//       CreateRef.value?.resetFields();
-//     } else {
-//       // 编辑
-//       // formDifer = diffDataForm(formData.value, formDifer);
-//       // if (Object.keys(formDifer).length === 0) {
-//       //   Message.success({
-//       //     content: '未编辑',
-//       //     duration: 3 * 1000,
-//       //   });
-//       // } else {
-//       //   formDifer.id = formData.value.id;
-//       //   const res = await userStore.updateUser(formData.value);
-//       //   if (res.status === 200) {
-//       //     Message.success({
-//       //       content: '编辑成功',
-//       //       duration: 5 * 1000,
-//       //     });
-//       //   }
-//       // }
-//       const res = await userStore.updateUser(formData.value);
-//       if (res.status === 200) {
-//         Message.success({
-//           content: '编辑成功',
-//           duration: 5 * 1000,
-//         });
-//       }
-//     }
-//     checkKeys.value = [];
-//     emit('refresh');
-//     setVisible(false);
-//   }
-// };
-
-// 关闭
-const handleCancel = async () => {
-  // checkKeys.value = [];
-  open.value = false;
-};
-</script>
-
-<template>
-  <a-button
-    v-if="props.isCreate"
-    type="primary"
-    :style="{ marginBottom: '10px', marginLeft: '10px' }"
-    @click="handleClick"
-  >
-    新建
-  </a-button>
-  <a-button v-if="!props.isCreate" @click="handleClick"> 编辑 </a-button>
-
-  <a-modal width="700px" v-model:open="open" @cancel="handleCancel">
-    <template #title>{{ modalTitle }}</template>
-    <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
-      <a-form-item
-        field="username"
-        label="用户名"
-        :validate-trigger="['change', 'input']"
-        :rules="[
-          { required: true, message: '用户名不能为空' },
-          {
-            match: /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/,
-            message: '请输入正确格式的用户名',
-          },
-        ]"
-      >
-        <a-input
-          v-if="props.isCreate"
-          v-model="formData.username"
-          placeholder="请输入用户名"
-        />
-
-        <div v-else>{{ formData.username }}</div>
-      </a-form-item>
-      <a-form-item
-        field="email"
-        label="Email"
-        :rules="[
-          {
-            required: true,
-            type: 'email',
-            message: 'Email不能为空',
-          },
-        ]"
-        :validate-trigger="['change', 'input']"
-      >
-        <a-input v-model="formData.email" placeholder="请输入Email" />
-      </a-form-item>
-      <a-form-item
-        field="phone"
-        label="电话"
-        :rules="[
-          { required: true, message: '电话不能为空' },
-          { match: /^1[3-9]\d{9}$/, message: '请输入正确格式的电话' },
-        ]"
-        :validate-trigger="['change', 'input']"
-      >
-        <a-input v-model="formData.phone" placeholder="请输入电话" />
-      </a-form-item>
-      <a-form-item
-        field="password"
-        label="密码"
-        v-if="isCreate"
-        :validate-trigger="['change', 'input']"
-        :rules="[{ required: true, message: '密码不能为空' }]"
-      >
-        <a-input v-model="formData.password" placeholder="请输入密码" />
-      </a-form-item>
-      <a-form-item field="nickName" label="昵称">
-        <a-input v-model="formData.nickName" placeholder="请输入昵称" />
-      </a-form-item>
-
-      <a-form-item field="address" label="地址">
-        <a-input v-model="formData.address" placeholder="请输入地址" />
-      </a-form-item>
-      <a-form-item
-        field="deptId"
-        label="部门"
-        :rules="[{ required: true, message: '部门不能为空' }]"
-        :validate-trigger="['change']"
-      >
-        <a-tree-select
-          v-model="formData.deptId"
-          :field-names="{
-            key: 'id',
-            title: 'name',
-            children: 'children',
-          }"
-          :data="deptOptions"
-          allow-clear
-          placeholder="请选择所属部门"
-        />
-      </a-form-item>
-
-      <a-form-item
-        field="roleIds"
-        label="角色"
-        :rules="[{ required: true, message: '角色不能为空' }]"
-        :validate-trigger="['change']"
-      >
-        <a-select
-          v-model="formData.roleIds"
-          :options="roleOptions"
-          :field-names="{
-            value: 'id',
-            label: 'name',
-          }"
-          placeholder="请选择角色"
-          multiple
-        />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>

apps/web-antd/src/views/user/user-table-view.vue

@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
-
-import { ref } from 'vue';
-
-import { message } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { queryUserList } from '#/api';
-
-import UserEdit from './user-edit.vue';
-
-// import { MOCK_TABLE_DATA } from '../table-data';
-
-interface RowType {
-  id: number;
-  email: string;
-  enableState: boolean;
-  name: string;
-  phone: string;
-  username: string;
-  deptId: number;
-  roleId: number;
-  createTime: string;
-  ceatedBy: string;
-  createId: number;
-}
-
-const emit = defineEmits(['change']);
-
-// const columns = computed(() => [
-//   {
-//     title: '用户名',
-//     field: 'username',
-//   },
-//   {
-//     title: '电话',
-//     field: 'phone',
-//   },
-//   {
-//     title: '邮箱',
-//     field: 'email',
-//   },
-//   {
-//     title: '昵称',
-//     field: 'name',
-//   },
-//   {
-//     title: '地址',
-//     field: 'address',
-//   },
-//   {
-//     title: '是否启用',
-//     field: 'enableState',
-//   },
-//   {
-//     title: '操作',
-//     field: 'operations',
-//   },
-// ]);
-
-const gridEvents: VxeGridListeners<RowType> = {
-  cellClick: ({ row }) => {
-    message.info(`cell-click: ${row.name}`);
-  },
-};
-
-// const props = defineProps({
-//   renderData: {
-//     type: Array,
-//     default: () => []
-//   }
-// })
-
-const gridOptions: VxeGridProps<RowType> = {
-  checkboxConfig: {
-    highlight: true,
-    labelField: 'name',
-  },
-  columns: [
-    {
-      title: '用户名',
-      field: 'username',
-    },
-    {
-      title: '电话',
-      field: 'phone',
-    },
-  ],
-  exportConfig: {},
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async () => {
-        const res = await queryUserList({
-          page: 1,
-          size: 10,
-        });
-        return res.records;
-      },
-    },
-  },
-};
-
-const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions });
-
-const generateFormModel = () => {
-  return {
-    id: '',
-    name: '',
-    username: '',
-    phone: '',
-    email: '',
-    createdTime: [],
-    enableState: '',
-    deptId: '',
-    page: 1,
-    current: 1,
-    size: 10,
-  };
-};
-const formModel = ref(generateFormModel());
-
-const selectUser = () => {
-  emit('change', {
-    ...formModel.value,
-  });
-};
-
-// 重置
-const reset = () => {
-  formModel.value = generateFormModel();
-  emit('change', {
-    ...formModel.value,
-  });
-};
-</script>
-
-<template>
-  <div class="px-5">
-    <a-card class="general-card">
-      <a-row>
-        <a-col :flex="1">
-          <a-form
-            :model="formModel"
-            :label-col-props="{ span: 6 }"
-            :wrapper-col-props="{ span: 18 }"
-            label-align="right"
-          >
-            <a-row :gutter="18">
-              <a-col :span="6">
-                <a-form-item field="username" label="用户名">
-                  <a-input
-                    v-model:value="formModel.username"
-                    placeholder="请输入用户名"
-                  />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item field="phone" label="电话号码">
-                  <a-input
-                    v-model:value="formModel.phone"
-                    placeholder="请输入电话号码"
-                  />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item field="deptId" label="部门">
-                  <a-input
-                    v-model:value="formModel.deptId"
-                    placeholder="所属部门"
-                  />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </a-col>
-        <a-col flex="86px" style="text-align: right">
-          <a-space :size="18">
-            <a-button type="primary" @click="selectUser"> 查询 </a-button>
-            <a-button @click="reset"> 重置 </a-button>
-          </a-space>
-        </a-col>
-      </a-row>
-      <a-divider style="margin-top: 0" />
-      <a-row>
-        <a-col :span="12">
-          <a-space>
-            <UserEdit :is-create="true" />
-          </a-space>
-        </a-col>
-      </a-row>
-      <div class="vp-raw w-full">
-        <Grid />
-      </div>
-    </a-card>
-  </div>
-</template>
-
-<style scoped></style>

apps/web-antd/vite.config.mts

@@ -10,13 +10,14 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://localhost:8081/api',
+            // target: 'http://localhost:8081/api',
+            target: 'http://43.139.10.64:8082/api',
             ws: true,
           },
           '/docx': {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/docx/, ''),
-            target: 'http://47.112.173.8:6805/static',
+            target: 'http://47.112.173.8:6802/static',
           },
           '/pptx': {
             changeOrigin: true,
@@ -26,7 +27,8 @@ export default defineConfig(async () => {
           '/v1': {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/v1/, ''),
-            target: 'http://localhost:8081/v1',
+            // target: 'http://localhost:8081/v1',
+            target: 'http://43.139.10.64:8082/v1',
           },
         },
       },

packages/effects/common-ui/src/ui/index.ts

@@ -5,5 +5,4 @@ export * from './fallback';
 export * from './home';
 export * from './ppt';
 export * from './spider';
-export * from './user';
 export * from './word';

packages/icons/src/iconify/index.ts

@@ -13,4 +13,7 @@ export const MdiGoogle = createIconifyIcon('mdi:google');
 export const MdiChevron = createIconifyIcon('tabler:chevron-right');
 export const MdiUser = createIconifyIcon('mdi:user');
 export const MageRobot = createIconifyIcon('mage:robot');
+export const RiDept = createIconifyIcon('ri:door-open-line');
+export const EosRole = createIconifyIcon('eos-icons:role-binding-outlined');
+export const IconSystem = createIconifyIcon('icon-park-twotone:system');
 // export const MdiUser = createIconifyIcon('mdi:user');