# 开发工作流

> 本文档描述 Obsidian + Vibe Kanban + Claude Code 三者协作的工作流程

## 三者角色定位

| 角色              | 定位   | 特点              |
| --------------- | ---- | --------------- |
| **Obsidian**    | 设计中心 | 批量规划、可视化设计、长期文档 |
| **Vibe Kanban** | 任务中心 | 状态管理、进度追踪、快速创建  |
| **Claude Code** | 执行中心 | 连接两者，执行开发       |

## 任务创建的两种路径

### 路径 A：从 Kanban 直接创建（快速任务）

```
用户在 Kanban 创建任务
         ↓
Claude Code 读取任务
         ↓
Claude Code 查阅 Obsidian 文档理解上下文
         ↓
执行开发
         ↓
更新 Kanban 状态
```

**适用场景**：bug 修复、小功能迭代、不需要详细设计的任务

### 路径 B：从 Obsidian Canvas 批量创建（规划任务）

```
用户在 Obsidian Canvas 设计架构
         ↓
添加任务卡片（带 project/depends 字段）
         ↓
Claude Code 解析 Canvas
         ↓
同步到对应的 Kanban 项目
         ↓
按依赖顺序执行开发
         ↓
更新 Kanban 状态
```

**适用场景**：新功能规划、前后端联动开发、批量任务创建

## 数据同步方向

| 从 → 到 | 方式 | 说明 |
|---------|------|------|
| Obsidian → Kanban | 手动命令 | Canvas 任务卡片同步到看板 |
| Kanban → Claude | 自动读取 | 开发时读取任务列表 |
| Claude → Kanban | 自动更新 | 完成后更新任务状态 |
| Obsidian → Claude | 只读查阅 | 读取架构文档理解需求 |

## 三者关系

```
┌─────────────────────────────────────────────────────────────────┐
│  Obsidian (文档中心 - 单一数据源)                                  │
│  路径: /Users/jamesw/dev_workspace/vibe-coding-cn/tg-live-game   │
│  ├── 架构设计 (*.canvas)                                         │
│  ├── 需求文档                                                    │
│  └── 任务卡片 → 同步到 Kanban                                     │
└─────────────────────────────────────────────────────────────────┘
                         ↓ 读取文档 / 同步任务
┌─────────────────────────────────────────────────────────────────┐
│  Vibe Kanban (任务管理)                                           │
│  ├── tg-live-game-hono: 7c6bb2ce-90a2-4e96-bc04-5facdcdb337f    │
│  ├── tg-live-game-web:  32214e97-f833-485f-8c7c-cf4d82327e0b    │
│  └── 任务状态: todo → inprogress → inreview → done               │
└─────────────────────────────────────────────────────────────────┘
                         ↓ 领取任务 / 执行开发
┌─────────────────────────────────────────────────────────────────┐
│  Claude Code (代码开发)                                           │
│  启动目录: /Users/jamesw/dev_workspace/frontend/tg-live-game/    │
│  ├── tg-live-game-hono/  (后端)                                  │
│  └── tg-live-game-web/   (前端)                                  │
└─────────────────────────────────────────────────────────────────┘
```

## 多项目协作工作流

### 场景：同时设计前后端功能

当一个功能需要前后端同时开发时（如"用户列表"功能）：

```
1. Obsidian 设计阶段
   ├── 在 canvas 画架构图
   └── 创建两个关联的任务卡片
       ├── 任务20260103-01-hono (后端 API)
       └── 任务20260103-01-web  (前端页面)

2. 任务同步阶段
   ├── 解析任务卡片的 project 字段
   ├── hono 任务 → tg-live-game-hono Kanban
   └── web 任务 → tg-live-game-web Kanban

3. Claude Code 开发阶段
   ├── 在父目录 tg-live-game 启动
   ├── 读取关联任务，理解依赖关系
   ├── 先开发后端 (depends 优先)
   └── 再开发前端

4. 代码提交阶段
   ├── cd tg-live-game-hono && git commit
   └── cd tg-live-game-web && git commit
```

