From 3ad1516aa43555f52c1b9aa3d6ef9d8daff2fe06 Mon Sep 17 00:00:00 2001 From: Blizzard Date: Wed, 29 Jul 2026 17:19:18 +0800 Subject: [PATCH] =?UTF-8?q?fix(fe):=20=E6=8C=89=E9=92=AE=E9=95=BF=E6=96=87?= =?UTF-8?q?=E6=A1=88=E6=92=91=E7=88=86=20+=20=E7=94=A8=E6=88=B7=E4=B8=BB?= =?UTF-8?q?=E9=A1=B5=E5=B8=96=E5=AD=90=E6=B2=A1=E6=A0=B7=E5=BC=8F=20+=20?= =?UTF-8?q?=E9=A6=96=E5=AD=97=E5=A4=B4=E5=83=8F=E7=A9=BA=E7=99=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 三个都是我上一轮引入或没顾上的。 ## 「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 --- pets-fe/app.wxss | 41 +++++++- pets-fe/pages/community/community.wxss | 34 ------- pets-fe/pages/relations/relations.js | 4 +- pets-fe/pages/relations/relations.wxml | 2 +- pets-fe/pages/user/user.js | 20 +++- pets-fe/pages/user/user.wxml | 9 +- pets-fe/preview-v2.html | 125 +++++++++++-------------- 7 files changed, 123 insertions(+), 112 deletions(-) diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss index 8f2ea40..fc9160a 100644 --- a/pets-fe/app.wxss +++ b/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} diff --git a/pets-fe/pages/community/community.wxss b/pets-fe/pages/community/community.wxss index 13d296c..4d53082 100644 --- a/pets-fe/pages/community/community.wxss +++ b/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{ diff --git a/pets-fe/pages/relations/relations.js b/pets-fe/pages/relations/relations.js index da59e20..6cb5c7f 100644 --- a/pets-fe/pages/relations/relations.js +++ b/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) => { diff --git a/pets-fe/pages/relations/relations.wxml b/pets-fe/pages/relations/relations.wxml index 7e77f44..09f45b3 100644 --- a/pets-fe/pages/relations/relations.wxml +++ b/pets-fe/pages/relations/relations.wxml @@ -6,7 +6,7 @@ - {{item.nickname[0]}} + {{item.initial}} {{item.nickname}}AI