11

packageA/pages/chat/components/ai-paging.vue

@@ -1,7 +1,21 @@
 <template>
     <view class="chat-container">
+        <!-- 选择模式操作栏 -->
+        <view v-if="isSelectMode" class="select-mode-header">
+            <view class="select-mode-left">
+                <view class="select-count">{{ selectedMessages.length }} 条已选择</view>
+                <view class="select-mode-btn select-all-btn" @click="toggleSelectAll">
+                    {{ isAllSelected ? '取消全选' : '全选' }}
+                </view>
+            </view>
+            <view class="select-mode-right">
+                <view class="select-mode-btn" @click="exitSelectMode">取消</view>
+                <view class="select-mode-btn delete-btn" @click="deleteSelectedMessages">删除</view>
+            </view>
+        </view>
+        
         <!-- Tab切换 -->
-        <view class="tab-container">
+        <view class="tab-container" v-if="!isSelectMode">
             <view 
                 class="tab-item" 
                 :class="{ active: activeTab === 'policy' }"
@@ -74,7 +88,19 @@
                     :id="'msg-' + index"
                     class="chat-item"
                     :class="{ self: msg.self }"
+                    @longpress="handleLongPress(msg, index)"
+                    @click="isSelectMode && toggleMessageSelection(msg.id)"
                 >
+                    <!-- 选择模式下显示选中框 -->
+                    <view 
+                        v-if="isSelectMode" 
+                        class="message-checkbox"
+                        @click.stop="toggleMessageSelection(msg.id)"
+                    >
+                        <view :class="{ checked: selectedMessages.includes(msg.id) }">
+                            <uni-icons v-if="selectedMessages.includes(msg.id)" type="success" size="24" color="#FFFFFF"></uni-icons>
+                        </view>
+                    </view>
                     <view class="message" v-if="msg.self">
                         <view class="msg-filecontent" v-if="msg.files.length">
                             <view
@@ -386,6 +412,14 @@ const cancelThreshold = 100;
 const speechIndex = ref(0);
 const isAudioPermission = ref(false);
 const feebackData = ref(null);
+// 新增：删除消息相关状态
+const isSelectMode = ref(false);
+const selectedMessages = ref([]);
+// 全选状态
+const isAllSelected = computed(() => {
+    const visibleMessages = messages.value.filter(msg => shouldShowMessage(msg));
+    return visibleMessages.length > 0 && selectedMessages.value.length === visibleMessages.length;
+});
 // ref for DOM element
 const voiceBtn = ref(null);
 const feeback = ref(null);
@@ -879,6 +913,91 @@ function refreshMarkdown(index) {
     }
 }
 
