86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<template>
|
|
<div class="image-page-container h-full flex flex-col">
|
|
<el-tabs v-model="activeTab" class="flex-1 flex flex-col" type="border-card">
|
|
<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>
|
|
|
|
<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%;
|
|
}
|
|
</style>
|