wip: system management sample page

Vben
1 parent f79cae63
Showing 31 changed files with 852 additions and 52 deletions
CHANGELOG.zh_CN.md
mock/demo/system.ts
package.json
src/api/demo/model/systemModel.ts
src/api/demo/system.ts
src/components/Form/src/componentMap.ts
src/components/Form/src/types/index.ts
src/components/Icon/src/IconPicker.vue
src/components/Page/index.ts
src/components/Qrcode/index.ts
src/components/StrengthMeter/index.ts
src/components/Table/src/components/ExpandIcon.tsx
src/components/Table/src/components/settings/ColumnSetting.vue
src/components/Table/src/props.ts
src/design/ant/input.less
src/locales/lang/en/routes/demo/system.ts
src/locales/lang/zh_CN/routes/demo/system.ts
src/locales/useLocale.ts
src/router/menus/modules/demo/system.ts
src/router/routes/modules/demo/system.ts
@@ -28,6 +28,7 @@
 - 修复表格不能正确的获取选中行
 - 修复全屏状态下 modal 高度计算错误
 - 修复部分表格样式问题
+- 修复树形表格 `indentSize`设置失效
 ## 2.0.1 (2021-02-21)
@@ -18,6 +18,22 @@ const accountList = (() =&gt; {
   return result;
 })();
+const roleList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 4; index++) {
+    result.push({
+      id: `${index}`,
+      orderNo: `${index + 1}`,
+      roleName: ['超级管理员', '管理员', '文章管理员', '普通用户'][index],
+      roleValue: '@first',
+      createTime: '@datetime',
+      remark: '@cword(10,20)',
+      'status|1': ['0', '1'],
+    });
+  }
+  return result;
+})();
+
 const deptList = (() => {
   const result: any[] = [];
   for (let index = 0; index < 3; index++) {
@@ -49,6 +65,46 @@ const deptList = (() =&gt; {
   return result;
 })();
+const menuList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 3; index++) {
+    result.push({
+      id: `${index}`,
+      icon: ['ion:layers-outline', 'ion:git-compare-outline', 'ion:tv-outline'][index],
+      component: 'LAYOUT',
+      menuName: ['Dashboard', '权限管理', '功能'][index],
+      permission: '',
+      orderNo: index + 1,
+      createTime: '@datetime',
+      'status|1': ['0', '0', '1'],
+      children: (() => {
+        const children: any[] = [];
+        for (let j = 0; j < 4; j++) {
+          children.push({
+            id: `${index}-${j}`,
+            menuName: ['菜单1', '菜单2', '菜单3', '菜单4'][j],
+            icon: 'ion:document',
+            permission: ['menu1:view', 'menu2:add', 'menu3:update', 'menu4:del'][index],
+            component: [
+              '/dashboard/welcome/index',
+              '/dashboard/analysis/index',
+              '/dashboard/workbench/index',
+              '/dashboard/test/index',
+            ][j],
+            orderNo: j + 1,
+            createTime: '@datetime',
+            'status|1': ['0', '1'],
+            parentMenu: `${index}`,
+            children: undefined,
+          });
+        }
+        return children;
+      })(),
+    });
+  }
+  return result;
+})();
+
 export default [
   {
     url: '/api/system/getAccountList',
@@ -60,6 +116,15 @@ export default [
     },
   },
   {
+    url: '/api/system/getRoleList',
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, roleList);
+    },
+  },
+  {
     url: '/api/system/getDeptList',
     timeout: 100,
     method: 'get',
@@ -67,4 +132,12 @@ export default [
       return resultSuccess(deptList);
     },
   },
+  {
+    url: '/api/system/getMenuList',
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(menuList);
+    },
+  },
 ] as MockMethod[];
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
-    "@iconify/json": "^1.1.310",
+    "@iconify/json": "^1.1.311",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.7.0",
     "@types/crypto-js": "^4.0.1",
@@ -110,7 +110,7 @@
     "vite-plugin-pwa": "^0.5.6",
     "vite-plugin-style-import": "^0.7.6",
     "vite-plugin-theme": "^0.4.8",
-    "vite-plugin-windicss": "0.6.2",
+    "vite-plugin-windicss": "0.6.4",
     "vue-eslint-parser": "^7.6.0",
     "yargs": "^16.2.0"
   },
