update at 2026-02-09 10:22:44

2026-02-09 10:22:44 +08:00
parent 49c70efed0
commit ffb7367d3a
3 changed files with 219 additions and 29 deletions
--- a/miniprogram/ICON_FIX.md
+++ b/miniprogram/ICON_FIX.md
@@ -1,7 +1,7 @@
 # 小程序图标修复清单

 ## 修复时间
-2026年2月8日
+2026年2月9日（最后更新）

 ## 问题
 所有图标在小程序预览中都无法显示
@@ -21,7 +21,7 @@
 - ✅ 右上角 logo 已改用 `webicon.png`
 - 路径: `/assets/icons/webicon.png`

-### 3. 图标映射
+### 3. 图标映射（最新）
 已使用的图标及其用途：

 | 图标文件 | 用途 | 位置 |
@@ -30,35 +30,45 @@
 | `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` | 复选框选中状态 | 所有复选框 |
+| `checkbox.svg` | 复选框选中状态 | 字体选择复选框（选中时显示） |
+| `checkbox-no.svg` | 复选框未选中状态 | 字体选择复选框（未选中时显示） |
 | `expand.svg` | 展开/收起 | 字体分类树 |
-| `selectall.svg` | 已收藏 | 收藏按钮（红心） |
-| `unselectall.svg` | 未收藏 | 收藏按钮（空心） |
+| `selectall.svg` | 全选图标 | 分类标题右侧（未全选时显示） |
+| `unselectall.svg` | 取消全选图标 | 分类标题右侧（已全选时显示） |
+| `favorite.svg` | 未收藏 | 收藏按钮（白色心形） |
+| `favorite-red.svg` | 已收藏 | 收藏按钮（红色心形） |
+| `download.svg` | 下载图标 | 预览项导出按钮区域 |
+| `export-svg-s.svg` | SVG 导出 | 预览项 SVG 导出按钮 |
+| `export-png-s.svg` | PNG 导出 | 预览项 PNG 导出按钮 |
+| `search.svg` | 搜索图标 | 搜索框右侧按钮 |
+| `content.svg` | 内容图标 | 输入框左侧 |

-### 4. 复选框实现
-由于避免使用带空格的文件名，复选框采用了组合方案：
+### 4. 复选框实现（已更新）
+复选框现在始终显示图标，根据状态切换不同图标：

 ```xml
-<view class="checkbox-wrapper {{selected ? 'checked' : ''}}">
-  <image wx:if="{{selected}}" class="checkbox-icon-sm" src="/assets/icons/checkbox.svg" />
+<view class="font-checkbox" bindtap="onToggleFont" data-font-id="{{item.id}}">
+  <image class="checkbox-icon-sm" src="{{item.selected ? icons.checkboxChecked : icons.checkbox}}" />
 </view>
 ```

-样式：
-```css
-.checkbox-wrapper {
-  border: 1rpx solid #C9CDD4;  /* 未选中：灰色边框 */
-  border-radius: 3rpx;
+图标配置（index.js）：
+```javascript
+const LOCAL_ICON_PATHS = {
+  checkbox: '/assets/icons/checkbox-no.svg',      // 未选中
+  checkboxChecked: '/assets/icons/checkbox.svg',  // 选中
+  // ...
 }
+```

-.checkbox-wrapper.checked {
-  border-color: #9B6BC2;  /* 选中：紫色边框和背景 */
-  background: #9B6BC2;
-}
+### 5. 收藏图标实现
+收藏按钮根据状态显示不同颜色的心形图标：
+
+```xml
+<view class="favorite-btn" bindtap="onToggleFavorite" data-font-id="{{font.id}}">
+  <image class="favorite-icon" src="{{font.isFavorite ? icons.favoriteRedIcon : icons.favoriteIcon}}" />
+</view>
 ```

 ## 修改的文件
@@ -66,11 +76,20 @@
 1. **index.wxml**
   - 所有图标路径更新为绝对路径
   - Logo 改为 webicon.png
-   - 复选框结构调整
+   - 复选框结构简化（始终显示图标）
+   - 收藏图标根据状态切换
+   - 新增版权说明

 2. **index.wxss**
-   - 添加 `.checkbox-wrapper` 样式
-   - 添加 `.checkbox-wrapper.checked` 样式
+   - 统一边框颜色为 `#3EE4C3`
+   - 优化选择/已收藏区域布局（flex fill）
+   - 统一容器 padding 为 8rpx
+   - 新增版权样式
+
+3. **index.js**
+   - LOCAL_ICON_PATHS 配置更新
+   - 搜索框默认展开（showSearch: true）
+   - bootstrap() 中修复字体选中状态同步

 ## 验证清单

