98 lines
2.5 KiB
Markdown
98 lines
2.5 KiB
Markdown
|
# Migration Guide: Old List Pages → Unified Action Pattern
|
||
|
|
|
||
|
|
## Before (Manual Pattern)
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
const getCurrentPermissions = useCurrentPermissions();
|
||
|
|
|
||
|
|
let toolBarRender = (action: any) => {
|
||
|
|
return getCurrentPermissions({
|
||
|
|
export: <MyExport key="export" item={params} download={Apis.X.Y} />,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
let tableRender = (item: any, action: any) => {
|
||
|
|
let permissions = getCurrentPermissions({
|
||
|
|
view: <MyButtons.View title="详情" />,
|
||
|
|
update: <MyUpdate item={item} />,
|
||
|
|
});
|
||
|
|
let permissionsSpace = getCurrentPermissions({
|
||
|
|
delete: { key: '1', label: <MyButtons.Delete onConfirm={...} /> },
|
||
|
|
});
|
||
|
|
let Others = (
|
||
|
|
<Dropdown menu={{ items: permissionsSpace }} trigger={['click']}>
|
||
|
|
<MyButtons.Default title="更多" />
|
||
|
|
</Dropdown>
|
||
|
|
);
|
||
|
|
return [...permissions, ...[Others]];
|
||
|
|
};
|
||
|
|
|
||
|
|
toolBarRender={(action) => [toolBarRender(action)]}
|
||
|
|
// ...
|
||
|
|
MyColumns.Option({
|
||
|
|
render: (_, item, index, action) => (
|
||
|
|
<Space key={index}>
|
||
|
|
<>{tableRender(item, action)}</>
|
||
|
|
</Space>
|
||
|
|
),
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
## After (Unified Pattern)
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { MyTableActions, MyToolBarActions } from '@/common';
|
||
|
|
|
||
|
|
toolBarRender={(action) => [
|
||
|
|
<MyToolBarActions
|
||
|
|
key="toolbar"
|
||
|
|
actions={{
|
||
|
|
export: <MyExport key="export" item={params} download={Apis.X.Y} />,
|
||
|
|
}}
|
||
|
|
/>,
|
||
|
|
]}
|
||
|
|
|
||
|
|
MyColumns.Option({
|
||
|
|
render: (_, item, index, action) => (
|
||
|
|
<Space key={index}>
|
||
|
|
<MyTableActions
|
||
|
|
actions={{
|
||
|
|
view: <MyButtons.View title="详情" />,
|
||
|
|
update: <MyUpdate item={item} />,
|
||
|
|
delete: <MyButtons.Delete onConfirm={...} />,
|
||
|
|
}}
|
||
|
|
maxVisible={2}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
),
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
## Steps
|
||
|
|
|
||
|
|
1. Remove `useCurrentPermissions` import if it is no longer needed elsewhere.
|
||
|
|
2. Remove `toolBarRender` local function; replace `toolBarRender` prop with `MyToolBarActions`.
|
||
|
|
3. Remove `tableRender` local function and any `permissionsSpace` / `Others` / `Dropdown` boilerplate.
|
||
|
|
4. Replace `MyColumns.Option` render body with `MyTableActions`.
|
||
|
|
5. Tune `maxVisible` based on design needs (default `3`).
|
||
|
|
|
||
|
|
## Special Case: Link in Column Render
|
||
|
|
|
||
|
|
If a column (e.g., "名称") renders a clickable `AssetInfo` link that should also be permission-controlled:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
const getCurrentPermissions = useCurrentPermissions();
|
||
|
|
const hasInfo = getCurrentPermissions({ info: true }).length > 0;
|
||
|
|
|
||
|
|
{
|
||
|
|
title: '名称',
|
||
|
|
dataIndex: 'name',
|
||
|
|
render: (_, item: any) => {
|
||
|
|
if (!hasInfo) return item?.name;
|
||
|
|
return <AssetInfo item={{ ...item, type: 'link' }} title={item?.name} />;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Note: `useCurrentPermissions` may still be imported for this use case.
|