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>
2026-07-29 17:19:18 +08:00
parent 25f655a6fc
commit 3ad1516aa4
7 changed files with 123 additions and 112 deletions
@@ -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>