diff --git a/docs/design/ui/README.md b/docs/design/ui/README.md index 387d967..a0b549c 100644 --- a/docs/design/ui/README.md +++ b/docs/design/ui/README.md @@ -46,13 +46,13 @@ ## 二、索引 -### Wireframes(静态线框图,10 张) +### Wireframes(静态线框图,10 + 5 张) | # | 文件 | 主题 | |---|------|------| | 1 | [main-three-pane.md](./wireframes/01-main-three-pane.md) | 主视图(侧边栏 + 聊天 + Artifact) | | 2 | [setup-wizard.md](./wireframes/02-setup-wizard.md) | 首次启动 4 步向导 | -| 3 | [settings.md](./wireframes/03-settings.md) | 设置页(General / Provider / Shortcuts / Experimental) | +| 3 | [settings.md](./wireframes/03-settings.md) | 设置页(通用 / 供应商 / 快捷键 / 实验性) | | 4 | [slash-command-palette.md](./wireframes/04-slash-command-palette.md) | 斜杠命令浮层 | | 5 | [artifact-panel-expanded.md](./wireframes/05-artifact-panel-expanded.md) | Artifact 全屏详情 | | 6 | [provider-switcher.md](./wireframes/06-provider-switcher.md) | 供应商切换浮层 | @@ -60,6 +60,8 @@ | 8 | [conversation-context-menu.md](./wireframes/08-conversation-context-menu.md) | 会话右键菜单 + 收藏 + 分组 | | 9 | [empty-states.md](./wireframes/09-empty-states.md) | 各种空状态 | | 10 | [env-status-bar.md](./wireframes/10-env-status-bar.md) | 持久化环境健康状态栏 | +| **11** | [**登录**](./wireframes/11-login.md) | 企业 SSO + IM 扫码 + 账号密码(Sprint 6 新增) | +| **12-15** | [**四大场景工作流**](./wireframes/12-15-workflow-scenes.md) | 业务/开发/测试/运维 角色视角(Sprint 6 新增) | ### Interaction Flows(交互流程,5 个 Mermaid) diff --git a/docs/design/ui/prototype/01-main-three-pane.html b/docs/design/ui/prototype/01-main-three-pane.html index d2c4539..cba6ac8 100644 --- a/docs/design/ui/prototype/01-main-three-pane.html +++ b/docs/design/ui/prototype/01-main-three-pane.html @@ -15,11 +15,41 @@
-
+
EP Code AI + +
+
张
+ 张工 +
+ + +
diff --git a/docs/design/ui/prototype/02-setup-wizard.html b/docs/design/ui/prototype/02-setup-wizard.html index 1193b4d..b33f4fd 100644 --- a/docs/design/ui/prototype/02-setup-wizard.html +++ b/docs/design/ui/prototype/02-setup-wizard.html @@ -102,7 +102,7 @@
- Setup · 第 2 步 / 共 4 步 + 初始化向导 · 第 2 步 / 共 4 步 ✕ 跳过
diff --git a/docs/design/ui/prototype/03-settings.html b/docs/design/ui/prototype/03-settings.html index aecb66c..4881224 100644 --- a/docs/design/ui/prototype/03-settings.html +++ b/docs/design/ui/prototype/03-settings.html @@ -137,16 +137,16 @@

设置

-
General
-
Provider
-
Shortcuts
-
Experimental ⚗️
+
通用
+
供应商
+
快捷键
+
实验性 ⚗️
-

General · 通用

+

通用设置

外观

@@ -187,7 +187,7 @@

数据

-

Provider · 供应商管理

+

供应商管理

已配置 2 个 @@ -222,7 +222,7 @@

Provider · 供应商管理

-

Shortcuts · 快捷键

+

快捷键

@@ -245,7 +245,7 @@

输入

-

Experimental ⚗️

+

实验性功能 ⚗️

⚠️ 以下功能不稳定,启用前请知悉风险

diff --git a/docs/design/ui/prototype/11-login.html b/docs/design/ui/prototype/11-login.html new file mode 100644 index 0000000..7485899 --- /dev/null +++ b/docs/design/ui/prototype/11-login.html @@ -0,0 +1,84 @@ + + + + +11 · 登录 · EP Code AI + + + + +
+ 🎨 原型 11 / 15 · 登录(企业 SSO + 账号密码) + ← 返回导航 +
+ + + + +
+

关于用户体系(预留设计)

+

Phase 2 简化方案: 本地单用户,登录时记录身份 + 选择角色(产品/开发/测试/运维),用于场景工作流的个性化显示。

+

Phase 3 企业集成: 接入企业 SSO (OIDC / SAML),从 HR 系统拉取用户基本信息 + 角色 + 团队,打通企业微信/钉钉的身份。

+

登录后会记录

+
    +
  • 用户名 / 工号 / 头像 / 邮箱(来源: SSO / 用户填写)
    • +
  • 主角色 (产品 / 开发 / 测试 / 运维 / 其他) - 决定工作流推荐
    • +
  • 团队 / 项目组 (Phase 3)
    • +
  • 上次登录时间 + 设备信息(用于审计,见 PLAN.md ④ 服务端 RFC)
    • +
