原型与设计

卓安Claw 原型设计方案 v1.0

约 33 分钟·卓安Claw · 2026.11

本页目录

0. 怎么用这份文档
1. 设计目标
2. 视觉系统（Design Tokens）
2.1 色彩
2.2 字体
2.3 间距、圆角、阴影
2.4 图标
3. 布局系统
3.1 AppShell
3.2 大屏模式
3.3 响应式
4. 信息架构与路由
5. 核心用户流程（8 分钟）
6. 屏幕设计
6.1 S0 AppShell（A）
6.2 S1 工作台（A）
6.3 S2 案件详情 / 诊疗主线（A）
6.4 S3 Agent 面板（A + C）
6.5 S4 驾驶舱（A + B）
6.6 S5 小程序客户视图（B）
6.7 S6 权限对比 / 审计抽屉（A）
7. 组件规格
8. 状态与动效
8.1 页面状态

版本：v1.0
日期：2026-11-06
用途：3 人团队可直接照此实现 11/27 演示原型；同时作为正式版 UI/领域模型/接口的起点
产品形态：PC 主端 + 小程序客户视图（小程序是配角）
关联文档：《原型开发三人分工与正式版衔接方案 v1.0》《11·27 演示方案 v0.1》
状态：设计交付稿

0. 怎么用这份文档

A（PC 主端）：按第 3–6 节做 AppShell、工作台、案件详情、Agent、驾驶舱、权限/审计；按第 12 节文件路径落代码。
B（客户视图/视觉）：按第 2 节做设计 token；按第 6.6 节做小程序客户视图；按第 13 节做 Penpot 交付。
C（平台/数据）：按第 9 节造 seed 数据；按第 10 节做 Demo API；按第 11 节做 Agent 预生成。
每天 18:00：B 交设计/样式，C 交数据/接口，A 交可点页面；18:30 集成。

1. 设计目标

大屏可读：1920×1080 投屏，最后一排能看清；字号 ≥ 24px（演示模式）。
专业可信：律所后台，不是通用 SaaS；深蓝 + 暖金 + 中性灰。
一案到底：一个案件从建档到结案，观众不需要理解 80 个菜单。
Agent 是侧栏：不抢主内容；上下文、建议、草稿、引用、确认都在侧栏完成。
权限可见：同一案件切角色，界面立刻不同；让观众“看见”权限。
演示优先：所有页面为 8 分钟脚本服务；密集表格在大屏上收敛为卡片。

2. 视觉系统（Design Tokens）

2.1 色彩

Token	值	用途
`--bg-app`	`#F5F7FA`	应用背景
`--bg-surface`	`#FFFFFF`	卡片/面板
`--bg-sidebar`	`#0F2742`	左侧导航
`--bg-sidebar-active`	`#17395C`	导航选中
`--text-primary`	`#0F172A`	主文字
`--text-secondary`	`#475569`	次文字
`--text-muted`	`#94A3B8`	辅助
`--text-inverse`	`#F8FAFC`	深色背景文字
`--primary`	`#12304D`	主色/按钮
`--primary-hover`	`#1B4468`	主按钮 hover
`--accent`	`#C9A45C`	强调/品牌
`--ai`	`#0E9384`	Agent/AI 动作
`--success`	`#0E9F6E`	成功/完成
`--warning`	`#D97706`	临期/中风险
`--danger`	`#DC2626`	超期/高风险
`--info`	`#2563EB`	信息/链接
`--border`	`#E2E8F0`	边框/分割
`--border-strong`	`#CBD5E1`	强边框

数据级别徽标：

级别	颜色	文案
A	`#0E9F6E`	公开知识
B	`#2563EB`	业务数据
C	`#D97706`	敏感案卷
D	`#64748B`	个人

2.2 字体

中文："Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif
英文/数字：Inter, "SF Pro Text", sans-serif
等宽（编号/金额）："JetBrains Mono", "SFMono-Regular", Consolas, monospace

字号（演示模式）：

层级	字号/行高	用途
H1	40/48	页面标题
H2	28/36	区块标题
H3	22/30	卡片标题
Body	18/28	正文
Small	16/24	辅助
Caption	14/20	仅非舞台信息

