# 仪表板

## 一句话概述
**仪表板通过直观的基于小部件的界面，提供项目工作流状态、统计信息和最近活动的概览。**

---

## 解决的痛点

| 痛点 | 当前状态 | 仪表板解决方案 |
|------|----------|----------------|
| **项目可见性不足** | 无法查看整体项目健康状况 | 带有技术栈和开发索引的项目信息横幅 |
| **指标分散** | 统计信息分布在多个位置 | 集中式统计数据，带有迷你趋势图 |
| **工作流状态未知** | 难以跟踪会话进度 | 带有状态细分的饼图 |
| **最近工作丢失** | 无法快速访问活动会话 | 带有任务详情的会话轮播 |
| **索引状态不明确** | 不知道代码是否已索引 | 实时索引状态指示器 |

---

## 概述

**位置**: `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) - 全局应用设置