pay-company/.claude/skills/list-page-actions/references/migration-guide.md

Migration Guide: Old List Pages → Unified Action Pattern

Before (Manual Pattern)

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)

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:

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.