Procházet zdrojové kódy

feat(Photography): 添加模特图生成和场景图生成弹窗功能

- 在服务卡片上添加点击事件,打开对应弹窗
- 引入 ModelGenerationDialog 和 ScenePromptDialog 组件
- 实现模特图生成和场景图生成的弹窗逻辑
- 添加相关数据状态和事件处理函数
panqiuyao před 3 měsíci
rodič
revize
b607c1b9c3
1 změnil soubory, kde provedl 40 přidání a 2 odebrání
  1. 40 2
      frontend/src/views/Photography/detail.vue

+ 40 - 2
frontend/src/views/Photography/detail.vue

@@ -18,7 +18,7 @@
             <div class="service-content">
               <div class="service-image">
                 <img src="@/assets/images/Photography/cj.png" alt="场景图生成" />
-                <div class="service-icon">
+                <div class="service-icon" @click.stop="openScenePromptDialog" v-log="{ describe: { action: '点击服务卡片图标', service: '场景图生成-弹窗' } }">
                   <el-icon><EditPen /></el-icon>
                 </div>
               </div>
@@ -32,7 +32,7 @@
             <div class="service-content">
               <div class="service-image">
                 <img src="@/assets/images/Photography/mt.png" alt="模特图生成" />
-                <div class="service-icon">
+                <div class="service-icon" @click.stop="openModelDialog" v-log="{ describe: { action: '点击服务卡片图标', service: '模特图生成-弹窗' } }">
                   <el-icon><EditPen /></el-icon>
                 </div>
               </div>
@@ -310,6 +310,21 @@
     <img style="width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
   </el-dialog>
 
+  <!-- 模特生成弹窗 -->
+  <ModelGenerationDialog 
+    v-model="modelDialogVisible"
+    :initial-models="selectedModels"
+    @confirm="handleModelSelection"
+    @cancel="modelDialogVisible = false"
+  />
+
+  <!-- 场景提示词弹窗 -->
+  <ScenePromptDialog 
+    v-model="scenePromptDialogVisible"
+    :initial-prompt="scenePrompt"
+    @confirm="handleScenePromptConfirm"
+    @cancel="scenePromptDialogVisible = false"
+  />
 
 
 </template>
@@ -336,6 +351,8 @@ import { getRouterUrl } from '@/utils/appfun'
 import { useUuidStore } from '@/stores/modules/uuid'
 import socket from "@/stores/modules/socket";
 const socketStore = socket();
+import ModelGenerationDialog from '@/components/ModelGeneration/index.vue'
+import ScenePromptDialog from '@/components/ScenePromptDialog/index.vue'
 
 import { Close, Warning } from '@element-plus/icons-vue'
 import LoadingDialog from '@/views/Photography/components/LoadingDialog.vue'
@@ -483,6 +500,27 @@ const publishToPlatforms = () => {
   // 具体上架逻辑按后续接口对接
 }
 
+// 模特与场景弹窗
+const modelDialogVisible = ref(false)
+const scenePromptDialogVisible = ref(false)
+const selectedModels = ref<{ female: any; male: any } | null>(null)
+const scenePrompt = ref('')
+
+const openModelDialog = () => {
+  modelDialogVisible.value = true
+}
+const openScenePromptDialog = () => {
+  scenePromptDialogVisible.value = true
+}
+const handleModelSelection = (models: { female: any; male: any }) => {
+  selectedModels.value = models
+  modelDialogVisible.value = false
+  ElMessage.success('模特选择完成!')
+}
+const handleScenePromptConfirm = (prompt: string) => {
+  scenePrompt.value = prompt
+}
+