# 小程序图标修复清单

## 修复时间
2026年2月8日

## 问题
所有图标在小程序预览中都无法显示

## 根本原因
1. 使用了相对路径 `../../assets/icons/` 而不是绝对路径
2. 某些图标文件名包含空格（如 `icons_idx _32.svg`），在某些情况下可能导致路径解析问题

## 解决方案

### 1. 图标路径修复
所有图标路径已从相对路径改为绝对路径：
- ❌ 旧: `../../assets/icons/xxx.svg`
- ✅ 新: `/assets/icons/xxx.svg`

### 2. Logo 更新
- ✅ 右上角 logo 已改用 `webicon.png`
- 路径: `/assets/icons/webicon.png`

### 3. 图标映射
已使用的图标及其用途：

| 图标文件 | 用途 | 位置 |
|---------|------|------|
| `webicon.png` | 应用 Logo | 顶部导航栏左上角 |
| `font-size-decrease.svg` | 减小字号 | 字体大小滑块左侧 |
| `font-size-increase.svg` | 增大字号 | 字体大小滑块右侧 |
| `choose-color.svg` | 颜色选择器 | 顶部导航栏右侧 |
| `export.svg` | 导出选项 | 输入框右侧第一个按钮 |
| `export-svg.svg` | 导出 SVG | 输入框右侧第二个按钮 |
| `export-png.svg` | 导出 PNG | 输入框右侧第三个按钮 |
| `font-icon.svg` | 字体图标 | 预览列表、字体树列表项 |
| `checkbox.svg` | 复选框选中状态 | 所有复选框 |
| `expand.svg` | 展开/收起 | 字体分类树 |
| `selectall.svg` | 已收藏 | 收藏按钮（红心） |
| `unselectall.svg` | 未收藏 | 收藏按钮（空心） |

### 4. 复选框实现
由于避免使用带空格的文件名，复选框采用了组合方案：

```xml
<view class="checkbox-wrapper {{selected ? 'checked' : ''}}">
  <image wx:if="{{selected}}" class="checkbox-icon-sm" src="/assets/icons/checkbox.svg" />
</view>
```

样式：
```css
.checkbox-wrapper {
  border: 1rpx solid #C9CDD4;  /* 未选中：灰色边框 */
  border-radius: 3rpx;
}

.checkbox-wrapper.checked {
  border-color: #9B6BC2;  /* 选中：紫色边框和背景 */
  background: #9B6BC2;
}
```

## 修改的文件

1. **index.wxml**
   - 所有图标路径更新为绝对路径
   - Logo 改为 webicon.png
   - 复选框结构调整

2. **index.wxss**
   - 添加 `.checkbox-wrapper` 样式
   - 添加 `.checkbox-wrapper.checked` 样式

## 验证清单

请在微信开发者工具中验证以下内容：

- [ ] 顶部 Logo (webicon.png) 正常显示
- [ ] 字体大小增减图标正常显示
- [ ] 颜色选择图标正常显示
- [ ] 导出按钮组图标正常显示（3个按钮）
- [ ] 预览列表中的字体图标正常显示
- [ ] 预览列表中的复选框正常显示（选中/未选中）
- [ ] 字体选择列表中的展开/收起图标正常显示
- [ ] 字体选择列表中的字体图标正常显示
- [ ] 字体选择列表中的复选框正常工作
- [ ] 字体选择列表中的收藏图标正常显示（已收藏/未收藏）
- [ ] 已收藏字体列表中的所有图标正常显示

## 注意事项

1. **路径规范**：小程序中使用绝对路径 `/assets/icons/xxx.svg` 会从项目根目录开始查找
2. **SVG 支持**：微信小程序的 `<image>` 组件支持 SVG 格式
3. **文件名**：避免使用包含空格的文件名，可能在某些情况下导致问题
4. **图标尺寸**：所有图标已按照 Figma 设计稿的尺寸设置 CSS

## 如果图标仍不显示

1. 清除缓存：微信开发者工具 -> 工具 -> 清除缓存
2. 重新编译：点击"编译"按钮
3. 检查控制台：查看是否有资源加载错误
4. 验证文件：确认 `/miniprogram/assets/icons/` 目录下所有图标文件存在