From c48e241fe11620e1a079abd9f064daf35c4635df Mon Sep 17 00:00:00 2001 From: Blizzard Date: Thu, 30 Jul 2026 18:13:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(fe):=20=E8=AF=84=E8=AE=BA=E6=94=B9?= =?UTF-8?q?=E5=B0=8F=E7=BA=A2=E4=B9=A6=E5=BC=8F=E5=B1=95=E5=BC=80=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E9=9D=A2=E6=9D=BF=EF=BC=9BFAB=20=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E6=9A=96=E6=A9=98=EF=BC=9B=E9=A1=B6=E9=83=A8=E5=8E=BB=E5=86=97?= =?UTF-8?q?=E4=BD=99=E5=85=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 评论：底部平时一条细「说点什么」，点开才展开大写评论面板 （大输入框+工具栏+发送，浮在键盘上方）。失焦时有草稿保持展开， 避免点发送因面板收起而丢点击 - FAB 主题色统一：社区发帖 FAB 从深色改成和首页肉垫一致的暖橘圆钮 - 报告页顶部筛选去掉「添加」（报告页不需要建档入口） - 社区去掉顶部「发布」按钮，发帖统一走右下角悬浮按钮 Co-Authored-By: Claude Opus 5 --- .../components/bottom-sheet/bottom-sheet.js | 20 ++++++++-- .../components/bottom-sheet/bottom-sheet.wxml | 35 ++++++++++-------- .../components/bottom-sheet/bottom-sheet.wxss | 37 +++++++++++++------ pets-fe/components/fab/fab.wxss | 19 ++++------ pets-fe/pages/community/community.wxml | 4 +- pets-fe/pages/report/report.wxml | 2 +- 6 files changed, 71 insertions(+), 46 deletions(-) diff --git a/pets-fe/components/bottom-sheet/bottom-sheet.js b/pets-fe/components/bottom-sheet/bottom-sheet.js index cde30cf..e059234 100644 --- a/pets-fe/components/bottom-sheet/bottom-sheet.js +++ b/pets-fe/components/bottom-sheet/bottom-sheet.js @@ -80,6 +80,7 @@ Component({ commentImages: [], replyTo: {}, cmFocus: false, + composing: false, // 评论输入面板是否展开（收起时只是一条细条） kbHeight: 0, total: 0, }, @@ -117,6 +118,7 @@ Component({ patch.commentImages = []; patch.replyTo = {}; patch.cmFocus = false; + patch.composing = false; patch.kbHeight = 0; patch.saving = false; } @@ -635,7 +637,7 @@ Component({ this.data.commentImages.map((i) => i.url), this.data.replyTo.id || '', ); - this.setData({ commentText: '', commentImages: [], replyTo: {} }); + this.setData({ commentText: '', commentImages: [], replyTo: {}, composing: false, cmFocus: false }); this.loadComments(); this.triggerEvent('commented'); } catch (e) { @@ -661,7 +663,16 @@ Component({ onReplyTo(e) { const { id, name } = e.currentTarget.dataset; if (!id) return; - this.setData({ replyTo: { id, name }, cmFocus: true }); + // 点任意评论直接展开面板并预填回复对象 + this.setData({ replyTo: { id, name }, composing: true, cmFocus: true }); + }, + // 点细条：展开大输入面板并聚焦（拉起键盘） + onStartCompose() { + this.setData({ composing: true, cmFocus: true }); + }, + // 收起面板，草稿（文字/图片）留着，下次点开接着写 + onCloseCompose() { + this.setData({ composing: false, cmFocus: false, kbHeight: 0 }); }, onCommentFocus(e) { // adjust-position=false，键盘高度自己接管：弹层是 fixed 定位， @@ -669,7 +680,10 @@ Component({ this.setData({ kbHeight: (e.detail && e.detail.height) || 0 }); }, onCommentBlur() { - this.setData({ kbHeight: 0, cmFocus: false }); + // 失焦先放下键盘。有草稿就保持展开（否则点「发送」会因面板收起而丢掉这一下点击）； + // 空内容才收回细条 + const empty = !(this.data.commentText || '').trim() && !this.data.commentImages.length; + this.setData({ kbHeight: 0, cmFocus: false, composing: empty ? false : this.data.composing }); }, onCancelReply() { this.setData({ replyTo: {} }); diff --git a/pets-fe/components/bottom-sheet/bottom-sheet.wxml b/pets-fe/components/bottom-sheet/bottom-sheet.wxml index 0559235..0d7c241 100644 --- a/pets-fe/components/bottom-sheet/bottom-sheet.wxml +++ b/pets-fe/components/bottom-sheet/bottom-sheet.wxml @@ -68,29 +68,34 @@ module.exports.sel = function (map, key, index, def) { - - - 回复 {{replyTo.name}} - + + + {{commentText || '说点什么…'}} + + + + + + + {{replyTo.name ? '回复 ' + replyTo.name : '写评论'}} + - + + - - - - - + + + {{commentText.length}}/500 发送 - {{commentText.length}}/500 diff --git a/pets-fe/components/bottom-sheet/bottom-sheet.wxss b/pets-fe/components/bottom-sheet/bottom-sheet.wxss index 1943738..547e849 100644 --- a/pets-fe/components/bottom-sheet/bottom-sheet.wxss +++ b/pets-fe/components/bottom-sheet/bottom-sheet.wxss @@ -136,22 +136,35 @@ background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-cap); } .cm-cancel{display:flex;align-items:center} -/* 相机 + 输入框 + 发送 合成一条圆角输入栏，像聊天输入条； - textarea 撑开时相机和发送贴着底部 */ -.cm-inputrow{ - display:flex;align-items:flex-end;gap:var(--sp-2); - background:var(--surface-2);border:1rpx solid var(--line); - border-radius:32rpx;padding:10rpx var(--sp-2) 10rpx var(--sp-3); +/* 收起态：底部一条细条，点了才展开成大面板（小红书那套） */ +.cm-collapsed{ + flex:none;display:flex;align-items:center;gap:var(--sp-3); + background:#fff;border-top:1rpx solid var(--line); + padding:var(--sp-3) var(--sp-5) calc(20rpx + env(safe-area-inset-bottom)); } -.cm-pic{flex:none;display:flex;align-items:center;height:64rpx;color:var(--muted)} +.cm-collapsed-pill{ + flex:1;min-width:0;height:76rpx;line-height:76rpx;padding:0 var(--sp-5); + border-radius:var(--r-full);background:var(--surface-2);color:var(--muted2); + font-size:var(--fs-md);overflow:hidden;white-space:nowrap;text-overflow:ellipsis; +} +.cm-collapsed-pill.has{color:var(--text)} +.cm-collapsed-ic{flex:none;display:flex;align-items:center;color:var(--muted)} + +/* 展开态：大写评论面板 */ +.cm-dock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)} +.cm-dock-title{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)} +.cm-dock-close{display:flex;align-items:center;color:var(--muted);padding:var(--sp-1)} .cm-ta{ - flex:1;min-width:0;min-height:64rpx;max-height:280rpx;height:auto; - padding:16rpx 0;background:transparent;font-size:var(--fs-md);line-height:1.4; + width:100%;box-sizing:border-box;min-height:200rpx;max-height:520rpx;height:auto; + padding:var(--sp-4);background:var(--surface-2);border-radius:var(--r-md); + font-size:var(--fs-lg);line-height:1.5; } +.cm-toolbar{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)} +.cm-pic{flex:none;display:flex;align-items:center;color:var(--muted)} +.cm-count{margin-left:auto;color:var(--muted2);font-size:var(--fs-cap)} .cm-send{ - flex:none;height:64rpx;padding:0 var(--sp-4);border-radius:var(--r-full); + flex:none;height:76rpx;padding:0 var(--sp-6);border-radius:var(--r-full); display:flex;align-items:center;justify-content:center; - background:var(--line);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-b);transition:.16s ease; + background:var(--line);color:#fff;font-size:var(--fs-md);font-weight:var(--fw-b);transition:.16s ease; } .cm-send.on{background:var(--cta)} -.cm-count{display:block;text-align:right;margin-top:6rpx;color:var(--muted2);font-size:var(--fs-cap)} diff --git a/pets-fe/components/fab/fab.wxss b/pets-fe/components/fab/fab.wxss index 5685576..c3bb974 100644 --- a/pets-fe/components/fab/fab.wxss +++ b/pets-fe/components/fab/fab.wxss @@ -1,22 +1,17 @@ +/* 统一暖橘圆钮：首页肉垫和社区发帖用同一套主题色 */ .fab{ position:fixed;right:36rpx;bottom:calc(190rpx + env(safe-area-inset-bottom)); - width:108rpx;height:108rpx;border-radius:var(--r-md); - background:var(--cta); + width:112rpx;height:112rpx;border-radius:50%; + background:linear-gradient(150deg,#FFB865,#F5943E); color:#fff; display:flex;align-items:center;justify-content:center; - box-shadow:var(--sd-2); + box-shadow:0 12rpx 28rpx rgba(214,138,52,.42),0 2rpx 6rpx rgba(214,138,52,.3); z-index:60; } -.fab:active{transform:scale(.96)} +.fab:active{transform:scale(.94)} -/* 肉垫造型：暖橘圆钮，中间一只奶白肉垫。圆形更像脚印落下的样子， - 阴影带橘调让它从奶白背景上浮起来 */ -.fab-paw{ - width:116rpx;height:116rpx;border-radius:50%; - background:linear-gradient(150deg,#FFB865,#F5943E); - box-shadow:0 12rpx 28rpx rgba(214,138,52,.42),0 2rpx 6rpx rgba(214,138,52,.3); -} -.fab-paw:active{transform:scale(.94)} +/* 肉垫造型：和基础一致的暖橘圆钮，中间一只奶白肉垫 */ +.fab-paw{width:116rpx;height:116rpx} .paw{position:relative;width:66rpx;height:60rpx} /* 掌垫：上窄下宽的圆角心形块，坐在下方 */ diff --git a/pets-fe/pages/community/community.wxml b/pets-fe/pages/community/community.wxml index a25c0ce..e68084c 100644 --- a/pets-fe/pages/community/community.wxml +++ b/pets-fe/pages/community/community.wxml @@ -3,11 +3,9 @@ module.exports.isUrl = function (s) { return s && s.indexOf('http') === 0; } + - - 发布 - diff --git a/pets-fe/pages/report/report.wxml b/pets-fe/pages/report/report.wxml index cc68e88..f897697 100644 --- a/pets-fe/pages/report/report.wxml +++ b/pets-fe/pages/report/report.wxml @@ -1,6 +1,6 @@ - +