This commit is contained in:
冯辉
2026-03-16 18:41:58 +08:00
parent dcec3cf154
commit 8e03d70e8e
2 changed files with 216 additions and 2 deletions

View File

@@ -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>