feat(fe): 引入线性图标体系,tabBar 去 emoji,清掉 172KB 死资源
图标不走字体走 mask-image。Tabler 的 outline 图标是 stroke+fill:none, 字形只认填充轮廓,直接转字体会生成空字形——真机表现和「字体没加载」 一模一样,很容易往错方向排查。mask 走渲染 alpha,描边正常参与, 同样支持 currentColor 染色,没有这个坑。 - styles/iconfont.wxss:38 个图标内联 base64,19.9KB - components/pt-icon:name 支持图标名 / 记录类型 / 老数据里的 emoji, 三层降级兜底,绝不留空白;virtualHost 避免多一层节点破坏 flex - custom-tab-bar:🏠📅✍️📊🐾 换成图标,顺手把抄了一遍的三个色值换回 var() - project.config.json:packOptions.ignore 排掉 preview.html、6 个候选 logo 等 172KB 死资源,之前它们全打进包里 preview-v2.html 是设计验证页,本身也不参与打包。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,11 +3,11 @@ Component({
|
||||
selected: 0,
|
||||
hidden: false,
|
||||
list: [
|
||||
{ pagePath: '/pages/home/home', text: '首页', icon: '🏠' },
|
||||
{ pagePath: '/pages/plan/plan', text: '计划', icon: '📅' },
|
||||
{ pagePath: '/pages/record/record', text: '记录', icon: '✍️' },
|
||||
{ pagePath: '/pages/report/report', text: '报告', icon: '📊' },
|
||||
{ pagePath: '/pages/community/community', text: '社区', icon: '🐾' }
|
||||
{ pagePath: '/pages/home/home', text: '首页', icon: 'home' },
|
||||
{ pagePath: '/pages/plan/plan', text: '计划', icon: 'plan' },
|
||||
{ pagePath: '/pages/record/record', text: '记录', icon: 'record' },
|
||||
{ pagePath: '/pages/report/report', text: '报告', icon: 'report' },
|
||||
{ pagePath: '/pages/community/community', text: '社区', icon: 'community' }
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"pt-icon": "../components/pt-icon/index"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<view class="tabbar" hidden="{{hidden}}">
|
||||
<view wx:for="{{list}}" wx:key="text" class="tab {{selected === index ? 'active' : ''}}"
|
||||
data-index="{{index}}" bindtap="switchTab">
|
||||
<text class="tab-icon">{{item.icon}}</text>
|
||||
<pt-icon name="{{item.icon}}" size="{{40}}"></pt-icon>
|
||||
<text class="tab-text">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
height:calc(108rpx + env(safe-area-inset-bottom));
|
||||
padding-bottom:calc(6rpx + env(safe-area-inset-bottom));
|
||||
background:rgba(255,255,255,.94);
|
||||
border-top:1rpx solid #EEE6DC;
|
||||
/* CSS 变量是继承属性,样式隔离只挡选择器匹配、不挡继承,所以这里能直接吃 page 上的 token */
|
||||
border-top:1rpx solid var(--line,#EEE6DC);
|
||||
display:flex;
|
||||
backdrop-filter:blur(32rpx);
|
||||
-webkit-backdrop-filter:blur(32rpx);
|
||||
}
|
||||
.tab{
|
||||
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8rpx;
|
||||
color:#8D8277;font-size:24rpx;
|
||||
color:var(--muted,#8D8277);font-size:24rpx;
|
||||
}
|
||||
.tab-icon{font-size:42rpx;line-height:1}
|
||||
.tab.active{color:#DD8420;font-weight:900}
|
||||
.tab.active{color:var(--primary-dark,#DD8420);font-weight:600}
|
||||
|
||||
Reference in New Issue
Block a user