EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 迁移液态玻璃质感（TabBar/返回按钮）

Browse Source 
- 自定义 TabBar 增加弯月面聚光带与银丝边缘，玻璃参数升级
- 全局返回按钮与 ScrollTopMask 返回按钮升级 135° 液态玻璃渐变
- 激活态升级为玻璃透镜，浅色/深色主题同步
- 新增 tools/liquid-glass.test.mjs 回归断言
- 同步构建产物 dist/，并合并此前未提交的 .claude 配置与 dist 变更
This commit is contained in:
broccoli
2026-08-18 21:30:39 +08:00
parent 2a5728bccc
commit 242c52af43
16 changed files with 187 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/settings.local.json
+2 -1
View File
@@ -18,7 +18,8 @@
"Bash(npm ls *)",
"Bash(npm install *)",
"Bash(node compress-images.js)",
"Bash(cd \"F:\\\\\\\\weixin_wordc\")"
"Bash(cd \"F:\\\\\\\\weixin_wordc\")",
"Bash(find ~/.claude /Users/broccoli/Project/wechat_wc/.claude -path '*skills*' -iname 'SKILL.md' 2>/dev/null | xargs grep -l -i cloudbase 2>/dev/null; echo \"---dirs---\"; find ~/.claude /Users/broccoli/Project/wechat_wc/.claude -type d -iname '*cloudbase*' 2>/dev/null)"
]
}
}
dist/app-origin.wxss
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/common.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/common.wxss
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/custom-tab-bar/index.js
Vendored
+1 -1
View File
@@ -1 +1 @@
"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[777],{653:function(e,n,t){var a=t(7842),i=t(5544),c=t(118),o=t(758),r=t.n(o),s=t(6540),u=t(1457),f=t(9703),g=t(6606),h=t(8199),l=t(4848),v=[{pagePath:"/pages/index/index",label:"\u9996\u9875",icon:(0,h.uq)("/icon/\u9996\u9875.svg"),iconActive:(0,h.uq)("/icon/\u9996\u9875-fill.svg")},{pagePath:"/pages/shop/index",label:"\u5546\u54c1",icon:(0,h.uq)("/icon/\u5546\u54c1.svg"),iconActive:(0,h.uq)("/icon/\u5546\u54c1-fill.svg")},{pagePath:"/pages/designList/index",label:"\u8bbe\u8ba1\u6e05\u5355",icon:(0,h.uq)("/icon/\u8c03\u8272\u76d8.svg"),iconActive:(0,h.uq)("/icon/\u8c03\u8272\u76d8-fill.svg")},{pagePath:"/pages/orders/index",label:"\u8ba2\u5355",icon:(0,h.uq)("/icon/\u5305\u88f9.svg"),iconActive:(0,h.uq)("/icon/\u5305\u88f9-fill.svg")},{pagePath:"/pages/profile/index",label:"\u6211\u7684",icon:(0,h.uq)("/icon/\u4e2a\u4eba.svg"),iconActive:(0,h.uq)("/icon/\u4e2a\u4eba-fill.svg")}];function p(e){var n=v.findIndex(function(n){return e.endsWith(n.pagePath)});return v[n>=0?n:0].pagePath}function b(){var e=r().getCurrentInstance().router,n=e&&e.path?e.path:"pages/index/index";return p(n)}function m(){var e=(0,s.useState)((0,u.eW)((0,u.O4)())),n=(0,i.A)(e,2),t=n[0],a=n[1],o=(0,s.useState)(b),h=(0,i.A)(o,2),m=h[0],d=h[1];(0,s.useEffect)(function(){var e=function(e){return a(e)};return r().eventCenter.on(f.Wo,e),function(){r().eventCenter.off(f.Wo,e)}},[]),(0,s.useEffect)(function(){var e=function(e){!e||"dark"!==e.theme&&"light"!==e.theme||((0,u.Rq)(e.theme),"auto"===(0,u.O4)()&&a(e.theme))},n=r();return n.onThemeChange&&n.onThemeChange(e),function(){n.offThemeChange&&n.offThemeChange(e)}},[]),(0,s.useEffect)(function(){var e=function(e){var n=r().getCurrentInstance().router,t=n&&n.path?n.path:"pages/index/index";d(p(e||t))};return r().eventCenter.on("tabBarChange",e),function(){r().eventCenter.off("tabBarChange",e)}},[]),(0,s.useEffect)(function(){(0,g.G)(t)},[t]);var x=function(e){d(p(e)),r().switchTab({url:e}),r().eventCenter.trigger("tabBarChange",e)};return(0,l.jsxs)(c.Ss,{className:"tab-bar-root theme-".concat(t),children:[(0,l.jsx)(c.Ss,{className:"tab-bar-gradient"}),(0,l.jsx)(c.Ss,{className:"custom-tab-bar theme-".concat(t),children:v.map(function(e){var n=e.pagePath===m;return(0,l.jsxs)(c.Ss,{className:"tab-item ".concat(n?"active":""),onTap:function(){return x(e.pagePath)},children:[n&&(0,l.jsx)(c.Ss,{className:"tab-indicator"}),(0,l.jsx)(c._V,{className:"tab-icon-img ".concat(n?"active":""),src:n?e.iconActive:e.icon,mode:"aspectFit"}),(0,l.jsx)(c.EY,{className:"tab-label",children:e.label})]},e.pagePath)})})]})}Component((0,a.createComponentConfig)(m,"custom-tab-bar/index"))}},function(e){var n=function(n){return e(e.s=n)};e.O(0,[907,96,76],function(){return n(653)});e.O()}]);
"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[777],{653:function(e,n,t){var a=t(7842),c=t(5544),i=t(118),s=t(758),o=t.n(s),r=t(6540),u=t(1457),f=t(9703),g=t(6606),h=t(8199),l=t(4848),v=[{pagePath:"/pages/index/index",label:"\u9996\u9875",icon:(0,h.uq)("/icon/\u9996\u9875.svg"),iconActive:(0,h.uq)("/icon/\u9996\u9875-fill.svg")},{pagePath:"/pages/shop/index",label:"\u5546\u54c1",icon:(0,h.uq)("/icon/\u5546\u54c1.svg"),iconActive:(0,h.uq)("/icon/\u5546\u54c1-fill.svg")},{pagePath:"/pages/designList/index",label:"\u8bbe\u8ba1\u6e05\u5355",icon:(0,h.uq)("/icon/\u8c03\u8272\u76d8.svg"),iconActive:(0,h.uq)("/icon/\u8c03\u8272\u76d8-fill.svg")},{pagePath:"/pages/orders/index",label:"\u8ba2\u5355",icon:(0,h.uq)("/icon/\u5305\u88f9.svg"),iconActive:(0,h.uq)("/icon/\u5305\u88f9-fill.svg")},{pagePath:"/pages/profile/index",label:"\u6211\u7684",icon:(0,h.uq)("/icon/\u4e2a\u4eba.svg"),iconActive:(0,h.uq)("/icon/\u4e2a\u4eba-fill.svg")}];function p(e){var n=v.findIndex(function(n){return e.endsWith(n.pagePath)});return v[n>=0?n:0].pagePath}function b(){var e=o().getCurrentInstance().router,n=e&&e.path?e.path:"pages/index/index";return p(n)}function m(){var e=(0,r.useState)((0,u.eW)((0,u.O4)())),n=(0,c.A)(e,2),t=n[0],a=n[1],s=(0,r.useState)(b),h=(0,c.A)(s,2),m=h[0],d=h[1];(0,r.useEffect)(function(){var e=function(e){return a(e)};return o().eventCenter.on(f.Wo,e),function(){o().eventCenter.off(f.Wo,e)}},[]),(0,r.useEffect)(function(){var e=function(e){!e||"dark"!==e.theme&&"light"!==e.theme||((0,u.Rq)(e.theme),"auto"===(0,u.O4)()&&a(e.theme))},n=o();return n.onThemeChange&&n.onThemeChange(e),function(){n.offThemeChange&&n.offThemeChange(e)}},[]),(0,r.useEffect)(function(){var e=function(e){var n=o().getCurrentInstance().router,t=n&&n.path?n.path:"pages/index/index";d(p(e||t))};return o().eventCenter.on("tabBarChange",e),function(){o().eventCenter.off("tabBarChange",e)}},[]),(0,r.useEffect)(function(){(0,g.G)(t)},[t]);var x=function(e){d(p(e)),o().switchTab({url:e}),o().eventCenter.trigger("tabBarChange",e)};return(0,l.jsxs)(i.Ss,{className:"tab-bar-root theme-".concat(t),children:[(0,l.jsx)(i.Ss,{className:"tab-bar-gradient"}),(0,l.jsxs)(i.Ss,{className:"custom-tab-bar theme-".concat(t),children:[(0,l.jsx)(i.Ss,{className:"tab-bar-caustic"}),(0,l.jsx)(i.Ss,{className:"tab-bar-rim"}),v.map(function(e){var n=e.pagePath===m;return(0,l.jsxs)(i.Ss,{className:"tab-item ".concat(n?"active":""),onTap:function(){return x(e.pagePath)},children:[n&&(0,l.jsx)(i.Ss,{className:"tab-indicator"}),(0,l.jsx)(i._V,{className:"tab-icon-img ".concat(n?"active":""),src:n?e.iconActive:e.icon,mode:"aspectFit"}),(0,l.jsx)(i.EY,{className:"tab-label",children:e.label})]},e.pagePath)})]})]})}Component((0,a.createComponentConfig)(m,"custom-tab-bar/index"))}},function(e){var n=function(n){return e(e.s=n)};e.O(0,[907,96,76],function(){return n(653)});e.O()}]);
dist/custom-tab-bar/index.wxss
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/pages/diy/index.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/pages/diy/stickerEdit/index.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/pages/profile/index.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/pages/wordcloud/index.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/vendors.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/app.scss
+28 -8
View File
@@ -209,19 +209,39 @@ page {
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(32px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(32px) saturate(1.2) !important;
border: 1rpx solid rgba(255, 255, 255, 0.55) !important;
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.28) 45%,
rgba(255, 255, 255, 0.42) 100%
) !important;
backdrop-filter: blur(24px) saturate(1.7) brightness(1.05) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.05) !important;
border: 1rpx solid rgba(255, 255, 255, 0.35) !important;
box-shadow:
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.65),
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
inset 0 0 0 1rpx rgba(255, 255, 255, 0.18),
0 12rpx 40rpx rgba(0, 0, 0, 0.18),
0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
}
.theme-dark .back-btn,
.theme-dark .edit-back,
.theme-dark .shop-back-btn {
background: rgba(25, 25, 25, 0.55) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3) !important;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.16) 0%,
rgba(255, 255, 255, 0.06) 45%,
rgba(255, 255, 255, 0.12) 100%
) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
box-shadow:
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.22),
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.28),
inset 0 0 0 1rpx rgba(255, 255, 255, 0.1),
0 12rpx 40rpx rgba(0, 0, 0, 0.5),
0 4rpx 12rpx rgba(0, 0, 0, 0.3) !important;
}
/* ==========================================================
src/components/ScrollTopMask/index.scss
+28 -8
View File
@@ -44,17 +44,37 @@
justify-content: center;
border-radius: 50%;
pointer-events: auto;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(32px) saturate(1.2);
-webkit-backdrop-filter: blur(32px) saturate(1.2);
border: 1rpx solid rgba(255, 255, 255, 0.55);
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.28) 45%,
rgba(255, 255, 255, 0.42) 100%
);
backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
-webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
border: 1rpx solid rgba(255, 255, 255, 0.35);
box-shadow:
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.65),
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
inset 0 0 0 1rpx rgba(255, 255, 255, 0.18),
0 12rpx 40rpx rgba(0, 0, 0, 0.18),
0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.theme-dark .scroll-top-back {
background: rgba(25, 25, 25, 0.55);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.16) 0%,
rgba(255, 255, 255, 0.06) 45%,
rgba(255, 255, 255, 0.12) 100%
);
border-color: rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 2rpx 3rpx rgba(255, 255, 255, 0.22),
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.28),
inset 0 0 0 1rpx rgba(255, 255, 255, 0.1),
0 12rpx 40rpx rgba(0, 0, 0, 0.5),
0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}
.scroll-top-back-arrow {
src/custom-tab-bar/index.scss
+82 -14
View File
@@ -32,25 +32,84 @@
border-radius: 64rpx;
height: 116rpx;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(32px) saturate(1.2);
-webkit-backdrop-filter: blur(32px) saturate(1.2);
overflow: hidden;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
-webkit-backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
display: flex;
justify-content: space-around;
align-items: center;
border: 1rpx solid rgba(255, 255, 255, 0.55);
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.18), 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid rgba(255, 255, 255, 0.14);
box-shadow:
0 24rpx 60rpx rgba(20, 14, 10, 0.22),
0 4rpx 12rpx rgba(0, 0, 0, 0.08),
inset 0 2rpx 0 rgba(255, 255, 255, 0.35);
pointer-events: auto;
z-index: 1000;
}
/* 自定义组件样式隔离：两套主题配色在组件内自包含，不依赖全局 app.wxss */
.custom-tab-bar.theme-dark {
background: rgba(25, 25, 25, 0.55);
backdrop-filter: blur(32px) saturate(1.2);
-webkit-backdrop-filter: blur(32px) saturate(1.2);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
background: rgba(25, 25, 25, 0.4);
backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
-webkit-backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
border-color: rgba(255, 255, 255, 0.1);
box-shadow:
0 24rpx 60rpx rgba(0, 0, 0, 0.55),
0 4rpx 12rpx rgba(0, 0, 0, 0.3),
inset 0 2rpx 0 rgba(255, 255, 255, 0.12);
}
/* 顶部弯月面聚光带 */
.tab-bar-caustic {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 56rpx;
border-radius: 64rpx 64rpx 0 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.55);
pointer-events: none;
z-index: 2;
}
.custom-tab-bar.theme-dark .tab-bar-caustic {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
}
/* 非均匀银丝玻璃边缘 */
.tab-bar-rim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
padding: 1rpx;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.18) 32%,
rgba(255, 255, 255, 0.03) 68%,
rgba(255, 255, 255, 0.24) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 3;
}
.custom-tab-bar.theme-dark .tab-bar-rim {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.34) 0%,
rgba(255, 255, 255, 0.12) 32%,
rgba(255, 255, 255, 0.02) 68%,
rgba(255, 255, 255, 0.16) 100%
);
}
.tab-item {
@@ -63,6 +122,7 @@
flex: 1;
height: 100%;
max-width: 160px;
z-index: 10;
}
.tab-indicator {
@@ -73,13 +133,21 @@
width: 120rpx;
height: 100rpx;
border-radius: 50rpx;
background: rgba(0, 0, 0, 0.14);
box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.07);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.16));
border: 1rpx solid rgba(255, 255, 255, 0.25);
box-shadow:
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.35),
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
0 4rpx 10rpx rgba(0, 0, 0, 0.08);
}
.custom-tab-bar.theme-dark .tab-indicator {
background: rgba(255, 255, 255, 0.14);
box-shadow: 0 0 6rpx rgba(255, 255, 255, 0.07);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.16));
border-color: rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.12),
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.3),
0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}
.tab-icon-img {
src/custom-tab-bar/index.tsx
+2
View File
@@ -95,6 +95,8 @@ export default function CustomTabBar() {
<View className={`tab-bar-root theme-${resolvedTheme}`}>
<View className='tab-bar-gradient' />
<View className={`custom-tab-bar theme-${resolvedTheme}`}>
<View className='tab-bar-caustic' />
<View className='tab-bar-rim' />
{TABS.map((tab) => {
const isActive = tab.pagePath === activeTab
return (
tools/liquid-glass.test.mjs
+35
View File
@@ -0,0 +1,35 @@
import test from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'
import path from 'node:path'
const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
const read = (rel) => readFileSync(path.join(root, rel), 'utf8')
test('custom tab bar renders the liquid-glass overlay layers', () => {
const source = read('src/custom-tab-bar/index.tsx')
assert.match(source, /tab-bar-caustic/)
assert.match(source, /tab-bar-rim/)
})
test('custom tab bar uses bright glass material and the silver rim', () => {
const css = read('src/custom-tab-bar/index.scss')
assert.match(css, /backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
assert.match(css, /-webkit-backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
assert.match(css, /mask-composite: exclude/)
assert.match(css, /linear-gradient\(\s*135deg/)
})
test('global back buttons use the liquid-glass gradient and inner shading', () => {
const css = read('src/app.scss')
assert.match(css, /background: linear-gradient\(\s*135deg/)
assert.match(css, /backdrop-filter: blur\(24px\) saturate\(1\.7\) brightness\(1\.05\)/)
assert.match(css, /\.theme-dark \.back-btn/)
})
test('scroll top back button matches the global liquid-glass back style', () => {
const css = read('src/components/ScrollTopMask/index.scss')
assert.match(css, /background: linear-gradient\(\s*135deg/)
assert.match(css, /backdrop-filter: blur\(24px\) saturate\(1\.7\) brightness\(1\.05\)/)
})