# 小程序 UI 更新日志

## 更新时间
2026年2月9日（布局优化与样式统一）

## 本次更新内容

### 1. 选择和已收藏区域布局优化

#### 高度填充改造
- **问题**：选择和已收藏区域使用固定高度 `height: 600rpx`，无法自适应屏幕
- **解决**：改为 `flex: 1; min-height: 0`，与预览区域一致的 fill 布局

#### Padding 统一
- **问题**：`.bottom-section` 有额外的 `padding: 0 16rpx`，导致选择/已收藏与屏幕边缘距离不一致
- **解决**：移除 `.bottom-section` 的水平 padding，由页面容器统一控制

#### 内容溢出修复
- **问题**：设置过大的 `gap: 22rpx` 导致内容溢出容器
- **解决**：移除 gap，改用 `margin-bottom` 控制间距；添加 `overflow-y: auto` 确保列表可滚动

### 2. 边框颜色统一
将预览窗口、选择和已收藏的边框颜色统一改为 `#3EE4C3`：
```css
.preview-section { border: 1rpx solid #3EE4C3; }
.font-selection, .favorite-selection { border: 1rpx solid #3EE4C3; }
```

### 3. 已收藏标题结构优化
- 新增 `.favorite-header` 容器包裹"已收藏"标题
- 与选择区域的 `.selection-header` 结构对齐，确保两侧标题水平对齐

### 4. 底部版权说明
新增页面底部版权信息：
```
@版权说明：仅SVG和PNG分享，无TTF下载，如侵权，反馈：douboer@gmail.com
```

### 5. 预览区域 Padding 调整
- 从 `padding: 0 16rpx` 改为 `padding: 8rpx`
- 四边统一间距，与选择/已收藏区域保持一致

### 关键样式变更
```css
/* 底部区域 */
.bottom-section {
  display: flex;
  flex: 1;
  gap: 16rpx;
  min-height: 0;
  margin-top: 16rpx;
  padding: 0; /* 移除额外 padding */
}

/* 选择和已收藏容器 */
.font-selection, .favorite-selection {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1rpx solid #3EE4C3;
  border-radius: 16rpx;
  background: #fff;
  padding: 8rpx;
  overflow: hidden;
  min-width: 0;
}

/* 版权说明 */
.copyright-footer {
  text-align: center;
  font-size: 20rpx;
  color: #86909C;
  padding: 16rpx 0;
  flex-shrink: 0;
}
```

---

## 更新时间
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. 优化大字体渲染性能