diff --git a/apps/web-antd/src/api/system/menu/index.ts b/apps/web-antd/src/api/system/menu/index.ts
index 65c3b4f9..e4f14c17 100644
--- a/apps/web-antd/src/api/system/menu/index.ts
+++ b/apps/web-antd/src/api/system/menu/index.ts
@@ -1,7 +1,7 @@
-import type { Menu, MenuOption, MenuResp } from './model';
-
 import type { ID, IDS } from '#/api/common';
 
+import type { Menu, MenuOption, MenuResp } from './model';
+
 import { requestClient } from '#/api/request';
 
 enum Api {
diff --git a/apps/web-antd/src/api/system/menu/model.d.ts b/apps/web-antd/src/api/system/menu/model.d.ts
index 0234425f..0a988bc2 100644
--- a/apps/web-antd/src/api/system/menu/model.d.ts
+++ b/apps/web-antd/src/api/system/menu/model.d.ts
@@ -33,6 +33,8 @@ export interface MenuOption {
   weight: number;
   children: MenuOption[];
   key: string; // 实际上不存在 ide报错
+  menuType: string;
+  icon: string;
 }
 
 /**
diff --git a/apps/web-antd/src/components/tree/index.ts b/apps/web-antd/src/components/tree/index.ts
index 3dfcd39a..f142790a 100644
--- a/apps/web-antd/src/components/tree/index.ts
+++ b/apps/web-antd/src/components/tree/index.ts
@@ -1 +1,2 @@
+export { default as MenuSelectTable } from './src/menu-select-table.vue';
 export { default as TreeSelectPanel } from './src/tree-select-panel.vue';
diff --git a/apps/web-antd/src/components/tree/src/menu-select-table.vue b/apps/web-antd/src/components/tree/src/menu-select-table.vue
new file mode 100644
index 00000000..78c8d5e9
--- /dev/null
+++ b/apps/web-antd/src/components/tree/src/menu-select-table.vue
@@ -0,0 +1,440 @@
+<script setup lang="tsx">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { ID } from '#/api/common';
+import type { MenuOption } from '#/api/system/menu/model';
+import type { PropType } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { FolderIcon, MenuIcon, OkButtonIcon, VbenIcon } from '@vben/icons';
+import { cloneDeep, eachTree, findGroupParentIds } from '@vben/utils';
+import { Alert, Checkbox, RadioGroup, Space } from 'ant-design-vue';
+import { difference, uniq } from 'lodash-es';
+import { h, markRaw, nextTick, onMounted, watch } from 'vue';
+
+defineOptions({
+  name: 'MenuSelectTable',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{ defaultExpandAll?: boolean; menus: MenuOption[] }>(),
+  {
+    defaultExpandAll: true,
+  },
+);
+
+interface Permission {
+  checked: boolean;
+  id: ID;
+  label: string;
+}
+
+interface MenuPermissionOption extends MenuOption {
+  permissions: Permission[];
+}
+
+const checkedKeys = defineModel('checkedKeys', {
+  type: Array as PropType<(number | string)[]>,
+  default: () => [],
+});
+
+/**
+ * 是否节点关联
+ */
+const association = defineModel('association', {
+  type: Boolean,
+  default: true,
+});
+
+const menuTypes = {
+  C: { icon: markRaw(MenuIcon), value: '菜单' },
+  F: { icon: markRaw(OkButtonIcon), value: '按钮' },
+  M: { icon: markRaw(FolderIcon), value: '目录' },
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // checkbox显示的字段
+    labelField: 'label',
+    // 是否严格模式 即节点不关联
+    checkStrictly: !association.value,
+  },
+  size: 'small',
+  columns: [
+    {
+      type: 'checkbox',
+      title: '菜单名称',
+      field: 'label',
+      treeNode: true,
+      width: 230,
+    },
+    {
+      title: '图标',
+      field: 'icon',
+      width: 80,
+      slots: {
+        default: ({ row }) => {
+          if (row?.icon === '#') {
+            return '';
+          }
+          return (
+            <span class={'flex justify-center'}>
+              <VbenIcon icon={row.icon} />
+            </span>
+          );
+        },
+      },
+    },
+    {
+      title: '类型',
+      field: 'menuType',
+      width: 80,
+      slots: {
+        default: ({ row }) => {
+          const current = menuTypes[row.menuType as 'C' | 'F' | 'M'];
+          if (!current) {
+            return '未知';
+          }
+          return (
+            <span class="flex items-center justify-center gap-1">
+              {h(current.icon, { class: 'size-[18px]' })}
+              <span>{current.value}</span>
+            </span>
+          );
+        },
+      },
+    },
+    {
+      title: '权限标识',
+      field: 'permissions',
+      headerAlign: 'left',
+      align: 'left',
+      slots: {
+        default: 'permissions',
+      },
+    },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    enabled: false,
+  },
+  toolbarConfig: {
+    // 自定义列
+    custom: false,
+    // 最大化
+    zoom: false,
+    // 刷新
+    refresh: false,
+  },
+  rowConfig: {
+    isHover: false,
+    isCurrent: false,
+    keyField: 'id',
+  },
+  /**
+   * 开启虚拟滚动
+   * 数据量小可以选择关闭
+   * 如果遇到样式问题(空白、错位 滚动等)可以选择关闭虚拟滚动
+   */
+  scrollY: {
+    enabled: true,
+    gt: 0,
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'id',
+    transform: false,
+  },
+  showOverflow: false,
+};
+
+/**
+ * 设置是否全选
+ * @param record 行记录
+ * @param checked 是否选中
+ */
+function setPermissionsChecked(record: MenuPermissionOption, checked: boolean) {
+  if (record?.permissions?.length > 0) {
+    // 全部设置为选中
+    record.permissions.forEach((permission: Permission) => {
+      permission.checked = checked;
+    });
+  }
+}
+
+// 所有子节点
+function allChecked(record: MenuPermissionOption, checked: boolean) {
+  setPermissionsChecked(record, checked);
+  record.children?.forEach((permission) => {
+    allChecked(permission as MenuPermissionOption, checked);
+  });
+}
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (params) => {
+      // 节点独立 不做处理
+      if (!association.value) {
+        return;
+      }
+      console.log('params', params);
+      // 选中还是取消选中
+      const checked = params.checked;
+      // 行
+      const record = params.row;
+      // 设置所有子节点选中状态
+      allChecked(record, checked);
+    },
+    checkboxAll: (params) => {
+      const records = params.$grid.getData();
+      records.forEach((item) => {
+        allChecked(item, params.checked);
+      });
+    },
+  },
+});
+
+function menusWithPermissions(menus: MenuOption[]) {
+  eachTree(menus, (item: MenuPermissionOption) => {
+    if (item.children && item.children.length > 0) {
+      // 所有为按钮的节点提取出来
+      const permissions = item.children.filter(
+        (child: MenuOption) => child.menuType === 'F',
+      );
+      // 取差集
+      const diffCollection = difference(item.children, permissions);
+      // 更新后的children  即去除按钮
+      item.children = diffCollection;
+
+      // permissions作为字段添加到item
+      const permissionsArr = permissions.map((permission) => {
+        return {
+          id: permission.id,
+          label: permission.label,
+          checked: false,
+        };
+      });
+      item.permissions = permissionsArr;
+    }
+  });
+}
+
+/**
+ * 设置表格选中
+ * @param menus menu
+ * @param keys 选中的key
+ * @param handleChildren 节点独立情况 不需要处理children
+ */
+function setCheckedByKeys(
+  menus: MenuPermissionOption[],
+  keys: (number | string)[],
+  handleChildren: boolean,
+) {
+  menus.forEach((item) => {
+    // 设置行选中
+    if (keys.includes(item.id)) {
+      tableApi.grid.setCheckboxRow(item, true);
+    }
+    // 设置权限columns选中
+    if (item.permissions && item.permissions.length > 0) {
+      item.permissions.forEach((permission) => {
+        if (keys.includes(permission.id)) {
+          permission.checked = true;
+          // 手动触发onChange来选中 节点独立情况不需要处理
+          handleChildren && handlePermissionChange(item);
+        }
+      });
+    }
+    // 设置children选中
+    if (item.children && item.children.length > 0) {
+      setCheckedByKeys(item.children as any, keys, handleChildren);
+    }
+  });
+}
+
+onMounted(() => {
+  /**
+   * 加载表格数据
+   */
+  watch(
+    () => props.menus,
+    async (menus) => {
+      const clonedMenus = cloneDeep(menus);
+      menusWithPermissions(clonedMenus);
+      console.log(clonedMenus);
+      await tableApi.grid.loadData(clonedMenus);
+      await nextTick();
+      if (props.defaultExpandAll) {
+        setExpandOrCollapse(true);
+      }
+    },
+  );
+
+  /**
+   * 节点关联设置表格勾选效果
+   */
+  watch(association, (value) => {
+    tableApi.setGridOptions({
+      checkboxConfig: {
+        checkStrictly: !value,
+      },
+    });
+  });
+
+  watch(checkedKeys, (value) => {
+    console.log(props.menus);
+    const allCheckedKeys = uniq([...value]);
+    console.log(allCheckedKeys);
+    // 赋值
+    const records = tableApi.grid.getData();
+    setCheckedByKeys(records, allCheckedKeys, association.value);
+  });
+});
+
+const options = [
+  { label: '节点关联', value: true },
+  { label: '节点独立', value: false },
+];
+
+async function handleAssociationChange() {
+  // 需要清空全部勾选
+  await tableApi.grid.clearCheckboxRow();
+  // 清空全部permissions选中
+  const records = tableApi.grid.getData();
+  records.forEach((item) => {
+    allChecked(item, false);
+  });
+}
+
+/**
+ * 全部展开/折叠
+ * @param expand 是否展开
+ */
+function setExpandOrCollapse(expand: boolean) {
+  tableApi.grid?.setAllTreeExpand(expand);
+}
+
+function handlePermissionChange(row: any) {
+  // 节点关联
+  if (association.value) {
+    const checkedPermissions = row.permissions.filter(
+      (item: any) => item.checked === true,
+    );
+    // 有一条选中 则整个行选中
+    if (checkedPermissions.length > 0) {
+      tableApi.grid.setCheckboxRow(row, true);
+    }
+    // 无任何选中 则整个行不选中
+    if (checkedPermissions.length === 0) {
+      tableApi.grid.setCheckboxRow(row, false);
+    }
+  }
+  // 节点独立 不处理
+}
+
+/**
+ * 获取勾选的key
+ * @param records 行记录
+ */
+function getKeys(records: MenuPermissionOption[], handleChildren: boolean) {
+  const allKeys: (number | string)[] = [];
+  records.forEach((item) => {
+    if (item.children && item.children.length > 0) {
+      const keys = getKeys(
+        item.children as MenuPermissionOption[],
+        handleChildren,
+      );
+      allKeys.push(...keys);
+    } else {
+      // 当前id
+      handleChildren && allKeys.push(item.id);
+      // 权限id
+      if (item.permissions && item.permissions.length > 0) {
+        const ids = item.permissions
+          .filter((m) => m.checked === true)
+          .map((m) => m.id);
+        allKeys.push(...ids);
+      }
+    }
+  });
+  return uniq(allKeys);
+}
+
+/**
+ * 获取选中的key
+ */
+function getCheckedKeys() {
+  // 节点关联
+  if (association.value) {
+    const records = tableApi.grid.getCheckboxRecords();
+    console.log(records);
+    // 子节点
+    const nodeKeys = getKeys(records, true);
+    // 父节点
+    const parentIds = findGroupParentIds(props.menus, nodeKeys as number[]);
+    const realKeys = uniq([...parentIds, ...nodeKeys]);
+    console.log(realKeys);
+    return realKeys;
+  }
+  // 节点独立
+
+  // 勾选的行
+  const records = tableApi.grid.getCheckboxRecords();
+  // 全部数据 用于获取permissions
+  const allRecords = tableApi.grid.getData();
+  const ids = records.map((item) => item.id);
+  const permissions = getKeys(allRecords, false);
+  const allIds = uniq([...ids, ...permissions]);
+  console.log(allIds);
+  return allIds;
+}
+
+defineExpose({
+  getCheckedKeys,
+});
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <Alert message="beta功能" type="warning" show-icon />
+    <BasicTable>
+      <template #toolbar-actions>
+        <RadioGroup
+          v-model:value="association"
+          :options="options"
+          button-style="solid"
+          option-type="button"
+          @change="handleAssociationChange"
+        />
+      </template>
+      <template #toolbar-tools>
+        <Space>
+          <a-button @click="getCheckedKeys">测试expose</a-button>
+          <a-button @click="setExpandOrCollapse(false)">
+            {{ $t('pages.common.collapse') }}
+          </a-button>
+          <a-button @click="setExpandOrCollapse(true)">
+            {{ $t('pages.common.expand') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #permissions="{ row }">
+        <div class="flex flex-wrap gap-3">
+          <Checkbox
+            v-for="permission in row.permissions"
+            :key="permission.id"
+            v-model:checked="permission.checked"
+            @change="() => handlePermissionChange(row)"
+          >
+            {{ permission.label }}
+          </Checkbox>
+        </div>
+      </template>
+    </BasicTable>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/system/role-beta/data.tsx b/apps/web-antd/src/views/system/role-beta/data.tsx
new file mode 100644
index 00000000..b7cdf6b7
--- /dev/null
+++ b/apps/web-antd/src/views/system/role-beta/data.tsx
@@ -0,0 +1,224 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { Tag } from 'ant-design-vue';
+
+/**
+ * authScopeOptions user也会用到
+ */
+export const authScopeOptions = [
+  { color: 'green', label: '全部数据权限', value: '1' },
+  { color: 'default', label: '自定数据权限', value: '2' },
+  { color: 'orange', label: '本部门数据权限', value: '3' },
+  { color: 'cyan', label: '本部门及以下数据权限', value: '4' },
+  { color: 'error', label: '仅本人数据权限', value: '5' },
+  { color: 'default', label: '部门及以下或本人数据权限', value: '6' },
+];
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'roleName',
+    label: '角色名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'roleKey',
+    label: '权限字符',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '角色名称',
+    field: 'roleName',
+  },
+  {
+    title: '权限字符',
+    field: 'roleKey',
+    slots: {
+      default: ({ row }) => {
+        return <Tag color="processing">{row.roleKey}</Tag>;
+      },
+    },
+  },
+  {
+    title: '数据权限',
+    field: 'dataScope',
+    slots: {
+      default: ({ row }) => {
+        const found = authScopeOptions.find(
+          (item) => item.value === row.dataScope,
+        );
+        if (found) {
+          return <Tag color={found.color}>{found.label}</Tag>;
+        }
+        return <Tag>{row.dataScope}</Tag>;
+      },
+    },
+  },
+  {
+    title: '排序',
+    field: 'roleSort',
+  },
+  {
+    title: '状态',
+    field: 'status',
+    slots: { default: 'status' },
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'roleId',
+    label: '角色ID',
+  },
+  {
+    component: 'Input',
+    fieldName: 'roleName',
+    label: '角色名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'roleKey',
+    help: '如: test simpleUser等',
+    label: '权限标识',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'roleSort',
+    label: '角色排序',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      getPopupContainer,
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    help: '修改后, 拥有该角色的用户将自动下线.',
+    label: '角色状态',
+    rules: 'required',
+  },
+  {
+    component: 'Radio',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'menuCheckStrictly',
+    label: '菜单权限',
+  },
+  {
+    component: 'Input',
+    defaultValue: [],
+    fieldName: 'menuIds',
+    label: '菜单权限',
+    formItemClass: 'col-span-2',
+  },
+  {
+    component: 'Textarea',
+    defaultValue: '',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline col-span-2',
+    label: '备注',
+  },
+];
+
+export const authModalSchemas: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'roleId',
+    label: '角色ID',
+  },
+  {
+    component: 'Radio',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'deptCheckStrictly',
+    label: 'deptCheckStrictly',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'roleName',
+    label: '角色名称',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'roleKey',
+    label: '权限标识',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      options: authScopeOptions,
+    },
+    fieldName: 'dataScope',
+    help: '更改后需要用户重新登录才能生效',
+    label: '权限范围',
+  },
+  {
+    component: 'TreeSelect',
+    defaultValue: [],
+    dependencies: {
+      show: (values) => values.dataScope === '2',
+      triggerFields: ['dataScope'],
+    },
+    fieldName: 'deptIds',
+    formItemClass: 'items-baseline',
+    help: '更改后立即生效',
+    label: '部门权限',
+  },
+];
diff --git a/apps/web-antd/src/views/system/role-beta/index.vue b/apps/web-antd/src/views/system/role-beta/index.vue
new file mode 100644
index 00000000..73c763b1
--- /dev/null
+++ b/apps/web-antd/src/views/system/role-beta/index.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VbenFormProps } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import {
+  roleChangeStatus,
+  roleExport,
+  roleList,
+  roleRemove,
+} from '#/api/system/role';
+import { TableSwitch } from '#/components/table';
+import { commonDownloadExcel } from '#/utils/file/download';
+import { useAccess } from '@vben/access';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+import {
+  Dropdown,
+  Menu,
+  MenuItem,
+  Modal,
+  Popconfirm,
+  Space,
+} from 'ant-design-vue';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { columns, querySchema } from './data';
+import roleAuthModal from './role-auth-modal.vue';
+import roleDrawer from './role-drawer.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+    checkMethod: ({ row }) => row.roleId !== 1,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await roleList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'roleId',
+  },
+  id: 'system-role-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+const [RoleDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: roleDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+async function handleEdit(record: Recordable<any>) {
+  drawerApi.setData({ id: record.roleId });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Recordable<any>) {
+  await roleRemove(row.roleId);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.roleId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await roleRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(roleExport, '角色数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => hasAccessByRoles(['superadmin']));
+
+const [RoleAuthModal, authModalApi] = useVbenModal({
+  connectedComponent: roleAuthModal,
+});
+
+function handleAuthEdit(record: Recordable<any>) {
+  authModalApi.setData({ id: record.roleId });
+  authModalApi.open();
+}
+
+const router = useRouter();
+function handleAssignRole(record: Recordable<any>) {
+  router.push(`/system/role-assign/${record.roleId}`);
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="角色列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:role:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['system:role:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:role:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <TableSwitch
+          v-model="row.status"
+          :api="() => roleChangeStatus(row)"
+          :disabled="
+            row.roleId === 1 ||
+            row.roleKey === 'admin' ||
+            !hasAccessByCodes(['system:role:edit'])
+          "
+          :reload="() => tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <!-- 租户管理员不可修改admin角色 防止误操作 -->
+        <!-- 超级管理员可通过租户切换来操作租户管理员角色 -->
+        <template
+          v-if="!row.superAdmin && (row.roleKey !== 'admin' || isSuperAdmin)"
+        >
+          <Space>
+            <ghost-button
+              v-access:code="['system:role:edit']"
+              @click.stop="handleEdit(row)"
+            >
+              {{ $t('pages.common.edit') }}
+            </ghost-button>
+            <Popconfirm
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              title="确认删除？"
+              @confirm="handleDelete(row)"
+            >
+              <ghost-button
+                danger
+                v-access:code="['system:role:remove']"
+                @click.stop=""
+              >
+                {{ $t('pages.common.delete') }}
+              </ghost-button>
+            </Popconfirm>
+          </Space>
+          <Dropdown
+            :get-popup-container="getVxePopupContainer"
+            placement="bottomRight"
+          >
+            <template #overlay>
+              <Menu>
+                <MenuItem key="1" @click="handleAuthEdit(row)">
+                  数据权限
+                </MenuItem>
+                <MenuItem key="2" @click="handleAssignRole(row)">
+                  分配用户
+                </MenuItem>
+              </Menu>
+            </template>
+            <a-button size="small" type="link">
+              {{ $t('pages.common.more') }}
+            </a-button>
+          </Dropdown>
+        </template>
+      </template>
+    </BasicTable>
+    <RoleDrawer @reload="tableApi.query()" />
+    <RoleAuthModal @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/system/role-beta/role-auth-modal.vue b/apps/web-antd/src/views/system/role-beta/role-auth-modal.vue
new file mode 100644
index 00000000..4e184a8d
--- /dev/null
+++ b/apps/web-antd/src/views/system/role-beta/role-auth-modal.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { useVbenForm } from '#/adapter/form';
+import { roleDataScope, roleDeptTree, roleInfo } from '#/api/system/role';
+import { TreeSelectPanel } from '#/components/tree';
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+import { ref } from 'vue';
+
+import { authModalSchemas } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'vertical',
+  schema: authModalSchemas(),
+  showDefaultActions: false,
+});
+
+const deptTree = ref<any[]>([]);
+async function setupDeptTree(id: number | string) {
+  const resp = await roleDeptTree(id);
+  formApi.setFieldValue('deptIds', resp.checkedKeys);
+  // 设置菜单信息
+  deptTree.value = resp.depts;
+}
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id: number | string };
+
+    setupDeptTree(id);
+    const record = await roleInfo(id);
+    await formApi.setValues(record);
+
+    modalApi.modalLoading(false);
+  },
+});
+
+/**
+ * 这里拿到的是一个数组ref
+ */
+const deptSelectRef = ref();
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    // 不为自定义权限的话 删除部门id
+    if (data.dataScope === '2') {
+      const deptIds = deptSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+      data.deptIds = deptIds;
+    } else {
+      data.deptIds = [];
+    }
+    await roleDataScope(data);
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+/**
+ * 通过回调更新 无法通过v-model
+ * @param value 菜单选择是否严格模式
+ */
+function handleCheckStrictlyChange(value: boolean) {
+  formApi.setFieldValue('deptCheckStrictly', value);
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    class="min-h-[600px] w-[550px]"
+    title="分配权限"
+  >
+    <BasicForm>
+      <template #deptIds="slotProps">
+        <TreeSelectPanel
+          ref="deptSelectRef"
+          v-bind="slotProps"
+          :check-strictly="formApi.form.values.deptCheckStrictly"
+          :expand-all-on-init="true"
+          :tree-data="deptTree"
+          @check-strictly-change="handleCheckStrictlyChange"
+        />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
diff --git a/apps/web-antd/src/views/system/role-beta/role-drawer.vue b/apps/web-antd/src/views/system/role-beta/role-drawer.vue
new file mode 100644
index 00000000..8c19094c
--- /dev/null
+++ b/apps/web-antd/src/views/system/role-beta/role-drawer.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { useVbenForm } from '#/adapter/form';
+import { menuTreeSelect, roleMenuTreeSelect } from '#/api/system/menu';
+import { roleAdd, roleInfo, roleUpdate } from '#/api/system/role';
+import { MenuSelectTable } from '#/components/tree';
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, eachTree } from '@vben/utils';
+import { computed, ref } from 'vue';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2 gap-x-4',
+});
+
+const menuTree = ref<any[]>([]);
+async function setupMenuTree(id?: number | string) {
+  if (id) {
+    const resp = await roleMenuTreeSelect(id);
+    formApi.setFieldValue('menuIds', resp.checkedKeys);
+    const menus = resp.menus;
+    // i18n处理
+    eachTree(menus, (node) => {
+      node.label = $t(node.label);
+    });
+    // 设置菜单信息
+    menuTree.value = resp.menus;
+  } else {
+    const resp = await menuTreeSelect();
+    formApi.setFieldValue('menuIds', []);
+    // i18n处理
+    eachTree(resp, (node) => {
+      node.label = $t(node.label);
+    });
+    // 设置菜单信息
+    menuTree.value = resp;
+  }
+}
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+    const { id } = drawerApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await roleInfo(id);
+      await formApi.setValues(record);
+    }
+    // init菜单 注意顺序要放在赋值record之后 内部watch会依赖record
+    await setupMenuTree(id);
+
+    drawerApi.drawerLoading(false);
+  },
+});
+
+/**
+ * 这里拿到的是一个数组ref
+ */
+const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
+
+async function handleConfirm() {
+  try {
+    drawerApi.drawerLoading(true);
+    const { valid } = await formApi.validate();
+    console.log(menuSelectRef.value);
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    const menuIds = menuSelectRef.value?.getCheckedKeys() ?? [];
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    data.menuIds = menuIds;
+    await (isUpdate.value ? roleUpdate(data) : roleAdd(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.drawerLoading(false);
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+/**
+ * 通过回调更新 无法通过v-model
+ * @param value 菜单选择是否严格模式
+ */
+function handleMenuCheckStrictlyChange(value: boolean) {
+  formApi.setFieldValue('menuCheckStrictly', value);
+}
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
+    <BasicForm>
+      <template #menuIds="slotProps">
+        <div class="h-[400px] w-full">
+          <!-- check-strictly为readonly 不能通过v-model绑定 -->
+          <MenuSelectTable
+            ref="menuSelectRef"
+            v-model:checked-keys="slotProps.value"
+            :association="formApi.form.values.menuCheckStrictly"
+            :menus="menuTree"
+            @update:association="handleMenuCheckStrictlyChange"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/apps/web-antd/src/views/演示使用自行删除/menu/index.vue b/apps/web-antd/src/views/演示使用自行删除/menu/index.vue
index 06ee7a1f..7b7b2b5a 100644
--- a/apps/web-antd/src/views/演示使用自行删除/menu/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/menu/index.vue
@@ -1,230 +1,27 @@
-<script setup lang="tsx">
-import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { Recordable } from '@vben/types';
-import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+<script setup lang="ts">
+import type { MenuOption } from '#/api/system/menu/model';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { menuList, menuRemove } from '#/api/system/menu';
-import { useAccess } from '@vben/access';
-import { Fallback, Page } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { eachTree, getVxePopupContainer, listToTree } from '@vben/utils';
-import { Checkbox, Popconfirm, Space } from 'ant-design-vue';
-import { computed } from 'vue';
+import { roleMenuTreeSelect } from '#/api/system/menu';
+import { MenuSelectTable } from '#/components/tree';
+import { Page } from '@vben/common-ui';
+import { onMounted, ref, shallowRef } from 'vue';
 
-/**
- * 不要问为什么有两个根节点 v-if会控制只会渲染一个
- */
-type Permission = {
-  checked: boolean;
-  menuId: string;
-  name: string;
-};
+const checkedKeys = ref<number[]>([]);
+const menus = shallowRef<MenuOption[]>([]);
 
-const gridOptions: VxeGridProps = {
-  columns: [
-    {
-      title: '菜单名称',
-      field: 'menuName',
-      treeNode: true,
-      width: 200,
-      slots: {
-        // 需要i18n支持 否则返回原始值
-        default: ({ row }) => {
-          function onChange(e: CheckboxChangeEvent) {
-            console.log(e);
-            const { checked } = e.target;
-            if (checked) {
-              row?.permissions?.forEach?.((item: Permission) => {
-                item.checked = true;
-              });
-            } else {
-              row?.permissions?.forEach?.((item: Permission) => {
-                item.checked = false;
-              });
-            }
-          }
-
-          return (
-            <div>
-              <Checkbox onChange={onChange} v-model:checked={row.checked}>
-                {$t(row.menuName)}
-              </Checkbox>
-            </div>
-          );
-        },
-      },
-    },
-    {
-      title: '权限标识',
-      field: 'permissions',
-      slots: {
-        default: ({ row }) => {
-          const permissions: Permission[] = row.permissions;
-          function onChange() {
-            const allChecked = (row.permissions as any[]).every(
-              (item) => item.checked,
-            );
-            if (allChecked) {
-              row.checked = true;
-            }
-
-            const allUnChecked = (row.permissions as any[]).every(
-              (item) => !item.checked,
-            );
-            if (allUnChecked) {
-              row.checked = false;
-            }
-          }
-
-          return (
-            <div>
-              {permissions?.map((item) => (
-                <Checkbox onChange={onChange} v-model:checked={item.checked}>
-                  {item.name}
-                </Checkbox>
-              ))}
-            </div>
-          );
-        },
-      },
-    },
-  ],
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {
-    enabled: false,
-  },
-  proxyConfig: {
-    ajax: {
-      query: async (_, formValues = {}) => {
-        const resp = await menuList({
-          ...formValues,
-        });
-        const treeData = listToTree(resp, { id: 'menuId' });
-
-        eachTree(treeData, (node) => {
-          if (node.menuType === 'C' && node.children?.length > 0) {
-            node.permissions = (node.children as any[]).map((item) => ({
-              name: item?.menuName,
-              menuId: item.menuId,
-              checked: true,
-            }));
-            Reflect.deleteProperty(node, 'children');
-          }
-          node.checked = true;
-        });
-
-        return { rows: treeData };
-      },
-    },
-  },
-  toolbarConfig: {
-    // 自定义列
-    custom: false,
-    // 最大化
-    zoom: false,
-    // 刷新
-    refresh: false,
-  },
-  rowConfig: {
-    isHover: true,
-    keyField: 'menuId',
-  },
-  /**
-   * 开启虚拟滚动
-   * 数据量小可以选择关闭
-   * 如果遇到样式问题(空白、错位 滚动等)可以选择关闭虚拟滚动
-   */
-  scrollY: {
-    enabled: true,
-    gt: 0,
-  },
-  treeConfig: {
-    parentField: 'parentId',
-    rowField: 'menuId',
-    transform: false,
-  },
-  id: 'system-menu-index',
-  showOverflow: true,
-};
-
-const [BasicTable, tableApi] = useVbenVxeGrid({
-  gridOptions,
-  gridEvents: {
-    cellDblclick: (e: any) => {
-      const { row = {} } = e;
-      if (!row?.children) {
-        return;
-      }
-      const isExpanded = row?.expand;
-      tableApi.grid.setTreeExpand(row, !isExpanded);
-      row.expand = !isExpanded;
-    },
-    // 需要监听使用箭头展开的情况 否则展开/折叠的数据不一致
-    toggleTreeExpand: (e: any) => {
-      const { row = {}, expanded } = e;
-      row.expand = expanded;
-    },
-  },
-});
-
-async function handleDelete(row: Recordable<any>) {
-  await menuRemove(row.menuId);
-  await tableApi.query();
-}
-
-/**
- * 全部展开/折叠
- * @param expand 是否展开
- */
-function setExpandOrCollapse(expand: boolean) {
-  eachTree(tableApi.grid.getData(), (item) => (item.expand = expand));
-  tableApi.grid?.setAllTreeExpand(expand);
-}
-
-/**
- * 与后台逻辑相同
- * 只有租户管理和超级管理能访问菜单管理
- */
-const { hasAccessByRoles } = useAccess();
-const isAdmin = computed(() => {
-  return hasAccessByRoles(['admin', 'superadmin']);
+onMounted(async () => {
+  const resp = await roleMenuTreeSelect(3);
+  menus.value = resp.menus;
+  checkedKeys.value = resp.checkedKeys;
 });
 </script>
 
 <template>
-  <Page v-if="isAdmin" :auto-content-height="true">
-    <BasicTable table-title="菜单列表" table-title-help="双击展开/收起子菜单">
-      <template #toolbar-tools>
-        <Space>
-          <a-button @click="setExpandOrCollapse(false)">
-            {{ $t('pages.common.collapse') }}
-          </a-button>
-          <a-button @click="setExpandOrCollapse(true)">
-            {{ $t('pages.common.expand') }}
-          </a-button>
-        </Space>
-      </template>
-      <template #action="{ row }">
-        <Space>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <ghost-button
-              danger
-              v-access:code="['system:menu:remove']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </ghost-button>
-          </Popconfirm>
-        </Space>
-      </template>
-    </BasicTable>
+  <Page :auto-content-height="true">
+    <MenuSelectTable
+      :menus="menus"
+      v-model:checked-keys="checkedKeys"
+      :association="true"
+    />
   </Page>
-  <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
 </template>