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

Files

catlog22 8ceae6d6fd Add Chinese documentation for custom skills development and reference guide

- 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.

2026-03-01 13:08:12 +08:00

7.9 KiB

Raw Blame History

仪表板

一句话概述

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

解决的痛点

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

概述

位置: 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`	要显示的最大项目数量

使用示例

基础仪表板

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 #MiniStatCards.tsx :::

项目信息横幅演示

:::demo ProjectInfoBanner #ProjectInfoBanner.tsx :::

会话轮播演示

:::demo SessionCarousel #SessionCarousel.tsx :::

可访问性

键盘导航：
- Tab - 在交互元素之间导航
- Enter/Space - 激活按钮和卡片
- 方向键 - 导航轮播会话
ARIA 属性：
- 导航按钮上的 aria-label
- 可展开部分的 aria-expanded
- 实时更新的 aria-live 区域
屏幕阅读器支持：
- 所有图表都有文字描述
- 状态指示器包含文字标签
- 导航被正确宣布

7.9 KiB Raw Blame History Unescape Escape

仪表板