update at 2026-02-08 18:28:39

2026-02-08 18:28:39 +08:00
parent e2a46e413a
commit 0f5a7f0d85
97 changed files with 22029 additions and 59 deletions
--- a/miniprogram/UPDATE_LOG.md
+++ b/miniprogram/UPDATE_LOG.md
@@ -0,0 +1,180 @@
+# 小程序 UI 更新日志
+
+## 更新时间
+2026年2月8日（远端渲染改造）
+
+## 本次关键变更
+
+为解决“大字体多预览下载慢”的问题，小程序渲染链路从“本地下载字体并 Worker 渲染”改为“请求远端 API 返回 SVG”：
+
+- 新增 `apiserver/` 目录，服务端读取 `fonts.json` + `fonts/` 并渲染 SVG。
+- 小程序新增 `miniprogram/utils/mp/render-api.js`，调用 `https://fonts.biboer.cn/api/render-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. 优化大字体渲染性能