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 0000000..aad96d2
Binary files /dev/null and b/static/common/images/icon-more-white.png differ