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

- 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
@@ -1,5 +1,6 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
<title>日历</title>
<rect x="16" y="21" width="49" height="45" rx="9" fill="#F4005A" stroke="#F4005A" stroke-width="4"/>
<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>

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">
<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>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
<title>日历</title>
<rect x="16" y="21" width="49" height="45" rx="9" stroke="#47528C" stroke-width="4"/>
<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>

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">
<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>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
<title>爱心</title>
<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"/>
</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">
<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>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
<title>爱心</title>
<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"/>
</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">
<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>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
<title>房子</title>
<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"/>
</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">
<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>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
<title>房子</title>
<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"/>
</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">
<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>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
<title>对话气泡</title>
<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"/>
<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>

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">
<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>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
<title>对话气泡</title>
<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"/>
<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>

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">
<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>
<style>.heart{fill:#E96B6B;stroke:#E96B6B}.badge{fill:white}</style>
<title>人物</title>
<circle cx="40.5" cy="23" r="10.5" fill="#F4005A" stroke="#F4005A" stroke-width="4"/>
<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>

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">
<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>
<style>.heart{fill:none;stroke:#999999}.badge{fill:white}</style>
<title>人物</title>
<circle cx="40.5" cy="23" r="10.5" stroke="#47528C" stroke-width="4"/>
<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>

Before

Width:  |  Height:  |  Size: 537 B

After

Width:  |  Height:  |  Size: 339 B