fix(fe): 按钮长文案撑爆 + 用户主页帖子没样式 + 首字头像空白

三个都是我上一轮引入或没顾上的。

## 「Pro 会员（即将开放）」把按钮撑爆

.btn 同时用了 flex 垂直居中和 line-height:96rpx。flex 已经负责居中了，
line-height 纯属多余，而且文案一换行就被这个固定行高顶到按钮外面——
「我的」页底部那颗按钮正好触发。改成 min-height + line-height:1.3，
按钮能随文案长高，短文案的高度不变。

## 用户主页的帖子没有任何样式

.post-card 那一整套只写在 pages/community/community.wxss 里，而页面级
wxss 不跨页生效，所以用户主页上的帖子退化成裸文本。整块提到 app.wxss。
顺带给主页的帖子补上作者行和标签，和社区保持一致。

## 头像圈里空白

WXML 表达式不支持字符串下标，{{nickname[0]}} 求值为空。改成在 js 里
slice 好再传给模板。

另外确认一下：粉丝列表本来就能点进主页——关注和粉丝共用 pages/relations
一个页面，每行都绑了 goUser，和关注列表走同一个 pages/user 主页。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

pets-fe/app.wxss

@@ -133,7 +133,8 @@ page{scrollbar-width:none;-ms-overflow-style:none}
 .btn{
   border:0;height:var(--h-lg);border-radius:var(--r-md);padding:0 var(--sp-5);
   display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
-  font-weight:var(--fw-b);font-size:var(--fs-lg);line-height:var(--h-lg);transition:.16s ease;
+  font-weight:var(--fw-b);font-size:var(--fs-lg);line-height:1.3;transition:.16s ease;
+  min-height:var(--h-lg);height:auto;padding-top:var(--sp-2);padding-bottom:var(--sp-2);
 }
 .btn::after{border:none}
 .btn:active{transform:scale(.98)}
@@ -145,7 +146,7 @@ page{scrollbar-width:none;-ms-overflow-style:none}
 .btn-soft{color:var(--primary-ink);background:var(--primary-soft)}
 .btn-green{color:#fff;background:var(--green)}
 .btn-block{width:100%;display:flex}
-.btn-small{height:var(--h-sm);border-radius:var(--r-sm);padding:0 var(--sp-4);font-size:var(--fs-sm);line-height:var(--h-sm)}
+.btn-small{min-height:var(--h-sm);border-radius:var(--r-sm);padding:0 var(--sp-4);font-size:var(--fs-sm)}
 
 /* 卡片 */
 .card{
@@ -365,3 +366,39 @@ page{scrollbar-width:none;-ms-overflow-style:none}
 .top-bar{flex:none;padding:var(--sp-2) var(--pad-x) 0}
 .top-bar .pet-switch{padding-bottom:var(--sp-2)}
 .top-bar .st-pill{padding-bottom:var(--sp-2)}
+
+/* 帖子卡。社区和用户主页都要用，页面级 wxss 不跨页生效，所以放全局 */
+.post-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);padding:var(--sp-4);margin-bottom:var(--sp-4)}
+.post-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
+.post-avatar{
+  width:80rpx;height:80rpx;border-radius:var(--r-sm);background:var(--primary-soft);
+  display:flex;align-items:center;justify-content:center;font-size:40rpx;flex:none;
+}
+.post-user{flex:1;min-width:0}
+.pu-b{font-size:var(--fs-md);display:block;font-weight:var(--fw-b)}
+.ai-tag{
+  display:inline-block;margin-left:var(--sp-1);padding:0 var(--sp-1);border-radius:var(--r-xs);
+  background:var(--blue-soft);color:var(--blue-ink);font-size:var(--fs-cap);font-weight:var(--fw-b);vertical-align:1rpx;
+}
+.pu-s{font-size:var(--fs-sm);color:var(--muted)}
+.post-content{font-size:var(--fs-md);line-height:1.62;color:var(--text-2);margin-bottom:var(--sp-3)}
+
+.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);margin-bottom:var(--sp-3)}
+.photo-tile{
+  aspect-ratio:1;border-radius:var(--r-sm);background:var(--primary-soft);
+  display:flex;align-items:center;justify-content:center;font-size:56rpx;
+}
+
+/* 三等分。原来是 space-around 排三个宽度不一的项，点赞数一变宽度就跳 */
+.post-actions{display:flex;border-top:1rpx solid var(--line);padding-top:var(--sp-2)}
+.pa-btn{
+  flex:1;height:72rpx;
+  display:flex;align-items:center;justify-content:center;gap:var(--sp-1);
+  color:var(--muted);font-weight:var(--fw);font-size:var(--fs-sm);
+}
+.pa-n{line-height:1}
+.pa-btn.liked{color:var(--red-ink)}
+.pa-btn:active{background:var(--surface-2);border-radius:var(--r-sm)}
+/* 分享用微信原生 open-type=share，得抹掉 button 默认外观 */
+.pa-share{background:transparent;border:none;padding:0;margin:0;line-height:inherit}
+.pa-share::after{border:none}

