# TabBar 图标文件说明

## 需要的图标文件

本项目需要以下 6 个图标文件用于底部导航栏（TabBar）：

### 1. 首页图标
- `home.png` - 未选中状态的首页图标
- `home-active.png` - 选中状态的首页图标

### 2. 记账图标
- `add.png` - 未选中状态的记账图标
- `add-active.png` - 选中状态的记账图标

### 3. 统计图标
- `statistics.png` - 未选中状态的统计图标
- `statistics-active.png` - 选中状态的统计图标

## 图标规格要求

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

## 如何获取图标

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

1. **IconFont（阿里巴巴图标库）**
   - 访问：https://www.iconfont.cn/
   - 搜索关键词：首页、home、记账、add、统计、statistics
   - 下载 PNG 格式，选择合适尺寸

2. **Flaticon**
   - 访问：https://www.flaticon.com/
   - 搜索并下载免费图标

3. **Icons8**
   - 访问：https://icons8.com/
   - 搜索并下载图标

### 方法2：使用在线图标生成器

1. **Canva**
   - 访问：https://www.canva.com/
   - 创建 81×81px 的画布
   - 设计图标并导出为 PNG

2. **Figma**
   - 使用 Figma 设计图标
   - 导出为 PNG 格式

### 方法3：使用 AI 生成

使用 AI 工具（如 Midjourney、DALL-E）生成图标：
- 提示词示例："simple icon home house, minimal style, purple color, transparent background, 81x81px"

### 方法4：使用 Emoji（临时方案）

如果暂时没有图标文件，可以：
1. 使用系统字体图标
2. 或者暂时移除 tabBar 配置，使用其他导航方式

## 快速获取方案

### 使用 uni-app 官方图标

uni-app 提供了内置图标，可以修改 `pages.json` 使用文字图标：

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

### 使用字体图标

可以使用 iconfont 字体图标库，将图标转换为字体文件使用。

## 图标命名规范

请确保图标文件命名与 `pages.json` 中的配置一致：

```
static/tabbar/
├── home.png
├── home-active.png
├── add.png
├── add-active.png
├── statistics.png
└── statistics-active.png
```

## 注意事项

1. 图标文件必须放在 `static/tabbar/` 目录下
2. 文件名必须与 `pages.json` 中的配置完全一致
3. 建议使用 @2x 尺寸（81px）以获得更好的显示效果
4. 如果图标文件不存在，tabBar 可能无法正常显示