font2pic/miniprogram/UPDATE_LOG.md

小程序 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. 优化大字体渲染性能