feat: 前端新增图片生成功能

Yi.Ai.Vue3/src/api/aiImage/index.ts

@@ -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();
+}

Yi.Ai.Vue3/src/api/aiImage/types.ts

@@ -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;
+}

Yi.Ai.Vue3/src/api/index.ts

@@ -6,3 +6,4 @@ export * from './model';
 export * from './pay';
 export * from './session';
 export * from './user';
+export * from './aiImage';

Yi.Ai.Vue3/src/api/model/index.ts

@@ -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();
 }
 /*
 返回数据

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

Yi.Ai.Vue3/src/pages/chat/image/index.vue

@@ -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>

Yi.Ai.Vue3/src/pages/console/index.vue

@@ -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>

Yi.Ai.Vue3/types/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckTag: typeof import('element-plus/es')['ElCheckTag']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
@@ -36,6 +37,7 @@ declare module 'vue' {
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
+    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
@@ -59,6 +61,7 @@ declare module 'vue' {
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     FilesSelect: typeof import('./../src/components/FilesSelect/index.vue')['default']
     IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
     Indexl: typeof import('./../src/components/SupportModelProducts/indexl.vue')['default']
@@ -87,6 +90,7 @@ declare module 'vue' {
     WelecomeText: typeof import('./../src/components/WelecomeText/index.vue')['default']
   }
   export interface GlobalDirectives {
+    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }