From ef41da80ff80f712dd5151fdb77e49bcb1706109 Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Wed, 17 Dec 2025 10:51:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=BB=91=E5=8A=A8=E5=88=A0=E9=99=A4=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E6=89=B9=E9=87=8F=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/history/index.vue | 197 +++++++++++++++++++++++++++++------
 1 file changed, 163 insertions(+), 34 deletions(-)

diff --git a/pages/home/history/index.vue b/pages/home/history/index.vue
index 2ac5be3..f60bc6f 100644
--- a/pages/home/history/index.vue
+++ b/pages/home/history/index.vue
@@ -51,40 +51,69 @@
         >
           <view class="date-header">{{ group.id }}</view>
 
-          <view
-            class="history-item"
-            v-for="item in group.conversation"
-            :key="item.id"
-          >
-            <!-- 批量删除模式下的选择框 -->
-            <view
-              class="item-checkbox"
-              v-if="isBatchDeleteMode"
-              @click="toggleItemSelection(item.id)"
-            >
-              <view
-                class="checkbox"
-                :class="{ checked: selectedItems.includes(item.id) }"
+          <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)"
               >
-                <text class="checkmark" v-if="selectedItems.includes(item.id)"
-                  >✓</text
-                >
-              </view>
-            </view>
+                <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="item-content">
-              <view class="item-header">
-                <view class="item-icon">
-                  <image
-                    class="icon-image"
-                    src="/static/common/images/icon_chat2.png"
-                  />
+                <view
+                  class="history-item"
+                  :class="{
+                    'no-right-radius': openedItems[item.id] === 'right',
+                  }"
+                >
+                  <!-- 批量删除模式下的选择框 -->
+                  <view
+                    class="item-checkbox"
+                    v-if="isBatchDeleteMode"
+                    @click="toggleItemSelection(item.id)"
+                  >
+                    <view
+                      class="checkbox"
+                      :class="{ checked: selectedItems.includes(item.id) }"
+                    >
+                      <text
+                        class="checkmark"
+                        v-if="selectedItems.includes(item.id)"
+                        >✓</text
+                      >
+                    </view>
+                  </view>
+
+                  <!-- 历史记录内容 -->
+                  <view class="item-content">
+                    <view class="item-header">
+                      <view class="item-icon">
+                        <image
+                          class="icon-image"
+                          src="/static/common/images/icon_chat2.png"
+                        />
+                      </view>
+                      <view class="item-title">{{ item.title }}</view>
+                    </view>
+                    <!-- <view class="item-description">{{ item.content }}</view> -->
+                  </view>
                 </view>
-                <view class="item-title">{{ item.title }}</view>
-              </view>
-              <!-- <view class="item-description">{{ item.content }}</view> -->
-            </view>
+              </uni-swipe-action-item>
+            </uni-swipe-action>
           </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;