mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
c3ddf7e322
- Add docs directory with VitePress configuration - Add GitHub Actions workflow for docs build and deploy - Support bilingual (English/Chinese) documentation - Include search, custom theme, and responsive design
339 lines
10 KiB
Markdown
339 lines
10 KiB
Markdown
# Dashboard 面板
|
||
|
||
## 一句话定位
|
||
|
||
**Dashboard 是 VS Code 内置的可视化管理中心** — 一个 Webview 界面统一管理 Specs、Skills、Memory、会话历史和 CLI 终端，无需离开编辑器。
|
||
|
||
## 解决的痛点
|
||
|
||
| 痛点 | 现状 | Dashboard 方案 |
|
||
| --- | --- | --- |
|
||
| **分散管理** | Specs、Skills、Memory 各自独立管理 | 统一界面集中管理 |
|
||
| **命令行操作** | 需要记住命令和参数 | 点击式 GUI 操作 |
|
||
| **状态不可见** | 后台任务执行状态不透明 | 实时状态展示 |
|
||
| **上下文切换** | 在终端和编辑器间频繁切换 | 集成在 VS Code 侧边栏 |
|
||
|
||
## 核心概念速览
|
||
|
||
| 概念 | 说明 | 入口 |
|
||
| --- | --- | --- |
|
||
| **首页** | 项目概览、快速入口 | Dashboard 主页 |
|
||
| **CLAUDE.md Manager** | 项目指令管理 | Specs 页面 |
|
||
| **Skills Manager** | 技能市场和管理 | Skills 页面 |
|
||
| **Core Memory 视图** | 记忆浏览和搜索 | Memory 页面 |
|
||
| **CLI 终端** | 统一命令执行 | Terminal 面板 |
|
||
| **会话历史** | 历史会话浏览 | Session 侧边栏 |
|
||
| **Graph Explorer** | 项目依赖可视化 | Graph 面板 |
|
||
|
||
## 使用场景
|
||
|
||
| 场景 | 使用页面 |
|
||
| --- | --- |
|
||
| **管理项目规范** | CLAUDE.md Manager |
|
||
| **安装/管理技能** | Skills Manager (Skill Hub) |
|
||
| **查看项目记忆** | Core Memory 视图 |
|
||
| **执行 CLI 命令** | CLI 终端 |
|
||
| **浏览会话历史** | Session 侧边栏 |
|
||
| **查看项目结构** | Graph Explorer |
|
||
|
||
## 操作步骤
|
||
|
||
### 启动 Dashboard
|
||
|
||
```bash
|
||
# 启动 Dashboard（默认端口 3456）
|
||
ccw view
|
||
|
||
# 指定端口
|
||
ccw view --port 8080
|
||
|
||
# 指定主机
|
||
ccw view --host 0.0.0.0
|
||
|
||
# 不自动打开浏览器
|
||
ccw view --no-browser
|
||
```
|
||
|
||
### Dashboard 布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Dashboard 主界面 │
|
||
├───────────────────┬─────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 侧边栏导航 │ 主内容区 │
|
||
│ ┌─────────────┐ │ ┌─────────────────────────────────────┐ │
|
||
│ │ 首页 │ │ │ │ │
|
||
│ │ Specs │ │ │ 动态内容区域 │ │
|
||
│ │ Skills │ │ │ (根据导航变化) │ │
|
||
│ │ Memory │ │ │ │ │
|
||
│ │ Terminal │ │ │ │ │
|
||
│ │ Settings │ │ │ │ │
|
||
│ └─────────────┘ │ └─────────────────────────────────────┘ │
|
||
│ │ │
|
||
├───────────────────┴─────────────────────────────────────────────┤
|
||
│ 浮动面板 (可切换) │
|
||
│ ┌─────────────────┐ ┌─────────────────┐ ┌──────────────────┐ │
|
||
│ │ Queue 面板 │ │ Inspector 面板 │ │ File 侧边栏 │ │
|
||
│ │ (任务队列) │ │ (对象检查) │ │ │ │
|
||
│ └─────────────────┘ └─────────────────┘ └──────────────────┘ │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### CLAUDE.md Manager (Specs 页面)
|
||
|
||
管理项目规范文档 (`.cw/specs/` 和 `~/.cw/personal/`)
|
||
|
||
**功能**:
|
||
- 浏览所有规范文件
|
||
- 按维度/类别/关键词筛选
|
||
- 编辑规范内容
|
||
- 创建新规范
|
||
- 重建索引缓存
|
||
|
||
**操作**:
|
||
```
|
||
1. 导航到 Specs 页面
|
||
2. 选择维度筛选器: all / specs / personal
|
||
3. (可选) 按类别筛选: general / exploration / planning / execution
|
||
4. (可选) 搜索框输入关键词
|
||
5. 点击规范卡片查看详情
|
||
6. 编辑内容并保存
|
||
7. 点击 "重建索引" 更新缓存
|
||
```
|
||
|
||
### Skills Manager (Skills 页面)
|
||
|
||
统一管理 Claude Skills 和 Codex Skills
|
||
|
||
**功能**:
|
||
- 浏览已安装技能
|
||
- 技能市场 (Skill Hub)
|
||
- 安装/卸载技能
|
||
- 启用/禁用技能
|
||
- 技能详情查看
|
||
|
||
**Skill Hub**:
|
||
- 远程技能库
|
||
- 本地技能发现
|
||
- 一键安装
|
||
- 版本管理
|
||
|
||
**操作**:
|
||
```
|
||
1. 导航到 Skills 页面
|
||
2. 切换 CLI 模式: Claude / Codex
|
||
3. 筛选: 类别 / 来源 / 状态
|
||
4. 点击 "Skill Hub" 浏览市场
|
||
5. 选择技能点击 "安装"
|
||
6. 使用开关启用/禁用技能
|
||
7. 点击技能卡片查看详情
|
||
```
|
||
|
||
### Core Memory 视图 (Memory 页面)
|
||
|
||
浏览和搜索项目记忆
|
||
|
||
**功能**:
|
||
- 记忆列表分页浏览
|
||
- 标签筛选
|
||
- 语义搜索
|
||
- 查看记忆详情
|
||
- 生成 AI 摘要
|
||
- 管理标签
|
||
|
||
**操作**:
|
||
```
|
||
1. 导航到 Memory 页面
|
||
2. (可选) 输入标签筛选
|
||
3. (可选) 输入搜索查询
|
||
4. 点击记忆卡片查看详情
|
||
5. 点击 "生成摘要" 调用 AI
|
||
6. 添加/删除标签
|
||
7. 查看提取任务状态
|
||
```
|
||
|
||
### CLI 终端 (Terminal 页面)
|
||
|
||
统一的 CLI 执行界面
|
||
|
||
**功能**:
|
||
- 工具选择下拉
|
||
- 模式选择 (analysis/write/review)
|
||
- 模型选择
|
||
- 工作目录配置
|
||
- Prompt 输入 (支持多行)
|
||
- 流式输出显示
|
||
- 规则模板快速加载
|
||
- 会话恢复管理
|
||
|
||
**操作**:
|
||
```
|
||
1. 导航到 Terminal 页面
|
||
2. 选择工具: gemini / qwen / codex / claude
|
||
3. 选择模式: analysis / write
|
||
4. (可选) 选择具体模型
|
||
5. (可选) 设置工作目录
|
||
6. 输入 Prompt (支持多行)
|
||
7. 点击 "执行" 或按 Ctrl+Enter
|
||
8. 查看流式输出
|
||
9. (可选) 使用规则模板
|
||
10. (可选) 恢复历史会话
|
||
```
|
||
|
||
### 浮动面板
|
||
|
||
#### Queue 面板
|
||
显示任务队列状态:
|
||
- 当前执行任务
|
||
- 等待中任务
|
||
- 已完成任务
|
||
- 失败任务
|
||
|
||
#### Inspector 面板
|
||
检查对象详情:
|
||
- 文件元数据
|
||
- 符号信息
|
||
- 依赖关系
|
||
|
||
#### File 侧边栏
|
||
项目文件浏览:
|
||
- 文件树
|
||
- 快速打开
|
||
- 文件搜索
|
||
|
||
### 会话侧边栏
|
||
|
||
浏览历史会话：
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ Sessions [清空历史] │
|
||
├─────────────────────────────┤
|
||
│ ┌───────────────────────┐ │
|
||
│ │ 今天 │ │
|
||
│ │ • 会话 1 │ │
|
||
│ │ • 会话 2 │ │
|
||
│ │ │ │
|
||
│ │ 昨天 │ │
|
||
│ │ • 会话 3 │ │
|
||
│ │ • 会话 4 │ │
|
||
│ └───────────────────────┘ │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### Graph Explorer
|
||
|
||
可视化项目依赖：
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ Graph Explorer │
|
||
├─────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────┐ ┌─────┐ │
|
||
│ │ API │ ───> │ Auth│ │
|
||
│ └─────┘ └─────┘ │
|
||
│ │ │ │
|
||
│ ▼ ▼ │
|
||
│ ┌─────┐ ┌─────┐ │
|
||
│ │ DB │ <────│User │ │
|
||
│ └─────┘ └─────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
**功能**:
|
||
- 模块依赖图
|
||
- 调用关系图
|
||
- 缩放/平移
|
||
- 节点搜索
|
||
|
||
## 配置说明
|
||
|
||
### Dashboard 配置 (settings.json)
|
||
|
||
```json
|
||
{
|
||
"dashboard": {
|
||
"port": 3456,
|
||
"host": "127.0.0.1",
|
||
"openBrowser": true,
|
||
"immersiveMode": false
|
||
},
|
||
"panels": {
|
||
"queue": {
|
||
"enabled": true,
|
||
"width": 400
|
||
},
|
||
"inspector": {
|
||
"enabled": true,
|
||
"width": 360
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 功能开关
|
||
|
||
```typescript
|
||
const featureFlags = {
|
||
dashboardQueuePanelEnabled: boolean, // Queue 面板
|
||
dashboardInspectorEnabled: boolean, // Inspector 面板
|
||
dashboardGraphEnabled: boolean, // Graph Explorer
|
||
};
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### Q1: Dashboard 无法启动？
|
||
|
||
A: 检查端口是否被占用：
|
||
|
||
```bash
|
||
# 检查端口占用
|
||
lsof -i :3456 # macOS/Linux
|
||
netstat -ano | findstr :3456 # Windows
|
||
|
||
# 使用其他端口
|
||
ccw view --port 8080
|
||
```
|
||
|
||
### Q2: Dashboard 内容不刷新？
|
||
|
||
A: Dashboard 使用缓存，手动刷新：
|
||
- 点击页面刷新按钮
|
||
- 或使用 `ccw view --restart`
|
||
|
||
### Q3: 如何在全屏模式下使用？
|
||
|
||
A: 使用沉浸式模式：
|
||
- 点击工具栏的全屏按钮
|
||
- 或按 `F11` 键
|
||
|
||
### Q4: Skills Hub 无法连接？
|
||
|
||
A: 检查网络连接和 Hub 地址：
|
||
|
||
```json
|
||
{
|
||
"skillHub": {
|
||
"url": "https://skill-hub.example.com",
|
||
"timeout": 10000
|
||
}
|
||
}
|
||
```
|
||
|
||
## 相关功能
|
||
|
||
- [Spec 规范系统](./spec.md) — CLAUDE.md Manager 管理的内容
|
||
- [Memory 记忆系统](./memory.md) — Core Memory 视图的数据
|
||
- [CLI 调用系统](./cli.md) — Terminal 面板的功能
|
||
|
||
## 进阶阅读
|
||
|
||
- Dashboard 主页: `ccw/frontend/src/pages/TerminalDashboardPage.tsx`
|
||
- Specs 页面: `ccw/frontend/src/pages/SpecsSettingsPage.tsx`
|
||
- Skills 页面: `ccw/frontend/src/pages/SkillsManagerPage.tsx`
|
||
- 路由配置: `ccw/src/core/routes/`
|