舞台演示统一放大 125%；最小可读字号 16px。

2.3 间距、圆角、阴影

间距：4 / 8 / 12 / 16 / 24 / 32 / 48。
圆角：卡片 12px；按钮 8px；徽标 999px；弹层 16px。
阴影：0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08)。
卡片内边距：24px；表格行高：48px（演示）/ 40px（日常）。

2.4 图标

Lucide，线性，1.5px；尺寸 18/20/24。
导航图标统一 20px；状态徽标不带图标，用色块 + 文案。

3. 布局系统

3.1 AppShell

┌──────────────────────────────────────────────────────────────────────┐
│ Logo 卓安Claw   [全局搜索]            [分所▾] [通知] [角色▾] [头像] │
├──────────┬──────────────────────────────────────────────┬────────────┤
│ 工作台    │ 标签页：工作台 | 案件 ZA-2026-0318 | ...      │  Agent     │
│ 客户      │                                              │  面板      │
│ 案件      │              主内容区                        │  (380px)   │
│ 管理      │                                              │            │
│ 知识      │                                              │            │
│          │                                              │            │
│ 当前角色  │                                              │            │
└──────────┴──────────────────────────────────────────────┴────────────┘

尺寸（1920×1080）：

区域	尺寸
顶栏	高 64px
侧栏	宽 240px（可收 72px）
标签栏	高 44px
内容区	自适应，最大 1600px
Agent 面板	宽 380px（可收 0）
内容内边距	24px

3.2 大屏模式

全屏、隐藏浏览器 chrome；stage-mode class 放大 125%。
侧栏可收；Agent 面板保持展开。
表格最多 7–8 行；超出用分页/滚动，不缩小字号。
弹层用右侧抽屉，不用居中大弹窗遮挡主内容。
鼠标指针放大；关键按钮加 focus ring。

3.3 响应式

PC：≥ 1440；演示 1920。
平板：1024–1439，侧栏收起，Agent 抽屉。
手机：小程序客户视图 375×812；PC 不做手机适配。

4. 信息架构与路由

路由	页面	角色	说明
`/`	工作台	全部	默认首页
`/cases`	案件列表	案件相关	演示可省略
`/cases/:id`	案件详情	案件团队	核心屏
`/cockpit`	驾驶舱	管理者	核心屏
`/customers`	客户列表	客户经理/谈案	演示可省略
`/leads`	线索列表	客服	演示可省略
`/agent`	Agent 面板	全部	侧栏，不是独立路由
`/audit`	审计抽屉	管理者	抽屉
`/demo/roles`	角色切换	演示	顶部菜单
`/mini`	小程序 H5	客户	Taro 独立应用

演示只保留 /、/cases/:id、/cockpit、/mini 四个主路由 + 抽屉。

5. 核心用户流程（8 分钟）

S1 工作台
  → 点击案件 ZA-2026-0318
S2 案件详情
  → 切换角色（客服/客户经理/谈案/承办/管理者）
  → 点击“生成会见提纲”
S3 Agent 面板
  → 流式输出 → 引用 → 插入草稿 → 确认
S2 案件详情
  → 勾选清单项 → 推进阶段
S4 驾驶舱
  → 7 家所 → 点击风险案件 → S2
S5 小程序客户视图（30 秒）
S6 权限对比 / 审计抽屉

6. 屏幕设计

6.1 S0 AppShell（A）

目标：一个壳装下所有页面；角色切换和分所切换在顶栏；Agent 面板常驻。

线框：

┌──────────────────────────────────────────────────────────────┐
│ 卓安Claw   [搜索客户/案件/文书]      [成都总所▾] [🔔] [赵楠▾] │
├──────────┬──────────────────────────────────────┬────────────┤
│ 工作台    │ 工作台 | 案件 ZA-2026-0318 | +       │ Agent      │
│ 客户      ├──────────────────────────────────────┤ 当前案件    │
│ 案件      │                                      │ [B类]      │
│ 管理      │            主内容区                  │ 建议卡      │
│ 知识      │                                      │ [生成文书]  │
│          │                                      │            │
│ 承办律师  │                                      │            │
└──────────┴──────────────────────────────────────┴────────────┘

