feat: ui update

miniprogram/custom-tab-bar/index.wxml

@@ -1,16 +1,17 @@
-<view class="tab-bar">
+<!-- v2 悬浮玻璃胶囊标签栏 -->
+<view class="tabbar">
   <view
     wx:for="{{list}}"
     wx:key="pagePath"
-    class="tab-item {{selected === index ? 'active' : ''}}"
+    class="tab-item {{selected === index ? 'is-on' : ''}}"
     data-path="{{item.pagePath}}"
     data-index="{{index}}"
     bindtap="switchTab"
   >
-    <view class="tab-icon-wrap">
-      <view class="icon tab-icon {{item.icon}}"></view>
+    <view class="tab-ic-wrap">
+      <view class="icon tab-ic {{item.icon}}"></view>
       <view wx:if="{{item.icon === 'icon-user' && unread > 0}}" class="tab-badge">{{unread > 99 ? '99+' : unread}}</view>
     </view>
-    <text class="tab-text">{{item.text}}</text>
+    <text class="tab-tx">{{item.text}}</text>
   </view>
 </view>

miniprogram/custom-tab-bar/index.wxss

@@ -1,58 +1,87 @@
-.tab-bar {
+/** v2 悬浮玻璃胶囊标签栏：左右留边、距底 + 安全区，选中态实心黑 + 顶部短横线 **/
+.tabbar {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  left: 32rpx;
+  right: 32rpx;
+  bottom: calc(24rpx + env(safe-area-inset-bottom));
+  height: 120rpx;
+  z-index: 50;
+  border-radius: 60rpx;
+  background: rgba(255, 255, 255, .72);
+  -webkit-backdrop-filter: saturate(180%) blur(22px);
+  backdrop-filter: saturate(180%) blur(22px);
+  border: 1rpx solid rgba(255, 255, 255, .7);
+  box-shadow: 0 0 0 1rpx rgba(0, 0, 0, .05), 0 20rpx 60rpx -20rpx rgba(0, 0, 0, .16);
   display: flex;
-  background: rgba(255, 255, 255, 0.92);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-top: 1rpx solid #E5E5EA;
-  padding-bottom: env(safe-area-inset-bottom);
-  z-index: 100;
+  align-items: center;
 }
 
 .tab-item {
+  position: relative;
   flex: 1;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 12rpx 0 8rpx;
-  color: #8E8E93;
+  gap: 6rpx;
+  color: var(--ink-3, #AEAEB2);
+  transition: color .2s cubic-bezier(.32, .72, 0, 1);
 }
 
-.tab-item.active {
-  color: #007AFF;
+.tab-ic {
+  width: 42rpx;
+  height: 42rpx;
 }
 
-.tab-icon-wrap {
-  position: relative;
-  margin-bottom: 6rpx;
-}
-
-.tab-icon {
-  width: 48rpx;
-  height: 48rpx;
-}
-
-.tab-badge {
-  position: absolute;
-  top: -8rpx;
-  right: -20rpx;
-  min-width: 28rpx;
-  height: 28rpx;
-  padding: 0 8rpx;
-  border-radius: 14rpx;
-  background: #FF3B30;
-  color: #fff;
-  font-size: 20rpx;
-  line-height: 28rpx;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.tab-text {
+.tab-tx {
   font-size: 20rpx;
+  letter-spacing: .02em;
   line-height: 1;
 }
+
+/* 选中态短横线 */
+.tab-item::after {
+  content: '';
+  position: absolute;
+  bottom: 12rpx;
+  left: 50%;
+  width: 28rpx;
+  height: 4rpx;
+  border-radius: 4rpx;
+  background: var(--ink, #0A0A0A);
+  transform: translateX(-50%) scaleX(.3);
+  opacity: 0;
+  transition: opacity .24s cubic-bezier(.32, .72, 0, 1), transform .24s cubic-bezier(.32, .72, 0, 1);
+}
+
+.tab-item.is-on {
+  color: var(--ink, #0A0A0A);
+}
+
+.tab-item.is-on::after {
+  opacity: 1;
+  transform: translateX(-50%) scaleX(1);
+}
+
+.tab-ic-wrap {
+  position: relative;
+}
+
+/* 未读徽标：零彩色黑底白字数字胶囊 */
+.tab-badge {
+  position: absolute;
+  top: -6rpx;
+  left: calc(50% + 6rpx);
+  min-width: 30rpx;
+  height: 30rpx;
+  padding: 0 8rpx;
+  border-radius: 16rpx;
+  background: var(--ink, #0A0A0A);
+  color: #fff;
+  font-size: 18rpx;
+  font-weight: 600;
+  line-height: 30rpx;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}