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

miniprogram/pages/friends/friends.ts

@@ -16,6 +16,7 @@ Page({
     followersCount: 0,
     loading: false,
     refreshing: false,
+    hasUnread: false,
   },
 
   onLoad() {
@@ -84,6 +85,10 @@ Page({
     wx.switchTab({ url: '/pages/nearby/nearby' })
   },
 
+  onNotify() {
+    wx.navigateTo({ url: '/pages/notifications/notifications' })
+  },
+
   onGoNearby() {
     wx.switchTab({ url: '/pages/nearby/nearby' })
   },

miniprogram/pages/friends/friends.wxml

@@ -1,12 +1,18 @@
 <view class="friends-page">
-  <!-- 状态栏占位 -->
-  <view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
-
-  <!-- 主导航栏：与胶囊等高，右侧避让胶囊 -->
-  <view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
-    <view class="topbar-logo">汪<text class="logo-accent">友</text></view>
+  <!-- 固定液态玻璃顶栏:标题 + 通知铃铛(紧贴胶囊按钮) -->
+  <view class="glass-topbar">
+    <view style="height: {{statusBarHeight}}px;"></view>
+    <view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
+      <view class="topbar-logo">汪<text class="logo-accent">友</text></view>
+      <view class="navbar-action {{hasUnread ? 'has-badge' : ''}}" bindtap="onNotify">
+        <view class="icon-line icon-bell-line"></view>
+      </view>
+    </view>
   </view>
 
+  <!-- 顶栏占位 -->
+  <view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
+
   <!-- 次级菜单栏：位于胶囊下方，全宽可用 -->
   <view class="subbar">
     <view class="topbar-tabs">
@@ -36,6 +42,7 @@
     scroll-y="true"
     class="friends-scroll"
     enhanced="true"
+    bounces="{{false}}"
     show-scrollbar="false"
     refresher-enabled="true"
     bindrefresherrefresh="onRefresh"

miniprogram/pages/friends/friends.wxss

@@ -1,6 +1,11 @@
+/* ── 汪友页:Vital 风格 ──
+   紫色渐变淡出头部 + 白卡列表叠压 */
 .friends-page {
-  min-height: 100vh;
-  background: #ffffff;
+  height: 100vh;
+  background-color: #f1f2f6;
+  background-image: linear-gradient(180deg, #9181f4 0%, #a99bf8 52%, rgba(241, 242, 246, 0) 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 420rpx;
   display: flex;
   flex-direction: column;
 }
@@ -21,46 +26,45 @@
   flex-shrink: 0;
 }
 
+/* logo:玻璃顶栏上的深色标题(颜色由 .glass-topbar 统一控制) */
 .topbar-logo {
   font-size: 46rpx;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: -0.5rpx;
-  color: #2b2438;
-}
-
-.logo-accent {
-  background: linear-gradient(120deg, #ff2d6e, #ff7a1a);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
 }
 
 .topbar-tabs { flex: 1; display: flex; gap: 6rpx; }
 
+/* 紫底 tab:激活态为白色胶囊 + 黑字 */
 .ftab {
   font-size: 28rpx;
-  font-weight: 700;
-  color: #a59cb5;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.72);
   padding: 10rpx 20rpx;
   border-radius: 999rpx;
 }
 
-.ftab-active { color: #ff2d6e; background: rgba(255, 45, 110, 0.12); font-weight: 900; }
+.ftab-active {
+  color: #1b1b20;
+  background: #ffffff;
+  font-weight: 700;
+  box-shadow: 0 8rpx 20rpx rgba(27, 27, 32, 0.10);
+}
 
-.ftab-count { font-size: 22rpx; font-weight: 800; }
+.ftab-count { font-size: 22rpx; font-weight: 600; font-variant-numeric: tabular-nums; }
 
+/* 添加按钮:紫底上的半透明白 */
 .topbar-btn {
   width: 64rpx;
   height: 64rpx;
   border-radius: 26rpx;
-  background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
+  background: rgba(255, 255, 255, 0.22);
   color: #fff;
   font-size: 40rpx;
   font-weight: 200;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.30);
 }
 
 /* 空态 */
@@ -82,31 +86,24 @@
 
 .empty-emoji {
   font-size: 64rpx;
-  color: #8b5cf6;
-  background: var(--glass);
-  backdrop-filter: blur(28rpx) saturate(170%);
-  -webkit-backdrop-filter: blur(28rpx) saturate(170%);
-  border: 1rpx solid var(--glass-edge);
+  background: #ffffff;
   border-radius: 40rpx;
   padding: 28rpx;
   box-shadow: var(--shadow-soft);
 }
 
-.empty-title { font-size: 34rpx; font-weight: 900; color: #2b2438; }
+.empty-title { font-size: 34rpx; font-weight: 700; color: #1b1b20; }
 
-.empty-desc { font-size: 26rpx; color: #6e6480; text-align: center; line-height: 1.6; }
+.empty-desc { font-size: 26rpx; color: #6e7280; text-align: center; line-height: 1.6; }
 
 .go-btn {
   margin-top: 12rpx;
   padding: 22rpx 60rpx;
   font-size: 26rpx;
-  font-weight: 800;
-  border: 1.5rpx solid rgba(255, 255, 255, 0.7);
-  background: linear-gradient(135deg, #ff2d6e, #8b5cf6);
-  box-shadow: 0 18rpx 36rpx rgba(139, 92, 246, 0.32);
+  font-weight: 600;
 }
 
-/* 好友列表 */
+/* 好友列表:白卡 */
 .friends-scroll { flex: 1; }
 
 .friend-item {
@@ -115,12 +112,9 @@
   gap: 20rpx;
   padding: 22rpx;
   margin: 0 28rpx 20rpx;
-  background: var(--glass);
-  backdrop-filter: blur(28rpx) saturate(170%);
-  -webkit-backdrop-filter: blur(28rpx) saturate(170%);
-  border: 1rpx solid var(--glass-edge);
+  background: #ffffff;
   border-radius: 44rpx;
-  box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
+  box-shadow: var(--shadow-soft);
 }
 
 .friend-avatar {
@@ -131,9 +125,8 @@
   align-items: center;
   justify-content: center;
   font-size: 36rpx;
-  font-weight: 800;
-  color: rgba(43, 36, 56, 0.72);
-  border: 3rpx solid rgba(255, 255, 255, 0.8);
+  font-weight: 700;
+  color: rgba(27, 27, 32, 0.65);
   flex-shrink: 0;
 }
 
@@ -146,36 +139,36 @@
   margin-bottom: 6rpx;
 }
 
-.friend-name { font-size: 28rpx; font-weight: 800; color: #2b2438; }
+.friend-name { font-size: 28rpx; font-weight: 600; color: #1b1b20; }
 
 .online-tag {
   font-size: 20rpx;
-  font-weight: 800;
-  color: #00a87a;
-  background: rgba(0, 217, 160, 0.14);
+  font-weight: 600;
+  color: #2f9c7d;
+  background: rgba(75, 190, 154, 0.14);
   border-radius: 999rpx;
   padding: 4rpx 12rpx;
 }
 
 .friend-bio {
   font-size: 24rpx;
-  color: #a59cb5;
+  color: #b9bdc6;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }
 
+/* 关注:强调黑胶囊;已关注:浅灰静默态 */
 .follow-btn {
-  background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
+  background: #2b2b30;
   color: #fff;
-  border: 1.5rpx solid rgba(255, 255, 255, 0.7);
   border-radius: 999rpx;
   padding: 14rpx 28rpx;
   font-size: 24rpx;
-  font-weight: 800;
+  font-weight: 600;
   flex-shrink: 0;
-  box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.28);
+  box-shadow: 0 12rpx 24rpx rgba(43, 43, 48, 0.22);
   transition: transform 0.18s ease;
 }
 
@@ -184,8 +177,7 @@
 }
 
 .follow-btn.following {
-  background: rgba(255, 255, 255, 0.55);
-  border: 1rpx solid rgba(43, 36, 56, 0.12);
-  color: #a59cb5;
+  background: #f1f2f6;
+  color: #6e7280;
   box-shadow: none;
 }