@@ -4,12 +4,21 @@ export type AccountParams = BasicPageParams &amp; {
   account?: string;
   nickname?: string;
 };
+export type RoleParams = BasicPageParams & {
+  roleName?: string;
+  status?: string;
+};
 export type DeptParams = {
   deptName?: string;
   status?: string;
 };
+export type MenuParams = {
+  menuName?: string;
+  status?: string;
+};
+
 export interface AccountListItem {
   id: string;
   account: string;
@@ -29,9 +38,32 @@ export interface DeptListItem {
   status: number;
 }
+export interface MenuListItem {
+  id: string;
+  orderNo: string;
+  createTime: string;
+  status: number;
+  icon: string;
+  component: string;
+  permission: string;
+}
+
+export interface RoleListItem {
+  id: string;
+  roleName: string;
+  roleValue: string;
+  status: number;
+  orderNo: string;
+  createTime: string;
+}
+
 /**
  * @description: Request list return value
  */
 export type AccountListGetResultModel = BasicFetchResult<AccountListItem>;
 export type DeptListGetResultModel = BasicFetchResult<DeptListItem>;
+
+export type MenuListGetResultModel = BasicFetchResult<MenuListItem>;
+
+export type RoleListGetResultModel = BasicFetchResult<RoleListItem>;
 import {
   AccountParams,
   DeptListItem,
+  MenuParams,
+  RoleParams,
+  MenuListGetResultModel,
   DeptListGetResultModel,
   AccountListGetResultModel,
+  RoleListGetResultModel,
 } from './model/systemModel';
 import { defHttp } from '/@/utils/http/axios';
 enum Api {
-  // The address does not exist
   AccountList = '/system/getAccountList',
   DeptList = '/system/getDeptList',
+  MenuList = '/system/getMenuList',
+  RoleList = '/system/getRoleList',
 }
 export const getAccountList = (params: AccountParams) =>
@@ -17,3 +22,9 @@ export const getAccountList = (params: AccountParams) =&gt;
 export const getDeptList = (params?: DeptListItem) =>
   defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params });
+
+export const getMenuList = (params?: MenuParams) =>
+  defHttp.get<MenuListGetResultModel>({ url: Api.MenuList, params });
+
+export const getRoleList = (params?: RoleParams) =>
+  defHttp.get<RoleListGetResultModel>({ url: Api.RoleList, params });
@@ -22,6 +22,7 @@ import RadioButtonGroup from &#39;./components/RadioButtonGroup.vue&#39;;
 import ApiSelect from './components/ApiSelect.vue';
 import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
+import { IconPicker } from '/@/components/Icon';
 const componentMap = new Map<ComponentType, Component>();
