6f72442531
Major changes: - Shift from "OpenFang desktop client" to "independent AI Agent desktop app" - Add decision principle: "Is this useful for ZCLAW? Does it affect ZCLAW?" - Simplify project structure and tech stack sections - Replace OpenClaw vs OpenFang comparison with unified backend approach - Consolidate troubleshooting from scattered sections into organized FAQ - Update Hands system documentation with 8 capabilities and status - Stream
164 lines
5.4 KiB
Markdown
164 lines
5.4 KiB
Markdown
# 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** |
|