diff --git a/apps/web-antd/src/api/system/role/index.ts b/apps/web-antd/src/api/system/role/index.ts
new file mode 100644
index 00000000..92bfde01
--- /dev/null
+++ b/apps/web-antd/src/api/system/role/index.ts
@@ -0,0 +1,123 @@
+import type { DeptResp, Role } from './model';
+
+import type { ID, IDS, PageQuery } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  roleAllocatedList = '/system/role/authUser/allocatedList',
+  roleAuthCancel = '/system/role/authUser/cancel',
+  roleAuthCancelAll = '/system/role/authUser/cancelAll',
+  roleAuthSelectAll = '/system/role/authUser/selectAll',
+  roleChangeStatus = '/system/role/changeStatus',
+  roleDataScope = '/system/role/dataScope',
+  roleDeptTree = '/system/role/deptTree',
+  roleExport = '/system/role/export',
+  roleList = '/system/role/list',
+  roleOptionSelect = '/system/role/optionselect',
+  roleUnallocatedList = '/system/role/authUser/unallocatedList',
+  root = '/system/role',
+}
+
+export function roleList(params?: PageQuery) {
+  return requestClient.get<Role[]>(Api.roleList, { params });
+}
+
+export function roleExport(data: any) {
+  return commonExport(Api.roleExport, data);
+}
+
+export function roleInfo(roleId: ID) {
+  return requestClient.get<Role>(`${Api.root}/${roleId}`);
+}
+
+export function roleAdd(data: any) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+export function roleUpdate(data: any) {
+  return requestClient.putWithMsg<void>(Api.root, data);
+}
+
+export function roleChangeStatus(data: any) {
+  return requestClient.putWithMsg<void>(Api.roleChangeStatus, data);
+}
+
+export function roleRemove(roleIds: IDS) {
+  return requestClient.deleteWithMsg<void>(`${Api.root}/${roleIds}`);
+}
+
+/**
+ * 更新数据权限
+ * @param data
+ * @returns void
+ */
+export function roleDataScope(data: any) {
+  return requestClient.putWithMsg<void>(Api.roleDataScope, data);
+}
+
+export function roleOptionSelect(params?: any) {
+  return requestClient.get(Api.roleOptionSelect, { params });
+}
+
+export function roleAllocatedList(params: any) {
+  return requestClient.get(Api.roleAllocatedList, params);
+}
+
+/**
+ * 未授权的用户
+ * @param params
+ * @returns void
+ */
+export function roleUnallocatedList(params: any) {
+  return requestClient.get(Api.roleUnallocatedList, { params });
+}
+
+/**
+ * 取消授权
+ * @param data {userId: 2, roleId: "2"}
+ * @returns void
+ */
+export function roleAuthCancel(data: any) {
+  return requestClient.putWithMsg<void>(Api.roleAuthCancel, data);
+}
+
+/**
+ * 批量取消授权
+ * @param roleId
+ * @param userIds
+ * @returns void
+ */
+export function roleAuthCancelAll(
+  roleId: number | string,
+  userIds: number[] | string[],
+) {
+  return requestClient.putWithMsg<void>(
+    `${Api.roleAuthCancelAll}?roleId=${roleId}&userIds=${userIds.join(',')}`,
+  );
+}
+
+/**
+ * 批量授权用户
+ * @param roleId
+ * @param userIds
+ * @returns void
+ */
+export function roleSelectAll(
+  roleId: number | string,
+  userIds: number[] | string[],
+) {
+  return requestClient.putWithMsg<void>(
+    `${Api.roleAuthSelectAll}?roleId=${roleId}&userIds=${userIds.join(',')}`,
+  );
+}
+
+/**
+ * 部门树
+ * @param roleId 角色id
+ * @returns DeptResp
+ */
+export function roleDeptTree(roleId: ID) {
+  return requestClient.get<DeptResp>(`${Api.roleDeptTree}/${roleId}`);
+}
diff --git a/apps/web-antd/src/api/system/role/model.d.ts b/apps/web-antd/src/api/system/role/model.d.ts
new file mode 100644
index 00000000..35aab961
--- /dev/null
+++ b/apps/web-antd/src/api/system/role/model.d.ts
@@ -0,0 +1,29 @@
+export interface Role {
+  roleId: number;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly: boolean;
+  deptCheckStrictly: boolean;
+  status: string;
+  remark: string;
+  createTime: string;
+  // 用户是否存在此角色标识 默认不存在
+  flag: boolean;
+  superAdmin: boolean;
+}
+
+export interface DeptOption {
+  id: number;
+  parentId: number;
+  label: string;
+  weight: number;
+  children: DeptOption[];
+  key: string; // 实际上不存在 ide报错
+}
+
+export interface DeptResp {
+  checkedKeys: number[];
+  depts: DeptOption[];
+}
diff --git a/apps/web-antd/src/views/system/role/data.tsx b/apps/web-antd/src/views/system/role/data.tsx
index cc4cd230..c29e8a3b 100644
--- a/apps/web-antd/src/views/system/role/data.tsx
+++ b/apps/web-antd/src/views/system/role/data.tsx
@@ -47,3 +47,72 @@ export const querySchema: FormSchemaGetter = () => [
     label: '创建时间',
   },
 ];
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'roleId',
+    label: '角色ID',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'roleName',
+    label: '角色名称',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'roleKey',
+    help: '如: test simpleUser等',
+    label: '权限标识',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'roleSort',
+    label: '角色排序',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      placeholder: '请选择',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    help: '修改后, 拥有该角色的用户将自动下线.',
+    label: '角色状态',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    defaultValue: [],
+    fieldName: 'menuIds',
+    label: '菜单权限',
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    defaultValue: '',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
diff --git a/apps/web-antd/src/views/system/role/index.vue b/apps/web-antd/src/views/system/role/index.vue
index a778a7db..a5c89b22 100644
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
 
