# 图标资源获取指南

## 需要的图标清单

### 1. TabBar 图标（底部导航栏）
- **device.png** - 设备图标（普通状态）
  - 搜索关键词：设备、蓝牙、bluetooth、chip、device
  - 颜色：#999999（灰色）
  - 尺寸：81px × 81px

- **device-active.png** - 设备图标（激活状态）
  - 同上图标，颜色改为：#1890ff（蓝色）

- **mine.png** - 我的图标（普通状态）
  - 搜索关键词：用户、user、个人中心、person
  - 颜色：#999999（灰色）
  - 尺寸：81px × 81px

- **mine-active.png** - 我的图标（激活状态）
  - 同上图标，颜色改为：#1890ff（蓝色）

### 2. 功能图标
- **default-avatar.png** - 默认头像
  - 搜索关键词：头像、avatar、用户头像、default avatar
  - 建议尺寸：200px × 200px
  - 颜色：浅灰色填充

- **device-empty.png** - 空状态占位图
  - 搜索关键词：空状态、empty、无数据、no data
  - 建议尺寸：300px × 300px
  - 建议：选择带有设备元素的空状态插画

- **ble-scan.png** - 蓝牙扫描图标
  - 搜索关键词：蓝牙扫描、bluetooth scan、搜索、search
  - 建议尺寸：120px × 120px
  - 颜色：#1890ff（主题蓝色）

## iconfont 使用步骤

### 1. 访问网站
https://www.iconfont.cn/

### 2. 搜索图标
- 使用上面提供的关键词搜索
- 筛选条件：
  - 类型：图标
  - 风格：线性/面性（根据喜好选择）
  - 免费：是

### 3. 选择并添加到项目
- 点击喜欢的图标
- 添加到购物车
- 创建项目：yack-mini-icons

### 4. 下载图标
- 进入项目
- 选择 PNG 格式
- 设置对应尺寸和颜色
- 批量下载

### 5. 重命名文件
下载后按照本项目的命名规范重命名：
```
下载的图标.png → device.png
下载的图标.png → device-active.png（修改颜色后再次下载）
...
```

## 通过 API 获取图标信息

iconfont.cn 提供了搜索 API，可以通过编程方式获取图标信息。

### API 端点
```
POST https://www.iconfont.cn/api/icon/search.json
```

### 请求参数

| 参数 | 类型 | 说明 | 示例 |
|------|------|------|------|
| q | string | 搜索关键词 | 蓝牙 |
| sortType | string | 排序方式 | updated_at |
| page | int | 页码 | 1 |
| pageSize | int | 每页数量 | 54 |
| sType | string | 筛选类型 | 空（全部） |
| fromCollection | int | 来源集合 | -1 |
| fills | string | 填充参数 | 空 |
| t | long | 时间戳 | 1788578495971 |
| ctoken | string | CSRF Token | null |

### 请求示例（curl）

```bash
curl 'https://www.iconfont.cn/api/icon/search.json' \
  -H 'accept: application/json, text/javascript, */*; q=0.01' \
  -H 'accept-language: zh-CN,zh;q=0.9,en;q=0.8,en-US;q=0.7' \
  -H 'content-type: application/x-www-form-urlencoded; charset=UTF-8' \
  -H 'origin: https://www.iconfont.cn' \
  -H 'referer: https://www.iconfont.cn/search/index' \
  -H 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' \
  --data-raw 'q=%E8%93%9D%E7%89%99&sortType=updated_at&page=1&pageSize=54&sType=&fromCollection=-1&fills=&t=1788578495971&ctoken=null'
```

### 响应格式

```json
{
  "code": 200,
  "data": {
    "count": 1234,
    "page": 1,
    "pageSize": 54,
    "icons": [
      {
        "id": "12345",
        "name": "蓝牙",
        "font_class": "icon-bluetooth",
        "show_svg": "<svg>...</svg>",
        "author_name": "作者名",
        "price": 0,
        "tags": ["蓝牙", "bluetooth", "设备"]
      }
    ]
  }
}
```

### 使用建议

1. **关键词搜索**：使用中文或英文关键词，如"蓝牙"、"bluetooth"
2. **URL 编码**：中文关键词需要 URL 编码（如 `%E8%93%9D%E7%89%99` 表示"蓝牙"）
3. **分页**：通过 `page` 参数获取更多结果
4. **时间戳**：`t` 参数可使用当前时间戳，防止缓存
5. **鉴权**：部分接口需要登录态，使用 Cookie 中的 `EGG_SESS_ICONFONT` 等

### 批量下载脚本示例

```javascript
// Node.js 示例：获取蓝牙相关图标
const axios = require('axios');

async function searchIcons(keyword, page = 1) {
  const params = new URLSearchParams();
  params.append('q', keyword);
  params.append('sortType', 'updated_at');
  params.append('page', page);
  params.append('pageSize', 54);
  params.append('fromCollection', -1);
  params.append('t', Date.now());
  params.append('ctoken', 'null');

  const response = await axios.post(
    'https://www.iconfont.cn/api/icon/search.json',
    params,
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'User-Agent': 'Mozilla/5.0'
      }
    }
  );

  return response.data;
}

// 使用示例
searchIcons('蓝牙').then(data => {
  console.log(`找到 ${data.data.count} 个图标`);
  data.data.icons.forEach(icon => {
    console.log(`- ${icon.name} (ID: ${icon.id})`);
  });
});
```

### 注意事项

1. **登录态**：下载 SVG 或 PNG 可能需要登录态
2. **版权**：部分图标需要付费或遵守商用许可
3. **频率限制**：避免高频请求，建议间隔 1-2 秒
4. **Cookie 失效**：长时间使用需重新获取登录态
5. **官方推荐**：推荐使用网页界面或官方工具进行批量下载

## 替代方案

### 如果找不到合适的图标，可以使用：

1. **微信官方图标库**
   - WeUI 图标库：https://weui.io/
   - 提供了标准的小程序图标

2. **Ant Design 图标库**
   - https://ant.design/components/icon-cn/
   - 有丰富的图标资源

3. **Font Awesome**
   - https://fontawesome.com/
   - 国际知名图标库

## 颜色值参考

```css
/* 主题色 */
--primary-color: #1890ff;

/* TabBar 普通状态 */
--tabbar-normal: #999999;

/* TabBar 激活状态 */
--tabbar-active: #1890ff;

/* 辅助灰色 */
--gray-light: #f5f5f5;
```