# UI 重新设计 - 组件迁移任务清单

本文档列出了需要从 emoji 迁移到 SVG 图标的所有组件和任务。

## 组件迁移优先级

### 🔴 高优先级（核心导航和常用功能）

#### 1. GlobalSidebar.vue
**emoji 数量**: 4
**图标映射**:
- ✍️ → `edit`
- 📊 → `analysis`
- 📝 → `article`
- ⚙️ → `settings`

**任务**:
- [ ] 导入 IconLibrary
- [ ] 替换所有导航项图标
- [ ] 优化激活状态样式
- [ ] 添加 hover 反馈

---

#### 2. MainContent.vue
**emoji 数量**: 14
**图标映射**:
- 📋 → `copy`
- 🗑️ → `trash` / `delete`
- 🧠 → `sparkles` (AI 思考)
- 🔍 → `search` (质检)
- ✅ → `check`
- ⚠️ → `warning`
- ❌ → `error`
- 📄 → `document`
- ✨ → `sparkles`

**任务**:
- [ ] 替换工具栏按钮图标
- [ ] 替换空状态图标
- [ ] 替换状态指示器图标
- [ ] 优化按钮样式统一

---

#### 3. DocumentsPanel.vue
**emoji 数量**: 3
**图标映射**:
- 📂 → `folder`
- 💾 → `save`
- 📋 → `copy`

**任务**:
- [ ] 更新头部图标
- [ ] 更新工具栏按钮
- [ ] 统一按钮样式

---

### 🟡 中优先级（面板和功能页）

#### 4. AnalysisPanel.vue
**emoji 数量**: 9
**图标映射**:
- 📊 → `chart`
- ✨ → `sparkles`
- 🔍 → `search`
- ✅ → `check`
- ⚠️ → `warning`

**任务**:
- [ ] 导入 IconLibrary
- [ ] 替换所有图标
- [ ] 更新空状态设计

---

#### 5. ArticleRewritePanel.vue
**emoji 数量**: 8
**图标映射**:
- 📝 → `edit`
- 🔍 → `search`
- ✨ → `sparkles`
- ✅ → `check`

**任务**:
- [ ] 替换流程步骤图标
- [ ] 更新按钮图标
- [ ] 优化加载状态

---

#### 6. MaterialsPanel.vue
**emoji 数量**: 3
**图标映射**:
- 📚 → `folder`
- 📊 → `chart`
- ➕ → `add`

**任务**:
- [ ] 更新头部和按钮图标
- [ ] 优化卡片设计

---

#### 7. SettingsPanel.vue
**emoji 数量**: 3
**图标映射**:
- ⚙️ → `settings`
- 📊 → `chart`
- 📚 → `folder`
- 💾 → `save`
- 📥 → `download`
- 📤 → `upload` (如果有)

**任务**:
- [ ] 替换区块标题图标
- [ ] 更新操作按钮图标

---

### 🟢 低优先级（次要功能）

#### 8. ComparePanel.vue
**emoji 数量**: 9
**图标映射**:
- ⚖️ → `compare`
- 📝 → `edit`

**任务**:
- [ ] 替换对比工具图标
- [ ] 优化差异显示

---

#### 9. ParadigmWriterPanel.vue
**emoji 数量**: 4
**图标映射**:
- 📝 → `edit`
- ✨ → `sparkles`

**任务**:
- [ ] 更新进度指示器
- [ ] 优化章节卡片

---

#### 10. DiffAnnotationPanel.vue
**emoji 数量**: 2
**图标映射**:
- 📝 → `edit`
- 🔍 → `search`

**任务**:
- [ ] 更新工具栏图标

---

#### 11. ParadigmSelectorModal.vue
**emoji 数量**: 1
**图标映射**:
- 根据具体内容确定

**任务**:
- [ ] 更新范式列表图标

---

#### 12. DocumentVersionPanel.vue
**emoji 数量**: 1
**图标映射**:
- 根据具体内容确定

**任务**:
- [ ] 更新版本历史图标

---

## 通用样式任务

### 按钮组件统一

创建可复用的按钮组件：

**文件**: `src/components/BaseButton.vue`

**功能**:
- [ ] 支持图标 + 文字组合
- [ ] 支持纯图标模式
- [ ] 支持多种变体：primary, secondary, danger, ghost
- [ ] 支持多种尺寸：sm, md, lg
- [ ] 内置加载状态

**示例**:
```vue
<BaseButton variant="primary" size="md" icon="save">
  保存文档
</BaseButton>

<BaseButton variant="danger" size="sm" icon="trash" icon-only />
```

