604 lines
30 KiB
Markdown
604 lines
30 KiB
Markdown
# PMFlow UI Contract
|
||
|
||
版本日期：2026-04-24
|
||
|
||
本文档是 PMFlow 产品 UI 的长期真源。后续原型图、代码化原型、前端实现、移动端适配和验收截图必须以本文档为准。AI 生成图片只能作为方向参考，不能作为最终设计真源。
|
||
|
||
## 1. 总原则
|
||
|
||
PMFlow 的 UI 必须表达“对话驱动的 AI 产品执行操作系统”，而不是传统项目管理后台或普通 AI 聊天页。
|
||
|
||
核心体验必须稳定为：
|
||
|
||
```text
|
||
用户表达意图 -> AI 自动推进 -> 用户确认落地 -> 系统写入项目真相层 -> 执行与结果回写
|
||
```
|
||
|
||
后续任何页面都必须先判断自己属于哪一层：
|
||
|
||
- `空间层`：所有项目、想法、草案、待确认事项和 AI 推进状态的上层入口。
|
||
- `启动层`：把想法/材料/模板转成项目草案。
|
||
- `项目层`：围绕一个具体项目持续推进对话、结构化提取、待确认、工作图谱、执行桥和项目记忆。
|
||
- `结果层`：展示确认、写入、执行、发布、增长等动作结果。
|
||
|
||
## 2. 品牌与视觉基线
|
||
|
||
### 2.1 Logo
|
||
|
||
PMFlow Logo 以用户已确认的品牌规范图为唯一方向：
|
||
|
||
- 主标识：蓝色几何图标 + 深色 `PMFlow` 字标。
|
||
- 图标主色：`#2463EB`。
|
||
- 字标颜色：深色中性黑灰。
|
||
- 图标可独立用于应用图标、侧边栏、favicon、移动端入口和小尺寸场景。
|
||
- 禁止重新发散生成其它 Logo 风格。
|
||
- 空间壳与项目壳左上角品牌头必须统一使用 `PMFlowBrandHeader`，不得出现一处裸露品牌、一处卡片品牌的双样式漂移。
|
||
|
||
### 2.2 色彩
|
||
|
||
基础色：
|
||
|
||
```text
|
||
primary: #2463EB
|
||
background: #FFFFFF
|
||
surface: #FFFFFF
|
||
surface-subtle: #F8FAFF / #FBFCFF
|
||
border: #E6EDF7 / #DFE7F3
|
||
text-primary: slate-950
|
||
text-secondary: slate-600
|
||
text-muted: slate-500 / slate-400
|
||
```
|
||
|
||
状态色：
|
||
|
||
```text
|
||
AI 操作：浅蓝底 + #2463EB
|
||
待确认：浅橙/浅蓝强调，不使用强警报红作为默认
|
||
成功/已写入：克制绿色
|
||
风险：低/中/高分级，红色只用于高风险
|
||
系统状态：灰色
|
||
```
|
||
|
||
禁止项：
|
||
|
||
- 不使用紫色系 AI 套板。
|
||
- 首版不做暗色模式。
|
||
- 不做营销页式渐变大背景。
|
||
- 不做传统后台的重表格视觉。
|
||
|
||
### 2.3 字体与密度
|
||
|
||
- 页面标题应克制，适配工具型 SaaS，不使用营销页 hero 级夸张字号。
|
||
- 面板标题、卡片标题和状态说明必须有清晰层级。
|
||
- 字距保持默认，不使用负字距作为主要风格手段。
|
||
- 卡片圆角默认不超过 `8-12px`，特殊浮层可略大但需克制。
|
||
- 信息密度可以高，但必须通过分组、状态标签和视觉语法降低认知负担。
|
||
|
||
## 3. 视觉语法
|
||
|
||
PMFlow 必须稳定区分四类内容。
|
||
|
||
| 类型 | 含义 | 视觉表现 | 用户动作 |
|
||
| --- | --- | --- | --- |
|
||
| 用户动作 | 用户主动输入、确认、修改、补充、推进 | `#2463EB` 主按钮、明确输入区、固定决策栏 | 用户主动操作 |
|
||
| AI 操作 | AI 自动理解、提取、拆解、生成、建议 | 浅蓝工作流、AI 图标、`AI 正在处理 / AI 已生成` 标签 | 用户查看、暂停、补充 |
|
||
| 系统状态 | 保存、同步、时间、失败、权限、网络 | 灰色状态、轻提示、日志、错误块 | 用户重试或返回 |
|
||
| 待确认 | 正式写入项目真相层前需要人类拍板 | 独立分组、`待你确认` 标签、风险/证据/影响范围 | 接受、修改、暂不落库 |
|
||
|
||
状态标签真源：
|
||
|
||
```text
|
||
用户输入
|
||
AI 正在处理
|
||
AI 已生成
|
||
待你确认
|
||
已确认
|
||
已写入项目记忆
|
||
系统已保存
|
||
生成失败
|
||
```
|
||
|
||
规则：
|
||
|
||
- `AI 已生成` 不等于 `已确认`。
|
||
- `待你确认` 不等于普通通知。
|
||
- `已写入项目记忆` 只能在用户确认后出现。
|
||
- 高风险内容必须展示证据和影响范围，不能只有标签。
|
||
|
||
### 3.1 提示、提醒与弹窗标准
|
||
|
||
PMFlow 的反馈系统必须服务于“AI 推进、人类拍板、系统留痕”，不能用通用后台式弹窗打断流程。所有提示先判断层级，再选择组件。
|
||
|
||
反馈层级：
|
||
|
||
| 层级 | 使用场景 | 推荐形态 | 是否打断用户 |
|
||
| --- | --- | --- | --- |
|
||
| 轻提示 | 保存成功、复制成功、普通同步完成、非关键操作反馈 | Toast | 不打断 |
|
||
| 内联提示 | 表单字段错误、当前卡片缺证据、某个模块需要补充信息 | InlineNotice / FieldMessage | 不打断 |
|
||
| 页面横幅 | 当前页面级状态，如 AI 正在生成、草案未确认、自动保存开启、权限只读 | PageBanner | 不打断，但应持续可见 |
|
||
| AI 操作流 | AI 正在理解、提取、拆解、回写、失败重试 | AIOperationFeed / 右侧副驾 | 不打断，持续记录 |
|
||
| 待确认提醒 | AI 生成内容即将写入项目记忆、影响范围较大、需要人类拍板 | HumanDecisionBar / ConfirmPanel | 半打断，必须明确决策 |
|
||
| 确认弹窗 | 删除、覆盖、发布、邀请、权限变更、成本上限调整等不可逆或高影响动作 | ConfirmDialog | 打断 |
|
||
| 任务弹窗 | 创建/编辑需求、任务、风险、集成配置等结构化录入 | FormDialog / Drawer | 轻打断 |
|
||
| 结果页/过渡态 | 项目创建成功、批量写入完成、发布完成、导入完成 | ResultPanel / SuccessTransition | 不用普通弹窗替代 |
|
||
|
||
Toast 标准：
|
||
|
||
- 只用于短反馈，不承载关键业务事实、风险证据、确认动作或长文本。
|
||
- 表格/矩阵行级短操作如连接测试、能力探测、启停、保存完成，应优先使用 toast 返回结果；不要在主信息区插入临时横幅，避免挤占列表和诊断信息。
|
||
- 桌面端位置：右上角，避开顶部条，宽度 `320-380px`，圆角 `12px`，轻阴影，最多同时展示 3 条。
|
||
- 移动端位置：底部导航上方或顶部安全区下方，不能遮挡底部主 CTA、底部导航和键盘。
|
||
- 默认 3 秒自动消失；错误可延长到 5 秒；带操作按钮的 toast 必须可手动关闭。
|
||
- 文案结构：`结果 + 对象`，必要时加一句原因；不要写“操作成功”这类空话。
|
||
- 禁止用 toast 询问用户确认；确认必须使用决策栏、确认面板或确认弹窗。
|
||
|
||
内联提示与页面横幅标准：
|
||
|
||
- 内联提示贴近问题位置，优先放在输入框下方、卡片顶部或模块空态中。
|
||
- 页面横幅用于当前页面级状态，放在主画布顶部，背景使用浅色，不抢主 CTA。
|
||
- 会刷新整张列表、摘要或路由状态的操作进行中，必须覆盖当前页面内容区并给出不可操作态；推荐使用半透明玻璃遮罩 + 简短状态文案（如 `连接测试中`、`能力探测中`），完成后用 toast 返回结果。只有完全局部、不会影响其它行的操作，才使用行/卡片级遮罩。
|
||
- AI 相关横幅使用浅蓝底和 `#2463EB`，系统状态使用灰色，待确认使用浅橙或浅蓝，风险只在高风险时使用红色。
|
||
- 横幅必须说明状态、影响和下一步，不只显示标签。
|
||
|
||
确认弹窗标准：
|
||
|
||
- 只用于高影响动作：删除、覆盖、发布、批量写入、权限变更、邀请外部成员、成本/模型配置变更。
|
||
- 桌面端宽度默认 `480px`；涉及影响范围、证据列表或多选项时可用 `640px`；不得超过 `760px`，超过应改为页面或抽屉。
|
||
- 弹窗高度必须限制在视口内，默认不超过 `86vh`；标题区固定可见，正文使用内部滚动，不得让长文本、表格、代码块或 JSON 内容撑出弹窗边界。
|
||
- 长文本、代码块和 JSON 区块必须有自身最大高度和 `overflow-auto`，允许在区块内上下滑动；禁止依赖页面外层滚动来查看弹窗内容。
|
||
- 弹窗结构固定为：标题、影响说明、对象/证据摘要、主要动作、次要动作；危险动作按钮使用克制红色。
|
||
- 主按钮文案必须具体，例如 `确认写入项目记忆`、`发布当前版本`、`删除这条风险`，禁止只写 `确定`。
|
||
- 次要按钮使用 `取消`、`返回修改`、`暂不处理` 等明确动作。
|
||
- 高风险确认必须展示影响范围和可恢复性；不可恢复动作需要二次确认文案或显式对象名。
|
||
|
||
移动端弹层标准：
|
||
|
||
- 移动端优先使用 bottom sheet 或全屏流转，不直接压缩桌面弹窗。
|
||
- 轻量选择、AI 引导、补充一句、筛选使用 bottom sheet。
|
||
- 结构化编辑、草案修改、权限配置使用全屏页或半屏以上 sheet。
|
||
- 底部固定确认按钮必须避开安全区和全局底部导航；键盘弹出时输入区不能被遮挡。
|
||
|
||
PMFlow 专属规则：
|
||
|
||
- AI 生成内容的提示必须带 `AI 已生成` 或 `AI 正在处理`，不能伪装成人工结果。
|
||
- 正式写入项目记忆、需求、决策、任务或风险前，必须出现 `待你确认` 层级，不得只用 toast。
|
||
- AI 操作失败必须给出失败原因、可恢复动作和是否已保留草稿；禁止静默失败。
|
||
- 后台异步任务不能只靠 toast，必须在 `AI 正在推进 / 动态 / 右侧副驾` 留下可追溯记录。
|
||
- 重要提示要能被再次找到；toast 消失后不可成为唯一证据来源。
|
||
|
||
## 4. 桌面布局规则
|
||
|
||
### 4.1 启动层
|
||
|
||
用于 `新项目启动台`。
|
||
|
||
结构：
|
||
|
||
```text
|
||
轻量左侧栏 + 顶部轻上下文 + 中央主画布 + 右侧 AI 引导/操作/审查区
|
||
```
|
||
|
||
规则：
|
||
|
||
- 项目创建前不展示完整项目导航。
|
||
- 左侧只保留 `PMFlow / 新建项目 / 最近项目 / 模板 / 导入`。
|
||
- 顶部只展示 `个人空间 / 当前创建状态`。
|
||
- AI 不能直接创建正式项目，必须先生成草案并由用户确认。
|
||
|
||
### 4.2 空间层
|
||
|
||
用于 `个人空间首页`。
|
||
|
||
结构：
|
||
|
||
```text
|
||
顶部空间栏 + 左侧空间导航 + 主区域继续推进/待我确认/暂存想法/草案箱 + 右侧 AI 正在推进
|
||
```
|
||
|
||
规则：
|
||
|
||
- 空间层不是普通项目列表。
|
||
- 空间 PMFlow AI 的主体验是 `/space/pmflow-ai` 工作台：左侧 thread 列表，中间连续 transcript，底部输入框，每条 assistant message 内嵌可折叠工作过程、产物、可继续操作和待确认事项。空间首页继续展示工作雷达和项目上下文；右下角聊天气泡不再作为入口；默认界面不得展示 raw Run、step id、verification target、`passed`、`final_answer` 等内部执行字段。
|
||
- 核心是“现在有哪些东西可以继续推进”。
|
||
- 不展示团队空间强切换。
|
||
|
||
### 4.3 项目层
|
||
|
||
用于 `项目指挥台 / 本轮结构化提取 / 决策与待确认 / 项目工作台 / 开发执行 / 发布与增长 / 团队层 / 项目记忆`。
|
||
|
||
结构：
|
||
|
||
```text
|
||
左侧完整项目导航 + 顶部项目上下文条 + 中央主画布 + 右侧上下文副驾
|
||
```
|
||
|
||
固定项目导航：
|
||
|
||
```text
|
||
指挥台
|
||
项目工作台
|
||
决策与待确认
|
||
开发执行
|
||
发布与增长
|
||
团队层
|
||
项目记忆
|
||
```
|
||
|
||
顶部项目上下文必须包含：
|
||
|
||
- `个人空间 / 当前项目名` breadcrumb。
|
||
- 当前阶段。
|
||
- 目标摘要。
|
||
- 当前风险。
|
||
- 待确认数量或当前状态。
|
||
- 必要快速动作。
|
||
|
||
规则：
|
||
|
||
- 点击 `个人空间` 返回空间层。
|
||
- 点击项目名打开项目切换器。
|
||
- 左侧项目导航只承载项目内功能入口，不放项目切换卡、当前目标卡、最近项目列表或侧栏内新建项目入口；这些信息统一由顶部项目上下文条承载。
|
||
- 项目层左侧栏的基础尺寸与空间层左侧栏保持一致：宽度 `244px`、内边距 `px-5 py-5`、背景 `#FBFCFF`、品牌到首组导航 `mt-8`、导航组内间距 `space-y-2`、分组间分割线 `my-7`、导航项高度 `44px`、圆角 `12px`、图标 `16px`，不得另起一套更宽、更紧或更重的侧栏样式。
|
||
- 项目层页面不能各自发明不同的导航壳。
|
||
|
||
项目级 AI 副驾 UI 规则：
|
||
|
||
- 项目层右侧副驾统一由 `frontend/src/features/pmflow-os/components/ProjectCopilot.tsx` 承接；页面只传 `surface`、跳转回调和必要动作，不再各自发明静态 AI 右栏。
|
||
- 桌面右侧副驾宽度统一为 `390px`，内边距统一为 `p-7`，输入框高度、发送按钮、分段控件和信息密度以指挥台副驾为基准；左侧菜单对应页面不得各自使用 `320/340/360/380px` 的副驾变体。
|
||
- `开发执行` 与 `发布与增长` 等重工作台页面也必须使用白底项目工作面，不得在项目壳内部再套一层浅灰页面背景；桌面宽屏下页面外层锁定到视口剩余高度，中间工作区 `overflow-y-auto`，右侧 AI 副驾 `h-full` 且内部独立滚动，不能被执行源包、发布表单或其它辅助卡片挤到下方。
|
||
- 副驾必须先呈现可切换的 `上下文锚点`，明确当前绑定的是项目、变更集、变更项、任务或发布信号；`解释 / 建议 / 审查` 只是在同一锚点下切换 AI 工作模式，不能暗中切换业务对象。
|
||
- 从 Space Attention Queue 或其它跨页入口进入项目页时，URL 参数必须能恢复副驾当前锚点：`changeSetId + itemId` 定位变更项，`taskId` 定位执行任务，`releaseId` 定位发布对象，`evidenceId` 定位执行/发布回流证据；不得只打开项目页面后让副驾回退到项目全局。
|
||
- 副驾必须在生成本地回答、动作建议或发送用户输入前先构建 `project_copilot_context_packet.v1` 的客户安全投影，至少包含当前项目、surface、对象锚点、truth projection、ChangeSet/Execution/Release 子上下文、允许动作、禁止动作、限制和动作层级；UI 可以中文化展示为“项目真相绑定”，但不得退回无对象泛聊天。
|
||
- 上下文锚点切换不能一次性铺满历史对象；桌面右栏必须支持搜索、限量分页、总数与页码提示，并在每条锚点上展示对象类型、状态和时间，避免数据库对象增长后把副驾变成无边界列表。
|
||
- 副驾当前锚点、上下文范围和当前锚点对话必须展示时间；完整日期时间统一展示为 `YYYY-MM-DD HH:mm`，禁止把 ISO 原始串直接暴露给用户。对象自身没有时间字段时，最多只能使用同类项目动态的最近时间或明确展示为当前态，禁止伪造时间。
|
||
- 副驾输入必须带 `追问 / 补充 / 指令` 意图：追问只解释，补充只暂挂到当前锚点并生成候选语义，指令只生成动作建议；任何项目事实写入、执行或发布仍必须回到对应确认链路。
|
||
- 副驾必须固定呈现 `上下文锚点 / 当前范围 / AI 判断或建议动作 / 证据与缺口 / 当前锚点对话 / 输入`，避免页面之间一会儿是聊天框、一会儿是营销式建议卡、一会儿是 mock 分析报告。
|
||
- 副驾动作必须对应 Action Ladder：解释类是 `Answer`，生成候选是 `Draft`，确认写入必须回 `ChangeReviewPage`，执行类必须回 `ExecutionBridgePage`，发布/增长类只能进入验证或下一轮 ChangeSet draft。
|
||
- 空态必须表达真实缺口，例如没有待确认、没有证据、没有正式任务、没有 release signal；禁止用示例报告、虚构风险、虚构 reviewer 或 demo 成功数据补位。
|
||
- 移动端项目副驾优先走全局抽屉或当前页面 bottom sheet，不压缩成页面内长卡片；桌面宽屏可在右栏常驻。
|
||
- 客户视图不得展示 provider、model、trace、prompt body、raw source label 或后台 agent 标签；只展示业务中文化状态、证据摘要和可继续动作。
|
||
|
||
### 4.4 表格与列表操作列
|
||
|
||
PMFlow 的表格、矩阵和列表行操作必须避免横向堆满按钮。操作列统一遵守“一个主操作 + 更多菜单”标准。
|
||
|
||
规则：
|
||
|
||
- 每行只有 1 个可用操作时，直接显示该操作按钮。
|
||
- 每行有 2 个及以上操作时，操作列只显示第 1 个主操作按钮，第 2 个位置固定显示 `更多` 按钮；其余操作全部放入 `更多` 菜单。
|
||
- `更多` 菜单必须使用标准 dropdown menu，不得用多个次级按钮继续横向排列。
|
||
- 第 1 个主操作必须是该行最常用、最符合当前状态的动作，例如 `配置运行时`、`停用/启用`、`查看场景`、`处理风险`。
|
||
- 危险动作如 `删除` 只能放在 `更多` 菜单内，并使用克制红色；除非该页面唯一动作就是删除，否则不得作为首个主操作。
|
||
- 行操作必须跟随后端状态合同，只渲染当前状态下可执行的动作；不可执行动作不要以 disabled 按钮占位。供应商与凭据必须优先消费后端 `available_actions`，例如未通过连接测试不能显示 `设为兜底` / `能力探测`，已停用只显示 `启用`、`编辑` 和允许时的 `删除`。
|
||
- 操作列应固定在表格右侧时保持宽度稳定，避免因按钮数量变化导致列宽、行高或横向滚动抖动。
|
||
- 该标准适用于平台 AI 运行层的 `供应商与凭据`、`能力槽位`、`业务场景路由`，也适用于后续其它 PMFlow 表格/矩阵操作列。
|
||
|
||
### 4.5 平台表格查询与分页
|
||
|
||
PMFlow 平台运营类表格必须使用统一的查询卡片和分页栏，避免同一控制台内出现多套筛选、页码和页容量样式。
|
||
|
||
查询条件标准：
|
||
|
||
- 查询区统一使用标题为 `查询条件` 的折叠卡片，外层为 `rounded-xl border border-slate-200 bg-white`。
|
||
- 卡片标题行固定为左侧 `查询条件`、右侧 `收起 / 展开`，点击标题行切换展开状态。
|
||
- 展开内容使用 `border-t border-slate-100 px-4 pb-4 pt-3`，字段使用 `Label + Input/select`，select 高度为 `h-10`、`rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-900`。
|
||
- 筛选输入默认进入 draft 状态，只有点击蓝色 `查询` 按钮后才提交；不得在用户每输入一个字符时立即触发列表请求。
|
||
- `查询 / 重置` 按钮必须独立成一行固定放在查询卡片展开区右下角，使用 `mt-4 flex justify-end gap-2`；不得混入字段 grid，也不得放在第一行字段右侧。
|
||
- `查询` 使用主按钮样式 `rounded-xl bg-[#2463EB] text-white hover:bg-[#1f58d5]`；`重置` 使用 outline `rounded-xl`。
|
||
- 提交查询后可收起查询卡，列表上方不再额外放一套筛选按钮。
|
||
|
||
分页标准：
|
||
|
||
- 表格底部统一使用 `flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-3`。
|
||
- 左侧文案统一为 `共 N 条，当前 A-B`。
|
||
- 右侧顺序固定为：`10条/页` 下拉、`上一页`、`当前页 / 总页`、`下一页`。
|
||
- 页容量可选项统一为 `10条/页 / 20条/页 / 50条/页`。
|
||
- 当前页展示使用 `rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700`。
|
||
- 该标准适用于 `/platform/*` 下所有表格型页面，包括 `供应商与凭据`、`能力槽位`、`业务场景路由`、`AI 调用审计` 及后续平台治理列表。
|
||
|
||
## 5. 移动端规则
|
||
|
||
### 5.1 创建前
|
||
|
||
`新项目启动台 / 首次进入 / 草案确认流程` 不展示全局底部导航。
|
||
|
||
结构：
|
||
|
||
```text
|
||
顶部上下文 + 单列主内容 + 底部主 CTA + AI 底部抽屉
|
||
```
|
||
|
||
### 5.2 创建后
|
||
|
||
正式应用壳底部导航固定为 5 项，顺序和命名不得漂移：
|
||
|
||
```text
|
||
空间 / 指挥台 / 待确认 / 动态 / 我的
|
||
```
|
||
|
||
含义：
|
||
|
||
- `空间`：所有项目、想法、草案的上层入口。
|
||
- `指挥台`：当前项目主工作面。
|
||
- `待确认`：AI 生成但需用户拍板的事项。
|
||
- `动态`：AI 进展、执行回写、系统事件。
|
||
- `我的`：账户、设置和个人偏好。
|
||
|
||
不进入底部导航：
|
||
|
||
```text
|
||
工作台 / 开发执行 / 发布增长 / 项目记忆
|
||
```
|
||
|
||
这些通过项目内二级入口、分段切换、更多菜单或卡片入口进入。
|
||
|
||
## 6. 核心功能契约
|
||
|
||
### 6.1 新项目启动台
|
||
|
||
功能定位：把一句想法、材料或模板交给 AI，生成结构化项目草案。
|
||
|
||
状态列表：
|
||
|
||
- 意图输入态
|
||
- AI 工作态
|
||
- 人类确认态
|
||
- 草案修改态
|
||
- 生成失败态
|
||
- 创建成功过渡态
|
||
- 移动端意图输入态
|
||
- 移动端 AI 工作态
|
||
- 移动端人类确认态
|
||
|
||
不可变项：
|
||
|
||
- 主流程固定为 `用户表达意图 -> AI 自动推进 -> 用户确认落地`。
|
||
- AI 不直接创建正式项目。
|
||
- 默认个人空间，不出现团队空间强选择。
|
||
- 不展示完整复杂项目导航。
|
||
|
||
### 6.2 个人空间首页
|
||
|
||
功能定位：空间层入口，管理所有项目、想法、草案、待确认事项和 AI 正在推进的工作。
|
||
|
||
固定区域：
|
||
|
||
- 继续推进
|
||
- 待我确认
|
||
- AI 正在推进
|
||
- 暂存想法
|
||
- 草案箱
|
||
- 新建项目入口
|
||
|
||
不可变项：
|
||
|
||
- 不做成传统项目列表。
|
||
- 不做团队组织后台。
|
||
- 不承载项目内完整工作台功能。
|
||
|
||
### 6.3 项目指挥台
|
||
|
||
功能定位：具体项目的主工作面，承载对话、结构化提取、待确认入口和下一步动作。
|
||
|
||
固定区域：
|
||
|
||
- 项目对话
|
||
- 本轮结构化提取
|
||
- 下一步建议
|
||
- 上下文副驾
|
||
|
||
不可变项：
|
||
|
||
- 不是普通聊天页。
|
||
- AI 生成内容必须先进入待确认或提取态。
|
||
- 只有确认后才能显示写入项目记忆。
|
||
|
||
### 6.4 本轮结构化提取
|
||
|
||
功能定位：展示 AI 从本轮对话中生成的候选项目对象。
|
||
|
||
对象分组：
|
||
|
||
- 需求
|
||
- 风险
|
||
- 决策
|
||
- 任务
|
||
- 关联证据
|
||
|
||
不可变项：
|
||
|
||
- 尚未写入项目记忆。
|
||
- 必须展示证据、置信度、影响范围和确认需求。
|
||
|
||
### 6.5 决策与待确认
|
||
|
||
功能定位：业务对象确认台，不是传统审批流。
|
||
|
||
固定动作：
|
||
|
||
- 接受
|
||
- 修改
|
||
- 暂不落库
|
||
- 拒绝
|
||
- 批量接受
|
||
- 稍后处理
|
||
- 请求审查
|
||
- 通过审查
|
||
- 要求修改
|
||
- 确认写入项目记忆
|
||
|
||
不可变项：
|
||
|
||
- AI 建议内容和将写入内容必须可区分。
|
||
- 待确认项必须展示来源证据和影响范围。
|
||
- `接受 / 修改 / 暂不落库 / 拒绝` 只处理候选 ChangeItem，不写 Project Memory。
|
||
- `确认写入项目记忆` 是唯一正式写入动作，必须在待写入项审查完成、必要角色审查满足、证据可追溯后才显示为可执行。
|
||
- 团队层只能展示审查路由、审查进展、阻塞原因和跳转入口，不在团队层直接提供写入 Project Memory 的按钮。
|
||
|
||
按钮使用限制：
|
||
|
||
| 按钮 | 使用场景 | 不允许出现或执行的场景 |
|
||
| --- | --- | --- |
|
||
| `接受` | 用户认可 AI 候选项原文，可进入待写入集合 | ChangeSet 已 committed；item 已 rejected / committed / skipped；缺必需 evidence；高风险且尚未满足 required reviewer gate |
|
||
| `修改` | 候选项方向正确但字段、范围、优先级、验收标准或风险说明需要人工修订 | ChangeSet 已 committed；item 已 committed / skipped；对象类型当前不支持编辑；修改后 payload 无法满足对象合同 |
|
||
| `暂不落库` | 内容可能有用，但当前证据不足、时机不对、范围暂不纳入；保留审计并允许后续恢复处理 | 用户已经明确拒绝；ChangeSet 已 committed；该项已写入 Project Memory |
|
||
| `拒绝` | AI 误读、证据错误、方向错误、重复或不应进入项目真相层；作为 terminal discard 进入审计 | 只是暂时不做或信息不足时不得用拒绝，应使用 `暂不落库` 或 `要求修改` |
|
||
| `批量接受` | 多个低风险、证据充分、同类且不需要角色审查的候选项可一次进入待写入集合 | 包含高风险、跨角色、缺证据、unsupported object type、已 requested changes / rejected 的项 |
|
||
| `稍后处理` | 用户现在不处理队列，只保留 pending 状态并可调整提醒 / 排序 | 不改变 ChangeItem 审查状态，不得被后端当成 approval、defer 或 reject |
|
||
| `请求审查` | 负责人需要产品、技术、QA、增长等角色对同一 ChangeSet 异步审查 | 单人低风险项不强制；缺 reviewer 时只显示阻塞 / 邀请 / 配置入口，不虚构 reviewer |
|
||
| `通过审查` | reviewer 确认候选变更质量可进入 accepted / approval gate | 不写 Project Memory，不创建正式任务，不触发执行桥 |
|
||
| `要求修改` | reviewer 认为方向可接受但需补字段、证据、范围或验收标准 | 不应把 item 终止；应回到 owner 修改后再次审查 |
|
||
| `确认写入项目记忆` | accepted / edited 项通过 gate 后，由负责人把它们 atomic commit 到 Project Memory / Work Graph | 仍有 pending required review、没有 accepted / edited item、高风险缺 approval、对象类型不支持、证据缺失或 ChangeSet 已 committed |
|
||
|
||
写入后的执行入口限制：
|
||
|
||
- `发起执行交接 / 推送到 IDE / 分派给 agent` 只能出现在正式 Task 已由 Project Memory commit 产生或更新之后。
|
||
- 候选 Task 在 ChangeSet 阶段可以展示“预计执行模式 / 建议 reviewer / 建议 agent”，但按钮必须是预览或不可执行状态。
|
||
- 执行动作必须说明执行模式、责任人或 agent、上下文包、repo / runtime 准备度、测试与回写证据；缺任一关键条件时显示阻塞原因和下一步，不显示可执行主按钮。
|
||
|
||
### 6.6 项目记忆
|
||
|
||
功能定位：项目唯一可信事实层，承载已确认事实、决策、约束、证据和可复用上下文。
|
||
|
||
状态列表：
|
||
|
||
- 项目记忆主视图
|
||
- 项目记忆写入结果态
|
||
|
||
共享对象分类：
|
||
|
||
- 已确认事实
|
||
- 需求与范围
|
||
- 决策
|
||
- 约束与风险
|
||
- 证据来源
|
||
- 上下文包
|
||
- 最近写入
|
||
|
||
不可变项：
|
||
|
||
- `项目记忆主视图` 与 `项目记忆写入结果态` 必须共享同一个项目壳、对象分类、状态标签和证据语义。
|
||
- 写入结果态是项目记忆的状态页，不是另一套新功能。
|
||
|
||
### 6.7 项目切换器
|
||
|
||
功能定位：项目层内快速切换项目、暂存想法、草案和新建项目。
|
||
|
||
固定分组：
|
||
|
||
- 当前项目
|
||
- 最近项目
|
||
- 暂存想法
|
||
- 草案箱
|
||
- 新建项目
|
||
- 搜索入口
|
||
|
||
不可变项：
|
||
|
||
- 不是团队空间切换器。
|
||
- 切换项目不应中断 AI 正在推进的任务。
|
||
|
||
## 7. 共享组件真源
|
||
|
||
优先沉淀和复用这些组件：
|
||
|
||
```text
|
||
PMFlowLogo / PMFlowBrand / PMFlowBrandHeader
|
||
PMFlowShell
|
||
PMFlowMobileShell
|
||
StatusLabel
|
||
AIOperationFeed
|
||
EvidenceSnippet
|
||
HumanDecisionBar
|
||
ObjectChangeCard
|
||
ProjectContextBar
|
||
AICopilotPanel
|
||
MobileBottomNav
|
||
ProjectSwitcher
|
||
ProjectMemoryBlock
|
||
Toast
|
||
InlineNotice
|
||
PageBanner
|
||
ConfirmDialog
|
||
FormDialog
|
||
MobileBottomSheet
|
||
```
|
||
|
||
规则：
|
||
|
||
- 新功能优先复用这些组件，不重新发明状态标签、导航或 AI 操作流。
|
||
- 如果需要新增组件，必须先判断能否作为共享组件沉淀。
|
||
|
||
## 8. 当前前端审计
|
||
|
||
### 8.1 已符合契约
|
||
|
||
- `frontend/src/features/project-launch/` 已具备本地状态机和 6 个桌面状态、3 个移动状态的基础结构。
|
||
- `frontend/src/features/project-launch/types.ts` 已定义 `LaunchStage / LaunchInput / AIWorkStep / AIOperationItem / ProjectDraft` 等结构。
|
||
- `frontend/src/features/personal-space/` 已覆盖继续推进、待我确认、AI 正在推进、暂存想法、草案箱和新建项目入口。
|
||
- `frontend/src/features/pmflow-os/components/MobileBottomNav.tsx` 已收敛正式应用壳移动端底部导航，固定为 `空间 / 指挥台 / 待确认 / 动态 / 我的`，并按当前路由计算 active 状态。
|
||
- `frontend/src/features/pmflow-os/components/FeedbackPrimitives.tsx` 已沉淀 `PageBanner / InlineNotice / HumanDecisionBar / ConfirmDialog / MobileBottomSheet`，用于页面级状态、局部提示、人类决策栏、高影响确认和移动端 bottom sheet。
|
||
- `frontend/src/features/pmflow-os/types.ts` 已定义 `Thread / ChangeSet / ChangeItem / Evidence / Approval / Requirement / Decision / Task / Risk / ProjectTruthState` 等项目真相层对象。
|
||
- `frontend/src/features/pmflow-os/components/chrome.tsx` 已沉淀 `PMFlowMark / PMFlowBrand / PMFlowBrandHeader / SurfacePill / ToneChip` 等部分基础视觉组件。
|
||
- `frontend/src/features/pmflow-os/components/ProjectCopilot.tsx` 已沉淀项目级 AI 副驾，统一承接项目壳弹出副驾，以及 `CommandCenter / WorkGraph / ProjectMemory / TeamLayer / ReleaseGrowth / ExecutionBridge` 的上下文副驾投影。
|
||
- `frontend/src/features/pmflow-os/pages/ProjectMemoryPage.tsx` 与 `MemoryWritebackResultPage.tsx` 已分别具备项目记忆主视图和写入结果态雏形。
|
||
|
||
### 8.2 不一致与风险
|
||
|
||
- `ProjectMemoryPage.tsx` 的对象分类还不完整，缺少 `需求与范围 / 上下文包 / 最近写入` 的稳定分区。
|
||
- `ProjectMemoryPage.tsx` 与 `MemoryWritebackResultPage.tsx` 共享语义不足，写入结果态更像独立结果页，后续需要在项目记忆契约下统一。
|
||
- 状态标签存在多套实现：`statusPill / SurfacePill / ToneChip / StatusLabel`，应收敛为统一 `StatusLabel` 语义组件。
|
||
- `AI 操作 / 用户动作 / 系统状态 / 待确认` 的视觉语法目前分散在页面代码里，缺少共享约束组件。
|
||
- 提示、提醒和弹窗已有 PMFlow OS 产品域的初版共享组件层级，但旧后台、AI Steward 和部分历史页面仍未全面迁移；关键业务确认仍需持续避免落入 toast。
|
||
|
||
### 8.3 最小重构计划
|
||
|
||
第一步：不改页面结构，只修正一致性风险。
|
||
|
||
- 移动端底部导航已统一为 `空间 / 指挥台 / 待确认 / 动态 / 我的`。
|
||
- `MobileBottomNav` 已抽出为共享组件，后续正式应用壳不得再重复实现底部导航。
|
||
- `FeedbackPrimitives` 已抽出 PMFlow OS 反馈组件，新增页面级提示、内联提示、确认弹窗、移动端 bottom sheet 和人类决策栏时优先复用。
|
||
- 统一状态标签命名和 tone。
|
||
|
||
第二步：统一项目记忆功能。
|
||
|
||
- 将 `ProjectMemoryPage` 明确为项目记忆主视图。
|
||
- 将 `MemoryWritebackResultPage` 明确为项目记忆写入结果态。
|
||
- 共享对象分类、证据组件、写入状态标签和右侧建议区规则。
|
||
|
||
第三步：统一项目层壳。
|
||
|
||
- `CommandCenter / StructuredExtraction / ChangeReview / ProjectMemory / MemoryWritebackResult` 必须复用同一个项目壳、顶部上下文和移动端导航。
|
||
|
||
### 8.4 优先共享组件清单
|
||
|
||
优先级 P0：
|
||
|
||
- `MobileBottomNav`
|
||
- `StatusLabel`
|
||
- `EvidenceSnippet`
|
||
- `ObjectChangeCard`
|
||
- `ProjectContextBar`
|
||
- `InlineNotice`
|
||
- `PageBanner`
|
||
- `ConfirmDialog`
|
||
|
||
优先级 P1：
|
||
|
||
- `AIOperationFeed`
|
||
- `HumanDecisionBar`
|
||
- `MobileBottomSheet`
|
||
- `FormDialog`
|
||
- `AICopilotPanel`
|
||
- `ProjectSwitcher`
|
||
- `ProjectMemoryBlock`
|
||
|
||
## 9. 禁止项
|
||
|
||
- 禁止同一功能在不同线程或不同轮次重新画成另一套页面。
|
||
- 禁止把状态页当成新功能页重新设计。
|
||
- 禁止移动端底部导航漂移。
|
||
- 禁止 AI 生成内容未经确认就显示为已确认事实。
|
||
- 禁止为了追求“AI 感”引入紫色、深色、光效或营销页式装饰。
|
||
- 禁止用 AI 生图作为最终实现真源。
|