数据表

Data Table

布局模式也叫：表格页、数据列表页、表格视图、Table View、Data Grid

一句话：用行和列展示大量同类记录，每行一条、每列一个字段，配合筛选、排序、分页和批量操作，方便逐行查找和比较。

详细解释

数据表是后台系统里最常用的内容布局：上方是筛选栏和操作按钮（新建、导出、批量删除），中间是表格，每一行是一条记录，每一列是一个字段，比如「订单号、客户、金额、状态、下单时间、操作」；底部是分页。

表格的核心价值是对齐：同一个字段在同一列上下排开，用户可以竖着扫一列找出最大金额，或者点击表头排序，在几百上千条记录里快速定位和比较。这是卡片网格、瀑布流做不到的。

设计时要控制列数，只放最重要的五到八列，其余字段放进详情页；数字列右对齐，状态用标签表示，最右侧固定一列放「查看、编辑」等操作。字段很少、主要靠图片挑选的内容不适合用表格。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

这里是订单管理页，请用数据表布局：顶部筛选栏包含关键词搜索、状态下拉和日期范围，右侧放「新建」「导出」按钮；表格列为勾选框、订单号、客户、金额（右对齐）、状态（标签）、下单时间、操作（查看/编辑），表头可排序，操作列固定在右侧；底部分页，每页 20 条并显示总条数。

上方是筛选栏和操作按钮，中间是行列对齐的表格（表头、数据行、右侧操作列），底部是分页器。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。