inkreachhub/inkreach-uni
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
25657c613a2fc30ee284fee9f7d4730bbd40b4f5
inkreach-uni/UI修改计划.md
T

288 lines
18 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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()` 拼接：
```js
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](https://github.com/ecomfe/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](pages/index/index.vue) 的 `onLoad`** 中全局加载（注意：不能放 App.vue 的 onLaunch，页面未创建会报 `loadFontFace:fail not font page`），小程序/H5/App 三端都支持：
```js
// 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](app.css) 即可
- 小程序端：基础库 2.10.0 起支持 wxss 中的网络字体 @font-face，但兼容性不如方式一稳定
```css
@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 字）+ 数字英文，子集约 **300~500KB**
- 动态数据（如后端商品名）出现子集外的字时，**缺字自动回退系统字体**，不会乱码，仅个别字字形不同，几乎看不出
- 若担心覆盖不足，改用"常用 3500 字"子集（1~2MB），覆盖 99% 动态文字
- 缺字回退由系统自动完成，CSS 字体栈里排好回退顺序即可，无需额外代码
#### 最终建议组合
1. 第一步：Regular + Medium 做**数字/英文子集**（方案 A）上线，零风险
2. 首页 index.vue `onLoad` 用 `uni.loadFontFace(global: true)` 加载（不能在 App.vue onLaunch 调，会报 not font page）
3. app.css 全局字体栈改为 `'PingFangSC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif`（数字英文走子集字体，中文自动回退系统 PingFang/苹方，iOS 与设计稿完全一致）
4. 第二步（可选）：看安卓真机效果后，若要求中文统一，再做中文"实际用字子集"或常用 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](pages/index/components/HeroBanner.vue)（第 19-20 行）
- 现状：两张图 `logo_en.svg` + `logo_cn.svg`
- 方案：删除两张 svg，改用单张 logo 图：`buildUrl(ASSET_BASE + 'logo.png')`，按设计稿调整尺寸与分割线表现
### UI-002 首页第一屏 · 数据列辅助文案字号（P2）
- 文件：[HeroBanner.vue](pages/index/components/HeroBanner.vue)（数据列 label，文案见 [mock.js](pages/index/mock.js) 第 6 行"全球本土工厂"）
- 方案：辅助文案（label）字号调整为 10号 → **19rpx**
### UI-003 首页第一屏 · 全球地图主视觉模糊（P2）
- 文件：[HeroBanner.vue](pages/index/components/HeroBanner.vue)
- 方案：替换为切图高清原图 `首页主视觉全球图.png`（线上路径见 2.2）
### UI-004 首页 · 4步开始你的按需定制生意 · 配图模糊（P3）
- 文件：[StepsFlow.vue](pages/index/components/StepsFlow.vue)，当前用 `static/images/home/step_0x_*.jpg`
- 方案：四张步骤图全部替换为切图原图（4步开始/01~04步骤-*.png），路径走 buildUrl
### UI-005 首页 · 用强大的功能开启盈利快车道 · 配图模糊（P3）
- 文件：[PlatformFeatures.vue](pages/index/components/PlatformFeatures.vue)，当前用 `static/images/home/feat_*.jpg`
- 方案：四张功能图全部替换为切图原图（用强大功能/*.png），路径走 buildUrl
### UI-006 首页 · 为什么选择 Inkreach · 文案与间距（P1）
- 文件：[WhyChoose.vue](pages/index/components/WhyChoose.vue)
- 方案：
1. 标题英文统一为 `Inkreach`（大小写按此，不使用全大写）
2. 上下间距调整为与左右间距一致（按设计稿量取 px 后换算 rpx）
### UI-007 首页 · 公司简介 · 添加背景图（P1）
- 文件：[CompanyIntro.vue](pages/index/components/CompanyIntro.vue)
- 方案：为该区块添加背景图 `公司简介背景.png`（线上路径见 2.2），铺满区块，内容层叠加在背景之上
### UI-008 首页 · 联系方式 · 电话号码字号（P2）
- 文件：[CompanyIntro.vue](pages/index/components/CompanyIntro.vue)（电话栏，约第 72-74 行）
- 方案：电话号码字号调整为 16号 → **31rpx**
### UI-009 产品页 · 搜索栏 · 图标与搜索按钮（P1）
- 文件：[SearchBar.vue](pages/products/components/SearchBar.vue)
- 方案（按 Figma node-id=1962-143）：
1. emoji 🔍 替换为设计稿导出的 `icon_search.png`（31rpx，Figma 3 倍图 48×48）
2. 搜索框右侧增加"搜索"按钮：96×54rpx、`#FF6800`、圆角 27rpx、白字 25rpx，距框边缘 4rpx，点击触发搜索
3. 搜索框 209×32px → 402×62rpx，`#F5F5F5` 圆角 31rpx；占位文案"搜索产品" `#929292` 25rpx；上下留白 6px→12rpx
### UI-0010 产品页 · 搜索栏 · 筛选被遮挡（P1）
- 文件：[SearchBar.vue](pages/products/components/SearchBar.vue) / [products.vue](pages/products/products.vue) / [products.css](pages/products/products.css)
- 被遮挡原因：筛选按钮原在搜索行右侧，小程序胶囊按钮恰好覆盖该区域
- 方案（按设计稿+实际确认）：筛选入口与已选标签合并为**同一行**（[ActiveFilters.vue](pages/products/components/ActiveFilters.vue) 重构）：`[筛选图标 35rpx] [已选标签 scroll-x 横向滚动不换行] [清除（有标签才显示）]`；搜索行右侧留空避开胶囊；FilterDrawer 弹窗逻辑不变（入口 emit `open` → 父组件 `toggleFilter`）
### UI-0011 产品页 · 国家分类 · 间距（P3）
- 文件：[CountryBar.vue](pages/products/components/CountryBar.vue)
- 方案：
1. 标签内国旗与名称间距 = 4px → **8rpx**
2. 标签上下间距在现有基础上增加 2px → **4rpx**
### UI-0012 产品页 · 产品列表 · 大背景灰色值（P1）
- 文件：[products.vue](pages/products/products.vue)/[products.css](pages/products/products.css)（页面容器背景），涉及 [ProductGrid.vue](pages/products/components/ProductGrid.vue) 第 132 行 `#f2f2f2`
- 方案：页面大背景灰色统一调整为 **#ECECEC**
### UI-0013 标签栏 · 产品图标大小不一致（P1）
- 文件：[pages.json](pages.json)（tabBar 配置，第 28-44 行），图标在 `static/icons/tabbar/`
- 方案：检查 tab_product 选中/未选中两张图的画布尺寸是否一致；统一为同一尺寸（推荐与 home 图标一致，或按设计稿重出图）。注意 tabBar 图标必须是 png（小程序限制）
### UI-0014 产品详情 · 顶部导航缺失（P1）
- 文件：[product-detail.vue](pages/product-detail/product-detail.vue)（该页已设 `navigationStyle: custom`）
- 方案：在页面顶部（状态栏高度 padding 之下）增加自定义导航栏：左侧返回按钮（`uni.navigateBack`）+ 居中标题"产品详情"
---
## 四、建议实施顺序
1. **P1 先行**：UI-001、UI-006、UI-007、UI-009、UI-0010、UI-0012、UI-0013、UI-0014
2. **P2 次之**：UI-002、UI-003、UI-008
3. **P3 收尾**：UI-004、UI-005、UI-0011
**前置依赖**：切图文件夹改名 `miniprogram` 并上传服务器后，远程图片/字体路径才可访问；UI-009 的搜索按钮图标需设计补充切图。
**验证方式**：每项修改后在微信开发者工具 + H5 双端检查显示效果；图片类修改需确认线上 URL 可直接访问（浏览器打开 buildUrl 拼出的完整地址）。
---
## 五、修改记录（2026-08-31 第一批）
| 编号 | 状态 | 修改内容 |
| --- | --- | --- |
| UI-001 | ✅ 已改 | [HeroBanner.vue](pages/index/components/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](pages/index/mock.js) stepList 四张图 → 远程 4步开始/01~04步骤-*.png 原图 |
| UI-005 | ✅ 已改 | mock.js featureList 四张图 → 远程 用强大功能/*.png 原图 |
| UI-006 | ✅ 已改 | [WhyChoose.vue](pages/index/components/WhyChoose.vue)：标题"为什么选择Inkrecah？"→"为什么选择Inkreach？"；卡片去掉 margin-bottom，上下间距统一用 gap 20rpx 与左右一致；区块上下留白对称（96rpx） |
| UI-007 | ✅ 已改 | [CompanyIntro.vue](pages/index/components/CompanyIntro.vue) 背景图改用远程切图原图 公司简介背景.png；透明度最终按用户确认：**不设 opacity，原图直接展示**（Figma 标注 0.2 + backdrop blur，但实际观感过淡，用户要求原图） |
| UI-008 | ✅ 已改 | CompanyIntro.vue `.phone-text` 字号 23rpx → 31rpx（16号） |
| UI-009 | ✅ 已改 | [SearchBar.vue](pages/products/components/SearchBar.vue)：emoji 🔍 → Figma 导出 icon_search.png（31rpx）；新增橙色"搜索"按钮（96×54rpx `#FF6800` 圆角 27rpx，点击/键盘确认均触发搜索）；搜索框 402×62rpx `#F5F5F5` 圆角 31rpx，占位"搜索产品" 25rpx `#929292` |
| UI-0010 | ✅ 已改 | 筛选入口从搜索行（被胶囊遮挡）移至商品区顶部；[ActiveFilters.vue](pages/products/components/ActiveFilters.vue) 重构为一行布局：筛选图标 + 已选标签横向滚动（scroll-x 不换行）+ 清除按钮，FilterDrawer 逻辑不变 |
| UI-0011 | ✅ 已改 | [CountryBar.vue](pages/products/components/CountryBar.vue)：国旗与名称间距 20rpx → 8rpx（4px）；标签上下 row-gap 16rpx → 20rpx（+2px） |
| UI-0012 | ✅ 已改 | [products.css](pages/products/products.css) 页面背景 + [ProductGrid.vue](pages/products/components/ProductGrid.vue) 右侧内容区背景 → #ECECEC |
| UI-0013 | ✅ 已改 | tabbar 4 图标改为 Figma 官方导出（1594-124/1962-307 首页、1594-115/1962-309 产品）；product 原画布 19px vs home 24px 是大小不一的根源，按 24/19×3.79 倍导出统一 72×72 |
| UI-0014 | ✅ 已改 | [product-detail.vue](pages/product-detail/product-detail.vue) 增加自定义导航栏（navigationStyle:custom）：固定白底，状态栏占位 + 44px 导航行，左侧返回按钮（CSS 边框箭头，44px 命中区，无历史时回首页）+ 居中标题"产品详情"；内容区 paddingTop 改为 statusBarHeight + 44px |
| 全局字体 | ✅ 已改 | 首页 [index.vue](pages/index/index.vue) `onLoad` 用 `uni.loadFontFace(global: true)` 加载 `fonts/PingFang-Regular.subset.ttf`（family 自定义名 `PingFangSC`；App.vue onLaunch 调用会报 not font page，已移至页面）；[app.css](app.css) 字体栈首位插入 `'PingFangSC'`，加载失败自动回退系统字体 |
**注意事项**：
- 远程图片依赖服务器 `/assets/miniprogram/` 下对应文件（保留切图原始中文文件名：logo.png、首页主视觉全球图.png、公司简介背景.png、4步开始/×4、用强大功能/×4），访问前确认已部署，文件名与映射表（2.2 节）一致
- 包体清理（2026-08-31）：已删除 12 个无引用静态图（logo_en/cn.svg、step_01~04_*.jpg、feat_*.jpg、Rectangle_178_1426_1248.png、公司简介背景_1461_1606.png），共约 362KB；保留的静态图均有引用（tabbar、能力/优势图标、横幅小图、联系方式图、Figma 导出搜索/筛选图标）
Reference in New Issue View Git Blame Copy Permalink