6.8 KiB
6.8 KiB
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-2 个组件
- 按照
COMPONENT_REDESIGN_EXAMPLES.md迁移 - 本地测试功能正常
- 提交代码并推送
- 更新本文档的完成状态
代码审查要点
- 图标使用符合规范
- 间距使用设计令牌
- 颜色使用设计令牌
- 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 | 8 | ⏳ 待开始 | - | - |
| MaterialsPanel.vue | 3 | ⏳ 待开始 | - | - |
| SettingsPanel.vue | 3 | ⏳ 待开始 | - | - |
| ComparePanel.vue | 9 | ⏳ 待开始 | - | - |
| ParadigmWriterPanel.vue | 4 | ⏳ 待开始 | - | - |
| DiffAnnotationPanel.vue | 2 | ⏳ 待开始 | - | - |
| ParadigmSelectorModal.vue | 1 | ⏳ 待开始 | - | - |
| DocumentVersionPanel.vue | 1 | ⏳ 待开始 | - | - |
图例:
- ⏳ 待开始
- 🔄 进行中
- ✅ 已完成
- ❌ 有问题
参考资料
最后更新: 2025-01-12 总计组件: 12 总计 emoji: 61 处 已完成: 52 处 (4/12 组件) 待完成: 9 处 (8/12 组件) 预计工作量: 3-5 天