18 KiB
18 KiB
UI 问题修改计划
来源：设计验收问题记录（UI-001 ~ UI-0014），共 14 项，全部状态：待修改 设计稿基准：宽度 390px，换算到小程序 750rpx
一、尺寸换算规则（px → rpx）
换算公式：1px = 750 / 390 rpx ≈ 1.923rpx
| 设计稿 px | 换算 rpx | 取值建议 |
|---|---|---|
| 2px | 3.85rpx | 4rpx |
| 4px | 7.69rpx | 8rpx |
| 10px（10号字） | 19.23rpx | 19rpx |
| 16px（16号字） | 30.77rpx | 31rpx |
所有从设计稿（设计规格说明.md / Figma）量取的 px 值，一律按上表换算为 rpx 再写入代码。
二、远程资源路径规范
2.1 资源存放约定
- 本地
切图/切图/文件夹整体改名为miniprogram后上传至服务器，线上路径前缀为：/assets/miniprogram/ - 资源域名复用 API 域名：
https://official.inkreach.cc（即 api/request.js 中小程序端 BASE_URL 的域名） - 代码中不要写死完整 URL，统一通过
buildUrl()拼接：
import { buildUrl } from '@/api/request.js'
const ASSET_BASE = '/assets/miniprogram/'
// 示例
buildUrl(ASSET_BASE + 'logo.png')
// → https://official.inkreach.cc/assets/miniprogram/logo.png（三端一致）
说明：buildUrl 对
assets/开头的路径直接用域名根目录拼接（不拼 v2-api），接口仍走https://official.inkreach.cc/v2-api/。
2.2 资源映射表（原图 → 线上路径）
| 原图（切图/切图/） | 线上路径（/assets/miniprogram/，保留切图原始中文文件名） | 对应问题 |
|---|---|---|
| logo.png（单张完整logo，含中英文） | logo.png | UI-001 |
| 首页主视觉全球图.png | 首页主视觉全球图.png | UI-003 |
| 4步开始/01步骤-选择产品.png | 4步开始/01步骤-选择产品.png | UI-004 |
| 4步开始/02步骤-上传设计.png | 4步开始/02步骤-上传设计.png | UI-004 |
| 4步开始/03步骤-在线销售.png | 4步开始/03步骤-在线销售.png | UI-004 |
| 4步开始/04步骤-生产配送.png | 4步开始/04步骤-生产配送.png | UI-004 |
| 用强大功能/全球配送.png | 用强大功能/全球配送.png | UI-005 |
| 用强大功能/店铺集成.png | 用强大功能/店铺集成.png | UI-005 |
| 用强大功能/自动化履约.png | 用强大功能/自动化履约.png | UI-005 |
| 用强大功能/设计工具.png | 用强大功能/设计工具.png | UI-005 |
| 公司简介背景.png | 公司简介背景.png | UI-007 |
| PingFang SC/ 文件夹（7 个字重 ttf，见 2.3） | fonts/PingFang-Regular.subset.ttf 等（已生成，见 2.3） | 全局字体 |
中文文件名由 buildUrl/uni.request 自动 URL 编码，三端均可正常访问；只有字体目录用英文名
fonts/。Figma 导出的小图标（UI-009/0010）为本地静态资源，不上传服务器：
static/icons/products/icon_search.png（48×48@3x）、static/icons/products/icon_filter.png（54×54@3x）。
2.3 字体方案
现有字体文件
服务器路径：miniprogram/PingFang SC/，共 7 个字重，每个约 13.4MB：
| 文件 | 字重 | 是否选用 |
|---|---|---|
| PingFang (Thin).ttf | 100 | 不用 |
| PingFang (Ultralight).ttf | 200 | 不用 |
| PingFang (Light).ttf | 300 | 不用 |
| PingFang (Regular).ttf | 400 | 选用（主字体，正文/数字） |
| PingFang (Medium).ttf | 500 | 选用（可选，标题/强调） |
| PingFang (Semibold).ttf | 600 | 备选（如 Medium 效果不够重再换） |
| PingFang (Heavy/Bold 等).ttf | 700+ | 不用 |
结论：首选 Regular（400），它对应 font-weight: 400 的常规文本；如需标题更醒目可加 Medium（500）。其余字重不加载，避免浪费带宽。7 个文件全部上传也没关系，但代码里只引用选中的 1~2 个。
关键问题：必须子集化，不能直接全量加载
- 每个 ttf 全量约 13.4MB，小程序加载一个字体包就要 13MB+，用户流量和加载时间都不可接受
- 处理方式：用 fontmin 或在线工具（如 font-spider、字节跳动的字体子集化工具）把 ttf 裁成子集：
- 方案 A（推荐）：只保留数字 + 英文 + 常用符号，子集后仅 20~50KB，用于价格、数据等数字/英文场景
- 方案 B：保留常用 3500 中文字 + 数字英文，约 1~2MB，可覆盖绝大部分中文（牺牲一些包体）
✅ 子集文件已生成（2026-08-31）
已在本项目根目录 miniprogram-fonts/ 下生成 4 个文件（字符集 = 常用3500字 + ASCII + 中文标点 + 项目源码实际用字，共 3661 字符）：
| 文件 | 大小 | 用途 |
|---|---|---|
| PingFang-Regular.subset.ttf | 724 KB | 主字体（正文/数字），推荐直接用这个 |
| PingFang-Regular.subset.woff2 | 382 KB | 同上，体积更小，loadFontFace 部分端支持不完善，备用 |
| PingFang-Medium.subset.ttf | 722 KB | 标题/强调字体 |
| PingFang-Medium.subset.woff2 | 387 KB | 同上备用 |
待办：将 miniprogram-fonts/ 下需要使用的文件复制到服务器 miniprogram/fonts/（即线上 /assets/miniprogram/fonts/），文件名保持不变。
- 子集化脚本已保留：
subset_fonts.py（字符表chars_3500.txt），后续文案变动可重新生成（需pip install --target ./pylibs fonttools brotli，再PYTHONPATH=./pylibs python subset_fonts.py） - 原始解压字体在
切图/切图/PingFang SC/，如不需要可直接删除
uni-app 加载方式
方式一：uni.loadFontFace（推荐，全端通用）
在首页 index.vue 的 onLoad 中全局加载（注意：不能放 App.vue 的 onLaunch，页面未创建会报 loadFontFace:fail not font page），小程序/H5/App 三端都支持：
// pages/index/index.vue onLoad（global: true 照样全局生效）
uni.loadFontFace({
global: true, // 跨页面生效，必须加
family: 'PingFangSC', // 自定义字体名，避免和系统 PingFang SC 冲突
source: 'url("https://official.inkreach.cc/assets/miniprogram/fonts/PingFang-Regular.subset.ttf")',
success: () => console.log('字体加载成功'),
fail: err => console.warn('字体加载失败，回退系统字体', err)
});
使用：CSS 里直接 font-family: 'PingFangSC', -apple-system, 'PingFang SC', sans-serif;（加载失败自动回退系统字体，无副作用）
方式二：app.css 里写 @font-face
- H5 端：完全支持，写在 app.css 即可
- 小程序端：基础库 2.10.0 起支持 wxss 中的网络字体 @font-face，但兼容性不如方式一稳定
@font-face {
font-family: 'PingFangSC';
src: url('https://official.inkreach.cc/assets/miniprogram/fonts/PingFang-Regular.subset.ttf') format('truetype');
font-weight: 400;
}
注意：CSS 内无法调用 buildUrl()，必须写完整远程 URL。
小程序端额外要求：
- 字体 URL 必须是 https
- 字体所在域名
official.inkreach.cc需加入小程序后台的 downloadFile 合法域名（与现有 API 域名相同，如已配置则无需重复添加） - 本地调试可在开发者工具勾选"不校验合法域名"
中文字体怎么办（结论：先不加载，按需再补）
- iOS 无需处理：iOS 系统字体本身就是苹方（PingFang SC），中文不加载任何字体也和设计稿完全一致
- Android 有轻微差异：系统字体是 MiSans / HarmonyOS Sans，与苹方观感接近、细节略有不同，多数场景肉眼难辨
- 如需 Android 中文也统一，推荐做"实际用字子集"：
- 小程序静态中文文案基本固定，提取代码里全部中文去重（约 600
900 字）+ 数字英文，子集约 **300500KB** - 动态数据（如后端商品名）出现子集外的字时，缺字自动回退系统字体，不会乱码，仅个别字字形不同，几乎看不出
- 若担心覆盖不足，改用"常用 3500 字"子集（1~2MB），覆盖 99% 动态文字
- 小程序静态中文文案基本固定，提取代码里全部中文去重（约 600
- 缺字回退由系统自动完成，CSS 字体栈里排好回退顺序即可，无需额外代码
最终建议组合
- 第一步：Regular + Medium 做数字/英文子集（方案 A）上线，零风险
- 首页 index.vue
onLoad用uni.loadFontFace(global: true)加载（不能在 App.vue onLaunch 调，会报 not font page） - app.css 全局字体栈改为
'PingFangSC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif（数字英文走子集字体，中文自动回退系统 PingFang/苹方，iOS 与设计稿完全一致） - 第二步（可选）：看安卓真机效果后，若要求中文统一，再做中文"实际用字子集"或常用 3500 字子集，只需替换/新增字体文件并在 loadFontFace 里加一条，代码结构不变
三、问题清单与修改方案
暂缓项（需参考 Figma 设计稿，链接如下，后续再改）：
- UI-009（搜索图标+搜索按钮）、UI-0010（筛选遮挡） https://www.figma.com/design/9JTxflMXhnfltaGbDmTgOm/inkreach?node-id=1962-143&m=dev
- UI-014（产品详情顶部导航，暂不改） https://www.figma.com/design/9JTxflMXhnfltaGbDmTgOm/inkreach?node-id=1508-155&m=dev
UI-001 首页第一屏 · logo 替换（P1）
- 文件：HeroBanner.vue（第 19-20 行）
- 现状：两张图
logo_en.svg+logo_cn.svg - 方案：删除两张 svg，改用单张 logo 图：
buildUrl(ASSET_BASE + 'logo.png')，按设计稿调整尺寸与分割线表现
UI-002 首页第一屏 · 数据列辅助文案字号（P2）
- 文件：HeroBanner.vue（数据列 label，文案见 mock.js 第 6 行"全球本土工厂"）
- 方案：辅助文案（label）字号调整为 10号 → 19rpx
UI-003 首页第一屏 · 全球地图主视觉模糊（P2）
- 文件：HeroBanner.vue
- 方案：替换为切图高清原图
首页主视觉全球图.png（线上路径见 2.2）
UI-004 首页 · 4步开始你的按需定制生意 · 配图模糊（P3）
- 文件：StepsFlow.vue，当前用
static/images/home/step_0x_*.jpg - 方案：四张步骤图全部替换为切图原图（4步开始/01~04步骤-*.png），路径走 buildUrl
UI-005 首页 · 用强大的功能开启盈利快车道 · 配图模糊（P3）
- 文件：PlatformFeatures.vue，当前用
static/images/home/feat_*.jpg - 方案：四张功能图全部替换为切图原图（用强大功能/*.png），路径走 buildUrl
UI-006 首页 · 为什么选择 Inkreach · 文案与间距（P1）
- 文件：WhyChoose.vue
- 方案：
- 标题英文统一为
Inkreach（大小写按此，不使用全大写） - 上下间距调整为与左右间距一致（按设计稿量取 px 后换算 rpx）
- 标题英文统一为
UI-007 首页 · 公司简介 · 添加背景图（P1）
- 文件：CompanyIntro.vue
- 方案：为该区块添加背景图
公司简介背景.png（线上路径见 2.2），铺满区块，内容层叠加在背景之上
UI-008 首页 · 联系方式 · 电话号码字号（P2）
- 文件：CompanyIntro.vue（电话栏，约第 72-74 行）
- 方案：电话号码字号调整为 16号 → 31rpx
UI-009 产品页 · 搜索栏 · 图标与搜索按钮（P1）
- 文件：SearchBar.vue
- 方案（按 Figma node-id=1962-143）：
- emoji 🔍 替换为设计稿导出的
icon_search.png（31rpx，Figma 3 倍图 48×48） - 搜索框右侧增加"搜索"按钮：96×54rpx、
#FF6800、圆角 27rpx、白字 25rpx，距框边缘 4rpx，点击触发搜索 - 搜索框 209×32px → 402×62rpx，
#F5F5F5圆角 31rpx；占位文案"搜索产品"#92929225rpx；上下留白 6px→12rpx
- emoji 🔍 替换为设计稿导出的
UI-0010 产品页 · 搜索栏 · 筛选被遮挡（P1）
- 文件：SearchBar.vue / products.vue / products.css
- 被遮挡原因：筛选按钮原在搜索行右侧，小程序胶囊按钮恰好覆盖该区域
- 方案（按设计稿+实际确认）：筛选入口与已选标签合并为同一行（ActiveFilters.vue 重构）：
[筛选图标 35rpx] [已选标签 scroll-x 横向滚动不换行] [清除（有标签才显示）]；搜索行右侧留空避开胶囊；FilterDrawer 弹窗逻辑不变（入口 emitopen→ 父组件toggleFilter）
UI-0011 产品页 · 国家分类 · 间距（P3）
- 文件：CountryBar.vue
- 方案：
- 标签内国旗与名称间距 = 4px → 8rpx
- 标签上下间距在现有基础上增加 2px → 4rpx
UI-0012 产品页 · 产品列表 · 大背景灰色值（P1）
- 文件：products.vue/products.css（页面容器背景），涉及 ProductGrid.vue 第 132 行
#f2f2f2 - 方案：页面大背景灰色统一调整为 #ECECEC
UI-0013 标签栏 · 产品图标大小不一致（P1）
- 文件：pages.json（tabBar 配置，第 28-44 行），图标在
static/icons/tabbar/ - 方案：检查 tab_product 选中/未选中两张图的画布尺寸是否一致；统一为同一尺寸（推荐与 home 图标一致，或按设计稿重出图）。注意 tabBar 图标必须是 png（小程序限制）
UI-0014 产品详情 · 顶部导航缺失（P1）
- 文件：product-detail.vue（该页已设
navigationStyle: custom） - 方案：在页面顶部（状态栏高度 padding 之下）增加自定义导航栏：左侧返回按钮（
uni.navigateBack）+ 居中标题"产品详情"
四、建议实施顺序
- P1 先行：UI-001、UI-006、UI-007、UI-009、UI-0010、UI-0012、UI-0013、UI-0014
- P2 次之：UI-002、UI-003、UI-008
- P3 收尾：UI-004、UI-005、UI-0011
前置依赖：切图文件夹改名 miniprogram 并上传服务器后，远程图片/字体路径才可访问；UI-009 的搜索按钮图标需设计补充切图。
验证方式：每项修改后在微信开发者工具 + H5 双端检查显示效果；图片类修改需确认线上 URL 可直接访问（浏览器打开 buildUrl 拼出的完整地址）。
五、修改记录（2026-08-31 第一批）
| 编号 | 状态 | 修改内容 |
|---|---|---|
| UI-001 | ✅ 已改 | HeroBanner.vue：删除 logo_en.svg + logo_cn.svg 双图，改用单张远程 logo.png（buildUrl 拼接，320×60rpx aspectFit） |
| UI-002 | ✅ 已改 | HeroBanner.vue .stat-label 字号 16rpx → 19rpx（10号） |
| UI-003 | ✅ 已改 | HeroBanner.vue 主视觉图改用远程高清原图 首页主视觉全球图.png |
| UI-004 | ✅ 已改 | mock.js stepList 四张图 → 远程 4步开始/01~04步骤-*.png 原图 |
| UI-005 | ✅ 已改 | mock.js featureList 四张图 → 远程 用强大功能/*.png 原图 |
| UI-006 | ✅ 已改 | WhyChoose.vue：标题"为什么选择Inkrecah？"→"为什么选择Inkreach？"；卡片去掉 margin-bottom，上下间距统一用 gap 20rpx 与左右一致；区块上下留白对称（96rpx） |
| UI-007 | ✅ 已改 | CompanyIntro.vue 背景图改用远程切图原图 公司简介背景.png |
| UI-008 | ✅ 已改 | CompanyIntro.vue .phone-text 字号 23rpx → 31rpx（16号） |
| UI-009 | ✅ 已改 | SearchBar.vue：emoji 🔍 → Figma 导出 icon_search.png（31rpx）；新增橙色"搜索"按钮（96×54rpx #FF6800 圆角 27rpx，点击/键盘确认均触发搜索）；搜索框 402×62rpx #F5F5F5 圆角 31rpx，占位"搜索产品" 25rpx #929292 |
| UI-0010 | ✅ 已改 | 筛选入口从搜索行（被胶囊遮挡）移至商品区顶部；ActiveFilters.vue 重构为一行布局：筛选图标 + 已选标签横向滚动（scroll-x 不换行）+ 清除按钮，FilterDrawer 逻辑不变 |
| UI-0011 | ✅ 已改 | CountryBar.vue：国旗与名称间距 20rpx → 8rpx（4px）；标签上下 row-gap 16rpx → 20rpx（+2px） |
| UI-0012 | ✅ 已改 | products.css 页面背景 + ProductGrid.vue 右侧内容区背景 → #ECECEC |
| UI-0013 | ✅ 已改 | tab_product_gray/orange.png 由 57×57 放大至 72×72（Pillow LANCZOS），与 home 图标一致 |
| UI-0014 | ⏸ 暂缓 | 按要求暂不修改（Figma node-id=1508-155） |
| 全局字体 | ✅ 已改 | 首页 index.vue onLoad 用 uni.loadFontFace(global: true) 加载 fonts/PingFang-Regular.subset.ttf（family 自定义名 PingFangSC；App.vue onLaunch 调用会报 not font page，已移至页面）；app.css 字体栈首位插入 'PingFangSC'，加载失败自动回退系统字体 |
注意事项：
- 远程图片依赖服务器
/assets/miniprogram/下对应文件（保留切图原始中文文件名：logo.png、首页主视觉全球图.png、公司简介背景.png、4步开始/×4、用强大功能/×4），访问前确认已部署，文件名与映射表（2.2 节）一致 - 原 logo_en.svg / logo_cn.svg 仍留在 static/icons/home/ 中，已无引用，可留可删