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 17:09:28 +08:00
parent 9ec9ace8e2
commit 9721b8bd74
7 changed files with 314 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,3 @@
import { get, post } from '@/utils/request';
import type {
GenerateImageRequest,
ImageModel,
@@ -7,6 +6,7 @@ import type {
TaskListResponse,
TaskStatusResponse,
} from './types';
import { del, get, post } from '@/utils/request';
export function generateImage(data: GenerateImageRequest) {
return post<string>('/ai-image/generate', data).json();
@@ -30,4 +30,9 @@ 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();
}

25
Yi.Ai.Vue3/src/pages/chat/image/components/ImageGenerator.vue
View File

@@ -47,6 +47,7 @@ const currentTaskId = ref('');
const currentTask = ref<TaskStatusResponse | null>(null);
const showViewer = ref(false);
let pollTimer: any = null;
let debounceTimer: any = null;
const canGenerate = computed(() => {
return selectedModelId.value && prompt.value && !generating.value;
@@ -142,6 +143,18 @@ async function handleGenerate() {
if (!canGenerate.value)
return;
// Clear existing debounce timer
if (debounceTimer) {
clearTimeout(debounceTimer);
}
// Set debounce timer
debounceTimer = setTimeout(async () => {
await executeGenerate();
}, 300);
}
async function executeGenerate() {
generating.value = true;
// Reset current task display immediately
currentTask.value = {
@@ -360,7 +373,7 @@ onUnmounted(() => {
配置
</h2>
<el-form label-position="top" class="space-y-2">
<el-form label-position="top" class="space-y-1">
<!-- Token -->
<el-form-item label="API密钥 (可选)">
<el-select
@@ -417,7 +430,7 @@ onUnmounted(() => {
<el-input
v-model="prompt"
type="textarea"
:autosize="{ minRows: 8, maxRows: 15 }"
:autosize="{ minRows: 4, maxRows: 15 }"
placeholder="描述你想要生成的画面，例如：一只在太空中飞行的赛博朋克风格的猫..."
maxlength="2000"
show-word-limit
@@ -456,7 +469,7 @@ onUnmounted(() => {
</el-form>
</div>
<div class="mt-auto pt-4">
<div class="mt-auto pt-1">
<el-button
type="primary"
class="w-full h-12 text-lg shadow-lg shadow-blue-500/30 transition-all hover:shadow-blue-500/50"
@@ -511,6 +524,10 @@ onUnmounted(() => {
<p class="text-gray-400 text-sm mt-2">
请稍候，这可能需要几秒钟
</p>
<p class="text-gray-400 text-sm mt-2">
您可以离开或者继续创建下一个任务，稍后到“我的图库”中查看任务进度
</p>
</div>
<!-- Fail State -->
@@ -531,7 +548,7 @@ onUnmounted(() => {
circle
:icon="CopyDocument"
title="复制错误信息"
@click="copyError(currentTask.errorInfo || '')"
@click.stop="copyError(currentTask.errorInfo || '')"
/>
</div>
<el-button class="mt-6" icon="Refresh" @click="handleGenerate">

86
Yi.Ai.Vue3/src/pages/chat/image/components/ImagePlaza.vue
View File

@@ -26,7 +26,7 @@ const emit = defineEmits(['use-prompt', 'use-reference']);
const taskList = ref<TaskItem[]>([]);
const pageIndex = ref(1);
const pageSize = ref(20);
const pageSize = ref(10);
const loading = ref(false);
const noMore = ref(false);
const dialogVisible = ref(false);
@@ -42,6 +42,7 @@ function checkMobile() {
onMounted(() => {
checkMobile();
window.addEventListener('resize', checkMobile);
loadMore();
});
onUnmounted(() => {
@@ -60,6 +61,8 @@ const searchForm = reactive({
Prompt: '',
Categories: '',
UserName: '',
OrderByColumn: '',
IsAscending: true,
});
const dateRange = ref<[string, string] | null>(null);
@@ -74,7 +77,7 @@ async function loadMore() {
loading.value = true;
try {
const params: TaskListRequest = {
SkipCount: (pageIndex.value - 1) * pageSize.value,
SkipCount: pageIndex.value,
MaxResultCount: pageSize.value,
TaskStatus: 'Success',
Prompt: searchForm.Prompt || undefined,
@@ -82,6 +85,8 @@ async function loadMore() {
UserName: searchForm.UserName || undefined,
StartTime: dateRange.value ? dateRange.value[0] : undefined,
EndTime: dateRange.value ? dateRange.value[1] : undefined,
OrderByColumn: searchForm.OrderByColumn || undefined,
IsAscending: searchForm.IsAscending,
};
const res = await getImagePlaza(params);
@@ -91,10 +96,6 @@ async function loadMore() {
const items = data.items || [];
const total = data.total || 0;
if (items.length < pageSize.value) {
noMore.value = true;
}
if (pageIndex.value === 1) {
taskList.value = items;
}
@@ -104,16 +105,13 @@ async function loadMore() {
taskList.value.push(...newItems);
}
// Check if we reached total
if (taskList.value.length >= total) {
// Check if we should stop loading more
if (items.length === 0 || items.length < pageSize.value || taskList.value.length >= total) {
noMore.value = true;
}
if (items.length > 0) {
pageIndex.value++;
}
else {
noMore.value = true;
// Increment pageIndex for next load only if there's more data
pageIndex.value++;
}
}
catch (error) {
@@ -223,7 +221,7 @@ watch(dateRange, () => {
</script>
<template>
<div class="h-full flex flex-col md:flex-row bg-gray-50">
<div class="h-full flex flex-col md:flex-row bg-gray-50 overflow-hidden">
<!-- Mobile Filter Button -->
<div class="md:hidden p-4 bg-white border-b border-gray-200 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-800">
@@ -298,6 +296,28 @@ watch(dateRange, () => {
class="w-full"
/>
</el-form-item>
<el-form-item v-if="false" label="排序方式">
<el-select
v-model="searchForm.OrderByColumn"
placeholder="默认排序"
class="w-full"
clearable
>
<el-option label="创建时间" value="CreationTime" />
</el-select>
</el-form-item>
<el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
<el-radio-group v-model="searchForm.IsAscending">
<el-radio :value="true">
升序
</el-radio>
<el-radio :value="false">
降序
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
@@ -308,12 +328,18 @@ watch(dateRange, () => {
</el-icon>
搜索
</el-button>
<el-button class="w-full refresh-btn " @click="handleReset">
<el-button class="w-full refresh-btn" @click="handleReset">
<el-icon class="mr-1">
<Refresh />
</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>
</div>
</div>
@@ -372,6 +398,28 @@ watch(dateRange, () => {
class="w-full"
/>
</el-form-item>
<el-form-item label="排序方式">
<el-select
v-model="searchForm.OrderByColumn"
placeholder="默认排序"
class="w-full"
clearable
>
<el-option label="创建时间" value="CreationTime" />
</el-select>
</el-form-item>
<el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
<el-radio-group v-model="searchForm.IsAscending">
<el-radio :value="true">
升序
</el-radio>
<el-radio :value="false">
降序
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@@ -382,12 +430,18 @@ watch(dateRange, () => {
</el-icon>
搜索
</el-button>
<el-button class="w-full" @click="handleReset(); showMobileFilter = false">
<el-button class="w-full refresh-btn" @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>
</div>
</template>
</el-drawer>

215
Yi.Ai.Vue3/src/pages/chat/image/components/MyImages.vue
View File

@@ -4,9 +4,9 @@ import type { TaskItem, TaskListRequest } from '@/api/aiImage/types';
import { Check, CircleCloseFilled, CollectionTag, CopyDocument, Download, Filter, Loading, MagicStick, Picture, Refresh, Search, Share, User, WarningFilled, ZoomIn } from '@element-plus/icons-vue';
import { useClipboard } from '@vueuse/core';
import { format } from 'date-fns';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { getMyTasks, publishImage } from '@/api/aiImage';
import { deleteMyTasks, getMyTasks, publishImage } from '@/api/aiImage';
import TaskCard from './TaskCard.vue';
const emit = defineEmits(['use-prompt', 'use-reference']);
@@ -19,6 +19,10 @@ const noMore = ref(false);
const dialogVisible = ref(false);
const currentTask = ref<TaskItem | null>(null);
// Batch selection
const batchMode = ref(false);
const selectedTaskIds = ref<Set<string>>(new Set());
// Mobile detection
const isMobile = ref(false);
@@ -29,6 +33,7 @@ function checkMobile() {
onMounted(() => {
checkMobile();
window.addEventListener('resize', checkMobile);
loadMore();
});
onUnmounted(() => {
@@ -47,6 +52,8 @@ const searchForm = reactive({
Prompt: '',
TaskStatus: '' as 'Processing' | 'Success' | 'Fail' | '',
PublishStatus: '' as 'Unpublished' | 'Published' | '',
OrderByColumn: '',
IsAscending: true,
});
const dateRange = ref<[string, string] | null>(null);
@@ -71,13 +78,15 @@ async function loadMore() {
loading.value = true;
try {
const params: TaskListRequest = {
SkipCount: (pageIndex.value - 1) * pageSize.value,
SkipCount: pageIndex.value,
MaxResultCount: pageSize.value,
Prompt: searchForm.Prompt || undefined,
TaskStatus: searchForm.TaskStatus || undefined,
PublishStatus: searchForm.PublishStatus || undefined,
StartTime: dateRange.value ? dateRange.value[0] : undefined,
EndTime: dateRange.value ? dateRange.value[1] : undefined,
OrderByColumn: searchForm.OrderByColumn || undefined,
IsAscending: searchForm.IsAscending,
};
const res = await getMyTasks(params);
@@ -87,10 +96,6 @@ async function loadMore() {
const items = data.items || [];
const total = data.total || 0;
if (items.length < pageSize.value) {
noMore.value = true;
}
if (pageIndex.value === 1) {
taskList.value = items;
}
@@ -100,16 +105,13 @@ async function loadMore() {
taskList.value.push(...newItems);
}
// Check if we reached total
if (taskList.value.length >= total) {
// Check if we should stop loading more
if (items.length === 0 || items.length < pageSize.value || taskList.value.length >= total) {
noMore.value = true;
}
if (items.length > 0) {
pageIndex.value++;
}
else {
noMore.value = true;
// Increment pageIndex for next load only if there's more data
pageIndex.value++;
}
}
catch (error) {
@@ -165,6 +167,11 @@ async function copyPrompt(text: string) {
ElMessage.success('提示词已复制');
}
async function copyErrorInfo(text: string) {
await copy(text);
ElMessage.success('错误信息已复制');
}
function openPublishDialog(task: TaskItem) {
taskToPublish.value = task;
publishTags.value = [];
@@ -187,6 +194,12 @@ function showInput() {
function handleInputConfirm() {
if (inputValue.value) {
if (publishTags.value.length >= 3) {
ElMessage.warning('最多只能添加3个标签');
inputValue.value = '';
inputVisible.value = false;
return;
}
if (!publishTags.value.includes(inputValue.value)) {
publishTags.value.push(inputValue.value);
}
@@ -242,6 +255,69 @@ async function downloadImage(url: string) {
}
}
// Batch selection functions
function toggleBatchMode() {
batchMode.value = !batchMode.value;
if (!batchMode.value) {
selectedTaskIds.value.clear();
}
}
function toggleTaskSelection(taskId: string) {
if (selectedTaskIds.value.has(taskId)) {
selectedTaskIds.value.delete(taskId);
}
else {
selectedTaskIds.value.add(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);
}
function clearSelection() {
selectedTaskIds.value.clear();
// Force reactivity update
selectedTaskIds.value = new Set(selectedTaskIds.value);
}
async function batchDelete() {
if (selectedTaskIds.value.size === 0) {
ElMessage.warning('请先选择要删除的图片');
return;
}
try {
await ElMessageBox.confirm(
`确定要删除选中的 ${selectedTaskIds.value.size} 张图片吗？`,
'批量删除',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
},
);
const ids = Array.from(selectedTaskIds.value);
await deleteMyTasks(ids);
ElMessage.success('删除成功');
selectedTaskIds.value.clear();
batchMode.value = false;
handleSearch();
}
catch (e: any) {
if (e !== 'cancel') {
console.error(e);
ElMessage.error('删除失败');
}
}
}
// Expose refresh method
defineExpose({
refresh: () => {
@@ -266,7 +342,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</script>
<template>
<div class="h-full flex flex-col md:flex-row bg-gray-50">
<div class="h-full flex flex-col md:flex-row bg-gray-50 overflow-hidden">
<!-- Mobile Filter Button -->
<div class="md:hidden p-4 bg-white border-b border-gray-200 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-800">
@@ -361,6 +437,30 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
class="w-full"
/>
</el-form-item>
<el-form-item v-if="false" label="排序方式">
<el-select
v-model="searchForm.OrderByColumn"
placeholder="默认排序"
class="w-full"
clearable
>
<el-option label="创建时间" value="CreationTime" />
<el-option label="任务状态" value="TaskStatus" />
<el-option label="发布状态" value="PublishStatus" />
</el-select>
</el-form-item>
<el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
<el-radio-group v-model="searchForm.IsAscending">
<el-radio :value="true">
升序
</el-radio>
<el-radio :value="false">
降序
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
@@ -377,6 +477,12 @@ 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>
</div>
</div>
@@ -436,6 +542,30 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
class="w-full"
/>
</el-form-item>
<el-form-item label="排序方式">
<el-select
v-model="searchForm.OrderByColumn"
placeholder="默认排序"
class="w-full"
clearable
>
<el-option label="创建时间" value="CreationTime" />
<el-option label="任务状态" value="TaskStatus" />
<el-option label="发布状态" value="PublishStatus" />
</el-select>
</el-form-item>
<el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
<el-radio-group v-model="searchForm.IsAscending">
<el-radio :value="true">
升序
</el-radio>
<el-radio :value="false">
降序
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@@ -446,18 +576,53 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</el-icon>
搜索
</el-button>
<el-button class="w-full" @click="handleReset(); showMobileFilter = false">
<el-button class="w-full refresh-btn" @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>
</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"
@@ -470,7 +635,10 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
:key="task.id"
:task="task"
show-publish-status
@click="handleCardClick(task)"
:batch-mode="batchMode"
:selected="selectedTaskIds.has(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)"
@@ -631,7 +799,9 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
<div v-if="currentTask.publishStatus === 'Published'" class="flex justify-between text-sm items-center">
<span class="text-gray-500">发布状态</span>
<div class="flex items-center gap-1">
<el-tag size="small" type="warning" effect="dark">已发布</el-tag>
<el-tag size="small" type="warning" effect="dark">
已发布
</el-tag>
<span v-if="!currentTask.isAnonymous && currentTask.userName" class="text-blue-500 text-xs flex items-center gap-1">
<el-icon><User /></el-icon> {{ currentTask.userName }}
</span>
@@ -642,7 +812,9 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</div>
<div v-else class="flex justify-between text-sm items-center">
<span class="text-gray-500">发布状态</span>
<el-tag size="small" type="info" effect="plain">未发布</el-tag>
<el-tag size="small" type="info" effect="plain">
未发布
</el-tag>
</div>
<!-- 操作按钮 - 所有状态都可以使用提示词 -->
@@ -661,7 +833,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
<el-button
v-if="currentTask.taskStatus === 'Success' && currentTask.publishStatus === 'Unpublished'"
type="success"
class="w-full"
class="w-full refresh-btn"
:icon="Share"
@click="openPublishDialog(currentTask)"
>
@@ -705,9 +877,10 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
@keydown.enter.prevent="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button v-else class="button-new-tag" size="small" @click="showInput">
<el-button v-else-if="publishTags.length < 3" class="button-new-tag" size="small" @click="showInput">
+ New Tag
</el-button>
<span v-else class="text-xs text-gray-400">最多3个标签</span>
</div>
</el-form-item>
<el-form-item>

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

@@ -7,9 +7,11 @@ import { defineEmits, defineProps } from 'vue';
const props = defineProps<{
task: TaskItem;
showPublishStatus?: boolean;
batchMode?: boolean;
selected?: boolean;
}>();
const emit = defineEmits(['click', 'use-prompt', 'use-reference', 'publish', 'preview']);
const emit = defineEmits(['click', 'use-prompt', 'use-reference', 'publish', 'preview', 'toggle-select', 'delete']);
function formatTime(time: string) {
try {
@@ -88,7 +90,20 @@ async function handleDownload() {
</script>
<template>
<div class="task-card group relative flex flex-col bg-white rounded-xl overflow-hidden border border-gray-100 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer">
<div
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
}"
>
<!-- 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>
<!-- Image Area -->
<div class="aspect-square w-full relative bg-gray-100 overflow-hidden">
<!-- Blurred Background -->
@@ -142,7 +157,7 @@ async function handleDownload() {
</div>
<!-- Overlay (Hover) - Desktop -->
<div 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>

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

@@ -40,8 +40,8 @@ watch(activeTab, (val) => {
</script>
<template>
<div class="image-page-container h-full flex flex-col">
<el-tabs v-model="activeTab" class="flex-1 flex flex-col" type="border-card">
<div class="image-page-container h-full flex flex-col ">
<el-tabs v-model="activeTab" class="max-h-[90vh] flex-1 flex flex-col" type="border-card">
<el-tab-pane label="图片广场" name="plaza" class="h-full">
<ImagePlaza
v-if="activeTab === 'plaza'"

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

@@ -45,6 +45,8 @@ declare module 'vue' {
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSegmented: typeof import('element-plus/es')['ElSegmented']