gavin/font2pic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source
This commit is contained in:
douboer
2026-02-09 10:22:44 +08:00
parent 49c70efed0
commit ffb7367d3a
3 changed files with 219 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
miniprogram/ICON_FIX.md
View File

@@ -1,7 +1,7 @@
# 小程序图标修复清单 # 小程序图标修复清单
## 修复时间 ## 修复时间
2026年2月8日 2026年2月9日（最后更新）
## 问题 ## 问题
所有图标在小程序预览中都无法显示 所有图标在小程序预览中都无法显示
@@ -21,7 +21,7 @@
- ✅ 右上角 logo 已改用 `webicon.png` - ✅ 右上角 logo 已改用 `webicon.png`
- 路径: `/assets/icons/webicon.png` - 路径: `/assets/icons/webicon.png`
### 3. 图标映射 ### 3. 图标映射（最新）
已使用的图标及其用途： 已使用的图标及其用途：
| 图标文件 | 用途 | 位置 | | 图标文件 | 用途 | 位置 |
@@ -30,35 +30,45 @@
| `font-size-decrease.svg` | 减小字号 | 字体大小滑块左侧 | | `font-size-decrease.svg` | 减小字号 | 字体大小滑块左侧 |
| `font-size-increase.svg` | 增大字号 | 字体大小滑块右侧 | | `font-size-increase.svg` | 增大字号 | 字体大小滑块右侧 |
| `choose-color.svg` | 颜色选择器 | 顶部导航栏右侧 | | `choose-color.svg` | 颜色选择器 | 顶部导航栏右侧 |
| `export.svg` | 导出选项 | 输入框右侧第一个按钮 |
| `export-svg.svg` | 导出 SVG | 输入框右侧第二个按钮 |
| `export-png.svg` | 导出 PNG | 输入框右侧第三个按钮 |
| `font-icon.svg` | 字体图标 | 预览列表、字体树列表项 | | `font-icon.svg` | 字体图标 | 预览列表、字体树列表项 |
| `checkbox.svg` | 复选框选中状态 | 所有复选框 | | `checkbox.svg` | 复选框选中状态 | 字体选择复选框（选中时显示） |
| `checkbox-no.svg` | 复选框未选中状态 | 字体选择复选框（未选中时显示） |
| `expand.svg` | 展开/收起 | 字体分类树 | | `expand.svg` | 展开/收起 | 字体分类树 |
| `selectall.svg` | 已收藏 | 收藏按钮（红心） | | `selectall.svg` | 全选图标 | 分类标题右侧（未全选时显示） |
| `unselectall.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 ```xml
<view class="checkbox-wrapper {{selected ? 'checked' : ''}}"> <view class="font-checkbox" bindtap="onToggleFont" data-font-id="{{item.id}}">
<image wx:if="{{selected}}" class="checkbox-icon-sm" src="/assets/icons/checkbox.svg" /> <image class="checkbox-icon-sm" src="{{item.selected ? icons.checkboxChecked : icons.checkbox}}" />
</view> </view>
``` ```
样式： 图标配置（index.js）：
```css ```javascript
.checkbox-wrapper { const LOCAL_ICON_PATHS = {
border: 1rpx solid #C9CDD4; /* 未选中：灰色边框 */ checkbox: '/assets/icons/checkbox-no.svg', // 未选中
border-radius: 3rpx; checkboxChecked: '/assets/icons/checkbox.svg', // 选中
// ...
} }
```
.checkbox-wrapper.checked { ### 5. 收藏图标实现
border-color: #9B6BC2; /* 选中：紫色边框和背景 */ 收藏按钮根据状态显示不同颜色的心形图标：
background: #9B6BC2;
} ```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** 1. **index.wxml**
- 所有图标路径更新为绝对路径 - 所有图标路径更新为绝对路径
- Logo 改为 webicon.png - Logo 改为 webicon.png
- 复选框结构调整 - 复选框结构简化（始终显示图标）
- 收藏图标根据状态切换
- 新增版权说明
2. **index.wxss** 2. **index.wxss**
- 添加 `.checkbox-wrapper` 样式 - 统一边框颜色为 `#3EE4C3`
- 添加 `.checkbox-wrapper.checked` 样式 - 优化选择/已收藏区域布局（flex fill）
- 统一容器 padding 为 8rpx
- 新增版权样式
3. **index.js**
- LOCAL_ICON_PATHS 配置更新
- 搜索框默认展开（showSearch: true）
- bootstrap() 中修复字体选中状态同步
## 验证清单 ## 验证清单
@@ -79,14 +98,16 @@
- [ ] 顶部 Logo (webicon.png) 正常显示 - [ ] 顶部 Logo (webicon.png) 正常显示
- [ ] 字体大小增减图标正常显示 - [ ] 字体大小增减图标正常显示
- [ ] 颜色选择图标正常显示 - [ ] 颜色选择图标正常显示
- [ ] 导出按钮组图标正常显示（3个按钮）
- [ ] 预览列表中的字体图标正常显示 - [ ] 预览列表中的字体图标正常显示
- [ ] 预览列表中的复选框正常显示（选中/未选中） - [ ] 预览列表中的导出按钮（download、SVG、PNG）正常显示
- [ ] 搜索框默认完整展开显示
- [ ] 字体选择列表中的展开/收起图标正常显示 - [ ] 字体选择列表中的展开/收起图标正常显示
- [ ] 字体选择列表中的字体图标正常显示 - [ ] 字体选择列表中的复选框正常显示（选中/未选中两种状态）
- [ ] 字体选择列表中的复选框正常工作 - [ ] 字体选择列表中的收藏图标正常显示（红心/白心）
- [ ] 字体选择列表中的收藏图标正常显示（已收藏/未收藏） - [ ] 分类标题右侧的全选/取消全选图标正常显示
- [ ] 已收藏字体列表中的所有图标正常显示 - [ ] 已收藏字体列表中的所有图标正常显示
- [ ] 预览区和选择区边框颜色为 #3EE4C3
- [ ] 底部版权说明正常显示
## 注意事项 ## 注意事项

