AI-accounting-soft-uniApp/static/tabbar/README.md

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 使用文字图标：

{
  "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 可能无法正常显示