pay-company/.claude/skills/list-page-actions/references/component-api.md

Component API Reference

MyTableActions

Renders row-level action buttons with permission filtering and automatic folding into a "更多" dropdown.

import { MyTableActions } from '@/common';

<MyTableActions
  actions={{
    view: <MyButtons.View title="详情" />,
    update: <MyButtons.Edit title="编辑" />,
    delete: <MyButtons.Delete onConfirm={() => {}} />,
  }}
  maxVisible={3}
/>

Props

Prop	Type	Default	Description
actions	Record<string, React.ReactNode>	required	Map of permission keys to React nodes.
maxVisible	number	3	Maximum buttons shown directly; overflow goes to dropdown.
path	string	location.pathname	Optional route path for permission lookup.

Behavior

• Calls useCurrentPermissions internally.
• Filters actions by the current page's submenu permissions.
• If no permissions match, returns null.
• If visible count ≤ maxVisible, renders in a <Space>.
• If visible count > maxVisible, renders maxVisible buttons + a "更多" dropdown with the rest.

---

MyToolBarActions

Renders toolbar buttons (e.g., export, add) with permission filtering. Intended for ProTable.toolBarRender.

import { MyToolBarActions } from '@/common';

toolBarRender={(action) => [
  <MyToolBarActions
    key="toolbar"
    actions={{
      export: <MyExport key="export" item={params} download={Apis.X.Y} />,
      add: <MyCreateModal key="create" reload={action?.reload} />,
    }}
  />,
]}

Props

Prop	Type	Default	Description
actions	Record<string, React.ReactNode>	required	Map of permission keys to React nodes.
path	string	location.pathname	Optional route path for permission lookup.

Behavior

• Calls useCurrentPermissions internally.
• Returns an array of matched nodes (no wrapping element).
• Safe to place directly inside toolBarRender arrays.