77
miniprogram/UPDATE_LOG.md
View File

@@ -1,5 +1,82 @@
# 小程序 UI 更新日志 # 小程序 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日 2026年2月9日

92
release.md Normal file
View File

@@ -0,0 +1,92 @@
# Release Notes
## v1.0.1
发布时间：2026年2月9日
版本定位：小程序 UI 优化与布局完善
### 里程碑与亮点
- 全面适配 Figma 设计稿，UI 风格统一
- 选择/已收藏区域改为自适应高度（flex fill）
- 搜索框默认完整展开显示
- 复选框图标始终显示，状态切换更直观
- 收藏图标区分已收藏（红心）和未收藏（白心）
- 新增底部版权说明
### 核心特性
#### 布局优化
- 选择和已收藏区域从固定高度改为 flex fill，自适应屏幕
- 统一三个区域（预览、选择、已收藏）的边框颜色为 `#3EE4C3`
- 统一容器 padding 为 8rpx
- 移除多余的嵌套 padding，避免边距叠加
#### 图标系统完善
- 复选框：checkbox.svg（选中）、checkbox-no.svg（未选中）
- 收藏：favorite.svg（未收藏）、favorite-red.svg（已收藏）
- 分类全选：selectall.svg / unselectall.svg
- 导出按钮：download.svg、export-svg-s.svg、export-png-s.svg
#### 对齐修复
- "选择"文字与搜索框垂直居中对齐
- "选择"和"已收藏"标题水平对齐
- 覆盖全局样式污染（padding/margin）
### 基础功能
- 文本输入 + 实时预览
- 字体搜索、分类树、收藏管理
- SVG/PNG 导出（远端 API 渲染）
- 字体大小滑块调节
- 颜色选择器
### 技术实现
- 框架：微信小程序原生
- 渲染：远端 API（apiserver）
- 状态：本地存储（wx.setStorageSync）
- 图标：本地 SVG 文件（/assets/icons/）
### 项目结构
```
miniprogram/
├── pages/index/ # 首页
│ ├── index.wxml # 页面结构
│ ├── index.wxss # 样式
│ └── index.js # 逻辑
├── assets/icons/ # 图标资源
├── utils/mp/ # 小程序工具函数
└── app.js/json/wxss # 应用配置
```
### 设计理念
- 遵循 Figma 设计稿，保持视觉一致性
- 适配小程序原生组件限制（如 input 最小高度）
- 简化图标状态切换逻辑，提升代码可维护性
## 下载和安装
### 系统要求
- 微信开发者工具 1.06+
- Node.js 18+（用于 apiserver）
### 快速开始
1. 克隆仓库
2. 微信开发者工具导入 `miniprogram/` 目录
3. 部署 apiserver（详见 apiserver/README.md）
4. 编译运行
### 生产构建
1. 配置合法域名：`fonts.biboer.cn`
2. 上传代码并提交审核
### 支持和反馈
- 邮箱：douboer@gmail.com
- 仓库：Issues