组件： - Sidebar：品牌、导航组、角色徽标、分所。 - Topbar：搜索、分所切换、通知、角色切换、头像。 - TabBar：已打开页面；可关闭；保留状态。 - AgentPanel：上下文、数据级别、建议、输出、操作。 - StageModeToggle：演示模式开关（隐藏开发入口）。

交互： - 角色切换 → 当前页刷新权限；未授权模块从导航消失；顶部 toast“已切换到承办律师视角”。 - 分所切换 → 数据范围刷新；管理者可切全所/分所。 - Agent 面板 → 可收起；切换案件时上下文自动更新。

6.2 S1 工作台（A）

目标：8 分钟开场；让观众看到“一个律师今天要干什么”。

线框：

早上好，赵律师 · 承办律师 · 成都总所                    2026-11-06
┌────────┬────────┬────────┬────────┬────────┐
│ 在办 12 │ 待接诊 3│ 今日待办 5│ 超期 2 │ 本月结案 4│
└────────┴────────┴────────┴────────┴────────┘
┌──────────────────────────────┬──────────────────────────┐
│ 今日待办                      │ Agent 建议                │
│ □ 09:30 会见 张某   高风险     │ · 3 个案件缺会见笔录       │
│ □ 14:00 开庭 李某   临期       │ · 1 个案件超期 2 天        │
│ □ 16:00 提交取保 王某          │ [查看] [生成提醒]          │
├──────────────────────────────┼──────────────────────────┤
│ 案件动态（时间线）             │ 风险预警                  │
│ 11/06 赵楠 会见当事人          │ ● ZA-2026-0318 中风险      │
│ 11/05 赵楠 提交取保申请        │ ● ZA-2026-0211 超期        │
│ 11/04 郭涛 完成方案            │ ...                       │
└──────────────────────────────┴──────────────────────────┘

组件： - PageHeader：问候、角色、分所、日期。 - MetricCard × 5：数值、标签、趋势/风险色。 - TodoList：时间、事项、案件、风险标签、勾选。 - Timeline：日期、人、动作、案件；只追加。 - AgentSuggestionCard：2–3 条建议 + 操作。 - RiskList：风险案件、风险等级、下一步。

交互： - 点 KPI → 跳转筛选后的案件列表（演示可 toast“演示版仅展示当前案件”）。 - 点待办/风险 → 打开案件详情。 - 角色切换：客服看到线索/预约；谈案看到待接诊/方案；承办看到案件/清单；管理者看到全所 KPI + 驾驶舱入口。

演示数据： - 在办 12、待接诊 3、今日待办 5、超期 2、本月结案 4。 - 待办 5 条；动态 6 条；风险 3 条。

6.3 S2 案件详情 / 诊疗主线（A）

目标：主 wow 屏；一案七面；阶段、清单、Agent、审计都在这一屏。

线框：

┌ ZA-2026-0318 张某涉嫌合同诈骗案  [审查起诉] [中风险]  [推进阶段] [生成文书] ┐
│ 客户 张某家属 · 承办 赵楠 · 合同 12万 · 已回款 6万 · 待收 6万 · 下次开庭 11/20 │
├──────────────┬────────────────────────────────────────────┬──────────────┤
│ 阶段导航      │ 标签：概览 | 案程 | 检查 | 诊断 | 方案 | 办案 | 清单 | 文档 | 留痕 │
│ ● 预约        │                                            │ 摘要卡        │
│ ● 建档        │ 当前阶段：治疗/办案                         │ 客户/合同/回款 │
│ ● 分诊        │ 时间线：                                    │ 待办/期限     │
│ ● 接诊        │ 11/06 会见当事人并核实资金流水               │ Agent 建议    │
│ ● 检查        │ 11/05 向侦查机关提交取保候审申请             │ [生成会见提纲] │
│ ● 诊断        │ 11/04 完成阅卷，整理证据目录                 │              │
│ ● 方案        │                                            │              │
│ ● 治疗 ◀      │                                            │              │
│ ○ 结果        │                                            │              │
│ ○ 归档        │                                            │              │
│ ○ 随访        │                                            │              │
└──────────────┴────────────────────────────────────────────┴──────────────┘

头部： - 案件编号、名称、阶段徽标、风险徽标。 - 主操作：推进阶段、生成文书、更多。 - 摘要行：客户、承办、合同额、已回款、待收、下次开庭。

左侧阶段导航： - 11 个阶段：预约 → 建档 → 分诊 → 接诊 → 检查 → 诊断 → 方案 → 治疗 → 结果 → 归档 → 随访。 - 已完成：实心圆 + 绿色；当前：实心圆 + 金色 + 脉冲；未开始：空心。 - 点击阶段 → 右侧内容滚动到对应区块；不改变状态。

标签页： - 概览：案件信息、团队、关键日期、风险。 - 案程：时间线（只追加）。 - 检查：检查单列表、报告、状态。 - 诊断：要件对照、争议焦点、证据缺口、风险等级。 - 方案：版本、费用、客户确认。 - 办案：办案动态、所函、文书。 - 清单：办案路径表（必做/条件、状态、责任人、截止、变异）。 - 文档：文件列表、版本、共享状态。 - 留痕：审计事件。

清单表列： | 列 | 说明 | |---|---| | 事项 | 会见、阅卷、取保、开庭、文书 | | 属性 | 必做/条件/节点 | | 状态 | 未开始/进行中/已完成/不适用/未完成 | | 责任人 | 承办/协办 | | 截止 | 日期 | | 证据 | 文件/备注 | | 操作 | 勾选/填原因 |

交互： - 推进阶段 → 抽屉：目标阶段、摘要、必做项检查、确认。 - 清单项 → 勾选/填原因/补正期限；不自动推进阶段。 - 文档 → 预览抽屉；C 类带“仅本地”徽标。 - Agent 建议 → 打开 Agent 面板并带入动作。

大屏： - 左侧阶段导航保留；标签页只显示 5 个主标签（概览/案程/清单/文档/留痕），其余收进“更多”。 - 时间线最多 5 条；字号 18–20px。

6.4 S3 Agent 面板（A + C）

目标：第二个 wow；10 秒出一份可编辑、可引用的草稿。

线框：

┌ Agent · ZA-2026-0318  [B类] [C类仅本地] ──────────────┐
│ 你可以让我：                                          │
│ [生成服务方案] [生成会见提纲] [检查缺失项]             │
├──────────────────────────────────────────────────────┤
│ 会见提纲（草稿）                                      │
│ 1. 核实当事人到案经过与羁押日期                       │
│ 2. 核对涉案金额与资金流水                             │
│ 3. 了解是否存在自首/坦白/退赃情节                     │
│                                                      │
│ 引用：[刑诉法第39条] [会见笔录模板 v2] [类案 2025-...] │
│                                                      │
│ [插入草稿] [采纳] [忽略] [重新生成]                    │
│ 提示：草稿不会自动提交，需律师确认。                   │
└──────────────────────────────────────────────────────┘

结构： - 上下文头：案件名、数据级别、C类仅本地 徽标。 - 动作区：3 个主按钮；演示只做这 3 个。 - 输出区：标题、流式文本、引用 chips、风险提示。 - 操作区：插入草稿/采纳/忽略/重新生成。 - 底部提示：草稿需确认；C 类不调用外部模型。

交互序列（演示）： 1. 点击“生成会见提纲”。 2. 按钮 loading 0.5s；输出区出现“正在检索案件材料…”（1.5s）。 3. 流式输出 5–8s；引用 chips 逐个出现。 4. 输出完成；插入草稿 可点。 5. 点击 插入草稿 → 右侧 toast“已生成草稿 v1”；案件详情“文档”多一条草稿。 6. 点击 采纳 → 状态变“已采纳”；审计记录。

C 类规则： - 上下文头显示 C类仅本地；外部模型动作禁用；生成 只在本地检索/模板范围内。 - 若用户点击外部模型动作 → toast“C 类案卷不出私有云，已切换本地检索”。

预生成数据： - 3 个动作各一份 JSON：标题、正文（Markdown）、引用数组、耗时、风险提示。 - C 类动作只返回本地检索结果 + 模板骨架，不返回“模型生成”文案。

6.5 S4 驾驶舱（A + B）

目标：第三个 wow；让主任看到“7 家所一个后台”。

线框：

全所驾驶舱   [全所▾] [本月▾]                      2026-11-06
┌────────┬────────┬────────┬────────┬────────┐
│ 在办 128│ 本月结案 23│ 超期 7 │ 待回款 86万│ 风险 5 │
└────────┴────────┴────────┴────────┴────────┘
┌──────────────────────────────┬──────────────────────────┐
│ 7 家所案件分布（柱状图）       │ 阶段分布（环图）          │
│ 成都 48 深圳 22 昆明 12 ...   │ 接诊/检查/诊断/治疗/结案  │
├──────────────────────────────┼──────────────────────────┤
│ 风险案件 Top 10（表格）        │ 预警/洞察                 │
│ 案号/分所/阶段/承办/风险/期限  │ · 深圳 2 件超期           │
│ ...                          │ · 北京 1 件待回款         │
└──────────────────────────────┴──────────────────────────┘

组件： - BranchFilter：全所/成都/深圳/昆明/重庆/北京/西安/西宁。 - PeriodFilter：本月/上月/本季/本年。 - KpiCard × 5。 - BarChart：7 家所案件数；点击柱子过滤。 - DonutChart：阶段分布。 - RiskTable：案号、分所、阶段、承办、风险、下次期限、操作。 - InsightList：3 条洞察。

交互： - 点分所柱子 → 过滤 Top 10 和 KPI。 - 点风险案件 → 打开 S2。 - 点“全所” → 恢复。 - 图表 hover 显示数值；不做复杂联动。

数据： - 7 家所：成都 48、深圳 22、昆明 12、重庆 14、北京 18、西安 9、西宁 5 = 128。 - 本月结案 23；超期 7；待回款 86 万；风险 5。 - 风险 Top 10 中第 1 条为 ZA-2026-0318。

6.6 S5 小程序客户视图（B）

目标：30 秒配角；证明“客户侧也打通了”。

手机线框（375×812）：

┌──────────────────────────────┐
│ 卓安Claw 客户中心             │
│ 我的案件                      │
│ ┌ 张某涉嫌合同诈骗案 ───────┐ │
│ │ 审查起诉 · 治疗中          │ │
│ │ 下次开庭 11/20             │ │
│ │ [查看进度]                 │ │
│ └────────────────────────────┘ │
│ 最新动态                      │
│ · 11/06 律师已会见当事人       │
│ · 11/05 已提交取保候审申请     │
│ · 11/04 已完成阅卷             │
│                              │
│ [案件] [消息] [我的]           │
└──────────────────────────────┘

页面： 1. 我的案件：案件卡、阶段、下次节点。 2. 案件进度：阶段条、当前节点、下一步、承办律师。 3. 办案动态：公开版时间线；每条“发生了什么/律师做了什么/下一步”。 4. 文书：共享文书列表；水印；下载。 5. 我的：绑定、隐私、解绑。

规则： - 只显示公开档位内容；默认不公开。 - 客户只读；不显示内部案卷、冲突、成本。 - 右上角“演示账号”标识；无真实登录。 - 底部 tab 3 个：案件/消息/我的。

演示方式： - 舞台：PC 角落小窗/手机投屏 30 秒；不扫码、不互动。 - 展台：参观者扫码体验 H5。

6.7 S6 权限对比 / 审计抽屉（A）

权限对比（抽屉/弹层）：

当前案件 ZA-2026-0318 · 角色可见性
┌──────────┬────┬────┬────┬────┬────┐
│ 模块      │客服│客户│谈案│承办│管理│
├──────────┼────┼────┼────┼────┼────┤
│ 客户信息  │ 👁 │ ✅ │ ✅ │ ✅ │ ✅ │
│ 案卷文件  │ ❌ │ ❌ │ 👁 │ ✅ │ 👁 │
│ 真实报价  │ ❌ │ 🔒 │ ✅ │ ✅ │ ✅ │
│ 冲突结果  │ ❌ │ ❌ │ ❌ │ ✅ │ ✅ │
│ 财务/成本  │ ❌ │ ❌ │ ❌ │ ❌ │ ✅ │
└──────────┴────┴────┴────┴────┴────┘

审计抽屉：

审计 · ZA-2026-0318
11/06 15:20  赵楠  查看  会见笔录.pdf
11/06 15:18  赵楠  Agent  生成会见提纲（ARUN-...）
11/06 14:55  王强  审批  用章申请
11/05 17:30  孙鹏  下载  委托合同.pdf（水印）

交互：从右上角“权限/审计”按钮打开；演示时用 10 秒展示“同一案件不同角色”和“谁看了什么”。

7. 组件规格

组件	规格	状态
`Button`	主/次/幽灵/危险；高 40/48；圆角 8	default/hover/active/loading/disabled
`Card`	白底、12px 圆角、24px 内边距、轻阴影	default/selected
`MetricCard`	标签 14、数值 32、趋势 14	normal/warning/danger
`StatusBadge`	色底 + 文案；高 24；圆角 999	阶段/风险/状态
`DataClassBadge`	A/B/C/D 色；带锁图标（C）	—
`Tabs`	下划线；高 44；最多 5 个主标签	active/hover
`Table`	表头 14、行 48、斑马纹可选	loading/empty/error
`Timeline`	左侧时间、圆点、标题、摘要、操作	只追加
`StageStepper`	垂直；11 阶段；当前脉冲	done/current/todo
`ChecklistTable`	必做/条件、状态、责任人、截止、证据	未完成需原因
`AgentPanel`	380px；上下文/动作/输出/引用/确认	idle/loading/streaming/done/error
`PermissionMatrix`	角色 × 模块；✅/👁/🔒/❌	—
`AuditDrawer`	右侧抽屉；时间倒序	—
`EmptyState`	图标 + 文案 + 主操作	—
`ErrorState`	错误码 + 重试	—
`Toast`	右上；3s 自动消失	success/error/info

8. 状态与动效

8.1 页面状态

状态	表现
Loading	骨架屏；不要转圈全屏
Empty	“暂无数据” + 新建/清筛选
Error	错误码 + 重试 + 反馈
No permission	403 卡片 + 返回/申请
Offline	顶部离线条 + 本地缓存提示
C 类	“仅本地检索”徽标 + 禁用外部模型
Demo	右上角“演示数据”水印

8.2 动效

场景	时长/缓动
页面切换	160ms ease-out
抽屉	220ms cubic-bezier(.2,.8,.2,1)
Agent 流式	每 30–50ms 一段
阶段推进	300ms 高亮 + toast
角色切换	150ms 淡入
数字滚动	600ms（仅 KPI）

动效只服务 3 个 wow 点；不做无意义动画。

9. 演示数据（seed）

9.1 组织

分所	在办
成都总所	48
深圳	22
昆明	12
重庆	14
北京	18
西安	9
西宁	5
合计	128

9.2 角色

角色	姓名	分所
客服	王婷	成都
客户经理	孙鹏	成都
谈案律师	郭涛	成都
承办律师	赵楠	成都
管理者	王强	成都
财务	林芳	成都

9.3 案件

字段	值
案件编号	ZA-2026-0318
案件名称	张某涉嫌合同诈骗案
客户	张某家属（C-2026-001）
案由	合同诈骗
程序阶段	审查起诉
诊疗阶段	治疗/办案
风险	中
承办	赵楠
合同额	120,000
已回款	60,000
待收	60,000
下次开庭	2026-11-20
数据级别	B（案卷文件 C）

9.4 时间线（6 条）

