ai-write/docs/REDISIGN_TODO.md

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
• 内置加载状态

示例:

<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	✅ 已完成	Claude	2025-01-12
ArticleRewritePanel.vue	18+	✅ 已完成	Claude	2025-01-12
MaterialsPanel.vue	3	✅ 已完成	Claude	2025-01-12
SettingsPanel.vue	10	✅ 已完成	Claude	2025-01-12
ComparePanel.vue	25+	✅ 已完成	Claude	2025-01-12
ParadigmWriterPanel.vue	8	✅ 已完成	Claude	2025-01-12
DiffAnnotationPanel.vue	6	✅ 已完成	Claude	2025-01-12
ParadigmSelectorModal.vue	5	✅ 已完成	Claude	2025-01-12
DocumentVersionPanel.vue	4	✅ 已完成	Claude	2025-01-12
WriterPanel.vue	4	✅ 已完成	Claude	2025-01-12
RequirementParserPanel.vue	5	✅ 已完成	Claude	2025-01-12
MaterialSelectorModal.vue	1	✅ 已完成	Claude	2025-01-12
DocumentSelectorModal.vue	3	✅ 已完成	Claude	2025-01-12

图例:

• ⏳ 待开始
• 🔄 进行中
• ✅ 已完成
• ❌ 有问题

---

参考资料

• 图标系统使用指南
• 组件重设计示例
• 设计令牌系统

---

最后更新: 2025-01-12 总计组件: 16 总计 emoji: 100+ 处 已完成: 100+ 处 (16/16 组件) - 100% 完成！ 待完成: 0 处 预计工作量: ✅ 全部完成！