# ZCLAW UI/UX 一致性优化计划

## Context

ZCLAW 桌面应用需要统一配色方案。用户选择**中性灰色系**作为品牌主色调，简洁低调，彩色仅作为强调色使用。此计划旨在统一配色方案和交互样式，提升品牌一致性。

## 目标设计系统

**主色调:** 中性灰色系 `#374151` (gray-700) - 简洁、低调
**强调色:** 橙色 `#f97316` 仅用于重要提醒和特殊强调
**语义色:** success(green), warning(yellow), error(red), info(blue) - 保持不变
**暗色模式:** 通过 `.dark` class 切换

## 核心问题

### 1. 主按钮颜色不一致
| 文件 | 当前 | 应改为 |
|------|------|--------|
| HandsPanel.tsx | `bg-blue-600` | `bg-gray-700 dark:bg-gray-600` |
| AutomationPanel.tsx | `bg-blue-600` | `bg-gray-700 dark:bg-gray-600` |
| TeamList.tsx | `bg-blue-500` | `bg-gray-700 dark:bg-gray-600` |
| SkillMarket.tsx | `bg-blue-500` | `bg-gray-700 dark:bg-gray-600` |
| WorkflowEditor.tsx | `bg-blue-600` | `bg-gray-700 dark:bg-gray-600` |
| HandParamsForm.tsx | `bg-blue-600` | `bg-gray-700 dark:bg-gray-600` |
| BrowserHandCard.tsx | `bg-blue-600` | `bg-gray-700 dark:bg-gray-600` |

### 2. 焦点环颜色不一致
| 文件 | 当前 | 应改为 |
|------|------|--------|
| Sidebar.tsx:75 | `focus:ring-emerald-500` | `focus:ring-gray-500` |
| TeamList.tsx | `focus:ring-blue-500` | `focus:ring-gray-500` |
| SkillMarket.tsx | `focus:ring-purple-500` | `focus:ring-gray-500` |
| WorkflowEditor.tsx | `focus:ring-blue-500` | `focus:ring-gray-500` |
| HandParamsForm.tsx | `focus:ring-blue-500` | `focus:ring-gray-500` |

### 3. 装饰性颜色过于花哨
- 用户头像渐变: `from-emerald-400 to-cyan-500` → 简化为纯色 `bg-gray-600`
- "新对话"图标: `text-emerald-500` → `text-gray-600`

---

## Implementation Plan

### Phase 1: 设计系统更新

**文件:** `desktop/src/index.css`

更新品牌色为灰色系:
```css
/* 品牌色 - 中性灰 */
--color-primary: #374151;           /* gray-700 */
--color-primary-hover: #1f2937;     /* gray-800 */
--color-primary-light: #f3f4f6;     /* gray-100 */

/* 强调色 - 仅用于重要提醒 */
--color-accent: #f97316;            /* orange-500 */
--color-accent-hover: #ea580c;      /* orange-600 */
```

**文件:** `desktop/tailwind.config.js`

确保 primary 色映射到新的灰色系。

---

### Phase 2: 核心组件修复

#### 2.1 Sidebar.tsx
- [ ] 第 75 行: `focus:ring-emerald-500` → `focus:ring-gray-500`
- [ ] 第 94 行: `text-emerald-500` → `text-gray-600`
- [ ] 第 153 行: 用户头像渐变 → `bg-gray-600`

#### 2.2 TeamList.tsx
- [ ] 创建按钮: `bg-blue-500` → `bg-gray-700 dark:bg-gray-600`
- [ ] 输入框焦点: `focus:ring-blue-500` → `focus:ring-gray-500`

#### 2.3 AutomationPanel.tsx
- [ ] 主操作按钮: `bg-blue-600` → `bg-gray-700 dark:bg-gray-600`
- [ ] 对话框按钮: 统一使用灰色系

#### 2.4 HandsPanel.tsx
- [ ] 激活按钮: `bg-blue-600` → `bg-gray-700 dark:bg-gray-600`
- [ ] 详情按钮: 统一使用灰色系

#### 2.5 SkillMarket.tsx
- [ ] 安装按钮: `bg-blue-500` → `bg-gray-700 dark:bg-gray-600`
- [ ] 搜索框焦点: `focus:ring-purple-500` → `focus:ring-gray-500`

#### 2.6 WorkflowEditor.tsx
- [ ] 保存按钮: `bg-blue-600` → `bg-gray-700 dark:bg-gray-600`
- [ ] 输入框焦点: `focus:ring-blue-500` → `focus:ring-gray-500`

#### 2.7 HandParamsForm.tsx
- [ ] 保存预设按钮: `bg-blue-600` → `bg-gray-700 dark:bg-gray-600`
- [ ] 输入框焦点: `focus:ring-blue-500` → `focus:ring-gray-500`

#### 2.8 BrowserHandCard.tsx
- [ ] 执行按钮: `bg-blue-600` → `bg-gray-700 dark:bg-gray-600`

---

### Phase 3: 遗留样式清理

**文件:** `desktop/src/App.css`

- [ ] 移除与设计系统冲突的按钮/输入框样式
- [ ] 移除重复的颜色定义
- [ ] 保留必要的布局样式

---

## Files to Modify

| Priority | File | Changes |
|----------|------|---------|
| 1 | `desktop/src/index.css` | 添加渐变变量和工具类 |
| 2 | `desktop/tailwind.config.js` | 扩展主题配置 |
| 3 | `desktop/src/components/Sidebar.tsx` | 焦点环、图标颜色、头像渐变 |
| 4 | `desktop/src/components/TeamList.tsx` | 按钮颜色、焦点环 |
| 5 | `desktop/src/components/Automation/AutomationPanel.tsx` | 按钮颜色 |
| 6 | `desktop/src/components/HandsPanel.tsx` | 按钮颜色 |
| 7 | `desktop/src/components/SkillMarket.tsx` | 按钮颜色、焦点环 |
| 8 | `desktop/src/components/WorkflowEditor.tsx` | 按钮颜色、焦点环 |
| 9 | `desktop/src/components/HandParamsForm.tsx` | 按钮颜色、焦点环 |
| 10 | `desktop/src/components/BrowserHand/BrowserHandCard.tsx` | 按钮颜色 |
| 11 | `desktop/src/App.css` | 清理遗留样式 |

---

## Verification

### 自动验证
```bash
pnpm tsc --noEmit
pnpm vitest run
```

### 人工验证清单
- [ ] 所有主操作按钮使用灰色系 (gray-700/gray-600)
- [ ] 所有焦点环使用灰色 (gray-500)
- [ ] 用户头像使用纯灰色 (无渐变)
- [ ] "新对话"图标使用灰色
- [ ] 暗色模式下样式正确
- [ ] 语义色 (success/warning/error/info) 保持不变
- [ ] 无视觉退化:
  - [ ] 侧边栏导航
  - [ ] 自动化面板
  - [ ] Hands 面板
  - [ ] 技能市场
  - [ ] 团队列表
  - [ ] 工作流编辑器

---

## Estimated Effort

| Phase | Files | Effort |
|-------|-------|--------|
| Phase 1 | 2 | 30 min |
| Phase 2 | 8 | 2 hours |
| Phase 3 | 1 | 20 min |
| Verification | - | 30 min |
| **Total** | **11** | **~3.5 hours** |