1.2 KiB
1.2 KiB
Ant Design 业务列表模式参考
Source Notes
- Ant Design Table 文档强调表格用于展示结构化数据,并围绕行选择、排序筛选、固定列、分页和操作列组织列表能力。
- Ant Design Pro / ProTable 的常见心智是:查询表单、工具栏、表格主体、分页、行操作。它适合中后台的业务台账页面。
- 本项目不直接引入 Ant Design 依赖;只参考信息架构和交互习惯,继续使用现有 React/Vite/Tailwind/shadcn 风格组件。
Applied Pattern For hyb-oa
- Page header: 页面标题 + 主操作。
- Query bar: 搜索、状态、范围等高频筛选。
- Toolbar:
筛选/台账工具/更多收纳低频能力。 - Table: 对象身份、对象摘要、关键金额/日期、状态、操作。
- Row action: 右侧固定操作列,主动作明确,低频动作进
更多。 - Pagination: 表格底部统一分页。
Design Decision
业务台账页默认不要使用圆形按钮、摘要大卡、多列卡片流、左右分栏或解释性说明。除非页面是工作台、统计分析或详情页,否则首屏应优先让用户看到可查询、可排序/筛选、可进入详情的业务列表。