文件
hyb-oa/.trellis/tasks/archive/2026-05/05-31-unify-business-list-ant-design/research/ant-design-business-list-pattern.md
T

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

业务台账页默认不要使用圆形按钮、摘要大卡、多列卡片流、左右分栏或解释性说明。除非页面是工作台、统计分析或详情页,否则首屏应优先让用户看到可查询、可排序/筛选、可进入详情的业务列表。