运营订单列表Operations Order List
适合高频查询、批量处理和异常追踪的后台列表。A back-office list for high-frequency lookup, bulk processing, and exception tracking.
| 订单 | 客户 | 状态 | 金额 |
|---|---|---|---|
| #A-2048 | 海屿科技 | 已支付 | ¥ 8,640 |
| #A-2047 | 嘉禾零售 | 待确认 | ¥ 3,280 |
| #A-2046 | 启明教育 | 处理中 | ¥ 5,120 |
标本可交互，可以切换不同状态。Interactive specimen — switch between the available states.
适用场景Use cases
高频扫描、条件筛选、批量操作高频扫描 · 条件筛选 · 批量操作
关键状态Key states
布局结构Structure
- 左侧业务导航Business navigation rail
- 顶部筛选与主操作Filters and primary action bar
- 高密度数据表格Dense data table
- 底部分页Pagination footer
视觉特征Visual traits
- 表头和行状态对齐Headers align with row states
- 颜色只表达语义状态Color carries semantic status only
- 次要字段降低对比度Secondary fields recede
实现约束Implementation guardrails
需要做到Do
- 固定关键列并让表头保持可见Keep key columns and the header visible
- 筛选条件可回显和清空Echo and clear filter values
- 批量操作只在选中记录后出现Reveal bulk actions only after selection
避免Avoid
- 把每一行做成独立卡片Turn every row into a separate card
- 只用颜色区分订单状态Use color as the only order status cue
AI 风格说明AI design brief
构建一个面向运营人员的高密度订单列表。 适用场景：高频扫描、条件筛选、批量操作。 页面结构：左侧业务导航；顶部筛选与主操作；高密度数据表格；底部分页。 视觉特征：表头和行状态对齐；颜色只表达语义状态；次要字段降低对比度。 关键状态：默认、加载、空结果、错误。 需要做到：固定关键列并让表头保持可见；筛选条件可回显和清空；批量操作只在选中记录后出现。 避免：把每一行做成独立卡片；只用颜色区分订单状态。Build a dense order list for operations teams. Use cases: High-frequency scanning, Conditional filtering, Bulk actions. Structure: Business navigation rail; Filters and primary action bar; Dense data table; Pagination footer. Visual traits: Headers align with row states; Color carries semantic status only; Secondary fields recede. Key states: Default, Loading, Empty, Error. Do: Keep key columns and the header visible; Echo and clear filter values; Reveal bulk actions only after selection. Avoid: Turn every row into a separate card; Use color as the only order status cue.