+
+ + + diff --git a/docs/design/ui/prototype/12-workflow-business.html b/docs/design/ui/prototype/12-workflow-business.html new file mode 100644 index 0000000..ed7bc58 --- /dev/null +++ b/docs/design/ui/prototype/12-workflow-business.html @@ -0,0 +1,268 @@ + + + + +12 · 业务场景工作流 · EP Code AI + + + + +
+ 🎨 原型 12 / 15 · 💼 业务场景工作流(产品经理 / BA) + ← 返回 · 上页 · 下页 → +
+ +
+ + +
+
+ 💼 +
+
业务场景工作流
+
产品经理 · BA · 业务分析师
+
+
+
+ 当前项目: 离职流程优化 v1.2 +
张
张工 · 产品 +
+
+ + +
+
📍 业务方法论时序
+ +
+
需求采集
+
✓ 已完成 · 访谈 5 位 HR
+
+ +
+
PRD 编写
+
进行中 · 草稿 v0.3
+
+ +
+
可测性评审
+
待开始 · 测试团队
+
+ +
+
业务规则固化
+
用户故事 + 规则表
+
+ +
+
冲突检测 & 变更
+
跨模块冲突 · CR 管理
+
+ +
+
评审通过 & 归档
+
交付开发 / 测试
+
+
+ + +
+

第 2 步 · PRD 编写

+

+ 基于需求采集结果,撰写结构化 PRD。推荐用 + PRD 模板 + 作为起点,然后配合右侧的"智能操作"加速。 +

+ +

✅ 本阶段 Checklist

+ +
+ +
+
复制 PRD 模板并填入元数据
+
版本号 / 作者 / 日期 / 状态
+
+
+ +
+ +
+
完成 1-2 章:概述 + 用户与场景
+
背景 / 目标 / 角色 / 主流程
+
+
+ +
+ +
+
完成 3-4 章:功能需求 + 非功能需求
+
REQ-NNN + Given-When-Then 验收 + 量化指标(QPS/延迟/%)
+
+
+ +
+ +
+
完成 5-7 章:数据规则 + 交互 + 风险
+
+
+ +
+ +
+
跑 /prd 校验,得分 ≥ 80
+
用右侧 "PRD 校验" 按钮,或命令面板 /prd docs/prd/v1.0.md
+
+
+ +
+ +
+
主管评审签字
+
+
+ +

📄 本阶段产出物

+
+
+
▾ prd-v1.2.md(草稿)
+
📄 76 行 · 3 小时前 · 进度 45%
+
+
+
▾ user-interviews.md
+
📋 5 条访谈 · 昨天
+
+
+ +

💡 下一步动作

+
+ + + +
+
+ + +
+
✨ 智能操作 (AI Prompt)
+

+ 点击卡片 → 填写简单参数 → AI 自动执行。来自 skills/business/ 的 6 个 Prompt 模板。 +

+ +
+
📝
+
生成 PRD 初稿
+
从需求访谈笔记生成结构化 PRD
+
+ 输入: 访谈笔记 + 输出: prd-vX.Y.md +
+
+ +
+
📋
+
拆用户故事
+
按 INVEST 原则把 PRD 拆成 user story
+
skills/business/user-story-gen
+
+ +
+
🧪
+
PRD 可测性评审
+
识别歧义 · 验收标准缺失 · 量化不足
+
需测试参与
+
+ +
+
🔢
+
业务规则转表格
+
文字规则 → 决策表(避免口径歧义)
+
+ +
+
⚠️
+
需求冲突检测
+
跨模块规则一致性扫描
+
+ +
+
🔁
+
变更影响分析
+
CR 上下游受影响模块清单
+
+ +
+ 💡 这些按钮本质是 Sprint 1-5 skills/ 目录里的 prompt 模板,加上表单化参数 + 发送给当前会话 = "一键执行"。 +
+
+ +
+ + + + + + + + diff --git a/docs/design/ui/prototype/13-workflow-development.html b/docs/design/ui/prototype/13-workflow-development.html new file mode 100644 index 0000000..d349d29 --- /dev/null +++ b/docs/design/ui/prototype/13-workflow-development.html @@ -0,0 +1,196 @@ + + + + +13 · 开发场景工作流 · EP Code AI + + + + +
+ 🎨 原型 13 / 15 · 💻 开发场景工作流(开发 / 架构师) + ← 返回 · 上页 · 下页 → +
+ +
+ +
+
+ 💻 +
+
开发场景工作流
+
开发工程师 · 架构师 · Tech Lead
+
+
+
+ 当前任务: REQ-042 订单批量导出 +
李
李架构 +
+
+ + +
+
📍 开发方法论时序
+ +
+
接需求 · 澄清
+
✓ 已读 PRD v1.2
+
+ +
+
技术方案设计
+
✓ design-v1.md
+
+ +
+
ADR 决策
+
进行中 · 流式导出 vs 分页
+
+ +
+
API 契约对齐
+
开发 ↔ 测试 契约锁定
+
+ +
+
编码 · 自测
+
PR + CI 全绿
+
+ +
+
代码评审 · 合入
+
按 Checklist 评审
+
+ +
+
提测 · 发版说明
+
交给测试 + 写 Release Note
+
+
+ + +
+

第 3 步 · ADR 决策

+

+ 对技术选型、架构变更、重要 trade-off 写 Architecture Decision Record(ADR),记录决策过程和备选方案, + 让后人看得懂"当年为什么这么选"。 +

+ +

✅ 本阶段 Checklist

+ +
+ +
+
识别需要 ADR 的决策点
+
例:DB 选型 / 框架切换 / API 风格 / 并发策略
+
+
+ +
+ +
+
写 ADR:状态 / 上下文 / 选项 / 决定 / 后果
+
用 templates/development/adr-template.md
+
+
+ +
+ +
+
邀请 2-3 位评审(架构组 + 受影响模块负责人)
+
+
+ +
+ +
+
达成决定 → ADR 标 Accepted,跑 /adr index 更新索引
+
+
+ +