---

### 状态指示器组件

**文件**: `src/components/StatusBadge.vue`

**功能**:
- [ ] 支持 info, success, warning, error 状态
- [ ] 使用 SVG 图标而非 emoji
- [ ] 一致的样式和间距

---

### 空状态组件

**文件**: `src/components/EmptyState.vue`

**功能**:
- [ ] 支持自定义图标和文字
- [ ] 支持操作按钮
- [ ] 统一的视觉风格

---

## 设计系统优化

### 颜色对比度检查

- [ ] 验证所有文本颜色符合 WCAG AA 标准
- [ ] 确保深色模式下对比度足够
- [ ] 优化边框和分隔线可见性

### 间距系统审查

- [ ] 统一使用 `var(--space-*)` 令牌
- [ ] 确保组件间距一致
- [ ] 优化移动端间距

### 字体规范化

- [ ] 统一使用设计令牌中的字号
- [ ] 规范字重使用场景
- [ ] 优化行高和字间距

---

## 测试清单

### 功能测试

- [ ] 所有图标正确显示
- [ ] 所有按钮可点击且状态正确
- [ ] hover 和 active 状态正常
- [ ] 加载状态显示正确

### 视觉回归测试

- [ ] 对比迁移前后截图
- [ ] 检查布局是否一致
- [ ] 验证间距和对齐
- [ ] 确认颜色使用正确

### 浏览器兼容性

- [ ] Chrome 测试
- [ ] Firefox 测试
- [ ] Safari 测试
- [ ] Edge 测试

### 响应式测试

- [ ] 桌面端 (1920px+)
- [ ] 笔记本 (1280-1440px)
- [ ] 平板 (768-1024px)
- [ ] 移动端 (<768px)

---

## 实施建议

### 分阶段迁移

**第 1 周**: 高优先级组件
- GlobalSidebar.vue
- MainContent.vue
- DocumentsPanel.vue

**第 2 周**: 中优先级组件
- AnalysisPanel.vue
- ArticleRewritePanel.vue
- MaterialsPanel.vue
- SettingsPanel.vue

**第 3 周**: 低优先级组件
- 剩余所有组件
- 通用组件开发
- 设计系统优化

### 每日工作流程

1. 选择 1-2 个组件
2. 按照 `COMPONENT_REDESIGN_EXAMPLES.md` 迁移
3. 本地测试功能正常
4. 提交代码并推送
5. 更新本文档的完成状态

### 代码审查要点

- [ ] 图标使用符合规范
- [ ] 间距使用设计令牌
- [ ] 颜色使用设计令牌
- [ ] hover/focus 状态完整
- [ ] 可访问性（aria-label）
- [ ] 响应式适配

---

## 进度跟踪

| 组件 | emoji 数量 | 状态 | 负责人 | 完成日期 |
|------|-----------|------|--------|----------|
| GlobalSidebar.vue | 10 | ✅ 已完成 | Claude | 2025-01-12 |
| MainContent.vue | 27 | ✅ 已完成 | Claude | 2025-01-12 |
| DocumentsPanel.vue | 6 | ✅ 已完成 | Claude | 2025-01-12 |
| AnalysisPanel.vue | 9 | ⏳ 待开始 | - | - |
| ArticleRewritePanel.vue | 8 | ⏳ 待开始 | - | - |
| MaterialsPanel.vue | 3 | ⏳ 待开始 | - | - |
| SettingsPanel.vue | 3 | ⏳ 待开始 | - | - |
| ComparePanel.vue | 9 | ⏳ 待开始 | - | - |
| ParadigmWriterPanel.vue | 4 | ⏳ 待开始 | - | - |
| DiffAnnotationPanel.vue | 2 | ⏳ 待开始 | - | - |
| ParadigmSelectorModal.vue | 1 | ⏳ 待开始 | - | - |
| DocumentVersionPanel.vue | 1 | ⏳ 待开始 | - | - |

**图例**:
- ⏳ 待开始
- 🔄 进行中
- ✅ 已完成
- ❌ 有问题

---

## 参考资料

- [图标系统使用指南](./ICON_SYSTEM.md)
- [组件重设计示例](./COMPONENT_REDESIGN_EXAMPLES.md)
- [设计令牌系统](../src/styles/design-tokens.css)

---

**最后更新**: 2025-01-12
**总计组件**: 12
**总计 emoji**: 61 处
**已完成**: 43 处 (3/12 组件)
**待完成**: 18 处 (9/12 组件)
**预计工作量**: 1 周