重构底部导航图标:照参考图重做形状与配色

- 5 个 Tab 图标形状改为参考图语言:房子(首页)/爱心(找对象)/对话气泡(消息)/日历加号(活动)/人物(我的)
- 配色改为参考图方案:默认态藏青蓝 #47528C、选中态玫红 #F4005A(与导航栏品牌色同系)
- 同步重生成 1x/2x/3x 共 30 张透明 RGBA PNG(Edge CDP 栅格化)
- app.json tabBar.color/selectedColor 对齐新配色
- 守卫 tabbar-icons.mjs 增加两态颜色与 app.json 一致性断言
- 静态预览复刻 tabBar 配色同步更新;DESIGN.md 同步
This commit is contained in:
WorkBuddy
2026-09-23 16:30:32 +08:00
parent 45e84722e1
commit 1ad9793ea2
45 changed files with 66 additions and 59 deletions
+3 -3
View File
@@ -23,15 +23,15 @@
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; } .phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
.wx-page { min-height:100%; } .wx-page { min-height:100%; }
/* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段: /* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段:
color #999999 / selectedColor #E96B6B / backgroundColor #FFFFFF / borderStyle black。 color #47528C / selectedColor #F4005A / backgroundColor #FFFFFF / borderStyle black。
图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */ 图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */
.mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch; .mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch;
background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; } background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; }
.mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; .mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:2px; padding:6px 0 0; } align-items:center; justify-content:center; gap:2px; padding:6px 0 0; }
.mini-tabbar__icon { width:26px; height:26px; display:block; } .mini-tabbar__icon { width:26px; height:26px; display:block; }
.mini-tabbar__label { font-size:10px; line-height:14px; color:#999999; } .mini-tabbar__label { font-size:10px; line-height:14px; color:#47528C; }
.mini-tabbar__item.is-active .mini-tabbar__label { color:#E96B6B; } .mini-tabbar__item.is-active .mini-tabbar__label { color:#F4005A; }
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */ /* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
/** /**
* 丹阳公益婚恋服务平台 - 全局 Design Token * 丹阳公益婚恋服务平台 - 全局 Design Token
+2 -2
View File
@@ -76,8 +76,8 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
}, },
"tabBar": { "tabBar": {
"color": "#999999", "color": "#47528C",
"selectedColor": "#E96B6B", "selectedColor": "#F4005A",
"backgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF",
"borderStyle": "black", "borderStyle": "black",
"list": [ "list": [
+14 -14
View File
@@ -2,7 +2,7 @@
## 概述 ## 概述
为小程序 5 个底部导航 Tab 设计的圆润线性风格图标,包含未选中(灰色)和选中(玫瑰红)两种状态,适配三种屏幕密度(1x/2x/3x)。 为小程序 5 个底部导航 Tab 设计的圆润线性风格图标,包含未选中(藏青蓝 `#47528C`)和选中(玫红 `#F4005A`)两种状态,适配三种屏幕密度(1x/2x/3x)。配色取自产品参考图,藏青蓝与导航栏品牌色(`#171D72`)同系、玫红作为高对比激活色。
> ⚠️ **改动本目录前必读 —— 图标整排变「破图」的头号原因** > ⚠️ **改动本目录前必读 —— 图标整排变「破图」的头号原因**
> >
@@ -26,41 +26,41 @@
| 安全区域 | 53 × 53 px(最小边距 14px) | | 安全区域 | 53 × 53 px(最小边距 14px) |
| 线宽 | 4px(缩放到导航栏后约 1.3px) | | 线宽 | 4px(缩放到导航栏后约 1.3px) |
| 圆角 | 端点圆角 + 转折圆角 | | 圆角 | 端点圆角 + 转折圆角 |
| 填充 | 默认态线性;选中态填充核心爱心 | | 填充 | 默认态线性描边;选中态实心填充 + 白点/白线点缀 |
## 颜色规范 ## 颜色规范
| 状态 | 颜色值 | 用途 | | 状态 | 颜色值 | 用途 |
|------|--------|------| |------|--------|------|
| 未选中 | `#999999` | 默认状态图标 | | 未选中 | `#47528C` | 默认状态图标(藏青蓝,与导航栏品牌色同系) |
| 选中 | `#E96B6B` | 激活状态图标 | | 选中 | `#F4005A` | 激活状态图标(玫红/品红,高对比) |
| 背景 | `#FFFFFF` | 透明背景(PNG 支持 alpha) | | 背景 | 透明 | PNG 支持 alpha,无需底色 |
## 图标清单 ## 图标清单
### 1. 首页 (home) ### 1. 首页 (home)
- **意象**: 爱心小屋 - **意象**: 家
- **元素**: 圆角屋顶 + 房屋主体 + 门内爱心 - **元素**: 圆角屋顶 + 房屋主体 + 门洞(线条描边,选中态实心玫红)
- **文件**: `home.png` / `home-active.png` - **文件**: `home.png` / `home-active.png`
### 2. 找对象 (discover) ### 2. 找对象 (discover)
- **意象**: 双人缘分 - **意象**: 心动缘分
- **元素**: 两个人物轮廓 + 中央爱心 - **元素**: 单颗爱心轮廓(选中态实心玫红),呼应「找对象」主题
- **文件**: `discover.png` / `discover-active.png` - **文件**: `discover.png` / `discover-active.png`
### 3. 消息 (message) ### 3. 消息 (message)
- **意象**: 真诚沟通 - **意象**: 真诚沟通
- **元素**: 圆角气泡 + 爱心 - **元素**: 圆角对话气泡 + 三个圆点(选中态气泡实心玫红、圆点为白)
- **文件**: `message.png` / `message-active.png` - **文件**: `message.png` / `message-active.png`
### 4. 活动 (activity) ### 4. 活动 (activity)
- **意象**: 公益相遇 - **意象**: 公益相遇
- **元素**: 日历主体 + 挂环 + 爱心 - **元素**: 圆角日历主体 + 顶部双挂环 + 中央加号(选中态日历实心玫红、加号为白)
- **文件**: `activity.png` / `activity-active.png` - **文件**: `activity.png` / `activity-active.png`
### 5. 我的 (mine) ### 5. 我的 (mine)
- **意象**: 个人守护 - **意象**: 个人中心
- **元素**: 单人轮廓 + 胸前爱心 - **元素**: 圆形头像 + 半身轮廓(选中态实心玫红)
- **文件**: `mine.png` / `mine-active.png` - **文件**: `mine.png` / `mine-active.png`
## 导出尺寸 ## 导出尺寸
@@ -78,7 +78,7 @@
所有图标均提供可编辑的 SVG 版本,位于 `svg/` 目录: 所有图标均提供可编辑的 SVG 版本,位于 `svg/` 目录:
- 可直接在 Figma 中导入编辑 - 可直接在 Figma 中导入编辑
- 可调整颜色、粗细、圆角等参数 - 可调整颜色、粗细、圆角等参数
- 颜色替换:将 `stroke="#999999"` 改为 `stroke="#E96B6B"` 即可切换激活状态 - 颜色替换:将 `stroke="#47528C"` 改为 `fill="#F4005A" stroke="#F4005A"` 即可切换激活状态(选中态为实心填充 + 白色点缀)
## 文件位置 ## 文件位置
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

@@ -1,5 +1,6 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>公益日历</title> <title>日历</title>
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="17" y="20" width="47" height="44" rx="8"/><path d="M17 33h47M28 15v10M53 15v10"/><path class="heart" d="M40.5 57c-6.5-4.3-9.5-7.2-9.5-10.7 0-2.9 2.3-5.1 5.1-5.1 1.9 0 3.5.9 4.4 2.4.9-1.5 2.5-2.4 4.5-2.4 2.8 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-9.6 10.7Z"/></g> <rect x="16" y="21" width="49" height="45" rx="9" fill="#F4005A" stroke="#F4005A" stroke-width="4"/>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style> <path d="M28 13 V23 M53 13 V23" stroke="#F4005A" stroke-width="4" stroke-linecap="round"/>
<path d="M29.5 43.5 H51.5 M40.5 32 V55" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 555 B

After

Width:  |  Height:  |  Size: 424 B

+4 -3
View File
@@ -1,5 +1,6 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>公益日历</title> <title>日历</title>
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="17" y="20" width="47" height="44" rx="8"/><path d="M17 33h47M28 15v10M53 15v10"/><path class="heart" d="M40.5 57c-6.5-4.3-9.5-7.2-9.5-10.7 0-2.9 2.3-5.1 5.1-5.1 1.9 0 3.5.9 4.4 2.4.9-1.5 2.5-2.4 4.5-2.4 2.8 0 5.1 2.2 5.1 5.1 0 3.5-3.1 6.4-9.6 10.7Z"/></g> <rect x="16" y="21" width="49" height="45" rx="9" stroke="#47528C" stroke-width="4"/>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style> <path d="M28 13 V23 M53 13 V23" stroke="#47528C" stroke-width="4" stroke-linecap="round"/>
<path d="M29.5 43.5 H51.5 M40.5 32 V55" stroke="#47528C" stroke-width="4" stroke-linecap="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 552 B

After

Width:  |  Height:  |  Size: 409 B

@@ -1,5 +1,4 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>双人缘分</title> <title>爱心</title>
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="26" cy="29" r="7"/><circle cx="55" cy="29" r="7"/><path d="M14 55c1-10 6-15 15-15 4 0 7 1 9 3M67 55c-1-10-6-15-15-15-4 0-7 1-9 3"/><path class="heart" d="M40.5 58c-6.8-4.5-10-7.6-10-11.2 0-3 2.3-5.3 5.3-5.3 2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3 0 5.3 2.3 5.3 5.3 0 3.6-3.2 6.7-10 11.2Z"/></g> <path d="M40.5 63.5 C23.5 51.5 14.5 42.5 14.5 31.5 C14.5 23 21 16.5 29.5 16.5 C34.5 16.5 38.5 19.3 40.5 23.5 C42.5 19.3 46.5 16.5 51.5 16.5 C60 16.5 66.5 23 66.5 31.5 C66.5 42.5 57.5 51.5 40.5 63.5 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 599 B

After

Width:  |  Height:  |  Size: 428 B

+2 -3
View File
@@ -1,5 +1,4 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>双人缘分</title> <title>爱心</title>
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="26" cy="29" r="7"/><circle cx="55" cy="29" r="7"/><path d="M14 55c1-10 6-15 15-15 4 0 7 1 9 3M67 55c-1-10-6-15-15-15-4 0-7 1-9 3"/><path class="heart" d="M40.5 58c-6.8-4.5-10-7.6-10-11.2 0-3 2.3-5.3 5.3-5.3 2 0 3.7 1 4.7 2.5 1-1.5 2.7-2.5 4.7-2.5 3 0 5.3 2.3 5.3 5.3 0 3.6-3.2 6.7-10 11.2Z"/></g> <path d="M40.5 63.5 C23.5 51.5 14.5 42.5 14.5 31.5 C14.5 23 21 16.5 29.5 16.5 C34.5 16.5 38.5 19.3 40.5 23.5 C42.5 19.3 46.5 16.5 51.5 16.5 C60 16.5 66.5 23 66.5 31.5 C66.5 42.5 57.5 51.5 40.5 63.5 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 596 B

After

Width:  |  Height:  |  Size: 413 B

+2 -3
View File
@@ -1,5 +1,4 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>爱心小屋</title> <title>房子</title>
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 38 40.5 19 63 38"/><rect x="22" y="35" width="37" height="28" rx="7"/><path d="M31 63V49h19v14"/><path class="heart" d="M40.5 54c-5-3.4-7-5.4-7-8.2 0-2.3 1.8-4.1 4.1-4.1 1.3 0 2.4.6 2.9 1.6.6-1 1.7-1.6 3-1.6 2.3 0 4.1 1.8 4.1 4.1 0 2.8-2.1 4.8-7.1 8.2Z"/></g> <path d="M40.5 14.5 L68 38 L61 38 L61 57 A8 8 0 0 1 53 65 L47 65 L47 51.5 L34 51.5 L34 65 L28 65 A8 8 0 0 1 20 57 L20 38 L13 38 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 563 B

After

Width:  |  Height:  |  Size: 358 B

+2 -3
View File
@@ -1,5 +1,4 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>爱心小屋</title> <title>房子</title>
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 38 40.5 19 63 38"/><rect x="22" y="35" width="37" height="28" rx="7"/><path d="M31 63V49h19v14"/><path class="heart" d="M40.5 54c-5-3.4-7-5.4-7-8.2 0-2.3 1.8-4.1 4.1-4.1 1.3 0 2.4.6 2.9 1.6.6-1 1.7-1.6 3-1.6 2.3 0 4.1 1.8 4.1 4.1 0 2.8-2.1 4.8-7.1 8.2Z"/></g> <path d="M40.5 14.5 L68 38 L61 38 L61 57 A8 8 0 0 1 53 65 L47 65 L47 51.5 L34 51.5 L34 65 L28 65 A8 8 0 0 1 20 57 L20 38 L13 38 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 560 B

After

Width:  |  Height:  |  Size: 343 B

+5 -3
View File
@@ -1,5 +1,7 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>爱心对话</title> <title>对话气泡</title>
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M23 60 15 66l2.4-11.2A12 12 0 0 1 14 46V29a12 12 0 0 1 12-12h29a12 12 0 0 1 12 12v17a12 12 0 0 1-12 12H27c-1.4 0-2.7.7-4 2Z"/><path class="heart" d="M40.5 48c-7.5-5-11-8.4-11-12.4 0-3.3 2.6-5.9 5.9-5.9 2.2 0 4.1 1.1 5.1 2.8 1.1-1.7 3-2.8 5.2-2.8 3.3 0 5.9 2.6 5.9 5.9 0 4-3.6 7.4-11.1 12.4Z"/></g> <path d="M21.58 44.33 A22 22 0 1 1 27.46 51.34 L17 57.5 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style> <circle cx="30.5" cy="34" r="2.9" fill="#FFFFFF"/>
<circle cx="41" cy="34" r="2.9" fill="#FFFFFF"/>
<circle cx="51.5" cy="34" r="2.9" fill="#FFFFFF"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 597 B

After

Width:  |  Height:  |  Size: 449 B

+5 -3
View File
@@ -1,5 +1,7 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>爱心对话</title> <title>对话气泡</title>
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M23 60 15 66l2.4-11.2A12 12 0 0 1 14 46V29a12 12 0 0 1 12-12h29a12 12 0 0 1 12 12v17a12 12 0 0 1-12 12H27c-1.4 0-2.7.7-4 2Z"/><path class="heart" d="M40.5 48c-7.5-5-11-8.4-11-12.4 0-3.3 2.6-5.9 5.9-5.9 2.2 0 4.1 1.1 5.1 2.8 1.1-1.7 3-2.8 5.2-2.8 3.3 0 5.9 2.6 5.9 5.9 0 4-3.6 7.4-11.1 12.4Z"/></g> <path d="M21.58 44.33 A22 22 0 1 1 27.46 51.34 L17 57.5 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style> <circle cx="30.5" cy="34" r="2.9" fill="#47528C"/>
<circle cx="41" cy="34" r="2.9" fill="#47528C"/>
<circle cx="51.5" cy="34" r="2.9" fill="#47528C"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 594 B

After

Width:  |  Height:  |  Size: 434 B

+3 -3
View File
@@ -1,5 +1,5 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>个人守护</title> <title>人物</title>
<g stroke="#E96B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="40.5" cy="27" r="8"/><path d="M20 64c.7-14 8-21 20.5-21S60.3 50 61 64"/><path class="heart" d="M40.5 59c-5.2-3.5-7.7-5.8-7.7-8.6 0-2.3 1.9-4.2 4.2-4.2 1.6 0 2.8.8 3.5 2 .8-1.2 2-2 3.6-2 2.3 0 4.2 1.9 4.2 4.2 0 2.8-2.5 5.1-7.8 8.6Z"/></g> <circle cx="40.5" cy="23" r="10.5" fill="#F4005A" stroke="#F4005A" stroke-width="4"/>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style> <path d="M20 65 V57.5 A20.5 20.5 0 0 1 61 57.5 V65 Z" fill="#F4005A" stroke="#F4005A" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 540 B

After

Width:  |  Height:  |  Size: 369 B

+3 -3
View File
@@ -1,5 +1,5 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>个人守护</title> <title>人物</title>
<g stroke="#999999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><circle cx="40.5" cy="27" r="8"/><path d="M20 64c.7-14 8-21 20.5-21S60.3 50 61 64"/><path class="heart" d="M40.5 59c-5.2-3.5-7.7-5.8-7.7-8.6 0-2.3 1.9-4.2 4.2-4.2 1.6 0 2.8.8 3.5 2 .8-1.2 2-2 3.6-2 2.3 0 4.2 1.9 4.2 4.2 0 2.8-2.5 5.1-7.8 8.6Z"/></g> <circle cx="40.5" cy="23" r="10.5" stroke="#47528C" stroke-width="4"/>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style> <path d="M20 65 V57.5 A20.5 20.5 0 0 1 61 57.5 V65 Z" stroke="#47528C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 537 B

After

Width:  |  Height:  |  Size: 339 B

+3 -3
View File
@@ -804,15 +804,15 @@ function main() {
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; } .phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
.wx-page { min-height:100%; } .wx-page { min-height:100%; }
/* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段: /* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段:
color #999999 / selectedColor #E96B6B / backgroundColor #FFFFFF / borderStyle black。 color #47528C / selectedColor #F4005A / backgroundColor #FFFFFF / borderStyle black。
图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */ 图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */
.mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch; .mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch;
background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; } background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; }
.mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; .mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:2px; padding:6px 0 0; } align-items:center; justify-content:center; gap:2px; padding:6px 0 0; }
.mini-tabbar__icon { width:26px; height:26px; display:block; } .mini-tabbar__icon { width:26px; height:26px; display:block; }
.mini-tabbar__label { font-size:10px; line-height:14px; color:#999999; } .mini-tabbar__label { font-size:10px; line-height:14px; color:#47528C; }
.mini-tabbar__item.is-active .mini-tabbar__label { color:#E96B6B; } .mini-tabbar__item.is-active .mini-tabbar__label { color:#F4005A; }
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */ /* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
${cssAll} ${cssAll}
</style> </style>
+12 -7
View File
@@ -5,11 +5,11 @@ import { join } from 'node:path'
const repoRoot = process.cwd() const repoRoot = process.cwd()
const root = join(repoRoot, 'miniapp', 'assets', 'tabbar') const root = join(repoRoot, 'miniapp', 'assets', 'tabbar')
const icons = { const icons = {
home: '爱心小屋', home: '房子',
discover: '双人缘分', discover: '爱心',
message: '爱心对话', message: '对话气泡',
activity: '公益日历', activity: '日历',
mine: '个人守护', mine: '人物',
} }
// ── 1. SVG 源文件:主题化标题 + 两态配色 ────────────────────────────── // ── 1. SVG 源文件:主题化标题 + 两态配色 ──────────────────────────────
@@ -18,8 +18,8 @@ for (const [name, title] of Object.entries(icons)) {
const active = readFileSync(join(root, 'svg', `${name}-active.svg`), 'utf8') const active = readFileSync(join(root, 'svg', `${name}-active.svg`), 'utf8')
assert.match(normal, new RegExp(`<title>${title}</title>`), `${name} 缺少主题化标题`) assert.match(normal, new RegExp(`<title>${title}</title>`), `${name} 缺少主题化标题`)
assert.match(normal, /#999999/i, `${name} 默认态颜色错误`) assert.match(normal, /#47528C/i, `${name} 默认态颜色错误`)
assert.match(active, /#E96B6B/i, `${name} 选中态颜色错误`) assert.match(active, /#F4005A/i, `${name} 选中态颜色错误`)
// ── 2. PNG 规格:正方形、1x/2x/3x、透明 RGBA ──────────────────────── // ── 2. PNG 规格:正方形、1x/2x/3x、透明 RGBA ────────────────────────
for (const suffix of ['', '_2x', '_3x']) { for (const suffix of ['', '_2x', '_3x']) {
@@ -41,6 +41,11 @@ const appJson = JSON.parse(readFileSync(appJsonPath, 'utf8'))
const tabList = appJson.tabBar?.list ?? [] const tabList = appJson.tabBar?.list ?? []
assert.equal(tabList.length, 5, 'tabBar.list 必须为 5 项(微信支持 2~5)') assert.equal(tabList.length, 5, 'tabBar.list 必须为 5 项(微信支持 2~5)')
// 文字与图标同色:color 必须等于 SVG 默认态色,selectedColor 必须等于选中态色,
// 否则会出现「图标是藏青蓝/玫红、文字却是别的颜色」的割裂。
assert.equal(appJson.tabBar?.color, '#47528C', 'tabBar.color 必须与图标默认态同色(#47528C)')
assert.equal(appJson.tabBar?.selectedColor, '#F4005A', 'tabBar.selectedColor 必须与图标选中态同色(#F4005A)')
for (const item of tabList) { for (const item of tabList) {
assert.ok(appJson.pages.includes(item.pagePath), `tabBar pagePath 未在 pages 中注册: ${item.pagePath}`) assert.ok(appJson.pages.includes(item.pagePath), `tabBar pagePath 未在 pages 中注册: ${item.pagePath}`)
for (const key of ['iconPath', 'selectedIconPath']) { for (const key of ['iconPath', 'selectedIconPath']) {