mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-02 15:23:19 +08:00
8ceae6d6fd
- Created a new document for custom skills development (`custom.md`) detailing the structure, creation, implementation, and best practices for developing custom CCW skills. - Added an index document (`index.md`) summarizing all built-in skills, their categories, and usage examples. - Introduced a reference guide (`reference.md`) providing a quick reference for all 33 built-in CCW skills, including triggers and purposes.
243 lines
7.9 KiB
Markdown
243 lines
7.9 KiB
Markdown
# 仪表板
|
||
|
||
## 一句话概述
|
||
**仪表板通过直观的基于小部件的界面，提供项目工作流状态、统计信息和最近活动的概览。**
|
||
|
||
---
|
||
|
||
## 解决的痛点
|
||
|
||
| 痛点 | 当前状态 | 仪表板解决方案 |
|
||
|------|----------|----------------|
|
||
| **项目可见性不足** | 无法查看整体项目健康状况 | 带有技术栈和开发索引的项目信息横幅 |
|
||
| **指标分散** | 统计信息分布在多个位置 | 集中式统计数据，带有迷你趋势图 |
|
||
| **工作流状态未知** | 难以跟踪会话进度 | 带有状态细分的饼图 |
|
||
| **最近工作丢失** | 无法快速访问活动会话 | 带有任务详情的会话轮播 |
|
||
| **索引状态不明确** | 不知道代码是否已索引 | 实时索引状态指示器 |
|
||
|
||
---
|
||
|
||
## 概述
|
||
|
||
**位置**: `ccw/frontend/src/pages/HomePage.tsx`
|
||
|
||
**用途**: 仪表板主页，提供项目概览、统计信息、工作流状态和最近活动监控。
|
||
|
||
**访问**: 导航 → 仪表板（默认首页，路径为 `/`）
|
||
|
||
**布局**:
|
||
```
|
||
+--------------------------------------------------------------------------+
|
||
| 仪表板头部（标题 + 刷新） |
|
||
+--------------------------------------------------------------------------+
|
||
| WorkflowTaskWidget（组合卡片） |
|
||
| +--------------------------------------------------------------------+ |
|
||
| | 项目信息横幅（可展开） | |
|
||
| | - 项目名称、描述、技术栈徽章 | |
|
||
| | - 快速统计（功能、bug修复、增强） | |
|
||
| | - 索引状态指示器 | |
|
||
| +----------------------------------+---------------------------------+ |
|
||
| | 统计部分 | 工作流状态 | 任务详情（轮播） | |
|
||
| | - 6 个迷你卡片 | - 饼图 | - 会话导航 | |
|
||
| | - 迷你趋势图 | - 图例 | - 任务列表（2 列） | |
|
||
| +----------------+-----------------+-------------------------------+ |
|
||
+--------------------------------------------------------------------------+
|
||
| RecentSessionsWidget |
|
||
| +--------------------------------------------------------------------+ |
|
||
| | 标签页：所有任务 | 工作流 | 轻量任务 | |
|
||
| | +---------------+---------------+-------------------------------+ | |
|
||
| | | 带有状态、进度、标签、时间的任务卡片 | | |
|
||
| | +---------------------------------------------------------------+ | |
|
||
+--------------------------------------------------------------------------+
|
||
```
|
||
|
||
---
|
||
|
||
## 实时演示
|
||
|
||
:::demo DashboardOverview #DashboardOverview.tsx :::
|
||
|
||
---
|
||
|
||
## 核心功能
|
||
|
||
| 功能 | 描述 |
|
||
|------|------|
|
||
| **项目信息横幅** | 可展开的横幅，显示项目名称、描述、技术栈（语言、框架、架构）、开发索引（功能/bug修复/增强）和实时索引状态 |
|
||
| **统计部分** | 6 个迷你统计卡片（活动会话、总任务、已完成任务、待处理任务、失败任务、今日活动），带有 7 天迷你趋势图 |
|
||
| **工作流状态饼图** | 环形图显示会话状态细分（已完成、进行中、计划中、已暂停、已归档），附带百分比 |
|
||
| **会话轮播** | 自动轮播（5秒间隔）的会话卡片，带有任务列表、进度条和手动导航箭头 |
|
||
| **最近会话小部件** | 所有任务类型的标签页视图，带有筛选、状态徽章和进度指示器 |
|
||
| **实时更新** | 统计数据每 60 秒自动刷新，索引状态每 30 秒刷新 |
|
||
|
||
---
|
||
|
||
## 组件层次结构
|
||
|
||
```
|
||
HomePage
|
||
├── DashboardHeader
|
||
│ ├── 标题
|
||
│ └── 刷新操作按钮
|
||
├── WorkflowTaskWidget
|
||
│ ├── ProjectInfoBanner（可展开）
|
||
│ │ ├── 项目名称和描述
|
||
│ │ ├── 技术栈徽章
|
||
│ │ ├── 快速统计卡片
|
||
│ │ ├── 索引状态指示器
|
||
│ │ ├── 架构部分
|
||
│ │ ├── 关键组件
|
||
│ │ └── 设计模式
|
||
│ ├── 统计部分
|
||
│ │ └── MiniStatCard（6 个卡片，带迷你趋势图）
|
||
│ ├── WorkflowStatusChart
|
||
│ │ └── 饼图与图例
|
||
│ └── SessionCarousel
|
||
│ ├── 导航箭头
|
||
│ └── 会话卡片（任务列表）
|
||
└── RecentSessionsWidget
|
||
├── 标签导航（全部 | 工作流 | 轻量任务）
|
||
├── 任务网格
|
||
│ └── TaskItemCard
|
||
└── 加载/空状态
|
||
```
|
||
|
||
---
|
||
|
||
## Props API
|
||
|
||
### HomePage 组件
|
||
|
||
| Prop | 类型 | 默认值 | 描述 |
|
||
|------|------|--------|------|
|
||
| - | - | - | 此页面组件不接受任何 props（数据通过 hooks 获取） |
|
||
|
||
### WorkflowTaskWidget
|
||
|
||
| Prop | 类型 | 默认值 | 描述 |
|
||
|------|------|--------|------|
|
||
| `className` | `string` | `undefined` | 用于样式的额外 CSS 类 |
|
||
|
||
### RecentSessionsWidget
|
||
|
||
| Prop | 类型 | 默认值 | 描述 |
|
||
|------|------|--------|------|
|
||
| `className` | `string` | `undefined` | 用于样式的额外 CSS 类 |
|
||
| `maxItems` | `number` | `6` | 要显示的最大项目数量 |
|
||
|
||
---
|
||
|
||
## 使用示例
|
||
|
||
### 基础仪表板
|
||
|
||
```tsx
|
||
import { HomePage } from '@/pages/HomePage'
|
||
|
||
// 仪表板在根路由 (/) 自动渲染
|
||
// 不需要 props - 数据通过 hooks 获取
|
||
```
|
||
|
||
### 嵌入 WorkflowTaskWidget
|
||
|
||
```tsx
|
||
import { WorkflowTaskWidget } from '@/components/dashboard/widgets/WorkflowTaskWidget'
|
||
|
||
function CustomDashboard() {
|
||
return (
|
||
<div className="p-6">
|
||
<WorkflowTaskWidget />
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
### 自定义最近会话小部件
|
||
|
||
```tsx
|
||
import { RecentSessionsWidget } from '@/components/dashboard/widgets/RecentSessionsWidget'
|
||
|
||
function ActivityFeed() {
|
||
return (
|
||
<div className="p-6">
|
||
<RecentSessionsWidget maxItems={10} />
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 状态管理
|
||
|
||
### 本地状态
|
||
|
||
| 状态 | 类型 | 描述 |
|
||
|------|------|------|
|
||
| `hasError` | `boolean` | 关键错误的错误跟踪 |
|
||
| `projectExpanded` | `boolean` | 项目信息横幅展开状态 |
|
||
| `currentSessionIndex` | `number` | 轮播中活动会话的索引 |
|
||
| `activeTab` | `'all' \| 'workflow' \| 'lite'` | 最近会话小部件筛选标签页 |
|
||
|
||
### Store 选择器（Zustand）
|
||
|
||
| Store | 选择器 | 用途 |
|
||
|-------|--------|------|
|
||
| `appStore` | `selectIsImmersiveMode` | 检查沉浸模式是否激活 |
|
||
|
||
### 自定义 Hooks（数据获取）
|
||
|
||
| Hook | 描述 | 重新获取间隔 |
|
||
|------|-------------|--------------|
|
||
| `useWorkflowStatusCounts` | 会话状态分布数据 | - |
|
||
| `useDashboardStats` | 带迷你趋势图的统计数据 | 60 秒 |
|
||
| `useProjectOverview` | 项目信息和技术栈 | - |
|
||
| `useIndexStatus` | 实时索引状态 | 30 秒 |
|
||
| `useSessions` | 活动会话数据 | - |
|
||
| `useLiteTasks` | 最近小部件的轻量任务数据 | - |
|
||
|
||
---
|
||
|
||
## 交互演示
|
||
|
||
### 统计卡片演示
|
||
|
||
:::demo MiniStatCards #MiniStatCards.tsx :::
|
||
|
||
### 项目信息横幅演示
|
||
|
||
:::demo ProjectInfoBanner #ProjectInfoBanner.tsx :::
|
||
|
||
### 会话轮播演示
|
||
|
||
:::demo SessionCarousel #SessionCarousel.tsx :::
|
||
|
||
---
|
||
|
||
## 可访问性
|
||
|
||
- **键盘导航**：
|
||
- <kbd>Tab</kbd> - 在交互元素之间导航
|
||
- <kbd>Enter</kbd>/<kbd>Space</kbd> - 激活按钮和卡片
|
||
- <kbd>方向键</kbd> - 导航轮播会话
|
||
|
||
- **ARIA 属性**：
|
||
- 导航按钮上的 `aria-label`
|
||
- 可展开部分的 `aria-expanded`
|
||
- 实时更新的 `aria-live` 区域
|
||
|
||
- **屏幕阅读器支持**：
|
||
- 所有图表都有文字描述
|
||
- 状态指示器包含文字标签
|
||
- 导航被正确宣布
|
||
|
||
---
|
||
|
||
## 相关链接
|
||
|
||
- [会话](/features/sessions) - 查看和管理所有会话
|
||
- [终端仪表板](/features/terminal) - 终端优先监控界面
|
||
- [队列](/features/queue) - 问题执行队列管理
|
||
- [内存](/features/memory) - 持久化内存管理
|
||
- [设置](/features/settings) - 全局应用设置
|