日期	人	动作
11/06	赵楠	会见当事人并核实资金流水
11/05	赵楠	向侦查机关提交取保候审申请
11/04	赵楠	完成阅卷，整理证据目录
11/03	郭涛	完成服务方案并签约
11/02	孙鹏	客户确认委托，回款 6 万
11/01	王婷	客服建档并分诊给赵楠

9.5 清单（8 项）

事项	属性	状态	责任人	截止
首次会见	必做	已完成	赵楠	11/06
阅卷	必做	已完成	赵楠	11/04
取保候审申请	必做	已完成	赵楠	11/05
证据目录	必做	进行中	赵楠	11/12
法律意见书	必做	未开始	赵楠	11/15
开庭准备	必做	未开始	赵楠	11/19
被害人谅解	条件	不适用	赵楠	—
结案报告	必做	未开始	赵楠	结案前

9.6 Agent 预生成

动作 1：生成服务方案（标题、阶段、费用、风险告知、引用）。
动作 2：生成会见提纲（8 条、法条引用、模板引用）。
动作 3：检查缺失项（证据目录缺 2 项、法律意见书未开始、开庭准备未开始）。

9.7 审计（5 条）

时间	人	动作	对象
11/06 15:20	赵楠	查看	会见笔录.pdf
11/06 15:18	赵楠	Agent	生成会见提纲
11/06 14:55	王强	审批	用章申请
11/05 17:30	孙鹏	下载	委托合同.pdf
11/05 10:10	王婷	分诊	ZA-2026-0318

10. Demo API 契约

方法	路径	用途	返回
GET	`/api/demo/session?role=lawyer`	当前角色/分所/权限	session
POST	`/api/demo/role`	切换角色	session
GET	`/api/demo/workbench`	工作台 KPI/待办/动态	workbench
GET	`/api/demo/cases/:id`	案件详情	case
GET	`/api/demo/cases/:id/timeline`	时间线	events[]
GET	`/api/demo/cases/:id/checklist`	清单	items[]
GET	`/api/demo/cases/:id/audit`	审计	events[]
GET	`/api/demo/cases/:id/permissions`	角色矩阵	matrix
POST	`/api/demo/agent/run`	3 个动作	draft + citations
GET	`/api/demo/cockpit?branch=all&period=month`	驾驶舱	kpis/charts/risks
GET	`/api/demo/portal/:caseId`	客户视图	published
POST	`/api/demo/reset`	重置	ok

C 负责实现；A/B 只通过 packages/api-client 调用，不直接读 mock JSON。

11. 文件与组件映射

apps/pc/src/
├─ app/AppShell.tsx
├─ app/routes.tsx
├─ pages/workbench/WorkbenchPage.tsx
├─ pages/case/CaseDetailPage.tsx
├─ pages/cockpit/CockpitPage.tsx
├─ components/agent/AgentPanel.tsx
├─ components/case/StageStepper.tsx
├─ components/case/CarePathTable.tsx
├─ components/case/CaseHeader.tsx
├─ components/case/Timeline.tsx
├─ components/permission/PermissionMatrix.tsx
├─ components/audit/AuditDrawer.tsx
├─ components/common/MetricCard.tsx
├─ components/common/StatusBadge.tsx
├─ components/common/DataClassBadge.tsx
└─ styles/tokens.css

apps/mini/src/
├─ pages/cases/index.tsx
├─ pages/case-detail/index.tsx
├─ pages/updates/index.tsx
└─ app.config.ts

packages/domain/src/
├─ case.ts
├─ customer.ts
├─ checklist.ts
├─ permission.ts
└─ audit.ts

packages/api-client/src/
├─ demo.ts
└─ types.ts

services/api/
├─ schema.ts
├─ seed.ts
└─ routes.ts

12. 角色视图差异

屏幕	客服	客户经理	谈案律师	承办律师	管理者
工作台	线索/预约	客户/回款	待接诊/方案	案件/清单	全所 KPI
案件详情	❌	👁 客户	👁 方案	✅ 全档案	👁 全所
案卷文件	❌	❌	👁 交接前	✅	👁
真实报价	❌	🔒	✅	✅	✅
冲突结果	❌	❌	❌	✅	✅
驾驶舱	❌	❌	❌	👁	✅
Agent	客户/线索	客户/跟进	方案/文书	文书/清单	汇总/洞察