@@ -53,6 +54,7 @@ componentMap.set(&#39;RangePicker&#39;, DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
 componentMap.set('StrengthMeter', StrengthMeter);
+componentMap.set('IconPicker', IconPicker);
 componentMap.set('Upload', BasicUpload);
@@ -107,4 +107,5 @@ export type ComponentType =
   | 'Switch'
   | 'StrengthMeter'
   | 'Upload'
+  | 'IconPicker'
   | 'Render';
@@ -3,8 +3,8 @@
     disabled
     :style="{ width }"
     :placeholder="t('component.icon.placeholder')"
-    v-model:value="currentSelect"
     :class="prefixCls"
+    v-model:value="currentSelect"
   >
     <template #addonAfter>
       <Popover
@@ -91,6 +91,7 @@
   const icons = getIcons();
   export default defineComponent({
     name: 'IconPicker',
+    inheritAttrs: false,
     components: { [Input.name]: Input, Icon, Popover, ScrollContainer, Pagination, Empty },
     props: {
       value: propTypes.string,
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const PageFooter = createAsyncComponent(() => import('./src/PageFooter.vue'));
-
+export { default as PageFooter } from './src/PageFooter.vue';
 export { default as PageWrapper } from './src/PageWrapper.vue';
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const QrCode = createAsyncComponent(() => import('./src/index.vue'));
+export { default as QrCode } from './src/index.vue';
 export * from './src/types';
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-
-export const StrengthMeter = createAsyncComponent(() => import('./src/index.vue'));
+export { default as StrengthMeter } from './src/index.vue';
@@ -3,7 +3,7 @@ import { BasicArrow } from &#39;/@/components/Basic&#39;;
 export default () => {
   return (props: Recordable) => {
     if (!props.expandable) {
-      return null;
+      return <span />;
     }
     return (
       <BasicArrow
@@ -3,8 +3,8 @@
     <template #title>
       <span>{{ t('component.table.settingColumn') }}</span>
     </template>
+    <!-- :getPopupContainer="getPopupContainer" -->
     <Popover
-      :getPopupContainer="getPopupContainer"
       placement="bottomLeft"
       trigger="click"
       @visibleChange="handleVisibleChange"
@@ -49,6 +49,8 @@ export const basicProps = {
     default: null,
   },
+  indentSize: propTypes.number.def(24),
+
   canColDrag: propTypes.bool.def(true),
   api: {
     type: Function as PropType<(...arg: any[]) => Promise<any>>,
@@ -14,3 +14,11 @@
 .ant-input-clear-icon {
   margin-right: 5px;
 }
+
+.ant-input-affix-wrapper-textarea-with-clear-btn {
+  padding: 0 !important;
+
+  textarea.ant-input {
+    padding: 4px;
+  }
+}
@@ -6,4 +6,7 @@ export default {
   password: 'Change password',
   dept: 'Department management',
+
+  menu: 'Menu management',
+  role: 'Role management',
 };
@@ -6,4 +6,7 @@ export default {
   password: '修改密码',
   dept: '部门管理',
+
+  menu: '菜单管理',
+  role: '角色管理',
 };
@@ -3,13 +3,11 @@
  */
 import type { LocaleType } from '/#/config';
-import { ref } from 'vue';
 import moment from 'moment';
-import { computed } from 'vue';
 import { i18n } from './setupI18n';
 import { localeStore } from '/@/store/modules/locale';
-import { unref } from 'vue';
+import { unref, computed } from 'vue';
 interface LangModule {
   message: Recordable;
@@ -17,8 +15,6 @@ interface LangModule {
   momentLocaleName: string;
 }
-const antConfigLocale = ref<Nullable<Recordable>>(null);
-
 const loadLocalePool: LocaleType[] = [];
 function setI18nLanguage(locale: LocaleType) {
@@ -67,7 +63,6 @@ export function useLocale() {
     getLocale,
     getShowLocalePicker,
     changeLocale,
-    antConfigLocale,
     getAntdLocale,
   };
 }
@@ -18,7 +18,20 @@ const menu: MenuModule = {
           type: 'warn',
         },
       },
-
+      {
+        path: 'role',
+        name: t('routes.demo.system.role'),
+        tag: {
+          content: 'new',
+        },
+      },
+      {
+        path: 'menu',
+        name: t('routes.demo.system.menu'),
+        tag: {
+          content: 'new',
+        },
+      },
       {
         path: 'dept',
         name: t('routes.demo.system.dept'),
@@ -23,6 +23,25 @@ const system: AppRouteModule = {
       component: () => import('/@/views/demo/system/account/index.vue'),
     },
     {
+      path: 'role',
+      name: 'RoleManagement',
+      meta: {
+        title: t('routes.demo.system.role'),
+        ignoreKeepAlive: true,
+      },
+      component: () => import('/@/views/demo/system/role/index.vue'),
+    },
+
+    {
+      path: 'menu',
+      name: 'MenuManagement',
+      meta: {
+        title: t('routes.demo.system.menu'),
+        ignoreKeepAlive: true,
+      },
+      component: () => import('/@/views/demo/system/menu/index.vue'),
+    },
+    {
       path: 'dept',
       name: 'DeptManagement',
       meta: {
@@ -21,9 +21,6 @@
         labelWidth: 100,
         schemas: formSchema,
         showActionButtonGroup: false,
-        actionColOptions: {
-          span: 23,
-        },
       });
       const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
@@ -7,22 +7,23 @@ export const columns: BasicColumn[] = [
   {
     title: '部门名称',
     dataIndex: 'deptName',
-    width: 300,
+    width: 160,
+    align: 'left',
   },
   {
     title: '排序',
     dataIndex: 'orderNo',
-    width: 80,
+    width: 50,
   },
   {
     title: '状态',
     dataIndex: 'status',
-    width: 120,
+    width: 80,
     customRender: ({ record }) => {
       const status = record.status;
       const enable = ~~status === 0;
       const color = enable ? 'green' : 'red';
-      const text = enable ? '正常' : '停用';
+      const text = enable ? '启用' : '停用';
       return h(Tag, { color: color }, () => text);
     },
   },
@@ -69,6 +70,7 @@ export const formSchema: FormSchema[] = [
     field: 'parentDept',
     label: '上级部门',
     component: 'TreeSelect',
+
     componentProps: {
       replaceFields: {
         title: 'deptName',
@@ -89,10 +91,11 @@ export const formSchema: FormSchema[] = [
     field: 'status',
     label: '状态',
     component: 'RadioButtonGroup',
+    defaultValue: '0',
     componentProps: {
       options: [
-        { label: '正常', value: '0' },
-        { label: '禁用', value: '1' },
+        { label: '启用', value: '0' },
+        { label: '停用', value: '1' },
       ],
     },
     required: true,
@@ -56,7 +56,7 @@
         showTableSetting: true,
         bordered: true,
         showIndexColumn: false,
-        indentSize: 20,
+        canResize: false,
         actionColumn: {
           width: 80,
           title: '操作',
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="50%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './menu.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { getMenuList } from '/@/api/demo/system';
+
+  export default defineComponent({
+    name: 'MenuDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+        labelWidth: 100,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        baseColProps: { lg: 12, md: 24 },
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+        const treeData = await getMenuList();
+        updateSchema({
+          field: 'parentMenu',
+          componentProps: { treeData },
+        });
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          setDrawerProps({ confirmLoading: true });
+          // TODO custom api
+          console.log(values);
+          closeDrawer();
+          emit('success');
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return { registerDrawer, registerForm, getTitle, handleSubmit };
+    },
+  });
+</script>
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { getMenuList } from '/@/api/demo/system';
+
+  import { useDrawer } from '/@/components/Drawer';
+  import MenuDrawer from './MenuDrawer.vue';
+
+  import { columns, searchFormSchema } from './menu.data';
+
+  export default defineComponent({
+    name: 'MenuManagement',
+    components: { BasicTable, MenuDrawer, TableAction },
+    setup() {
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const [registerTable, { reload }] = useTable({
+        title: '菜单列表',
+        api: getMenuList,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        pagination: false,
+        striped: false,
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        canResize: false,
+        actionColumn: {
+          width: 80,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+      });
+
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      function handleDelete(record: Recordable) {
+        console.log(record);
+      }
+
+      function handleSuccess() {
+        reload();
+      }
+
+      return {
+        registerTable,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+      };
+    },
+  });
+</script>
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { Icon } from '/@/components/Icon';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '菜单名称',
+    dataIndex: 'menuName',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: '图标',
+    dataIndex: 'icon',
+    width: 50,
+    customRender: ({ record }) => {
+      return h(Icon, { icon: record.icon });
+    },
+  },
+  {
+    title: '权限标识',
+    dataIndex: 'permission',
+    width: 180,
+  },
+  {
+    title: '组件',
+    dataIndex: 'component',
+  },
+  {
+    title: '排序',
+    dataIndex: 'orderNo',
+    width: 50,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 80,
+    customRender: ({ record }) => {
+      const status = record.status;
+      const enable = ~~status === 0;
+      const color = enable ? 'green' : 'red';
+      const text = enable ? '启用' : '停用';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+const isDir = (type: string) => type === '0';
+const isMenu = (type: string) => type === '1';
+const isButton = (type: string) => type === '2';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'menuName',
+    label: '菜单名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '启用', value: '0' },
+        { label: '停用', value: '1' },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'type',
+    label: '菜单类型',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '目录', value: '0' },
+        { label: '菜单', value: '1' },
+        { label: '按钮', value: '2' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'menuName',
+    label: '菜单名称',
+    component: 'Input',
+    required: true,
+  },
+
+  {
+    field: 'parentMenu',
+    label: '上级菜单',
+    component: 'TreeSelect',
+    componentProps: {
+      replaceFields: {
+        title: 'menuName',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+
+  {
+    field: 'orderNo',
+    label: '排序',
+    component: 'InputNumber',
+    required: true,
+  },
+  {
+    field: 'icon',
+    label: '图标',
+    component: 'IconPicker',
+    required: true,
+    show: ({ values }) => !isButton(values.type),
+  },
+
+  {
+    field: 'routePath',
+    label: '路由地址',
+    component: 'Input',
+    required: true,
+    show: ({ values }) => !isButton(values.type),
+  },
+  {
+    field: 'component',
+    label: '组件路径',
+    component: 'Input',
+    show: ({ values }) => isMenu(values.type),
+  },
+  {
+    field: 'permission',
+    label: '权限标识',
+    component: 'Input',
+    show: ({ values }) => !isDir(values.type),
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '启用', value: '0' },
+        { label: '禁用', value: '1' },
+      ],
+    },
+  },
+  {
+    field: 'isExt',
+    label: '是否外链',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '否', value: '0' },
+        { label: '是', value: '1' },
+      ],
+    },
+    show: ({ values }) => !isButton(values.type),
+  },
+
+  {
+    field: 'keepalive',
+    label: '是否缓存',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '否', value: '0' },
+        { label: '是', value: '1' },
+      ],
+    },
+    show: ({ values }) => isMenu(values.type),
+  },
+
+  {
+    field: 'show',
+    label: '是否显示',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '是', value: '0' },
+        { label: '否', value: '1' },
+      ],
+    },
+    show: ({ values }) => !isButton(values.type),
+  },
+];
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './role.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { getMenuList } from '/@/api/demo/system';
+
+  export default defineComponent({
+    name: 'RoleDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+        labelWidth: 90,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+        const treeData = await getMenuList();
+        updateSchema({
+          field: 'parentMenu',
+          componentProps: { treeData },
+        });
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          setDrawerProps({ confirmLoading: true });
+          // TODO custom api
+          console.log(values);
+          closeDrawer();
+          emit('success');
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return { registerDrawer, registerForm, getTitle, handleSubmit };
+    },
+  });
+</script>
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { getRoleList } from '/@/api/demo/system';
+
+  import { useDrawer } from '/@/components/Drawer';
+  import RoleDrawer from './RoleDrawer.vue';
+
+  import { columns, searchFormSchema } from './role.data';
+
+  export default defineComponent({
+    name: 'RoleManagement',
+    components: { BasicTable, RoleDrawer, TableAction },
+    setup() {
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const [registerTable, { reload }] = useTable({
+        title: '角色列表',
+        api: getRoleList,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 80,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+      });
+
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      function handleDelete(record: Recordable) {
+        console.log(record);
+      }
+
+      function handleSuccess() {
+        reload();
+      }
+
+      return {
+        registerTable,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+      };
+    },
+  });
+</script>
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '角色名称',
+    dataIndex: 'roleName',
+    width: 200,
+  },
+  {
+    title: '角色值',
+    dataIndex: 'roleValue',
+    width: 180,
+  },
+  {
+    title: '排序',
+    dataIndex: 'orderNo',
+    width: 50,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 80,
+    customRender: ({ record }) => {
+      const status = record.status;
+      const enable = ~~status === 0;
+      const color = enable ? 'green' : 'red';
+      const text = enable ? '启用' : '停用';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'roleNme',
+    label: '角色名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '启用', value: '0' },
+        { label: '停用', value: '1' },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'roleValue',
+    label: '角色值',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '启用', value: '0' },
+        { label: '停用', value: '1' },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  },
+  {
+    label: '菜单分配',
+    field: 'menu',
+    slot: 'menu',
+    component: 'Render',
+  },
+];
@@ -36,7 +36,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
           replacement: pathResolve('src') + '/',
         },
         {
-          // /@/xxxx  =>  src/xxx
+          // /#/xxxx  =>  types/xxx
           find: /^\/#\//,
           replacement: pathResolve('types') + '/',
         },
@@ -52,6 +52,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
     },
     build: {
+      cssCodeSplit: false,
       // minify: 'esbuild',
       outDir: OUTPUT_DIR,
       polyfillDynamicImport: VITE_LEGACY,
@@ -1117,10 +1117,10 @@
   dependencies:
     cross-fetch "^3.0.6"
-"@iconify/json@^1.1.310":
-  version "1.1.310"
-  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.310.tgz#4180cfdafbf4e218b8f78abae3434089bcb6ccf6"
-  integrity sha512-gLCuqulJPC2ly3upqPILOA1nV2fYfb99Dx64hLvneUb0r22opL+TfMfl352AjSZTFMGKV6ve8pNSAOS5gvY3vg==
+"@iconify/json@^1.1.311":
+  version "1.1.311"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.311.tgz#cafa09c427fdacce8198e787f87c194eaa7e3e38"
+  integrity sha512-ghm5JynA3aft0goTlEt6w2aYZCTaOO4IE59Cf99ip81NDs0qw4OJ/JSoR09jIrcVDSVZJdp3jf0Tni1iRV1j+w==
 "@intlify/core-base@9.0.0":
   version "9.0.0"
@@ -1780,16 +1780,16 @@
   dependencies:
     vue-demi latest
-"@windicss/plugin-utils@0.6.2":
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.6.2.tgz#8fc76d9f2a1e3de123ffd54fdd9d1583801bb087"
-  integrity sha512-qR2h/vDn3LZtL0cC3id9nxPwhYqCtkcwASs63sHTUOzLhxz+zkG4xR+odndbR6PTjrlTgBC7n5hLjpq0lxRksg==
+"@windicss/plugin-utils@0.6.4":
+  version "0.6.4"
+  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.6.4.tgz#854f411b156fea61b2e6724799e91f0f9407a637"
+  integrity sha512-5RZQ71snmoKmZEXHyCByOohUM/SsWIX856+geMwOfbMOGL0guv/1TVg2PalFrZh3k/HfqQnO2ft5YSWKtrW32A==
   dependencies:
-    esbuild "^0.8.52"
+    esbuild "^0.8.54"
     esbuild-register "^2.0.0"
     fast-glob "^3.2.5"
     micromatch "^4.0.2"
-    windicss "^2.2.0"
+    windicss "^2.2.3"
 "@zxcvbn-ts/core@^0.2.0":
   version "0.2.0"
@@ -8957,13 +8957,13 @@ vite-plugin-theme@^0.4.8:
     es-module-lexer "^0.3.26"
     tinycolor2 "^1.4.2"
-vite-plugin-windicss@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.6.2.tgz#2b406c65768ce7df22451dc7b47c0026abd4bb24"
-  integrity sha512-V4WnjkxvriJSVQjswY+SrDKogOLNq1eG6dQw1wWcJRV+0QUz9pAGrMolSwed4d4MwSSbJrCA7If8xa+EFLUigw==
+vite-plugin-windicss@0.6.4:
+  version "0.6.4"
+  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.6.4.tgz#2d2bc7831dddff129d597959efaff616c6408a01"
+  integrity sha512-4BuUglBXeNIrIDfSKyg7rvqKEmxvyja2aKJxgHdOCICV8jIz2MvrZaRS9a74gUihz+OohBYqLnkOlfD+sCIQBg==
   dependencies:
-    "@windicss/plugin-utils" "0.6.2"
-    windicss "^2.2.0"
+    "@windicss/plugin-utils" "0.6.4"
+    windicss "^2.2.3"
 vite@^2.0.5:
   version "2.0.5"
@@ -9090,10 +9090,10 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
-windicss@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/windicss/-/windicss-2.2.0.tgz#42fe83b9bff6d4fc9caf85272fb6c6ddb990fbc1"
-  integrity sha512-UuPhwe/NMgGOmUMnaTR+64eMeoiRCYb/zKJfo4pm9XUb4BRFlaFMm1x0KF1RF8EtK/8jKvDlXMc/J6UPBj8/OA==
+windicss@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/windicss/-/windicss-2.2.3.tgz#5d25cab4b397d64f74660cac9b947b29cda240e9"
+  integrity sha512-rDaHpCgF3nq6tt21KC3691vhNZcbDHo0DJN+fgY5OmNCqd8muvZ9N4Zp9eqjWaJetg+ulz++MBM/pG9D70sj2w==
 wmf@~1.0.1:
   version "1.0.2"