gavin/font2pic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity
Files
49c70efed0b8195dc1cb10c0c0687841085083bf
font2pic/miniprogram/UPDATE_LOG.md
douboer 49c70efed0 update at 2026-02-09 09:48:44
2026-02-09 09:48:44 +08:00

8.0 KiB
Raw Blame History

小程序 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

关键代码

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