xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图片广场优化

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
Yi.Ai.Vue3/src/api/aiImage/index.ts
View File

@@ -31,8 +31,6 @@ export function publishImage(data: PublishImageRequest) {
export function getImageModels() {
return post<ImageModel[]>('/ai-image/model').json();
}
export function deleteMyTasks(taskIds: string[]) {
// return del<void>(`/ai-image/my-tasks/${taskIds}`).json();
return del<void>('/ai-image/my-tasks', { json: taskIds }).json();
return del<void>('/ai-image/my-tasks', taskIds).json();
}

129
Yi.Ai.Vue3/src/pages/chat/image/components/MyImages.vue
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)"

31
Yi.Ai.Vue3/src/pages/chat/image/components/TaskCard.vue
View File

@@ -11,7 +11,7 @@ const props = defineProps<{
selected?: boolean;
}>();
const emit = defineEmits(['click', 'use-prompt', 'use-reference', 'publish', 'preview', 'toggle-select', 'delete']);
const emit = defineEmits(['click', 'use-prompt', 'use-reference', 'publish', 'preview', 'toggle-select']);
function formatTime(time: string) {
try {
@@ -94,14 +94,14 @@ async function handleDownload() {
class="task-card relative flex flex-col bg-white rounded-xl overflow-hidden border border-gray-100 transition-all duration-300 cursor-pointer"
:class="{
'ring-2 ring-primary': selected,
'group hover:shadow-xl hover:-translate-y-1': !batchMode
'group hover:shadow-xl hover:-translate-y-1': !batchMode,
'hover:ring-2 hover:ring-primary/50': batchMode
}"
@click="batchMode ? $emit('click') : undefined"
>
<!-- Batch Selection Checkbox -->
<div v-if="batchMode" class="absolute top-2 right-2 z-20">
<div class="bg-white rounded-md p-1 shadow-md">
<el-checkbox :model-value="selected" size="large" />
</div>
<div v-if="batchMode" class="absolute top-2 right-2 z-20 pointer-events-none">
<el-checkbox :model-value="selected" size="large" class="batch-checkbox" />
</div>
<!-- Image Area -->
@@ -158,7 +158,7 @@ async function handleDownload() {
<!-- Overlay (Hover) - Desktop -->
<div v-if="!batchMode" class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 hidden md:flex flex-col items-center justify-center gap-3 z-20 backdrop-blur-[2px]">
<el-button type="primary" round size="small" class="transform scale-90 group-hover:scale-100 transition-transform shadow-lg" @click.stop="$emit('click')">
<el-button type="primary" round size="small" class="transform scale-90 group-hover:scale-100 transition-transform shadow-lg" @click="$emit('click')">
查看详情
</el-button>
<div v-if="task.taskStatus === 'Success'" class="flex gap-2">
@@ -182,14 +182,14 @@ async function handleDownload() {
</div>
<!-- Mobile Actions Bar -->
<div class="absolute bottom-0 left-0 right-0 md:hidden bg-gradient-to-t from-black/70 to-transparent p-2 z-20">
<div v-if="!batchMode" class="absolute bottom-0 left-0 right-0 md:hidden bg-gradient-to-t from-black/70 to-transparent p-2 z-20">
<div class="flex items-center justify-between gap-2">
<el-button
type="primary"
size="small"
round
class="flex-1"
@click.stop="$emit('click')"
@click="$emit('click')"
>
查看详情
</el-button>
@@ -260,4 +260,17 @@ async function handleDownload() {
.task-card {
backface-visibility: hidden;
}
.batch-checkbox :deep(.el-checkbox__inner) {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.batch-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: var(--el-color-primary);
border-color: var(--el-color-primary);
}
</style>

2
Yi.Ai.Vue3/src/pages/chat/index.vue
View File

@@ -121,7 +121,7 @@ window.addEventListener('resize', checkIsMobile);
.nav-sidebar {
width: 240px;
height: 100%;
border-right: var(--header-border);
border-right: var(--header-border) !important;
flex-shrink: 0;
display: flex;

2
Yi.Ai.Vue3/types/components.d.ts vendored
View File

@@ -25,8 +25,6 @@ declare module 'vue' {
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer']