diff --git a/artifacts/ui-redesign/miniapp/preview.html b/artifacts/ui-redesign/miniapp/preview.html index ee87e8e..45106e6 100644 --- a/artifacts/ui-redesign/miniapp/preview.html +++ b/artifacts/ui-redesign/miniapp/preview.html @@ -23,15 +23,15 @@ .phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; } .wx-page { min-height:100%; } /* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段： - color #999999 / selectedColor #E96B6B / backgroundColor #FFFFFF / borderStyle black。 + color #47528C / selectedColor #F4005A / backgroundColor #FFFFFF / borderStyle black。 图标按微信客户端实际渲染尺寸（约 26px）呈现，与 81px 源图尺寸不同；文字 10px 同理。 */ .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; } .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; } .mini-tabbar__icon { width:26px; height:26px; display:block; } - .mini-tabbar__label { font-size:10px; line-height:14px; color:#999999; } - .mini-tabbar__item.is-active .mini-tabbar__label { color:#E96B6B; } + .mini-tabbar__label { font-size:10px; line-height:14px; color:#47528C; } + .mini-tabbar__item.is-active .mini-tabbar__label { color:#F4005A; } /* ====== 以下为页面 WXSS 转换结果（rpx 已按 375 宽换算） ====== */ /** * 丹阳公益婚恋服务平台 - 全局 Design Token diff --git a/miniapp/app.json b/miniapp/app.json index d722741..ed5340d 100644 --- a/miniapp/app.json +++ b/miniapp/app.json @@ -76,8 +76,8 @@ "enablePullDownRefresh": false }, "tabBar": { - "color": "#999999", - "selectedColor": "#E96B6B", + "color": "#47528C", + "selectedColor": "#F4005A", "backgroundColor": "#FFFFFF", "borderStyle": "black", "list": [ diff --git a/miniapp/assets/tabbar/DESIGN.md b/miniapp/assets/tabbar/DESIGN.md index 3f981dd..a7e9f86 100644 --- a/miniapp/assets/tabbar/DESIGN.md +++ b/miniapp/assets/tabbar/DESIGN.md @@ -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） | | 线宽 | 4px（缩放到导航栏后约 1.3px） | | 圆角 | 端点圆角 + 转折圆角 | -| 填充 | 默认态线性；选中态填充核心爱心 | +| 填充 | 默认态线性描边；选中态实心填充 + 白点/白线点缀 | ## 颜色规范 | 状态 | 颜色值 | 用途 | |------|--------|------| -| 未选中 | `#999999` | 默认状态图标 | -| 选中 | `#E96B6B` | 激活状态图标 | -| 背景 | `#FFFFFF` | 透明背景（PNG 支持 alpha） | +| 未选中 | `#47528C` | 默认状态图标（藏青蓝，与导航栏品牌色同系） | +| 选中 | `#F4005A` | 激活状态图标（玫红/品红，高对比） | +| 背景 | 透明 | PNG 支持 alpha，无需底色 | ## 图标清单 ### 1. 首页 (home) -- **意象**: 爱心小屋 -- **元素**: 圆角屋顶 + 房屋主体 + 门内爱心 +- **意象**: 家 +- **元素**: 圆角屋顶 + 房屋主体 + 门洞（线条描边，选中态实心玫红） - **文件**: `home.png` / `home-active.png` ### 2. 找对象 (discover) -- **意象**: 双人缘分 -- **元素**: 两个人物轮廓 + 中央爱心 +- **意象**: 心动缘分 +- **元素**: 单颗爱心轮廓（选中态实心玫红），呼应「找对象」主题 - **文件**: `discover.png` / `discover-active.png` ### 3. 消息 (message) - **意象**: 真诚沟通 -- **元素**: 圆角气泡 + 爱心 +- **元素**: 圆角对话气泡 + 三个圆点（选中态气泡实心玫红、圆点为白） - **文件**: `message.png` / `message-active.png` ### 4. 活动 (activity) - **意象**: 公益相遇 -- **元素**: 日历主体 + 挂环 + 爱心 +- **元素**: 圆角日历主体 + 顶部双挂环 + 中央加号（选中态日历实心玫红、加号为白） - **文件**: `activity.png` / `activity-active.png` ### 5. 我的 (mine) -- **意象**: 个人守护 -- **元素**: 单人轮廓 + 胸前爱心 +- **意象**: 个人中心 +- **元素**: 圆形头像 + 半身轮廓（选中态实心玫红） - **文件**: `mine.png` / `mine-active.png` ## 导出尺寸 @@ -78,7 +78,7 @@ 所有图标均提供可编辑的 SVG 版本，位于 `svg/` 目录： - 可直接在 Figma 中导入编辑 - 可调整颜色、粗细、圆角等参数 -- 颜色替换：将 `stroke="#999999"` 改为 `stroke="#E96B6B"` 即可切换激活状态 +- 颜色替换：将 `stroke="#47528C"` 改为 `fill="#F4005A" stroke="#F4005A"` 即可切换激活状态（选中态为实心填充 + 白色点缀） ## 文件位置 diff --git a/miniapp/assets/tabbar/activity-active.png b/miniapp/assets/tabbar/activity-active.png index 9127cad..114ef44 100644 Binary files a/miniapp/assets/tabbar/activity-active.png and b/miniapp/assets/tabbar/activity-active.png differ diff --git a/miniapp/assets/tabbar/activity-active_2x.png b/miniapp/assets/tabbar/activity-active_2x.png index 49eb0e8..19128e7 100644 Binary files a/miniapp/assets/tabbar/activity-active_2x.png and b/miniapp/assets/tabbar/activity-active_2x.png differ diff --git a/miniapp/assets/tabbar/activity-active_3x.png b/miniapp/assets/tabbar/activity-active_3x.png index eb7c1ee..1ede99c 100644 Binary files a/miniapp/assets/tabbar/activity-active_3x.png and b/miniapp/assets/tabbar/activity-active_3x.png differ diff --git a/miniapp/assets/tabbar/activity.png b/miniapp/assets/tabbar/activity.png index 39d86bb..7184fc4 100644 Binary files a/miniapp/assets/tabbar/activity.png and b/miniapp/assets/tabbar/activity.png differ diff --git a/miniapp/assets/tabbar/activity_2x.png b/miniapp/assets/tabbar/activity_2x.png index 7514e94..5ffb908 100644 Binary files a/miniapp/assets/tabbar/activity_2x.png and b/miniapp/assets/tabbar/activity_2x.png differ diff --git a/miniapp/assets/tabbar/activity_3x.png b/miniapp/assets/tabbar/activity_3x.png index 27c7590..be3d293 100644 Binary files a/miniapp/assets/tabbar/activity_3x.png and b/miniapp/assets/tabbar/activity_3x.png differ diff --git a/miniapp/assets/tabbar/discover-active.png b/miniapp/assets/tabbar/discover-active.png index 7b0e80a..2015b21 100644 Binary files a/miniapp/assets/tabbar/discover-active.png and b/miniapp/assets/tabbar/discover-active.png differ diff --git a/miniapp/assets/tabbar/discover-active_2x.png b/miniapp/assets/tabbar/discover-active_2x.png index b80a3b9..f8780d0 100644 Binary files a/miniapp/assets/tabbar/discover-active_2x.png and b/miniapp/assets/tabbar/discover-active_2x.png differ diff --git a/miniapp/assets/tabbar/discover-active_3x.png b/miniapp/assets/tabbar/discover-active_3x.png index ba81ebe..dfe51ac 100644 Binary files a/miniapp/assets/tabbar/discover-active_3x.png and b/miniapp/assets/tabbar/discover-active_3x.png differ diff --git a/miniapp/assets/tabbar/discover.png b/miniapp/assets/tabbar/discover.png index 2cc6665..6e359bb 100644 Binary files a/miniapp/assets/tabbar/discover.png and b/miniapp/assets/tabbar/discover.png differ diff --git a/miniapp/assets/tabbar/discover_2x.png b/miniapp/assets/tabbar/discover_2x.png index 4f282ad..c088599 100644 Binary files a/miniapp/assets/tabbar/discover_2x.png and b/miniapp/assets/tabbar/discover_2x.png differ diff --git a/miniapp/assets/tabbar/discover_3x.png b/miniapp/assets/tabbar/discover_3x.png index 16021f7..19a9347 100644 Binary files a/miniapp/assets/tabbar/discover_3x.png and b/miniapp/assets/tabbar/discover_3x.png differ diff --git a/miniapp/assets/tabbar/home-active.png b/miniapp/assets/tabbar/home-active.png index d03c392..e689a9a 100644 Binary files a/miniapp/assets/tabbar/home-active.png and b/miniapp/assets/tabbar/home-active.png differ diff --git a/miniapp/assets/tabbar/home-active_2x.png b/miniapp/assets/tabbar/home-active_2x.png index adf3c74..8329ee8 100644 Binary files a/miniapp/assets/tabbar/home-active_2x.png and b/miniapp/assets/tabbar/home-active_2x.png differ diff --git a/miniapp/assets/tabbar/home-active_3x.png b/miniapp/assets/tabbar/home-active_3x.png index 616c13f..c51852d 100644 Binary files a/miniapp/assets/tabbar/home-active_3x.png and b/miniapp/assets/tabbar/home-active_3x.png differ diff --git a/miniapp/assets/tabbar/home.png b/miniapp/assets/tabbar/home.png index 855469a..020e957 100644 Binary files a/miniapp/assets/tabbar/home.png and b/miniapp/assets/tabbar/home.png differ diff --git a/miniapp/assets/tabbar/home_2x.png b/miniapp/assets/tabbar/home_2x.png index 60e3f53..6b43fa0 100644 Binary files a/miniapp/assets/tabbar/home_2x.png and b/miniapp/assets/tabbar/home_2x.png differ diff --git a/miniapp/assets/tabbar/home_3x.png b/miniapp/assets/tabbar/home_3x.png index 424545e..88e291d 100644 Binary files a/miniapp/assets/tabbar/home_3x.png and b/miniapp/assets/tabbar/home_3x.png differ diff --git a/miniapp/assets/tabbar/message-active.png b/miniapp/assets/tabbar/message-active.png index a47fb25..0d118e1 100644 Binary files a/miniapp/assets/tabbar/message-active.png and b/miniapp/assets/tabbar/message-active.png differ diff --git a/miniapp/assets/tabbar/message-active_2x.png b/miniapp/assets/tabbar/message-active_2x.png index b999b97..fb0718a 100644 Binary files a/miniapp/assets/tabbar/message-active_2x.png and b/miniapp/assets/tabbar/message-active_2x.png differ diff --git a/miniapp/assets/tabbar/message-active_3x.png b/miniapp/assets/tabbar/message-active_3x.png index 0c34fda..8fbc1ac 100644 Binary files a/miniapp/assets/tabbar/message-active_3x.png and b/miniapp/assets/tabbar/message-active_3x.png differ diff --git a/miniapp/assets/tabbar/message.png b/miniapp/assets/tabbar/message.png index 0a28d21..42d969e 100644 Binary files a/miniapp/assets/tabbar/message.png and b/miniapp/assets/tabbar/message.png differ diff --git a/miniapp/assets/tabbar/message_2x.png b/miniapp/assets/tabbar/message_2x.png index 9120d97..3704036 100644 Binary files a/miniapp/assets/tabbar/message_2x.png and b/miniapp/assets/tabbar/message_2x.png differ diff --git a/miniapp/assets/tabbar/message_3x.png b/miniapp/assets/tabbar/message_3x.png index ac61fc5..c82b63b 100644 Binary files a/miniapp/assets/tabbar/message_3x.png and b/miniapp/assets/tabbar/message_3x.png differ diff --git a/miniapp/assets/tabbar/mine-active.png b/miniapp/assets/tabbar/mine-active.png index 42432ec..8e33c2f 100644 Binary files a/miniapp/assets/tabbar/mine-active.png and b/miniapp/assets/tabbar/mine-active.png differ diff --git a/miniapp/assets/tabbar/mine-active_2x.png b/miniapp/assets/tabbar/mine-active_2x.png index 0918678..c7948cf 100644 Binary files a/miniapp/assets/tabbar/mine-active_2x.png and b/miniapp/assets/tabbar/mine-active_2x.png differ diff --git a/miniapp/assets/tabbar/mine-active_3x.png b/miniapp/assets/tabbar/mine-active_3x.png index 1e580eb..1deaa9b 100644 Binary files a/miniapp/assets/tabbar/mine-active_3x.png and b/miniapp/assets/tabbar/mine-active_3x.png differ diff --git a/miniapp/assets/tabbar/mine.png b/miniapp/assets/tabbar/mine.png index a6a61cd..7720563 100644 Binary files a/miniapp/assets/tabbar/mine.png and b/miniapp/assets/tabbar/mine.png differ diff --git a/miniapp/assets/tabbar/mine_2x.png b/miniapp/assets/tabbar/mine_2x.png index 65ad6a5..ceeea96 100644 Binary files a/miniapp/assets/tabbar/mine_2x.png and b/miniapp/assets/tabbar/mine_2x.png differ diff --git a/miniapp/assets/tabbar/mine_3x.png b/miniapp/assets/tabbar/mine_3x.png index 8617cbd..361c212 100644 Binary files a/miniapp/assets/tabbar/mine_3x.png and b/miniapp/assets/tabbar/mine_3x.png differ diff --git a/miniapp/assets/tabbar/svg/activity-active.svg b/miniapp/assets/tabbar/svg/activity-active.svg index 9800aa4..28fcef7 100644 --- a/miniapp/assets/tabbar/svg/activity-active.svg +++ b/miniapp/assets/tabbar/svg/activity-active.svg @@ -1,5 +1,6 @@ - 公益日历 - - + 日历 + + + diff --git a/miniapp/assets/tabbar/svg/activity.svg b/miniapp/assets/tabbar/svg/activity.svg index 0281adb..ce7e6f0 100644 --- a/miniapp/assets/tabbar/svg/activity.svg +++ b/miniapp/assets/tabbar/svg/activity.svg @@ -1,5 +1,6 @@ - 公益日历 - - + 日历 + + + diff --git a/miniapp/assets/tabbar/svg/discover-active.svg b/miniapp/assets/tabbar/svg/discover-active.svg index d1fb03f..09b81be 100644 --- a/miniapp/assets/tabbar/svg/discover-active.svg +++ b/miniapp/assets/tabbar/svg/discover-active.svg @@ -1,5 +1,4 @@ - 双人缘分 - - + 爱心 + diff --git a/miniapp/assets/tabbar/svg/discover.svg b/miniapp/assets/tabbar/svg/discover.svg index 5c0de4c..155d286 100644 --- a/miniapp/assets/tabbar/svg/discover.svg +++ b/miniapp/assets/tabbar/svg/discover.svg @@ -1,5 +1,4 @@ - 双人缘分 - - + 爱心 + diff --git a/miniapp/assets/tabbar/svg/home-active.svg b/miniapp/assets/tabbar/svg/home-active.svg index cade286..a2ded9f 100644 --- a/miniapp/assets/tabbar/svg/home-active.svg +++ b/miniapp/assets/tabbar/svg/home-active.svg @@ -1,5 +1,4 @@ - 爱心小屋 - - + 房子 + diff --git a/miniapp/assets/tabbar/svg/home.svg b/miniapp/assets/tabbar/svg/home.svg index d4b6043..50f43ee 100644 --- a/miniapp/assets/tabbar/svg/home.svg +++ b/miniapp/assets/tabbar/svg/home.svg @@ -1,5 +1,4 @@ - 爱心小屋 - - + 房子 + diff --git a/miniapp/assets/tabbar/svg/message-active.svg b/miniapp/assets/tabbar/svg/message-active.svg index 9513c73..18e10dd 100644 --- a/miniapp/assets/tabbar/svg/message-active.svg +++ b/miniapp/assets/tabbar/svg/message-active.svg @@ -1,5 +1,7 @@ - 爱心对话 - - + 对话气泡 + + + + diff --git a/miniapp/assets/tabbar/svg/message.svg b/miniapp/assets/tabbar/svg/message.svg index b60b468..d100847 100644 --- a/miniapp/assets/tabbar/svg/message.svg +++ b/miniapp/assets/tabbar/svg/message.svg @@ -1,5 +1,7 @@ - 爱心对话 - - + 对话气泡 + + + + diff --git a/miniapp/assets/tabbar/svg/mine-active.svg b/miniapp/assets/tabbar/svg/mine-active.svg index 495d9be..99c204b 100644 --- a/miniapp/assets/tabbar/svg/mine-active.svg +++ b/miniapp/assets/tabbar/svg/mine-active.svg @@ -1,5 +1,5 @@ - 个人守护 - - + 人物 + + diff --git a/miniapp/assets/tabbar/svg/mine.svg b/miniapp/assets/tabbar/svg/mine.svg index 483a4b3..2effdc3 100644 --- a/miniapp/assets/tabbar/svg/mine.svg +++ b/miniapp/assets/tabbar/svg/mine.svg @@ -1,5 +1,5 @@ - 个人守护 - - + 人物 + + diff --git a/scripts/preview-miniapp.mjs b/scripts/preview-miniapp.mjs index 8f53c10..c10bda8 100644 --- a/scripts/preview-miniapp.mjs +++ b/scripts/preview-miniapp.mjs @@ -804,15 +804,15 @@ function main() { .phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; } .wx-page { min-height:100%; } /* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段： - color #999999 / selectedColor #E96B6B / backgroundColor #FFFFFF / borderStyle black。 + color #47528C / selectedColor #F4005A / backgroundColor #FFFFFF / borderStyle black。 图标按微信客户端实际渲染尺寸（约 26px）呈现，与 81px 源图尺寸不同；文字 10px 同理。 */ .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; } .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; } .mini-tabbar__icon { width:26px; height:26px; display:block; } - .mini-tabbar__label { font-size:10px; line-height:14px; color:#999999; } - .mini-tabbar__item.is-active .mini-tabbar__label { color:#E96B6B; } + .mini-tabbar__label { font-size:10px; line-height:14px; color:#47528C; } + .mini-tabbar__item.is-active .mini-tabbar__label { color:#F4005A; } /* ====== 以下为页面 WXSS 转换结果（rpx 已按 375 宽换算） ====== */ ${cssAll} diff --git a/ui-tests/tabbar-icons.mjs b/ui-tests/tabbar-icons.mjs index 6f9c6cd..2791efd 100644 --- a/ui-tests/tabbar-icons.mjs +++ b/ui-tests/tabbar-icons.mjs @@ -5,11 +5,11 @@ import { join } from 'node:path' const repoRoot = process.cwd() const root = join(repoRoot, 'miniapp', 'assets', 'tabbar') const icons = { - home: '爱心小屋', - discover: '双人缘分', - message: '爱心对话', - activity: '公益日历', - mine: '个人守护', + home: '房子', + discover: '爱心', + message: '对话气泡', + activity: '日历', + mine: '人物', } // ── 1. SVG 源文件：主题化标题 + 两态配色 ────────────────────────────── @@ -18,8 +18,8 @@ for (const [name, title] of Object.entries(icons)) { const active = readFileSync(join(root, 'svg', `${name}-active.svg`), 'utf8') assert.match(normal, new RegExp(`${title}`), `${name} 缺少主题化标题`) - assert.match(normal, /#999999/i, `${name} 默认态颜色错误`) - assert.match(active, /#E96B6B/i, `${name} 选中态颜色错误`) + assert.match(normal, /#47528C/i, `${name} 默认态颜色错误`) + assert.match(active, /#F4005A/i, `${name} 选中态颜色错误`) // ── 2. PNG 规格：正方形、1x/2x/3x、透明 RGBA ──────────────────────── for (const suffix of ['', '_2x', '_3x']) { @@ -41,6 +41,11 @@ const appJson = JSON.parse(readFileSync(appJsonPath, 'utf8')) const tabList = appJson.tabBar?.list ?? [] 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) { assert.ok(appJson.pages.includes(item.pagePath), `tabBar pagePath 未在 pages 中注册: ${item.pagePath}`) for (const key of ['iconPath', 'selectedIconPath']) {