From 95471d05498ac1ee8049ac73943d6899140d4615 Mon Sep 17 00:00:00 2001
From: Blizzard <blizzardzhang@icloud.com>
Date: Fri, 31 Jul 2026 15:28:23 +0800
Subject: [PATCH] =?UTF-8?q?style(fe):=20=E6=88=91=E7=9A=84=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E5=8D=A1=E7=89=87=E9=87=8D=E6=8E=92=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E5=B7=A6=E5=AF=B9=E9=BD=90=E7=B4=A7=E5=87=91=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 没设头图时不再留一块空橙色 banner（和整页暖橘背景撞色的怪感消除）
- 身份行改左对齐：头像 + 昵称/签名并排；社交数(帖子/关注/粉丝)缩成
  一小行内联；养宠数据保留高亮带。头图设了才显示
- 主题色/头图/签名/展示开关都照常生效

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 pets-fe/components/profile-head/index.wxml | 42 +++++++++++-----------
 pets-fe/components/profile-head/index.wxss | 38 +++++++++++---------
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/pets-fe/components/profile-head/index.wxml b/pets-fe/components/profile-head/index.wxml
index 0932efe..8028bc3 100644
--- a/pets-fe/components/profile-head/index.wxml
+++ b/pets-fe/components/profile-head/index.wxml
@@ -1,37 +1,35 @@
 <view class="pf th-{{theme}}">
-  <!-- 头图。没传背景图就用主题色渐变，不留空白块 -->
-  <view class="pf-bg">
-    <image wx:if="{{card.bg_url}}" class="pf-bg-img" src="{{card.bg_url}}" mode="aspectFill"></image>
-  </view>
+  <!-- 头图：只有设了自定义头图才显示，没设就是干净白卡（不再留一块空色块） -->
+  <image wx:if="{{card.bg_url}}" class="pf-bg-img" src="{{card.bg_url}}" mode="aspectFill"></image>
 
   <view class="pf-body">
-    <view class="pf-av">
-      <image wx:if="{{card.avatar_url}}" class="pf-av-img" src="{{card.avatar_url}}" mode="aspectFill"></image>
-      <block wx:else>{{initial}}</block>
+    <!-- 身份行：头像 + 昵称/签名，左对齐 -->
+    <view class="pf-top">
+      <view class="pf-av">
+        <image wx:if="{{card.avatar_url}}" class="pf-av-img" src="{{card.avatar_url}}" mode="aspectFill"></image>
+        <block wx:else>{{initial}}</block>
+      </view>
+      <view class="pf-id">
+        <view class="pf-name">{{card.nickname || '毛孩子家长'}}<text wx:if="{{card.is_bot}}" class="ai-tag">AI</text></view>
+        <view class="pf-bio">{{card.bio || '这个人很懒，还没写签名'}}</view>
+      </view>
     </view>
-    <view class="pf-name">{{card.nickname || '毛孩子家长'}}<text wx:if="{{card.is_bot}}" class="ai-tag">AI</text></view>
-    <view class="pf-bio">{{card.bio || '这个人很懒，还没写签名'}}</view>
 
-    <view class="pf-stats">
+    <!-- 社交数：小一行，数字+标签内联 -->
+    <view class="pf-social">
       <view class="pf-stat"><text class="pf-n">{{card.post_count || 0}}</text><text class="pf-l">帖子</text></view>
-      <view class="pf-stat" data-kind="following" bindtap="onRelations">
-        <text class="pf-n">{{card.following_count || 0}}</text><text class="pf-l">关注</text>
-      </view>
-      <view class="pf-stat" data-kind="followers" bindtap="onRelations">
-        <text class="pf-n">{{card.follower_count || 0}}</text><text class="pf-l">粉丝</text>
-      </view>
+      <view class="pf-stat" data-kind="following" bindtap="onRelations"><text class="pf-n">{{card.following_count || 0}}</text><text class="pf-l">关注</text></view>
+      <view class="pf-stat" data-kind="followers" bindtap="onRelations"><text class="pf-n">{{card.follower_count || 0}}</text><text class="pf-l">粉丝</text></view>
     </view>
 
-    <!-- 养宠数据。这是这个 App 独有的东西，比帖子数更能说明「这人是个认真的铲屎官」 -->
+    <!-- 养宠数据：这个 App 独有，做成高亮带，比帖子数更能说明是个认真的铲屎官 -->
     <view wx:if="{{card.stats}}" class="pf-keep">
       <view class="pf-keep-i"><text class="pf-kn">{{card.stats.days || 0}}</text><text class="pf-kl">养宠天数</text></view>
       <view class="pf-keep-i"><text class="pf-kn">{{card.stats.records || 0}}</text><text class="pf-kl">累计记录</text></view>
       <view class="pf-keep-i"><text class="pf-kn">{{card.stats.streak || 0}}</text><text class="pf-kl">连续打卡</text></view>
     </view>
 
