feat: 前端新增图片生成功能
This commit is contained in:
Gsh
33
Yi.Ai.Vue3/src/api/aiImage/index.ts
Normal file
33
Yi.Ai.Vue3/src/api/aiImage/index.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { get, post } from '@/utils/request';
|
||||
import type {
|
||||
GenerateImageRequest,
|
||||
ImageModel,
|
||||
PublishImageRequest,
|
||||
TaskListRequest,
|
||||
TaskListResponse,
|
||||
TaskStatusResponse,
|
||||
} from './types';
|
||||
|
||||
export function generateImage(data: GenerateImageRequest) {
|
||||
return post<string>('/ai-image/generate', data).json();
|
||||
}
|
||||
|
||||
export function getTaskStatus(taskId: string) {
|
||||
return get<TaskStatusResponse>(`/ai-image/task/${taskId}`).json();
|
||||
}
|
||||
|
||||
export function getMyTasks(params: TaskListRequest) {
|
||||
return get<TaskListResponse>('/ai-image/my-tasks', params).json();
|
||||
}
|
||||
|
||||
export function getImagePlaza(params: TaskListRequest) {
|
||||
return get<TaskListResponse>('/ai-image/plaza', params).json();
|
||||
}
|
||||
|
||||
export function publishImage(data: PublishImageRequest) {
|
||||
return post<void>('/ai-image/publish', data).json();
|
||||
}
|
||||
|
||||
export function getImageModels() {
|
||||
return post<ImageModel[]>('/ai-image/model').json();
|
||||
}
|
||||
53
Yi.Ai.Vue3/src/api/aiImage/types.ts
Normal file
53
Yi.Ai.Vue3/src/api/aiImage/types.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
export interface GenerateImageRequest {
|
||||
tokenId: string;
|
||||
prompt: string;
|
||||
modelId: string;
|
||||
referenceImagesPrefixBase64?: string[];
|
||||
}
|
||||
|
||||
export interface TaskStatusResponse {
|
||||
id: string;
|
||||
prompt: string;
|
||||
storePrefixBase64?: string;
|
||||
storeUrl?: string;
|
||||
taskStatus: 'Processing' | 'Success' | 'Fail';
|
||||
publishStatus: string;
|
||||
categories: string[];
|
||||
creationTime: string;
|
||||
}
|
||||
|
||||
export interface TaskListRequest {
|
||||
PageIndex: number;
|
||||
PageSize: number;
|
||||
TaskStatus?: 'Processing' | 'Success' | 'Fail';
|
||||
}
|
||||
|
||||
export interface TaskItem {
|
||||
id: string;
|
||||
prompt: string;
|
||||
storePrefixBase64?: string;
|
||||
storeUrl?: string;
|
||||
taskStatus: 'Processing' | 'Success' | 'Fail';
|
||||
publishStatus: string;
|
||||
categories: string[];
|
||||
creationTime: string;
|
||||
}
|
||||
|
||||
export interface TaskListResponse {
|
||||
total: number;
|
||||
items: TaskItem[];
|
||||
}
|
||||
|
||||
export interface PublishImageRequest {
|
||||
taskId: string;
|
||||
categories: string[];
|
||||
}
|
||||
|
||||
export interface ImageModel {
|
||||
id: string;
|
||||
modelId: string;
|
||||
modelName: string;
|
||||
modelDescribe: string;
|
||||
remark: string;
|
||||
isPremiumPackage: boolean;
|
||||
}
|
||||
@@ -6,3 +6,4 @@ export * from './model';
|
||||
export * from './pay';
|
||||
export * from './session';
|
||||
export * from './user';
|
||||
export * from './aiImage';
|
||||
|
||||
@@ -138,7 +138,8 @@ export function disableToken(id: string) {
|
||||
// 新增接口2
|
||||
// 获取可选择的token信息
|
||||
export function getSelectableTokenInfo() {
|
||||
return get<any>('/token/select-list').json();
|
||||
// return get<any>('/token/select-list').json();
|
||||
return get<any>('/token/select-list?includeDefault=false').json();
|
||||
}
|
||||
/*
|
||||
返回数据
|
||||
|
||||
566
Yi.Ai.Vue3/src/pages/chat/image/components/ImageGenerator.vue
Normal file
566
Yi.Ai.Vue3/src/pages/chat/image/components/ImageGenerator.vue
Normal file
@@ -0,0 +1,566 @@
|
||||
<script setup lang="ts">
|
||||
import type { UploadFile, UploadUserFile } from 'element-plus';
|
||||
import type { ImageModel, TaskStatusResponse } from '@/api/aiImage/types';
|
||||
import {
|
||||
CircleCloseFilled,
|
||||
Delete,
|
||||
Download,
|
||||
MagicStick,
|
||||
Picture as PictureIcon,
|
||||
Plus,
|
||||
Refresh,
|
||||
ZoomIn,
|
||||
} from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { getSelectableTokenInfo } from '@/api';
|
||||
import { generateImage, getImageModels, getTaskStatus } from '@/api/aiImage';
|
||||
|
||||
const emit = defineEmits(['task-created']);
|
||||
|
||||
// State
|
||||
const tokenOptions = ref<any[]>([]);
|
||||
const selectedTokenId = ref('');
|
||||
const tokenLoading = ref(false);
|
||||
|
||||
const modelOptions = ref<ImageModel[]>([]);
|
||||
const selectedModelId = ref('');
|
||||
const modelLoading = ref(false);
|
||||
|
||||
const prompt = ref('');
|
||||
const fileList = ref<UploadUserFile[]>([]);
|
||||
const compressImage = ref(true);
|
||||
|
||||
const generating = ref(false);
|
||||
const currentTaskId = ref('');
|
||||
const currentTask = ref<TaskStatusResponse | null>(null);
|
||||
const showViewer = ref(false);
|
||||
let pollTimer: any = null;
|
||||
|
||||
const canGenerate = computed(() => {
|
||||
return selectedModelId.value && prompt.value && !generating.value;
|
||||
});
|
||||
|
||||
// Methods
|
||||
async function fetchTokens() {
|
||||
tokenLoading.value = true;
|
||||
try {
|
||||
const res = await getSelectableTokenInfo();
|
||||
// Handle potential wrapper
|
||||
const data = Array.isArray(res) ? res : (res as any).data || [];
|
||||
|
||||
// Add Default Option
|
||||
tokenOptions.value = [
|
||||
{ tokenId: '', name: '默认 (Default)', isDisabled: false },
|
||||
...data,
|
||||
];
|
||||
|
||||
// Default select "Default" if available, otherwise first available
|
||||
if (!selectedTokenId.value) {
|
||||
selectedTokenId.value = '';
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
finally {
|
||||
tokenLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchModels() {
|
||||
modelLoading.value = true;
|
||||
try {
|
||||
const res = await getImageModels();
|
||||
// Handle potential wrapper
|
||||
const data = Array.isArray(res) ? res : (res as any).data || [];
|
||||
modelOptions.value = data;
|
||||
|
||||
// Default select first
|
||||
if (modelOptions.value.length > 0 && !selectedModelId.value) {
|
||||
selectedModelId.value = modelOptions.value[0].modelId;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
finally {
|
||||
modelLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileChange(uploadFile: UploadFile) {
|
||||
const isLt5M = uploadFile.size! / 1024 / 1024 < 5;
|
||||
if (!isLt5M) {
|
||||
ElMessage.error('图片大小不能超过 5MB!');
|
||||
const index = fileList.value.indexOf(uploadFile);
|
||||
if (index !== -1)
|
||||
fileList.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function handleRemove(file: UploadFile) {
|
||||
const index = fileList.value.indexOf(file);
|
||||
if (index !== -1)
|
||||
fileList.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function fileToBase64(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
||||
|
||||
async function handleGenerate() {
|
||||
if (!canGenerate.value)
|
||||
return;
|
||||
|
||||
generating.value = true;
|
||||
// Reset current task display immediately
|
||||
currentTask.value = {
|
||||
id: '',
|
||||
prompt: prompt.value,
|
||||
taskStatus: 'Processing',
|
||||
publishStatus: 'Unpublished',
|
||||
categories: [],
|
||||
creationTime: new Date().toISOString(),
|
||||
};
|
||||
|
||||
try {
|
||||
const base64Images: string[] = [];
|
||||
for (const fileItem of fileList.value) {
|
||||
if (fileItem.raw) {
|
||||
const base64 = await fileToBase64(fileItem.raw);
|
||||
base64Images.push(base64);
|
||||
}
|
||||
}
|
||||
|
||||
const res = await generateImage({
|
||||
tokenId: selectedTokenId.value || undefined, // Send undefined if empty
|
||||
prompt: prompt.value,
|
||||
modelId: selectedModelId.value,
|
||||
referenceImagesPrefixBase64: base64Images,
|
||||
});
|
||||
|
||||
// Robust ID extraction: Handle string, object wrapper, or direct object
|
||||
let taskId = '';
|
||||
if (typeof res === 'string') {
|
||||
taskId = res;
|
||||
}
|
||||
else if (typeof res === 'object' && res !== null) {
|
||||
// Check for data property which might contain the ID string or object
|
||||
const data = (res as any).data;
|
||||
if (typeof data === 'string') {
|
||||
taskId = data;
|
||||
}
|
||||
else if (typeof data === 'object' && data !== null) {
|
||||
taskId = data.id || data.taskId;
|
||||
}
|
||||
else {
|
||||
// Fallback to direct properties
|
||||
taskId = (res as any).id || (res as any).taskId || (res as any).result;
|
||||
}
|
||||
}
|
||||
|
||||
if (!taskId) {
|
||||
console.error('Task ID not found in response:', res);
|
||||
throw new Error('Invalid Task ID');
|
||||
}
|
||||
|
||||
currentTaskId.value = taskId;
|
||||
startPolling(taskId);
|
||||
emit('task-created');
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
ElMessage.error('生成任务创建失败');
|
||||
currentTask.value = null;
|
||||
}
|
||||
finally {
|
||||
generating.value = false; // Allow new tasks immediately
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling(taskId: string) {
|
||||
if (pollTimer)
|
||||
clearInterval(pollTimer);
|
||||
|
||||
// Initial fetch
|
||||
pollStatus(taskId);
|
||||
|
||||
pollTimer = setInterval(() => {
|
||||
pollStatus(taskId);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
async function pollStatus(taskId: string) {
|
||||
try {
|
||||
const res = await getTaskStatus(taskId);
|
||||
// Handle response structure if needed
|
||||
const taskData = (res as any).data || res;
|
||||
|
||||
// Only update if it matches the current task we are watching
|
||||
// This prevents race conditions if user starts a new task
|
||||
if (currentTaskId.value === taskId) {
|
||||
currentTask.value = taskData;
|
||||
|
||||
// Case-insensitive check just in case
|
||||
const status = taskData.taskStatus;
|
||||
|
||||
if (status === 'Success' || status === 'Fail') {
|
||||
stopPolling();
|
||||
if (status === 'Success') {
|
||||
ElMessage.success('图片生成成功');
|
||||
}
|
||||
else {
|
||||
ElMessage.error(taskData.errorInfo || '图片生成失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
// If task ID changed, stop polling this old task
|
||||
// Actually, we should probably just let the new task's poller handle it
|
||||
// But since we use a single pollTimer variable, starting a new task clears the old timer.
|
||||
// So this check is mostly for the initial async call returning after new task started.
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
// Don't stop polling on transient network errors, but maybe log it
|
||||
}
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer);
|
||||
pollTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function clearPrompt() {
|
||||
prompt.value = '';
|
||||
}
|
||||
|
||||
async function downloadImage() {
|
||||
if (currentTask.value?.storeUrl) {
|
||||
try {
|
||||
const response = await fetch(currentTask.value.storeUrl);
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `generated-image-${currentTask.value.id}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (e) {
|
||||
console.error('Download failed', e);
|
||||
// Fallback
|
||||
window.open(currentTask.value.storeUrl, '_blank');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Exposed methods for external control
|
||||
function setPrompt(text: string) {
|
||||
prompt.value = text;
|
||||
}
|
||||
|
||||
// Helper to load image from URL and convert to File object
|
||||
async function addReferenceImage(url: string) {
|
||||
if (fileList.value.length >= 2) {
|
||||
ElMessage.warning('最多只能上传2张参考图');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
const filename = url.split('/').pop() || 'reference.png';
|
||||
const file = new File([blob], filename, { type: blob.type });
|
||||
|
||||
const uploadFile: UploadUserFile = {
|
||||
name: filename,
|
||||
url,
|
||||
raw: file,
|
||||
uid: Date.now(),
|
||||
status: 'ready',
|
||||
};
|
||||
|
||||
fileList.value.push(uploadFile);
|
||||
}
|
||||
catch (e) {
|
||||
console.error('Failed to load reference image', e);
|
||||
ElMessage.error('无法加载参考图');
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
setPrompt,
|
||||
addReferenceImage,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetchTokens();
|
||||
fetchModels();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full md:flex-row gap-6 p-4 bg-white rounded-lg shadow-sm">
|
||||
<!-- Left Config Panel -->
|
||||
<div class="w-full md:w-[400px] flex flex-col gap-6 overflow-y-auto pr-2 custom-scrollbar">
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
||||
<el-icon><MagicStick /></el-icon>
|
||||
配置
|
||||
</h2>
|
||||
|
||||
<!-- Token & Model -->
|
||||
<div class="bg-gray-50 p-4 rounded-lg space-y-4">
|
||||
<el-form-item label="API密钥" class="mb-0">
|
||||
<el-select
|
||||
v-model="selectedTokenId"
|
||||
placeholder="请选择API密钥"
|
||||
class="w-full"
|
||||
:loading="tokenLoading"
|
||||
>
|
||||
<el-option
|
||||
v-for="token in tokenOptions"
|
||||
:key="token.tokenId"
|
||||
:label="token.name"
|
||||
:value="token.tokenId"
|
||||
:disabled="token.isDisabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="模型" class="mb-0">
|
||||
<el-select
|
||||
v-model="selectedModelId"
|
||||
placeholder="请选择模型"
|
||||
class="w-full"
|
||||
:loading="modelLoading"
|
||||
>
|
||||
<el-option
|
||||
v-for="model in modelOptions"
|
||||
:key="model.modelId"
|
||||
:label="model.modelName"
|
||||
:value="model.modelId"
|
||||
>
|
||||
<div class="flex flex-col py-1">
|
||||
<span class="font-medium">{{ model.modelName }}</span>
|
||||
<span class="text-xs text-gray-400 truncate">{{ model.modelDescribe }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- Prompt -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<label class="text-sm font-medium text-gray-700">提示词</label>
|
||||
<el-button link type="primary" size="small" @click="clearPrompt">
|
||||
<el-icon class="mr-1">
|
||||
<Delete />
|
||||
</el-icon>清空
|
||||
</el-button>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="prompt"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 8, maxRows: 15 }"
|
||||
placeholder="描述你想要生成的画面，例如：一只在太空中飞行的赛博朋克风格的猫..."
|
||||
maxlength="2000"
|
||||
show-word-limit
|
||||
class="custom-textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Reference Image -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-gray-700">参考图 (可选)</label>
|
||||
<div class="bg-gray-50 p-4 rounded-lg border border-dashed border-gray-300 hover:border-blue-400 transition-colors">
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false"
|
||||
:limit="2"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleRemove"
|
||||
accept=".jpg,.jpeg,.png,.bmp,.webp"
|
||||
:class="{ 'hide-upload-btn': fileList.length >= 2 }"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center text-gray-400">
|
||||
<el-icon class="text-2xl mb-2">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<span class="text-xs">点击上传</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div class="text-xs text-gray-400 mt-2 flex justify-between items-center flex-wrap gap-2">
|
||||
<span>最多2张，< 5MB (支持 JPG/PNG/WEBP)</span>
|
||||
<el-checkbox v-model="compressImage" label="压缩图片" size="small" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto pt-4">
|
||||
<el-button
|
||||
type="primary"
|
||||
class="w-full h-12 text-lg shadow-lg shadow-blue-500/30 transition-all hover:shadow-blue-500/50"
|
||||
:loading="generating"
|
||||
:disabled="!canGenerate"
|
||||
round
|
||||
@click="handleGenerate"
|
||||
>
|
||||
{{ generating ? '生成中...' : '开始生成' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Result Panel -->
|
||||
<div class="flex-1 bg-gray-100 rounded-xl overflow-hidden relative flex flex-col h-full">
|
||||
<div v-if="currentTask" class="flex-1 flex flex-col relative h-full overflow-hidden">
|
||||
<!-- Image Display -->
|
||||
<div class="flex-1 flex items-center justify-center p-4 bg-checkboard overflow-hidden relative min-h-0">
|
||||
<div v-if="currentTask.taskStatus === 'Success' && currentTask.storeUrl" class="relative group w-full h-full flex items-center justify-center">
|
||||
<el-image
|
||||
ref="previewImageRef"
|
||||
:src="currentTask.storeUrl"
|
||||
fit="contain"
|
||||
class="w-full h-full"
|
||||
:style="{ maxHeight: '100%', maxWidth: '100%' }"
|
||||
:preview-src-list="[currentTask.storeUrl]"
|
||||
:initial-index="0"
|
||||
:preview-teleported="true"
|
||||
/>
|
||||
<!-- Hover Actions -->
|
||||
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity flex gap-2 z-10">
|
||||
<el-button circle type="primary" :icon="ZoomIn" @click="showViewer = true" />
|
||||
<el-button circle type="primary" :icon="Download" @click="downloadImage" />
|
||||
<el-button circle type="info" :icon="Refresh" title="新任务" @click="currentTask = null" />
|
||||
</div>
|
||||
|
||||
<el-image-viewer
|
||||
v-if="showViewer"
|
||||
:url-list="[currentTask.storeUrl]"
|
||||
@close="showViewer = false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Processing State -->
|
||||
<div v-else-if="currentTask.taskStatus === 'Processing'" class="text-center">
|
||||
<div class="loader mb-6" />
|
||||
<p class="text-gray-600 font-medium text-lg animate-pulse">
|
||||
正在绘制您的想象...
|
||||
</p>
|
||||
<p class="text-gray-400 text-sm mt-2">
|
||||
请稍候，这可能需要几秒钟
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Fail State -->
|
||||
<div v-else-if="currentTask.taskStatus === 'Fail'" class="text-center text-red-500">
|
||||
<el-icon class="text-6xl mb-4">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
<p class="text-lg font-medium">
|
||||
生成失败
|
||||
</p>
|
||||
<p class="text-sm opacity-80 mt-1">
|
||||
{{ currentTask.errorInfo || '请检查提示词或稍后重试' }}
|
||||
</p>
|
||||
<el-button class="mt-4" icon="Refresh" @click="handleGenerate">
|
||||
重试
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt Display (Bottom) -->
|
||||
<div class="bg-white p-4 border-t border-gray-200 shrink-0 max-h-40 overflow-y-auto">
|
||||
<p class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
|
||||
当前提示词
|
||||
</p>
|
||||
<p class="text-gray-800 text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{{ currentTask.prompt }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="flex-1 flex flex-col items-center justify-center text-gray-400 bg-gray-50/50 h-full">
|
||||
<div class="w-32 h-32 bg-gray-200 rounded-full flex items-center justify-center mb-6">
|
||||
<el-icon class="text-5xl text-gray-400">
|
||||
<PictureIcon />
|
||||
</el-icon>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-600 mb-2">
|
||||
准备好开始了吗？
|
||||
</h3>
|
||||
<p class="text-gray-500 max-w-md text-center">
|
||||
在左侧配置您的创意参数，点击生成按钮，见证AI的奇迹。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-checkboard {
|
||||
background-image:
|
||||
linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
}
|
||||
|
||||
/* Loader Animation */
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 5px solid #e5e7eb;
|
||||
border-bottom-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.hide-upload-btn .el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
213
Yi.Ai.Vue3/src/pages/chat/image/components/ImagePlaza.vue
Normal file
213
Yi.Ai.Vue3/src/pages/chat/image/components/ImagePlaza.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col bg-gray-50">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto p-4 custom-scrollbar"
|
||||
v-infinite-scroll="loadMore"
|
||||
:infinite-scroll-disabled="disabled"
|
||||
:infinite-scroll-distance="50"
|
||||
>
|
||||
<div v-if="taskList.length > 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
||||
<TaskCard
|
||||
v-for="task in taskList"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
@click="handleCardClick(task)"
|
||||
@use-prompt="$emit('use-prompt', $event)"
|
||||
@use-reference="$emit('use-reference', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="!loading && taskList.length === 0" class="h-full flex flex-col items-center justify-center text-gray-400">
|
||||
<el-icon class="text-6xl mb-4"><Picture /></el-icon>
|
||||
<p>暂无图片，快去生成一张吧！</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="py-6 flex justify-center">
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No More State -->
|
||||
<div v-if="noMore && taskList.length > 0" class="py-6 text-center text-gray-400 text-sm">
|
||||
- 到底了，没有更多图片了 -
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog for details -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="图片详情"
|
||||
width="900px"
|
||||
append-to-body
|
||||
class="image-detail-dialog"
|
||||
align-center
|
||||
>
|
||||
<div v-if="currentTask" class="flex flex-col md:flex-row gap-6 h-[600px]">
|
||||
<!-- Left Image -->
|
||||
<div class="flex-1 bg-black/5 rounded-lg flex items-center justify-center overflow-hidden relative group">
|
||||
<el-image
|
||||
:src="currentTask.storeUrl"
|
||||
fit="contain"
|
||||
class="w-full h-full"
|
||||
:preview-src-list="[currentTask.storeUrl]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right Info -->
|
||||
<div class="w-full md:w-[300px] flex flex-col gap-4 overflow-y-auto">
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-800 mb-2 flex items-center gap-2">
|
||||
<el-icon><MagicStick /></el-icon> 提示词
|
||||
</h3>
|
||||
<div class="bg-gray-50 p-4 rounded-lg border border-gray-100 text-sm text-gray-600 leading-relaxed relative group/prompt">
|
||||
{{ currentTask.prompt }}
|
||||
<el-button
|
||||
class="absolute top-2 right-2 opacity-0 group-hover/prompt:opacity-100 transition-opacity shadow-sm"
|
||||
size="small"
|
||||
circle
|
||||
:icon="CopyDocument"
|
||||
@click="copyPrompt(currentTask.prompt)"
|
||||
title="复制提示词"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto space-y-3 pt-4 border-t border-gray-100">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-500">创建时间</span>
|
||||
<span class="text-gray-800">{{ formatTime(currentTask.creationTime) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-500">状态</span>
|
||||
<el-tag size="small" type="success">生成成功</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 mt-2">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="MagicStick"
|
||||
@click="$emit('use-prompt', currentTask.prompt)"
|
||||
>
|
||||
使用提示词
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:icon="Picture"
|
||||
@click="$emit('use-reference', currentTask.storeUrl)"
|
||||
>
|
||||
做参考图
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { getImagePlaza } from '@/api/aiImage';
|
||||
import type { TaskItem } from '@/api/aiImage/types';
|
||||
import TaskCard from './TaskCard.vue';
|
||||
import { format } from 'date-fns';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { Picture, Loading, MagicStick, CopyDocument } from '@element-plus/icons-vue';
|
||||
|
||||
const emit = defineEmits(['use-prompt', 'use-reference']);
|
||||
|
||||
const taskList = ref<TaskItem[]>([]);
|
||||
const pageIndex = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const loading = ref(false);
|
||||
const noMore = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const currentTask = ref<TaskItem | null>(null);
|
||||
|
||||
const { copy } = useClipboard();
|
||||
|
||||
const disabled = computed(() => loading.value || noMore.value);
|
||||
|
||||
const loadMore = async () => {
|
||||
if (loading.value || noMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getImagePlaza({
|
||||
PageIndex: pageIndex.value,
|
||||
PageSize: pageSize.value,
|
||||
TaskStatus: 'Success'
|
||||
});
|
||||
|
||||
// Handle potential wrapper
|
||||
const data = (res as any).data || res;
|
||||
const items = data.items || [];
|
||||
const total = data.total || 0;
|
||||
|
||||
if (items.length < pageSize.value) {
|
||||
noMore.value = true;
|
||||
}
|
||||
|
||||
if (pageIndex.value === 1) {
|
||||
taskList.value = items;
|
||||
} else {
|
||||
// Avoid duplicates
|
||||
const newItems = items.filter((item: TaskItem) => !taskList.value.some(t => t.id === item.id));
|
||||
taskList.value.push(...newItems);
|
||||
}
|
||||
|
||||
// Check if we reached total
|
||||
if (taskList.value.length >= total) {
|
||||
noMore.value = true;
|
||||
}
|
||||
|
||||
if (items.length > 0) {
|
||||
pageIndex.value++;
|
||||
} else {
|
||||
noMore.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
noMore.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCardClick = (task: TaskItem) => {
|
||||
currentTask.value = task;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const formatTime = (time: string) => {
|
||||
try {
|
||||
return format(new Date(time), 'yyyy-MM-dd HH:mm');
|
||||
} catch (e) {
|
||||
return time;
|
||||
}
|
||||
};
|
||||
|
||||
const copyPrompt = async (text: string) => {
|
||||
await copy(text);
|
||||
ElMessage.success('提示词已复制');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
275
Yi.Ai.Vue3/src/pages/chat/image/components/MyImages.vue
Normal file
275
Yi.Ai.Vue3/src/pages/chat/image/components/MyImages.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col bg-gray-50">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto p-4 custom-scrollbar"
|
||||
v-infinite-scroll="loadMore"
|
||||
:infinite-scroll-disabled="disabled"
|
||||
:infinite-scroll-distance="50"
|
||||
>
|
||||
<div v-if="taskList.length > 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
||||
<TaskCard
|
||||
v-for="task in taskList"
|
||||
:key="task.id"
|
||||
:task="task"
|
||||
show-publish-status
|
||||
@click="handleCardClick(task)"
|
||||
@use-prompt="$emit('use-prompt', $event)"
|
||||
@use-reference="$emit('use-reference', $event)"
|
||||
@publish="handlePublish($event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="!loading && taskList.length === 0" class="h-full flex flex-col items-center justify-center text-gray-400">
|
||||
<el-icon class="text-6xl mb-4"><Picture /></el-icon>
|
||||
<p>您还没有生成过图片</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="py-6 flex justify-center">
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No More State -->
|
||||
<div v-if="noMore && taskList.length > 0" class="py-6 text-center text-gray-400 text-sm">
|
||||
- 到底了，没有更多图片了 -
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog for details -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="图片详情"
|
||||
width="900px"
|
||||
append-to-body
|
||||
class="image-detail-dialog"
|
||||
align-center
|
||||
>
|
||||
<div v-if="currentTask" class="flex flex-col md:flex-row gap-6 h-[600px]">
|
||||
<!-- Left Image -->
|
||||
<div class="flex-1 bg-black/5 rounded-lg flex items-center justify-center overflow-hidden relative">
|
||||
<el-image
|
||||
v-if="currentTask.storeUrl"
|
||||
:src="currentTask.storeUrl"
|
||||
fit="contain"
|
||||
class="w-full h-full"
|
||||
:preview-src-list="[currentTask.storeUrl]"
|
||||
/>
|
||||
<div v-else class="flex flex-col items-center text-gray-400 p-4 text-center">
|
||||
<span v-if="currentTask.taskStatus === 'Processing'">生成中...</span>
|
||||
<div v-else-if="currentTask.taskStatus === 'Fail'" class="text-red-500 flex flex-col items-center">
|
||||
<el-icon class="text-4xl mb-2"><CircleCloseFilled /></el-icon>
|
||||
<span class="font-bold mb-1">生成失败</span>
|
||||
<span class="text-sm opacity-80">{{ currentTask.errorInfo || '未知错误' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Info -->
|
||||
<div class="w-full md:w-[300px] flex flex-col gap-4 overflow-hidden">
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<h3 class="font-bold text-gray-800 mb-2 flex items-center gap-2 shrink-0">
|
||||
<el-icon><MagicStick /></el-icon> 提示词
|
||||
</h3>
|
||||
<div class="bg-gray-50 p-4 rounded-lg border border-gray-100 text-sm text-gray-600 leading-relaxed relative group/prompt overflow-y-auto custom-scrollbar flex-1">
|
||||
{{ currentTask.prompt }}
|
||||
<el-button
|
||||
class="absolute top-2 right-2 opacity-0 group-hover/prompt:opacity-100 transition-opacity shadow-sm z-10"
|
||||
size="small"
|
||||
circle
|
||||
:icon="CopyDocument"
|
||||
@click="copyPrompt(currentTask.prompt)"
|
||||
title="复制提示词"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto space-y-3 pt-4 border-t border-gray-100 shrink-0">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-500">创建时间</span>
|
||||
<span class="text-gray-800">{{ formatTime(currentTask.creationTime) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm items-center">
|
||||
<span class="text-gray-500">状态</span>
|
||||
<div class="flex gap-2">
|
||||
<el-tag v-if="currentTask.taskStatus === 'Success'" size="small" type="success">成功</el-tag>
|
||||
<el-tag v-else-if="currentTask.taskStatus === 'Processing'" size="small" type="primary">进行中</el-tag>
|
||||
<el-tag v-else size="small" type="danger">失败</el-tag>
|
||||
|
||||
<el-tag v-if="currentTask.publishStatus === 'Published'" size="small" type="warning" effect="dark">已发布</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentTask.taskStatus === 'Success'" class="pt-2 space-y-2">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:icon="MagicStick"
|
||||
@click="$emit('use-prompt', currentTask.prompt)"
|
||||
>
|
||||
使用提示词
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:icon="Picture"
|
||||
@click="$emit('use-reference', currentTask.storeUrl)"
|
||||
>
|
||||
做参考图
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="currentTask.publishStatus === 'Unpublished'"
|
||||
type="success"
|
||||
class="w-full"
|
||||
:icon="Share"
|
||||
@click="handlePublish(currentTask)"
|
||||
>
|
||||
发布到广场
|
||||
</el-button>
|
||||
<el-button v-else type="info" disabled class="w-full">
|
||||
已发布
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { getMyTasks, publishImage } from '@/api/aiImage';
|
||||
import type { TaskItem } from '@/api/aiImage/types';
|
||||
import TaskCard from './TaskCard.vue';
|
||||
import { format } from 'date-fns';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { Picture, Loading, MagicStick, CopyDocument, Share } from '@element-plus/icons-vue';
|
||||
|
||||
const emit = defineEmits(['use-prompt', 'use-reference']);
|
||||
|
||||
const taskList = ref<TaskItem[]>([]);
|
||||
const pageIndex = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const loading = ref(false);
|
||||
const noMore = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const currentTask = ref<TaskItem | null>(null);
|
||||
|
||||
const { copy } = useClipboard();
|
||||
|
||||
const disabled = computed(() => loading.value || noMore.value);
|
||||
|
||||
const loadMore = async () => {
|
||||
if (loading.value || noMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyTasks({
|
||||
PageIndex: pageIndex.value,
|
||||
PageSize: pageSize.value
|
||||
});
|
||||
|
||||
// Handle potential wrapper
|
||||
const data = (res as any).data || res;
|
||||
const items = data.items || [];
|
||||
const total = data.total || 0;
|
||||
|
||||
if (items.length < pageSize.value) {
|
||||
noMore.value = true;
|
||||
}
|
||||
|
||||
if (pageIndex.value === 1) {
|
||||
taskList.value = items;
|
||||
} else {
|
||||
// Avoid duplicates if any
|
||||
const newItems = items.filter((item: TaskItem) => !taskList.value.some(t => t.id === item.id));
|
||||
taskList.value.push(...newItems);
|
||||
}
|
||||
|
||||
// Check if we reached total
|
||||
if (taskList.value.length >= total) {
|
||||
noMore.value = true;
|
||||
}
|
||||
|
||||
if (items.length > 0) {
|
||||
pageIndex.value++;
|
||||
} else {
|
||||
noMore.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
// Stop trying if error occurs to prevent loop
|
||||
noMore.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCardClick = (task: TaskItem) => {
|
||||
currentTask.value = task;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const formatTime = (time: string) => {
|
||||
try {
|
||||
return format(new Date(time), 'yyyy-MM-dd HH:mm');
|
||||
} catch (e) {
|
||||
return time;
|
||||
}
|
||||
};
|
||||
|
||||
const copyPrompt = async (text: string) => {
|
||||
await copy(text);
|
||||
ElMessage.success('提示词已复制');
|
||||
};
|
||||
|
||||
const handlePublish = async (task: TaskItem) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要发布这张图片到广场吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info',
|
||||
});
|
||||
|
||||
await publishImage({
|
||||
taskId: task.id,
|
||||
categories: []
|
||||
});
|
||||
|
||||
ElMessage.success('发布成功');
|
||||
task.publishStatus = 'Published';
|
||||
} catch (e) {
|
||||
// Cancelled or error
|
||||
}
|
||||
};
|
||||
|
||||
// Expose refresh method
|
||||
defineExpose({
|
||||
refresh: () => {
|
||||
pageIndex.value = 1;
|
||||
taskList.value = [];
|
||||
noMore.value = false;
|
||||
loadMore();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
112
Yi.Ai.Vue3/src/pages/chat/image/components/TaskCard.vue
Normal file
112
Yi.Ai.Vue3/src/pages/chat/image/components/TaskCard.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<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">
|
||||
<!-- Image Area -->
|
||||
<div class="aspect-square w-full relative bg-gray-100 overflow-hidden">
|
||||
<!-- Blurred Background -->
|
||||
<div
|
||||
v-if="task.taskStatus === 'Success' && task.storeUrl"
|
||||
class="absolute inset-0 bg-cover bg-center blur-xl opacity-60 scale-125"
|
||||
:style="{ backgroundImage: `url(${task.storeUrl})` }"
|
||||
></div>
|
||||
|
||||
<el-image
|
||||
v-if="task.taskStatus === 'Success' && task.storeUrl"
|
||||
:src="task.storeUrl"
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
class="w-full h-full relative z-10 transition-transform duration-500 group-hover:scale-105"
|
||||
>
|
||||
<template #error>
|
||||
<div class="flex flex-col justify-center items-center w-full h-full text-gray-400 bg-gray-50">
|
||||
<el-icon class="text-3xl mb-2"><Picture /></el-icon>
|
||||
<span class="text-xs">加载失败</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #placeholder>
|
||||
<div class="flex justify-center items-center w-full h-full bg-gray-50">
|
||||
<el-icon class="is-loading text-gray-400"><Loading /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
|
||||
<!-- Non-Success States -->
|
||||
<div v-else class="w-full h-full flex flex-col justify-center items-center p-4 text-center relative z-10 bg-gray-50">
|
||||
<div v-if="task.taskStatus === 'Processing'" class="flex flex-col items-center text-blue-500">
|
||||
<el-icon class="is-loading text-2xl mb-2"><Loading /></el-icon>
|
||||
<span class="text-xs font-medium">生成中...</span>
|
||||
</div>
|
||||
<div v-else-if="task.taskStatus === 'Fail'" class="flex flex-col items-center text-red-500">
|
||||
<el-icon class="text-2xl mb-2"><CircleCloseFilled /></el-icon>
|
||||
<span class="text-xs font-medium">生成失败</span>
|
||||
</div>
|
||||
<div v-else class="text-gray-400">
|
||||
<span class="text-xs">等待中</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay (Hover) -->
|
||||
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 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>
|
||||
<div class="flex gap-2" v-if="task.taskStatus === 'Success'">
|
||||
<el-tooltip content="使用提示词" placement="top" :show-after="500">
|
||||
<el-button circle size="small" :icon="MagicStick" @click.stop="$emit('use-prompt', task.prompt)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="做参考图" placement="top" :show-after="500">
|
||||
<el-button circle size="small" :icon="PictureIcon" @click.stop="$emit('use-reference', task.storeUrl)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="task.publishStatus === 'Unpublished'" content="发布到广场" placement="top" :show-after="500">
|
||||
<el-button circle size="small" type="success" :icon="Share" @click.stop="$emit('publish', task)" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Tag -->
|
||||
<div class="absolute top-2 right-2 z-20" v-if="showPublishStatus && task.publishStatus === 'Published'">
|
||||
<el-tag type="success" effect="dark" size="small" round>已发布</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="p-3 flex-1 flex flex-col">
|
||||
<p class="text-sm text-gray-700 line-clamp-2 mb-2 h-10 leading-5" :title="task.prompt">
|
||||
{{ task.prompt }}
|
||||
</p>
|
||||
<div class="mt-auto flex justify-between items-center text-xs text-gray-400">
|
||||
<span>{{ formatTime(task.creationTime) }}</span>
|
||||
<span v-if="task.taskStatus === 'Success'" class="text-green-500 flex items-center gap-1">
|
||||
<el-icon><Check /></el-icon> 完成
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { Picture, Loading, CircleCloseFilled, Check, MagicStick, Picture as PictureIcon, Share } from '@element-plus/icons-vue';
|
||||
import type { TaskItem } from '@/api/aiImage/types';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
const props = defineProps<{
|
||||
task: TaskItem;
|
||||
showPublishStatus?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['click', 'use-prompt', 'use-reference', 'publish']);
|
||||
|
||||
const formatTime = (time: string) => {
|
||||
try {
|
||||
return format(new Date(time), 'MM-dd HH:mm');
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-card {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
// 图片生成功能 - 预留
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="image-generation-page">
|
||||
<el-empty description="图片生成功能开发中，敬请期待">
|
||||
<template #image>
|
||||
<el-icon style="font-size: 80px; color: var(--el-color-primary);">
|
||||
<i-ep-picture />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-empty>
|
||||
<div class="image-page-container h-full flex flex-col">
|
||||
<el-tabs v-model="activeTab" class="flex-1 flex flex-col" type="border-card">
|
||||
<el-tab-pane label="提示词广场" name="plaza" class="h-full">
|
||||
<ImagePlaza
|
||||
v-if="activeTab === 'plaza'"
|
||||
@use-prompt="handleUsePrompt"
|
||||
@use-reference="handleUseReference"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图片生成" name="generate" class="h-full">
|
||||
<ImageGenerator
|
||||
ref="imageGeneratorRef"
|
||||
@task-created="handleTaskCreated"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="我的图库" name="my-images" class="h-full">
|
||||
<MyImages
|
||||
ref="myImagesRef"
|
||||
v-if="activeTab === 'my-images'"
|
||||
@use-prompt="handleUsePrompt"
|
||||
@use-reference="handleUseReference"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.image-generation-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
import ImagePlaza from './components/ImagePlaza.vue';
|
||||
import ImageGenerator from './components/ImageGenerator.vue';
|
||||
import MyImages from './components/MyImages.vue';
|
||||
|
||||
const activeTab = ref('plaza');
|
||||
const myImagesRef = ref();
|
||||
const imageGeneratorRef = ref();
|
||||
|
||||
const handleTaskCreated = () => {
|
||||
// Optional: Switch to My Images or just notify
|
||||
// For now, we stay on Generator page to see the result.
|
||||
};
|
||||
|
||||
const handleUsePrompt = (prompt: string) => {
|
||||
activeTab.value = 'generate';
|
||||
nextTick(() => {
|
||||
if (imageGeneratorRef.value) {
|
||||
imageGeneratorRef.value.setPrompt(prompt);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleUseReference = (url: string) => {
|
||||
activeTab.value = 'generate';
|
||||
nextTick(() => {
|
||||
if (imageGeneratorRef.value && url) {
|
||||
imageGeneratorRef.value.addReferenceImage(url);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Refresh My Images when tab is activated
|
||||
watch(activeTab, (val) => {
|
||||
if (val === 'my-images' && myImagesRef.value) {
|
||||
myImagesRef.value.refresh();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-page-container {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
:deep(.el-tab-pane) {
|
||||
height: 100%;
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,6 +6,11 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// 从 URL 中提取邀请码参数
|
||||
const inviteCodeFromUrl = computed(() => {
|
||||
return route.query.inviteCode as string | undefined;
|
||||
});
|
||||
|
||||
// 控制侧边栏折叠状态
|
||||
const isCollapsed = ref(false);
|
||||
|
||||
@@ -103,7 +108,7 @@ window.addEventListener('resize', checkIsMobile);
|
||||
</div>
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
<component :is="Component" :external-invite-code="inviteCodeFromUrl" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user