---
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