@@ -79,14 +98,16 @@
 - [ ] 顶部 Logo (webicon.png) 正常显示
 - [ ] 字体大小增减图标正常显示
 - [ ] 颜色选择图标正常显示
- [ ] 导出按钮组图标正常显示（3个按钮）
 - [ ] 预览列表中的字体图标正常显示
- [ ] 预览列表中的复选框正常显示（选中/未选中）
+- [ ] 预览列表中的导出按钮（download、SVG、PNG）正常显示
+- [ ] 搜索框默认完整展开显示
 - [ ] 字体选择列表中的展开/收起图标正常显示
- [ ] 字体选择列表中的字体图标正常显示
- [ ] 字体选择列表中的复选框正常工作
- [ ] 字体选择列表中的收藏图标正常显示（已收藏/未收藏）
+- [ ] 字体选择列表中的复选框正常显示（选中/未选中两种状态）
+- [ ] 字体选择列表中的收藏图标正常显示（红心/白心）
+- [ ] 分类标题右侧的全选/取消全选图标正常显示
 - [ ] 已收藏字体列表中的所有图标正常显示
+- [ ] 预览区和选择区边框颜色为 #3EE4C3
+- [ ] 底部版权说明正常显示

 ## 注意事项

--- a/miniprogram/UPDATE_LOG.md
+++ b/miniprogram/UPDATE_LOG.md
@@ -1,5 +1,82 @@
 # 小程序 UI 更新日志

+## 更新时间
+2026年2月9日（布局优化与样式统一）
+
+## 本次更新内容
+
+### 1. 选择和已收藏区域布局优化
+
+#### 高度填充改造
+- **问题**：选择和已收藏区域使用固定高度 `height: 600rpx`，无法自适应屏幕
+- **解决**：改为 `flex: 1; min-height: 0`，与预览区域一致的 fill 布局
+
+#### Padding 统一
+- **问题**：`.bottom-section` 有额外的 `padding: 0 16rpx`，导致选择/已收藏与屏幕边缘距离不一致
+- **解决**：移除 `.bottom-section` 的水平 padding，由页面容器统一控制
+
+#### 内容溢出修复
+- **问题**：设置过大的 `gap: 22rpx` 导致内容溢出容器
+- **解决**：移除 gap，改用 `margin-bottom` 控制间距；添加 `overflow-y: auto` 确保列表可滚动
+
+### 2. 边框颜色统一
+将预览窗口、选择和已收藏的边框颜色统一改为 `#3EE4C3`：
+```css
+.preview-section { border: 1rpx solid #3EE4C3; }
+.font-selection, .favorite-selection { border: 1rpx solid #3EE4C3; }
+```
+
+### 3. 已收藏标题结构优化
+- 新增 `.favorite-header` 容器包裹"已收藏"标题
+- 与选择区域的 `.selection-header` 结构对齐，确保两侧标题水平对齐
+
+### 4. 底部版权说明
+新增页面底部版权信息：
+```
+@版权说明：仅SVG和PNG分享，无TTF下载，如侵权，反馈：douboer@gmail.com
+```
+
+### 5. 预览区域 Padding 调整
+- 从 `padding: 0 16rpx` 改为 `padding: 8rpx`
+- 四边统一间距，与选择/已收藏区域保持一致
+
+### 关键样式变更
+```css
+/* 底部区域 */
+.bottom-section {
+  display: flex;
+  flex: 1;
+  gap: 16rpx;
+  min-height: 0;
+  margin-top: 16rpx;
+  padding: 0; /* 移除额外 padding */
+}
+
+/* 选择和已收藏容器 */
+.font-selection, .favorite-selection {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: 1rpx solid #3EE4C3;
+  border-radius: 16rpx;
+  background: #fff;
+  padding: 8rpx;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* 版权说明 */
+.copyright-footer {
+  text-align: center;
+  font-size: 20rpx;
+  color: #86909C;
+  padding: 16rpx 0;
+  flex-shrink: 0;
+}
+```
+
+---
+
 ## 更新时间
 2026年2月9日