页面模板规范¶
本规范将高频页面抽象为可复用的模板，而不是允许每个页面独立演化自己的布局语言。模板定义页面区域、组件组合方式、响应式行为、动作层级与数据密度边界。
1. 模板设计原则¶
- 页面是组件和布局区域的受控组合，而不是自由发挥的视觉实验。
- 同类页面应共享相同的结构与主次信息层级。
- 页面模板优先解决导航秩序、信息密度和操作层级，而不是造型差异。
2. Auth 双栏模板¶
适用范围¶
/login、/signup
必须区域¶
- 左侧品牌/信任信息区
- 右侧表单区
- 顶部移动端品牌入口
- 底部辅助链接/法律区
规则¶
- 左栏允许使用更强的品牌氛围和轻玻璃感。
- 右栏表单区必须使用共享 input/button/card 语义。
- 表单主 CTA、辅助登录方式、说明文案的层级必须稳定。
3. App Shell 模板¶
适用范围¶
/(chat) 路由组及其子页面
必须区域¶
- 左侧导航
- 顶部导航 / 工具栏
- 主内容区
- 必要时的右侧上下文区或面板区
规则¶
- shell 背景、header 高度、sidebar 宽度和内容 gutter 必须使用统一规则。
- active nav、breadcrumb、page title bar 的关系必须一致。
- 任何业务页面都不得重写 shell 的核心视觉逻辑。
4. Chat Workspace 模板¶
适用范围¶
chat home、message composer 主入口
必须区域¶
- 页面 header
- 示例问题或工作区引导区
- composer 主输入区
- 可选的上下文/提示区域
规则¶
- 空状态可保留少量品牌母题，但不影响主输入区清晰度。
- composer 区必须稳定，避免视觉噪声过强。
- 示例问题、快捷入口和最近上下文应共享一致卡片语言。
5. Conversation Detail 模板¶
适用范围¶
chat detail、分析结果流、thinking/result block 组合页面
必须区域¶
- 会话标题区
- 消息流主体
- thinking / result / chart / context block
- composer 持续输入区
规则¶
- 分析结果块与普通对话块必须有清晰但统一的面板语言。
- metadata、trace、SQL、来源信息使用统一 mono/meta 规则。
- 任何状态提示都不应破坏消息流的可扫描性。
6. Results Workspace 模板¶
适用范围¶
results workspace、结果表、业务上下文面板、图表结果页
必须区域¶
- header + query summary
- 主结果区（table/chart）
- filters / toolbar
- context / drilldown / explanation 区域
规则¶
- 结果表与图表共享同一组面板语言。
- filters 与辅助说明不应压制主结果可读性。
- 数据密度优先于装饰效果。
7. Admin List / Detail 模板¶
适用范围¶
admin dashboard、list 页面、detail 页面、settings 页面
必须区域¶
- 页面标题区
- summary cards
- list 或 form 主体
- 说明/帮助/状态区
规则¶
- admin 页面应更强调结构秩序和操作效率。
- summary card 不应演化为不同页面各自的“仪表盘语言”。
- 表单、筛选器、表格和空态必须复用共享模式。
8. Session Replay 模板¶
适用范围¶
legacy sessions、session detail、turn replay 页面
规则¶
- session meta、status、turn blocks 应统一采用新 meta/eyebrow typography contract。
- 历史回放页面需要高密度但稳定的区块结构。
- 不允许继续在 replay 页面堆叠临时 10px / 11px 样式作为长期方案。
9. Empty / Error / No Access 模板¶
规则¶
- 空状态包含标题、说明、建议动作。
- 错误状态包含原因、影响、下一步建议。
- no access 状态优先解释权限边界和返回路径。
- 可使用轻量品牌母题，但不应用大幅动画抢夺注意力。
10. 模板与代码映射¶
| 模板 | 代表实现入口 | 说明 |
|---|---|---|
| Auth 双栏 | web/app/(auth)/layout.tsx |
认证界面模板锚点 |
| App Shell | web/app/(chat)/layout.tsx |
主应用壳层锚点 |
| Conversation Detail | web/components/chat/assistant-result-block.tsx |
对话分析块锚点 |
| Results Workspace | web/components/results/result-table.tsx |
高密度数据表和工具栏锚点 |
| Session Replay | web/components/session/session-turn-card.tsx |
legacy 回放块锚点 |
11. 页面实现约束¶
- 页面只组合模板允许的区域与共享组件。
- 如果页面出现新的结构需求，应优先升级模板文档，而不是直接在单页面固化新模式。
- 页面内局部视觉例外必须可回溯到治理文档中的 exception process。