13. 大屏演示规范

分辨率 1920×1080；浏览器 100% 缩放；stage-mode 125%。
字号：H1 40、H2 28、Body 18；最小 16。
侧栏 240；Agent 380；内容区 ≥ 1200。
表格最多 7 行；超出滚动，不缩小字号。
主操作按钮 ≥ 48px 高；颜色对比 ≥ 4.5:1。
关闭通知/微信/邮件；隐藏地址栏；预开标签。
鼠标指针放大；关键点击加 highlight。
备份：每个 wow 点 30 秒录屏。

14. 验收清单（按屏）

S1 工作台

[ ] 5 个 KPI 正确；数字与 seed 一致。
[ ] 5 条待办；点击进入案件详情。
[ ] 6 条动态；时间线只读。
[ ] 角色切换后 KPI/导航变化。
[ ] 1920×1080 无横向滚动。

S2 案件详情

[ ] 11 阶段导航；当前“治疗”高亮。
[ ] 8 个标签；默认概览。
[ ] 清单 8 项；未完成可填原因。
[ ] 推进阶段抽屉；不自动推进。
[ ] 文档预览；C 类徽标。
[ ] 权限/审计入口。

S3 Agent

[ ] 3 个动作；10 秒内出结果。
[ ] 流式输出；引用 chips。
[ ] 插入草稿/采纳/忽略。
[ ] C 类“仅本地”徽标；外部模型禁用。
[ ] 审计记录。

S4 驾驶舱

[ ] 5 个 KPI；7 家所数据。
[ ] 柱状图/环图渲染。
[ ] 风险 Top 10；点击进案件。
[ ] 分所筛选。
[ ] 1920 下图表不重叠。

S5 小程序

[ ] 375×812 正常。
[ ] 只显示公开内容。
[ ] 时间线 3 条；水印。
[ ] 底部 tab 可切换。
[ ] 演示账号标识。

S6 权限/审计

[ ] 5 角色 × 5 模块矩阵。
[ ] 审计 5 条；时间倒序。
[ ] 抽屉不遮挡主内容。

15. 设计交付与协作

15.1 Penpot 页面

页面	内容	负责人
00-Tokens	颜色/字体/间距/圆角	B
01-AppShell	侧栏/顶栏/标签/Agent 面板	B
02-Workbench	工作台	B
03-Case	案件详情/阶段/清单	B
04-Agent	Agent 面板/3 动作	B
05-Cockpit	驾驶舱	B
06-Mini	小程序 5 页	B
07-Compare-Audit	权限矩阵/审计	B

15.2 命名

页面：PC/Workbench、PC/Case、PC/Cockpit、Mini/Cases。
组件：PC/AgentPanel、PC/StageStepper、Common/StatusBadge。
Token：color/primary、text/body、space/24。

15.3 每日交接

B：18:00 前更新 Penpot + 导出 token JSON；A 次日按图实现。
C：18:00 前更新 seed/API；A/B 次日可联调。
A：18:30 前出可点页面；全员看一眼。
周五：完整走 8 分钟脚本；记录问题。

16. 不做什么

不做 80 个页面。
不做完整财务/运营/OA。
不做真实登录/签章/支付/电话。
不做复杂图表联动。
不做移动端 PC 适配。
不用医疗词做界面文案。

17. 附录：seed JSON 示例

{
  "case": {
    "id": "ZA-2026-0318",
    "name": "张某涉嫌合同诈骗案",
    "customer": "张某家属",
    "stage": "治疗",
    "programStage": "审查起诉",
    "risk": "medium",
    "owner": "赵楠",
    "contractAmount": 120000,
    "paidAmount": 60000,
    "pendingAmount": 60000,
    "nextHearing": "2026-11-20"
  },
  "roles": ["客服", "客户经理", "谈案律师", "承办律师", "管理者"],
  "dataClass": "B",
  "demo": true
}

本文为原型设计交付稿；11/08 脚本冻结后，设计变更走变更记录，不直接改演示。