feat: 添加 SVG 图标系统替代 emoji

**新增内容**:
- BaseIcon.vue: 基础图标组件
- IconLibrary.vue: 图标库组件，包含 40+ 常用图标
- ICON_SYSTEM.md: 图标系统使用指南
- COMPONENT_REDESIGN_EXAMPLES.md: 组件重设计示例文档

**图标覆盖范围** (40+ 图标):
- 写作相关: edit, file-text, document, article
- 数据素材: database, folder, chart
- 设置工具: settings, gear
- 操作: save, copy, trash, delete, close, check
- 导航: home, menu, sidebar
- 搜索筛选: search, filter
- 状态通知: warning, error, info, success
- 分析比较: compare, analysis, sparkles
- 时间历史: history, clock
- 添加移除: add, plus, minus, expand, collapse
- 其他: download, upload, refresh, loading, list

**设计原则**:
- 使用 SVG stroke 图标，统一视觉风格
- 图标继承父元素颜色 (currentColor)
- 支持 16-48px 尺寸范围
- 完全替代 emoji，提升专业性

**使用方式**:
```vue
<IconLibrary name="save" :size="20" />
```

**后续任务**:
- [ ] 逐个组件迁移，移除 61 处 emoji
- [ ] 应用统一的按钮样式
- [ ] 优化交互反馈
- [ ] 测试响应式布局

Co-Authored-By: Claude <noreply@anthropic.com>

docs/ICON_SYSTEM.md

@@ -0,0 +1,230 @@
+# 图标系统使用指南
+
+## 概述
+
+本项目使用 SVG 图标替代 emoji，提供更专业、统一的视觉体验。
+
+## 使用方法
+
+### 方式一：使用 IconLibrary 组件（推荐）
+
+```vue
+<script setup>
+import IconLibrary from '@/components/icons/IconLibrary.vue'
+</script>
+
+<template>
+  <!-- 基本使用 -->
+  <IconLibrary name="edit" :size="20" />
+
+  <!-- 不同尺寸 -->
+  <IconLibrary name="save" :size="16" />
+  <IconLibrary name="delete" :size="24" />
+
+  <!-- 配合文本 -->
+  <button class="btn">
+    <IconLibrary name="save" :size="16" />
+    <span>保存</span>
+  </button>
+</template>
+```
+
+### 方式二：直接使用 SVG
+
+```vue
+<template>
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+  </svg>
+</template>
+```
+
+## 可用图标列表
+
+### 写作相关
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `edit` | 编辑/写作 | ✏️ |
+| `file-text` | 文档 | 📄 |
+| `document` | 文件 | 📝 |
+| `article` | 文章 | 📰 |
+| `format-text` | 文本格式 | 📃 |
+
+### 数据和素材
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `database` | 数据库 | 🗄️ |
+| `folder` | 文件夹 | 📁 |
+| `chart` | 图表 | 📊 |
+
+### 设置和工具
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `settings` | 设置 | ⚙️ |
+| `gear` | 齿轮 | 🔧 |
+
+### 操作
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `save` | 保存 | 💾 |
+| `copy` | 复制 | 📋 |
+| `trash` | 删除 | 🗑️ |
+| `delete` | 删除 | ❌ |
+| `close` | 关闭 | ✕ |
+| `check` | 确认 | ✅ |
+
+### 导航
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `home` | 首页 | 🏠 |
+| `menu` | 菜单 | 📋 |
+| `sidebar` | 侧边栏 | 📂 |
+
+### 搜索和筛选
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `search` | 搜索 | 🔍 |
+| `filter` | 筛选 | 🔎 |
+
+### 状态和通知
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `warning` | 警告 | ⚠️ |
+| `error` | 错误 | ❌ |
+| `info` | 信息 | ℹ️ |
+| `success` | 成功 | ✅ |
+
+### 分析和比较
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `compare` | 对比 | ⚖️ |
+| `analysis` | 分析 | 📈 |
+| `sparkles` | AI/魔法 | ✨ |
+
+### 时间和历史
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `history` | 历史 | 🕐 |
+| `clock` | 时间 | ⏰ |
+
+### 添加和移除
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `add` / `plus` | 添加 | ➕ |
+| `minus` | 减少 | ➖ |
+| `expand` | 展开 | ⬇️ |
+| `collapse` | 折叠 | ⬆️ |
+
+### 其他
+| 图标名称 | 说明 | 替代的 emoji |
+|---------|------|-------------|
+| `download` | 下载 | 📥 |
+| `upload` | 上传 | 📤 |
+| `refresh` | 刷新 | 🔄 |
+| `loading` | 加载中 | ⏳ |
+| `list` | 列表 | 📋 |
+
+## 迁移示例
+
+### Before (使用 emoji)
+
+```vue
+<button class="btn">
+  💾 保存
+</button>
+
+<div class="panel">
+  ⚙️ 设置
+</div>
+```
+
+### After (使用 SVG 图标)
+
+```vue
+<button class="btn">
+  <IconLibrary name="save" :size="16" />
+  <span>保存</span>
+</button>
+
+<div class="panel">
+  <IconLibrary name="settings" :size="20" />
+  <span>设置</span>
+</div>
+```
+
+## 样式建议
+
+### 图标尺寸
+
+```css
+/* 按钮内图标 */
+.btn-icon { size: 16px; }
+
+/* 标题图标 */
+.title-icon { size: 20px; }
+
+/* 大图标 */
+.large-icon { size: 24px; }
+```
+
+### 图标间距
+
+```vue
+<!-- 图标与文字之间留有空隙 -->
+<button class="btn">
+  <IconLibrary name="save" :size="16" />
+  <span class="ml-2">保存</span>
+</button>
+```
+
+### 图标颜色
+
+图标默认使用 `currentColor`，会继承父元素的 `color` 属性：
+
+```css
+/* 主要操作图标 */
+.btn-primary .icon {
+  color: var(--accent-primary);
+}
+
+/* 危险操作图标 */
+.btn-danger .icon {
+  color: var(--accent-danger);
+}
+```
+
+## 添加新图标
+
+如果需要添加新图标，请按以下步骤：
+
+1. 在 `IconLibrary.vue` 的 `icons` 对象中添加新图标
+2. 提供 SVG path 数据
+3. 更新此文档
+
+```javascript
+'your-icon': {
+  paths: ['M12 2L2 22h20L12 2z'], // 示例 path
+  viewBox: '0 0 24 24'
+}
+```
+
+## 注意事项
+
+1. **一致性**：在整个应用中使用相同的图标系统
+2. **语义化**：选择符合用户预期的图标
+3. **尺寸**：保持相近场景的图标尺寸一致
+4. **对齐**：使用 `flex` 布局确保图标与文本正确对齐
+5. **可访问性**：为图标提供 `aria-label` 或配合文字使用
+
+```vue
+<!-- 推荐：图标 + 文字 -->
+<button>
+  <IconLibrary name="save" :size="16" aria-hidden="true" />
+  <span>保存</span>
+</button>
+
+<!-- 如需单独使用，添加 aria-label -->
+<button aria-label="保存文档">
+  <IconLibrary name="save" :size="20" />
+</button>
+```