mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 c3ddf7e322 docs: add VitePress documentation site

- 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

2026-02-28 16:14:09 +08:00

10 KiB

Raw Blame History

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

# 启动 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)

{
  "dashboard": {
    "port": 3456,
    "host": "127.0.0.1",
    "openBrowser": true,
    "immersiveMode": false
  },
  "panels": {
    "queue": {
      "enabled": true,
      "width": 400
    },
    "inspector": {
      "enabled": true,
      "width": 360
    }
  }
}

功能开关

const featureFlags = {
  dashboardQueuePanelEnabled: boolean,    // Queue 面板
  dashboardInspectorEnabled: boolean,     // Inspector 面板
  dashboardGraphEnabled: boolean,         // Graph Explorer
};

常见问题

Q1: Dashboard 无法启动？

A: 检查端口是否被占用：

# 检查端口占用
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 地址：

{
  "skillHub": {
    "url": "https://skill-hub.example.com",
    "timeout": 10000
  }
}

进阶阅读

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/

10 KiB Raw Blame History Unescape Escape