diff --git a/packages/client/src/acl/ACLShortcut.tsx b/packages/client/src/acl/ACLShortcut.tsx
index dc930d74f..cc408d929 100644
--- a/packages/client/src/acl/ACLShortcut.tsx
+++ b/packages/client/src/acl/ACLShortcut.tsx
@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
 import { LockOutlined } from '@ant-design/icons';
-import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
 import { ISchema, useForm } from '@formily/react';
+import { uid } from '@formily/shared';
+import React, { useState } from 'react';
 import { PluginManager } from '../plugin-manager';
+import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
+import { RoleTable } from './RolePermissionManager';
 
 const useCloseAction = () => {
   const { setVisible } = useActionVisible();
@@ -20,28 +22,28 @@ const useCloseAction = () => {
 const schema: ISchema = {
   type: 'object',
   properties: {
-    drawer1: {
+    [uid()]: {
       'x-component': 'Action.Drawer',
       type: 'void',
       title: 'Drawer Title',
       properties: {
         hello1: {
-          'x-content': 'Hello',
-          title: 'T1',
-        },
-        footer1: {
-          'x-component': 'Action.Drawer.Footer',
           type: 'void',
-          properties: {
-            close1: {
-              title: 'Close',
-              'x-component': 'Action',
-              'x-component-props': {
-                useAction: '{{ useCloseAction }}',
-              },
-            },
-          },
+          'x-component': 'RoleTable',
         },
+        // footer1: {
+        //   'x-component': 'Action.Drawer.Footer',
+        //   type: 'void',
+        //   properties: {
+        //     close1: {
+        //       title: 'Close',
+        //       'x-component': 'Action',
+        //       'x-component-props': {
+        //         useAction: '{{ useCloseAction }}',
+        //       },
+        //     },
+        //   },
+        // },
       },
     },
   },
@@ -58,7 +60,7 @@ export const ACLShortcut = () => {
           setVisible(true);
         }}
       />
-      
+      
     
   );
 };
diff --git a/packages/client/src/acl/RolePermissionManager.tsx b/packages/client/src/acl/RolePermissionManager.tsx
index 455d32241..ae4b4b7b4 100644
--- a/packages/client/src/acl/RolePermissionManager.tsx
+++ b/packages/client/src/acl/RolePermissionManager.tsx
@@ -1 +1,233 @@
+import { Button, Checkbox, Divider, Drawer, Space, Table, Tabs, Tag, Typography } from 'antd';
+import React, { useState } from 'react';
+import { ScopeRecordPicker } from './ScopeRecordPicker';
+
 export function RoleManager() {}
+
+export const RoleTable = () => {
+  return (
+    
+      
+        
+        
+      
+      
 value && '是',
+          },
+          {
+            title: '操作',
+            dataIndex: 'actions',
+            key: 'actions',
+            render: () => (
+              }>
+                
+                Edit role
+                Delete
+              
+            ),
+          },
+        ]}
+        dataSource={[
+          {
+            name: 'root',
+            title: '管理员',
+            description: '描述',
+          },
+          {
+            name: 'member',
+            title: '普通成员',
+            description: '描述',
+            default: true,
+          },
+        ]}
+      />
+    
+  );
+};
+
+const ConfigurePermissions = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+       setVisible(true)}>Configure
+       setVisible(false)}>
+        
+      
+    >
+  );
+};
+
+export const RolePermissions = () => {
+  return (
+    
+      
+      
+         (value ? 单独配置 : 通用配置),
+            },
+            {
+              title: '操作',
+              dataIndex: 'actions',
+              key: 'actions',
+              render: () => ,
+            },
+          ]}
+          dataSource={[
+            {
+              title: '用户',
+              name: 'users',
+            },
+          ]}
+        />
+      
+      
+        
+                   允许访问
+                >
+              ),
+              dataIndex: 'accessible',
+              key: 'accessible',
+              render: () => ,
+            },
+          ]}
+          dataSource={[
+            {
+              title: '页面1',
+            },
+            {
+              title: '页面2',
+              accessible: true,
+            },
+          ]}
+        />
+      
+    
+  );
+};
+
+const ResourceActionsConfigure = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+       setVisible(true)}>Configure
+       setVisible(false)}
+        footer={
+          
+            
+            
+          
+        }
+      >
+        
+      
+    >
+  );
+};
+
+export const ResourceActionsForm = () => {
+  return (
+    
+      
+                 允许操作
+              >
+            ),
+            dataIndex: 'enable',
+            key: 'enable',
+            render: () => ,
+          },
+          {
+            title: '可操作的数据范围',
+            dataIndex: 'scope',
+            key: 'scope',
+            render: () => 
+          },
+        ]}
+        dataSource={[
+          {
+            title: '添加',
+          },
+          {
+            title: '导入',
+            enable: true,
+          },
+        ]}
+      />
+    
+  );
+};
diff --git a/packages/client/src/acl/ScopeRecordPicker.tsx b/packages/client/src/acl/ScopeRecordPicker.tsx
new file mode 100644
index 000000000..41c3571c0
--- /dev/null
+++ b/packages/client/src/acl/ScopeRecordPicker.tsx
@@ -0,0 +1,77 @@
+import { createForm } from '@formily/core';
+import { FormContext, ISchema } from '@formily/react';
+import { Button, Space } from 'antd';
+import React, { useMemo } from 'react';
+import { SchemaComponent } from '../';
+import { AntdSchemaComponentProvider } from '../schema-component';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    scope: {
+      type: 'array',
+      default: [
+        { id: 1, name: 'name1' },
+        { id: 2, name: 'name2' },
+      ],
+      'x-component': 'RecordPicker',
+      properties: {
+        actions: {
+          'x-component': 'ScopeActions',
+        },
+        rowSelection: {
+          'x-component': 'RowSelection',
+          'x-component-props': {
+            rowKey: 'id',
+            objectValue: true,
+            rowSelection: {
+              type: 'radio',
+            },
+            dataSource: [
+              { id: 1, title: '全部数据' },
+              { id: 2, title: '用户自己创建的数据' },
+              { id: 3, title: '待审核的文章' },
+            ],
+          },
+          properties: {
+            column1: {
+              type: 'void',
+              title: '数据范围',
+              'x-component': 'RowSelection.Column',
+              'x-read-pretty': true,
+              properties: {
+                title: {
+                  type: 'string',
+                  'x-component': 'Input',
+                  'x-read-pretty': true,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const ScopeActions = () => {
+  return (
+    
+      
+      
+    
+  );
+};
+
+export const ScopeRecordPicker = () => {
+  const form = useMemo(() => createForm({}), []);
+  return (
+    
+      
+        
+      
+    
+  );
+};
diff --git a/packages/client/src/acl/demos/demo1.tsx b/packages/client/src/acl/demos/demo1.tsx
new file mode 100644
index 000000000..e48a39da3
--- /dev/null
+++ b/packages/client/src/acl/demos/demo1.tsx
@@ -0,0 +1,6 @@
+import { RoleTable } from '@nocobase/client';
+import React from 'react';
+
+export default () => {
+  return ;
+};
diff --git a/packages/client/src/acl/demos/demo2.tsx b/packages/client/src/acl/demos/demo2.tsx
new file mode 100644
index 000000000..5571f3838
--- /dev/null
+++ b/packages/client/src/acl/demos/demo2.tsx
@@ -0,0 +1,6 @@
+import { RolePermissions } from '@nocobase/client';
+import React from 'react';
+
+export default () => {
+  return ;
+};
diff --git a/packages/client/src/acl/demos/demo3.tsx b/packages/client/src/acl/demos/demo3.tsx
new file mode 100644
index 000000000..3e0778be5
--- /dev/null
+++ b/packages/client/src/acl/demos/demo3.tsx
@@ -0,0 +1,6 @@
+import { ResourceActionsForm } from '@nocobase/client';
+import React from 'react';
+
+export default () => {
+  return ;
+};
diff --git a/packages/client/src/acl/index.md b/packages/client/src/acl/index.md
index 2d68c8fc2..4a8bb558f 100644
--- a/packages/client/src/acl/index.md
+++ b/packages/client/src/acl/index.md
@@ -10,3 +10,7 @@ group:
 # ACL 待定
 
 访问控制列表,plugin-acl 的前端模块
+
+