# 图标文件使用指南

## 📋 项目中使用的图标文件

### 1. TabBar 底部导航图标（必需）

在 `pages.json` 中配置的 TabBar 需要以下 6 个图标文件：

| 图标名称 | 用途 | 路径 |
|---------|------|------|
| `home.png` | 首页（未选中） | `static/tabbar/home.png` |
| `home-active.png` | 首页（选中） | `static/tabbar/home-active.png` |
| `add.png` | 记账（未选中） | `static/tabbar/add.png` |
| `add-active.png` | 记账（选中） | `static/tabbar/add-active.png` |
| `statistics.png` | 统计（未选中） | `static/tabbar/statistics.png` |
| `statistics-active.png` | 统计（选中） | `static/tabbar/statistics-active.png` |

**图标规格**：
- 尺寸：81px × 81px（@2x）或 40px × 40px（@1x）
- 格式：PNG（支持透明背景）
- 颜色：
  - 未选中：#7A7E83（灰色）
  - 选中：#667eea（紫色）

### 2. 分类图标（使用 Emoji，无需文件）

代码中使用 Emoji 作为分类图标，例如：
- 📦 默认分类
- 🍔 餐饮
- 👕 服装
- 🏠 住房
- 🚗 交通
- 等等...

这些图标存储在数据库中，不需要图标文件。

### 3. 功能图标（使用 Emoji，无需文件）

- 📷 上传图片图标（在 OCR 页面）

## 🚀 快速获取图标的方法

### 方法1：使用在线图标库（推荐）

#### IconFont（阿里巴巴图标库）
1. 访问：https://www.iconfont.cn/
2. 注册/登录账号
3. 搜索关键词：
   - "首页" 或 "home"
   - "添加" 或 "add" 或 "plus"
   - "统计" 或 "statistics" 或 "chart"
4. 选择图标，点击下载
5. 选择 PNG 格式，尺寸选择 81×81
6. 下载后重命名并放入 `static/tabbar/` 目录

#### Flaticon
1. 访问：https://www.flaticon.com/
2. 搜索图标
3. 下载 PNG 格式（免费账号需要注明来源）

### 方法2：使用 AI 生成图标

使用 ChatGPT、Midjourney 等 AI 工具生成图标：

**提示词示例**：
```
生成一个简单的首页图标，极简风格，紫色主题，透明背景，81x81像素，PNG格式
```

### 方法3：临时解决方案（使用文字图标）

如果暂时没有图标文件，可以修改 `pages.json`，移除图标路径，只显示文字：

```json
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
        // 移除 iconPath 和 selectedIconPath
      }
    ]
  }
}
```

### 方法4：使用 uni-app 内置图标

uni-app 支持使用字体图标，可以集成 iconfont：

1. 访问 https://www.iconfont.cn/
2. 创建项目，添加图标
3. 下载字体文件
4. 在项目中引入字体文件
5. 使用类名引用图标

## 📥 推荐的免费图标资源

1. **IconFont** - https://www.iconfont.cn/
   - 中文界面，搜索方便
   - 免费使用，需登录

2. **Flaticon** - https://www.flaticon.com/
   - 图标丰富
   - 免费使用需注明来源

3. **Icons8** - https://icons8.com/
   - 图标质量高
   - 部分免费

4. **Material Icons** - https://fonts.google.com/icons
   - Google 官方图标库
   - 完全免费

5. **Font Awesome** - https://fontawesome.com/
   - 图标库丰富
   - 部分免费

## 🎨 图标设计建议

### 风格统一
- 所有图标使用相同的设计风格
- 线条粗细一致
- 圆角或直角统一

### 颜色方案
- 未选中：灰色（#7A7E83）
- 选中：紫色（#667eea，与主题色一致）

### 尺寸规范
- TabBar 图标：81px × 81px（@2x）
- 确保图标在选中和未选中状态下清晰可辨

## ⚠️ 注意事项

1. **文件路径**：图标文件必须放在 `static/tabbar/` 目录下
2. **文件命名**：文件名必须与 `pages.json` 中的配置完全一致（区分大小写）
3. **文件格式**：使用 PNG 格式，支持透明背景
4. **文件大小**：建议单个图标文件不超过 50KB
5. **缺失处理**：如果图标文件不存在，TabBar 可能无法正常显示

## 🔧 快速测试

创建占位图标文件进行测试：

1. 创建 6 个 81×81px 的纯色 PNG 图片
2. 未选中状态使用灰色，选中状态使用紫色
3. 放入 `static/tabbar/` 目录
4. 运行项目查看效果

## 📝 图标文件清单

请确保以下文件存在：

```
frontend/static/tabbar/
├── home.png              ✅ 需要创建
├── home-active.png       ✅ 需要创建
├── add.png               ✅ 需要创建
├── add-active.png        ✅ 需要创建
├── statistics.png        ✅ 需要创建
└── statistics-active.png ✅ 需要创建
```

## 💡 快速开始

**最快的方式**：
1. 访问 https://www.iconfont.cn/
2. 搜索并下载 6 个图标（首页、添加、统计各 2 个）
3. 重命名为对应文件名
4. 放入 `static/tabbar/` 目录
5. 完成！