linyuhang
/
PMFlow
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
PMFlow/docs/PMFLOW_UI_CONTRACT.md

18 KiB
Raw Blame History

PMFlow UI Contract

版本日期：2026-04-24

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

1. 总原则

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

核心体验必须稳定为：

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

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

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

2. 品牌与视觉基线

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 标准：

  • 只用于短反馈，不承载关键业务事实、风险证据、确认动作或长文本。
  • 桌面端位置：右上角，避开顶部条，宽度 320-380px，圆角 12px，轻阴影，最多同时展示 3 条。
  • 移动端位置：底部导航上方或顶部安全区下方，不能遮挡底部主 CTA、底部导航和键盘。
  • 默认 3 秒自动消失；错误可延长到 5 秒；带操作按钮的 toast 必须可手动关闭。
  • 文案结构：结果 + 对象，必要时加一句原因；不要写“操作成功”这类空话。
  • 禁止用 toast 询问用户确认；确认必须使用决策栏、确认面板或确认弹窗。

内联提示与页面横幅标准：

  • 内联提示贴近问题位置，优先放在输入框下方、卡片顶部或模块空态中。
  • 页面横幅用于当前页面级状态，放在主画布顶部，背景使用浅色，不抢主 CTA。
  • AI 相关横幅使用浅蓝底和 #2463EB，系统状态使用灰色，待确认使用浅橙或浅蓝，风险只在高风险时使用红色。
  • 横幅必须说明状态、影响和下一步，不只显示标签。

确认弹窗标准：

  • 只用于高影响动作：删除、覆盖、发布、批量写入、权限变更、邀请外部成员、成本/模型配置变更。
  • 桌面端宽度默认 480px；涉及影响范围、证据列表或多选项时可用 640px；不得超过 760px，超过应改为页面或抽屉。
  • 弹窗结构固定为：标题、影响说明、对象/证据摘要、主要动作、次要动作；危险动作按钮使用克制红色。
  • 主按钮文案必须具体，例如 确认写入项目记忆、发布当前版本、删除这条风险，禁止只写 确定。
  • 次要按钮使用 取消、返回修改、暂不处理 等明确动作。
  • 高风险确认必须展示影响范围和可恢复性；不可恢复动作需要二次确认文案或显式对象名。

移动端弹层标准：

  • 移动端优先使用 bottom sheet 或全屏流转，不直接压缩桌面弹窗。
  • 轻量选择、AI 引导、补充一句、筛选使用 bottom sheet。
  • 结构化编辑、草案修改、权限配置使用全屏页或半屏以上 sheet。
  • 底部固定确认按钮必须避开安全区和全局底部导航；键盘弹出时输入区不能被遮挡。

PMFlow 专属规则：

  • AI 生成内容的提示必须带 AI 已生成 或 AI 正在处理，不能伪装成人工结果。
  • 正式写入项目记忆、需求、决策、任务或风险前，必须出现 待你确认 层级，不得只用 toast。
  • AI 操作失败必须给出失败原因、可恢复动作和是否已保留草稿；禁止静默失败。
  • 后台异步任务不能只靠 toast，必须在 AI 正在推进 / 动态 / 右侧副驾 留下可追溯记录。
  • 重要提示要能被再次找到；toast 消失后不可成为唯一证据来源。

4. 桌面布局规则

4.1 启动层

用于 新项目启动台。

结构：

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

规则：

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

4.2 空间层

用于 个人空间首页。

结构：

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

规则：

  • 空间层不是普通项目列表。
  • 核心是“现在有哪些东西可以继续推进”。
  • 不展示团队空间强切换。

4.3 项目层

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

结构：

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

固定项目导航：

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

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

  • 个人空间 / 当前项目名 breadcrumb。
  • 当前阶段。
  • 目标摘要。
  • 当前风险。
  • 待确认数量或当前状态。
  • 必要快速动作。

规则：

  • 点击 个人空间 返回空间层。
  • 点击项目名打开项目切换器。
  • 左侧项目导航只承载项目内功能入口，不放项目切换卡、当前目标卡、最近项目列表或侧栏内新建项目入口；这些信息统一由顶部项目上下文条承载。
  • 项目层左侧栏的基础尺寸与空间层左侧栏保持一致：宽度 244px、内边距 px-5 py-5、背景 #FBFCFF、品牌到首组导航 mt-8、导航组内间距 space-y-2、分组间分割线 my-7、导航项高度 44px、圆角 12px、图标 16px，不得另起一套更宽、更紧或更重的侧栏样式。
  • 项目层页面不能各自发明不同的导航壳。

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 建议内容和将写入内容必须可区分。
  • 待确认项必须展示来源证据和影响范围。

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