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 的前端模块 + + + +