feat(聊天历史): 添加聊天项操作菜单和删除功能

components/ChatHistory.vue

@@ -46,6 +46,7 @@
         <view
           v-for="(group, groupIndex) in chatHistoryList3"
           :key="'group-' + group.id + groupIndex"
+          @click="closePopover"
         >
           <!-- 日期标题 -->
           <view class="chat-day">
@@ -61,11 +62,51 @@
             :class="{
               'chat-item-active': item.isActiveChat,
             }"
-            @click="selectChatItem(groupIndex, index, item.id)"
+            @click.stop="selectChatItem(groupIndex, index, item.id)"
           >
-            <!-- currentActiveGroup === groupIndex &&
+            <view class="chat-item-content">
-                currentActiveIndex === index, -->
+              <text class="chat-text u-line-1">{{ item.title }}</text>
-            <text class="chat-text">{{ item.title }}</text>
+              <view
+                class="more-icon"
+                v-if="item.isActiveChat"
+                :id="'more-' + item.id"
+                @click.stop="togglePopover(item.id)"
+              >
+                <image
+                  style="width: 40rpx; height: 40rpx"
+                  src="/static/common/images/icon-more-white.png"
+                ></image>
+              </view>
+            </view>
+
+            <!-- Popover菜单 -->
+            <view
+              class="popover-menu"
+              v-if="activePopoverId === item.id"
+              @click.stop
+            >
+              <view
+                class="popover-item"
+                @click.stop="selectChatItem(groupIndex, index, item.id)"
+              >
+                <u-icon
+                  name="chat"
+                  color="#4f6aff"
+                  size="32"
+                  custom-style="margin-right: 12rpx"
+                ></u-icon>
+                <text class="popover-text" style="color: #4f6aff">回复</text>
+              </view>
+              <view class="popover-item" @click="handleDelete(item)">
+                <u-icon
+                  name="trash"
+                  color="#fa3534"
+                  size="32"
+                  custom-style="margin-right: 12rpx"
+                ></u-icon>
+                <text class="popover-text" style="color: #fa3534">删除</text>
+              </view>
+            </view>
           </view>
         </view>
 
@@ -85,6 +126,17 @@
           <u-icon name="setting" size="40rpx" color="#999"></u-icon>
         </view>
       </view>
+
+      <!-- 删除确认弹窗：使用 uView 的 u-modal 组件实现 -->
+      <!-- <u-modal
+        border-radius="20rpx"
+        v-model="deleteConfirmShow"
+        title="提示"
+        content="删除后，该对话将不可恢复。确认删除吗？"
+        :show-cancel-button="true"
+        @confirm="confirmDelete"
+        @cancel="cancelDelete"
+      ></u-modal> -->
     </view>
   </u-popup>
 </template>
@@ -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%;
   }
 

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"
     ></chat-history>
 
     <!-- 完善信息弹出层 -->
@@ -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;