feat(历史记录): 添加滑动删除功能并优化批量删除交互

pages/home/history/index.vue

@@ -51,10 +51,34 @@
         >
           <view class="date-header">{{ group.id }}</view>
 
+          <view v-for="item in group.conversation" :key="item.id">
+            <uni-swipe-action ref="swipeActionRef">
+              <uni-swipe-action-item
+                :disabled="isBatchDeleteMode"
+                :threshold="0.3"
+                :auto-close="true"
+                @change="handleSwipeChange($event, item.id)"
+              >
+                <template v-slot:right>
+                  <view
+                    class="right-btn-box"
+                    @touchend.stop="handleSingleDelete(item)"
+                  >
+                    <!-- <u-icon name="trash" color="#fff" size="34"></u-icon> -->
+                    <image
+                      src="/static/common/images/icon_delete.png"
+                      mode="widthFix"
+                      style="width: 32rpx; height: 32rpx"
+                    />
+                    <text>删除</text>
+                  </view>
+                </template>
+
                 <view
                   class="history-item"
-            v-for="item in group.conversation"
+                  :class="{
-            :key="item.id"
+                    'no-right-radius': openedItems[item.id] === 'right',
+                  }"
                 >
                   <!-- 批量删除模式下的选择框 -->
                   <view
@@ -66,7 +90,9 @@
                       class="checkbox"
                       :class="{ checked: selectedItems.includes(item.id) }"
                     >
-                <text class="checkmark" v-if="selectedItems.includes(item.id)"
+                      <text
+                        class="checkmark"
+                        v-if="selectedItems.includes(item.id)"
                         >✓</text
                       >
                     </view>
@@ -86,6 +112,9 @@
                     <!-- <view class="item-description">{{ item.content }}</view> -->
                   </view>
                 </view>
+              </uni-swipe-action-item>
+            </uni-swipe-action>
+          </view>
         </view>
       </view>
     </view>
@@ -111,10 +140,12 @@
 
 <script>
 import HeaderBar from "@/components/HeaderBar.vue";
+import UniSwipeAction from "@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue";
 
 export default {
   components: {
     HeaderBar,
+    UniSwipeAction,
   },
   data() {
     return {
@@ -129,6 +160,7 @@ export default {
       selectAll: false, // 是否全选
       chatHistoryAI: [], // ai咨询历史记录
       chatHistoryTeacher: [], // 人工咨询历史记录
+      openedItems: {}, // 记录每个项目的滑动状态
     };
   },
   computed: {
@@ -170,6 +202,26 @@ export default {
       this.isBatchDeleteMode = false;
     },
 
+    // 重置滑动状态
+    closeAllSwipeActions() {
+      const swipeActionRefs = this.$refs.swipeActionRef || [];
+      const refs = Array.isArray(swipeActionRefs)
+        ? swipeActionRefs
+        : [swipeActionRefs];
+
+      refs.forEach((ref) => {
+        if (ref && typeof ref.closeAll === "function") {
+          ref.closeAll();
+        }
+      });
+    },
+
+    // 清空 openedItems 并调用 closeAllSwipeActions()
+    resetSwipeState() {
+      this.openedItems = {};
+      this.closeAllSwipeActions();
+    },
+
     // 获取ai历史记录
     async getChatHistoryList() {
       this.$u.api.GetConversationPage().then((res) => {
@@ -189,7 +241,7 @@ export default {
         //     };
         //   });
         // }
-        console.log("this.chatHistoryAI", this.chatHistoryAI);
+        // console.log("this.chatHistoryAI", this.chatHistoryAI);
       });
     },
 
@@ -279,6 +331,7 @@ export default {
       }
 
       this.activeTab = tab;
+      this.resetSwipeState();
       // 切换tab时，刷新当前tab的历史记录
       if (tab === "1") {
         this.getChatHistoryList();
@@ -300,6 +353,7 @@ export default {
     // 取消批量删除模式
     cancelBatchDelete() {
       this.resetBatchState();
+      this.resetSwipeState();
     },
 
     // 点击“批量删除”菜单项，进入批量删除模式
@@ -313,6 +367,9 @@ export default {
     // 切换批量删除模式
     toggleBatchDeleteMode() {
       this.isBatchDeleteMode = !this.isBatchDeleteMode;
+      if (this.isBatchDeleteMode) {
+        this.resetSwipeState();
+      }
       if (!this.isBatchDeleteMode) {
         // 退出批量删除模式时清空选中项
         this.selectedItems = [];
@@ -369,7 +426,9 @@ export default {
         if (isAiTab) {
           res = await this.$u.api.DeleteDialogueManagement({ id: deleteIds });
         } else {
-          res = await this.$u.api.DeleteDialogueApi({ dialogueManagementIds: deleteIds });
+          res = await this.$u.api.DeleteDialogueApi({
+            dialogueManagementIds: deleteIds,
+          });
         }
 
         if (res && res.succeed === true) {
@@ -399,6 +458,55 @@ export default {
         });
       }
     },
+
+    // 处理滑动操作变化
+    handleSwipeChange(e, itemId) {
+      this.$set(this.openedItems, itemId, e);
+    },
+
+    // 处理单个删除操作
+    async handleSingleDelete(item) {
+      if (!item || !item.id) return;
+      if (this.isBatchDeleteMode) return;
+
+      const isAiTab = this.activeTab === "1";
+      const deleteIds = [item.id];
+
+      try {
+        let res = null;
+        if (isAiTab) {
+          res = await this.$u.api.DeleteDialogueManagement({ id: deleteIds });
+        } else {
+          res = await this.$u.api.DeleteDialogueApi({
+            dialogueManagementIds: deleteIds,
+          });
+        }
+
+        if (res && res.succeed === true) {
+          if (isAiTab) {
+            this.getChatHistoryList();
+          } else {
+            this.GetDialogueList_User();
+          }
+
+          this.$refs.uToast.show({
+            title: "删除成功",
+            type: "success",
+          });
+          return;
+        }
+
+        this.$refs.uToast.show({
+          title: (res && (res.msg || res.message)) || "删除失败",
+          type: "error",
+        });
+      } catch (e) {
+        this.$refs.uToast.show({
+          title: "删除失败",
+          type: "error",
+        });
+      }
+    },
   },
 };
 </script>
@@ -520,6 +628,19 @@ export default {
   }
 
   .history-list {
+    .right-btn-box {
+      width: 160rpx;
+      color: #ffffff;
+      background-color: #ff4757;
+      display: flex;
+      flex-direction: column;
+      gap: 10rpx;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0 16rpx 16rpx 0;
+      border-left: 1px solid #fff;
+    }
+
     .date-group {
       margin-bottom: 32rpx;
     }
@@ -534,7 +655,15 @@ export default {
     .history-item {
       display: flex;
       align-items: flex-start;
-      padding: 24rpx 0;
+      padding: 24rpx;
+      background-color: #ffffff;
+      border-radius: 16rpx;
+      transition: border-radius 0.3s;
+
+      &.no-right-radius {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
       .item-checkbox {
         margin-right: 24rpx;