Claude-Code-Workflow/docs/zh-CN/features/dashboard.md

仪表板

一句话概述

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

---

解决的痛点

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

---

概述

位置: ccw/frontend/src/pages/HomePage.tsx

用途: 仪表板主页，提供项目概览、统计信息、工作流状态和最近活动监控。

访问: 导航 → 仪表板（默认首页，路径为 /）

布局:

+--------------------------------------------------------------------------+
|  仪表板头部（标题 + 刷新）                                            |
+--------------------------------------------------------------------------+
|  WorkflowTaskWidget（组合卡片）                                        |
|  +--------------------------------------------------------------------+  |
|  | 项目信息横幅（可展开）                                           |  |
|  | - 项目名称、描述、技术栈徽章                                    |  |
|  | - 快速统计（功能、bug修复、增强）                                |  |
|  | - 索引状态指示器                                                 |  |
|  +----------------------------------+---------------------------------+  |
|  | 统计部分 | 工作流状态 |  任务详情（轮播）         |  |
|  | - 6 个迷你卡片 | - 饼图       | - 会话导航                 |  |
|  | - 迷你趋势图   | - 图例       | - 任务列表（2 列）         |  |
|  +----------------+-----------------+-------------------------------+  |
+--------------------------------------------------------------------------+
|  RecentSessionsWidget                                                     |
|  +--------------------------------------------------------------------+  |
|  | 标签页：所有任务 | 工作流 | 轻量任务                            |  |
|  | +---------------+---------------+-------------------------------+ |  |
|  | | 带有状态、进度、标签、时间的任务卡片                        | |  |
|  | +---------------------------------------------------------------+ |  |
+--------------------------------------------------------------------------+

---

实时演示

:::demo DashboardOverview

dashboard-overview.tsx

/**

• 仪表板概览演示

• 显示带有小部件的主仪表板布局 */ export function DashboardOverview() { return (

  {/* 头部 */}

  仪表板

  项目概览和活动监控

  刷新

  {/* 工作流统计小部件 */}

  项目概览与统计

  统计数据

  {[ { label: '活动会话', value: '12', color: 'text-blue-500' }, { label: '总任务', value: '48', color: 'text-green-500' }, { label: '已完成', value: '35', color: 'text-emerald-500' }, { label: '待处理', value: '8', color: 'text-amber-500' }, ].map((stat, i) => (

  {stat.value}

  {stat.label}

  ))}

       <div className="space-y-3">
         <div className="text-xs font-medium text-muted-foreground">工作流状态</div>
         <div className="flex items-center justify-center h-24">
           <div className="relative w-20 h-20">
             <svg className="w-full h-full -rotate-90" viewBox="0 0 36 36">
               <circle cx="18" cy="18" r="15" fill="none" stroke="currentColor" strokeWidth="3" className="text-muted opacity-20"/>
               <circle cx="18" cy="18" r="15" fill="none" stroke="currentColor" strokeWidth="3" className="text-blue-500" strokeDasharray="70 100"/>
             </svg>
             <div className="absolute inset-0 flex items-center justify-center text-xs font-bold">70%</div>
           </div>
         </div>
         <div className="text-xs text-center space-y-1">
           <div className="flex items-center justify-center gap-1">
             <div className="w-2 h-2 rounded-full bg-blue-500"/>
             <span>已完成：70%</span>
           </div>
         </div>
       </div>
  
       <div className="space-y-3">
         <div className="text-xs font-medium text-muted-foreground">最近会话</div>
         <div className="p-3 bg-accent/20 rounded border">
           <div className="flex items-center justify-between mb-2">
             <span className="text-sm font-medium">功能：身份验证流程</span>
             <span className="text-xs px-2 py-0.5 rounded-full bg-green-500/20 text-green-600">运行中</span>
           </div>
           <div className="space-y-1.5">
             <div className="flex items-center gap-2 text-xs">
               <div className="w-3 h-3 rounded bg-green-500"/>
               <span>实现登录表单</span>
             </div>
             <div className="flex items-center gap-2 text-xs">
               <div className="w-3 h-3 rounded bg-amber-500"/>
               <span>添加 OAuth 提供商</span>
             </div>
             <div className="flex items-center gap-2 text-xs">
               <div className="w-3 h-3 rounded bg-muted"/>
               <span className="text-muted-foreground">测试流程</span>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
  

  {/* 最近会话小部件 */}

  {['所有任务', '工作流', '轻量任务'].map((tab, i) => ( {tab} ))}

  {[ { name: '重构 UI 组件', status: '进行中', progress: 65 }, { name: '修复登录 Bug', status: '待处理', progress: 0 }, { name: '添加深色模式', status: '已完成', progress: 100 }, ].map((task, i) => (

  {task.name} {task.status}

  {task.progress > 0 && task.progress < 100 && (

  )}

  ))}

) } :::

