zclaw_openfang/plans/harmonic-churning-falcon.md

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

更新品牌色为灰色系:

/* 品牌色 - 中性灰 */
--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

自动验证

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