-    <!-- 宠物名片墙：给别人看的（受「展示我的毛孩子」开关控制）。「我的」页传
-         hideWall 把它藏掉（下面有更详细的「我的毛孩子」卡，避免重复），
-         别人访问 / 预览时照常显示 -->
+    <!-- 宠物名片墙：给别人看的（受开关控制）。「我的」页 hideWall 藏掉 -->
     <scroll-view wx:if="{{card.show_pets && card.pets.length && !hideWall}}" class="pf-wall"
                  scroll-x="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
       <view wx:for="{{card.pets}}" wx:key="id" class="pf-pet" data-id="{{item.id}}" bindtap="onPet">
@@ -44,8 +42,8 @@
       </view>
     </scroll-view>
 
-    <!-- 装扮按钮挪到「我的」页和「预览」并排了，这里只留别人主页的关注键 -->
-    <view wx:if="{{!preview && !card.is_self}}" class="btn {{card.followed ? 'btn-ghost' : 'btn-dark'}} btn-block" bindtap="onFollow">
+    <!-- 别人主页的关注键（装扮按钮已挪到「我的」页） -->
+    <view wx:if="{{!preview && !card.is_self}}" class="btn {{card.followed ? 'btn-ghost' : 'btn-dark'}} btn-block pf-follow" bindtap="onFollow">
       <pt-icon wx:if="{{!card.followed}}" name="plus" size="{{28}}"></pt-icon>{{card.followed ? '已关注' : '关注 TA'}}
     </view>
   </view>
diff --git a/pets-fe/components/profile-head/index.wxss b/pets-fe/components/profile-head/index.wxss
index 8c268d6..33e24ff 100644
--- a/pets-fe/components/profile-head/index.wxss
+++ b/pets-fe/components/profile-head/index.wxss
@@ -11,41 +11,43 @@
   background:#fff;border-radius:var(--r-lg);overflow:hidden;
   box-shadow:var(--sd-1);margin-bottom:var(--sp-5);
 }
-.pf-bg{height:180rpx;background:linear-gradient(135deg,var(--pf-a),var(--pf-b))}
-.pf-bg-img{width:100%;height:100%;display:block}
+/* 头图：设了才显示 */
+.pf-bg-img{width:100%;height:200rpx;display:block}
 
-.pf-body{padding:0 var(--sp-5) var(--sp-5);text-align:center}
-/* 头像压在头图上，负 margin 提上去一半 */
+.pf-body{padding:var(--sp-5)}
+
+/* 身份行：头像 + 昵称/签名 左对齐 */
+.pf-top{display:flex;align-items:center;gap:var(--sp-4)}
 .pf-av{
-  /* 必须定位：头像要压在头图上面，靠 DOM 顺序不够——只要头图是定位元素就会反盖过来 */
-  position:relative;z-index:1;
-  width:144rpx;height:144rpx;margin:-72rpx auto var(--sp-3);
-  border-radius:50%;background:var(--pf-b);color:var(--pf-ink);
+  flex:none;width:120rpx;height:120rpx;border-radius:50%;
+  background:var(--pf-b);color:var(--pf-ink);overflow:hidden;
   display:flex;align-items:center;justify-content:center;
   font-size:var(--fs-xl);font-weight:var(--fw-b);
-  border:6rpx solid #fff;overflow:hidden;box-shadow:var(--sd-1);
 }
 .pf-av-img{width:100%;height:100%;display:block}
-.pf-name{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)}
+.pf-id{flex:1;min-width:0}
+.pf-name{font-size:var(--fs-xl);font-weight:var(--fw-b);color:var(--text)}
 .pf-bio{
-  font-size:var(--fs-sm);color:var(--muted);margin-top:6rpx;
+  font-size:var(--fs-sm);color:var(--muted);margin-top:8rpx;
   line-height:1.5;word-break:break-all;
 }
 
-.pf-stats{display:flex;margin:var(--sp-4) 0}
-.pf-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4rpx}
-.pf-n{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)}
+/* 社交数：小一行，数字+标签内联，左对齐 */
+.pf-social{display:flex;gap:var(--sp-6);margin-top:var(--sp-4)}
+.pf-stat{display:flex;align-items:baseline;gap:6rpx}
+.pf-n{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
 .pf-l{font-size:var(--fs-cap);color:var(--muted)}
 
+/* 养宠数据高亮带 */
 .pf-keep{
   display:flex;background:var(--pf-b);border-radius:var(--r-md);
-  padding:var(--sp-3) 0;margin-bottom:var(--sp-4);
+  padding:var(--sp-4) 0;margin-top:var(--sp-4);
 }
 .pf-keep-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rpx}
-.pf-kn{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--pf-ink)}
+.pf-kn{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--pf-ink)}
 .pf-kl{font-size:var(--fs-cap);color:var(--pf-ink);opacity:.75}
 
-.pf-wall{white-space:nowrap;margin-bottom:var(--sp-4)}
+.pf-wall{white-space:nowrap;margin-top:var(--sp-4)}
 .pf-pet{
   display:inline-block;width:150rpx;vertical-align:top;
   margin-right:var(--sp-3);white-space:normal;
@@ -59,3 +61,5 @@
 .pf-pet-img{width:100%;height:100%;display:block}
 .pf-pet-n{font-size:var(--fs-cap);font-weight:var(--fw-b);color:var(--text);text-align:center}
 .pf-pet-s{font-size:var(--fs-cap);color:var(--muted);text-align:center}
+
+.pf-follow{margin-top:var(--sp-4)}