+// 新增：删除消息相关方法
+function handleLongPress(msg, index) {
+    isSelectMode.value = true;
+    const selected = [msg.id];
+    // 如果是用户消息，检查下一条是否是AI消息并自动选中
+    if (msg.self && index + 1 < messages.value.length) {
+        const nextMsg = messages.value[index + 1];
+        if (!nextMsg.self) {
+            selected.push(nextMsg.id);
+        }
+    }
+    selectedMessages.value = selected;
+}
+
+function toggleMessageSelection(msgId) {
+    const index = selectedMessages.value.indexOf(msgId);
+    if (index > -1) {
+        // 取消选中
+        selectedMessages.value.splice(index, 1);
+        // 找到对应的消息索引
+        const msgIndex = messages.value.findIndex(msg => msg.id === msgId);
+        if (msgIndex !== -1) {
+            const msg = messages.value[msgIndex];
+            // 如果是用户消息，检查下一条是否是AI消息并取消选中
+            if (msg.self && msgIndex + 1 < messages.value.length) {
+                const nextMsg = messages.value[msgIndex + 1];
+                if (!nextMsg.self) {
+                    const nextIndex = selectedMessages.value.indexOf(nextMsg.id);
+                    if (nextIndex > -1) {
+                        selectedMessages.value.splice(nextIndex, 1);
+                    }
+                }
+            }
+        }
+    } else {
+        // 选中消息
+        selectedMessages.value.push(msgId);
+        // 找到对应的消息索引
+        const msgIndex = messages.value.findIndex(msg => msg.id === msgId);
+        if (msgIndex !== -1) {
+            const msg = messages.value[msgIndex];
+            // 如果是用户消息，检查下一条是否是AI消息并自动选中
+            if (msg.self && msgIndex + 1 < messages.value.length) {
+                const nextMsg = messages.value[msgIndex + 1];
+                if (!nextMsg.self && !selectedMessages.value.includes(nextMsg.id)) {
+                    selectedMessages.value.push(nextMsg.id);
+                }
+            }
+        }
+    }
+}
+
+function exitSelectMode() {
+    isSelectMode.value = false;
+    selectedMessages.value = [];
+}
+
+async function deleteSelectedMessages() {
+    if (selectedMessages.value.length === 0) return;
+    
+    uni.showModal({
+        content: `确认删除选中的 ${selectedMessages.value.length} 条消息？`,
+        success: async (res) => {
+            if (res.confirm) {
+                for (const msgId of selectedMessages.value) {
+                    await useChatGroupDBStore().deleteMessage(msgId);
+                }
+                exitSelectMode();
+                $api.msg('消息删除成功');
+            }
+        }
+    });
+}
+
+function toggleSelectAll() {
+    const visibleMessages = messages.value.filter(msg => shouldShowMessage(msg));
+    if (isAllSelected.value) {
+        // 取消全选
+        selectedMessages.value = [];
+    } else {
+        // 全选
+        selectedMessages.value = visibleMessages.map(msg => msg.id);
+    }
+}
+
 const jobSearchQueries = [
     '喀什地区有哪些薪资 12K 以上的岗位适合我？',
     '喀什地区 3 年工作经验能找到哪些 12K 以上的工作？',
@@ -1473,4 +1592,92 @@ image-margin-top = 60rpx
 .tab-item:active {
     background-color: #F5F5F5;
 }
+
+/* 选择模式样式 */
+.select-mode-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 66rpx;
+    height: 132rpx;
+    background: #FFFFFF;
+    border-bottom: 3rpx solid #F4F4F4;
+    z-index: 10;
+}
+
+.select-mode-left {
+    display: flex;
+    align-items: center;
+    gap: 48rpx;
+}
+
+.select-count {
+    font-size: 42rpx;
+    font-weight: 500;
+    color: #333333;
+}
+
+.select-all-btn {
+    font-size: 42rpx;
+    font-weight: 500;
+    color: #256BFA;
+    padding: 12rpx 24rpx;
+    border-radius: 18rpx;
+}
+
+.select-all-btn:active {
+    background-color: #F5F5F5;
+}
+
+.select-mode-right {
+    display: flex;
+    align-items: center;
+    gap: 48rpx;
+}
+
+.select-mode-btn {
+    font-size: 42rpx;
+    font-weight: 500;
+    color: #666666;
+    padding: 12rpx 24rpx;
+    border-radius: 18rpx;
+}
+
+.select-mode-btn:active {
+    background-color: #F5F5F5;
+}
+
+.delete-btn {
+    color: #FF4757;
+}
+
+/* 消息选中框样式 */
+.message-checkbox {
+    position: absolute;
+    top: 15rpx;
+    left: -45rpx;
+    z-index: 5;
+}
+
+.message-checkbox view {
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: 50%;
+    border: 3rpx solid #D1D1D1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #FFFFFF;
+}
+
+.message-checkbox view.checked {
+    background-color: #256BFA;
+    border-color: #256BFA;
+}
+
+/* 调整聊天项的布局，为选中框留出空间 */
+.chat-item {
+    position: relative;
+    padding-left: 30rpx;
+}
 </style>

stores/userChatGroupStore.js

@@ -335,6 +335,12 @@ const useChatGroupDBStore = defineStore("messageGroup", () => {
         }))
     }
 
+    async function deleteMessage(messageId) {
+        if (!baseDB.isDBReady) await baseDB.initDB();
+        await baseDB.db.delete(massageName.value, messageId);
+        messages.value = messages.value.filter(msg => msg.id !== messageId);
+    }
+
     return {
         messages,
         isTyping,
@@ -348,7 +354,8 @@ const useChatGroupDBStore = defineStore("messageGroup", () => {
         changeDialogue,
         getStearm,
         getHistory,
-        badFeedback
+        badFeedback,
+        deleteMessage
     };
 });