@@ -167,9 +177,9 @@
-
-
+
-
+
-
+
-📦 Artifacts (2)
+ 📦 产出物 (2)
@@ -192,7 +202,7 @@
-
+
-
+
通用设置
@@ -185,7 +185,7 @@数据
身份与登录
+用户旅程(登录 → 项目 → 主视图)
11
- 🔐 登录页
+🔐 登录
企业 SSO / IM 扫码 / 账号密码 · 后续接入企业用户体系
+ +16 ⭐
+ 📂 项目列表 / 切换
+账号下所有项目 · 每个带模式徽章(A/B/C/D)· 筛选 / 排序 / 新建
+ + +17 ⭐
+ ✨ 新建项目向导
+4 步: 选接入模式 → 基本信息 → 起步清单预览 → 初始化
+四大场景工作流(角色视角)
diff --git a/docs/design/ui/prototype/prototype-modules-map.md b/docs/design/ui/prototype/prototype-modules-map.md index 4f5c8ea..f24b0f6 100644 --- a/docs/design/ui/prototype/prototype-modules-map.md +++ b/docs/design/ui/prototype/prototype-modules-map.md @@ -25,6 +25,8 @@ | **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 | +| **16** | [**项目列表**](./16-project-list.html) | 多项目切换 · 4 模式徽章 | 登录后入口 · 筛选 / 切换 / 新建 | **新增** `ProjectListView.swift``ProjectStore.swift`
`ProjectCard.swift` | CLI: `epcode init --mode=X` · 读 `docs/chapters/00-adoption/` | +| **17** | [**新建项目向导**](./17-new-project.html) | 4 模式初始化 | 选 A/B/C/D → 填信息 → 起步清单 → 完成 | **新增** `NewProjectWizardView.swift`
调用 `epcode init` | 复用 `tools/cli/scaffolds/mode-{a,b,c,d}/` | --- diff --git a/docs/design/ui/prototype/styles.css b/docs/design/ui/prototype/styles.css index 0af544b..3537f0f 100644 --- a/docs/design/ui/prototype/styles.css +++ b/docs/design/ui/prototype/styles.css @@ -795,3 +795,161 @@ body.with-banner .app { padding-top: 32px; } height: 1px; background: var(--color-border); } + +/* ============ 接入模式徽章(Sprint 6 新增) ============ */ + +.mode-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 8px; + border-radius: var(--radius-sm); + font-size: var(--fs-xs); + font-weight: 600; + border: 1px solid transparent; +} +.mode-badge.mode-a { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; } +.mode-badge.mode-b { background: #fff3e0; color: #e65100; border-color: #ffcc80; } +.mode-badge.mode-c { background: #e3f2fd; color: #0d47a1; border-color: #90caf9; } +.mode-badge.mode-d { background: #f3e5f5; color: #4a148c; border-color: #ce93d8; } + +/* ============ 项目列表 / 切换 ============ */ + +.projects-wrap { + max-width: 1100px; + margin: 0 auto; + padding: 64px 24px 40px; +} +.projects-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: var(--sp-6); +} +.projects-header h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-1); } +.projects-header p { color: var(--color-text-muted); font-size: var(--fs-lg); } +.projects-filter { + display: flex; + gap: var(--sp-2); + margin-bottom: var(--sp-5); + flex-wrap: wrap; + align-items: center; +} +.filter-chip { + padding: var(--sp-1) var(--sp-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + font-size: var(--fs-sm); + cursor: pointer; + background: var(--color-bg); +} +.filter-chip.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } + +.project-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: var(--sp-4); +} +.project-card { + padding: var(--sp-4); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + background: var(--color-bg); + cursor: pointer; + transition: all 0.2s; + display: flex; + flex-direction: column; + gap: var(--sp-2); + text-decoration: none; + color: inherit; +} +.project-card:hover { + border-color: var(--color-primary); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + text-decoration: none; +} +.project-card-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--sp-2); +} +.project-name { font-size: var(--fs-lg); font-weight: 600; } +.project-meta { + font-size: var(--fs-sm); + color: var(--color-text-muted); + display: flex; + gap: var(--sp-3); + flex-wrap: wrap; +} +.project-last { + font-size: var(--fs-xs); + color: var(--color-text-muted); + margin-top: var(--sp-2); + padding-top: var(--sp-2); + border-top: 1px dashed var(--color-border); +} +.project-card.new-project { + border-style: dashed; + background: var(--color-bg-alt); + align-items: center; + justify-content: center; + min-height: 160px; + text-align: center; +} +.project-card.new-project:hover { + background: var(--color-primary-lightest); + border-style: solid; +} + +/* ============ 新建项目向导(模式卡片) ============ */ + +.mode-card-select { + padding: var(--sp-4); + border: 2px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; + transition: all 0.2s; + display: flex; + gap: var(--sp-3); + align-items: flex-start; +} +.mode-card-select:hover { + border-color: var(--color-primary); +} +.mode-card-select.selected { + border-color: var(--color-primary); + background: var(--color-primary-lightest); +} +.mode-card-select .letter { + font-size: 32px; + font-weight: 700; + width: 48px; + height: 48px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: var(--color-bg); + border: 1px solid var(--color-border); +} +.mode-card-select .mode-a .letter, +.mode-card-select.mode-a .letter { background: #e8f5e9; color: #1b5e20; } + +/* ============ 顶栏项目切换器 ============ */ + +.project-switcher { + display: inline-flex; + align-items: center; + gap: var(--sp-2); + padding: var(--sp-1) var(--sp-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; + font-size: var(--fs-sm); + background: var(--color-bg); +} +.project-switcher:hover { background: var(--color-bg-hover); } +.project-switcher .name { font-weight: 500; } diff --git a/docs/design/ui/wireframes/16-17-projects-and-new-project.md b/docs/design/ui/wireframes/16-17-projects-and-new-project.md new file mode 100644 index 0000000..db00546 --- /dev/null +++ b/docs/design/ui/wireframes/16-17-projects-and-new-project.md @@ -0,0 +1,168 @@ +# Wireframe 16-17 · 项目列表 + 新建项目(Sprint 6 新增) + +> 补齐 4 种接入模式(A/B/C/D)在 GUI 里的入口。这是框架的一等公民,不能只存在于 CLI 和文档里。 + +## 完整用户旅程 + +```mermaid +flowchart LR + A[登录 11] --> B[项目列表 16] + B -->|选已有项目| C[主视图 01] + B -->|+ 新建项目| D[新建向导 17] + D -->|1. 选模式| E[2. 填信息] + E --> F[3. 起步清单预览] + F --> G[4. 初始化成功] + G --> C + C --> H[场景工作流 12-15] + C -->|顶栏切换| B +``` + +## 16 · 项目列表 + +### 布局 + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ 🚀 EP Code AI 张工 · 产品 │ ① 顶部窄条 +├─────────────────────────────────────────────────────────────────┤ +│ │ +│ 我的项目 [+ 新建项目] │ ② 标题 + 新建 +│ 选一个项目进入,或新建项目 │ +│ │ +│ 筛选: [全部] [A·绿地] [B·开发中] [C·迭代中] [D·稳态运维] │ ③ 筛选条 +│ 排序: 最近访问 ▾ │ +│ │ +│ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────┐ │ +│ │ 离职流程优化 [A] │ │ 支付服务 [D] │ │ 订单导出 [B] │ │ ④ 卡片网格 +│ │ 📁 12 📄 8 👥 3 │ │ 📁 32 📄 15 ⚠️ │ │ ... │ │ +│ │ 上次: 11 分钟前 │ │ 上次: 3h 前 │ │ │ │ +│ └──────────────────┘ └──────────────────┘ └──────────────┘ │ +│ │ +│ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────┐ │ +│ │ 移动端App [C] │ │ 数据分析 [C] │ │ + 新建项目 │ │ +│ │ ... │ │ ... │ │ │ │ +│ └──────────────────┘ └──────────────────┘ └──────────────┘ │ +│ │ +│ ───────────────────────────────────────────────────────────── │ +│ 💡 什么是"接入模式"? │ ⑤ 帮助区 +│ [A 绿地] [B 开发中] [C 迭代中] [D 稳态] 四张小卡片 │ +└─────────────────────────────────────────────────────────────────┘ +``` + +### 卡片元素(必展示) + +| 元素 | 数据来源 | +|------|---------| +| 项目名 | 用户填(新建时)或从目录读 | +| 模式徽章 | A/B/C/D 色系区分 | +| 会话数 / 产出物数 / 成员数 | 本地统计 | +| 预警状态 | 如有 P1/P2 事件显示 ⚠️ | +| 简介 | 用户填 | +| 上次访问 | 本地缓存 | +| 当前阶段 | 项目上下文(如"业务/PRD 编写") | + +### 模式徽章配色 + +| 模式 | 色 | 使用场景 | +|------|---|---------| +| A · 绿地 | 绿(成长) | 新项目活力 | +| B · 开发中 | 橙(进行中) | 积极追赶 | +| C · 迭代中 | 蓝(稳定) | 持续进化 | +| D · 稳态运维 | 紫(成熟) | 稳重维护 | + +## 17 · 新建项目向导 + +### 4 步流程 + +**第 1 步 · 选接入模式** ⭐ 最关键 + +4 张大卡片,每张含: +- 模式字母 (大字) +- 名称 + 副标题 +- 判定条件(2-3 条) +- 适合场景 + +默认选中 B(最常见情况),用户可点击其他。底部"还不确定?"链接到 `docs/chapters/00-adoption/`。 + +**第 2 步 · 项目基本信息** + +| 字段 | 必填 | 说明 | +|------|-----|------| +| 项目名(英文) | ✓ | 小写 + 短横线,用作目录/仓库名 | +| 显示名 | ✓ | 中文展示名 | +| 描述 | - | 一句话说明 | +| 本地目录 | ✓ | 默认 `~/projects/<项目名>` | +| Git 远程 | - | 暂不关联 / 新建 GitLab / 新建 GitHub / 关联已有 | + +**第 3 步 · 起步清单预览** + +根据所选模式动态生成: +- 目录树(调用 `tools/cli/scaffolds/mode-{a,b,c,d}/`) +- Checklist(来自对应 mode README 的"起步清单") + +用户看清楚"将要发生什么",无意外。 + +**第 4 步 · 初始化完成** + +- 显示成功 + 项目路径 +- 按钮: 进入项目 / 在 Finder 中打开 +- "下一步建议"block 用文字列 3-4 项 + +### 底层命令 + +点"开始初始化"实际执行: +```bash +epcode init --mode=