175 lines
4.7 KiB
Markdown
175 lines
4.7 KiB
Markdown
# 图标文件使用指南
|
||
|
||
## 📋 项目中使用的图标文件
|
||
|
||
### 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. 完成！
|
||
|