feat: add documentation for Checkbox, Input, and Select components; enhance Queue and Terminal features

- Introduced Checkbox component documentation in Chinese, covering usage, properties, and examples. - Added Input component documentation in Chinese, detailing its attributes and various states. - Created Select component documentation in Chinese, including subcomponents and usage examples. - Developed Queue management documentation, outlining its core functionalities and component structure. - Added Terminal dashboard documentation, describing its layout, core features, and usage examples. - Documented team workflows, detailing various team skills and their applications in project management.
2026-03-03 15:43:11 +08:00 · 2026-03-02 19:38:30 +08:00
parent a58aa26a30
commit 99d6438303
26 changed files with 1017 additions and 378 deletions
--- a/docs/zh/components/index.md
+++ b/docs/zh/components/index.md
@@ -0,0 +1,248 @@
+# 组件库
+
+## 一句话概述
+**基于 Radix UI 原语和 Tailwind CSS 构建的可复用 UI 组件综合集合，遵循 shadcn/ui 模式，提供一致、可访问和可定制的界面。**
+
+---
+
+## 概述
+
+**位置**: `ccw/frontend/src/components/ui/`
+
+**用途**: 为构建 CCW 前端应用程序提供一致的 UI 组件集合。
+
+**技术栈**:
+- **Radix UI**: 无样式、可访问的组件原语
+- **Tailwind CSS**: 带自定义主题的实用优先样式
+- **class-variance-authority (CVA)**: 类型安全的变体 props 管理
+- **Lucide React**: 一致的图标系统
+
+---
+
+## 实时演示：组件库展示
+
+
+:::demo ComponentGallery #ComponentGalleryZh.tsx :::
+
+---
+
+## 可用组件
+
+### 表单组件
+
+| 组件 | 描述 | Props |
+|------|------|------|
+| [Button](/components/ui/button) | 可点击的操作按钮，带变体和尺寸 | `variant`, `size`, `asChild` |
+| [Input](/components/ui/input) | 文本输入字段 | `error` |
+| [Textarea](/components/ui/textarea) | 多行文本输入 | `error` |
+| [Select](/components/ui/select) | 下拉选择（Radix） | Select 组件 |
+| [Checkbox](/components/ui/checkbox) | 布尔复选框（Radix） | `checked`, `onCheckedChange` |
+| [Switch](/components/ui/switch) | 切换开关 | `checked`, `onCheckedChange` |
+
+### 布局组件
+
+| 组件 | 描述 | Props |
+|------|------|------|
+| [Card](/components/ui/card) | 带标题/脚注的内容容器 | 嵌套组件 |
+| [Separator](/components/ui/separator) | 视觉分隔符 | `orientation` |
+| [ScrollArea](/components/ui/scroll-area) | 自定义滚动条容器 | - |
+
+### 反馈组件
+
+| 组件 | 描述 | Props |
+|------|------|------|
+| [Badge](/components/ui/badge) | 状态指示器标签 | `variant` |
+| [Progress](/components/ui/progress) | 进度条 | `value` |
+| [Alert](/components/ui/alert) | 通知消息 | `variant` |
+| [Toast](/components/ui/toast) | 临时通知（Radix） | Toast 组件 |
+
+### 导航组件
+
+| 组件 | 描述 | Props |
+|------|------|------|
+| [Tabs](/components/ui/tabs) | 标签页导航（Radix） | Tabs 组件 |
+| [TabsNavigation](/components/ui/tabs-navigation) | 自定义标签栏 | `tabs`, `value`, `onValueChange` |
+| [Breadcrumb](/components/ui/breadcrumb) | 导航面包屑 | Breadcrumb 组件 |
+
+### 叠加层组件
+
+| 组件 | 描述 | Props |
+|------|------|------|
+| [Dialog](/components/ui/dialog) | 模态对话框（Radix） | `open`, `onOpenChange` |
+| [Drawer](/components/ui/drawer) | 侧边面板（Radix） | `open`, `onOpenChange` |
+| [Dropdown Menu](/components/ui/dropdown) | 上下文菜单（Radix） | Dropdown 组件 |
+| [Popover](/components/ui/popover) | 浮动内容（Radix） | `open`, `onOpenChange` |
+| [Tooltip](/components/ui/tooltip) | 悬停工具提示（Radix） | `content` |
+| [AlertDialog](/components/ui/alert-dialog) | 确认对话框（Radix） | Dialog 组件 |
+
+### 展开组件
+
+| 组件 | 描述 | Props |
+|------|------|------|
+| [Collapsible](/components/ui/collapsible) | 展开/折叠内容（Radix） | `open`, `onOpenChange` |
+| [Accordion](/components/ui/accordion) | 可折叠部分（Radix） | Accordion 组件 |
+
+---
+
+## 按钮变体
+
+Button 组件通过 CVA（class-variance-authority）支持 8 种变体：
+
+| 变体 | 用途 | 预览 |
+|---------|----------|--------|
+| `default` | 主要操作 | <span className="inline-block px-3 py-1 rounded bg-primary text-primary-foreground text-xs">默认</span> |
+| `destructive` | 危险操作 | <span className="inline-block px-3 py-1 rounded bg-destructive text-destructive-foreground text-xs">危险</span> |
+| `outline` | 次要操作 | <span className="inline-block px-3 py-1 rounded border text-xs">轮廓</span> |
+| `secondary` | 较少强调 | <span className="inline-block px-3 py-1 rounded bg-secondary text-secondary-foreground text-xs">次要</span> |
+| `ghost` | 微妙操作 | <span className="inline-block px-3 py-1 rounded text-xs">幽灵</span> |
+| `link` | 文本链接 | <span className="inline-block px-3 py-1 underline text-primary text-xs">链接</span> |
+| `gradient` | 特色操作 | <span className="inline-block px-3 py-1 rounded bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs">渐变</span> |
+| `gradientPrimary` | 主要渐变 | <span className="inline-block px-3 py-1 rounded bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs">主要</span> |
+
+### 按钮尺寸
+
+| 尺寸 | 高度 | 内边距 |
+|------|--------|---------|
+| `sm` | 36px | 水平 12px |
+| `default` | 40px | 水平 16px |
+| `lg` | 44px | 水平 32px |
+| `icon` | 40px | 正方形（仅图标） |
+
+---
+
+## 徽章变体
+
+Badge 组件支持 9 种变体，用于不同的状态类型：
+
+| 变体 | 用途 | 颜色 |
+|---------|----------|-------|
+| `default` | 一般信息 | 主要主题 |
+| `secondary` | 较少强调 | 次要主题 |
+| `destructive` | 错误/危险 | 危险主题 |
+| `outline` | 微妙 | 仅文本颜色 |
+| `success` | 成功状态 | 绿色 |
+| `warning` | 警告状态 | 琥珀色 |
+| `info` | 信息 | 蓝色 |
+| `review` | 审查状态 | 紫色 |
+| `gradient` | 特色 | 品牌渐变 |
+
+---
+
+## 使用示例
+
+### Button
+
+```tsx
+import { Button } from '@/components/ui/Button'
+
+<Button variant="default" onClick={handleClick}>
+  点击我
+</Button>
+
+<Button variant="destructive" size="sm">
+  删除
+</Button>
+
+<Button variant="ghost" size="icon">
+  <SettingsIcon />
+</Button>
+```
+
+### Input with Error State
+
+```tsx
+import { Input } from '@/components/ui/Input'
+
+<Input
+  type="text"
+  error={hasError}
+  placeholder="输入您的名称"
+  value={name}
+  onChange={(e) => setName(e.target.value)}
+/>
+```
+
+### Checkbox
+
+```tsx
+import { Checkbox } from '@/components/ui/Checkbox'
+
+<Checkbox
+  checked={accepted}
+  onCheckedChange={setAccepted}
+/>
+<label>接受条款</label>
+```
+
+### Switch
+
+```tsx
+import { Switch } from '@/components/ui/Switch'
+
+<Switch
+  checked={enabled}
+  onCheckedChange={setEnabled}
+/>
+<span>启用功能</span>
+```
+
+### Card
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/Card'
+
+<Card>
+  <CardHeader>
+    <CardTitle>卡片标题</CardTitle>
+    <CardDescription>简短描述在这里</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>主要内容放在这里。</p>
+  </CardContent>
+  <CardFooter>
+    <Button>操作</Button>
+  </CardFooter>
+</Card>
+```
+
+### Badge
+
+```tsx
+import { Badge, badgeVariants } from '@/components/ui/Badge'
+
+<Badge variant="success">已完成</Badge>
+<Badge variant="warning">待处理</Badge>
+<Badge variant="destructive">失败</Badge>
+```
+
+---
+
+## 可访问性
+
+所有组件遵循 Radix UI 的可访问性标准：
+
+- **键盘导航**：所有交互组件完全可键盘访问
+- **ARIA 属性**：正确的角色、状态和属性
+- **屏幕阅读器支持**：语义化 HTML 和 ARIA 标签
+- **焦点管理**：可见的焦点指示器和逻辑 Tab 顺序
+- **颜色对比度**：符合 WCAG AA 标准的颜色组合
+
+### 键盘快捷键
+
+| 组件 | 按键 |
+|-----------|-------|
+| Button | <kbd>Enter</kbd>, <kbd>Space</kbd> |
+| Checkbox/Switch | <kbd>Space</kbd> 切换 |
+| Select | <kbd>Arrow</kbd> 键，<kbd>Enter</kbd> 选择，<kbd>Esc</kbd> 关闭 |
+| Dialog | <kbd>Esc</kbd> 关闭 |
+| Tabs | <kbd>Arrow</kbd> 键导航 |
+| Dropdown | <kbd>Arrow</kbd> 键，<kbd>Enter</kbd> 选择 |
+
+---
+
+## 相关链接
+
+- [Radix UI Primitives](https://www.radix-ui.com/) - 无头 UI 组件库
+- [Tailwind CSS](https://tailwindcss.com/) - 实用优先 CSS 框架
+- [shadcn/ui](https://ui.shadcn.com/) - 组件模式参考
+- [CVA Documentation](https://cva.style/) - Class Variance Authority
--- a/docs/zh/components/ui/badge.md
+++ b/docs/zh/components/ui/badge.md
@@ -0,0 +1,119 @@
+---
+title: Badge 徽章
+description: 用于视觉分类的小型状态或标签组件
+sidebar: auto
+---
+
+# Badge 徽章
+
+## 概述
+
+Badge 徽章组件用于以紧凑形式显示状态、类别或标签。它通常用于标签、状态指示器和计数。
+
+## 语法演示
+
+:::demo badge-variants
+展示所有可用的徽章变体，包括默认、次要、破坏性、轮廓、成功、警告、信息、审查和渐变样式
+:::
+
+## 属性
+
+<PropsTable :props="[
+  { name: 'variant', type: '\'default\' | \'secondary\' | \'destructive\' | \'outline\' | \'success\' | \'warning\' | \'info\' | \'review\' | \'gradient\'', required: false, default: '\'default\'', description: '视觉样式变体' },
+  { name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' },
+  { name: 'children', type: 'ReactNode', required: true, default: '-', description: '徽章内容' }
+]" />
+
+## 变体说明
+
+### Default（默认）
+
+主题色背景的主要徽章。用于主要标签和类别。
+
+### Secondary（次要）
+
+次要信息的灰色徽章。
+
+### Destructive（破坏性）
+
+红色徽章，用于错误、危险状态或负面状态指示。
+
+### Outline（轮廓）
+
+只有文本和边框、无背景的徽章。用于微妙的标签。
+
+### Success（成功）
+
+绿色徽章，用于成功状态、完成的操作或正面状态指示。
+
+### Warning（警告）
+
+黄色/琥珀色徽章，用于警告、待处理状态或注意事项。
+
+### Info（信息）
+
+蓝色徽章，用于信息内容或中性状态。
+
+### Review（审查）
+
+紫色徽章，用于审查状态、待审查或反馈指示器。
+
+### Gradient（渐变）
+
+带品牌渐变背景的徽章，用于特色或突出显示的项目。
+
+## 使用示例
+
+### 基础徽章
+
+```vue
+<Badge>默认</Badge>
+```
+
+### 状态指示器
+
+```vue
+<Badge variant="success">活跃</Badge>
+<Badge variant="warning">待处理</Badge>
+<Badge variant="destructive">失败</Badge>
+<Badge variant="info">草稿</Badge>
+```
+
+### 计数徽章
+
+```vue
+<div class="relative">
+  <Bell />
+  <Badge variant="destructive" class="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
+    3
+  </Badge>
+</div>
+```
+
+### 分类标签
+
+```vue
+<div class="flex gap-2">
+  <Badge variant="outline">React</Badge>
+  <Badge variant="outline">TypeScript</Badge>
+  <Badge variant="outline">Tailwind</Badge>
+</div>
+```
+
+### 审查状态
+
+```vue
+<Badge variant="review">审查中</Badge>
+```
+
+### 渐变徽章
+
+```vue
+<Badge variant="gradient">特色</Badge>
+```
+
+## 相关组件
+
+- [Card 卡片](/zh-CN/components/ui/card)
+- [Button 按钮](/zh-CN/components/ui/button)
+- [Avatar 头像](/zh-CN/components/ui/avatar)
--- a/docs/zh/components/ui/button.md
+++ b/docs/zh/components/ui/button.md
@@ -0,0 +1,80 @@
+---
+title: Button 按钮
+description: 按钮组件用于触发操作或提交表单
+sidebar: auto
+---
+
+# Button 按钮
+
+## 概述
+
+按钮是最常用的交互元素之一，用于触发操作、提交表单或导航到其他页面。
+
+## 语法演示
+
+:::demo button-variants
+展示所有视觉变体的按钮组件
+:::
+
+## 属性
+
+<PropsTable :props="[
+  { name: 'variant', type: '\'default\' | \'destructive\' | \'outline\' | \'secondary\' | \'ghost\' | \'link\' | \'gradient\' | \'gradientPrimary\'', required: false, default: '\'default\'', description: '按钮的视觉变体' },
+  { name: 'size', type: '\'default\' | \'sm\' | \'lg\' | \'icon\'', required: false, default: '\'default\'', description: '按钮的大小' },
+  { name: 'asChild', type: 'boolean', required: false, default: 'false', description: '是否将 props 与子元素合并（用于 Radix UI 组合）' },
+  { name: 'disabled', type: 'boolean', required: false, default: 'false', description: '是否禁用按钮' },
+  { name: 'onClick', type: '() => void', required: false, default: '-', description: '点击事件回调函数' },
+  { name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' },
+  { name: 'children', type: 'ReactNode', required: true, default: '-', description: '按钮内容' }
+]" />
+
+## 变体说明
+
+### Default（默认）
+
+默认按钮用于主要的操作场景。
+
+### Destructive（破坏性）
+
+破坏性按钮用于删除、移除等不可逆的操作。
+
+### Outline（轮廓）
+
+轮廓按钮用于次要操作，视觉上更轻量。
+
+### Secondary（次要）
+
+次要按钮用于辅助操作。
+
+### Ghost（幽灵）
+
+幽灵按钮没有边框，视觉上最轻量。
+
+### Link（链接）
+
+链接按钮看起来像链接，但具有按钮的交互行为。
+
+### Gradient（渐变）
+
+渐变按钮使用品牌渐变色，悬停时带有发光效果。
+
+### Gradient Primary（主色渐变）
+
+主色渐变按钮使用主题主色渐变，悬停时带有增强的发光效果。
+
+## 使用场景
+
+| 场景 | 推荐变体 |
+|------|----------|
+| 主要操作（提交、保存） | default, gradientPrimary |
+| 危险操作（删除、移除） | destructive |
+| 次要操作 | outline, secondary |
+| 取消操作 | ghost, outline |
+| 导航链接 | link |
+| 促销/特色 CTA | gradient |
+
+## 相关组件
+
+- [Input 输入框](/zh-CN/components/ui/input)
+- [Select 选择器](/zh-CN/components/ui/select)
+- [Dialog 对话框](/zh-CN/components/ui/dialog)
--- a/docs/zh/components/ui/card.md
+++ b/docs/zh/components/ui/card.md
@@ -0,0 +1,107 @@
+---
+title: Card 卡片
+description: 用于分组相关内容的容器组件
+sidebar: auto
+---
+
+# Card 卡片
+
+## 概述
+
+卡片组件是一个通用的容器，用于分组相关的内容和操作。它由多个子组件组成，协同工作以创建连贯的卡片布局。
+
+## 语法演示
+
+:::demo card-variants
+展示不同的卡片布局，包括页眉、内容、页脚和渐变边框变体
+:::
+
+## 组件
+
+卡片组件包含以下子组件：
+
+| 组件 | 用途 |
+|------|------|
+| `Card` | 带有边框和背景的主容器 |
+| `CardHeader` | 带有内边距的页眉部分 |
+| `CardTitle` | 标题元素 |
+| `CardDescription` | 带有次要颜色的描述文本 |
+| `CardContent` | 带有顶部内边距的内容区域 |
+| `CardFooter` | 用于操作的页脚部分 |
+| `CardGradientBorder` | 带有渐变边框的卡片 |
+
+## 属性
+
+所有 Card 组件接受标准 HTML div 属性：
+
+| 组件 | 属性 |
+|------|------|
+| `Card` | `className?: string` |
+| `CardHeader` | `className?: string` |
+| `CardTitle` | `className?: string`, `children?: ReactNode` |
+| `CardDescription` | `className?: string`, `children?: ReactNode` |
+| `CardContent` | `className?: string` |
+| `CardFooter` | `className?: string` |
+| `CardGradientBorder` | `className?: string` |
+
+## 使用示例
+
+### 基础卡片
+
+```vue
+<Card>
+  <CardContent>
+    <p>这是一个带有内容的基础卡片。</p>
+  </CardContent>
+</Card>
+```
+
+### 带页眉的卡片
+
+```vue
+<Card>
+  <CardHeader>
+    <CardTitle>卡片标题</CardTitle>
+    <CardDescription>卡片描述放在这里</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>卡片内容放在这里。</p>
+  </CardContent>
+</Card>
+```
+
+### 带页脚的完整卡片
+
+```vue
+<Card>
+  <CardHeader>
+    <CardTitle>项目设置</CardTitle>
+    <CardDescription>管理您的项目配置</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>配置您的项目设置和偏好。</p>
+  </CardContent>
+  <CardFooter>
+    <Button>保存更改</Button>
+  </CardFooter>
+</Card>
+```
+
+### 带渐变边框的卡片
+
+```vue
+<CardGradientBorder>
+  <CardHeader>
+    <CardTitle>特色卡片</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>此卡片具有渐变边框效果。</p>
+  </CardContent>
+</CardGradientBorder>
+```
+
+## 相关组件
+
+- [Button 按钮](/zh-CN/components/ui/button)
+- [Badge 徽章](/zh-CN/components/ui/badge)
+- [Separator 分隔线](/zh-CN/components/ui/separator)
--- a/docs/zh/components/ui/checkbox.md
+++ b/docs/zh/components/ui/checkbox.md
@@ -0,0 +1,120 @@
+---
+title: Checkbox 复选框
+description: 用于二元选择的复选框组件
+sidebar: auto
+---
+
+# Checkbox 复选框
+
+## 概述
+
+Checkbox 复选框组件允许用户从一组选项中选择一个或多个选项。基于 Radix UI Checkbox Primitive 构建，提供完整的无障碍支持，包括键盘导航。
+
+## 语法演示
+
+:::demo checkbox-variants
+展示不同的复选框状态，包括选中、未选中、半选和禁用状态
+:::
+
+## 属性
+
+<PropsTable :props="[
+  { name: 'checked', type: 'boolean | \'indeterminate\'', required: false, default: 'false', description: '是否选中复选框' },
+  { name: 'defaultChecked', type: 'boolean', required: false, default: 'false', description: '初始选中状态（非受控）' },
+  { name: 'onCheckedChange', type: '(checked: boolean) => void', required: false, default: '-', description: '选中状态变化时的回调函数' },
+  { name: 'disabled', type: 'boolean', required: false, default: 'false', description: '是否禁用复选框' },
+  { name: 'required', type: 'boolean', required: false, default: 'false', description: '是否为必填项' },
+  { name: 'name', type: 'string', required: false, default: '-', description: '表单输入名称' },
+  { name: 'value', type: 'string', required: false, default: '-', description: '表单输入值' },
+  { name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' }
+]" />
+
+## 状态说明
+
+### Unchecked（未选中）
+
+复选框未被选择时的默认状态。
+
+### Checked（已选中）
+
+复选框被选择时显示勾选图标。
+
+### Indeterminate（半选）
+
+混合状态（部分选择），通常用于父级复选框，当部分但不是全部子项被选中时使用。
+
+### Disabled（禁用）
+
+禁用的复选框不可交互，并以降低的透明度显示。
+
+## 使用示例
+
+### 基础复选框
+
+```vue
+<Checkbox />
+```
+
+### 带标签的复选框
+
+```vue
+<div class="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <label for="terms">我同意条款和条件</label>
+</div>
+```
+
+### 受控复选框
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <Checkbox v-model:checked="checked" />
+    <span>{{ checked ? '已选中' : '未选中' }}</span>
+  </div>
+</template>
+```
+
+### 半选状态
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const state = ref('indeterminate')
+</script>
+
+<template>
+  <Checkbox :checked="state" />
+</template>
+```
+
+### 表单集成
+
+```vue
+<form @submit="handleSubmit">
+  <div class="space-y-2">
+    <div class="flex items-center space-x-2">
+      <Checkbox id="newsletter" name="newsletter" value="yes" />
+      <label for="newsletter">订阅新闻通讯</label>
+    </div>
+    <div class="flex items-center space-x-2">
+      <Checkbox id="updates" name="updates" value="yes" />
+      <label for="updates">接收产品更新</label>
+    </div>
+  </div>
+  <Button type="submit" class="mt-4">提交</Button>
+</form>
+```
+
+## 相关组件
+
+- [Input 输入框](/zh-CN/components/ui/input)
+- [Select 选择器](/zh-CN/components/ui/select)
+- [Radio Group 单选框组](/zh-CN/components/ui/radio-group)
--- a/docs/zh/components/ui/input.md
+++ b/docs/zh/components/ui/input.md
@@ -0,0 +1,118 @@
+---
+title: Input 输入框
+description: 用于表单和用户输入的文本输入组件
+sidebar: auto
+---
+
+# Input 输入框
+
+## 概述
+
+输入框组件提供了一个样式化的文本输入字段，扩展了原生 HTML input 元素，具有一致的样式和错误状态支持。
+
+## 语法演示
+
+:::demo input-variants
+展示所有输入框状态，包括默认、错误和禁用
+:::
+
+## 属性
+
+<PropsTable :props="[
+  { name: 'type', type: 'string', required: false, default: '\'text\'', description: 'HTML input 类型（text、password、email、number 等）' },
+  { name: 'error', type: 'boolean', required: false, default: 'false', description: '输入框是否处于错误状态（显示破坏性边框）' },
+  { name: 'disabled', type: 'boolean', required: false, default: 'false', description: '是否禁用输入框' },
+  { name: 'placeholder', type: 'string', required: false, default: '-', description: '输入框为空时显示的占位符文本' },
+  { name: 'value', type: 'string | number', required: false, default: '-', description: '受控输入框的值' },
+  { name: 'defaultValue', type: 'string | number', required: false, default: '-', description: '非受控输入框的默认值' },
+  { name: 'onChange', type: '(event: ChangeEvent) => void', required: false, default: '-', description: '变更事件回调函数' },
+  { name: 'className', type: 'string', required: false, default: '-', description: '自定义 CSS 类名' }
+]" />
+
+## 状态
+
+### Default（默认）
+
+带有边框和焦点环的标准输入框。
+
+### Error（错误）
+
+错误状态，显示破坏性边框颜色。将 `error` 属性设置为 `true`。
+
+### Disabled（禁用）
+
+禁用状态，透明度降低。将 `disabled` 属性设置为 `true`。
+
+### Focus（聚焦）
+
+聚焦状态，带有环形轮廓。
+
+## 使用示例
+
+### 基础输入框
+
+```tsx
+import { Input } from '@/components/ui/Input'
+
+function Example() {
+  return <input type="text" placeholder="输入文本..." />
+}
+```
+
+### 受控输入框
+
+```tsx
+import { Input } from '@/components/ui/Input'
+
+function Example() {
+  const [value, setValue] = useState('')
+
+  return (
+    <Input
+      type="text"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="输入文本..."
+    />
+  )
+}
+```
+
+### 错误状态输入框
+
+```tsx
+import { Input } from '@/components/ui/Input'
+
+function Example() {
+  return (
+    <Input
+      type="text"
+      error
+      placeholder="无效输入..."
+    />
+  )
+}
+```
+
+### 密码输入框
+
+```tsx
+import { Input } from '@/components/ui/Input'
+
+function Example() {
+  return <Input type="password" placeholder="输入密码..." />
+}
+```
+
+## 无障碍访问
+
+- **键盘导航**：完全支持原生键盘操作
+- **ARIA 属性**：支持所有标准输入框 ARIA 属性
+- **焦点可见**：为键盘导航提供清晰的焦点指示器
+- **错误状态**：错误状态的视觉指示（与 `aria-invalid` 和 `aria-describedby` 配合使用）
+
+## 相关组件
+
+- [Button 按钮](/zh-CN/components/ui/button)
+- [Select 选择器](/zh-CN/components/ui/select)
+- [Checkbox 复选框](/zh-CN/components/ui/checkbox)
--- a/docs/zh/components/ui/select.md
+++ b/docs/zh/components/ui/select.md
@@ -0,0 +1,127 @@
+---
+title: Select 选择器
+description: 用于从选项列表中选择值的下拉选择组件
+sidebar: auto
+---
+
+# Select 选择器
+
+## 概述
+
+Select 选择器组件允许用户从选项列表中选择单个值。基于 Radix UI Select Primitive 构建，提供开箱即用的无障碍支持和键盘导航。
+
+## 语法演示
+
+:::demo select-variants
+展示不同的选择器配置，包括基础用法、带标签和带分隔线的示例
+:::
+
+## 子组件
+
+Select 选择器组件包含以下子组件：
+
+| 组件 | 用途 |
+|------|------|
+| `Select` | 管理状态的根组件 |
+| `SelectTrigger` | 打开下拉菜单的按钮 |
+| `SelectValue` | 显示选中的值 |
+| `SelectContent` | 下拉菜单内容容器 |
+| `SelectItem` | 单个可选项 |
+| `SelectLabel` | 用于分组的不可交互标签 |
+| `SelectGroup` | 将项目分组 |
+| `SelectSeparator` | 项目之间的视觉分隔线 |
+| `SelectScrollUpButton` | 长列表的向上滚动按钮 |
+| `SelectScrollDownButton` | 长列表的向下滚动按钮 |
+
+## 属性
+
+### Select 根组件
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `value` | `string` | - | 当前选中的值（受控） |
+| `defaultValue` | `string` | - | 默认选中的值 |
+| `onValueChange` | `(value: string) => void` | - | 值变化时的回调函数 |
+| `disabled` | `boolean` | `false` | 是否禁用选择器 |
+| `required` | `boolean` | `false` | 是否必填 |
+| `name` | `string` | - | 表单输入名称 |
+
+### SelectTrigger
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `className` | `string` | - | 自定义 CSS 类名 |
+
+### SelectItem
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `value` | `string` | - | 选项值 |
+| `disabled` | `boolean` | `false` | 是否禁用该选项 |
+| `className` | `string` | - | 自定义 CSS 类名 |
+
+## 使用示例
+
+### 基础选择器
+
+```vue
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="请选择一个选项" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="option1">选项 1</SelectItem>
+    <SelectItem value="option2">选项 2</SelectItem>
+    <SelectItem value="option3">选项 3</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+### 带标签和分组
+
+```vue
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="选择水果" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectLabel>水果</SelectLabel>
+    <SelectItem value="apple">苹果</SelectItem>
+    <SelectItem value="banana">香蕉</SelectItem>
+    <SelectItem value="orange">橙子</SelectItem>
+    <SelectSeparator />
+    <SelectLabel>蔬菜</SelectLabel>
+    <SelectItem value="carrot">胡萝卜</SelectItem>
+    <SelectItem value="broccoli">西兰花</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+### 受控选择器
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selectedValue = ref('')
+</script>
+
+<template>
+  <Select v-model="selectedValue">
+    <SelectTrigger>
+      <SelectValue placeholder="请选择..." />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="a">选项 A</SelectItem>
+      <SelectItem value="b">选项 B</SelectItem>
+      <SelectItem value="c">选项 C</SelectItem>
+    </SelectContent>
+  </Select>
+</template>
+```
+
+## 相关组件
+
+- [Input 输入框](/zh-CN/components/ui/input)
+- [Checkbox 复选框](/zh-CN/components/ui/checkbox)
+- [Button 按钮](/zh-CN/components/ui/button)
--- a/docs/zh/features/queue.md
+++ b/docs/zh/features/queue.md
@@ -0,0 +1,283 @@
+# 队列管理
+
+## 一句话概述
+**队列管理页面提供对问题执行队列的集中控制，配备调度器控件、状态监控和会话池管理。**
+
+---
+
+## 解决的痛点
+
+| 痛点 | 当前状态 | 队列解决方案 |
+|------|----------|--------------|
+| **执行无序** | 没有统一的任务队列 | 带分组项目的集中化队列 |
+| **调度器状态未知** | 不知道调度器是否在运行 | 实时状态指示器（空闲/运行/暂停） |
+| **无执行控制** | 无法启动/停止队列处理 | 带确认的开始/暂停/停止控件 |
+| **并发限制** | 同时运行太多会话 | 可配置的最大并发会话数 |
+| **无可见性** | 不知道队列中有什么 | 统计卡片 + 带状态跟踪的项目列表 |
+| **资源浪费** | 空闲会话消耗资源 | 带超时配置的会话池概览 |
+
+---
+
+## 概述
+
+**位置**: `ccw/frontend/src/pages/QueuePage.tsx`（旧版），`ccw/frontend/src/components/terminal-dashboard/QueuePanel.tsx`（当前）
+
+**用途**: 查看和管理问题执行队列，配备调度器控件、进度跟踪和会话池管理。
+
+**访问方式**: 导航 → 问题 → 队列标签页 或 终端仪表板 → 队列浮动面板
+
+**布局**:
+```
+--------------------------------------------------------------------------+
+|  队列面板标题栏                                                             |
+--------------------------------------------------------------------------+
+|  调度器状态栏                                                               |
+|  +----------------+  +-------------+  +-------------------------------+         |
+|  | 状态徽章       |  | 进度         |  | 并发数 (2/2)                  |         |
+|  +----------------+  +-------------+  +-------------------------------+         |
+--------------------------------------------------------------------------+
+|  调度器控件                                                                |
+|  +--------+  +--------+  +--------+  +-----------+                          |
+|  | 开始  |  | 暂停  |  | 停止   |  | 配置      |                          |
+|  +--------+  +--------+  +--------+  +-----------+                          |
+--------------------------------------------------------------------------+
+|  队列项目列表                                                              |
+|  +---------------------------------------------------------------------+    |
+|  | QueueItemRow（状态、issue_id、session_key、操作）                  |    |
+|  | - 状态图标（待处理/执行中/已完成/被阻塞/失败）                    |    |
+|  | - Issue ID / 项目 ID 显示                                           |    |
+|  | - 会话绑定信息                                                       |    |
+|  | - 进度指示器（对于执行中的项目）                                     |    |
+|  +---------------------------------------------------------------------+    |
+|  | [更多队列项目...]                                                    |    |
+|  +---------------------------------------------------------------------+    |
+--------------------------------------------------------------------------+
+|  会话池概览（可选）                                                         |
+|  +--------------------------------------------------------------------------+
+|  | 活动会话 | 空闲会话 | 总会话数                                        |
+|  +--------------------------------------------------------------------------+
+```
+
+---
+
+## 核心功能
+
+| 功能 | 描述 |
+|------|------|
+| **调度器状态** | 实时状态指示器（空闲/运行/暂停），带视觉徽章 |
+| **进度跟踪** | 显示队列总体完成百分比的进度条 |
+| **开始/暂停/停止控件** | 控制队列执行，停止操作时带确认对话框 |
+| **并发显示** | 显示当前活动会话数与最大并发会话数 |
+| **队列项目列表** | 所有队列项目的可滚动列表，附带状态、Issue ID 和会话绑定 |
+| **状态图标** | 项目状态的视觉指示器（待处理/执行中/已完成/被阻塞/失败） |
+| **会话池** | 活动会话、空闲会话和总会话数的概览 |
+| **配置面板** | 调整最大并发会话数和超时设置 |
+| **空状态** | 队列为空时的友好消息，附带添加项目的说明 |
+
+---
+
+## 组件层次结构
+
+```
+QueuePage（旧版）/ QueuePanel（当前）
+├── QueuePanelHeader
+│   ├── 标题
+│   └── 标签切换器（队列 | 编排器）
+├── SchedulerBar（内联在 QueueListColumn 中）
+│   ├── 状态徽章
+│   ├── 进度 + 并发数
+│   └── 控制按钮（播放/暂停/停止）
+├── QueueItemsList
+│   └── QueueItemRow（重复）
+│       ├── 状态图标
+│       ├── Issue ID / 项目 ID
+│       ├── 会话绑定
+│       └── 进度（对于执行中的项目）
+└── SchedulerPanel（独立）
+    ├── 状态部分
+    ├── 进度条
+    ├── 控制按钮
+    ├── 配置部分
+    │   ├── 最大并发会话数
+    │   ├── 会话空闲超时
+    │   └── 恢复键绑定超时
+    └── 会话池概览
+```
+
+---
+
+## Props API
+
+### QueuePanel
+
+| Prop | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `embedded` | `boolean` | `false` | 面板是否嵌入在另一个组件中 |
+
+### SchedulerPanel
+
+| Prop | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| - | - | - | 此组件不接受任何 props（所有数据来自 Zustand store） |
+
+### QueueListColumn
+
+| Prop | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| - | - | - | 此组件不接受任何 props（所有数据来自 Zustand store） |
+
+---
+
+## 状态管理
+
+### Zustand Stores
+
+| Store | 选择器 | 用途 |
+|-------|--------|------|
+| `queueSchedulerStore` | `selectQueueSchedulerStatus` | 当前调度器状态（空闲/运行/暂停） |
+| `queueSchedulerStore` | `selectSchedulerProgress` | 队列总体完成百分比 |
+| `queueSchedulerStore` | `selectQueueItems` | 所有队列项目的列表 |
+| `queueSchedulerStore` | `selectCurrentConcurrency` | 活动会话计数 |
+| `queueSchedulerStore` | `selectSchedulerConfig` | 调度器配置 |
+| `queueSchedulerStore` | `selectSessionPool` | 会话池概览 |
+| `queueSchedulerStore` | `selectSchedulerError` | 错误消息（如果有） |
+| `issueQueueIntegrationStore` | `selectAssociationChain` | 用于高亮显示的当前关联链 |
+| `queueExecutionStore` | `selectByQueueItem` | 队列项目的执行数据 |
+
+### 队列项目状态
+
+```typescript
+type QueueItemStatus =
+  | 'pending'      // 等待执行
+  | 'executing'    // 正在处理中
+  | 'completed'    // 成功完成
+  | 'blocked'      // 被依赖项阻塞
+  | 'failed';      // 失败并报错
+```
+
+### 调度器状态
+
+```typescript
+type QueueSchedulerStatus =
+  | 'idle'     // 无项目或已停止
+  | 'running'  // 活动处理项目
+  | 'paused';  // 临时暂停
+```
+
+---
+
+## 使用示例
+
+### 基本队列面板
+
+```tsx
+import { QueuePanel } from '@/components/terminal-dashboard/QueuePanel'
+
+function QueueSection() {
+  return <QueuePanel />
+}
+```
+
+### 独立调度器面板
+
+```tsx
+import { SchedulerPanel } from '@/components/terminal-dashboard/SchedulerPanel'
+
+function SchedulerControls() {
+  return <SchedulerPanel />
+}
+```
+
+### 嵌入式队列列表列
+
+```tsx
+import { QueueListColumn } from '@/components/terminal-dashboard/QueueListColumn'
+
+function EmbeddedQueue() {
+  return <QueueListColumn />
+}
+```
+
+### 队列 Store 操作
+
+```tsx
+import { useQueueSchedulerStore } from '@/stores/queueSchedulerStore'
+
+function QueueActions() {
+  const startQueue = useQueueSchedulerStore((s) => s.startQueue)
+  const pauseQueue = useQueueSchedulerStore((s) => s.pauseQueue)
+  const stopQueue = useQueueSchedulerStore((s) => s.stopQueue)
+  const updateConfig = useQueueSchedulerStore((s) => s.updateConfig)
+
+  const handleStart = () => startQueue()
+  const handlePause = () => pauseQueue()
+  const handleStop = () => stopQueue()
+  const handleConfig = (config) => updateConfig(config)
+
+  return (
+    <div>
+      <button onClick={handleStart}>开始</button>
+      <button onClick={handlePause}>暂停</button>
+      <button onClick={handleStop}>停止</button>
+      <button onClick={() => handleConfig({ maxConcurrentSessions: 4 })}>
+        设置最大值为 4
+      </button>
+    </div>
+  )
+}
+```
+
+---
+
+## 配置
+
+### 调度器配置
+
+| 设置 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `maxConcurrentSessions` | `number` | `2` | 同时运行的最大会话数 |
+| `sessionIdleTimeoutMs` | `number` | `60000` | 空闲会话超时时间（毫秒） |
+| `resumeKeySessionBindingTimeoutMs` | `number` | `300000` | 恢复键绑定超时时间（毫秒） |
+
+### 队列项目结构
+
+```typescript
+interface QueueItem {
+  item_id: string;
+  issue_id?: string;
+  sessionKey?: string;
+  status: QueueItemStatus;
+  execution_order: number;
+  created_at?: number;
+  updated_at?: number;
+}
+```
+
+---
+
+## 可访问性
+
+- **键盘导航**:
+  - <kbd>Tab</kbd> - 在队列项目和控件之间导航
+  - <kbd>Enter</kbd>/<kbd>Space</kbd> - 激活按钮
+  - <kbd>Escape</kbd> - 关闭对话框
+
+- **ARIA 属性**:
+  - 控制按钮上的 `aria-label`
+  - 状态更新的 `aria-live` 区域
+  - 当前队列项目的 `aria-current`
+  - 队列项目列表上的 `role="list"`
+
+- **屏幕阅读器支持**:
+  - 状态变化被宣布
+  - 进度更新被朗读
+  - 错误消息被宣布
+
+---
+
+## 相关链接
+
+- [问题中心](/features/issue-hub) - 统一的问题、队列和发现管理
+- [终端仪表板](/features/terminal) - 带集成队列面板的终端优先工作空间
+- [发现](/features/discovery) - 发现会话跟踪
+- [会话](/features/sessions) - 会话管理和详情
--- a/docs/zh/features/terminal.md
+++ b/docs/zh/features/terminal.md
@@ -0,0 +1,274 @@
+# 终端仪表板
+
+## 一句话概述
+**终端仪表板提供以终端为首的工作空间，具有可调整大小的窗格、浮动面板和用于会话监控与编排的集成工具。**
+
+---
+
+## 解决的痛点
+
+| 痛点 | 当前状态 | 终端仪表板解决方案 |
+|------|----------|---------------------|
+| **终端分散** | 多个终端窗口 | 统一的 tmux 风格网格布局 |
+| **无上下文关联** | 无法将终端输出与问题关联 | 关联高亮提供程序 |
+| **面板过多** | 固定布局浪费空间 | 浮动面板（互斥） |
+| **缺少工具** | 在应用间切换 | 集成问题、队列、检查器、调度器 |
+| **工作空间有限** | 无法同时查看代码和终端 | 可调整大小的三列布局 |
+
+---
+
+## 概述
+
+**位置**: `ccw/frontend/src/pages/TerminalDashboardPage.tsx`
+
+**用途**: 用于多终端会话管理的终端优先布局，配备集成工具和可调整大小的面板。
+
+**访问方式**: 导航 → 终端仪表板 (`/terminal-dashboard`)
+
+**布局**:
+```
+--------------------------------------------------------------------------+
+|  仪表板工具栏（面板切换、布局预设、全屏）                                    |
+--------------------------------------------------------------------------+
+|  +----------------+-------------------------------------------+------------+ |
+|  | 会话           |  终端网格（tmux 风格）               | 文件       | |
+|  | 分组树         |  +----------+  +----------+              | 侧边栏     | |
+|  | （可调整大小） |  | 终端 1   |  | 终端 2   |              |（可调整大小）| |
+|  |                |  +----------+  +----------+              |            | |
+|  |                |  +----------+  +----------+              |            | |
+|  |                |  | 终端 3   |  | 终端 4   |              |            | |
+|  |                |  +----------+  +----------+              |            | |
+|  +----------------+-------------------------------------------+------------+ |
+--------------------------------------------------------------------------+
+|  [浮动面板: 问题+队列 或 检查器 或 执行 或 调度器]                         |
+--------------------------------------------------------------------------+
+```
+
+---
+
+## 实时演示
+
+:::demo TerminalDashboardOverview #TerminalDashboardOverview.tsx :::
+
+---
+
+## 核心功能
+
+| 功能 | 描述 |
+|------|------|
+| **三列布局** | 使用 Allotment 的可调整大小窗格：会话树（左）、终端网格（中）、文件侧边栏（右） |
+| **终端网格** | Tmux 风格的分割窗格，带布局预设（单格、水平分割、垂直分割、2x2 网格） |
+| **会话分组树** | CLI 会话的分层视图，按标签分组 |
+| **浮动面板** | 互斥的叠加面板（问题+队列、检查器、执行监控器、调度器） |
+| **关联高亮** | 终端、问题和队列项之间的跨面板链接 |
+| **布局预设** | 快速布局按钮：单格窗格、水平分割、垂直分割、2x2 网格 |
+| **启动 CLI** | 用于创建新 CLI 会话的配置模态框，可选择工具、模型和设置 |
+| **全屏模式** | 沉浸模式隐藏应用框架（标题栏 + 侧边栏） |
+| **功能标志** | 面板可见性由功能标志控制（队列、检查器、执行监控器） |
+
+---
+
+## 组件层次结构
+
+```
+TerminalDashboardPage
+├── AssociationHighlightProvider（上下文）
+├── DashboardToolbar
+│   ├── 布局预设按钮（单格 | 水平分割 | 垂直分割 | 2x2 网格）
+│   ├── 面板切换（会话 | 文件 | 问题 | 队列 | 检查器 | 执行 | 调度器）
+│   ├── 全屏切换
+│   └── 启动 CLI 按钮
+├── Allotment（三列布局）
+│   ├── SessionGroupTree
+│   │   └── 会话分组项（可折叠）
+│   ├── TerminalGrid
+│   │   ├── GridGroupRenderer（递归）
+│   │   └── TerminalPane
+│   └── FileSidebarPanel
+│       └── 文件树视图
+└── FloatingPanel（多个，互斥）
+    ├── 问题+队列（分割面板）
+    │   ├── IssuePanel
+    │   └── QueueListColumn
+    ├── QueuePanel（功能标志）
+    ├── InspectorContent（功能标志）
+    ├── ExecutionMonitorPanel（功能标志）
+    └── SchedulerPanel
+```
+
+---
+
+## Props API
+
+### TerminalDashboardPage
+
+| Prop | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| - | - | - | 此页面组件不接受任何 props（状态通过 hooks 和 Zustand stores 管理） |
+
+### DashboardToolbar
+
+| Prop | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `activePanel` | `PanelId \| null` | `null` | 当前活动的浮动面板 |
+| `onTogglePanel` | `(panelId: PanelId) => void` | - | 切换面板可见性的回调 |
+| `isFileSidebarOpen` | `boolean` | `true` | 文件侧边栏可见性状态 |
+| `onToggleFileSidebar` | `() => void` | - | 切换文件侧边栏回调 |
+| `isSessionSidebarOpen` | `boolean` | `true` | 会话侧边栏可见性状态 |
+| `onToggleSessionSidebar` | `() => void` | - | 切换会话侧边栏回调 |
+| `isFullscreen` | `boolean` | `false` | 全屏模式状态 |
+| `onToggleFullscreen` | `() => void` | - | 切换全屏回调 |
+
+### FloatingPanel
+
+| Prop | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `isOpen` | `boolean` | `false` | 面板打开状态 |
+| `onClose` | `() => void` | - | 关闭回调 |
+| `title` | `string` | - | 面板标题 |
+| `side` | `'left' \| 'right'` | `'left'` | 面板侧边 |
+| `width` | `number` | `400` | 面板宽度（像素） |
+| `children` | `ReactNode` | - | 面板内容 |
+
+---
+
+## 状态管理
+
+### 本地状态
+
+| 状态 | 类型 | 描述 |
+|------|------|------|
+| `activePanel` | `PanelId \| null` | 当前活动的浮动面板（互斥） |
+| `isFileSidebarOpen` | `boolean` | 文件侧边栏可见性 |
+| `isSessionSidebarOpen` | `boolean` | 会话侧边栏可见性 |
+
+### Zustand Stores
+
+| Store | 选择器 | 用途 |
+|-------|--------|------|
+| `workflowStore` | `selectProjectPath` | 文件侧边栏的当前项目路径 |
+| `appStore` | `selectIsImmersiveMode` | 全屏模式状态 |
+| `configStore` | `featureFlags` | 功能标志配置 |
+| `terminalGridStore` | 网格布局和焦点窗格状态 |
+| `executionMonitorStore` | 活动执行计数 |
+| `queueSchedulerStore` | 调度器状态和设置 |
+
+### 面板 ID 类型
+
+```typescript
+type PanelId = 'issues' | 'queue' | 'inspector' | 'execution' | 'scheduler';
+```
+
+---
+
+## 使用示例
+
+### 基本终端仪表板
+
+```tsx
+import { TerminalDashboardPage } from '@/pages/TerminalDashboardPage'
+
+// 终端仪表板自动在 /terminal-dashboard 渲染
+// 不需要 props - 布局状态内部管理
+```
+
+### 使用 FloatingPanel 组件
+
+```tsx
+import { FloatingPanel } from '@/components/terminal-dashboard/FloatingPanel'
+import { IssuePanel } from '@/components/terminal-dashboard/IssuePanel'
+
+function CustomLayout() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <FloatingPanel
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      title="问题"
+      side="left"
+      width={700}
+    >
+      <IssuePanel />
+    </FloatingPanel>
+  )
+}
+```
+
+---
+
+## 交互演示
+
+### 布局预设演示
+
+:::demo TerminalLayoutPresets #TerminalLayoutPresets.tsx :::
+
+### 浮动面板演示
+
+:::demo FloatingPanelsDemo #FloatingPanelsDemo.tsx :::
+
+### 可调整大小窗格演示
+
+:::demo ResizablePanesDemo #ResizablePanesDemo.tsx :::
+
+---
+
+## 配置
+
+### 功能标志
+
+| 标志 | 控制 |
+|------|------|
+| `dashboardQueuePanelEnabled` | 队列面板可见性 |
+| `dashboardInspectorEnabled` | 检查器面板可见性 |
+| `dashboardExecutionMonitorEnabled` | 执行监控器面板可见性 |
+
+### 布局预设
+
+| 预设 | 布局 |
+|------|------|
+| **单格** | 一个终端窗格 |
+| **水平分割** | 两个窗格并排 |
+| **垂直分割** | 两个窗格垂直堆叠 |
+| **2x2 网格** | 2x2 网格中的四个窗格 |
+
+### 面板类型
+
+| 面板 | 内容 | 位置 | 功能标志 |
+|------|------|------|----------|
+| **问题+队列** | 组合的问题面板 + 队列列表列 | 左侧（叠加） | - |
+| **队列** | 完整的队列管理面板 | 右侧（叠加） | `dashboardQueuePanelEnabled` |
+| **检查器** | 关联链检查器 | 右侧（叠加） | `dashboardInspectorEnabled` |
+| **执行监控器** | 实时执行跟踪 | 右侧（叠加） | `dashboardExecutionMonitorEnabled` |
+| **调度器** | 队列调度器控制 | 右侧（叠加） | - |
+
+---
+
+## 可访问性
+
+- **键盘导航**:
+  - <kbd>Tab</kbd> - 在工具栏按钮之间导航
+  - <kbd>Enter</kbd>/<kbd>Space</kbd> - 激活工具栏按钮
+  - <kbd>Escape</kbd> - 关闭浮动面板
+  - <kbd>F11</kbd> - 切换全屏模式
+
+- **ARIA 属性**:
+  - 工具栏按钮上的 `aria-label`
+  - 侧边栏切换上的 `aria-expanded`
+  - 非活动浮动面板上的 `aria-hidden`
+  - 浮动面板上的 `role="dialog"`
+
+- **屏幕阅读器支持**:
+  - 切换面板时宣布面板状态
+  - 布局更改被宣布
+  - 面板打开/关闭时的焦点管理
+
+---
+
+## 相关链接
+
+- [编排器](/features/orchestrator) - 可视化工作流编辑器
+- [会话](/features/sessions) - 会话管理
+- [问题中心](/features/issue-hub) - 问题、队列、发现
+- [资源管理器](/features/explorer) - 文件资源管理器
+- [队列](/features/queue) - 队列管理独立页面
--- a/docs/zh/guide/installation.md
+++ b/docs/zh/guide/installation.md
@@ -106,13 +106,109 @@ npm install -g claude-code-workflow@latest

 ## 卸载