-import { Card } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Card, Table } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter';
+import { roleList } from '#/api/system/role';
 
 import { querySchema } from './data';
+import roleDrawer from './role-drawer.vue';
 
 const [QueryForm] = useVbenForm({
   // 默认展开
@@ -25,12 +32,76 @@ const [QueryForm] = useVbenForm({
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
 });
+
+const [RoleDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: roleDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({});
+  drawerApi.open();
+}
+
+const columns = [
+  {
+    dataIndex: 'roleName',
+    title: '角色名称',
+  },
+  {
+    dataIndex: 'roleKey',
+    title: '权限字符',
+  },
+  {
+    dataIndex: 'dataScope',
+    title: '数据权限',
+  },
+  {
+    dataIndex: 'roleSort',
+    title: '排序',
+  },
+  {
+    dataIndex: 'status',
+    title: '状态',
+  },
+  {
+    dataIndex: 'createTime',
+    title: '创建时间',
+  },
+  {
+    dataIndex: 'action',
+    title: '操作',
+  },
+];
+
+const dataSource = ref([]);
+onMounted(async () => {
+  const resp = await roleList();
+  dataSource.value = (resp as any).rows;
+});
+
+function handleEdit(record: Recordable<any>) {
+  drawerApi.setData({ id: record.roleId });
+  drawerApi.open();
+}
 </script>
 
 <template>
-  <Page content-class="flex lg:flex-row flex-col gap-[16px]">
+  <Page content-class="flex flex-col gap-[16px]">
     <Card class="flex-1">
       <QueryForm />
     </Card>
+    <a-button @click="handleAdd">{{ $t('pages.common.add') }}</a-button>
+    <RoleDrawer />
+    <div class="bg-background rounded-lg p-[16px]">
+      <Table :columns="columns" :data-source="dataSource">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'action'">
+            <a-button size="small" type="primary" @click="handleEdit(record)">
+              编辑
+            </a-button>
+          </template>
+        </template>
+      </Table>
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/role/menu-select.vue b/apps/web-antd/src/views/system/role/menu-select.vue
new file mode 100644
index 00000000..272771a7
--- /dev/null
+++ b/apps/web-antd/src/views/system/role/menu-select.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+import type { DataNode } from 'ant-design-vue/es/tree';
+import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
+
+import type { Menu } from '#/api/system/menu/model';
+
+import { computed, onMounted, type PropType, ref } from 'vue';
+
+import { filter, listToTree } from '@vben/utils';
+
+import { Checkbox, Tree } from 'ant-design-vue';
+
+import { menuList } from '#/api/system/menu';
+
+import { excludeIds } from '../tenantPackage/data';
+
+defineOptions({ inheritAttrs: false });
+
+const expandStatus = ref(false);
+const selectAllStatus = ref(false);
+const association = ref(true);
+
+const associationText = computed(() => {
+  return association.value ? '父子节点关联' : '父子节点独立';
+});
+
+const menuTree = ref<DataNode[]>([]);
+// checkable 状态下节点选择完全受控（父子节点选中状态不再关联）
+const menuCheckStrictly = ref<boolean>(false);
+// const checkedKeys = ref<string[]>([]);
+const checkedKeys = defineModel('value', {
+  default: () => [],
+  type: Array as PropType<(number | string)[]>,
+});
+// 所有节点的ID
+const responseAllKeys = ref<any[]>([]);
+
+/** 已经选择的所有节点  包括子/父节点 */
+// const checkedMenuKeys = ref<(number | string)[]>([]);
+
+const checkedMenuKeys = defineModel('none', {
+  default: () => [],
+  type: Array as PropType<(number | string)[]>,
+});
+/**
+ *
+ * @param checkedKeys 已经选中的子节点的ID
+ * @param info info.halfCheckedKeys为父节点的ID
+ */
+type CheckedState<T = number | string> =
+  | { checked: T[]; halfChecked: T[] }
+  | T[];
+function handleChecked(checkedKeys: CheckedState, info: CheckInfo) {
+  // 数组的话为节点关联
+  if (Array.isArray(checkedKeys)) {
+    const halfCheckedKeys: number[] = (info.halfCheckedKeys || []) as number[];
+    checkedMenuKeys.value = [...halfCheckedKeys, ...checkedKeys];
+  } else {
+    checkedMenuKeys.value = [...checkedKeys.checked];
+  }
+}
+
+/**
+ * 不显示租户相关菜单  分配了也没法使用
+ * @param menuTree menus
+ */
+function transformMenu(menuTree: Menu[]) {
+  return filter(
+    menuTree,
+    (item) => {
+      if (excludeIds.includes(item.menuId)) {
+        return false;
+      }
+      return true;
+    },
+    { id: 'menuId', pid: 'parentId', children: 'children' },
+  );
+}
+
+function handleExpandChange(e: CheckboxChangeEvent) {
+  // 这个用于展示
+  checkedKeys.value = e.target.checked ? responseAllKeys.value : [];
+  // 这个用于提交
+  checkedMenuKeys.value = e.target.checked ? responseAllKeys.value : [];
+}
+
+onMounted(async () => {
+  const resp = await menuList();
+  // 去除租户相关菜单(分配了也无权限)
+  const afterTransform = transformMenu(resp);
+  responseAllKeys.value = afterTransform.map((item) => item.menuId);
+  console.log(responseAllKeys.value);
+  const tree = listToTree(afterTransform, { id: 'menuId' });
+  menuTree.value = tree;
+});
+
+function test() {
+  console.log(checkedMenuKeys.value);
+}
+</script>
+
+<template>
+  <div class="bg-background w-full rounded-lg border-[1px] p-[12px]">
+    <div class="flex items-center gap-2 border-b-[1px] pb-2">
+      <span>节点状态: </span>
+      <span
+        :class="[association ? 'text-primary' : 'text-red-500']"
+        class="font-semibold"
+      >
+        {{ associationText }}
+      </span>
+    </div>
+    <div
+      class="flex flex-wrap items-center justify-between border-b-[1px] py-2"
+    >
+      <Checkbox v-model:checked="expandStatus">展开/折叠全部</Checkbox>
+      <Checkbox v-model:checked="selectAllStatus" @change="handleExpandChange">
+        全选/取消全选
+      </Checkbox>
+      <Checkbox v-model:checked="association">父子节点关联</Checkbox>
+    </div>
+    <div class="py-2">
+      <Tree
+        v-if="menuTree.length > 0"
+        v-model:check-strictly="menuCheckStrictly"
+        v-model:checked-keys="checkedKeys"
+        :checkable="true"
+        :field-names="{ title: 'menuName', key: 'menuId' }"
+        :selectable="false"
+        :tree-data="menuTree"
+        @check="handleChecked"
+      />
+    </div>
+    <a-button @click="test"> 测试 </a-button>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/system/role/role-drawer.vue b/apps/web-antd/src/views/system/role/role-drawer.vue
new file mode 100644
index 00000000..26b94be6
--- /dev/null
+++ b/apps/web-antd/src/views/system/role/role-drawer.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter';
+import { roleMenuTreeSelect } from '#/api/system/menu';
+import { roleAdd, roleInfo, roleUpdate } from '#/api/system/role';
+
+import { drawerSchema } from './data';
+import MenuSelect from './menu-select.vue';
+
+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-2',
+  },
+  layout: 'vertical',
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function setupMenuTree(id: number | string) {
+  const resp = await roleMenuTreeSelect(id);
+  console.log(resp);
+  formApi.setFieldValue('menuIds', resp.checkedKeys);
+}
+
+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);
+      for (const key in record) {
+        await formApi.setFieldValue(key, record[key as keyof typeof record]);
+      }
+      // 设置选中的菜单
+      await setupMenuTree(id);
+    }
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.drawerLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    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();
+}
+
+async function test() {
+  const data = await formApi.getValues();
+  console.log(data);
+}
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #menuIds="slotProps">
+        <MenuSelect v-bind="slotProps" />
+      </template>
+    </BasicForm>
+    <a-button @click="test">测试</a-button>
+  </BasicDrawer>
+</template>
+
+<style lang="scss" scoped>
+/**
+自定义组件校验失败样式
+*/
+:deep(.form-valid-error .ant-input[name='clientSecret']) {
+  border-color: hsl(var(--destructive));
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+}
+</style>