📄 本阶段产出物

+
+
+
▾ design-v1.md
+
📄 156 行 · 今天 · Accepted
+
+
+
▾ ADR-0003 流式导出.md(草稿)
+
📄 48 行 · 状态 Proposed
+
+
+ +

💡 下一步

+
+ + + + +
+
+ + +
+
✨ 智能操作 (AI Prompt)
+

+ 来自 skills/development/ 的 7 个 Prompt 模板。 +

+ +
+
📐
+
设计文档起草
+
从 PRD 生成技术设计初稿
+
输入: PRD输出: design.md
+
+ +
+
📜
+
ADR 起草
+
技术决策 → 正式 ADR 文档
+
+ +
+
🔄
+
从代码反向生成 API 文档
+
扫描 src/ → Markdown API 契约
+
模式 B 迁移用
+
+ +
+
🔍
+
代码评审清单生成
+
按本次改动风险 → 个性化 checklist
+
+ +
+
📝
+
Release Note 生成
+
从 commits → 面向用户的发版说明
+
+ +
+
⬆️
+
依赖升级风险分析
+
扫描 package.json 变更 → 风险评估
+
+ +
+
🧩
+
接口契约冲突检测
+
开发 API 和测试用例是否匹配
+
+ +
+
🔗 跨场景联动
+ 本页改动 ADR / 设计会触发: +
    +
  • 业务场景: /linkage prd-to-design
    • +
  • 测试场景: /linkage regression 推荐回归
    • +
+
+
+ +
+ + + diff --git a/docs/design/ui/prototype/14-workflow-testing.html b/docs/design/ui/prototype/14-workflow-testing.html new file mode 100644 index 0000000..67d3bd5 --- /dev/null +++ b/docs/design/ui/prototype/14-workflow-testing.html @@ -0,0 +1,201 @@ + + + + +14 · 测试场景工作流 · EP Code AI + + + + +
+ 🎨 原型 14 / 15 · 🧪 测试场景工作流(测试 / QA) + ← 返回 · 上页 · 下页 → +
+ +
+ +
+
+ 🧪 +
+
测试场景工作流
+
测试工程师 · QA · 测试负责人
+
+
+
+ 本版本: v1.2 (计划 2026-04-30 发布) +
陈
陈测试 +
+
+ + +
+
📍 测试方法论生命周期
+ +
+
需求可测性评审
+
✓ PRD 已评审,分 82
+
+ +
+
测试策略设计
+
✓ 范围 / 方法 / 资源 · 已对齐
+
+ +
+
用例编写 · 评审
+
进行中 · 42 / 60 用例
+
+ +
+
提测申请审核
+
开发提交 → 你审核
+
+ +
+
测试执行
+
冒烟 · 回归 · 新增 · Bug 管理
+
+ +
+
准出报告
+
通过率 + 遗留 Bug + 发布建议
+
+
+ + +
+

第 3 步 · 用例编写 · 评审

+ +
+ 📊 进度: 已编 42 / 预估 60 用例 · 覆盖 REQ-001 ~ REQ-004 · 覆盖率 67% +
⚠️ 待覆盖: REQ-005(导出格式)· REQ-006(并发场景) +
+ +

✅ 本阶段 Checklist

+ +
+ +
+
对照 PRD 的 REQ ID,为每个需求点至少写 1 条正向用例
+
+
+ +
+ +
+
覆盖边界值 + 异常场景
+
+
+ +
+ +
+
关联用例 ↔ 需求 ID(frontmatter requirements: [REQ-005])
+
这样 /linkage regression 能自动推荐回归用例
+
+
+ +
+ +
+
跑 /coverage-analysis,确认无悬空/遗漏
+
+
+ +
+ +
+
提交评审 → 测试组评 Leader 签字
+
+
+ +

📄 本阶段产出物

+
+
+
▾ test-strategy-v1.2.md
+
📋 已锁定 · 昨天
+
+
+
▾ test-cases.md(编辑中)
+
📋 42 条 · 进度 67%
+
+
+ +

🔀 上游输入 / 下游消费

+
+ 上游: 产品 PRD · 开发 API 契约 · 开发 ADR
+ 下游: 开发(提测评审依据)· 运维(发布计划参考)· 业务(验收依据) +
+
+ + +
+
✨ 智能操作 (AI Prompt)
+

+ 来自 skills/testing/ 的 8 个 Prompt 模板。 +

+ +
+
📋
+
测试策略起草
+
从 PRD + 历史数据 → 测试策略
+
+ +
+
✍️
+
用例批量生成
+
输入 REQ → 正向/负向/边界用例
+
输入: PRD输出: test-cases.md
+
+ +
+
🔍
+
可测性评审
+
PRD 模糊词 / 验收缺失 / 量化不足
+
+ +
+
🐛
+
Bug 报告规范化
+
自由描述 → 标准 Bug 报告(含重现步骤)
+
+ +
+
✅
+
提测单审核
+
检查提测申请的完整性 + 可测性
+
+ +
+
📊
+
准出报告生成
+
从 Bug JSON + 执行记录 → 可发布性建议
+
联动: /linkage release-plan
+
+ +
+
🎯
+
回归范围推荐
+
git diff + 用例关联 → 回归清单
+
+ +
+
📈
+
Bug 趋势分析
+
周/月 Bug 分布 + 模块热图
+
+ +
+
🔗 跨场景联动
+
    +
  • 准出报告 → /linkage release-plan 自动生成发布计划
    • +
  • git diff → /linkage regression 推荐回归
    • +
