pay-company/.claude/skills/list-page-actions/SKILL.md

name	description
list-page-actions	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.

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 "更多".

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

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