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