From 8c6225b74973bc4af2158732a6669f289c3d63c5 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Sat, 20 Dec 2025 16:16:14 +0800 Subject: [PATCH] docs: Add dashboard operation guides MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- DASHBOARD_GUIDE.md | 434 +++++++++++++++++++++++++++++++ DASHBOARD_OPERATIONS.md | 508 +++++++++++++++++++++++++++++++++++++ DASHBOARD_OPERATIONS_EN.md | 508 +++++++++++++++++++++++++++++++++++++ 3 files changed, 1450 insertions(+) create mode 100644 DASHBOARD_GUIDE.md create mode 100644 DASHBOARD_OPERATIONS.md create mode 100644 DASHBOARD_OPERATIONS_EN.md diff --git a/DASHBOARD_GUIDE.md b/DASHBOARD_GUIDE.md new file mode 100644 index 00000000..6d9246f4 --- /dev/null +++ b/DASHBOARD_GUIDE.md @@ -0,0 +1,434 @@ +# CCW Dashboard 用户指南 + +**版本**: 6.2.0 +**更新日期**: 2025-12-20 + +CCW Dashboard 是 Claude Code Workflow 的可视化控制面板，提供项目管理、会话监控、代码索引、记忆管理等功能的统一界面。 + +--- + +## 目录 + +1. [快速启动](#快速启动) +2. [界面布局](#界面布局) +3. [导航结构](#导航结构) +4. [核心视图详解](#核心视图详解) +5. [实时功能](#实时功能) +6. [快捷键](#快捷键) +7. [个性化设置](#个性化设置) +8. [API 端点参考](#api-端点参考) + +--- + +## 快速启动 + +```bash +# 启动 Dashboard（自动打开浏览器） +ccw view + +# 指定项目路径 +ccw view -p /path/to/project + +# 指定端口 +ccw serve --port 8080 + +# 仅启动服务器（不打开浏览器） +ccw serve +``` + +Dashboard 默认运行在 `http://localhost:3456`。 + +--- + +## 界面布局 + +CCW Dashboard 是一个单页应用（SPA），界面由四个核心部分组成： + +``` +┌─────────────────────────────────────────────────────────────┐ +│ 顶部操作栏 (Header) │ +├──────────────┬──────────────────────────────────────────────┤ +│ │ │ +│ 侧边栏 │ 主内容区 │ +│ 导航 │ (Main Content) │ +│ (Sidebar) │ │ +│ │ │ +│ │ │ +├──────────────┴──────────────────────────────────────────────┤ +│ 页脚 (Footer) │ +└─────────────────────────────────────────────────────────────┘ +``` + +### 顶部操作栏 + +| 元素 | 功能 | +|------|------| +| 品牌标识 | 显示 "Claude Code Workflow" | +| 项目路径选择器 | 切换最近项目或浏览新项目 | +| 刷新按钮 | 重新加载当前视图数据 | +| 语言切换 (EN/ZH) | 切换界面语言 | +| 主题切换 (☀/🌙) | 切换浅色/深色主题 | + +### 侧边栏导航 + +侧边栏可折叠，按功能分组： + +- **项目 (Project)**: 概览、文件浏览器、CLI 状态、历史记录、图谱 +- **会话 (Sessions)**: 全部、活跃、已归档的工作流会话 +- **轻量任务 (Lite Tasks)**: Lite Plan 和 Lite Fix 会话 +- **配置**: MCP 服务器、Hooks 配置 +- **记忆 (Memory)**: 上下文、核心记忆、提示历史、技能、规则、CLAUDE.md + +--- + +## 导航结构 + +### 项目组 (Project) + +| 视图 | 说明 | +|------|------| +| **概览** | 项目统计数据、会话总数、任务完成度 | +| **文件浏览器** | 文件树视图，支持预览文件内容 | +| **状态** | CLI 工具安装状态和配置 | +| **历史** | CLI 命令执行历史记录 | +| **图谱** | 代码关系可视化 | + +### 会话组 (Sessions) + +| 过滤器 | 说明 | +|--------|------| +| **全部** | 显示所有工作流会话 | +| **活跃** | 仅显示进行中的会话 | +| **已归档** | 仅显示已完成/归档的会话 | + +### 轻量任务 (Lite Tasks) + +| 类型 | 说明 | +|------|------| +| **Lite Plan** | 轻量级规划任务会话 | +| **Lite Fix** | 快速修复任务会话 | + +### 配置组 + +| 视图 | 说明 | +|------|------| +| **MCP 服务器** | 管理 MCP 服务器配置 | +| **Hooks** | 配置工具生命周期钩子 | + +### 记忆组 (Memory) + +| 视图 | 说明 | +|------|------| +| **上下文** | 文件读写热点和活动热图 | +| **核心记忆** | 战略知识库和会话聚类 | +| **提示历史** | AI 交互历史记录 | +| **技能** | 可重用能力包管理 | +| **规则** | AI 交互指令规则 | +| **CLAUDE.md** | 项目配置文件管理 | + +--- + +## 核心视图详解 + +### 1. 项目概览 (Project Overview) + +显示项目的核心统计信息： + +- **会话统计**: 总数、活跃数、已归档数 +- **任务进度**: 完成率、进行中任务数 +- **活跃会话轮播**: 快速预览当前活跃的会话 + +### 2. CLI 工具管理 (CLI Manager) + +集中管理所有命令行工具的配置。 + +#### CLI 工具面板 +- **状态显示**: Gemini、Qwen、Codex 的安装状态 +- **默认工具**: 设置默认使用的 CLI 工具 +- **模型配置**: 配置每个工具的主要和次要模型 +- **安装/卸载**: 通过向导安装或卸载工具 + +#### CodexLens 管理 +- **索引路径**: 查看和修改索引存储位置 +- **索引操作**: + - 初始化索引（向量模式/FTS 模式） + - 清理当前项目索引 + - 清理所有索引 +- **语义依赖**: 安装 Python 依赖 +- **模型管理**: 下载/删除嵌入模型 +- **测试搜索**: 验证索引功能 + +#### 索引统计 +- 总索引大小 +- 项目数量 +- 向量索引数 +- FTS 索引数 + +### 3. 代码图谱浏览器 (Graph Explorer)（隐藏） + +基于 Cytoscape.js 的交互式代码关系可视化工具。 + +#### 数据源切换 +- **代码关系**: 基于 CodexLens 索引的文件/类/函数关系 +- **核心记忆**: 记忆条目和实体关系图 + +#### 交互功能 +- **拖拽/缩放/平移**: 自由探索图谱 +- **节点着色**: 根据类型和重要性区分 +- **过滤器**: + - 范围: 所有文件 / 按模块 / 按文件 + - 类型: CLASS / FUNCTION / IMPORTS / CALLS 等 + +#### 节点详情 +- 点击节点显示详细信息 +- 类型、路径、行号 +- **影响分析**: 分析变更可能影响的文件和符号 + +### 4. MCP 服务器管理 (MCP Manager) + +管理项目级和全局的 MCP 服务器配置。 + +#### 功能 +- **服务器列表**: 查看已配置的服务器 +- **创建服务器**: 新建服务器配置 +- **编辑/删除**: 修改或移除服务器 +- **模板安装**: 从预设模板安装服务器 +- **状态监控**: 查看服务器运行状态 + +### 5. Hook 管理 (Hook Manager) + +配置工具执行生命周期钩子。 + +#### 支持的钩子类型 +- **PreToolUse**: 工具使用前触发 +- **PostToolUse**: 工具使用后触发 +- **Notification**: 通知类钩子 + +#### 配置方式 +- 项目级钩子 (`.claude/settings.local.json`) +- 全局钩子 (`~/.claude/settings.json`) +- 向导创建复杂钩子 +- 模板快速配置 + +### 6. 核心记忆 (Core Memory) + +战略知识库管理系统。 + +#### 记忆列表 +- 创建/编辑/归档/删除记忆条目 +- 结构化的知识存储 +- 标签和分类管理 + +#### 集群视图 +- **自动聚类**: 语义分析相关会话 +- **集群管理**: + - 查看集群成员 + - 合并/拆分集群 + - 删除集群 +- **时间线**: 会话活动时间线 + +#### 嵌入管理 +- 生成语义嵌入向量 +- 嵌入状态监控 +- 批量嵌入操作 + +### 7. 技能管理 (Skills Manager) + +管理可重用的 AI 能力包。 + +#### 技能分类 +- **项目技能**: `./.claude/skills/` +- **用户技能**: `~/.claude/skills/` + +#### 技能卡片信息 +- 名称和描述 +- 版本号 +- 包含的工具数量 +- 支持文件数量 + +#### 技能创建 +- **导入模式**: 从现有文件夹导入 +- **CLI 生成**: 通过描述让 AI 生成 + +### 8. 帮助视图 (Help View) + +国际化帮助文档系统。 + +- 动态加载帮助内容 +- 支持中英文切换 +- 快速查找功能指南 + +--- + +## 实时功能 + +Dashboard 通过 WebSocket 连接提供实时数据同步。 + +### WebSocket 连接 + +- 端点: `/ws` +- 自动重连机制 +- 心跳保活 + +### 实时事件类型 + +| 事件 | 说明 | +|------|------| +| `SESSION_CREATED` | 新会话创建 | +| `SESSION_UPDATED` | 会话状态更新 | +| `TASK_UPDATED` | 任务进度更新 | +| `CLI_EXECUTION_STARTED` | CLI 执行开始 | +| `CLI_EXECUTION_COMPLETED` | CLI 执行完成 | +| `CODEXLENS_INDEX_PROGRESS` | 索引进度更新 | +| `MEMORY_UPDATED` | 记忆数据更新 | +| `CLAUDE_FILE_SYNCED` | CLAUDE.md 同步 | +| `REFRESH_REQUIRED` | 需要刷新数据 | + +### 静默刷新 + +对于非关键事件，Dashboard 会在后台静默更新数据，无需用户干预。 + +--- + +## 快捷键 + +| 快捷键 | 功能 | +|--------|------| +| `Escape` | 关闭当前打开的模态框或侧边栏 | + +--- + +## 个性化设置 + +### 主题 + +Dashboard 支持两种主题： + +- **浅色模式 (Light)**: 默认主题，适合明亮环境 +- **深色模式 (Dark)**: 护眼主题，适合暗光环境 + +点击顶部操作栏的太阳/月亮图标切换。 + +### 语言 + +Dashboard 支持两种语言： + +- **English (EN)**: 英文界面 +- **中文 (ZH)**: 简体中文界面 + +点击顶部操作栏的 EN/ZH 按钮切换。语言设置会保存到本地存储。 + +--- + +## API 端点参考 + +### 仪表盘数据 + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/dashboard-data` | GET | 获取仪表盘主数据 | +| `/api/workspace/switch` | POST | 切换工作区 | + +### 会话管理 + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/sessions` | GET | 获取会话列表 | +| `/api/sessions/{id}` | GET | 获取会话详情 | +| `/api/sessions/{id}/tasks` | GET | 获取会话任务 | + +### 核心记忆 + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/core-memory/list` | GET | 获取记忆列表 | +| `/api/core-memory/embed-status` | GET | 嵌入状态 | +| `/api/core-memory/embed` | POST | 生成嵌入 | +| `/api/core-memory/clusters` | GET | 获取集群列表 | +| `/api/core-memory/clusters` | POST | 创建集群 | +| `/api/core-memory/clusters/{id}` | GET | 获取集群详情 | +| `/api/core-memory/clusters/{id}` | PATCH | 更新集群 | +| `/api/core-memory/clusters/{id}` | DELETE | 删除集群 | +| `/api/core-memory/clusters/auto` | POST | 自动聚类 | +| `/api/core-memory/graph` | GET | 获取记忆图谱 | + +### CodexLens + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/codexlens/config` | GET | 获取配置 | +| `/api/codexlens/config` | POST | 更新配置 | +| `/api/codexlens/indexes` | GET | 获取索引列表 | +| `/api/codexlens/init` | POST | 初始化索引 | +| `/api/codexlens/clean` | POST | 清理索引 | +| `/api/codexlens/semantic/status` | GET | 语义依赖状态 | +| `/api/codexlens/models` | GET | 获取模型列表 | + +### 代码图谱 + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/graph/nodes` | GET | 获取图谱节点 | +| `/api/graph/edges` | GET | 获取图谱边 | +| `/api/graph/impact` | POST | 影响分析 | + +### 技能管理 + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/skills` | GET | 获取技能列表 | +| `/api/skills/{name}` | GET | 获取技能详情 | +| `/api/skills/create` | POST | 创建技能 | +| `/api/skills/{name}` | DELETE | 删除技能 | + +### MCP 服务器 + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/mcp/servers` | GET | 获取服务器列表 | +| `/api/mcp/servers` | POST | 创建服务器 | +| `/api/mcp/servers/{id}` | PATCH | 更新服务器 | +| `/api/mcp/servers/{id}` | DELETE | 删除服务器 | + +### CLI 工具 + +| 端点 | 方法 | 说明 | +|------|------|------| +| `/api/cli/status` | GET | 工具状态 | +| `/api/cli/history` | GET | 执行历史 | +| `/api/cli/config` | GET/POST | 工具配置 | + +--- + +## 故障排除 + +### Dashboard 无法启动 + +1. 检查端口是否被占用: `netstat -ano | findstr :3456` +2. 尝试使用其他端口: `ccw serve --port 8080` +3. 检查 Node.js 版本: `node --version` (需要 >= 16.0.0) + +### WebSocket 连接失败 + +1. 检查防火墙设置 +2. 确保后端服务正在运行 +3. 刷新页面重新建立连接 + +### 数据不更新 + +1. 点击刷新按钮手动刷新 +2. 检查 WebSocket 连接状态 +3. 查看浏览器控制台是否有错误 + +--- + +## 相关文档 + +- [README.md](README.md) - 项目总览 +- [GETTING_STARTED.md](GETTING_STARTED.md) - 快速入门 +- [COMMAND_REFERENCE.md](COMMAND_REFERENCE.md) - 命令参考 +- [CHANGELOG.md](CHANGELOG.md) - 更新日志 + +--- + +**CCW Dashboard** - Claude Code Workflow 的可视化控制中心 diff --git a/DASHBOARD_OPERATIONS.md b/DASHBOARD_OPERATIONS.md new file mode 100644 index 00000000..aa18eb17 --- /dev/null +++ b/DASHBOARD_OPERATIONS.md @@ -0,0 +1,508 @@ +# CCW Dashboard 操作指南 + +**版本**: 6.2.0 +**更新日期**: 2025-12-20 + +本文档提供 CCW Dashboard 各功能视图的详细操作步骤说明。 + +--- + +## 目录 + +1. [首页概览操作](#1-首页概览操作) +2. [会话详情操作](#2-会话详情操作) +3. [CLI 管理器操作](#3-cli-管理器操作) +4. [核心记忆操作](#4-核心记忆操作) +5. [MCP 服务器管理操作](#5-mcp-服务器管理操作) +6. [Hook 管理器操作](#6-hook-管理器操作) +7. [技能管理器操作](#7-技能管理器操作) +8. [CodexLens 索引管理操作](#8-codexlens-索引管理操作) + +--- + +## 1. 首页概览操作 + +### 1.1 进入方式 +- 启动 Dashboard 后自动显示 +- 点击侧边栏 **"概览"** 导航项 + +### 1.2 项目切换 +1. 点击顶部操作栏的 **项目路径选择器** +2. 从下拉列表选择最近项目，或点击 **"浏览..."** 选择新项目 +3. 系统自动加载新项目数据 + +### 1.3 数据刷新 +- 点击顶部操作栏的 **刷新按钮** (🔄) +- 或等待 WebSocket 自动推送更新 + +### 1.4 活跃会话轮播 +- 自动轮播显示当前活跃的工作流会话 +- 点击会话卡片进入会话详情 + +### 1.5 统计卡片 +显示以下统计信息： +- 会话总数 +- 活跃会话数 +- 已归档会话数 +- 任务完成率 + +--- + +## 2. 会话详情操作 + +### 2.1 进入方式 +- 从首页点击会话卡片 +- 从侧边栏 **"会话"** > **"全部/活跃/已归档"** 列表点击 + +### 2.2 会话列表操作 + +| 操作 | 步骤 | +|------|------| +| 筛选会话 | 点击 **"全部/活跃/已归档"** 标签切换 | +| 搜索会话 | 在搜索框输入会话 ID 或描述 | +| 查看详情 | 点击会话行展开详情 | + +### 2.3 会话详情面板 + +#### 基本信息区 +- 会话 ID、创建时间、状态 +- 会话描述和目标 + +#### 任务列表区 +| 操作 | 说明 | +|------|------| +| 查看任务 | 任务以列表形式显示，包含状态图标 | +| 展开任务 | 点击任务行查看详细信息 | +| 任务状态 | 🔵 待处理 / 🟡 进行中 / 🟢 完成 / 🔴 失败 | + +#### 操作按钮 +| 按钮 | 功能 | +|------|------| +| **归档** | 将会话标记为已归档 | +| **删除** | 删除会话（需确认） | +| **导出** | 导出会话数据为 JSON | + +### 2.4 任务抽屉 + +点击任务后打开的详情抽屉： + +| 区域 | 内容 | +|------|------| +| 头部 | 任务标题、状态徽章 | +| 上下文 | 相关文件列表、依赖项 | +| 执行日志 | 实时执行输出（WebSocket 推送） | +| 操作区 | 重试、跳过、标记完成 | + +--- + +## 3. CLI 管理器操作 + +### 3.1 进入方式 +侧边栏 **"项目"** > **"状态"** + +### 3.2 CLI 工具状态面板 + +#### 工具状态卡片 +每个工具（Gemini/Qwen/Codex）显示： +- 安装状态：✅ 已安装 / ❌ 未安装 +- 版本信息 +- 默认模型配置 + +#### 设置默认工具 +1. 点击工具卡片上的 **"设为默认"** 按钮 +2. 确认选择 + +#### 模型配置 +1. 点击 **"配置"** 按钮 +2. 在弹出的模态框中设置： + - 主模型 (Primary Model) + - 备用模型 (Fallback Model) +3. 点击 **"保存"** + +### 3.3 安装/卸载向导 + +#### 安装工具 +1. 点击未安装工具的 **"安装"** 按钮 +2. 按向导步骤操作： + - 确认系统要求 + - 输入 API 密钥（如需要） + - 选择安装选项 +3. 等待安装完成 + +#### 卸载工具 +1. 点击已安装工具的 **"卸载"** 按钮 +2. 确认卸载操作 +3. 等待卸载完成 + +### 3.4 执行历史 + +侧边栏 **"项目"** > **"历史"** + +| 操作 | 说明 | +|------|------| +| 查看记录 | 列表显示执行时间、工具、提示词摘要 | +| 展开详情 | 点击记录查看完整输入/输出 | +| 恢复会话 | 点击 **"继续"** 按钮使用 `--resume` 恢复 | +| 复制命令 | 点击 **"复制"** 图标复制执行命令 | + +--- + +## 4. 核心记忆操作 + +### 4.1 进入方式 +侧边栏 **"记忆"** > **"核心记忆"** + +### 4.2 记忆列表视图 + +#### 查看记忆 +- 记忆条目以卡片形式显示 +- 包含：标题、摘要、标签、创建时间 + +#### 创建记忆 +1. 点击 **"+ 新建记忆"** 按钮 +2. 填写表单： + | 字段 | 说明 | + |------|------| + | 标题 | 记忆标题（必填） | + | 内容 | 记忆正文（Markdown 支持） | + | 标签 | 分类标签（逗号分隔） | + | 优先级 | 高/中/低 | +3. 点击 **"保存"** + +#### 编辑记忆 +1. 点击记忆卡片的 **"编辑"** 图标 +2. 修改内容 +3. 点击 **"保存"** + +#### 归档/删除 +- **归档**: 点击 **"归档"** 图标，记忆移至归档列表 +- **删除**: 点击 **"删除"** 图标，确认后永久删除 + +### 4.3 集群视图 + +切换到 **"集群"** 标签页 + +#### 查看集群 +- 自动聚类的会话分组显示 +- 每个集群显示：名称、成员数、创建时间 + +#### 自动聚类 +1. 点击 **"自动聚类"** 按钮 +2. 设置参数： + | 参数 | 说明 | + |------|------| + | 相似度阈值 | 0.0-1.0，默认 0.7 | + | 最小成员数 | 集群最小会话数 | +3. 点击 **"执行"** +4. 等待聚类完成 + +#### 集群管理 +| 操作 | 步骤 | +|------|------| +| 查看成员 | 点击集群卡片展开成员列表 | +| 重命名 | 点击集群名称编辑 | +| 合并集群 | 选中多个集群，点击 **"合并"** | +| 删除集群 | 点击 **"删除"** 图标（成员不会删除） | + +### 4.4 嵌入管理 + +#### 查看嵌入状态 +- 显示已生成嵌入的记忆数量 +- 显示待生成嵌入的记忆数量 + +#### 生成嵌入 +1. 点击 **"生成嵌入"** 按钮 +2. 选择范围： + - 全部未嵌入 + - 选中的记忆 +3. 等待生成完成（进度条显示） + +--- + +## 5. MCP 服务器管理操作 + +### 5.1 进入方式 +侧边栏 **"配置"** > **"MCP 服务器"** + +### 5.2 服务器列表 + +#### 查看服务器 +- 列表显示已配置的服务器 +- 每行显示：名称、类型、状态、配置来源 + +#### 状态指示 +- 🟢 运行中 +- 🔴 已停止 +- 🟡 启动中 + +### 5.3 创建服务器 + +#### 手动创建 +1. 点击 **"+ 添加服务器"** 按钮 +2. 填写表单： + | 字段 | 说明 | + |------|------| + | 名称 | 服务器标识名（必填） | + | 命令 | 启动命令（如 `node`） | + | 参数 | 命令参数数组 | + | 环境变量 | KEY=VALUE 格式 | + | 配置范围 | 项目级 / 全局 | +3. 点击 **"保存"** + +#### 从模板安装 +1. 点击 **"模板"** 标签 +2. 浏览可用模板 +3. 点击模板的 **"安装"** 按钮 +4. 确认或修改配置 +5. 点击 **"确认安装"** + +### 5.4 编辑/删除 + +| 操作 | 步骤 | +|------|------| +| 编辑 | 点击 **"编辑"** 图标 → 修改配置 → 保存 | +| 删除 | 点击 **"删除"** 图标 → 确认删除 | +| 启用/禁用 | 切换状态开关 | + +### 5.5 配置文件位置 + +| 范围 | 文件路径 | +|------|----------| +| 项目级 | `.mcp.json` | +| 全局 | `~/.claude/settings.json` | + +--- + +## 6. Hook 管理器操作 + +### 6.1 进入方式 +侧边栏 **"配置"** > **"Hooks"** + +### 6.2 Hook 列表 + +#### 按类型查看 +- **PreToolUse**: 工具使用前触发 +- **PostToolUse**: 工具使用后触发 +- **Notification**: 通知类钩子 + +#### 列表信息 +每个 Hook 显示：名称、类型、匹配工具、命令摘要 + +### 6.3 创建 Hook + +#### 向导模式 +1. 点击 **"+ 添加 Hook"** 按钮 +2. 选择 Hook 类型 +3. 填写配置： + | 字段 | 说明 | + |------|------| + | 名称 | Hook 标识名 | + | 匹配器 | 匹配的工具名称（支持通配符 `*`） | + | 命令 | 执行的 Shell 命令 | + | 超时 | 命令超时时间（毫秒） | + | 范围 | 项目级 / 全局 | +4. 点击 **"保存"** + +#### 从模板创建 +1. 点击 **"模板"** 标签 +2. 选择预设模板（如：格式化检查、安全扫描） +3. 点击 **"使用模板"** +4. 根据需要修改配置 +5. 点击 **"保存"** + +### 6.4 编辑/删除 + +| 操作 | 步骤 | +|------|------| +| 编辑 | 点击 Hook 行 → 修改配置 → 保存 | +| 删除 | 点击 **"删除"** 图标 → 确认 | +| 启用/禁用 | 切换状态开关 | + +### 6.5 配置文件位置 + +| 范围 | 文件路径 | +|------|----------| +| 项目级 | `.claude/settings.local.json` | +| 全局 | `~/.claude/settings.json` | + +--- + +## 7. 技能管理器操作 + +### 7.1 进入方式 +侧边栏 **"记忆"** > **"技能"** + +### 7.2 技能列表 + +#### 分类视图 +- **项目技能**: `./.claude/skills/` 目录下的技能 +- **用户技能**: `~/.claude/skills/` 目录下的技能 + +#### 技能卡片信息 +- 技能名称 +- 描述 +- 版本号 +- 工具数量 +- 支持文件数量 + +### 7.3 查看技能详情 + +1. 点击技能卡片 +2. 详情面板显示： + - 完整描述 + - 包含的工具列表 + - 支持文件列表 + - 依赖信息 + +### 7.4 创建技能 + +#### 从文件夹导入 +1. 点击 **"+ 导入技能"** 按钮 +2. 选择包含技能文件的目录 +3. 确认技能信息 +4. 点击 **"导入"** + +#### 通过 CLI 生成 +1. 点击 **"+ 生成技能"** 按钮 +2. 输入技能描述 +3. 选择生成选项： + - 目标目录（项目/用户） + - 包含的能力 +4. 点击 **"生成"** +5. 等待 AI 生成完成 + +### 7.5 删除技能 + +1. 点击技能卡片的 **"删除"** 图标 +2. 确认删除操作 +3. 技能文件将被移除 + +--- + +## 8. CodexLens 索引管理操作 + +### 8.1 进入方式 +侧边栏 **"项目"** > **"状态"** → CodexLens 面板 + +### 8.2 索引状态 + +#### 状态指示 +| 状态 | 说明 | +|------|------| +| ✅ 已索引 | 项目已建立索引 | +| ⚠️ 过期 | 索引需要更新 | +| ❌ 未索引 | 项目未建立索引 | + +#### 索引统计 +- 总索引大小 +- 项目数量 +- 向量索引数 +- FTS 索引数 + +### 8.3 初始化索引 + +1. 点击 **"初始化索引"** 按钮 +2. 选择索引模式： + | 模式 | 说明 | + |------|------| + | FTS | 全文搜索，速度快 | + | 向量 | 语义搜索，需要嵌入模型 | + | 混合 | FTS + 向量，功能最全 | +3. 选择要索引的语言/文件类型 +4. 点击 **"开始索引"** +5. 查看进度条和实时日志 + +### 8.4 清理索引 + +#### 清理当前项目 +1. 点击 **"清理项目索引"** 按钮 +2. 确认操作 +3. 当前项目索引被删除 + +#### 清理所有索引 +1. 点击 **"清理所有索引"** 按钮 +2. 输入确认文字 +3. 所有索引被删除 + +### 8.5 语义依赖管理 + +#### 检查状态 +- 显示 Python 环境状态 +- 显示已安装的依赖包 + +#### 安装依赖 +1. 点击 **"安装语义依赖"** 按钮 +2. 等待安装完成 +3. 查看安装日志 + +### 8.6 嵌入模型管理 + +#### 查看模型 +- 列出可用的嵌入模型 +- 显示已下载/未下载状态 + +#### 下载模型 +1. 点击未下载模型的 **"下载"** 按钮 +2. 等待下载完成 +3. 模型可用于向量索引 + +#### 删除模型 +1. 点击已下载模型的 **"删除"** 按钮 +2. 确认删除 +3. 模型文件被移除 + +### 8.7 测试搜索 + +1. 在测试区输入搜索查询 +2. 选择搜索模式： + - `auto`: 自动选择 + - `hybrid`: 混合搜索 + - `exact`: 精确匹配 + - `ripgrep`: 文本搜索 +3. 点击 **"搜索"** +4. 查看搜索结果 + +--- + +## 通用操作说明 + +### 键盘快捷键 + +| 快捷键 | 功能 | +|--------|------| +| `Escape` | 关闭模态框/侧边栏 | +| `Ctrl+R` / `Cmd+R` | 刷新数据 | + +### 主题与语言切换 + +| 操作 | 位置 | +|------|------| +| 切换主题 | 顶部操作栏太阳/月亮图标 | +| 切换语言 | 顶部操作栏 EN/ZH 按钮 | + +### 错误处理 + +| 错误类型 | 处理方式 | +|----------|----------| +| 网络错误 | 检查连接，点击刷新重试 | +| 权限错误 | 检查文件/目录权限 | +| 验证错误 | 检查表单必填字段 | +| 超时错误 | 增加超时设置或分批操作 | + +### WebSocket 连接 + +- **自动重连**: 断开后自动尝试重连 +- **心跳保活**: 定期发送心跳保持连接 +- **状态指示**: 页脚显示连接状态 + +--- + +## 相关文档 + +- [DASHBOARD_GUIDE.md](DASHBOARD_GUIDE.md) - Dashboard 用户指南 +- [COMMAND_REFERENCE.md](COMMAND_REFERENCE.md) - 命令参考 +- [GETTING_STARTED_CN.md](GETTING_STARTED_CN.md) - 快速入门 + +--- + +**CCW Dashboard** - Claude Code Workflow 可视化控制中心操作手册 diff --git a/DASHBOARD_OPERATIONS_EN.md b/DASHBOARD_OPERATIONS_EN.md new file mode 100644 index 00000000..74bc129c --- /dev/null +++ b/DASHBOARD_OPERATIONS_EN.md @@ -0,0 +1,508 @@ +# CCW Dashboard Operations Guide + +**Version**: 6.2.0 +**Updated**: 2025-12-20 + +This document provides detailed step-by-step operation instructions for each CCW Dashboard view. + +--- + +## Table of Contents + +1. [Home Overview Operations](#1-home-overview-operations) +2. [Session Detail Operations](#2-session-detail-operations) +3. [CLI Manager Operations](#3-cli-manager-operations) +4. [Core Memory Operations](#4-core-memory-operations) +5. [MCP Server Management Operations](#5-mcp-server-management-operations) +6. [Hook Manager Operations](#6-hook-manager-operations) +7. [Skills Manager Operations](#7-skills-manager-operations) +8. [CodexLens Index Management Operations](#8-codexlens-index-management-operations) + +--- + +## 1. Home Overview Operations + +### 1.1 Entry Point +- Displayed automatically after Dashboard launch +- Click **"Overview"** in the sidebar navigation + +### 1.2 Project Switching +1. Click the **Project Path Selector** in the top action bar +2. Select from recent projects dropdown, or click **"Browse..."** to select a new project +3. System automatically loads the new project data + +### 1.3 Data Refresh +- Click the **Refresh Button** (🔄) in the top action bar +- Or wait for WebSocket automatic push updates + +### 1.4 Active Session Carousel +- Auto-rotates through currently active workflow sessions +- Click a session card to enter session details + +### 1.5 Statistics Cards +Displays the following statistics: +- Total sessions +- Active sessions +- Archived sessions +- Task completion rate + +--- + +## 2. Session Detail Operations + +### 2.1 Entry Point +- Click a session card from the home page +- Click from sidebar **"Sessions"** > **"All/Active/Archived"** list + +### 2.2 Session List Operations + +| Operation | Steps | +|-----------|-------| +| Filter sessions | Click **"All/Active/Archived"** tabs to switch | +| Search sessions | Enter session ID or description in search box | +| View details | Click session row to expand details | + +### 2.3 Session Detail Panel + +#### Basic Information Area +- Session ID, creation time, status +- Session description and objectives + +#### Task List Area +| Operation | Description | +|-----------|-------------| +| View tasks | Tasks displayed as list with status icons | +| Expand task | Click task row to view detailed information | +| Task status | 🔵 Pending / 🟡 In Progress / 🟢 Completed / 🔴 Failed | + +#### Action Buttons +| Button | Function | +|--------|----------| +| **Archive** | Mark session as archived | +| **Delete** | Delete session (requires confirmation) | +| **Export** | Export session data as JSON | + +### 2.4 Task Drawer + +Detail drawer opened after clicking a task: + +| Area | Content | +|------|---------| +| Header | Task title, status badge | +| Context | Related files list, dependencies | +| Execution log | Real-time execution output (WebSocket push) | +| Actions | Retry, Skip, Mark complete | + +--- + +## 3. CLI Manager Operations + +### 3.1 Entry Point +Sidebar **"Project"** > **"Status"** + +### 3.2 CLI Tool Status Panel + +#### Tool Status Cards +Each tool (Gemini/Qwen/Codex) displays: +- Installation status: ✅ Installed / ❌ Not installed +- Version information +- Default model configuration + +#### Set Default Tool +1. Click **"Set as Default"** button on tool card +2. Confirm selection + +#### Model Configuration +1. Click **"Configure"** button +2. In the modal dialog, set: + - Primary Model + - Fallback Model +3. Click **"Save"** + +### 3.3 Install/Uninstall Wizard + +#### Install Tool +1. Click **"Install"** button on uninstalled tool +2. Follow wizard steps: + - Confirm system requirements + - Enter API key (if required) + - Select installation options +3. Wait for installation to complete + +#### Uninstall Tool +1. Click **"Uninstall"** button on installed tool +2. Confirm uninstall operation +3. Wait for uninstall to complete + +### 3.4 Execution History + +Sidebar **"Project"** > **"History"** + +| Operation | Description | +|-----------|-------------| +| View records | List displays execution time, tool, prompt summary | +| Expand details | Click record to view full input/output | +| Resume session | Click **"Continue"** button to resume with `--resume` | +| Copy command | Click **"Copy"** icon to copy execution command | + +--- + +## 4. Core Memory Operations + +### 4.1 Entry Point +Sidebar **"Memory"** > **"Core Memory"** + +### 4.2 Memory List View + +#### View Memories +- Memory entries displayed as cards +- Includes: title, summary, tags, creation time + +#### Create Memory +1. Click **"+ New Memory"** button +2. Fill in the form: + | Field | Description | + |-------|-------------| + | Title | Memory title (required) | + | Content | Memory body (Markdown supported) | + | Tags | Category tags (comma-separated) | + | Priority | High/Medium/Low | +3. Click **"Save"** + +#### Edit Memory +1. Click **"Edit"** icon on memory card +2. Modify content +3. Click **"Save"** + +#### Archive/Delete +- **Archive**: Click **"Archive"** icon, memory moves to archive list +- **Delete**: Click **"Delete"** icon, confirm for permanent deletion + +### 4.3 Cluster View + +Switch to **"Clusters"** tab + +#### View Clusters +- Auto-clustered session groups displayed +- Each cluster shows: name, member count, creation time + +#### Auto Clustering +1. Click **"Auto Cluster"** button +2. Set parameters: + | Parameter | Description | + |-----------|-------------| + | Similarity Threshold | 0.0-1.0, default 0.7 | + | Minimum Members | Minimum sessions per cluster | +3. Click **"Execute"** +4. Wait for clustering to complete + +#### Cluster Management +| Operation | Steps | +|-----------|-------| +| View members | Click cluster card to expand member list | +| Rename | Click cluster name to edit | +| Merge clusters | Select multiple clusters, click **"Merge"** | +| Delete cluster | Click **"Delete"** icon (members not deleted) | + +### 4.4 Embedding Management + +#### View Embedding Status +- Shows count of memories with generated embeddings +- Shows count of memories pending embedding + +#### Generate Embeddings +1. Click **"Generate Embeddings"** button +2. Select scope: + - All unembedded + - Selected memories +3. Wait for generation to complete (progress bar displayed) + +--- + +## 5. MCP Server Management Operations + +### 5.1 Entry Point +Sidebar **"Config"** > **"MCP Servers"** + +### 5.2 Server List + +#### View Servers +- List displays configured servers +- Each row shows: name, type, status, config source + +#### Status Indicators +- 🟢 Running +- 🔴 Stopped +- 🟡 Starting + +### 5.3 Create Server + +#### Manual Creation +1. Click **"+ Add Server"** button +2. Fill in the form: + | Field | Description | + |-------|-------------| + | Name | Server identifier (required) | + | Command | Start command (e.g., `node`) | + | Arguments | Command arguments array | + | Environment Variables | KEY=VALUE format | + | Config Scope | Project / Global | +3. Click **"Save"** + +#### Install from Template +1. Click **"Templates"** tab +2. Browse available templates +3. Click template's **"Install"** button +4. Confirm or modify configuration +5. Click **"Confirm Install"** + +### 5.4 Edit/Delete + +| Operation | Steps | +|-----------|-------| +| Edit | Click **"Edit"** icon → Modify config → Save | +| Delete | Click **"Delete"** icon → Confirm deletion | +| Enable/Disable | Toggle status switch | + +### 5.5 Configuration File Locations + +| Scope | File Path | +|-------|-----------| +| Project | `.mcp.json` | +| Global | `~/.claude/settings.json` | + +--- + +## 6. Hook Manager Operations + +### 6.1 Entry Point +Sidebar **"Config"** > **"Hooks"** + +### 6.2 Hook List + +#### View by Type +- **PreToolUse**: Triggered before tool use +- **PostToolUse**: Triggered after tool use +- **Notification**: Notification hooks + +#### List Information +Each hook displays: name, type, matching tool, command summary + +### 6.3 Create Hook + +#### Wizard Mode +1. Click **"+ Add Hook"** button +2. Select hook type +3. Fill in configuration: + | Field | Description | + |-------|-------------| + | Name | Hook identifier | + | Matcher | Tool name to match (supports wildcard `*`) | + | Command | Shell command to execute | + | Timeout | Command timeout (milliseconds) | + | Scope | Project / Global | +4. Click **"Save"** + +#### Create from Template +1. Click **"Templates"** tab +2. Select preset template (e.g., format check, security scan) +3. Click **"Use Template"** +4. Modify configuration as needed +5. Click **"Save"** + +### 6.4 Edit/Delete + +| Operation | Steps | +|-----------|-------| +| Edit | Click hook row → Modify config → Save | +| Delete | Click **"Delete"** icon → Confirm | +| Enable/Disable | Toggle status switch | + +### 6.5 Configuration File Locations + +| Scope | File Path | +|-------|-----------| +| Project | `.claude/settings.local.json` | +| Global | `~/.claude/settings.json` | + +--- + +## 7. Skills Manager Operations + +### 7.1 Entry Point +Sidebar **"Memory"** > **"Skills"** + +### 7.2 Skills List + +#### Category View +- **Project Skills**: Skills in `./.claude/skills/` directory +- **User Skills**: Skills in `~/.claude/skills/` directory + +#### Skill Card Information +- Skill name +- Description +- Version number +- Tool count +- Support file count + +### 7.3 View Skill Details + +1. Click skill card +2. Detail panel displays: + - Full description + - Included tools list + - Support files list + - Dependency information + +### 7.4 Create Skill + +#### Import from Folder +1. Click **"+ Import Skill"** button +2. Select directory containing skill files +3. Confirm skill information +4. Click **"Import"** + +#### Generate via CLI +1. Click **"+ Generate Skill"** button +2. Enter skill description +3. Select generation options: + - Target directory (Project/User) + - Included capabilities +4. Click **"Generate"** +5. Wait for AI generation to complete + +### 7.5 Delete Skill + +1. Click **"Delete"** icon on skill card +2. Confirm delete operation +3. Skill files will be removed + +--- + +## 8. CodexLens Index Management Operations + +### 8.1 Entry Point +Sidebar **"Project"** > **"Status"** → CodexLens panel + +### 8.2 Index Status + +#### Status Indicators +| Status | Description | +|--------|-------------| +| ✅ Indexed | Project has established index | +| ⚠️ Outdated | Index needs update | +| ❌ Not indexed | Project has no index | + +#### Index Statistics +- Total index size +- Project count +- Vector index count +- FTS index count + +### 8.3 Initialize Index + +1. Click **"Initialize Index"** button +2. Select index mode: + | Mode | Description | + |------|-------------| + | FTS | Full-text search, fast | + | Vector | Semantic search, requires embedding model | + | Hybrid | FTS + Vector, full features | +3. Select languages/file types to index +4. Click **"Start Indexing"** +5. View progress bar and real-time logs + +### 8.4 Clean Index + +#### Clean Current Project +1. Click **"Clean Project Index"** button +2. Confirm operation +3. Current project index is deleted + +#### Clean All Indexes +1. Click **"Clean All Indexes"** button +2. Enter confirmation text +3. All indexes are deleted + +### 8.5 Semantic Dependency Management + +#### Check Status +- Shows Python environment status +- Shows installed dependency packages + +#### Install Dependencies +1. Click **"Install Semantic Dependencies"** button +2. Wait for installation to complete +3. View installation logs + +### 8.6 Embedding Model Management + +#### View Models +- Lists available embedding models +- Shows downloaded/not downloaded status + +#### Download Model +1. Click **"Download"** button on undownloaded model +2. Wait for download to complete +3. Model available for vector indexing + +#### Delete Model +1. Click **"Delete"** button on downloaded model +2. Confirm deletion +3. Model files are removed + +### 8.7 Test Search + +1. Enter search query in test area +2. Select search mode: + - `auto`: Auto select + - `hybrid`: Hybrid search + - `exact`: Exact match + - `ripgrep`: Text search +3. Click **"Search"** +4. View search results + +--- + +## Common Operations + +### Keyboard Shortcuts + +| Shortcut | Function | +|----------|----------| +| `Escape` | Close modal/sidebar | +| `Ctrl+R` / `Cmd+R` | Refresh data | + +### Theme & Language Switching + +| Operation | Location | +|-----------|----------| +| Switch theme | Sun/moon icon in top action bar | +| Switch language | EN/ZH button in top action bar | + +### Error Handling + +| Error Type | Resolution | +|------------|------------| +| Network error | Check connection, click refresh to retry | +| Permission error | Check file/directory permissions | +| Validation error | Check required form fields | +| Timeout error | Increase timeout settings or batch operations | + +### WebSocket Connection + +- **Auto reconnect**: Automatically attempts reconnection after disconnect +- **Heartbeat keepalive**: Periodic heartbeat to maintain connection +- **Status indicator**: Connection status shown in footer + +--- + +## Related Documentation + +- [DASHBOARD_GUIDE.md](DASHBOARD_GUIDE.md) - Dashboard User Guide +- [COMMAND_REFERENCE.md](COMMAND_REFERENCE.md) - Command Reference +- [GETTING_STARTED.md](GETTING_STARTED.md) - Getting Started Guide + +--- + +**CCW Dashboard** - Claude Code Workflow Visual Control Center Operations Manual