diff --git a/miniprogram/ICON_FIX.md b/miniprogram/ICON_FIX.md index fcc47ae..d0ad05d 100644 --- a/miniprogram/ICON_FIX.md +++ b/miniprogram/ICON_FIX.md @@ -1,7 +1,7 @@ # 小程序图标修复清单 ## 修复时间 -2026年2月8日 +2026年2月9日（最后更新） ## 问题 所有图标在小程序预览中都无法显示 @@ -21,7 +21,7 @@ - ✅ 右上角 logo 已改用 `webicon.png` - 路径: `/assets/icons/webicon.png` -### 3. 图标映射 +### 3. 图标映射（最新） 已使用的图标及其用途： | 图标文件 | 用途 | 位置 | @@ -30,35 +30,45 @@ | `font-size-decrease.svg` | 减小字号 | 字体大小滑块左侧 | | `font-size-increase.svg` | 增大字号 | 字体大小滑块右侧 | | `choose-color.svg` | 颜色选择器 | 顶部导航栏右侧 | -| `export.svg` | 导出选项 | 输入框右侧第一个按钮 | -| `export-svg.svg` | 导出 SVG | 输入框右侧第二个按钮 | -| `export-png.svg` | 导出 PNG | 输入框右侧第三个按钮 | | `font-icon.svg` | 字体图标 | 预览列表、字体树列表项 | -| `checkbox.svg` | 复选框选中状态 | 所有复选框 | +| `checkbox.svg` | 复选框选中状态 | 字体选择复选框（选中时显示） | +| `checkbox-no.svg` | 复选框未选中状态 | 字体选择复选框（未选中时显示） | | `expand.svg` | 展开/收起 | 字体分类树 | -| `selectall.svg` | 已收藏 | 收藏按钮（红心） | -| `unselectall.svg` | 未收藏 | 收藏按钮（空心） | +| `selectall.svg` | 全选图标 | 分类标题右侧（未全选时显示） | +| `unselectall.svg` | 取消全选图标 | 分类标题右侧（已全选时显示） | +| `favorite.svg` | 未收藏 | 收藏按钮（白色心形） | +| `favorite-red.svg` | 已收藏 | 收藏按钮（红色心形） | +| `download.svg` | 下载图标 | 预览项导出按钮区域 | +| `export-svg-s.svg` | SVG 导出 | 预览项 SVG 导出按钮 | +| `export-png-s.svg` | PNG 导出 | 预览项 PNG 导出按钮 | +| `search.svg` | 搜索图标 | 搜索框右侧按钮 | +| `content.svg` | 内容图标 | 输入框左侧 | -### 4. 复选框实现 -由于避免使用带空格的文件名，复选框采用了组合方案： +### 4. 复选框实现（已更新） +复选框现在始终显示图标，根据状态切换不同图标： ```xml - - + + ``` -样式： -```css -.checkbox-wrapper { - border: 1rpx solid #C9CDD4; /* 未选中：灰色边框 */ - border-radius: 3rpx; +图标配置（index.js）： +```javascript +const LOCAL_ICON_PATHS = { + checkbox: '/assets/icons/checkbox-no.svg', // 未选中 + checkboxChecked: '/assets/icons/checkbox.svg', // 选中 + // ... } +``` -.checkbox-wrapper.checked { - border-color: #9B6BC2; /* 选中：紫色边框和背景 */ - background: #9B6BC2; -} +### 5. 收藏图标实现 +收藏按钮根据状态显示不同颜色的心形图标： + +```xml + + + ``` ## 修改的文件 @@ -66,11 +76,20 @@ 1. **index.wxml** - 所有图标路径更新为绝对路径 - Logo 改为 webicon.png - - 复选框结构调整 + - 复选框结构简化（始终显示图标） + - 收藏图标根据状态切换 + - 新增版权说明 2. **index.wxss** - - 添加 `.checkbox-wrapper` 样式 - - 添加 `.checkbox-wrapper.checked` 样式 + - 统一边框颜色为 `#3EE4C3` + - 优化选择/已收藏区域布局（flex fill） + - 统一容器 padding 为 8rpx + - 新增版权样式 + +3. **index.js** + - LOCAL_ICON_PATHS 配置更新 + - 搜索框默认展开（showSearch: true） + - bootstrap() 中修复字体选中状态同步 ## 验证清单 @@ -79,14 +98,16 @@ - [ ] 顶部 Logo (webicon.png) 正常显示 - [ ] 字体大小增减图标正常显示 - [ ] 颜色选择图标正常显示 -- [ ] 导出按钮组图标正常显示（3个按钮） - [ ] 预览列表中的字体图标正常显示 -- [ ] 预览列表中的复选框正常显示（选中/未选中） +- [ ] 预览列表中的导出按钮（download、SVG、PNG）正常显示 +- [ ] 搜索框默认完整展开显示 - [ ] 字体选择列表中的展开/收起图标正常显示 -- [ ] 字体选择列表中的字体图标正常显示 -- [ ] 字体选择列表中的复选框正常工作 -- [ ] 字体选择列表中的收藏图标正常显示（已收藏/未收藏） +- [ ] 字体选择列表中的复选框正常显示（选中/未选中两种状态） +- [ ] 字体选择列表中的收藏图标正常显示（红心/白心） +- [ ] 分类标题右侧的全选/取消全选图标正常显示 - [ ] 已收藏字体列表中的所有图标正常显示 +- [ ] 预览区和选择区边框颜色为 #3EE4C3 +- [ ] 底部版权说明正常显示 ## 注意事项 diff --git a/miniprogram/UPDATE_LOG.md b/miniprogram/UPDATE_LOG.md index c774f57..f23588b 100644 --- a/miniprogram/UPDATE_LOG.md +++ b/miniprogram/UPDATE_LOG.md @@ -1,5 +1,82 @@ # 小程序 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日 diff --git a/release.md b/release.md new file mode 100644 index 0000000..b11ad1b --- /dev/null +++ b/release.md @@ -0,0 +1,92 @@ +# Release Notes + +## v1.0.1 +发布时间：2026年2月9日 +版本定位：小程序 UI 优化与布局完善 + +### 里程碑与亮点 + +- 全面适配 Figma 设计稿，UI 风格统一 +- 选择/已收藏区域改为自适应高度（flex fill） +- 搜索框默认完整展开显示 +- 复选框图标始终显示，状态切换更直观 +- 收藏图标区分已收藏（红心）和未收藏（白心） +- 新增底部版权说明 + +### 核心特性 + +#### 布局优化 +- 选择和已收藏区域从固定高度改为 flex fill，自适应屏幕 +- 统一三个区域（预览、选择、已收藏）的边框颜色为 `#3EE4C3` +- 统一容器 padding 为 8rpx +- 移除多余的嵌套 padding，避免边距叠加 + +#### 图标系统完善 +- 复选框：checkbox.svg（选中）、checkbox-no.svg（未选中） +- 收藏：favorite.svg（未收藏）、favorite-red.svg（已收藏） +- 分类全选：selectall.svg / unselectall.svg +- 导出按钮：download.svg、export-svg-s.svg、export-png-s.svg + +#### 对齐修复 +- "选择"文字与搜索框垂直居中对齐 +- "选择"和"已收藏"标题水平对齐 +- 覆盖全局样式污染（padding/margin） + +### 基础功能 + +- 文本输入 + 实时预览 +- 字体搜索、分类树、收藏管理 +- SVG/PNG 导出（远端 API 渲染） +- 字体大小滑块调节 +- 颜色选择器 + +### 技术实现 + +- 框架：微信小程序原生 +- 渲染：远端 API（apiserver） +- 状态：本地存储（wx.setStorageSync） +- 图标：本地 SVG 文件（/assets/icons/） + +### 项目结构 + +``` +miniprogram/ +├── pages/index/ # 首页 +│ ├── index.wxml # 页面结构 +│ ├── index.wxss # 样式 +│ └── index.js # 逻辑 +├── assets/icons/ # 图标资源 +├── utils/mp/ # 小程序工具函数 +└── app.js/json/wxss # 应用配置 +``` + +### 设计理念 + +- 遵循 Figma 设计稿，保持视觉一致性 +- 适配小程序原生组件限制（如 input 最小高度） +- 简化图标状态切换逻辑，提升代码可维护性 + +## 下载和安装 + +### 系统要求 + +- 微信开发者工具 1.06+ +- Node.js 18+（用于 apiserver） + +### 快速开始 + +1. 克隆仓库 +2. 微信开发者工具导入 `miniprogram/` 目录 +3. 部署 apiserver（详见 apiserver/README.md） +4. 编译运行 + +### 生产构建 + +1. 配置合法域名：`fonts.biboer.cn` +2. 上传代码并提交审核 + +### 支持和反馈 + +- 邮箱：douboer@gmail.com +- 仓库：Issues +