AI-accounting-soft-uniApp/ICONS_GUIDE.md

图标文件使用指南

📋 项目中使用的图标文件

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，移除图标路径，只显示文字：

{
  "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. 完成！