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() { export function getImageModels() {
return post<ImageModel[]>('/ai-image/model').json(); return post<ImageModel[]>('/ai-image/model').json();
} }
export function deleteMyTasks(taskIds: string[]) { export function deleteMyTasks(taskIds: string[]) {
// return del<void>(`/ai-image/my-tasks/${taskIds}`).json(); return del<void>('/ai-image/my-tasks', taskIds).json();
return del<void>('/ai-image/my-tasks', { json: 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 // Batch selection
const batchMode = ref(false); const batchMode = ref(false);
const selectedTaskIds = ref<Set<string>>(new Set()); const selectedTaskIds = ref<string[]>([]);
// Mobile detection // Mobile detection
const isMobile = ref(false); const isMobile = ref(false);
@@ -259,42 +259,37 @@ async function downloadImage(url: string) {
function toggleBatchMode() { function toggleBatchMode() {
batchMode.value = !batchMode.value; batchMode.value = !batchMode.value;
if (!batchMode.value) { if (!batchMode.value) {
selectedTaskIds.value.clear(); selectedTaskIds.value = [];
} }
} }
function toggleTaskSelection(taskId: string) { function toggleTaskSelection(taskId: string) {
if (selectedTaskIds.value.has(taskId)) { const index = selectedTaskIds.value.indexOf(taskId);
selectedTaskIds.value.delete(taskId); if (index > -1) {
selectedTaskIds.value.splice(index, 1);
} }
else { else {
selectedTaskIds.value.add(taskId); selectedTaskIds.value.push(taskId);
} }
// Force reactivity update
selectedTaskIds.value = new Set(selectedTaskIds.value);
} }
function selectAll() { function selectAll() {
taskList.value.forEach(task => selectedTaskIds.value.add(task.id)); selectedTaskIds.value = taskList.value.map(task => task.id);
// Force reactivity update
selectedTaskIds.value = new Set(selectedTaskIds.value);
} }
function clearSelection() { function clearSelection() {
selectedTaskIds.value.clear(); selectedTaskIds.value = [];
// Force reactivity update
selectedTaskIds.value = new Set(selectedTaskIds.value);
} }
async function batchDelete() { async function batchDelete() {
if (selectedTaskIds.value.size === 0) { if (selectedTaskIds.value.length === 0) {
ElMessage.warning('请先选择要删除的图片'); ElMessage.warning('请先选择要删除的图片');
return; return;
} }
try { try {
await ElMessageBox.confirm( await ElMessageBox.confirm(
`确定要删除选中的 ${selectedTaskIds.value.size} 张图片吗？`, `确定要删除选中的 ${selectedTaskIds.value.length} 张图片吗？`,
'批量删除', '批量删除',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
@@ -303,10 +298,10 @@ async function batchDelete() {
}, },
); );
const ids = Array.from(selectedTaskIds.value); const ids = selectedTaskIds.value;
await deleteMyTasks(ids); await deleteMyTasks(ids);
ElMessage.success('删除成功'); ElMessage.success('删除成功');
selectedTaskIds.value.clear(); selectedTaskIds.value = [];
batchMode.value = false; batchMode.value = false;
handleSearch(); handleSearch();
} }
@@ -477,12 +472,33 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</el-icon> </el-icon>
重置 重置
</el-button> </el-button>
<el-button class="w-full refresh-btn" type="success" @click="handleSearch">
<el-icon class="mr-1"> <!-- Batch Operations -->
<Refresh /> <div class="pt-4 border-t border-gray-100 space-y-2">
</el-icon> <el-button
刷新 :type="batchMode ? 'primary' : 'default'"
</el-button> 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>
</div> </div>
@@ -576,53 +592,45 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</el-icon> </el-icon>
搜索 搜索
</el-button> </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"> <el-icon class="mr-1">
<Refresh /> <Refresh />
</el-icon> </el-icon>
重置 重置
</el-button> </el-button>
<el-button class="w-full refresh-btn" type="success" @click="handleSearch(); showMobileFilter = false">
<el-icon class="mr-1"> <!-- Batch Operations -->
<Refresh /> <div class="pt-4 border-t border-gray-100 space-y-2">
</el-icon> <el-button
刷新 :type="batchMode ? 'primary' : 'default'"
</el-button> 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> </div>
</template> </template>
</el-drawer> </el-drawer>
<!-- Right Content Area --> <!-- Right Content Area -->
<div class="flex-1 flex flex-col overflow-hidden"> <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 <div
v-infinite-scroll="loadMore" v-infinite-scroll="loadMore"
class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar" 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" :task="task"
show-publish-status show-publish-status
:batch-mode="batchMode" :batch-mode="batchMode"
:selected="selectedTaskIds.has(task.id)" :selected="selectedTaskIds.includes(task.id)"
@click="batchMode ? toggleTaskSelection(task.id) : handleCardClick(task)" @click="batchMode ? toggleTaskSelection(task.id) : handleCardClick(task)"
@toggle-select="toggleTaskSelection"
@use-prompt="$emit('use-prompt', $event)" @use-prompt="$emit('use-prompt', $event)"
@use-reference="$emit('use-reference', $event)" @use-reference="$emit('use-reference', $event)"
@publish="openPublishDialog(task)" @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; 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) { function formatTime(time: string) {
try { 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="task-card relative flex flex-col bg-white rounded-xl overflow-hidden border border-gray-100 transition-all duration-300 cursor-pointer"
:class="{ :class="{
'ring-2 ring-primary': selected, '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 --> <!-- Batch Selection Checkbox -->
<div v-if="batchMode" class="absolute top-2 right-2 z-20"> <div v-if="batchMode" class="absolute top-2 right-2 z-20 pointer-events-none">
<div class="bg-white rounded-md p-1 shadow-md"> <el-checkbox :model-value="selected" size="large" class="batch-checkbox" />
<el-checkbox :model-value="selected" size="large" />
</div>
</div> </div>
<!-- Image Area --> <!-- Image Area -->
@@ -158,7 +158,7 @@ async function handleDownload() {
<!-- Overlay (Hover) - Desktop --> <!-- 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]"> <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> </el-button>
<div v-if="task.taskStatus === 'Success'" class="flex gap-2"> <div v-if="task.taskStatus === 'Success'" class="flex gap-2">
@@ -182,14 +182,14 @@ async function handleDownload() {
</div> </div>
<!-- Mobile Actions Bar --> <!-- 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"> <div class="flex items-center justify-between gap-2">
<el-button <el-button
type="primary" type="primary"
size="small" size="small"
round round
class="flex-1" class="flex-1"
@click.stop="$emit('click')" @click="$emit('click')"
> >
查看详情 查看详情
</el-button> </el-button>
@@ -260,4 +260,17 @@ async function handleDownload() {
.task-card { .task-card {
backface-visibility: hidden; 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> </style>

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

@@ -121,7 +121,7 @@ window.addEventListener('resize', checkIsMobile);
.nav-sidebar { .nav-sidebar {
width: 240px; width: 240px;
height: 100%; height: 100%;
border-right: var(--header-border); border-right: var(--header-border) !important;
flex-shrink: 0; flex-shrink: 0;
display: flex; 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'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElContainer: typeof import('element-plus/es')['ElContainer'] ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] 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'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider'] ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDrawer: typeof import('element-plus/es')['ElDrawer']