feat: 图片广场优化

This commit is contained in:
Gsh
2026-01-04 21:41:24 +08:00
parent 9f3b9fc513
commit 450e023b3b
5 changed files with 92 additions and 76 deletions

View File

@@ -21,7 +21,7 @@ const currentTask = ref<TaskItem | null>(null);
// Batch selection
const batchMode = ref(false);
const selectedTaskIds = ref<Set<string>>(new Set());
const selectedTaskIds = ref<string[]>([]);
// Mobile detection
const isMobile = ref(false);
@@ -259,42 +259,37 @@ async function downloadImage(url: string) {
function toggleBatchMode() {
batchMode.value = !batchMode.value;
if (!batchMode.value) {
selectedTaskIds.value.clear();
selectedTaskIds.value = [];
}
}
function toggleTaskSelection(taskId: string) {
if (selectedTaskIds.value.has(taskId)) {
selectedTaskIds.value.delete(taskId);
const index = selectedTaskIds.value.indexOf(taskId);
if (index > -1) {
selectedTaskIds.value.splice(index, 1);
}
else {
selectedTaskIds.value.add(taskId);
selectedTaskIds.value.push(taskId);
}
// Force reactivity update
selectedTaskIds.value = new Set(selectedTaskIds.value);
}
function selectAll() {
taskList.value.forEach(task => selectedTaskIds.value.add(task.id));
// Force reactivity update
selectedTaskIds.value = new Set(selectedTaskIds.value);
selectedTaskIds.value = taskList.value.map(task => task.id);
}
function clearSelection() {
selectedTaskIds.value.clear();
// Force reactivity update
selectedTaskIds.value = new Set(selectedTaskIds.value);
selectedTaskIds.value = [];
}
async function batchDelete() {
if (selectedTaskIds.value.size === 0) {
if (selectedTaskIds.value.length === 0) {
ElMessage.warning('请先选择要删除的图片');
return;
}
try {
await ElMessageBox.confirm(
`确定要删除选中的 ${selectedTaskIds.value.size} 张图片吗?`,
`确定要删除选中的 ${selectedTaskIds.value.length} 张图片吗?`,
'批量删除',
{
confirmButtonText: '确定',
@@ -303,10 +298,10 @@ async function batchDelete() {
},
);
const ids = Array.from(selectedTaskIds.value);
const ids = selectedTaskIds.value;
await deleteMyTasks(ids);
ElMessage.success('删除成功');
selectedTaskIds.value.clear();
selectedTaskIds.value = [];
batchMode.value = false;
handleSearch();
}
@@ -477,12 +472,33 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</el-icon>
重置
</el-button>
<el-button class="w-full refresh-btn" type="success" @click="handleSearch">
<el-icon class="mr-1">
<Refresh />
</el-icon>
刷新
</el-button>
<!-- Batch Operations -->
<div class="pt-4 border-t border-gray-100 space-y-2">
<el-button
:type="batchMode ? 'primary' : 'default'"
class="w-full "
@click="toggleBatchMode"
>
{{ batchMode ? '取消批量' : '批量管理' }}
</el-button>
<template v-if="batchMode">
<el-button class="w-full refresh-btn" @click="selectAll">
全选
</el-button>
<el-button class="w-full refresh-btn" @click="clearSelection">
清空
</el-button>
<el-button
type="danger"
class="w-full refresh-btn"
:disabled="selectedTaskIds.length === 0"
@click="batchDelete"
>
删除选中 ({{ selectedTaskIds.length }})
</el-button>
</template>
</div>
</div>
</div>
@@ -576,53 +592,45 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</el-icon>
搜索
</el-button>
<el-button class="w-full refresh-btn" @click="handleReset(); showMobileFilter = false">
<el-button class="w-full" @click="handleReset(); showMobileFilter = false">
<el-icon class="mr-1">
<Refresh />
</el-icon>
重置
</el-button>
<el-button class="w-full refresh-btn" type="success" @click="handleSearch(); showMobileFilter = false">
<el-icon class="mr-1">
<Refresh />
</el-icon>
刷新
</el-button>
<!-- Batch Operations -->
<div class="pt-4 border-t border-gray-100 space-y-2">
<el-button
:type="batchMode ? 'primary' : 'default'"
class="w-full"
@click="toggleBatchMode(); showMobileFilter = false"
>
{{ batchMode ? '取消批量' : '批量管理' }}
</el-button>
<template v-if="batchMode">
<el-button class="w-full" @click="selectAll(); showMobileFilter = false">
全选
</el-button>
<el-button class="w-full" @click="clearSelection(); showMobileFilter = false">
清空
</el-button>
<el-button
type="danger"
class="w-full"
:disabled="selectedTaskIds.length === 0"
@click="batchDelete(); showMobileFilter = false"
>
删除选中 ({{ selectedTaskIds.length }})
</el-button>
</template>
</div>
</div>
</template>
</el-drawer>
<!-- Right Content Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Batch Operation Toolbar -->
<div v-if="false" class="bg-white border-b border-gray-200 p-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<el-button
:type="batchMode ? 'primary' : 'default'"
size="small"
@click="toggleBatchMode"
>
{{ batchMode ? '取消批量' : '批量管理' }}
</el-button>
<template v-if="batchMode">
<el-button size="small" @click="selectAll">
全选
</el-button>
<el-button size="small" @click="clearSelection">
清空
</el-button>
<el-button
type="danger"
size="small"
:disabled="selectedTaskIds.size === 0"
@click="batchDelete"
>
删除选中 ({{ selectedTaskIds.size }})
</el-button>
</template>
</div>
</div>
<div
v-infinite-scroll="loadMore"
class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar"
@@ -636,9 +644,8 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
:task="task"
show-publish-status
:batch-mode="batchMode"
:selected="selectedTaskIds.has(task.id)"
:selected="selectedTaskIds.includes(task.id)"
@click="batchMode ? toggleTaskSelection(task.id) : handleCardClick(task)"
@toggle-select="toggleTaskSelection"
@use-prompt="$emit('use-prompt', $event)"
@use-reference="$emit('use-reference', $event)"
@publish="openPublishDialog(task)"