pets-fe/pages/community/community.wxss

@@ -1,39 +1,5 @@
 .compose-card{margin-bottom:var(--sp-4)}
 
-.post-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);padding:var(--sp-4);margin-bottom:var(--sp-4)}
-.post-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
-.post-avatar{
-  width:80rpx;height:80rpx;border-radius:var(--r-sm);background:var(--primary-soft);
-  display:flex;align-items:center;justify-content:center;font-size:40rpx;flex:none;
-}
-.post-user{flex:1;min-width:0}
-.pu-b{font-size:var(--fs-md);display:block;font-weight:var(--fw-b)}
-.ai-tag{
-  display:inline-block;margin-left:var(--sp-1);padding:0 var(--sp-1);border-radius:var(--r-xs);
-  background:var(--blue-soft);color:var(--blue-ink);font-size:var(--fs-cap);font-weight:var(--fw-b);vertical-align:1rpx;
-}
-.pu-s{font-size:var(--fs-sm);color:var(--muted)}
-.post-content{font-size:var(--fs-md);line-height:1.62;color:var(--text-2);margin-bottom:var(--sp-3)}
-
-.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);margin-bottom:var(--sp-3)}
-.photo-tile{
-  aspect-ratio:1;border-radius:var(--r-sm);background:var(--primary-soft);
-  display:flex;align-items:center;justify-content:center;font-size:56rpx;
-}
-
-/* 三等分。原来是 space-around 排三个宽度不一的项，点赞数一变宽度就跳 */
-.post-actions{display:flex;border-top:1rpx solid var(--line);padding-top:var(--sp-2)}
-.pa-btn{
-  flex:1;height:72rpx;
-  display:flex;align-items:center;justify-content:center;gap:var(--sp-1);
-  color:var(--muted);font-weight:var(--fw);font-size:var(--fs-sm);
-}
-.pa-n{line-height:1}
-.pa-btn.liked{color:var(--red-ink)}
-.pa-btn:active{background:var(--surface-2);border-radius:var(--r-sm)}
-/* 分享用微信原生 open-type=share，得抹掉 button 默认外观 */
-.pa-share{background:transparent;border:none;padding:0;margin:0;line-height:inherit}
-.pa-share::after{border:none}
 
 /* 关注按钮 */
 .follow-btn{

pets-fe/pages/relations/relations.js

@@ -12,7 +12,9 @@ Page({
     api
       .relations(this.data.uid, this.data.kind, page)
       .then((res) => {
-        const merged = page === 1 ? res.list || [] : this.data.list.concat(res.list || []);
+        // WXML 表达式不支持字符串下标，首字母得在这里算好
+        const list = (res.list || []).map((u) => ({ ...u, initial: (u.nickname || '?').slice(0, 1) }));
+        const merged = page === 1 ? list : this.data.list.concat(list);
         this.setData({ list: merged, page, loaded: true, hasMore: merged.length < (res.total || 0) });
       })
       .catch((e) => {

pets-fe/pages/relations/relations.wxml

@@ -6,7 +6,7 @@
   <view wx:for="{{list}}" wx:key="id" class="rel" bindtap="goUser" data-id="{{item.id}}">
     <view class="rel-av">
       <image wx:if="{{item.avatar_url}}" class="rel-av-img" src="{{item.avatar_url}}" mode="aspectFill"></image>
-      <block wx:else>{{item.nickname[0]}}</block>
+      <block wx:else>{{item.initial}}</block>
     </view>
     <view class="rel-name">{{item.nickname}}<text wx:if="{{item.is_bot}}" class="ai-tag">AI</text></view>
     <view wx:if="{{!item.is_self}}" class="follow-btn {{item.followed ? 'on' : ''}}"

pets-fe/pages/user/user.js

@@ -1,6 +1,8 @@
 const api = require('../../utils/api.js');
 const { toastErr } = require('../../utils/ui.js');
 
+const TAG_CLASS = { 求助: 'warn', 经验: 'blue', 精选: 'purple', 避坑: 'red', 晒宠: '' };
+
 function fmtAgo(iso) {
   if (!iso) return '';
   const d = new Date(iso);
@@ -26,7 +28,12 @@ Page({
   loadCard() {
     api
       .userCard(this.data.uid)
-      .then((card) => this.setData({ card, loading: false }))
+      .then((card) =>
+        this.setData({
+          card: { ...card, initial: (card.nickname || '?').slice(0, 1) },
+          loading: false,
+        }),
+      )
       .catch((e) => {
         this.setData({ loading: false });
         toastErr(e);
@@ -36,7 +43,16 @@ Page({
     api
       .userPosts(this.data.uid, page)
       .then((res) => {
-        const list = (res.list || []).map((p) => ({ ...p, timeText: fmtAgo(p.created_at) }));
+        const list = (res.list || []).map((p) => {
+          const tag = (p.tags || [])[0] || '';
+          return {
+            ...p,
+            timeText: fmtAgo(p.created_at),
+            author_emoji: p.author_emoji || '🐾',
+            tag,
+            tagClass: TAG_CLASS[tag] || '',
+          };
+        });
         const merged = page === 1 ? list : this.data.posts.concat(list);
         this.setData({ posts: merged, page, hasMore: merged.length < (res.total || 0) });
       })

pets-fe/pages/user/user.wxml

@@ -12,7 +12,7 @@ module.exports.isUrl = function (s) { return s && s.indexOf('http') === 0; }
     <view class="card u-head">
       <view class="u-av">
         <image wx:if="{{card.avatar_url}}" class="u-av-img" src="{{card.avatar_url}}" mode="aspectFill"></image>
-        <block wx:else>{{card.nickname[0]}}</block>
+        <block wx:else>{{card.initial}}</block>
       </view>
       <view class="u-name">{{card.nickname}}<text wx:if="{{card.is_bot}}" class="ai-tag">AI</text></view>
 
@@ -33,7 +33,12 @@ module.exports.isUrl = function (s) { return s && s.indexOf('http') === 0; }
 
     <view wx:for="{{posts}}" wx:key="id" class="post-card">
       <view class="post-head">
-        <view class="pu-s">{{item.timeText}}</view>
+        <view class="post-avatar">{{item.author_emoji}}</view>
+        <view class="post-user">
+          <view class="pu-b">{{item.author_name}}</view>
+          <view class="pu-s">{{item.timeText}}</view>
+        </view>
+        <view wx:if="{{item.tag}}" class="tag {{item.tagClass}}">{{item.tag}}</view>
       </view>
       <view class="post-content">{{item.content}}</view>
       <view wx:if="{{item.images.length}}" class="photo-grid">

pets-fe/preview-v2.html

@@ -1,12 +1,10 @@
-<!doctype html><meta charset="utf-8"><title>顶部条</title><style>
+<!doctype html><meta charset="utf-8"><title>修复验证</title><style>
 body{font-family:-apple-system,"PingFang SC",sans-serif;margin:0;padding:20px;background:#EDEAE4}
 .pt-i{display:inline-block;background-color:currentColor;-webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:-.15em}
-.phone{width:375px;border-radius:20px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.12)}
-.nav{height:44px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;
- background:linear-gradient(180deg,rgba(250,247,242,.94),rgba(250,247,242,0))}
+.wrap{display:flex;gap:20px;align-items:flex-start}
+.phone{width:340px;padding:14px;border-radius:18px;background:#F6F3EE;box-shadow:0 6px 24px rgba(0,0,0,.1)}
 h3{font:600 13px/1 -apple-system;margin:0 0 8px;color:#555}
-.wrap{display:flex;gap:24px}
 
 .pt-i-weight{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik03IDIwbDEwIDAiIC8+PHBhdGggZD0iTTYgNmw2IC0xbDYgMSIgLz48cGF0aCBkPSJNMTIgM2wwIDE3IiAvPjxwYXRoIGQ9Ik05IDEybC0zIC02bC0zIDZhMyAzIDAgMCAwIDYgMCIgLz48cGF0aCBkPSJNMjEgMTJsLTMgLTZsLTMgNmEzIDMgMCAwIDAgNiAwIiAvPjwvc3ZnPg==")}
 .pt-i-poop{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMCAxMmguMDEiIC8+PHBhdGggZD0iTTE0IDEyaC4wMSIgLz48cGF0aCBkPSJNMTAgMTZhMy41IDMuNSAwIDAgMCA0IDAiIC8+PHBhdGggZD0iTTExIDRjMiAwIDMuNSAxLjUgMy41IDRsLjE2NCAwYTIuNSAyLjUgMCAwIDEgMi4xOTYgMy4zMmEzIDMgMCAwIDEgMS42MTUgMy4wNjNhMyAzIDAgMCAxIC0xLjI5OSA1LjYwN2wtLjE3NiAwaC0xMGEzIDMgMCAwIDEgLTEuNDc0IC01LjYxM2EzIDMgMCAwIDEgMS42MTUgLTMuMDYyYTIuNSAyLjUgMCAwIDEgMi4xOTUgLTMuMzJsLjE2NCAwYzEuNSAwIDIuNSAtMiAxLjUgLTRsMCAuMDA1IiAvPjwvc3ZnPg==")}
@@ -46,6 +44,7 @@ h3{font:600 13px/1 -apple-system;margin:0 0 8px;color:#555}
 .pt-i-dog{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMSA1aDIiIC8+PHBhdGggZD0iTTE5IDEyYy0uNjY3IDUuMzMzIC0yLjMzMyA4IC01IDhoLTRjLTIuNjY3IDAgLTQuMzMzIC0yLjY2NyAtNSAtOCIgLz48cGF0aCBkPSJNMTEgMTZjMCAuNjY3IC4zMzMgMSAxIDFzMSAtLjMzMyAxIC0xaC0yIiAvPjxwYXRoIGQ9Ik0xMiAxOHYyIiAvPjxwYXRoIGQ9Ik0xMCAxMXYuMDEiIC8+PHBhdGggZD0iTTE0IDExdi4wMSIgLz48cGF0aCBkPSJNNSA0bDYgLjk3bC02LjIzOCA2LjY4OGExLjAyMSAxLjAyMSAwIDAgMSAtMS40MSAuMTExYS45NTMgLjk1MyAwIDAgMSAtLjMyNyAtLjk1NGwxLjk3NSAtNi44MTUiIC8+PHBhdGggZD0iTTE5IDRsLTYgLjk3bDYuMjM4IDYuNjg4Yy4zNTggLjQwOCAuOTg5IC40NTggMS40MSAuMTExYS45NTMgLjk1MyAwIDAgMCAuMzI3IC0uOTU0bC0xLjk3NSAtNi44MTUiIC8+PC9zdmc+")}
 .pt-i-user{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik04IDdhNCA0IDAgMSAwIDggMGE0IDQgMCAwIDAgLTggMCIgLz48cGF0aCBkPSJNNiAyMXYtMmE0IDQgMCAwIDEgNCAtNGg0YTQgNCAwIDAgMSA0IDR2MiIgLz48L3N2Zz4=")}
 .pt-i-clock{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0zIDEyYTkgOSAwIDEgMCAxOCAwYTkgOSAwIDAgMCAtMTggMCIgLz48cGF0aCBkPSJNMTIgN3Y1bDMgMyIgLz48L3N2Zz4=")}
+
 /* ===== 全局设计令牌 + 通用样式 =====
    规则：任何页面/组件都不要再写死色值、圆角、字号，一律用下面的 token。
    收敛前的现状是 22 种圆角、26 档字号、9 种近似浅橙、7 处一次性阴影，
@@ -180,7 +179,8 @@ view,text{box-sizing:border-box}
 .btn{
   border:0;height:var(--h-lg);border-radius:var(--r-md);padding:0 var(--sp-5);
   display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
-  font-weight:var(--fw-b);font-size:var(--fs-lg);line-height:var(--h-lg);transition:.16s ease;
+  font-weight:var(--fw-b);font-size:var(--fs-lg);line-height:1.3;transition:.16s ease;
+  min-height:var(--h-lg);height:auto;padding-top:var(--sp-2);padding-bottom:var(--sp-2);
 }
 .btn::after{border:none}
 .btn:active{transform:scale(.98)}
@@ -192,7 +192,7 @@ view,text{box-sizing:border-box}
 .btn-soft{color:var(--primary-ink);background:var(--primary-soft)}
 .btn-green{color:#fff;background:var(--green)}
 .btn-block{width:100%;display:flex}
-.btn-small{height:var(--h-sm);border-radius:var(--r-sm);padding:0 var(--sp-4);font-size:var(--fs-sm);line-height:var(--h-sm)}
+.btn-small{min-height:var(--h-sm);border-radius:var(--r-sm);padding:0 var(--sp-4);font-size:var(--fs-sm)}
 
 /* 卡片 */
 .card{
@@ -412,29 +412,8 @@ view,text{box-sizing:border-box}
 .top-bar{flex:none;padding:var(--sp-2) var(--pad-x) 0}
 .top-bar .pet-switch{padding-bottom:var(--sp-2)}
 .top-bar .st-pill{padding-bottom:var(--sp-2)}
-.st{white-space:nowrap}
-
-/* 横滑药丸：数量不定、可滚动（社区分类、记录类型筛选） */
-.st-pill{padding:0 0 var(--sp-4)}
-.st-pill .st-item{
-  display:inline-block;height:var(--h-sm);line-height:var(--h-sm);padding:0 var(--sp-4);
-  margin-right:var(--sp-2);border-radius:var(--r-full);border:0.5px solid var(--line);
-  background:#fff;color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-b);
-}
-.st-pill .st-item.on{color:var(--primary-dark);background:var(--primary-soft);border-color:var(--primary-line)}
-
-/* 灰槽白块：数量固定的互斥视图（计划页三段） */
-.st-solid{
-  display:flex;gap:var(--sp-1);padding:var(--sp-1);border-radius:var(--r-md);
-  background:#EFE8DE;margin-bottom:var(--sp-4);
-}
-.st-solid .st-item{
-  flex:1;height:var(--h-sm);line-height:var(--h-sm);text-align:center;border-radius:var(--r-sm);
-  color:var(--muted);font-size:var(--fs-md);font-weight:var(--fw-b);
-}
-.st-solid .st-item.on{background:#fff;color:var(--primary-dark)}
-.compose-card{margin-bottom:var(--sp-4)}
 
+/* 帖子卡。社区和用户主页都要用，页面级 wxss 不跨页生效，所以放全局 */
 .post-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);padding:var(--sp-4);margin-bottom:var(--sp-4)}
 .post-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
 .post-avatar{
@@ -469,49 +448,55 @@ view,text{box-sizing:border-box}
 /* 分享用微信原生 open-type=share，得抹掉 button 默认外观 */
 .pa-share{background:transparent;border:none;padding:0;margin:0;line-height:inherit}
 .pa-share::after{border:none}
-
-/* 关注按钮 */
-.follow-btn{
-  flex:none;font-size:var(--fs-cap);font-weight:var(--fw-b);padding:3px var(--sp-3);border-radius:var(--r-full);
-  color:var(--primary-dark);background:var(--primary-soft);border:0.5px solid var(--primary-line);
+.u-head{text-align:center;padding:var(--sp-6) var(--sp-5)}
+.u-av{
+  width:70px;height:70px;border-radius:50%;margin:0 auto var(--sp-3);overflow:hidden;
+  display:flex;align-items:center;justify-content:center;
+  background:var(--primary-soft);color:var(--primary-ink);font-size:28px;font-weight:var(--fw-b);
 }
-.follow-btn.on{color:var(--muted);background:#F4F1EC;border-color:var(--line)}
-
-.retry-btn{
-  margin-top:var(--sp-3);display:inline-block;padding:var(--sp-2) var(--sp-6);border-radius:var(--r-full);
-  background:var(--primary-soft);color:var(--primary-dark);font-weight:var(--fw-b);font-size:var(--fs-sm);
+.u-av-img{width:100%;height:100%}
+.u-name{font-size:var(--fs-lg);font-weight:var(--fw-b)}
+.u-stats{display:flex;justify-content:center;gap:var(--sp-6);margin:var(--sp-4) 0}
+.u-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
+.u-n{font-size:var(--fs-lg);font-weight:var(--fw-b)}
+.u-l{font-size:var(--fs-cap);color:var(--muted)}
+.rel{
+  display:flex;align-items:center;gap:var(--sp-3);
+  background:#fff;border-radius:var(--r-md);box-shadow:var(--sd-1);
+  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);
 }
-
-/* 分类标签吸顶，发布按钮收进同一条：原来那个大黑按钮独占 62px，
-   而它是低频操作，不该在每屏都占着首屏 */
-.feed-bar{display:flex;align-items:flex-start;gap:var(--sp-3)}
-.feed-bar .st{flex:1;min-width:0}
-.feed-post{
-  flex:none;display:flex;align-items:center;gap:2px;
-  height:var(--h-sm);padding:0 var(--sp-3);border-radius:var(--r-full);
-  background:var(--cta);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-b);
+.rel-av{
+  width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
+  display:flex;align-items:center;justify-content:center;
+  background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-lg);font-weight:var(--fw-b);
 }
+.rel-av-img{width:100%;height:100%}
+.rel-name{flex:1;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-b)}
 </style>
-<div class="wrap">
-<div><h3>首页顶部</h3><div class="phone mp"><div class="nav">肉垫计划</div>
- <div class="top-bar"><div class="pet-switch">
-   <div class="pet-chip active"><div class="mini-avatar">🐶</div>钞票</div>
-   <div class="pet-chip"><div class="mini-avatar"><i class="pt-i pt-i-plus" style="width:15px;height:15px"></i></div>添加</div></div></div>
- <div style="padding:4px 20px 16px">
-   <div style="font-size:20px;font-weight:600">下午好，开发用户</div>
-   <div style="font-size:12px;color:#8D8277;margin-top:4px">今天也要照顾好 钞票</div>
- </div>
- <div style="padding:0 20px 20px"><div class="card" style="margin:0">卡片内容…</div></div></div></div>
+<div class="wrap mp">
+<div><h3>① Pro 长文案按钮（原来撑爆）</h3><div class="phone">
+  <div class="btn btn-ghost btn-block" style="margin-bottom:10px">Pro 会员（即将开放）</div>
+  <div class="btn btn-dark btn-block"><i class="pt-i pt-i-plus" style="width:15px;height:15px"></i>添加毛孩子</div></div></div>
 
-<div><h3>社区顶部</h3><div class="phone mp"><div class="nav">宠友圈</div>
- <div class="top-bar feed-bar">
-  <div class="st st-pill">
-    <span class="st-item on">推荐</span><span class="st-item">关注</span><span class="st-item">新手求助</span><span class="st-item">晒宠</span>
-  </div>
-  <div class="feed-post"><i class="pt-i pt-i-plus" style="width:14px;height:14px"></i>发布</div>
- </div>
- <div style="padding:0 20px 20px"><div class="post-card" style="margin:0">
-  <div class="post-head"><div class="post-avatar">🐮</div>
-   <div class="post-user"><div class="pu-b">奶牛猫饲养员</div><div class="pu-s">28 分钟前</div></div>
-   <div class="follow-btn">+ 关注</div></div>
-  <div class="post-content">刚打完第二针疫苗…</div></div></div></div></div>
+<div><h3>② 用户主页（帖子样式 + 首字头像）</h3><div class="phone">
+  <div class="card u-head">
+    <div class="u-av">奶</div>
+    <div class="u-name">奶牛猫饲养员<span class="ai-tag">AI</span></div>
+    <div class="u-stats">
+      <div class="u-stat"><span class="u-n">1</span><span class="u-l">帖子</span></div>
+      <div class="u-stat"><span class="u-n">0</span><span class="u-l">关注</span></div>
+      <div class="u-stat"><span class="u-n">1</span><span class="u-l">粉丝</span></div></div>
+    <div class="btn btn-ghost btn-block">已关注</div></div>
+  <div class="post-card">
+    <div class="post-head"><div class="post-avatar">🐮</div>
+      <div class="post-user"><div class="pu-b">奶牛猫饲养员</div><div class="pu-s">42 分钟前</div></div>
+      <div class="tag blue">经验</div></div>
+    <div class="post-content">刚打完第二针疫苗，小家伙有点蔫蔫的…</div>
+    <div class="post-actions">
+      <div class="pa-btn"><i class="pt-i pt-i-like" style="width:16px;height:16px"></i><span class="pa-n">8</span></div>
+      <div class="pa-btn"><i class="pt-i pt-i-comment" style="width:16px;height:16px"></i><span class="pa-n">1</span></div></div></div></div></div>
+
+<div><h3>③ 关注/粉丝列表</h3><div class="phone">
+  <div class="rel"><div class="rel-av">奶</div><div class="rel-name">奶牛猫饲养员<span class="ai-tag">AI</span></div><div class="follow-btn on">已关注</div></div>
+  <div class="rel"><div class="rel-av">布</div><div class="rel-name">布偶少爷</div><div class="follow-btn">+ 关注</div></div></div></div>
+</div>