---

核心功能

功能	描述
项目信息横幅	可展开的横幅，显示项目名称、描述、技术栈（语言、框架、架构）、开发索引（功能/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	要显示的最大项目数量

---

使用示例

基础仪表板

import { HomePage } from '@/pages/HomePage'

// 仪表板在根路由 (/) 自动渲染
// 不需要 props - 数据通过 hooks 获取

嵌入 WorkflowTaskWidget

import { WorkflowTaskWidget } from '@/components/dashboard/widgets/WorkflowTaskWidget'

function CustomDashboard() {
  return (
    <div className="p-6">
      <WorkflowTaskWidget />
    </div>
  )
}

自定义最近会话小部件

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

mini-stat-cards.tsx

/**

• 迷你统计卡片演示
• 带有迷你趋势图的独立统计卡片 */ export function MiniStatCards() { const stats = [ { label: '活动会话', value: 12, trend: [8, 10, 9, 11, 10, 12, 12], color: 'blue' }, { label: '总任务', value: 48, trend: [40, 42, 45, 44, 46, 47, 48], color: 'green' }, { label: '已完成', value: 35, trend: [25, 28, 30, 32, 33, 34, 35], color: 'emerald' }, { label: '待处理', value: 8, trend: [12, 10, 11, 9, 8, 7, 8], color: 'amber' }, { label: '失败', value: 5, trend: [3, 4, 3, 5, 4, 5, 5], color: 'red' }, { label: '今日活动', value: 23, trend: [5, 10, 15, 18, 20, 22, 23], color: 'purple' }, ]

const colorMap = { blue: 'text-blue-500 bg-blue-500/10', green: 'text-green-500 bg-green-500/10', emerald: 'text-emerald-500 bg-emerald-500/10', amber: 'text-amber-500 bg-amber-500/10', red: 'text-red-500 bg-red-500/10', purple: 'text-purple-500 bg-purple-500/10', }

return (

带迷你趋势图的统计

{stats.map((stat, i) => (

{stat.label} <div className={w-2 h-2 rounded-full ${colorMap[stat.color].split(' ')[1]}}/>

<div className={text-2xl font-bold ${colorMap[stat.color].split(' ')[0]}}>{stat.value}

{stat.trend.map((v, j) => ( <div key={j} className="flex-1 rounded-t" style={{ height: ${(v / Math.max(...stat.trend)) * 100}%, backgroundColor: v === stat.value ? 'currentColor' : 'rgba(59, 130, 246, 0.3)', }} /> ))}

))}

) } :::

项目信息横幅演示

:::demo ProjectInfoBanner

project-info-banner.tsx

/**

• 项目信息横幅演示
• 带有技术栈的可展开项目信息 */ export function ProjectInfoBanner() { const [expanded, setExpanded] = React.useState(false)

return (

项目信息横幅

{/* 横幅头部 */}

我的项目

使用 React 构建的现代化 Web 应用

<button onClick={() => setExpanded(!expanded)} className="p-2 rounded-md hover:bg-accent" > <svg className={w-5 h-5 transition-transform ${expanded ? 'rotate-180' : ''}} fill="none" viewBox="0 0 24 24" stroke="currentColor">

    {/* 技术栈徽章 */}
    <div className="px-4 pb-3 flex flex-wrap gap-2">
      {['TypeScript', 'React', 'Vite', 'Tailwind CSS', 'Zustand'].map((tech) => (
        <span key={tech} className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary">
          {tech}
        </span>
      ))}
    </div>

    {/* 展开内容 */}
    {expanded && (
      <div className="p-4 border-t bg-muted/20 space-y-4">
        <div>
          <h5 className="text-xs font-semibold mb-2">架构</h5>
          <div className="text-sm text-muted-foreground space-y-1">
            <div>• 基于组件的 UI 架构</div>
            <div>• 集中式状态管理</div>
            <div>• RESTful API 集成</div>
          </div>
        </div>
        <div>
          <h5 className="text-xs font-semibold mb-2">关键组件</h5>
          <div className="grid grid-cols-2 gap-2 text-sm">
            {['会话管理器', '仪表板', '任务调度器', '分析'].map((comp) => (
              <div key={comp} className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 rounded-full bg-primary"/>
                {comp}
              </div>
            ))}
          </div>
        </div>
      </div>
    )}
  </div>
</div>

) } :::

