checkpoint: pre-refactor state before fixing P0/P1 issues

2026-06-11 18:40:59 +08:00
parent 2c3c2653fa
commit d55ed60907
41 changed files with 1129 additions and 1051 deletions
--- a/miniprogram/custom-tab-bar/index.ts
+++ b/miniprogram/custom-tab-bar/index.ts
@@ -12,7 +12,8 @@ Component({

  methods: {
    onTab(e: WechatMiniprogram.CustomEvent) {
-      const index = e.currentTarget.dataset.index as number
+      // dataset 取出的是字符串，必须转数字，否则 WXML 中 selected === n 严格比较失败
+      const index = Number(e.currentTarget.dataset.index)
      const path = e.currentTarget.dataset.path as string
      if (index === this.data.selected) return
      this.setData({ selected: index })
--- a/miniprogram/custom-tab-bar/index.wxml
+++ b/miniprogram/custom-tab-bar/index.wxml
@@ -1,13 +1,8 @@
 <view class="tab-dock">
-  <view class="dock-sheen"></view>
-
  <!-- 广场 -->
  <view class="tab-pill {{selected === 0 ? 'active' : ''}}" bindtap="onTab" data-index="0" data-path="/pages/feed/feed">
    <view class="icon-wrap">
-      <view class="icon-grid">
-        <view class="sq"></view><view class="sq"></view>
-        <view class="sq"></view><view class="sq"></view>
-      </view>
+      <view class="tab-icon icon-feed"></view>
    </view>
    <text class="tab-label">广场</text>
  </view>
@@ -15,10 +10,7 @@
  <!-- 附近 -->
  <view class="tab-pill {{selected === 1 ? 'active' : ''}}" bindtap="onTab" data-index="1" data-path="/pages/nearby/nearby">
    <view class="icon-wrap">
-      <view class="icon-pin">
-        <view class="pin-head"></view>
-        <view class="pin-tail"></view>
-      </view>
+      <view class="tab-icon icon-nearby"></view>
    </view>
    <text class="tab-label">附近</text>
  </view>
@@ -26,19 +18,14 @@
  <!-- 发布 FAB -->
  <view class="tab-fab-wrap">
    <view class="tab-fab" bindtap="onPost">
-      <view class="fab-shine"></view>
-      <text class="fab-plus">＋</text>
+      <view class="fab-paw"></view>
    </view>
  </view>

  <!-- 汪友 -->
  <view class="tab-pill {{selected === 2 ? 'active' : ''}}" bindtap="onTab" data-index="2" data-path="/pages/friends/friends">
    <view class="icon-wrap" style="position:relative">
-      <view class="icon-ppl">
-        <view class="ppl-head ppl-head-l"></view>
-        <view class="ppl-head ppl-head-r"></view>
-        <view class="ppl-body"></view>
-      </view>
+      <view class="tab-icon icon-friends"></view>
      <view wx:if="{{unreadCount > 0}}" class="badge">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
    </view>
    <text class="tab-label">汪友</text>
@@ -47,10 +34,7 @@
  <!-- 我的 -->
  <view class="tab-pill {{selected === 3 ? 'active' : ''}}" bindtap="onTab" data-index="3" data-path="/pages/profile/profile">
    <view class="icon-wrap">
-      <view class="icon-user">
-        <view class="user-head"></view>
-        <view class="user-body"></view>
-      </view>
+      <view class="tab-icon icon-profile"></view>
    </view>
    <text class="tab-label">我的</text>
  </view>
--- a/miniprogram/custom-tab-bar/index.wxss
+++ b/miniprogram/custom-tab-bar/index.wxss
@@ -1,214 +1,121 @@
-/* ── 底部导航：悬浮玻璃浮岛 ──
-   绝对定位浮在内容上方，左右下三边露出底层内容；
-   分层折射高光 + 缓慢流动的光泽，模拟液态玻璃透镜质感 */
+/* ── 底部导航:白色悬浮浮岛(Vital 风格)──
+   纯白实底 + 中性柔和阴影,激活态用强调黑胶囊,不用主题色 */
 .tab-dock {
  position: fixed;
  left: 16rpx;
  right: 16rpx;
-  bottom: 28rpx;
+  bottom: calc(28rpx + env(safe-area-inset-bottom) * 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-around;
-  border-radius: 64rpx;
-  padding: 14rpx 8rpx calc(14rpx + env(safe-area-inset-bottom) * 0.6);
+  border-radius: 56rpx;
+  padding: 12rpx 10rpx;
  overflow: hidden;
-  isolation: isolate;
-  background:
-    radial-gradient(130% 160% at 16% -40%, rgba(255, 255, 255, 0.6), transparent 56%),
-    radial-gradient(110% 140% at 92% 145%, rgba(255, 255, 255, 0.16), transparent 60%),
-    rgba(255, 255, 255, 0.30);
-  backdrop-filter: blur(26rpx) saturate(200%);
-  -webkit-backdrop-filter: blur(26rpx) saturate(200%);
-  border: 1rpx solid rgba(255, 255, 255, 0.55);
-  box-shadow:
-    0 20rpx 50rpx rgba(120, 70, 140, 0.18),
-    inset 0 1.5rpx 0 rgba(255, 255, 255, 0.7),
-    inset 0 -10rpx 22rpx rgba(255, 255, 255, 0.10),
-    inset 10rpx 0 22rpx rgba(255, 255, 255, 0.08),
-    inset -10rpx 0 22rpx rgba(180, 150, 210, 0.10);
+  background: #ffffff;
+  box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.10);
 }

-/* 流动光泽：缓慢左右扫过的液态高光带 */
-.dock-sheen {
-  position: absolute;
-  top: -60%;
-  left: -15%;
-  right: -15%;
-  height: 220%;
-  background: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, 0.40) 48%, transparent 64%);
-  filter: blur(14rpx);
-  animation: liquid-sheen 8s ease-in-out infinite;
-  pointer-events: none;
-  z-index: 0;
-  transform: translateX(-14%) rotate(-2deg);
-}
-
-@keyframes liquid-sheen {
-  0%, 100% { transform: translateX(-14%) rotate(-2deg); opacity: 0.45; }
-  50% { transform: translateX(14%) rotate(2deg); opacity: 0.85; }
-}
-
-/* ── Tab 项 ── */
+/* ── Tab 项:展开胶囊 ──
+   未选中 = 浅灰图标;选中 = 横向展开为黑色胶囊(白图标 + 白文字) */
 .tab-pill {
  position: relative;
  z-index: 1;
-  flex: 1;
+  flex: 0 0 auto;
  display: flex;
-  flex-direction: column;
+  flex-direction: row;
  align-items: center;
-  gap: 6rpx;
-  border-radius: 36rpx;
-  padding: 12rpx 0 8rpx;
-  transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), background 0.25s ease, color 0.25s ease;
+  justify-content: center;
+  gap: 0;
+  border-radius: 999rpx;
+  padding: 10rpx 16rpx;
+  transition:
+    background 0.32s cubic-bezier(.34, 1.4, .64, 1),
+    padding 0.32s cubic-bezier(.34, 1.4, .64, 1),
+    box-shadow 0.32s ease;
 }

 .tab-pill.active {
-  background: rgba(255, 45, 110, 0.14);
-  transform: translateY(-6rpx) scale(1.04);
+  background: #2b2b30;
+  padding: 10rpx 26rpx;
+  box-shadow: 0 12rpx 26rpx rgba(43, 43, 48, 0.28);
 }

+.tab-pill:active {
+  transform: scale(0.94);
+}
+
+/* 文字标签:默认折叠隐藏,选中时从图标右侧平滑展开 */
 .tab-label {
-  font-size: 20rpx;
-  font-weight: 700;
-  color: #a59cb5;
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: transparent;
  line-height: 1;
-  transition: color 0.2s;
+  opacity: 0;
+  margin-left: 0;
+  transition:
+    max-width 0.32s cubic-bezier(.34, 1.4, .64, 1),
+    opacity 0.24s ease,
+    margin-left 0.32s cubic-bezier(.34, 1.4, .64, 1);
 }

 .tab-pill.active .tab-label {
-  color: #ff2d6e;
-  font-weight: 900;
+  max-width: 140rpx;
+  opacity: 1;
+  color: #fff;
+  margin-left: 12rpx;
 }

 /* ── 图标容器 ── */
 .icon-wrap {
-  width: 44rpx;
-  height: 44rpx;
+  width: 66rpx;
+  height: 66rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }

-/* ── 广场图标：2×2 圆角方块网格 ── */
-.icon-grid {
-  width: 34rpx;
-  height: 34rpx;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 5rpx;
+/* ── Tab 图标:狗主题线性描边 SVG(base64 蒙版)──
+   单色 alpha 蒙版 + background-color 上色,
+   选中时浅灰→白平滑过渡,任意尺寸保持清晰 */
+.tab-icon {
+  width: 52rpx;
+  height: 52rpx;
+  background-color: #b9bdc6;
+  transition: background-color 0.2s;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
 }

-.icon-grid .sq {
-  background: #a59cb5;
-  border-radius: 4rpx;
-  transition: background 0.2s;
+.tab-pill.active .tab-icon {
+  background-color: #fff;
 }

-.tab-pill.active .icon-grid .sq {
-  background: #ff2d6e;
+/* 广场:狗窝(拱形门 + 门上小骨头) */
+.icon-feed {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNi41IDIxLjVWMzZhNS41IDUuNSAwIDAgMCA1LjUgNS41aDI0YTUuNSA1LjUgMCAwIDAgNS41LTUuNVYyMS41Ii8+PHBhdGggZD0iTTQgMTkuNUwyNCA0LjVMNDQgMTkuNSIvPjxwYXRoIGQ9Ik0xNy41IDQxLjV2LTcuNWE2LjUgNi41IDAgMCAxIDEzIDB2Ny41Ii8+PHBhdGggZD0iTTE5LjUgMTUuMmg5IiBzdHJva2Utd2lkdGg9IjQuNiIvPjwvZz48L3N2Zz4=");
 }

-/* ── 附近图标：地图 Pin ── */
-.icon-pin {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0;
+/* 附近:定位水滴 + 爪印 */
+.icon-nearby {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTI0IDQ0QzEzLjUgMzQgOCAyNi44IDggMjBhMTYgMTYgMCAwIDEgMzIgMEM0MCAyNi44IDM0LjUgMzQgMjQgNDRaIi8+PGcgZmlsbD0iIzAwMCI+PGNpcmNsZSBjeD0iMTcuNiIgY3k9IjE1LjQiIHI9IjIuMyIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMTMiIHI9IjIuNSIvPjxjaXJjbGUgY3g9IjMwLjQiIGN5PSIxNS40IiByPSIyLjMiLz48cGF0aCBkPSJNMjQgMTkuMmMyLjkgMCA1LjIgMS45IDUuMiA0LjNjMCAyLjQtMi4zIDQuMi01LjIgNC4yYy0yLjkgMC01LjItMS44LTUuMi00LjJjMC0yLjQgMi4zLTQuMyA1LjItNC4zWiIvPjwvZz48L3N2Zz4=");
 }

-.pin-head {
-  width: 22rpx;
-  height: 22rpx;
-  border-radius: 50% 50% 50% 0;
-  background: #a59cb5;
-  transform: rotate(-45deg);
-  transition: background 0.2s;
+/* 汪友:交叉双骨头(前后交叠,交叠处留缝) */
+.icon-friends {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PG1hc2sgaWQ9Im0iPjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSgtNDUpIHNjYWxlKDEuMykiLz48L21hc2s+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIG1hc2s9InVybCgjbSkiPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSg0NSkgc2NhbGUoMS4zKSIvPjwvZz48cGF0aCBkPSJNLTQuMzQgLTIuNkE0LjIgNC4yIDAgMSAwIC0xMS4yIDBBNC4yIDQuMiAwIDEgMCAtNC4zNCAyLjZINC4zNEE0LjIgNC4yIDAgMSAwIDExLjIgMEE0LjIgNC4yIDAgMSAwIDQuMzQgLTIuNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDI0KSByb3RhdGUoLTQ1KSBzY2FsZSgxLjMpIi8+PC9nPjwvc3ZnPg==");
 }

-.pin-tail {
-  width: 4rpx;
-  height: 8rpx;
-  background: #a59cb5;
-  border-radius: 0 0 4rpx 4rpx;
-  margin-top: -2rpx;
-  transition: background 0.2s;
+/* 我的:项圈 + 爱心狗牌 */
+.icon-profile {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIxNy41IiByPSIxMS40Ii8+PGNpcmNsZSBjeD0iMjQiIGN5PSIzNi41IiByPSI2LjQiLz48L2c+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTI0IDQwYy0yLjItMS42LTMuMy0yLjctMy4zLTRhMS45IDEuOSAwIDAgMSAzLjMtMS4yYTEuOSAxLjkgMCAwIDEgMy4zIDEuMmMwIDEuMy0xLjEgMi40LTMuMyA0WiIvPjwvc3ZnPg==");
 }

-.tab-pill.active .pin-head,
-.tab-pill.active .pin-tail {
-  background: #ff2d6e;
-}
-
-/* ── 汪友图标：双人轮廓 ── */
-.icon-ppl {
-  width: 36rpx;
-  height: 30rpx;
-  position: relative;
-}
-
-.ppl-head {
-  position: absolute;
-  width: 14rpx;
-  height: 14rpx;
-  border-radius: 50%;
-  background: #a59cb5;
-  top: 0;
-  transition: background 0.2s;
-}
-
-.ppl-head-l { left: 2rpx; }
-.ppl-head-r { right: 2rpx; }
-
-.ppl-body {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 14rpx;
-  background: #a59cb5;
-  border-radius: 8rpx 8rpx 0 0;
-  transition: background 0.2s;
-}
-
-.tab-pill.active .ppl-head,
-.tab-pill.active .ppl-body {
-  background: #ff2d6e;
-}
-
-/* ── 我的图标：单人轮廓 ── */
-.icon-user {
-  width: 28rpx;
-  height: 34rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4rpx;
-}
-
-.user-head {
-  width: 18rpx;
-  height: 18rpx;
-  border-radius: 50%;
-  background: #a59cb5;
-  transition: background 0.2s;
-}
-
-.user-body {
-  width: 28rpx;
-  height: 14rpx;
-  border-radius: 8rpx 8rpx 0 0;
-  background: #a59cb5;
-  transition: background 0.2s;
-}
-
-.tab-pill.active .user-head,
-.tab-pill.active .user-body {
-  background: #ff2d6e;
-}
-
-/* ── 发布 FAB：液态玻璃凸透镜质感 ── */
+/* ── 发布按钮:黑色圆底 + 白色爪印(CTA 用强调黑) ── */
 .tab-fab-wrap {
  flex: 0 0 auto;
  display: flex;
@@ -219,50 +126,32 @@

 .tab-fab {
  position: relative;
-  overflow: hidden;
-  isolation: isolate;
-  width: 100rpx;
-  height: 100rpx;
+  width: 84rpx;
+  height: 84rpx;
  border-radius: 50%;
-  background: linear-gradient(140deg, #ff2d6e, #ff7a1a 55%, #ffd400);
-  border: 5rpx solid rgba(255, 255, 255, 0.85);
-  box-shadow: 0 16rpx 36rpx rgba(255, 45, 110, 0.40), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
+  background: #2b2b30;
  display: flex;
  align-items: center;
  justify-content: center;
-  transform: translateY(-18rpx);
+  box-shadow: 0 10rpx 24rpx rgba(43, 43, 48, 0.30);
  transition: transform 0.2s ease;
 }

 .tab-fab:active {
-  transform: translateY(-18rpx) scale(0.92);
+  transform: scale(0.9);
 }

-/* 液态高光：左上角玻璃透镜光斑 */
-.fab-shine {
-  position: absolute;
-  top: 6%;
-  left: 14%;
-  width: 46%;
-  height: 38%;
-  border-radius: 50%;
-  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85), transparent 72%);
-  filter: blur(4rpx);
-  pointer-events: none;
-  z-index: 0;
+/* 白色爪印(base64 SVG),任意尺寸保持清晰 */
+.fab-paw {
+  width: 52rpx;
+  height: 52rpx;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0iI2ZmZiI+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE5LjUiIGN5PSIxMy41IiByPSIzLjkiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMTMuNSIgcj0iMy45Ii8+PGNpcmNsZSBjeD0iMzYuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxwYXRoIGQ9Ik0yNCAyMmM1IDAgOSAzLjQgOSA3LjZjMCA0LjItNCA3LjQtOSA3LjRjLTUgMC05LTMuMi05LTcuNGMwLTQuMiA0LTcuNiA5LTcuNloiLz48L2c+PC9zdmc+");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 }

-.fab-plus {
-  position: relative;
-  z-index: 1;
-  font-size: 56rpx;
-  color: #fff;
-  font-weight: 300;
-  line-height: 1;
-  margin-top: -4rpx;
-}
-
-/* ── 未读角标 ── */
+/* ── 未读角标:主色紫 ── */
 .badge {
  position: absolute;
  top: -4rpx;
@@ -270,10 +159,10 @@
  min-width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
-  background: #ff2d6e;
+  background: #8b7cf6;
  color: #fff;
  font-size: 18rpx;
-  font-weight: 800;
+  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;