update at 2026-02-09 09:48:44

miniprogram/UPDATE_LOG.md

@@ -1,5 +1,81 @@
 # 小程序 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`
+
+### 关键代码
+```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日（远端渲染改造）