feat: add CLI Viewer Page with multi-pane layout and state management

- Implemented the CliViewerPage component for displaying CLI outputs in a configurable multi-pane layout. - Integrated Zustand for state management, allowing for dynamic layout changes and tab management. - Added layout options: single, split horizontal, split vertical, and 2x2 grid. - Created viewerStore for managing layout, panes, and tabs, including actions for adding/removing panes and tabs. - Added CoordinatorPage barrel export for easier imports.
2026-02-11 02:33:51 +08:00 · 2026-02-03 17:28:26 +08:00
parent b63e254f36
commit 37ba849e75
101 changed files with 10422 additions and 1145 deletions
--- a/ccw/docs-site/i18n/zh/docusaurus-plugin-content-docs/current/overview.mdx
+++ b/ccw/docs-site/i18n/zh/docusaurus-plugin-content-docs/current/overview.mdx
@@ -0,0 +1,331 @@
+---
+title: 欢迎使用 CCW
+sidebar_label: 概览
+sidebar_position: 1
+---
+
+import Mermaid from '@theme/Mermaid';
+import Link from '@docusaurus/Link';
+
+# 欢迎使用 CCW
+
+CCW 是一个专业的工作流自动化平台，结合了 AI 驱动的智能与结构化开发工作流。凭借 40+ 命令和 15 个集成工作流，CCW 彻底改变了您构建、测试和交付软件的方式。
+
+## 什么是 CCW？
+
+CCW (Claude Code Workflows) 是一个高级开发环境，编排 AI 代理、工作流和工具以加速软件开发，同时保持质量标准。
+
+**核心能力：**
+
+- **AI 驱动开发** - 利用多种 AI 模型（Gemini、Codex、Claude、Qwen）进行代码分析、生成和审查
+- **结构化工作流** - 从快速执行到智能编排的 15 个工作流级别
+- **40+ 命令** - 覆盖规划、执行、测试、审查和维护的全面命令集
+- **会话管理** - 完整的状态持久化，支持可恢复的会话
+- **多代理协调** - 具有依赖感知任务分配的并行执行
+- **质量关卡** - 内置的测试、验证和代码审查工作流
+
+## 快速链接
+
+<div className="row">
+  <div className="col col--4">
+    <Link to="/docs/workflows/introduction" className="card padding--lg">
+      <div className="card__header">
+        <h3>工作流</h3>
+      </div>
+      <div className="card__body">
+        <p>探索从快速执行到智能编排的 15 个工作流级别</p>
+      </div>
+    </Link>
+  </div>
+  <div className="col col--4">
+    <Link to="/docs/commands/general/ccw" className="card padding--lg">
+      <div className="card__header">
+        <h3>命令</h3>
+      </div>
+      <div className="card__body">
+        <p>工作流、问题、CLI 和内存操作的完整命令参考</p>
+      </div>
+    </Link>
+  </div>
+  <div className="col col--4">
+    <Link to="/docs/faq" className="card padding--lg">
+      <div className="card__header">
+        <h3>常见问题</h3>
+      </div>
+      <div className="card__body">
+        <p>常见问题、故障排除提示和最佳实践</p>
+      </div>
+    </Link>
+  </div>
+</div>
+
+## 核心功能
+
+### 40+ 命令
+
+CCW 提供按类别组织的全面命令集：
+
+| 类别 | 命令数 | 用途 |
+|----------|----------|---------|
+| **工作流** | 13 命令 | 规划、执行、审查、清理 |
+| **问题** | 7 命令 | 问题发现、规划、解决 |
+| **CLI** | 2 命令 | CLI 初始化和审查 |
+| **内存** | 6 命令 | 知识管理和文档 |
+| **通用** | 7+ 命令 | 协调、调试、流程创建 |
+
+### 15 个集成工作流
+
+<Mermaid
+  chart={`
+    graph TB
+        subgraph Main["主工作流 (5 个级别)"]
+            L1["级别 1: 快速<br/>lite-lite-lite"]
+            L2["级别 2: 轻量级<br/>lite-plan, lite-fix, multi-cli-plan"]
+            L3["级别 3: 标准<br/>plan, tdd-plan, test-fix-gen"]
+            L4["级别 4: 头脑风暴<br/>brainstorm:auto-parallel"]
+            L5["级别 5: 智能化<br/>ccw-coordinator"]
+            L1 --> L2 --> L3 --> L4 --> L5
+        end
+
+        subgraph Issue["问题工作流"]
+            I1["阶段 1: 积累"]
+            I2["阶段 2: 解决"]
+            I1 --> I2
+        end
+
+        Main -.->|开发后| Issue
+
+        classDef level1 fill:#e3f2fd,stroke:#1976d2
+        classDef level2 fill:#bbdefb,stroke:#1976d2
+        classDef level3 fill:#90caf9,stroke:#1976d2
+        classDef level4 fill:#64b5f6,stroke:#1976d2
+        classDef level5 fill:#42a5f5,stroke:#1976d2
+        classDef issue fill:#fff3e0,stroke:#f57c00
+
+        class L1 level1,L2 level2,L3 level3,L4 level4,L5 level5,I1,I2 issue
+  `}
+/>
+
+**主工作流级别：**
+
+- **级别 1**：零开销的超轻量级直接执行
+- **级别 2**：轻量级规划 (lite-plan)、错误修复 (lite-fix)、多 CLI 分析 (multi-cli-plan)
+- **级别 3**：标准规划 (plan)、测试驱动开发 (tdd-plan)、测试修复生成 (test-fix-gen)
+- **级别 4**：多角色并行分析的头脑风暴
+- **级别 5**：自动命令选择的智能编排
+
+**问题工作流：**
+
+- **积累阶段**：discover、new
+- **解决阶段**：plan、queue、execute
+
+### AI 驱动的智能
+
+CCW 集成多种 AI 模型提供智能辅助：
+
+| 模型 | 能力 | 使用场景 |
+|-------|--------------|-----------|
+| **Gemini** | 分析 + 写入 | 代码审查、调试、重构 |
+| **Codex** | 分析 + 写入 + 审查 | Git 感知代码审查、实现 |
+| **Claude** | 分析 + 写入 | 复杂推理、文档 |
+| **Qwen** | 分析 + 写入 | 代码生成、模式匹配 |
+
+**多 CLI 协作：**
+
+```bash
+# 比较多个 AI 视角的解决方案
+/ccw multi-cli-plan "比较 Redis vs RabbitMQ 用于消息队列"
+```
+
+### 会话管理
+
+CCW 为所有工作流会话提供完整的状态持久化：
+
+```bash
+# 启动规划会话
+/ccw workflow:plan "实现用户认证"
+
+# 恢复暂停的会话
+/ccw workflow:session:resume WFS-user-auth
+
+# 列出所有会话
+/ccw workflow:session:list
+
+# 完成并归档
+/ccw workflow:session:complete WFS-user-auth
+```
+
+**会话结构：**
+```
+.workflow/active/WFS-{session}/
+├── workflow-session.json          # 会话元数据
+├── IMPL_PLAN.md                   # 实现计划
+├── TODO_LIST.md                   # 进度跟踪
+├── .task/
+│   ├── IMPL-001.json              # 任务定义
+│   └── ...
+└── .summaries/
+    ├── IMPL-001-summary.md        # 完成摘要
+    └── ...
+```
+
+## 快速入门
+
+### 选择您的起点
+
+<div className="row">
+  <div className="col col--6">
+    <div className="card padding--md">
+      <div className="card__header">
+        <h3>CCW 新手？</h3>
+      </div>
+      <div className="card__body">
+        <p>从 <strong>级别 1 工作流</strong> 开始处理简单任务：</p>
+        <ul>
+          <li>快速修复和配置调整</li>
+          <li>简单功能实现</li>
+          <li>无规划开销的直接执行</li>
+        </ul>
+        <Link to="/docs/workflows/level-1-ultra-lightweight" className="button button--primary button--sm">学习级别 1</Link>
+      </div>
+    </div>
+  </div>
+  <div className="col col--6">
+    <div className="card padding--md">
+      <div className="card__header">
+        <h3>经验丰富的开发者？</h3>
+      </div>
+      <div className="card__body">
+        <p>直接跳到 <strong>级别 3 工作流</strong> 处理复杂功能：</p>
+        <ul>
+          <li>多模块变更</li>
+          <li>测试驱动开发</li>
+          <li>带验证的完整规划</li>
+        </ul>
+        <Link to="/docs/workflows/level-3-standard" className="button button--primary button--sm">学习级别 3</Link>
+      </div>
+    </div>
+  </div>
+</div>
+
+### 快速入门示例
+
+**快速修复 (级别 1)：**
+```bash
+# 简单更改的直接执行
+/ccw lite-lite-lite "修复登录按钮中的拼写错误"
+```
+
+**带诊断的错误修复 (级别 2)：**
+```bash
+# 智能错误诊断和修复
+/ccw lite-fix "用户在个人资料更新时遇到 500 错误"
+```
+
+**功能开发 (级别 3)：**
+```bash
+# 完整的规划和执行
+/ccw workflow:plan "添加 OAuth2 认证"
+/ccw workflow:execute --session WFS-oauth-auth
+```
+
+**新功能设计 (级别 4)：**
+```bash
+# 多角色头脑风暴
+/ccw brainstorm:auto-parallel "设计实时通知系统"
+```
+
+**不确定的命令 (级别 5)：**
+```bash
+# 自动分析并推荐命令链
+/ccw ccw-coordinator "需要重构整个 API 层"
+```
+
+## 架构概览
+
+<Mermaid
+  chart={`
+    flowchart LR
+        User[开发者] --> CCW[CCW CLI]
+        CCW --> Workflow{工作流引擎}
+
+        Workflow --> L1[级别 1: 直接]
+        Workflow --> L2[级别 2: 轻量级]
+        Workflow --> L3[级别 3: 标准]
+        Workflow --> L4[级别 4: 头脑风暴]
+        Workflow --> L5[级别 5: 智能化]
+
+        L1 --> Agent[代理执行]
+        L2 --> Agent
+        L3 --> Agent
+        L4 --> MultiAgent[多代理并行]
+        L5 --> Coordinator[智能协调器]
+
+        Agent --> AI[AI 模型]
+        MultiAgent --> AI
+        Coordinator --> AI
+
+        AI --> Output[代码 + 工件]
+        Output --> Repo[Git 仓库]
+        Repo --> Session[会话状态]
+
+        classDef user fill:#f3f9ff,stroke:#1976d2
+        classDef ccw fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
+        classDef agent fill:#c8e6c9,stroke:#388e3c
+        classDef ai fill:#fff9c4,stroke:#f57c00
+        classDef storage fill:#f1f8e9,stroke:#33691e
+
+        class User user,CCW ccw,Workflow ccw,Agent agent,MultiAgent agent,Coordinator ccw,AI ai,Output storage,Repo storage,Session storage
+  `}
+/>
+
+## 下一步
+
+### 学习基础知识
+
+1. **[工作流简介](./workflows/introduction.mdx)** - 了解工作流级别和选择
+2. **[命令参考](./commands/general/ccw.mdx)** - 完整的命令文档
+3. **[常见问题](./faq.mdx)** - 常见问题和故障排除
+
+### 按使用场景探索
+
+| 使用场景 | 推荐工作流 | 文档 |
+|----------|---------------------|---------------|
+| 快速修复 | `lite-lite-lite` | [级别 1](./workflows/level-1-ultra-lightweight.mdx) |
+| 错误诊断 | `lite-fix` | [级别 2](./workflows/level-2-rapid.mdx) |
+| 功能开发 | `plan` → `execute` | [级别 3](./workflows/level-3-standard.mdx) |
+| 测试驱动开发 | `tdd-plan` → `execute` | [级别 3](./workflows/level-3-standard.mdx) |
+| 架构设计 | `brainstorm:auto-parallel` | [级别 4](./workflows/level-4-brainstorm.mdx) |
+| 复杂工作流 | `ccw-coordinator` | [级别 5](./workflows/level-5-intelligent.mdx) |
+| 问题跟踪 | 问题工作流 | [工作流 FAQ](./workflows/faq.mdx) |
+
+### 试用一下
+
+**安装：**
+```bash
+npm install -g @ccw/cli
+```
+
+**初始化项目：**
+```bash
+ccw init
+```
+
+**第一个工作流：**
+```bash
+# 简单任务
+ccw lite-lite-lite "添加用户个人资料页面"
+
+# 复杂功能
+ccw workflow:plan "实现购物车"
+```
+
+## 支持
+
+- **文档**: [docs.ccw.dev](https://docs.ccw.dev)
+- **GitHub**: [github.com/ccw/ccw](https://github.com/ccw/ccw)
+- **问题**: [github.com/ccw/ccw/issues](https://github.com/ccw/ccw/issues)
+
+---
+
+**准备开始了吗？** 探索 [工作流简介](./workflows/introduction.mdx) 了解所有 15 个工作流级别。