会话轮播演示

:::demo SessionCarousel

session-carousel.tsx

/**

• 会话轮播演示
• 带有导航的自动轮播会话卡片 */ export function SessionCarousel() { const [currentIndex, setCurrentIndex] = React.useState(0) const sessions = [ { name: '功能：用户身份验证', status: 'running', tasks: [ { name: '实现登录表单', status: 'completed' }, { name: '添加 OAuth 提供商', status: 'in-progress' }, { name: '创建会话管理', status: 'pending' }, ], }, { name: 'Bug 修复：内存泄漏', status: 'running', tasks: [ { name: '识别泄漏源', status: 'completed' }, { name: '修复清理处理器', status: 'in-progress' }, { name: '添加单元测试', status: 'pending' }, ], }, { name: '重构：API 层', status: 'planning', tasks: [ { name: '设计新接口', status: 'pending' }, { name: '迁移现有端点', status: 'pending' }, { name: '更新文档', status: 'pending' }, ], }, ]

const statusColors = { completed: 'bg-green-500', 'in-progress': 'bg-amber-500', pending: 'bg-muted', }

React.useEffect(() => { const timer = setInterval(() => { setCurrentIndex((i) => (i + 1) % sessions.length) }, 5000) return () => clearInterval(timer) }, [sessions.length])

return (

会话轮播（每 5 秒自动轮播）

会话 {currentIndex + 1} / {sessions.length}

{sessions.map((_, i) => ( <button key={i} onClick={() => setCurrentIndex(i)} className={w-2 h-2 rounded-full transition-colors ${ i === currentIndex ? 'bg-primary' : 'bg-muted-foreground/30' }} /> ))}

    <div className="p-4 bg-accent/20 rounded border">
      <div className="flex items-center justify-between mb-3">
        <span className="font-medium">{sessions[currentIndex].name}</span>
        <span className={`text-xs px-2 py-1 rounded-full ${
          sessions[currentIndex].status === 'running' ? 'bg-green-500/20 text-green-600' : 'bg-blue-500/20 text-blue-600'
        }`}>
          {sessions[currentIndex].status === 'running' ? '运行中' : sessions[currentIndex].status === 'planning' ? '计划中' : sessions[currentIndex].status}
        </span>
      </div>

      <div className="space-y-2">
        {sessions[currentIndex].tasks.map((task, i) => (
          <div key={i} className="flex items-center gap-2 text-sm">
            <div className={`w-3 h-3 rounded ${statusColors[task.status]}`}/>
            <span className={task.status === 'pending' ? 'text-muted-foreground' : ''}>{task.name}</span>
          </div>
        ))}
      </div>
    </div>

    <div className="flex justify-between mt-3">
      <button
        onClick={() => setCurrentIndex((i) => (i - 1 + sessions.length) % sessions.length)}
        className="px-3 py-1.5 text-sm border rounded-md hover:bg-accent"
      >
        ← 上一页
      </button>
      <button
        onClick={() => setCurrentIndex((i) => (i + 1) % sessions.length)}
        className="px-3 py-1.5 text-sm border rounded-md hover:bg-accent"
      >
        下一页 →
      </button>
    </div>
  </div>
</div>

) } :::

---

可访问性

• 键盘导航：

  • Tab - 在交互元素之间导航
  • Enter/Space - 激活按钮和卡片
  • 方向键 - 导航轮播会话

• ARIA 属性：

  • 导航按钮上的 aria-label
  • 可展开部分的 aria-expanded
  • 实时更新的 aria-live 区域

• 屏幕阅读器支持：

  • 所有图表都有文字描述
  • 状态指示器包含文字标签
  • 导航被正确宣布

---

相关链接

• 会话 - 查看和管理所有会话
• 终端仪表板 - 终端优先监控界面
• 队列 - 问题执行队列管理
• 内存 - 持久化内存管理
• 设置 - 全局应用设置