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

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>