-```bash
-npm uninstall -g claude-code-workflow
+CCW 提供了智能卸载命令，会自动处理安装清单、孤立文件清理和全局文件保护。

-# 删除配置（可选）
-rm -rf ~/.claude
+### 使用 CCW 卸载命令（推荐）
+
+```bash
+ccw uninstall
 ```

+卸载流程：
+
+1. **扫描安装清单** - 自动检测所有已安装的 CCW 实例（Global 和 Path 模式）
+2. **交互选择** - 显示安装列表，让您选择要卸载的实例
+3. **智能保护** - 卸载 Path 模式时，如果存在 Global 安装，会自动保护全局文件（workflows、scripts、templates）
+4. **孤立文件清理** - 自动清理不再被任何安装引用的 skills 和 commands 文件
+5. **空目录清理** - 移除安装留下的空目录
+6. **Git Bash 修复移除** - Windows 上最后一个安装卸载后，询问是否移除 Git Bash 多行提示修复
+
+### 卸载输出示例
+
+```
+  Found installations:
+
+  1. Global
+     Path: /Users/username/my-project
+     Date: 2026/3/2
+     Version: 7.0.5
+     Files: 156 | Dirs: 23
+
+──────────────────────────────────────
+? Select installation to uninstall: Global - /Users/username/my-project
+? Are you sure you want to uninstall Global installation? Yes
+
+✔ Removing files...
+✔ Uninstall complete!
+
+╔══════════════════════════════════════╗
+║           Uninstall Summary          ║
+╠══════════════════════════════════════╣
+║ ✓ Successfully Uninstalled           ║
+║                                      ║
+║ Files removed: 156                   ║
+║ Directories removed: 23              ║
+║ Orphan files cleaned: 3              ║
+║                                      ║
+║ Manifest removed                     ║
+╚══════════════════════════════════════╝
+```
+
+### 手动卸载 npm 包
+
+如果需要完全移除 CCW npm 包：
+
+```bash
+# 卸载全局 npm 包
+npm uninstall -g claude-code-workflow
+```
+
+### 手动删除 CCW 文件（不推荐）
+
+如果必须手动删除，以下是 CCW 安装的具体路径：
+
+```bash
+# CCW 安装的目录（可安全删除）
+rm -rf ~/.claude/commands/ccw.md
+rm -rf ~/.claude/commands/ccw-coordinator.md
+rm -rf ~/.claude/commands/workflow
+rm -rf ~/.claude/commands/issue
+rm -rf ~/.claude/commands/cli
+rm -rf ~/.claude/commands/memory
+rm -rf ~/.claude/commands/idaw
+rm -rf ~/.claude/skills/workflow-*
+rm -rf ~/.claude/skills/team-*
+rm -rf ~/.claude/skills/review-*
+rm -rf ~/.claude/agents/team-worker.md
+rm -rf ~/.claude/agents/cli-*-agent.md
+rm -rf ~/.claude/workflows
+rm -rf ~/.claude/scripts
+rm -rf ~/.claude/templates
+rm -rf ~/.claude/manifests
+rm -rf ~/.claude/version.json
+
+# Codex 相关目录
+rm -rf ~/.codex/prompts
+rm -rf ~/.codex/skills
+rm -rf ~/.codex/agents
+
+# 其他 CLI 目录
+rm -rf ~/.gemini
+rm -rf ~/.qwen
+
+# CCW 核心目录
+rm -rf ~/.ccw
+```
+
+::: danger 危险
+**不要**执行 `rm -rf ~/.claude`，这会删除您的 Claude Code 个人配置：
+- `~/.claude/settings.json` - 您的 Claude Code 设置
+- `~/.claude/settings.local.json` - 本地覆盖设置
+- MCP 服务器配置等
+
+建议始终使用 `ccw uninstall` 进行受控卸载。
+:::
+
 ## 故障排除

 ### 权限问题
--- a/docs/zh/workflows/teams.md
+++ b/docs/zh/workflows/teams.md
@@ -0,0 +1,197 @@
+# 团队工作流
+
+CCW 提供多个支持多角色协调复杂任务的团队协作技能。
+
+## 团队技能概览
+
+| 技能 | 角色 | 流水线 | 用例 |
+|-------|-------|----------|----------|
+| **team-planex** | 3 (planner + executor) | 波浪流水线（边规划边执行） | 规划和执行并行 |
+| **team-iterdev** | 5 (generator → critic → integrator → validator) | 生成器-评论者循环 | 带反馈循环的迭代开发 |
+| **team-lifecycle-v4** | 8 (spec → architect → impl → test) | 5 阶段生命周期 | 完整规范 → 实现 → 测试工作流 |
+| **team-lifecycle-v5** | 可变 (team-worker) | 内置阶段 | 最新 team-worker 架构 |
+| **team-issue** | 6 (explorer → planner → implementer → reviewer → integrator) | 5 阶段问题解决 | 多角色问题求解 |
+| **team-testing** | 5 (strategist → generator → executor → analyst) | 4 阶段测试 | 综合测试覆盖 |
+| **team-quality-assurance** | 6 (scout → strategist → generator → executor → analyst) | 5 阶段 QA | 质量保障闭环 |
+| **team-brainstorm** | 5 (coordinator → ideator → challenger → synthesizer → evaluator) | 5 阶段头脑风暴 | 多视角创意生成 |
+| **team-uidesign** | 4 (designer → developer → reviewer) | CP-9 双轨 | UI 设计和实现并行 |
+| **team-frontend** | 6 (frontend-lead → ui-developer → ux-engineer → component-dev → qa) | 设计集成 | 带 UI/UX 集成的前端开发 |
+| **team-review** | 4 (scanner → reviewer → fixer) | 4 阶段代码审查 | 代码扫描和自动修复 |
+| **team-roadmap-dev** | 4 (planner → executor → verifier) | 分阶段执行 | 路线图驱动开发 |
+| **team-tech-debt** | 6 (scanner → assessor → planner → executor → validator) | 5 阶段清理 | 技术债务识别和解决 |
+| **team-ultra-analyze** | 5 (explorer → analyst → discussant → synthesizer) | 4 阶段分析 | 深度协作代码库分析 |
+| **team-coordinate** | 可变 | 通用协调 | 通用团队协调（旧版） |
+| **team-coordinate-v2** | 可变 (team-worker) | team-worker 架构 | 现代 team-worker 协调 |
+| **team-executor** | 可变 | 轻量级执行 | 基于会话的执行 |
+| **team-executor-v2** | 可变 (team-worker) | team-worker 执行 | 现代 team-worker 执行 |
+
+## 使用方法
+
+### 通过 /ccw 编排器
+
+```bash
+# 基于意图自动路由
+/ccw "team planex: 用户认证系统"
+/ccw "全生命周期: 通知服务开发"
+/ccw "QA 团队: 质量保障支付流程"
+
+# 基于团队的工作流
+/ccw "team brainstorm: 新功能想法"
+/ccw "team issue: 修复登录超时"
+/ccw "team testing: 测试覆盖率提升"
+```
+
+### 直接调用技能
+
+```javascript
+// 编程调用
+Skill(skill="team-lifecycle-v5", args="Build user authentication system")
+Skill(skill="team-planex", args="Implement OAuth2 with concurrent planning")
+Skill(skill="team-quality-assurance", args="Quality audit of payment system")
+
+// 带模式选择
+Skill(skill="workflow-plan", args="--mode replan")
+```
+
+### 通过 Task 工具（用于代理调用）
+
+```javascript
+// 生成团队工作器代理
+Task({
+  subagent_type: "team-worker",
+  description: "Spawn executor worker",
+  team_name: "my-team",
+  name: "executor",
+  run_in_background: true,
+  prompt: `## Role Assignment
+role: executor
+session: D:/project/.workflow/.team/my-session
+session_id: my-session
+team_name: my-team
+requirement: Implement user authentication
+inner_loop: true`
+})
+```
+
+## 检测关键词
+
+| 技能 | 关键词（英文） | 关键词（中文） |
+|-------|-------------------|----------------|
+| **team-planex** | team planex, plan execute, wave pipeline | 团队规划执行, 波浪流水线 |
+| **team-iterdev** | team iterdev, iterative development | 迭代开发团队 |
+| **team-lifecycle** | team lifecycle, full lifecycle, spec impl test | 全生命周期, 规范实现测试 |
+| **team-issue** | team issue, resolve issue, issue team | 团队 issue, issue 解决团队 |
+| **team-testing** | team test, comprehensive test, test coverage | 测试团队, 全面测试 |
+| **team-quality-assurance** | team qa, qa team, quality assurance | QA 团队, 质量保障团队 |
+| **team-brainstorm** | team brainstorm, collaborative brainstorming | 团队头脑风暴, 协作头脑风暴 |
+| **team-uidesign** | team ui design, ui design team, dual track | UI 设计团队, 双轨设计 |
+| **team-frontend** | team frontend, frontend team | 前端开发团队 |
+| **team-review** | team review, code review team | 代码审查团队 |
+| **team-roadmap-dev** | team roadmap, roadmap driven | 路线图驱动开发 |
+| **team-tech-debt** | tech debt cleanup, technical debt | 技术债务清理, 清理技术债 |
+| **team-ultra-analyze** | team analyze, deep analysis, collaborative analysis | 深度协作分析 |
+
+## 团队技能架构
+
+### 版本演进
+
+| 版本 | 架构 | 状态 |
+|---------|-------------|--------|
+| **v5** | team-worker（动态角色） | **最新** |
+| v4 | 5 阶段生命周期，内联讨论 | 稳定 |
+| v3 | 3 阶段生命周期 | 旧版 |
+| v2 | 通用协调 | 已弃用 |
+
+### v5 Team Worker 架构
+
+最新架构使用 `team-worker` 代理，基于阶段前缀进行动态角色分配：
+
+| 阶段 | 前缀 | 角色 |
+|-------|--------|------|
+| 分析 | ANALYSIS | doc-analyst |
+| 草稿 | DRAFT | doc-writer |
+| 规划 | PLAN | planner |
+| 实现 | IMPL | executor (code-developer, tdd-developer 等) |
+| 测试 | TEST | tester (test-fix-agent 等) |
+| 审查 | REVIEW | reviewer |
+
+### 角色类型
+
+| 类型 | 前缀 | 描述 |
+|------|--------|-------------|
+| **编排器** | COORD | 管理工作流，协调代理 |
+| **负责人** | SPEC, IMPL, TEST | 领导阶段，委派给工作器 |
+| **工作器** | 可变 | 执行特定任务 |
+
+## 工作流模式
+
+### 波浪流水线 (team-planex)
+
+```text
+Wave 1: Plan ──────────────────────────────────┐
+         ↓                                      │
+Wave 2: Exec  ←────────────────────────────────┘
+         ↓
+Wave 3: Plan → Exec → Plan → Exec → ...
+```
+
+规划和执行并发 - 执行者在第 N 波工作时，规划者正在规划第 N+1 波。
+
+### 生成器-评论者循环 (team-iterdev)
+
+```text
+Generator → Output → Critic → Feedback → Generator
+                ↓
+            Integrator → Validator
+```
+
+通过反馈循环进行迭代改进。
+
+### CP-9 双轨 (team-uidesign)
+
+```text
+Design Track:  Designer → Tokens → Style
+                           ↓
+Implementation Track:        Developer → Components
+                           ↓
+                      Reviewer → Verify
+```
+
+设计和实现并行的双轨进行。
+
+### 5 阶段生命周期 (team-lifecycle-v4)
+
+```text
+1. Spec Planning (coordinator + spec-lead)
+2. Architecture Design (architect)
+3. Implementation Planning (impl-lead + dev team)
+4. Test Planning (test-lead + qa-analyst)
+5. Execution & Verification (all roles)
+```
+
+线性推进所有生命周期阶段。
+
+## 何时使用各团队技能
+
+| 场景 | 推荐技能 |
+|----------|-------------------|
+| 需要并行规划和执行 | **team-planex** |
+| 带多次迭代的复杂功能 | **team-iterdev** |
+| 完整规范 → 实现 → 测试工作流 | **team-lifecycle-v5** |
+| 问题解决 | **team-issue** |
+| 综合测试 | **team-testing** |
+| 质量审计 | **team-quality-assurance** |
+| 新功能创意 | **team-brainstorm** |
+| UI 设计 + 实现 | **team-uidesign** |
+| 前端特定开发 | **team-frontend** |
+| 代码质量审查 | **team-review** |
+| 带路线图的大型项目 | **team-roadmap-dev** |
+| 技术债务清理 | **team-tech-debt** |
+| 深度代码库分析 | **team-ultra-analyze** |
+
+::: info 另请参阅
+- [技能参考](../skills/reference.md) - 所有技能文档
+- [CLI 命令](../cli/commands.md) - 命令参考
+- [代理](../agents/index.md) - 代理文档
+- [4 级工作流](./4-level.md) - 工作流系统概览
+:::