+
+
+ +
+ + + diff --git a/docs/design/ui/prototype/15-workflow-operations.html b/docs/design/ui/prototype/15-workflow-operations.html new file mode 100644 index 0000000..cb94ff4 --- /dev/null +++ b/docs/design/ui/prototype/15-workflow-operations.html @@ -0,0 +1,208 @@ + + + + +15 · 运维场景工作流 · EP Code AI + + + + +
+ 🎨 原型 15 / 15 · 🚀 运维场景工作流(SRE / 运维) + ← 返回 · 上页 +
+ +
+ +
+
+ 🚀 +
+
运维场景工作流
+
SRE · 运维 · On-call
+
+
+
+ ⚠️ 当前有 1 个 P2 事件 +
周
周运维 · on-call +
+
+ + +
+
📍 运维工作流(常态 + 应急)
+ +
+
发布计划
+
✓ v1.2 计划已定
+
+ +
+
Runbook 准备
+
✓ 3 个关键告警已有 Runbook
+
+ +
+
发布执行
+
灰度 → 全量(按计划)
+
+ +
+
🚨 事件响应
+
INC-2026-0419 处理中
+
+ +
+
故障复盘(48h 内)
+
Blameless · 找改进项
+
+ +
+
改进项跟踪
+
同步到业务 backlog
+
+
+ + +
+

🚨 当前:INC-2026-0419 事件响应

+ +
+
P2 · 支付服务 P99 延迟异常
+
+ 🕐 开始: 14:02 CST · 持续: 26 分钟
+ 📊 影响: 5% 用户 · 核心业务: 支付 · 每分钟约 12 笔失败
+ 📡 告警: HighErrorRate + P99LatencyHigh(已转发到企业微信) +
+
+ +

✅ 响应 Checklist(按 Runbook 执行)

+ +
+ +
+
✅ 收到告警 → 5 分钟内确认
+
已打开 runbook-payment-latency.md
+
+
+ +
+ +
+
✅ 初步定位(看日志 / 监控 / 依赖状态)
+
根因疑似: DB 连接池耗尽(活动连接 920/1000)
+
+
+ +
+ +
+
紧急降级 or 回滚?
+
Runbook 建议: 先扩容连接池至 1500,观察 5 分钟,不行则回滚到 v1.1
+
+
+ +
+ +
+
拉战时群,通报影响面
+
+
+ +
+ +
+
恢复后 48 小时内完成复盘
+
+
+ +

🛠 快速操作

+
+ + + + + +
+ +

📄 相关产出物

+
+
+
▾ runbook-payment-latency.md
+
📘 当前使用中
+
+
+
▾ INC-2026-0419.md(新建)
+
📝 初始化 · 待填
+
+
+
+ + +
+
✨ 智能操作 (AI Prompt)
+

+ 来自 skills/operations/ 的 8 个 Prompt 模板。 +

+ +
+
🚨
+
事件分级 & 处理建议
+
当前告警 → 严重度判定 + 下一步动作
+
实时
+
+ +
+
📘
+
Runbook 起草
+
从告警类型生成处置手册模板
+
+ +
+
📋
+
发布计划生成
+
从测试准出报告 → 灰度节奏方案
+
上游: 测试报告
+
+ +
+
📝
+
故障复盘起草
+
基于时间线 + 日志 → postmortem 初稿(blameless)
+
+ +
+
🎯
+
改进项 → 需求池
+
从复盘抽行动项 → Jira/GH issue
+
联动: 业务场景
+
+ +
+
📊
+
SLO 分析
+
是否消耗了 error budget?
+
+ +
+
🔁
+
多环境配置审计
+
dev/staging/prod 配置差异扫描
+
+ +
+
👥
+
On-call 交接
+
整理本周事件 → 交接文档
+
+ +
+
💡 降低事件时的认知负载
+ 事件响应期间,"智能操作"卡片可以替代你"记住所有 Runbook 步骤" —— 点一下让 AI 帮你判断下一步。 +
+
+ +
+ + + diff --git a/docs/design/ui/prototype/index.html b/docs/design/ui/prototype/index.html index 6284382..1cb795d 100644 --- a/docs/design/ui/prototype/index.html +++ b/docs/design/ui/prototype/index.html @@ -63,7 +63,7 @@

EP Code AI · 桌面应用原型

-

10 个核心页面的可交互 HTML 原型。点击卡片预览。

+

15 个可交互 HTML 原型(10 个功能页 + 1 个登录 + 4 个场景工作流)。点击卡片预览。

📚 配套文档: 设计稿索引 · @@ -132,6 +132,42 @@

环境健康状态栏

+

身份与登录

+
+ +
11
+

🔐 登录页

+

企业 SSO / IM 扫码 / 账号密码 · 后续接入企业用户体系

+ +
+ +

四大场景工作流(角色视角)

+

+ 每个场景有"时序→当前步骤→Prompt 一键操作"三栏布局。Prompt 来自 skills/ 目录的 29 个模板,变成表单化可点执行。 +

+
+ +
12 💼
+

业务场景工作流

+

产品 · BA · 6 步: 需求采集 → PRD → 可测性 → 规则 → 冲突 → 归档

+ + +
13 💻
+

开发场景工作流

+

开发 · 架构 · 7 步: 澄清 → 设计 → ADR → API → 编码 → 评审 → 提测

+ + +
14 🧪
+

测试场景工作流

