ai-write/docs/ICON_SYSTEM.md

# 图标系统使用指南

## 概述

本项目使用 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` | 列表 | 📋 |
| `star` | 星标/收藏 | ⭐ |
| `lightbulb` | 灯泡/提示 | 💡 |
| `pin` | 图钉/固定 | 📌 |
| `clipboard` | 剪贴板 | 📋 |
| `microphone` | 麦克风 | 🎙️ |
| `bookmark` | 书签 | 🔖 |

## 迁移示例

### 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>
```