258 lines
8.0 KiB
Markdown
258 lines
8.0 KiB
Markdown
# 小程序 UI 更新日志
|
||
|
||
## 更新时间
|
||
2026年2月9日
|
||
|
||
## 修复："选择"与搜索框垂直对齐问题
|
||
|
||
### 问题描述
|
||
"选择"文字与右侧搜索框无法垂直居中对齐，"选择"看起来偏上。
|
||
|
||
### 根本原因
|
||
1. **全局样式污染**：`app.wxss` 和 `index.wxss` 中的全局 `.section-title` 样式设置了 `padding: 12rpx 0` 和 `margin-bottom: 16rpx`，导致"选择"文字上下有额外间距
|
||
2. **小程序 input 组件最小高度**：微信小程序的 `<input>` 组件有默认最小高度（约 48rpx），无法通过 CSS 设置更小的高度，导致搜索框实际高度大于预期
|
||
|
||
### 解决方案
|
||
1. **统一高度为 48rpx**：适配 input 组件的最小高度限制
|
||
2. **覆盖全局样式**：在 `.selection-header .section-title` 中显式设置 `padding: 0; margin: 0`
|
||
3. **强制 flexbox 居中**：
|
||
- 父容器 `.selection-header` 使用 `display: flex; align-items: center`
|
||
- `.section-title` 使用 `display: flex; align-items: center; height: 48rpx`
|
||
- `.search-container` 使用 `height: 48rpx; overflow: hidden`
|
||
|
||
### 关键代码
|
||
```css
|
||
.selection-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 0;
|
||
}
|
||
|
||
.selection-header .section-title {
|
||
padding: 0;
|
||
margin: 0;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.search-container {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #FEFDFE;
|
||
border-radius: 24rpx;
|
||
padding: 0 12rpx;
|
||
height: 48rpx;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
color: #4E5969;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
min-height: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
background: transparent;
|
||
}
|
||
```
|
||
|
||
### 经验教训
|
||
1. **检查全局样式**：修改特定组件样式前，先检查是否有全局样式影响
|
||
2. **小程序组件限制**：微信小程序原生组件（如 input、textarea）有内置最小尺寸，需要适配而非强制覆盖
|
||
3. **调试技巧**：当 flexbox `align-items: center` 不生效时，优先检查子元素的 padding/margin/line-height
|
||
|
||
### 其他修复
|
||
- **搜索框初始状态**：将 `showSearch` 初始值从 `false` 改为 `true`，搜索框默认完整显示（符合 Figma 设计）
|
||
- **字体选中状态同步**：在 `bootstrap()` 中恢复 `selectedFonts` 后调用 `updateFontTrees()`，确保预览区的字体在字体树中正确显示为已选中
|
||
|
||
---
|
||
|
||
## 更新时间
|
||
2026年2月8日（远端渲染改造）
|
||
|
||
## 本次关键变更
|
||
|
||
为解决“大字体多预览下载慢”的问题，小程序渲染链路从“本地下载字体并 Worker 渲染”改为“请求远端 API 返回 SVG”：
|
||
|
||
- 新增 `apiserver/` 目录，服务端读取 `fonts.json` + `fonts/` 并渲染 SVG。
|
||
- 小程序新增 `miniprogram/utils/mp/render-api.js`，调用 `https://fonts.biboer.cn/api/render-svg`。
|
||
- 小程序 PNG 导出改为调用 `https://fonts.biboer.cn/api/render-png`，不再依赖真机 Canvas 加载 SVG。
|
||
- `miniprogram/pages/index/index.js` 移除本地 `loadFontBuffer + worker.generateSvg` 依赖，改为远端渲染。
|
||
- `miniprogram/app.js` 新增全局配置：
|
||
- `svgRenderApiUrl`
|
||
- `apiTimeoutMs`
|
||
|
||
## 兼容性说明
|
||
|
||
- 字体清单仍使用 `https://fonts.biboer.cn/fonts.json`，字体分类、收藏、导出逻辑保持不变。
|
||
- 导出 PNG 仍在小程序端由 Canvas 渲染，导出 SVG 仍沿用原分享流程。
|
||
|
||
---
|
||
|
||
## 更新时间
|
||
2026年2月8日
|
||
|
||
## 更新内容
|
||
|
||
根据 Figma 设计稿 (https://www.figma.com/design/S7WVUzg3Z0DMWjYUC6dJzN/font2svg?node-id=584-64) 对小程序首页进行了全面重构。
|
||
|
||
### 1. 资源文件更新
|
||
|
||
- **图标素材**：从 web 端 `frontend/src/assets/icons/` 复制了所有 SVG 图标到 `miniprogram/assets/icons/`
|
||
- 新增的图标包括：
|
||
- 字体大小控制：`font-size-increase.svg`, `font-size-decrease.svg`
|
||
- 导出功能：`export.svg`, `export-svg.svg`, `export-png.svg`
|
||
- 颜色选择：`choose-color.svg`
|
||
- 字体管理：`font-icon.svg`, `expand.svg`
|
||
- 复选框：`checkbox.svg`, `icons_idx _32.svg`, `icons_idx _34.svg` 等
|
||
- 收藏功能：`icons_idx _18.svg`, `icons_idx _19.svg`
|
||
|
||
### 2. 页面结构重构 (index.wxml)
|
||
|
||
#### 顶部导航栏
|
||
- Logo 展示（星程字体图标）
|
||
- "TextToSVG" 品牌标题
|
||
- 字体大小滑块（带增减按钮）
|
||
- 颜色选择按钮
|
||
|
||
#### 输入区域
|
||
- 简化的输入框（"此处输入内容"）
|
||
- 导出按钮组（支持 SVG、PNG 导出）
|
||
|
||
#### 效果预览区域
|
||
- 显示多个选中字体的预览
|
||
- 每个预览项包含：
|
||
- 字体名称
|
||
- 复选框（控制是否显示）
|
||
- 预览图像
|
||
|
||
#### 字体选择区域（左右分栏）
|
||
- **左侧：字体选择**
|
||
- 树状分类结构
|
||
- 支持展开/收起
|
||
- 每个字体项包含：复选框、收藏按钮
|
||
|
||
- **右侧：已收藏字体**
|
||
- 显示已收藏的字体
|
||
- 同样支持树状结构
|
||
- 点击取消收藏
|
||
|
||
#### 颜色选择器弹窗
|
||
- 预设颜色调色板
|
||
- 自定义颜色输入
|
||
|
||
### 3. 样式更新 (index.wxss)
|
||
|
||
- **整体布局**：采用 flex 布局，优化空间利用
|
||
- **颜色方案**：
|
||
- 主色：`#8552A1`, `#9B6BC2`（紫色系）
|
||
- 填充色：`#F7F8FA`, `#E5E6EB`
|
||
- 文字色：`#4E5969`, `#86909C`, `#C9CDD4`
|
||
- 边框色：`#f7e0e0`
|
||
|
||
- **组件样式**：
|
||
- 顶部导航栏高度：96rpx
|
||
- 输入框高度：78rpx
|
||
- 字体树容器高度：360rpx
|
||
- 圆角设计：12rpx - 24rpx
|
||
|
||
- **响应式设计**：
|
||
- 使用 flex 布局适应不同屏幕
|
||
- scroll-view 实现内容滚动
|
||
|
||
### 4. 功能逻辑更新 (index.js)
|
||
|
||
#### 新增功能
|
||
|
||
1. **多字体选择**
|
||
- 支持同时选择多个字体
|
||
- 每个字体独立预览
|
||
- `selectedFonts` 数组管理选中的字体
|
||
|
||
2. **字体分类树**
|
||
- 自动构建字体分类结构
|
||
- 支持展开/收起操作
|
||
- `fontCategories` 和 `favoriteCategories` 管理
|
||
|
||
3. **收藏功能**
|
||
- 收藏/取消收藏字体
|
||
- 收藏状态持久化存储
|
||
- 已收藏字体独立展示
|
||
|
||
4. **字体大小控制**
|
||
- 滑块调整（24-320px）
|
||
- 增加/减少按钮（步进 10px）
|
||
- 实时预览更新
|
||
|
||
5. **颜色选择器**
|
||
- 弹窗式颜色选择器
|
||
- 预设颜色调色板
|
||
- 自定义颜色输入
|
||
|
||
6. **批量导出**
|
||
- 导出全部选中字体为 SVG
|
||
- 导出全部选中字体为 PNG
|
||
- 单个字体导出
|
||
|
||
#### 核心方法
|
||
|
||
- `updateFontTrees()` - 更新字体分类树
|
||
- `onToggleFont()` - 切换字体选择状态
|
||
- `onToggleFavorite()` - 切换收藏状态
|
||
- `onToggleCategory()` - 切换分类展开/收起
|
||
- `generatePreviewForFont()` - 生成单个字体预览
|
||
- `generateAllPreviews()` - 生成所有选中字体预览
|
||
- `exportAllSvg()` - 批量导出 SVG
|
||
- `exportAllPng()` - 批量导出 PNG
|
||
|
||
### 5. 全局样式更新 (app.wxss)
|
||
|
||
- 页面背景改为白色
|
||
- 容器高度设为 100vh，支持全屏布局
|
||
- 添加 `overflow: hidden` 避免滚动问题
|
||
|
||
## 技术亮点
|
||
|
||
1. **树状结构**：使用 Map 数据结构高效管理字体分类
|
||
2. **性能优化**：字体 buffer 按需加载并缓存
|
||
3. **防抖处理**：输入和调整时使用 260ms 防抖
|
||
4. **状态持久化**：选中字体、收藏状态自动保存
|
||
5. **并发生成**：支持多个字体同时生成预览
|
||
|
||
## 使用说明
|
||
|
||
1. **选择字体**：在左侧"字体选择"区域勾选想要使用的字体
|
||
2. **输入文字**：在顶部输入框输入要转换的文本
|
||
3. **调整样式**：
|
||
- 使用滑块或增减按钮调整字体大小
|
||
- 点击调色板图标选择颜色
|
||
4. **查看预览**：在"效果预览"区域查看所有选中字体的效果
|
||
5. **导出文件**：
|
||
- 点击 SVG 图标导出为 SVG 格式
|
||
- 点击 PNG 图标导出为 PNG 格式并保存到相册
|
||
- 点击 export 图标可选择批量导出
|
||
|
||
## 注意事项
|
||
|
||
- 首次加载字体可能需要一些时间，请耐心等待
|
||
- 建议不要同时选择过多字体，以免影响性能
|
||
- PNG 导出到相册需要用户授权
|
||
- SVG 分享使用系统分享功能
|
||
|
||
## 后续优化建议
|
||
|
||
1. 添加字体搜索功能
|
||
2. 支持预览文字大小独立调整
|
||
3. 添加字体加载进度指示
|
||
4. 支持批量框选字体
|
||
5. 优化大字体渲染性能
|