105 lines
4.1 KiB
Markdown
105 lines
4.1 KiB
Markdown
|
---
|
||
|
|
name: list-page-actions
|
||
|
|
description: This skill standardizes list-page action buttons with permission control and automatic overflow folding. Use it when creating or refactoring ProTable-based list pages that need toolbar buttons or row-level action buttons filtered by `useCurrentPermissions`, especially when more than 3 buttons should collapse into a "更多" dropdown.
|
||
|
|
---
|
||
|
|
|
||
|
|
# List Page Actions
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
|
||
|
|
This skill provides a reusable architecture for permission-controlled action buttons in ProTable list pages. It replaces scattered `toolBarRender` and `tableRender` boilerplate with two components:
|
||
|
|
|
||
|
|
- `MyToolBarActions` — for toolbar buttons (export, add, etc.)
|
||
|
|
- `MyTableActions` — for row-level buttons with automatic "更多" dropdown when buttons exceed `maxVisible`
|
||
|
|
|
||
|
|
Both components encapsulate `useCurrentPermissions` so list pages no longer need to manually call the hook for button rendering.
|
||
|
|
|
||
|
|
## When to Use
|
||
|
|
|
||
|
|
- Creating a new ProTable list page with permission-controlled buttons
|
||
|
|
- Refactoring an existing list page that manually calls `useCurrentPermissions` in `toolBarRender` or `tableRender`
|
||
|
|
- Adding automatic button folding ("更多" dropdown) to row-level actions
|
||
|
|
- Fixing toolbar buttons that disappear after wrapping them in a helper component
|
||
|
|
|
||
|
|
## Core Components
|
||
|
|
|
||
|
|
### MyToolBarActions
|
||
|
|
|
||
|
|
Renders toolbar buttons filtered by current-page permissions. Returns a plain array so it can be placed directly inside `toolBarRender`.
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
toolBarRender={(action) => [
|
||
|
|
<MyToolBarActions
|
||
|
|
key="toolbar"
|
||
|
|
actions={{
|
||
|
|
export: <MyExport key="export" item={params} download={Apis.X.Y} />,
|
||
|
|
add: <MyCreate key="create" reload={action?.reload} />,
|
||
|
|
}}
|
||
|
|
/>,
|
||
|
|
]}
|
||
|
|
```
|
||
|
|
|
||
|
|
**Important:** `MyToolBarActions` returns an array of React nodes. Do not wrap the return value in a `<>...</>` Fragment, or ProTable may fail to render the buttons.
|
||
|
|
|
||
|
|
### MyTableActions
|
||
|
|
|
||
|
|
Renders row-level buttons filtered by permissions. Automatically moves overflow into an Ant Design `Dropdown` labeled "更多".
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<MyTableActions
|
||
|
|
actions={{
|
||
|
|
view: <MyButtons.View title="详情" />,
|
||
|
|
update: <MyButtons.Edit title="编辑" />,
|
||
|
|
delete: <MyButtons.Delete onConfirm={() => {}} />,
|
||
|
|
}}
|
||
|
|
maxVisible={3}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
| Prop | Type | Default | Description |
|
||
|
|
|------|------|---------|-------------|
|
||
|
|
| `actions` | `Record<string, React.ReactNode>` | required | Permission-key to node map |
|
||
|
|
| `maxVisible` | `number` | `3` | Buttons shown directly; remainder folded |
|
||
|
|
| `path` | `string` | current path | Override route for permission lookup |
|
||
|
|
|
||
|
|
## Workflow: Creating a New List Page
|
||
|
|
|
||
|
|
1. Copy the template from `assets/list-page-template.tsx` into the new page directory.
|
||
|
|
2. Replace placeholder API paths (`Apis.Module.Resource`) with real ones.
|
||
|
|
3. Replace placeholder modals (`MyCreate`, `MyUpdate`) with real modal components.
|
||
|
|
4. Map backend permission keys to the `actions` object keys.
|
||
|
|
5. Adjust `maxVisible` based on design needs.
|
||
|
|
|
||
|
|
## Workflow: Migrating an Existing List Page
|
||
|
|
|
||
|
|
1. Remove local `toolBarRender` and `tableRender` functions.
|
||
|
|
2. Remove any manual `permissionsSpace` / `Others` / `Dropdown` boilerplate.
|
||
|
|
3. Import `MyToolBarActions` and `MyTableActions` from `@/common`.
|
||
|
|
4. Replace `toolBarRender` with `MyToolBarActions`.
|
||
|
|
5. Replace `MyColumns.Option` render body with `MyTableActions`.
|
||
|
|
6. See `references/migration-guide.md` for detailed before/after examples.
|
||
|
|
|
||
|
|
## Special Case: Permission-Controlled Links in Columns
|
||
|
|
|
||
|
|
If a column render includes a clickable link (e.g., `AssetInfo`) that should also respect permissions:
|
||
|
|
|
||
|
|
```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} />;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Resources
|
||
|
|
|
||
|
|
- `references/component-api.md` — API docs for `MyTableActions` and `MyToolBarActions`
|
||
|
|
- `references/migration-guide.md` — Step-by-step migration instructions with code diffs
|
||
|
|
- `assets/list-page-template.tsx` — Complete copy-paste template for new list pages
|