## 任务卡片格式

### 单项目任务

```
任务YYYYMMDD-NN

任务标题

project: tg-live-game-hono

1. 需求描述
2. 具体要求
```

### 关联任务（前后端）

**后端任务**:
```
任务YYYYMMDD-NN-hono
─────────────────
后端：用户列表 API

project: tg-live-game-hono
related: 任务YYYYMMDD-NN-web

1. 实现 GET /api/users
2. 返回分页数据
```

**前端任务**:
```
任务YYYYMMDD-NN-web
─────────────────
前端：用户列表页面

project: tg-live-game-web
related: 任务YYYYMMDD-NN-hono
depends: 任务YYYYMMDD-NN-hono

1. 调用用户列表 API
2. 表格展示用户数据
```

### 字段说明

| 字段 | 含义 | 用途 |
|------|------|------|
| `project` | 目标 Kanban 项目名 | 决定任务创建到哪个看板 |
| `related` | 关联任务编号 | 表示任务之间的关系 |
| `depends` | 依赖任务编号 | 表示需要先完成的任务 |

## 文件路径映射

| 位置 | 路径 | 用途 |
|------|------|------|
| Obsidian 项目文档 | `vibe-coding-cn/tg-live-game/` | 架构设计、需求文档 |
| Obsidian 后端文档 | `vibe-coding-cn/tg-live-game/tg-live-game-hono/` | 后端架构 |
| Obsidian 前端文档 | `vibe-coding-cn/tg-live-game/tg-live-game-web/` | 前端架构 |
| 代码父目录 | `frontend/tg-live-game/` | Claude Code 启动位置 |
| 后端代码 | `frontend/tg-live-game/tg-live-game-hono/` | Hono API |
| 前端代码 | `frontend/tg-live-game/tg-live-game-web/` | Vue 应用 |

## Claude Code 启动说明

```bash
# 多项目开发（推荐）
cd /Users/jamesw/dev_workspace/frontend/tg-live-game
claude

# 单项目开发（仅后端）
cd /Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-hono
claude

# 单项目开发（仅前端）
cd /Users/jamesw/dev_workspace/frontend/tg-live-game/tg-live-game-web
claude
```

## 交替式开发模式（批量任务）

当 Obsidian 一次性创建多个前后端任务，需要交替开发和验证时：

### 依赖链设计

用 `depends` 字段串联任务，形成执行顺序：

```
任务01-hono (后端 API A)     ← 无依赖，最先执行
    ↓
任务01-web  (前端调用 A)     depends: 任务01-hono
    ↓
任务02-hono (后端 API B)     depends: 任务01-web
    ↓
任务02-web  (前端调用 B)     depends: 任务02-hono
    ↓
...
```

### Canvas 中的表示

```
┌──────────────────┐     ┌──────────────────┐
│ 任务01-hono      │ ──→ │ 任务01-web       │
│ 后端：用户列表   │     │ 前端：用户列表   │
│ project: hono    │     │ depends: 01-hono │
└──────────────────┘     └──────────────────┘
                              │
                              ↓ depends
┌──────────────────┐     ┌──────────────────┐
│ 任务02-hono      │ ──→ │ 任务02-web       │
│ 后端：用户详情   │     │ 前端：用户详情   │
│ depends: 01-web  │     │ depends: 02-hono │
└──────────────────┘     └──────────────────┘
```

### 执行顺序

Claude Code 按 `depends` 链自动排序执行：
1. 任务01-hono → 开发后端 API A
2. 任务01-web → 开发前端调用 A，验证
3. 任务02-hono → 开发后端 API B
4. 任务02-web → 开发前端调用 B，验证

## 相关文档

- [[architecture-v1]] - 整体系统架构
- [[tg-live-game-hono/_project]] - 后端项目配置
- [[tg-live-game-hono/workflow]] - 后端开发工作流
- [[tg-live-game-web/_project]] - 前端项目配置