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 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) }); }) diff --git a/pets-fe/pages/user/user.wxml b/pets-fe/pages/user/user.wxml index d7a5403..fff75fa 100644 --- a/pets-fe/pages/user/user.wxml +++ b/pets-fe/pages/user/user.wxml @@ -12,7 +12,7 @@ module.exports.isUrl = function (s) { return s && s.indexOf('http') === 0; } - {{card.nickname[0]}} + {{card.initial}} {{card.nickname}}AI @@ -33,7 +33,12 @@ module.exports.isUrl = function (s) { return s && s.indexOf('http') === 0; } - {{item.timeText}} + {{item.author_emoji}} + + {{item.author_name}} + {{item.timeText}} + + {{item.tag}} {{item.content}} diff --git a/pets-fe/preview-v2.html b/pets-fe/preview-v2.html index 85221df..f34d32d 100644 --- a/pets-fe/preview-v2.html +++ b/pets-fe/preview-v2.html @@ -1,12 +1,10 @@ -顶部条 -
-

首页顶部

肉垫计划
-
-
🐶
钞票
-
添加
-
-
下午好，开发用户
-
今天也要照顾好 钞票
-
-
卡片内容…
+
+

① Pro 长文案按钮（原来撑爆）

+
Pro 会员（即将开放）
+
添加毛孩子
-

社区顶部

宠友圈
-
-
- 推荐关注新手求助晒宠 -
-
发布
-
-
-
🐮
-
奶牛猫饲养员
28 分钟前
-
-
刚打完第二针疫苗…
\ No newline at end of file +

② 用户主页（帖子样式 + 首字头像）

+
+
奶
+
奶牛猫饲养员AI
+
+
1帖子
+
0关注
+
1粉丝
+
已关注
+
+
🐮
+
奶牛猫饲养员
42 分钟前
+
经验
+
刚打完第二针疫苗，小家伙有点蔫蔫的…
+
+
8
+
1
+ +

③ 关注/粉丝列表

+
奶
奶牛猫饲养员AI
+
布
布偶少爷
+
\ No newline at end of file