From df685e91d90cccb90577aeb371d37f6b66260d20 Mon Sep 17 00:00:00 2001 From: yangzhe Date: Wed, 26 Nov 2025 15:49:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=81=8A=E5=A4=A9=E5=8E=86=E5=8F=B2):=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=81=8A=E5=A4=A9=E9=A1=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=92=8C=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ChatHistory.vue | 188 ++++++++++++++++++++++- pages/home/index/index.vue | 14 +- static/common/images/icon-more-white.png | Bin 0 -> 2127 bytes 3 files changed, 191 insertions(+), 11 deletions(-) create mode 100644 static/common/images/icon-more-white.png diff --git a/components/ChatHistory.vue b/components/ChatHistory.vue index 7b4840c..47b395c 100644 --- a/components/ChatHistory.vue +++ b/components/ChatHistory.vue @@ -46,6 +46,7 @@ @@ -61,11 +62,51 @@ :class="{ 'chat-item-active': item.isActiveChat, }" - @click="selectChatItem(groupIndex, index, item.id)" + @click.stop="selectChatItem(groupIndex, index, item.id)" > - - {{ item.title }} + + {{ item.title }} + + + + + + + + + + 回复 + + + + 删除 + + @@ -85,6 +126,17 @@ + + + @@ -126,12 +178,20 @@ export default { }, ], currentTab: 0, + activePopoverId: null, // 当前打开的popover对应的itemId + // 删除确认弹窗的显示状态与目标项 + // deleteConfirmShow: false, + // deleteTargetItem: null, }; }, watch: { show: { handler(newVal) { this.showPopup = newVal; + // 弹层每次打开时，收起右侧“回复/删除”浮窗 + if (newVal) { + this.activePopoverId = null; + } }, immediate: true, }, @@ -139,6 +199,10 @@ export default { if (val !== this.show) { this.$emit("update:show", val); } + // 兼容从内部改变显示状态的场景，打开时关闭浮窗 + if (val) { + this.activePopoverId = null; + } }, // 监听聊天历史数据变化，找到激活项并滚动 chatHistoryList3: { @@ -164,6 +228,60 @@ export default { url: "/pages/home/userSetting/index", }); }, + // 关闭Popover + closePopover() { + this.activePopoverId = null; + }, + // 切换Popover显示状态 + togglePopover(itemId) { + if (this.activePopoverId === itemId) { + this.activePopoverId = null; + return; + } + + this.activePopoverId = itemId; + }, + // 处理回复(暂时无用) + // handleReply(item) { + // this.closePopover(); + // // 这里添加回复逻辑，比如跳转或弹窗 + // console.log("Reply to:", item); + // this.$emit("reply-conversation", item); + // }, + // 处理删除 + handleDelete(item) { + // 关闭右侧浮窗，弹出确认弹窗 + this.closePopover(); + // this.deleteTargetItem = item; + // this.deleteConfirmShow = true; + + this.$u.api + .DeleteDialogueManagement({ + id: item.id, + }) + .then((res) => { + if (res.succeed) { + this.$u.toast("删除成功"); + // 刷新聊天历史数据 + this.$emit("refresh-chat-history"); + } else { + this.$u.toast(res.msg || "删除失败"); + } + }); + }, + // // 确认删除：确认后发出删除事件并重置状态 + // confirmDelete() { + // if (this.deleteTargetItem) { + // this.$emit("delete-conversation", this.deleteTargetItem); + // } + // this.deleteTargetItem = null; + // this.deleteConfirmShow = false; + // }, + // // 取消删除：仅关闭弹窗并清空目标 + // cancelDelete() { + // this.deleteConfirmShow = false; + // this.deleteTargetItem = null; + // }, // 滚动到激活的聊天项 scrollToActiveItem() { // 查找激活的聊天项 @@ -267,16 +385,33 @@ export default { } .chat-item { - padding: 24rpx 30rpx; + padding: 24rpx 24rpx 24rpx 30rpx; border-radius: 16rpx; - // margin-bottom: 4rpx; + margin-bottom: 4rpx; position: relative; - overflow: hidden; + // overflow: hidden; // 移除overflow hidden以便显示popover + + .chat-item-content { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + .more-icon { + width: 40rpx; + height: 40rpx; + } + } .chat-text { font-size: 28rpx; color: #303030; font-family: PingFang SC; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-right: 10rpx; } &-active { @@ -287,11 +422,48 @@ export default { color: #fff; } } + + .popover-menu { + width: 200rpx; + // 相对当前 chat-item 进行绝对定位，随 item 滚动 + position: absolute; + right: 10rpx; + top: 80rpx; + background: linear-gradient( + 135deg, + rgba(79, 106, 255, 0.02), + rgba(215, 237, 237, 0.01) + ); + box-shadow: 0px 2px 8px 0px rgba(91, 92, 94, 0.3); + background-color: #ffffff; + border-radius: 20rpx; + padding: 10rpx 0; + z-index: 10005; + + .popover-item { + display: flex; + gap: 12rpx; + justify-content: center; + align-items: center; + padding: 20rpx 30rpx; + + &:active { + background-color: #f5f5f5; + } + + .popover-text { + font-size: 28rpx; + font-family: PingFang SC; + font-weight: 500; + } + } + } } } .bottom-space { - height: 30rpx; + // 增加底部留白，避免最底部项的浮层阴影被裁剪 + height: 200rpx; width: 100%; } diff --git a/pages/home/index/index.vue b/pages/home/index/index.vue index ecb109a..b413a80 100644 --- a/pages/home/index/index.vue +++ b/pages/home/index/index.vue @@ -236,6 +236,7 @@ :user-name="vuex_user ? vuex_user.Name : ''" @select-conversation="handleSelectConversation" @create-conversation="handleCreateConversation" + @refresh-chat-history="getChatHistoryList" > @@ -405,7 +406,12 @@ export default { }, onLoad() {}, methods: { - handleLeftClick() { + async handleLeftClick() { + await this.getChatHistoryList(); + this.handlePopupShow(); + }, + + async getChatHistoryList() { this.$u.api.GetConversationPage().then((res) => { this.chatHistoryList3 = res.data; if (this.chatHistoryList3.length > 0) { @@ -424,11 +430,13 @@ export default { }); } console.log("this.chatHistoryList3", this.chatHistoryList3); - - this.popupShow = true; }); }, + handlePopupShow() { + this.popupShow = true; + }, + scrollToBottom() { // 如果正在加载更多，不执行滚动 if (this.isLoadingMore) return; diff --git a/static/common/images/icon-more-white.png b/static/common/images/icon-more-white.png new file mode 100644 index 0000000000000000000000000000000000000000..aad96d22d07e22d245417da9108f36f001e49268 GIT binary patch literal 2127 zcmV-V2(b5wP)v9c2Z*UQ3(K&$Ajfy8zlb%Hi37+ z*WfQ+e;v#KLphJaq7VRtjsa1&v;ZLQ1tvTjbZf`bQICaF@g~iz03iQq7#jmz*xSTA&_$rC z#V{!V$kMWZrNdtrbm<1+*QJ^o^ z$AX7Aj>4i5KyNl7coSF!7K8a<8CVDY?A@-;$64<^N&#d|P7Ljm0AgUd!yJfEZZrFvlc-4#|n(QWAhMmh(<02_SFAjI~b!Fh*$J=_CQ< z&6u(F(Fvg0Y@P_Ffkj{?SPPbdd0+(C*BHkgrxT3;AohBoE#se(kp*B17z_00-V^aN zf%X7=N4xvM37nfZ^8$d#f#5}$d=#7s_GX9BKzj;RDo&+lIJIl01px5_q3#1P8ss%q z0+~$=RT|6Nw>Is~3IO7+hJ{Z+Ur@xx5Nm0X03rHzJBCRCK-je;Za86B+gFMwnoeu6Rm^lIPPE~!tvpgkix~I6Mg*7JtGI=TRWvUf;y0746#I-1Z zOFSo1zc=taM7Z##1iEf_mQ1+P>jsvt=|yN4hrgvc`IsAxk| zkAR}dh_Syl0el~T#2*5T5o`!+0ti7)2$3ZLbd!Nbqwxm)eg;16WuL)A$F{ZtD1W}o zxUJJ5R$x&8KFhf2FN#03LcZo`}i*c!0LU>1T4;XKw$R zc>%O%3Ym`qm5S3&VeRbE2gOxf*U$CK@bkg>;7Ho3EbQkTo405L&}I^Hw}6FUDi{Yw zfk|K%cn$pBZX1J-P5?2GnrDtl0C}=ifwr!1Aql{BMr#%?37}?#xxU>b0M{9?KJ~iRZ*=d(T*k3!GcN#0)Fu#pGg#hYQQ8}@n*OFYg_srqF`X%m2J8%n@wz?7L20PI``4gfxEIs)tGBXC(UEehZYkIC#$Y@cQ52p`r= z34nL!VA3}P_%z>T=zQM$|6-dG0JA$D__hJQ2M8J8ng9+Bkh~CM1enIoA*>1Du$|NL z`u`*VujwroJVXJf5M%TdOGEbF)>eQJEg3CSPAbDO*FppK{cjB8da{_=M zJqDI|U}!b5B`y!4%L{2v07@l9X%~;`1?toVb`V5gCW*6UCIujh5P|mgx!M#mf_Pe4 z6xu672RADKB@)t9;cKpryM%TR4t-${Zc4zt}k5&woh?_ybt-EVv>9r^X&?XE*SAYpXyLt}h z^^<|VWbzpN{=7a6%mEuYkHVr7KyOANc^mi`YyjT?E&IKjL~$Ig0HRX002ovPDHLk FV1n_~x>EoE literal 0 HcmV?d00001