Page recipes

Page recipes (ant-design-pro compositions)

Approver dashboard / workplace: PageContainer (greeting + to-do count) → StatisticCard.Group (3) → ProCard gutter wrap: to-do ProList (lg 15) + breakdown chart (lg 9).
Analysis dashboard: Row of 4 KPI cards (big number + tiny chart + footer metric) → tabbed card (sales/visits) with date presets in tabBarExtraContent + Column chart (xl 16) + ranking list (xl 8) → two half-width cards (top list, proportion pie with Segmented).
Table list: PageContainer → ProTable (search, tabs with counts, toolBarRender create, rowSelection + alert actions) → row click → detail route (or Drawer size={600} with ProDescriptions for light records).
Card list (catalogs, projects): ProList grid={{ gutter: 16, column: 3 }} with metas (title, subTitle tag, avatar, description, content progress, actions on hover).
Advanced form: ProForm wrapping PageContainer content → several ProCard sections with 3 fields per row → EditableProTable for line items → FooterToolbar with submit + error popover.
Step form: PageContainer → ProCard → StepsForm (fill → confirm with Descriptions + Alert → Result success).
Detail / profile: Detail pages.
Settings: two columns — left Menu mode="inline" (224px, sections), right ProForm layout="vertical" per section with submit-only submitter.
Result / exception: Result status="success|error|403|404|500" + primary action.

antd Card: bordered→variant, bodyStyle/headStyle→styles={{ body, header }} (gated). ProCard/StatisticCard 2.x keep bodyStyle/bordered — they are valid there.
Modal/Drawer: visible→open, destroyOnClose→destroyOnHidden (see Forms — reset caveat), Drawer width→size.
Tabs.TabPane/Menu.Item JSX → items (gated). Space direction→orientation, split→separator. Steps direction→orientation, items.description→items.content. Statistic valueStyle→styles.content. Alert message→title. Dropdown.Button/Button.Group→Space.Compact.
pro-components v3 names don’t exist on 2.8.10: use renderFormItem (not formItemRender), layout="mix" is still valid.
antd List is deprecated in 6.4 (dev warning; ProList wraps it — fine). For new card grids prefer ProList or Row/Col of ProCard.
Don’t port createStyles/less/className={styles.x} from ant-design-pro: use tokens + inline style, Grid.useBreakpoint() instead of @media, plain strings instead of useIntl, useNavigate instead of umi history.