+

测试 · QA · 6 步: 可测性 → 策略 → 用例 → 提测审核 → 执行 → 准出

+ + +
15 🚀
+

运维场景工作流

+

SRE · On-call · 6 步: 发布计划 → Runbook → 发布 → 事件响应 → 复盘 → 改进

+ +
+

交互流程(Mermaid)

5 个关键交互流程图见 interaction-flows/(在 GitHub / 文档站可直接预览 Mermaid)。 diff --git a/docs/design/ui/prototype/prototype-modules-map.md b/docs/design/ui/prototype/prototype-modules-map.md index 41e3f4b..4f5c8ea 100644 --- a/docs/design/ui/prototype/prototype-modules-map.md +++ b/docs/design/ui/prototype/prototype-modules-map.md @@ -20,6 +20,11 @@ | 08 | [会话右键菜单](./08-conversation-context-menu.html) | 收藏 / 分组 / 多选 / 删除 | 会话管理 | `SidebarView.swift`
`FavoritesManager.swift`
`ConversationStore.swift` | - | | 09 | [空状态合集](./09-empty-states.html) | 引导 + 提示 + 错误恢复 | 兜底与教育 | 分散在上述各组件 | - | | 10 | [环境状态栏](./10-env-status-bar.html) | 持久化健康提示 | 全局状态监控 | `EHUBInfoBar.swift` (需扩展)
`EnvironmentChecker.swift` | `platforms/*/scripts/check-environment.*` | +| **11** | [**登录**](./11-login.html) | 身份 + 角色 | 登录/切换角色/退出 | **新增** `LoginView.swift`
`AuthManager.swift`
`RoleContext.swift` | - | +| **12** | [**业务工作流**](./12-workflow-business.html) | 产品视角时序 | 需求→PRD→归档 · 6 步 | **新增** `WorkflowView.swift`
`PromptRegistry.swift`
`PromptRunner.swift` | `skills/business/` 6 个 prompt | +| **13** | [**开发工作流**](./13-workflow-development.html) | 开发视角 | 设计→ADR→合入 · 7 步 | 共用 `WorkflowView.swift` | `skills/development/` 7 个 prompt | +| **14** | [**测试工作流**](./14-workflow-testing.html) | 测试视角 | 策略→用例→准出 · 6 步 | 共用 | `skills/testing/` 8 个 prompt | +| **15** | [**运维工作流**](./15-workflow-operations.html) | 运维视角 | 发布→事件→复盘 · 6 步 | 共用 | `skills/operations/` 8 个 prompt | --- diff --git a/docs/design/ui/prototype/styles.css b/docs/design/ui/prototype/styles.css index 900a406..0af544b 100644 --- a/docs/design/ui/prototype/styles.css +++ b/docs/design/ui/prototype/styles.css @@ -489,3 +489,309 @@ a:hover { text-decoration: underline; } } .proto-banner a { color: white; text-decoration: underline; } body.with-banner .app { padding-top: 32px; } + +/* ============ 用户菜单(Sprint 6 新增) ============ */ + +.user-chip { + display: inline-flex; + align-items: center; + gap: var(--sp-2); + padding: var(--sp-1) var(--sp-3); + border-radius: var(--radius-md); + cursor: pointer; + border: 1px solid transparent; +} +.user-chip:hover { + background: var(--color-bg-hover); + border-color: var(--color-border); +} +.user-avatar { + width: 24px; height: 24px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + color: white; + font-size: var(--fs-xs); + font-weight: 600; + background: var(--color-primary); + flex-shrink: 0; +} +.user-avatar.lg { width: 40px; height: 40px; font-size: var(--fs-md); } +.user-name { font-weight: 500; font-size: var(--fs-sm); } +.user-role { font-size: var(--fs-xs); color: var(--color-text-muted); } + +.user-menu { + position: absolute; + right: var(--sp-4); + top: calc(var(--topbar-height) + 4px); + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + min-width: 260px; + z-index: 50; + padding: var(--sp-2) 0; +} +.user-menu-header { + padding: var(--sp-3) var(--sp-4); + border-bottom: 1px solid var(--color-border); + display: flex; + gap: var(--sp-3); + align-items: center; +} +.user-menu-item { + display: grid; + grid-template-columns: 1fr auto; + gap: var(--sp-3); + padding: var(--sp-2) var(--sp-4); + cursor: pointer; + font-size: var(--fs-md); +} +.user-menu-item:hover { background: var(--color-bg-hover); } +.user-menu-sep { height: 1px; background: var(--color-border); margin: var(--sp-1) 0; } + +/* ============ 工作流页面(Sprint 6 新增) ============ */ + +.workflow-page { + min-height: 100vh; + padding-top: 32px; + background: var(--color-bg-alt); + display: grid; + grid-template-columns: 280px 1fr 320px; + grid-template-rows: 60px 1fr; + grid-template-areas: "header header header" "timeline content tools"; + height: 100vh; +} + +.workflow-header { + grid-area: header; + background: var(--color-bg); + border-bottom: 1px solid var(--color-border); + padding: 0 var(--sp-5); + display: flex; + align-items: center; + justify-content: space-between; +} +.workflow-header .title { display: flex; align-items: center; gap: var(--sp-3); } +.workflow-header .title-icon { font-size: var(--fs-2xl); } +.workflow-header .title-main { font-size: var(--fs-xl); font-weight: 600; } +.workflow-header .title-sub { font-size: var(--fs-sm); color: var(--color-text-muted); } + +.workflow-timeline { + grid-area: timeline; + background: var(--color-bg); + border-right: 1px solid var(--color-border); + padding: var(--sp-4); + overflow-y: auto; +} +.timeline-title { + font-size: var(--fs-xs); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 600; + margin-bottom: var(--sp-3); +} +.timeline-step { + position: relative; + padding: var(--sp-3) var(--sp-3) var(--sp-3) 40px; + border-radius: var(--radius-md); + cursor: pointer; + margin-bottom: var(--sp-1); +} +.timeline-step:hover { background: var(--color-bg-hover); } +.timeline-step.active { background: var(--color-primary-lightest); } +.timeline-step.done { opacity: 0.7; } + +.timeline-step::before { + content: attr(data-step); + position: absolute; + left: var(--sp-3); + top: var(--sp-3); + width: 24px; height: 24px; + border-radius: 50%; + background: var(--color-bg-hover); + border: 2px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--fs-xs); + font-weight: 700; + color: var(--color-text-muted); +} +.timeline-step.active::before { + background: var(--color-primary); + border-color: var(--color-primary); + color: white; +} +.timeline-step.done::before { + content: '✓'; + background: var(--color-success); + border-color: var(--color-success); + color: white; +} + +.timeline-step::after { + content: ''; + position: absolute; + left: 23px; + top: 44px; + bottom: -4px; + width: 2px; + background: var(--color-border); +} +.timeline-step:last-child::after { display: none; } + +.timeline-step-title { font-weight: 500; font-size: var(--fs-md); } +.timeline-step-meta { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; } + +.workflow-content { + grid-area: content; + overflow-y: auto; + padding: var(--sp-6); +} +.workflow-content h2 { + font-size: var(--fs-xl); + margin-bottom: var(--sp-4); +} +.workflow-content h3 { + font-size: var(--fs-lg); + margin-top: var(--sp-5); + margin-bottom: var(--sp-3); +} + +.checklist-item { + display: flex; + gap: var(--sp-3); + padding: var(--sp-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--sp-2); + background: var(--color-bg); +} +.checklist-item input { margin-top: 3px; } +.checklist-item-title { font-weight: 500; } +.checklist-item-hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 2px; } + +.workflow-tools { + grid-area: tools; + background: var(--color-bg); + border-left: 1px solid var(--color-border); + padding: var(--sp-4); + overflow-y: auto; +} +.tools-title { + font-size: var(--fs-xs); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 600; + margin-bottom: var(--sp-3); +} + +.prompt-action-card { + padding: var(--sp-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--sp-2); + background: var(--color-bg); + cursor: pointer; + transition: all 0.2s; +} +.prompt-action-card:hover { + border-color: var(--color-primary); + transform: translateY(-1px); + box-shadow: var(--shadow-sm); +} +.prompt-action-card .icon { font-size: var(--fs-lg); margin-bottom: var(--sp-1); } +.prompt-action-card .name { font-weight: 600; font-size: var(--fs-md); } +.prompt-action-card .desc { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; } +.prompt-action-card .meta { + margin-top: var(--sp-2); + display: flex; + gap: var(--sp-2); + font-size: var(--fs-xs); +} +.tag { + padding: 1px 6px; + background: var(--color-bg-hover); + border-radius: var(--radius-sm); + font-size: var(--fs-xs); + color: var(--color-text-muted); +} + +/* Prompt 运行弹窗 */ +.prompt-modal .field { margin-bottom: var(--sp-3); } +.prompt-modal .preview { + padding: var(--sp-3); + background: var(--color-bg-alt); + border-radius: var(--radius-md); + font-family: var(--font-mono); + font-size: var(--fs-xs); + white-space: pre-wrap; + line-height: 1.6; + max-height: 200px; + overflow-y: auto; + border: 1px solid var(--color-border); +} + +/* 登录页 */ +.login-wrap { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 80px 16px 40px; + background: linear-gradient(135deg, #eef3ff 0%, #fff 100%); +} +.login-card { + width: 420px; + max-width: 100%; + background: var(--color-bg); + border-radius: var(--radius-xl); + padding: var(--sp-8) var(--sp-6); + box-shadow: var(--shadow-lg); +} +.login-logo { + text-align: center; + font-size: 40px; + margin-bottom: var(--sp-3); +} +.login-title { + font-size: var(--fs-2xl); + font-weight: 700; + text-align: center; + margin-bottom: var(--sp-1); +} +.login-sub { + text-align: center; + color: var(--color-text-muted); + margin-bottom: var(--sp-6); +} +.sso-btn { + display: flex; + align-items: center; + gap: var(--sp-3); + width: 100%; + padding: var(--sp-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: var(--color-bg); + cursor: pointer; + margin-bottom: var(--sp-2); + font-size: var(--fs-md); +} +.sso-btn:hover { background: var(--color-bg-hover); } +.divider { + display: flex; + align-items: center; + gap: var(--sp-3); + margin: var(--sp-5) 0; + color: var(--color-text-muted); + font-size: var(--fs-xs); +} +.divider::before, .divider::after { + content: ''; + flex: 1; + height: 1px; + background: var(--color-border); +} diff --git a/docs/design/ui/wireframes/11-login.md b/docs/design/ui/wireframes/11-login.md new file mode 100644 index 0000000..113b339 --- /dev/null +++ b/docs/design/ui/wireframes/11-login.md @@ -0,0 +1,87 @@ +# Wireframe 11 · 登录(Sprint 6 新增) + +> Phase 2 引入用户身份。现阶段支持简单本地账号 + 预留企业 SSO 接口。 + +## 布局(单页居中卡片) + +``` + ┌───────────────────────────────────────┐ + │ │ + │ 🚀 │ + │ EP Code AI │ + │ 企业级 AI 研发助手 │ + │ │ + │ ┌──────────────────────────────────┐ │ + │ │ 🏢 企业账号登录 → │ │ ← SSO 主入口(OIDC/SAML) + │ │ 通过公司统一身份 │ │ + │ └──────────────────────────────────┘ │ + │ ┌──────────────────────────────────┐ │ + │ │ 💬 企业微信/钉钉/飞书 → │ │ ← IM 扫码 + │ │ 扫码登录 │ │ + │ └──────────────────────────────────┘ │ + │ │ + │ ─────── 或使用账号密码 ─────── │ + │ │ + │ 工号/邮箱 [_________________] │ + │ 密码 [_________________] │ + │ │ + │ [✓] 保持登录 7 天 [忘记密码?] │ + │ │ + │ ┌──────────────────────────────────┐ │ + │ │ 登 录 │ │ + │ └──────────────────────────────────┘ │ + │ │ + │ 登录即同意 用户协议 / 隐私政策 │ + └───────────────────────────────────────┘ +``` + +## 分阶段落地 + +| 阶段 | 能力 | 实现复杂度 | +|------|------|----------| +| **Phase 2 · Sprint 6-8** | 本地单用户 + 手动选角色 | 低 · Swift Keychain 存账号 | +| **Phase 2 · Sprint 9-10** | 企业微信/钉钉/飞书扫码登录 | 中 · OAuth2 flow | +| **Phase 3** | OIDC / SAML SSO(正规企业接入) | 高 · 需要服务端(PLAN ④) | +| **Phase 3** | 从 HR 系统拉角色 / 团队 / 权限 | 高 · 服务端 + 企业权限体系 | + +## 登录后记录的用户字段 + +```ts +interface User { + id: string; // 工号(企业)或 UUID(本地) + name: string; // 显示名 + email: string; // 邮箱 + avatar?: string; // 头像(从 SSO 或用户上传) + roles: Role[]; // 主/副角色: 产品 / 开发 / 测试 / 运维 + team?: string; // 团队(Phase 3 从 HR 拉) + department?: string; // 部门 + lastLoginAt: Date; + device: { + os: string; + version: string; + fingerprint: string; // 审计用 + }; +} +type Role = 'product' | 'dev' | 'test' | 'ops' | 'other'; +``` + +## 角色对工作流的影响 + +登录时选择的主角色决定顶栏默认导航: + +- 选 **产品** → 顶栏左侧默认高亮 "💼 业务" +- 选 **开发** → "💻 开发" +- 选 **测试** → "🧪 测试" +- 选 **运维** → "🚀 运维" + +角色可随时切换(用户菜单 → 🎭 切换角色 · `⌘⇧R`),不重启应用。 + +## 安全 + +- 密码本地存 Keychain (macOS) / Credential Manager (Windows) / libsecret (Linux) +- SSO token 刷新策略: 有效期 7 天,刷新窗口 14 天 +- 首次登录设备记录 + 新设备登录通知(Phase 3) + +## 下一步 +- Sprint 7: macOS 实现本地单用户版,UI 参照本原型 +- Sprint 9: 服务端 RFC (PLAN § ④) 里细化 SSO / 审计 / 会话管理 diff --git a/docs/design/ui/wireframes/12-15-workflow-scenes.md b/docs/design/ui/wireframes/12-15-workflow-scenes.md new file mode 100644 index 0000000..f5fec7d --- /dev/null +++ b/docs/design/ui/wireframes/12-15-workflow-scenes.md @@ -0,0 +1,147 @@ +# Wireframe 12-15 · 四大场景工作流(Sprint 6 新增) + +> 每个场景一个页面,帮用户按方法论**顺序走完**该角色应做的所有动作。 +> Prompt 模板不是让用户"复制粘贴到 Claude",而是做成表单化按钮 → 点击 → 表单填参数 → 后台组合发送。 + +## 共同布局(三栏 + 顶栏) + +``` +┌──────────────────────────────────────────────────────────────────────────────┐ +│ [场景图标] 场景名 用户身份 · 当前项目 ────────── │ ① 顶栏:场景身份信息 +├──────────────┬────────────────────────────────────┬──────────────────────────┤ +│ 📍 时序 │ 当前步骤详情 │ ✨ 智能操作(Prompt) │ +│ │ │ │ +│ 1 ✓ Step1 │ h2 当前步骤标题 │ 📝 Prompt 卡 1 │ ② 中栏:步骤 +│ 2 ✓ Step2 │ │ 📋 Prompt 卡 2 │ 详情 + 当前 +│ 3 ● Step3 │ ✅ Checklist: │ 🧪 Prompt 卡 3 │ Checklist + +│ 4 ○ Step4 │ [✓] 项 1 │ ... │ 快速操作 +│ 5 ○ Step5 │ [ ] 项 2 │ │ +│ 6 ○ Step6 │ [ ] 项 3 │ 💡 跨场景联动提示 │ ③ 右栏:该阶段 +│ │ │ │ 可用的 AI 工具 +│ │ 📄 本阶段产出物 │ │ +│ │ [Artifact 卡] │ │ +│ │ │ │ +│ │ 💡 下一步 │ │ +│ │ [按钮 1] [按钮 2] │ │ +└──────────────┴────────────────────────────────────┴──────────────────────────┘ + 280px flex 320px +``` + +## 四个场景具体时序 + +### 12 · 💼 业务场景(产品/BA) + +| 步 | 阶段 | 关键产出 | Prompt 工具 | +|----|------|---------|-----------| +| 1 | 需求采集 | 访谈笔记 | - | +| 2 | PRD 编写 | prd-vX.Y.md | 生成 PRD 初稿 · 拆用户故事 | +| 3 | 可测性评审 | testability-report.md | PRD 可测性评审 | +| 4 | 业务规则固化 | business-rules.md | 业务规则转表格 | +| 5 | 冲突检测 & 变更 | change-log.md | 需求冲突检测 · 变更影响分析 | +| 6 | 评审通过 & 归档 | PRD Accepted | - | + +### 13 · 💻 开发场景(开发/架构师) + +| 步 | 阶段 | 关键产出 | Prompt 工具 | +|----|------|---------|-----------| +| 1 | 接需求 · 澄清 | - | - | +| 2 | 技术方案设计 | design-v1.md | 设计文档起草 | +| 3 | ADR 决策 | ADR-NNNN.md | ADR 起草 | +| 4 | API 契约对齐 | api-contract.md | 从代码反向生成 API · 契约冲突检测 | +| 5 | 编码 · 自测 | PR | - | +| 6 | 代码评审 · 合入 | review 记录 | 代码评审清单生成 | +| 7 | 提测 · 发版说明 | Release Note | Release Note 生成 · 依赖升级风险分析 | + +### 14 · 🧪 测试场景(测试/QA) + +| 步 | 阶段 | 关键产出 | Prompt 工具 | +|----|------|---------|-----------| +| 1 | 需求可测性评审 | 评审意见 | PRD 可测性评审 | +| 2 | 测试策略设计 | test-strategy.md | 测试策略起草 | +| 3 | 用例编写 · 评审 | test-cases.md | 用例批量生成 · Bug 趋势分析 | +| 4 | 提测申请审核 | 审核结果 | 提测单审核 | +| 5 | 测试执行 | Bug 清单 | Bug 报告规范化 · 回归范围推荐 | +| 6 | 准出报告 | test-report.md | 准出报告生成 | + +### 15 · 🚀 运维场景(SRE/On-call) + +| 步 | 阶段 | 关键产出 | Prompt 工具 | +|----|------|---------|-----------| +| 1 | 发布计划 | release-plan.md | 发布计划生成 | +| 2 | Runbook 准备 | runbook-*.md | Runbook 起草 | +| 3 | 发布执行 | release-log | - | +| 4 | 事件响应 | INC-xxx.md | 事件分级 & 处理建议 | +| 5 | 故障复盘 | postmortem.md | 故障复盘起草 · SLO 分析 | +| 6 | 改进项跟踪 | actions 列表 | 改进项 → 需求池 | + +## Prompt 卡片的交互模型 + +``` +点击卡片 + ↓ +弹出参数表单 + ├─ 输入来源: 选 Artifact / 粘贴文本 / 上传文件 + ├─ 其他参数: 根据 prompt 模板定义 + └─ Prompt 预览: 实时显示 Claude 将收到的完整 prompt(透明) + ↓ +点 "✨ 执行" + ↓ +- 关弹窗 +- 切换到主视图(01),自动创建新消息 +- 发送组合后的 prompt +- AI 流式输出回复 +- 产出的 Artifact 自动入库,可在对应场景工作流里看到 +``` + +## Prompt 元数据(每个 skills/xxx.md 的 frontmatter) + +```yaml +--- +id: prd-draft +category: business +icon: 📝 +name: 生成 PRD 初稿 +description: 从需求访谈笔记生成结构化 PRD +inputs: + - key: source + type: artifact_or_text + label: 输入来源 + required: true + - key: notes + type: text + label: 补充说明 + required: false +output: prd-v{{version}}.md +related_workflow: business +workflow_step: 2 +--- + +你是高级产品经理,请基于下方访谈笔记,按 templates/business/prd-template.md 的 +结构生成 PRD 草稿: +... +``` + +应用启动时扫描 `skills/**/*.md` 的 frontmatter,建 Prompt 注册表 + 自动分类到对应场景工作流的右栏。 + +## 与主视图(wireframe 01)的切换 + +用户可以: +- 主视图顶栏点"💼 业务 / 💻 开发 / 🧪 测试 / 🚀 运维" → 切换到对应场景工作流 +- 场景工作流里点"📝 继续编辑" / "✨ 执行" → 回到主视图开始 AI 对话 + +**设计原则**: 主视图是"聊天主战场",场景工作流是"任务导航",两者各司其职。 + +## Sprint 7 实现影响 + +| 新增 Swift 文件 | 作用 | +|-----------|------| +| `WorkflowView.swift` | 三栏布局(共 4 个场景,通过数据驱动渲染) | +| `PromptRegistry.swift` | 扫描 skills/ 目录,建 Prompt 注册表 | +| `PromptActionCard.swift` | 右栏每张 Prompt 卡组件 | +| `PromptRunner.swift` | 表单参数 → 组合 prompt → 发送到会话 | +| `WorkflowStepModel.swift` | 时序数据模型(每场景的步骤定义) | +| `RoleContext.swift` | 用户角色 → 决定默认场景 + 工作流状态持久化 | + +## 与已有 Skills 的兼容 + +现有 29 个 prompt 在 `skills//prompts/*.md` 下,Sprint 7 迁移时**在文件顶部加 frontmatter** 即可自动被加载,不改写 prompt 内容。