30 KiB

Raw Permalink Blame History

PMFlow UI Contract

版本日期：2026-04-24

本文档是 PMFlow 产品 UI 的长期真源。后续原型图、代码化原型、前端实现、移动端适配和验收截图必须以本文档为准。AI 生成图片只能作为方向参考，不能作为最终设计真源。

1. 总原则

PMFlow 的 UI 必须表达“对话驱动的 AI 产品执行操作系统”，而不是传统项目管理后台或普通 AI 聊天页。

核心体验必须稳定为：

用户表达意图 -> AI 自动推进 -> 用户确认落地 -> 系统写入项目真相层 -> 执行与结果回写

后续任何页面都必须先判断自己属于哪一层：

空间层：所有项目、想法、草案、待确认事项和 AI 推进状态的上层入口。
启动层：把想法/材料/模板转成项目草案。
项目层：围绕一个具体项目持续推进对话、结构化提取、待确认、工作图谱、执行桥和项目记忆。
结果层：展示确认、写入、执行、发布、增长等动作结果。

2. 品牌与视觉基线

2.1 Logo

PMFlow Logo 以用户已确认的品牌规范图为唯一方向：

主标识：蓝色几何图标 + 深色 PMFlow 字标。
图标主色：#2463EB。
字标颜色：深色中性黑灰。
图标可独立用于应用图标、侧边栏、favicon、移动端入口和小尺寸场景。
禁止重新发散生成其它 Logo 风格。
空间壳与项目壳左上角品牌头必须统一使用 PMFlowBrandHeader，不得出现一处裸露品牌、一处卡片品牌的双样式漂移。

2.2 色彩

基础色：

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

状态色：

AI 操作：浅蓝底 + #2463EB
待确认：浅橙/浅蓝强调，不使用强警报红作为默认
成功/已写入：克制绿色
风险：低/中/高分级，红色只用于高风险
系统状态：灰色

禁止项：

不使用紫色系 AI 套板。
首版不做暗色模式。
不做营销页式渐变大背景。
不做传统后台的重表格视觉。

2.3 字体与密度

页面标题应克制，适配工具型 SaaS，不使用营销页 hero 级夸张字号。
面板标题、卡片标题和状态说明必须有清晰层级。
字距保持默认，不使用负字距作为主要风格手段。
卡片圆角默认不超过 8-12px，特殊浮层可略大但需克制。
信息密度可以高，但必须通过分组、状态标签和视觉语法降低认知负担。

3. 视觉语法

PMFlow 必须稳定区分四类内容。

类型	含义	视觉表现	用户动作
用户动作	用户主动输入、确认、修改、补充、推进	`#2463EB` 主按钮、明确输入区、固定决策栏	用户主动操作
AI 操作	AI 自动理解、提取、拆解、生成、建议	浅蓝工作流、AI 图标、`AI 正在处理 / AI 已生成` 标签	用户查看、暂停、补充
系统状态	保存、同步、时间、失败、权限、网络	灰色状态、轻提示、日志、错误块	用户重试或返回
待确认	正式写入项目真相层前需要人类拍板	独立分组、`待你确认` 标签、风险/证据/影响范围	接受、修改、暂不落库

状态标签真源：

用户输入
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 启动层

用于 新项目启动台。

结构：

轻量左侧栏 + 顶部轻上下文 + 中央主画布 + 右侧 AI 引导/操作/审查区

规则：

项目创建前不展示完整项目导航。
左侧只保留 PMFlow / 新建项目 / 最近项目 / 模板 / 导入。
顶部只展示 个人空间 / 当前创建状态。
AI 不能直接创建正式项目，必须先生成草案并由用户确认。

4.2 空间层

用于 个人空间首页。

结构：

顶部空间栏 + 左侧空间导航 + 主区域继续推进/待我确认/暂存想法/草案箱 + 右侧 AI 正在推进

规则：

空间层不是普通项目列表。
空间 PMFlow AI 的主体验是 /space/pmflow-ai 工作台：左侧 thread 列表，中间连续 transcript，底部输入框，每条 assistant message 内嵌可折叠工作过程、产物、可继续操作和待确认事项。空间首页继续展示工作雷达和项目上下文；右下角聊天气泡不再作为入口；默认界面不得展示 raw Run、step id、verification target、passed、final_answer 等内部执行字段。
核心是“现在有哪些东西可以继续推进”。
不展示团队空间强切换。

4.3 项目层

用于 项目指挥台 / 本轮结构化提取 / 决策与待确认 / 项目工作台 / 开发执行 / 发布与增长 / 团队层 / 项目记忆。

结构：

左侧完整项目导航 + 顶部项目上下文条 + 中央主画布 + 右侧上下文副驾

固定项目导航：

指挥台
项目工作台
决策与待确认
开发执行
发布与增长
团队层
项目记忆

顶部项目上下文必须包含：

个人空间 / 当前项目名 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 创建前

新项目启动台 / 首次进入 / 草案确认流程 不展示全局底部导航。

结构：

顶部上下文 + 单列主内容 + 底部主 CTA + AI 底部抽屉

5.2 创建后

正式应用壳底部导航固定为 5 项，顺序和命名不得漂移：

空间 / 指挥台 / 待确认 / 动态 / 我的

含义：

空间：所有项目、想法、草案的上层入口。
指挥台：当前项目主工作面。
待确认：AI 生成但需用户拍板的事项。
动态：AI 进展、执行回写、系统事件。
我的：账户、设置和个人偏好。

不进入底部导航：

工作台 / 开发执行 / 发布增长 / 项目记忆

这些通过项目内二级入口、分段切换、更多菜单或卡片入口进入。

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. 共享组件真源

优先沉淀和复用这些组件：

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 生图作为最终实现真源。

30 KiB Raw Permalink Blame History Unescape Escape

PMFlow UI Contract

1. 总原则

2. 品牌与视觉基线

2.1 Logo

2.2 色彩

2.3 字体与密度

3. 视觉语法

3.1 提示、提醒与弹窗标准

4. 桌面布局规则

4.1 启动层

4.2 空间层

4.3 项目层

4.4 表格与列表操作列

4.5 平台表格查询与分页

5. 移动端规则

5.1 创建前

5.2 创建后

6. 核心功能契约

6.1 新项目启动台

6.2 个人空间首页

6.3 项目指挥台

6.4 本轮结构化提取

6.5 决策与待确认

6.6 项目记忆

6.7 项目切换器

7. 共享组件真源

8. 当前前端审计

8.1 已符合契约

8.2 不一致与风险

8.3 最小重构计划

8.4 优先共享组件清单

9. 禁止项

30 KiB

Raw Permalink Blame History