From c513814c0a40a0da785d96a5e9a6c207e1ff9882 Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Wed, 1 Apr 2026 18:01:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=94=9F=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                           |   3 +-
 src/apis/Model.ts                          |   4 +
 src/assets/less/Img/ImgBox.css             |   4 +
 src/assets/less/Img/ImgBox.less            |   4 +
 src/assets/less/Video/img/img.css          | 206 +++++
 src/assets/less/Video/img/img.less         | 253 +++++++
 src/assets/less/Video/{ => text}/text.css  |  36 +
 src/assets/less/Video/{ => text}/text.less |  43 ++
 src/components/video/ImgVideo.vue          | 828 ++++++++++++++-------
 src/components/video/TextVideo.vue         |  21 +-
 src/components/video/VideoLeft.vue         |  27 +-
 src/types/model.ts                         |   5 +
 12 files changed, 1135 insertions(+), 299 deletions(-)
 create mode 100644 src/assets/less/Video/img/img.css
 create mode 100644 src/assets/less/Video/img/img.less
 rename src/assets/less/Video/{ => text}/text.css (83%)
 rename src/assets/less/Video/{ => text}/text.less (81%)

diff --git a/.env.development b/.env.development
index 5995f9a..0016544 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1,2 @@
-VITE_API_BASE_URL = 'https://opencomputing.ai'
\ No newline at end of file
+VITE_API_BASE_URL = 'https://opencomputing.ai'
+VITE_IMG_BASE_URL = 'https://opencomputing.ai'
\ No newline at end of file
diff --git a/src/apis/Model.ts b/src/apis/Model.ts
index ef069db..8ba5065 100644
--- a/src/apis/Model.ts
+++ b/src/apis/Model.ts
@@ -2,6 +2,10 @@ import {get, post} from '../utlis/request'
 
 // 文生视频
 export const textvideo = <T,D>(data:D):Promise<T> =>post('/api/llmage/vidu_inference.dspy',data)
+
+// 图生视频
+export const imagetovideo = <T,D>(data:D):Promise<T> =>post('/api/llmage/vidu_inference.dspy',data)
+
 // 获取所有模型
 export const AllModel = <T,D>(data:D):Promise<T> =>get('/api/llmage/get_type_llms.dspy',data)
 
diff --git a/src/assets/less/Img/ImgBox.css b/src/assets/less/Img/ImgBox.css
index 79490d2..9507070 100644
--- a/src/assets/less/Img/ImgBox.css
+++ b/src/assets/less/Img/ImgBox.css
@@ -142,3 +142,7 @@
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff;
 }
+:deep(.el-upload--picture-card) {
+  width: 140px !important;
+  height: 140px !important;
+}
diff --git a/src/assets/less/Img/ImgBox.less b/src/assets/less/Img/ImgBox.less
index 8a5a9a0..cde8fac 100644
--- a/src/assets/less/Img/ImgBox.less
+++ b/src/assets/less/Img/ImgBox.less
@@ -175,3 +175,7 @@
         }
     }
 }
+:deep(.el-upload--picture-card) {
+    width: 140px !important;
+    height: 140px !important;
+}
\ No newline at end of file
diff --git a/src/assets/less/Video/img/img.css b/src/assets/less/Video/img/img.css
new file mode 100644
index 0000000..b52b41f
--- /dev/null
+++ b/src/assets/less/Video/img/img.css
@@ -0,0 +1,206 @@
+:deep(.el-select__wrapper) {
+  width: 100% !important;
+  border: none !important;
+  background-color: rgba(0, 0, 0, 0.32) !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+  font-size: 14px;
+  color: #fff !important;
+  resize: vertical;
+  outline: none !important;
+}
+:deep(.el-upload--picture-card) {
+  width: 140px !important;
+  height: 140px !important;
+}
+:deep(.el-select__selected-item) {
+  color: #fff !important;
+}
+:deep(.el-textarea) .el-textarea__inner {
+  border: none !important;
+  background-color: rgba(0, 0, 0, 0.32) !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+  padding: 14px 16px !important;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #fff !important;
+  resize: none;
+  outline: none !important;
+}
+:deep(.el-textarea) .el-textarea__inner:focus {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+:deep(.el-textarea) .el-textarea__inner::placeholder {
+  color: rgba(255, 255, 255, 0.36) !important;
+  font-size: 14px;
+}
+:deep(.el-textarea) .el-input__count {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+}
+.card {
+  width: 100%;
+  height: 100%;
+  background-color: #1a1c20;
+  border: none;
+  flex: 1;
+  padding: 16px;
+  border-radius: 12px;
+}
+.card :deep(.el-card__body) {
+  padding: 12px 16px;
+  height: 100%;
+}
+.reference-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  color: #fff;
+}
+.upload-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  flex-shrink: 0;
+}
+.upload-item {
+  flex: 1;
+  min-width: 200px;
+}
+.upload-item .upload-label {
+  font-size: 14px;
+  margin-bottom: 8px;
+  color: rgba(255, 255, 255, 0.9);
+}
+.upload-item :deep(.el-upload--picture-card) {
+  background-color: rgba(0, 0, 0, 0.32);
+  border: 1px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+  width: 100%;
+  height: 100px;
+  line-height: 100px;
+}
+.upload-item :deep(.el-upload--picture-card):hover {
+  border-color: #409eff;
+}
+.upload-item :deep(.el-upload-list--picture-card) .el-upload-list__item {
+  width: 100%;
+  height: 100px;
+  background-color: rgba(0, 0, 0, 0.32);
+  border-radius: 10px;
+}
+.required-star {
+  color: #ff4d4f;
+  margin-left: 4px;
+}
+.input {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+.btmcard {
+  width: 100%;
+  background-color: #1a1c20;
+  border: none;
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+.btmcard :deep(.el-card__body) {
+  padding: 12px 16px;
+}
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.select-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+.select-title {
+  width: 50%;
+  font-size: 14px;
+  color: #fff;
+  padding-right: 12px;
+}
+.select-content {
+  width: 50%;
+  display: flex;
+  gap: 8px;
+}
+.select-content :deep(.el-input-number) {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.32);
+  border-radius: 10px;
+}
+.select-content :deep(.el-input-number) .el-input-number__decrease,
+.select-content :deep(.el-input-number) .el-input-number__increase {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.6);
+}
+.select-content :deep(.el-input-number) .el-input-number__decrease:hover,
+.select-content :deep(.el-input-number) .el-input-number__increase:hover {
+  color: #fff;
+}
+.select-content :deep(.el-input-number) .el-input__inner {
+  background-color: transparent;
+  color: #fff;
+  border: none;
+}
+.select-content :deep(.el-input) .el-input__inner {
+  background-color: rgba(0, 0, 0, 0.32);
+  border: none;
+  border-radius: 10px;
+  color: #fff;
+}
+.select-content :deep(.el-input) .el-input__inner::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+.select-content :deep(.el-textarea) .el-textarea__inner {
+  border: none !important;
+  background-color: rgba(0, 0, 0, 0.32) !important;
+  border-radius: 10px !important;
+  color: #fff !important;
+}
+.audio-wrapper {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+.upload-btn {
+  flex-shrink: 0;
+}
+.custom-select-popup {
+  background-color: #2A2D34 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+  border: none !important;
+}
+.custom-select-popup .el-select-dropdown__item {
+  color: #ffffff !important;
+  background-color: transparent !important;
+  font-size: 14px !important;
+}
+.custom-select-popup .el-select-dropdown__item.selected,
+.custom-select-popup .el-select-dropdown__item:hover {
+  background-color: #3a3d46 !important;
+}
+.el-select .el-input__inner {
+  background-color: #35383F !important;
+  border: none !important;
+  color: #fff !important;
+}
+.el-select .el-input__suffix-inner {
+  color: #fff !important;
+}
+:deep(.el-upload-list__item) {
+  transition: none !important;
+}
diff --git a/src/assets/less/Video/img/img.less b/src/assets/less/Video/img/img.less
new file mode 100644
index 0000000..948e533
--- /dev/null
+++ b/src/assets/less/Video/img/img.less
@@ -0,0 +1,253 @@
+:deep(.el-select__wrapper) {
+    width: 100% !important;
+    border: none !important;
+    background-color: rgba(0, 0, 0, 0.32) !important;
+    box-shadow: none !important;
+    border-radius: 10px !important;
+    font-size: 14px;
+    color: #fff !important;
+    resize: vertical;
+    outline: none !important;
+}
+
+:deep(.el-upload--picture-card) {
+    width: 140px !important;
+    height: 140px !important;
+}
+
+:deep(.el-select__selected-item) {
+    color: #fff !important;
+}
+
+:deep(.el-textarea) {
+    .el-textarea__inner {
+        border: none !important;
+        background-color: rgba(0, 0, 0, 0.32) !important;
+        box-shadow: none !important;
+        border-radius: 10px !important;
+        padding: 14px 16px !important;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #fff !important;
+        resize: none;
+        outline: none !important;
+
+        &:focus {
+            border: none !important;
+            box-shadow: none !important;
+            outline: none !important;
+        }
+
+        &::placeholder {
+            color: rgba(255, 255, 255, 0.36) !important;
+            font-size: 14px;
+        }
+    }
+
+    .el-input__count {
+        background: transparent;
+        color: rgba(255, 255, 255, 0.5);
+    }
+}
+
+.card {
+    width: 100%;
+    height: 100%;
+    background-color: #1a1c20;
+    border: none;
+    flex: 1;
+    padding: 16px;
+    border-radius: 12px;
+
+    :deep(.el-card__body) {
+        padding: 12px 16px;
+        height: 100%;
+    }
+}
+
+.reference-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: 100%;
+    color: #fff;
+}
+
+.upload-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    flex-shrink: 0;
+}
+
+.upload-item {
+    flex: 1;
+    min-width: 200px;
+
+    .upload-label {
+        font-size: 14px;
+        margin-bottom: 8px;
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    :deep(.el-upload--picture-card) {
+        background-color: rgba(0, 0, 0, 0.32);
+        border: 1px dashed rgba(255, 255, 255, 0.3);
+        border-radius: 10px;
+        width: 100%;
+        height: 100px;
+        line-height: 100px;
+
+        &:hover {
+            border-color: #409eff;
+        }
+    }
+
+    :deep(.el-upload-list--picture-card) {
+        .el-upload-list__item {
+            width: 100%;
+            height: 100px;
+            background-color: rgba(0, 0, 0, 0.32);
+            border-radius: 10px;
+        }
+    }
+}
+
+.required-star {
+    color: #ff4d4f;
+    margin-left: 4px;
+}
+
+.input {
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+}
+
+.btmcard {
+    width: 100%;
+    background-color: #1a1c20;
+    border: none;
+    margin-top: 16px;
+    padding: 16px;
+    border-radius: 12px;
+    flex-shrink: 0;
+
+    :deep(.el-card__body) {
+        padding: 12px 16px;
+    }
+}
+
+.select {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.select-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0;
+}
+
+.select-title {
+    width: 50%;
+    font-size: 14px;
+    color: #fff;
+    padding-right: 12px;
+}
+
+.select-content {
+    width: 50%;
+    display: flex;
+    gap: 8px;
+
+    :deep(.el-input-number) {
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.32);
+        border-radius: 10px;
+
+        .el-input-number__decrease,
+        .el-input-number__increase {
+            background-color: transparent;
+            color: rgba(255, 255, 255, 0.6);
+
+            &:hover {
+                color: #fff;
+            }
+        }
+
+        .el-input__inner {
+            background-color: transparent;
+            color: #fff;
+            border: none;
+        }
+    }
+
+    :deep(.el-input) {
+        .el-input__inner {
+            background-color: rgba(0, 0, 0, 0.32);
+            border: none;
+            border-radius: 10px;
+            color: #fff;
+
+            &::placeholder {
+                color: rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+
+    :deep(.el-textarea) {
+        .el-textarea__inner {
+            border: none !important;
+            background-color: rgba(0, 0, 0, 0.32) !important;
+            border-radius: 10px !important;
+            color: #fff !important;
+        }
+    }
+}
+
+.audio-wrapper {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+}
+
+.upload-btn {
+    flex-shrink: 0;
+}
+
+.custom-select-popup {
+    background-color: #2A2D34 !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+    border: none !important;
+
+    .el-select-dropdown__item {
+        color: #ffffff !important;
+        background-color: transparent !important;
+        font-size: 14px !important;
+    }
+
+    .el-select-dropdown__item.selected,
+    .el-select-dropdown__item:hover {
+        background-color: #3a3d46 !important;
+    }
+}
+
+.el-select {
+    .el-input__inner {
+        background-color: #35383F !important;
+        border: none !important;
+        color: #fff !important;
+    }
+
+    .el-input__suffix-inner {
+        color: #fff !important;
+    }
+}
+
+:deep(.el-upload-list__item) {
+    transition: none !important;
+}
\ No newline at end of file
diff --git a/src/assets/less/Video/text.css b/src/assets/less/Video/text/text.css
similarity index 83%
rename from src/assets/less/Video/text.css
rename to src/assets/less/Video/text/text.css
index 7a4ff43..1932396 100644
--- a/src/assets/less/Video/text.css
+++ b/src/assets/less/Video/text/text.css
@@ -184,3 +184,39 @@
   align-items: center;
   height: 32px;
 }
+:deep(.el-upload--picture-card) {
+  width: 140px !important;
+  height: 140px !important;
+}
+.upload-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  flex-shrink: 0;
+}
+.upload-item {
+  flex: 1;
+  min-width: 200px;
+}
+.upload-item .upload-label {
+  font-size: 14px;
+  margin-bottom: 8px;
+  color: rgba(255, 255, 255, 0.9);
+}
+.upload-item :deep(.el-upload--picture-card) {
+  background-color: rgba(0, 0, 0, 0.32);
+  border: 1px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+  width: 100%;
+  height: 100px;
+  line-height: 100px;
+}
+.upload-item :deep(.el-upload--picture-card):hover {
+  border-color: #409eff;
+}
+.upload-item :deep(.el-upload-list--picture-card) .el-upload-list__item {
+  width: 100%;
+  height: 100px;
+  background-color: rgba(0, 0, 0, 0.32);
+  border-radius: 10px;
+}
diff --git a/src/assets/less/Video/text.less b/src/assets/less/Video/text/text.less
similarity index 81%
rename from src/assets/less/Video/text.less
rename to src/assets/less/Video/text/text.less
index 8834a29..b35b232 100644
--- a/src/assets/less/Video/text.less
+++ b/src/assets/less/Video/text/text.less
@@ -211,3 +211,46 @@
   align-items: center;
   height: 32px;
 }
+:deep(.el-upload--picture-card) {
+    width: 140px !important;
+    height: 140px !important;
+}
+.upload-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    flex-shrink: 0;
+}
+
+.upload-item {
+    flex: 1;
+    min-width: 200px;
+
+    .upload-label {
+        font-size: 14px;
+        margin-bottom: 8px;
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    :deep(.el-upload--picture-card) {
+        background-color: rgba(0, 0, 0, 0.32);
+        border: 1px dashed rgba(255, 255, 255, 0.3);
+        border-radius: 10px;
+        width: 100%;
+        height: 100px;
+        line-height: 100px;
+
+        &:hover {
+            border-color: #409eff;
+        }
+    }
+
+    :deep(.el-upload-list--picture-card) {
+        .el-upload-list__item {
+            width: 100%;
+            height: 100px;
+            background-color: rgba(0, 0, 0, 0.32);
+            border-radius: 10px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/video/ImgVideo.vue b/src/components/video/ImgVideo.vue
index e4ef8a1..de8d9a4 100644
--- a/src/components/video/ImgVideo.vue
+++ b/src/components/video/ImgVideo.vue
@@ -1,333 +1,593 @@
 <template>
     <div class="reference-to-video">
-        <!-- 顶部卡片 -->
+        <!-- 顶部卡片：图片上传和提示词输入区 -->
         <el-card class="card">
             <div class="reference-container">
-                <!-- 上传模块 -->
+                <!-- 动态上传区域：根据模型生成图片上传项 -->
+                <div v-if="currentModel" class="upload-section">
+                    <div v-for="field in imageFields" :key="field.name" class="upload-item">
+                        <div class="upload-label">
+                            {{ field.label }}
+                            <span v-if="field.required" class="required-star">*</span>
+                        </div>
+                        <el-upload action="#" list-type="picture-card" :auto-upload="false"
+                            :on-change="(file: UploadFile) => handleFileChange(file, field.name)"
+                            :on-remove="() => handleRemove(field.name)" :file-list="getFileList(field.name)" :limit="1"
+                            :on-exceed="() => ElMessage.warning('每个字段只能上传一张图片')"
+                            :disabled="generating" class="upload">
+                            <el-icon>
+                                <Plus />
+                            </el-icon>
+                            <template #file="{ file }">
+                                <div>
+                                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                                    <span class="el-upload-list__item-actions">
+                                        <span class="el-upload-list__item-preview"
+                                            @click="handlePictureCardPreview(file)">
+                                            <el-icon>
+                                                <ZoomIn />
+                                            </el-icon>
+                                        </span>
+                                        <span v-if="!disabled" class="el-upload-list__item-delete"
+                                            @click="handleDownload(field.name)">
+                                            <el-icon>
+                                                <Download />
+                                            </el-icon>
+                                        </span>
+                                        <span v-if="!disabled" class="el-upload-list__item-delete"
+                                            @click="handleRemove(field.name)">
+                                            <el-icon>
+                                                <Delete />
+                                            </el-icon>
+                                        </span>
+                                    </span>
+                                </div>
+                            </template>
+                        </el-upload>
+                    </div>
+                </div>
 
-
-                <!-- 文本输入框 -->
-                <div class="input">
-                    <el-input type="textarea" :rows="10" maxlength="400"
-                        placeholder="支持上传图片、视频或主体作为参考。可参考视频中的动作、表情、运镜、特效、风格与构图等，并支持对元素进行增删和修改" />
+                <!-- 文本输入框（绑定 prompt 字段） -->
+                <div v-if="hasPromptField" class="input">
+                    <el-input type="textarea" :rows="6" maxlength="400" :placeholder="promptPlaceholder"
+                        v-model="prompt" show-word-limit :disabled="generating" />
                 </div>
             </div>
         </el-card>
 
+        <!-- 图片预览对话框 -->
+        <el-dialog v-model="dialogVisible">
+            <img w-full :src="dialogImageUrl" alt="Preview Image" />
+        </el-dialog>
+
         <!-- 底部配置卡片 -->
         <el-card class="btmcard">
             <div class="select">
-                <!-- 模型 -->
+                <!-- 模型选择（动态从接口加载） -->
                 <div class="select-item">
                     <div class="select-title">模型</div>
                     <div class="select-content">
-                        <el-select v-model="selectModel" style="width: 100%" @change="handleChange"
-                            popper-class="custom-select-popup">
-                            <el-option label="Jack" value="jack" />
-                            <el-option label="Lucy" value="lucy" />
-                            <el-option label="yiminghe" value="Yiminghe" />
-                            <el-option label="Disabled" value="disabled" disabled />
+                        <el-select v-model="currentModelId" style="width: 100%" popper-class="custom-select-popup"
+                            @change="handleModelChange" :disabled="generating">
+                            <el-option v-for="model in models" :key="model.id" :label="model.name" :value="model.id" />
                         </el-select>
                     </div>
                 </div>
 
+                <!-- 动态生成其他配置项（排除 prompt 和图片字段） -->
+                <template v-for="field in visibleFields" :key="field.name">
+                    <div class="select-item">
+                        <div class="select-title">
+                            {{ field.label }}
+                            <span v-if="field.required" class="required-star">*</span>
+                        </div>
+                        <div class="select-content">
+                            <!-- 下拉选择类型（code） -->
+                            <el-select v-if="field.uitype === 'code'" v-model="configData[field.name]"
+                                style="width: 100%" popper-class="custom-select-popup"
+                                :placeholder="`请选择${field.label}`" :disabled="generating">
+                                <el-option v-for="option in field.data" :key="option.value"
+                                    :label="option.text || option.value" :value="option.value" />
+                            </el-select>
 
+                            <!-- 数字输入类型（int） -->
+                            <el-input-number v-else-if="field.uitype === 'int'" v-model="configData[field.name]"
+                                :min="1" :max="field.max" :step="1" controls-position="right" style="width: 100%"
+                                :disabled="generating" />
+                            <el-input-number v-else-if="field.uitype === 'int'" v-model="configData[field.name]"
+                                :min="1" :max="field.max || 15" :step="1" controls-position="right" style="width: 100%"
+                                :disabled="generating" />
+                            <!-- 文本输入（text 类型，但非 prompt） -->
+                            <el-input v-else-if="field.uitype === 'text'" v-model="configData[field.name]"
+                                :placeholder="`请输入${field.label}`"
+                                :type="field.name === 'negative_prompt' ? 'textarea' : 'text'"
+                                :rows="field.name === 'negative_prompt' ? 3 : 1" clearable :disabled="generating" />
 
-
-                <!-- 清晰度 & 编码 -->
-                <div class="select-item">
-                    <div class="select-title">
-                        清晰度<span class="and">&</span>编码格式
+                            <!-- 音频上传 -->
+                            <div v-else-if="field.uitype === 'audio'" class="audio-wrapper">
+                                <el-input v-model="configData[field.name]" placeholder="请输入音频文件URL或点击上传" clearable
+                                    :disabled="generating" />
+                                <el-button size="small" @click="simulateUpload" :disabled="generating"
+                                    class="upload-btn">
+                                    上传
+                                </el-button>
+                            </div>
+                        </div>
                     </div>
-                    <div class="select-content">
-                        <el-select v-model="selectQuality" style="width: 50%" @change="handleChange"
-                            popper-class="custom-select-popup">
-                            <el-option label="1080P" value="1080P" />
-                        </el-select>
-                        <el-select v-model="selectCodec" style="width: 50%" @change="handleChange"
-                            popper-class="custom-select-popup">
-                            <el-option label="H265" value="H265" />
-                            <el-option label="H264" value="H264" />
-                        </el-select>
-                    </div>
-                </div>
-
-                <!-- 生成模式 -->
-                <div class="select-item">
-                    <div class="select-title">生成模式</div>
-                    <div class="select-content">
-                        <el-select v-model="selectModelviedo" style="width: 100%" @change="handleChange"
-                            popper-class="custom-select-popup">
-                            <el-option label="电影大片" value="电影大片" />
-                        </el-select>
-                        
-                    </div>
-                </div>
-
-                <!-- 数量 -->
-                <div class="select-item">
-                    <div class="select-title">数量</div>
-                    <div class="radio-group">
-                        <button v-for="num in [1, 2, 3, 4]" :key="num" class="radio-item"
-                            :class="{ selected: selectedCount === num }" @click="selectedCount = num" type="button">
-                            {{ num }}
-                        </button>
-                    </div>
-                </div>
+                </template>
             </div>
         </el-card>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, defineEmits } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';
+import type { UploadFile } from 'element-plus';
+import { imagetovideo, AllModel, queryModelPrice } from '../../apis/Model';
+import type {
+    Model,
+    AllModelResponse,
+    PriceQueryParams,
+    PriceQueryResponse,
+    TextVideoResponse,
+    ModelParams,
+} from '../../types/model';
 
-// 定义 emit 事件
+// ==================== 环境变量 ====================
+const IMG_BASE_URL = import.meta.env.VITE_IMG_BASE_URL || '';
+
+// ==================== 事件定义 ====================
 const emit = defineEmits<{
-  (e: 'price-update', price: number): void;
-  (e: 'prompt-change', isEmpty: boolean): void;
+    (e: 'price-update', price: number): void;
+    (e: 'prompt-change', isEmpty: boolean): void;
+    (e: 'task-created', taskid: string): void;
 }>();
 
-// 下拉选中项
-const selectModel = ref('lucy')
-const selectQuality = ref('1080P')
-const selectCodec = ref('H265')
-const selectModelviedo = ref('电影大片')
+// ==================== 类型定义 ====================
+type ConfigValue = string | number | boolean;
 
-// 单选按钮
-const selectedDuration = ref(5)
-const selectedCount = ref(1)
+// ==================== 数据定义 ====================
+const models = ref<Model[]>([]);
+const currentModelId = ref('');
+const currentModel = ref<Model | null>(null);
 
-// 价格计算
-const price = computed(() => {
-  const basePrice = selectedDuration.value > 5 ? 2 : 1
-  return basePrice * selectedCount.value
-})
+const prompt = ref('');
+const uploadedFiles = ref<Record<string, string>>({});
+const uploadedFileNames = ref<Record<string, string>>({});
+const configData = ref<Record<string, ConfigValue>>({});
 
-// 监听价格变化
-watch(price, (newPrice) => {
-  emit('price-update', newPrice)
-})
+const generating = ref(false);
+const price = ref(0);
 
-// 统一 change 事件
-const handleChange = (value: string) => {
-  console.log('selected', value)
-}
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);
+const disabled = ref(false);
+
+// ==================== 计算属性 ====================
+const imageFields = computed(() => {
+    if (!currentModel.value) return [];
+    return currentModel.value.input_fields.filter(
+        (field: any) => field.uitype === 'image'
+    );
+});
+
+const hasPromptField = computed(() => {
+    if (!currentModel.value) return false;
+    return currentModel.value.input_fields.some(f => f.name === 'prompt');
+});
+
+const visibleFields = computed(() => {
+    if (!currentModel.value) return [];
+    return currentModel.value.input_fields.filter(
+        (field: any) => field.uitype !== 'image' && field.name !== 'prompt'
+    );
+});
+
+const promptPlaceholder = computed(() => {
+    if (!currentModel.value) return '请输入提示词';
+    const promptField = currentModel.value.input_fields.find(f => f.name === 'prompt');
+    if (promptField?.required) return '请输入提示词（必填）';
+    return '请输入提示词';
+});
+
+// ==================== 表单初始化 ====================
+const initFormData = () => {
+    if (!currentModel.value) return;
+    const newConfigData: Record<string, ConfigValue> = {};
+
+    currentModel.value.input_fields.forEach(field => {
+        if (field.uitype === 'image' || field.name === 'prompt') {
+            return;
+        }
+
+        let defaultValue: ConfigValue = field.defaultvalue ?? '';
+
+        if (defaultValue === undefined || defaultValue === null) {
+            if (field.uitype === 'code' && field.data && field.data.length > 0) {
+                defaultValue = field.data[0].value;
+            } else if (field.uitype === 'int') {
+                defaultValue = 1;
+            } else {
+                defaultValue = '';
+            }
+        }
+        newConfigData[field.name] = defaultValue;
+    });
+
+    configData.value = newConfigData;
+};
+
+// ==================== 价格查询 ====================
+const buildPriceParams = (): PriceQueryParams | null => {
+    if (!currentModel.value) return null;
+
+    const configDataForPrice: PriceQueryParams['config_data'] = { action: '' };
+
+    currentModel.value.input_fields.forEach(field => {
+        if (field.uitype === 'image' || field.name === 'prompt') {
+            return;
+        }
+        const value = configData.value[field.name];
+        if (value !== undefined) {
+            if (field.uitype === 'audio') {
+                configDataForPrice.audio = Boolean(value);
+            } else {
+                configDataForPrice[field.name] = value;
+            }
+        }
+    });
+
+    configDataForPrice.action = currentModel.value.apiname;
+
+    const priceParams = {
+        product_type: 'llm',
+        product_id: currentModel.value.id,
+        config_data: configDataForPrice,
+    };
+
+    console.log('=== 构建价格查询参数 ===');
+    console.log('价格查询参数:', JSON.stringify(priceParams, null, 2));
+
+    return priceParams;
+};
+
+let priceTimer: ReturnType<typeof setTimeout> | null = null;
+
+const fetchPrice = () => {
+    if (priceTimer) clearTimeout(priceTimer);
+
+    priceTimer = setTimeout(async () => {
+        const hasRequiredContent = checkRequiredFields();
+        if (!hasRequiredContent) {
+            price.value = 0;
+            emit('price-update', 0);
+            return;
+        }
+
+        if (!currentModel.value) return;
+
+        const priceParams = buildPriceParams();
+        if (!priceParams) return;
+
+        try {
+            const res = (await queryModelPrice(priceParams)) as PriceQueryResponse;
+            if (res.status === 'ok' && res.data) {
+                price.value = res.data.amount;
+                emit('price-update', price.value);
+            } else {
+                price.value = 0;
+                emit('price-update', 0);
+            }
+        } catch (error) {
+            console.error('价格查询失败:', error);
+            price.value = 0;
+            emit('price-update', 0);
+        }
+    }, 500);
+};
+
+const checkRequiredFields = (): boolean => {
+    if (!currentModel.value) return false;
+
+    const hasPrompt = hasPromptField.value && prompt.value?.trim();
+    const hasUploads = imageFields.value.length > 0 &&
+        imageFields.value.some(f => uploadedFileNames.value[f.name]?.trim());
+
+    return hasPrompt || hasUploads;
+};
+
+// ==================== 模型加载 ====================
+const loadModels = async () => {
+    try {
+        const params: ModelParams = { type: '图生视频' };
+        const res = await AllModel<AllModelResponse, ModelParams>(params);
+        if (res.status === 'ok' && Array.isArray(res.data)) {
+            models.value = res.data;
+            if (models.value.length > 0) {
+                currentModelId.value = models.value[0].id;
+                currentModel.value = models.value[0];
+                initFormData();
+                fetchPrice();
+            }
+        } else {
+            ElMessage.error('获取模型列表失败');
+        }
+    } catch (error) {
+        console.error('加载模型失败:', error);
+        ElMessage.error('加载模型列表失败，请刷新重试');
+    }
+};
+
+const handleModelChange = (modelId: string) => {
+  const selected = models.value.find(m => m.id === modelId);
+  if (selected) {
+    console.log('=== 切换模型 ===');
+    console.log('新模型:', selected.name);
+    console.log('清空的文件:', uploadedFileNames.value);
+    
+    currentModel.value = selected;
+    uploadedFiles.value = {};
+    uploadedFileNames.value = {};
+    initFormData();
+    fetchPrice();
+  }
+};
+// ==================== 监听器 ====================
+watch(
+    () => [configData.value, currentModelId.value],
+    () => {
+        if (currentModel.value) fetchPrice();
+    },
+    { deep: true }
+);
+
+watch(
+    () => [prompt.value, uploadedFileNames.value],
+    () => {
+        const isEmpty = !checkRequiredFields();
+        emit('prompt-change', isEmpty);
+        if (isEmpty) {
+            price.value = 0;
+            emit('price-update', 0);
+        } else {
+            fetchPrice();
+        }
+    },
+    { deep: true, immediate: true }
+);
+
+// ==================== 上传处理 ====================
+const getFileList = (fieldName: string) => {
+    const url = uploadedFiles.value[fieldName];
+    if (url) {
+        return [{ name: fieldName, url }];
+    }
+    return [];
+};
+
+const handleFileChange = (file: UploadFile, fieldName: string) => {
+    // 检查是否已存在该字段的文件
+    if (uploadedFiles.value[fieldName]) {
+        ElMessage.warning('每个字段只能上传一张图片，请先删除已有图片再上传');
+        return;
+    }
+    
+    const url = URL.createObjectURL(file.raw as File);
+    const fileName = file.name;
+    
+    uploadedFiles.value[fieldName] = url;
+    uploadedFileNames.value[fieldName] = fileName;
+    
+    console.log('=== 上传图片 ===');
+    console.log('字段名:', fieldName);
+    console.log('文件名:', fileName);
+    console.log('预览 URL:', url);
+    console.log('提交 URL:', `${IMG_BASE_URL}/${fileName}`);
+    console.log('当前所有上传文件:', uploadedFileNames.value);
+    
+    ElMessage.success('上传成功');
+};
+
+const handleRemove = (fieldName: string) => {
+    uploadedFiles.value[fieldName] = '';
+    uploadedFileNames.value[fieldName] = '';
+    
+    console.log('=== 删除图片 ===');
+    console.log('字段名:', fieldName);
+    console.log('剩余上传文件:', uploadedFileNames.value);
+    
+    ElMessage.info('已移除图片');
+};
+
+const handlePictureCardPreview = (file: UploadFile) => {
+    dialogImageUrl.value = file.url!;
+    dialogVisible.value = true;
+};
+
+const handleDownload = (fieldName: string) => {
+    const url = uploadedFiles.value[fieldName];
+    if (url) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fieldName + '.png';
+        a.click();
+    }
+};
+
+const simulateUpload = () => {
+    ElMessage.info('此处可对接实际音频上传服务');
+    configData.value.audio_file = 'https://example.com/demo_audio.mp3';
+};
+
+// ==================== 生成视频 ====================
+const buildSubmitParams = (): Record<string, unknown> => {
+    const baseParams: Record<string, unknown> = {
+        llmid: currentModel.value!.id,
+    };
+
+    // 添加提示词（如果存在）
+    if (hasPromptField.value && prompt.value) {
+        baseParams.prompt = prompt.value;
+    }
+
+    // 添加上传的文件
+    Object.keys(uploadedFileNames.value).forEach(key => {
+        if (uploadedFileNames.value[key]) {
+            // 使用环境变量中的图片前缀 + 文件名
+            baseParams[key] = `${IMG_BASE_URL}/${uploadedFileNames.value[key]}`;
+            console.log('123',baseParams[key]);
+            
+        }
+    });
+
+    // 添加其他配置字段
+    Object.keys(configData.value).forEach(key => {
+        if (configData.value[key] !== undefined) {
+            const value = configData.value[key];
+            // 确保 audio 字段是布尔值
+            if (key === 'audio_file') {
+                baseParams.audio = Boolean(value);
+            } else {
+                baseParams[key] = value;
+            }
+        }
+    });
+
+    console.log('=== 构建提交参数 ===');
+    console.log('完整参数:', JSON.stringify(baseParams, null, 2));
+    console.log('上传的图片字段:', uploadedFileNames.value);
+    console.log('图片基础 URL:', IMG_BASE_URL);
+
+    return baseParams;
+};
+
+const generate = async (): Promise<boolean> => {
+    if (!currentModel.value) {
+        ElMessage.error('请选择模型');
+        return false;
+    }
+
+    console.log('=== 开始验证必填字段 ===');
+    console.log('当前模型:', currentModel.value.name);
+    console.log('图片文件:', uploadedFileNames.value);
+    console.log('提示词:', prompt.value);
+    console.log('配置数据:', configData.value);
+
+    const missingFields: string[] = [];
+    currentModel.value.input_fields.forEach(field => {
+        if (field.required) {
+            if (field.name === 'prompt') {
+                if (!prompt.value?.trim()) missingFields.push(field.label);
+            } else if (field.uitype === 'image') {
+                if (!uploadedFileNames.value[field.name]?.trim()) missingFields.push(field.label);
+            } else {
+                const val = configData.value[field.name];
+                if (!val) missingFields.push(field.label);
+            }
+        }
+    });
+
+    if (missingFields.length > 0) {
+        console.error('=== 必填字段验证失败 ===');
+        console.error('缺失的字段:', missingFields);
+        ElMessage.error(`请填写必填项：${missingFields.join('、')}`);
+        return false;
+    }
+
+    console.log('=== 必填字段验证通过 ===');
+
+    generating.value = true;
+
+    try {
+        const params = buildSubmitParams();
+        
+        console.log('=== 准备提交接口 ===');
+        console.log('接口路径: /api/llmage/vidu_inference.dspy');
+        console.log('请求参数:', JSON.stringify(params, null, 2));
+        
+        const res = (await imagetovideo(params)) as TextVideoResponse;
+
+        console.log('=== 图生视频接口响应 ===');
+        console.log('响应状态:', res.status);
+        console.log('响应数据:', res.data);
+        console.log('完整响应:', JSON.stringify(res, null, 2));
+
+        let taskid = res.data?.taskid || res.taskid;
+        console.log('提取的 taskid:', taskid);
+
+        if (res.status === 'created' || res.status === 'processing' || res.status === 'queueing') {
+            const statusMsg = res.status === 'created' ? '视频生成任务已提交' : (res.status === 'processing' ? '进行中' : '排队中');
+            console.log('任务状态:', statusMsg);
+            console.log('任务创建成功，等待处理...');
+            ElMessage.success(`${statusMsg}，请稍后在任务列表中查看`);
+
+            if (taskid) {
+                console.log('向上传递 task-created 事件，taskid:', taskid);
+                emit('task-created', taskid);
+            }
+            resetForm();
+            return true;
+        } else {
+            console.error('任务创建失败，状态:', res.status);
+            ElMessage.error(res.message || '生成失败，请重试');
+            return false;
+        }
+    } catch (error) {
+        console.error('=== 生成失败 ===');
+        console.error('错误详情:', error);
+        ElMessage.error(error instanceof Error ? error.message : '生成失败，请重试');
+        return false;
+    } finally {
+        generating.value = false;
+    }
+};
+
+const resetForm = () => {
+  console.log('=== 重置表单 ===');
+  console.log('清空的图片文件:', uploadedFileNames.value);
+  
+  prompt.value = '';
+  uploadedFiles.value = {};
+  uploadedFileNames.value = {};
+  initFormData();
+  price.value = 0;
+  emit('price-update', 0);
+  emit('prompt-change', true);
+};
+// ==================== 暴露给父组件 ====================
+defineExpose({
+    generate,
+    resetForm,
+});
+
+// ==================== 生命周期 ====================
+onMounted(() => {
+    loadModels();
+});
 </script>
+
 <style scoped lang="less">
-:deep(.el-select__wrapper) {
-
-    width: 100% !important;
-    border: none !important;
-    background-color: rgba(0, 0, 0, 0.32) !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    font-size: 14px;
-    color: #fff !important;
-    resize: vertical;
-    outline: none !important;
-    border-radius: 10px !important;
-    color: #fff;
-}
-
-:deep(.el-select__selected-item) {
-    color: #fff !important;
-}
-
-:deep(.el-textarea) {
-
-    .el-textarea__inner {
-
-        border: none !important;
-        background-color: rgba(0, 0, 0, 0.32) !important;
-        box-shadow: none !important;
-        border-radius: 0 !important;
-        padding: 12px 0 !important;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #fff !important;
-        resize: vertical;
-        outline: none !important;
-        border-radius: 10px !important;
-        color: #fff;
-        backdrop-filter: blur(30px);
-        padding: 14px 16px !important;
-
-        &:focus {
-            border: none !important;
-            box-shadow: none !important;
-            outline: none !important;
-        }
-
-        &::placeholder {
-            color: #ffffff7a !important;
-            font-size: 14px;
-        }
-    }
-
-    // 确保没有任何附加的边框或装饰出现
-    .el-input__count {
-        background: transparent;
-        color: #ffffff7a;
-    }
-}
-
-.card {
-    width: 100%;
-    height: 100%;
-    background-color: #1a1c20;
-    border: none;
-    flex: 1;
-    padding: 16px;
-    border-radius: 12px;
-
-    :deep(.el-card__body) {
-        padding: 12px 16px;
-        height: 100%;
-    }
-}
-
-.reference-container {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    height: 100%;
-    color: #fff;
-}
-
-
-.input {
-    width: 100%;
-
-    :deep(.el-input__inner) {
-        background-color: rgba(0, 0, 0, 0.32);
-        border: none;
-        border-radius: 10px;
-        color: #fff;
-        backdrop-filter: blur(30px);
-        padding: 14px 16px;
-        font-size: 14px;
-        line-height: 24px;
-
-        &::placeholder {
-            color: rgba(255, 255, 255, 0.36);
-        }
-
-        &:focus {
-            box-shadow: none;
-            border-color: transparent;
-        }
-    }
-}
-
-.btmcard {
-    width: 100%;
-    height: 100%;
-    background-color: #1a1c20;
-    border: none;
-    margin-top: 16px;
-    padding: 16px;
-    border-radius: 12px;
-
-    :deep(.el-card__body) {
-        padding: 12px 16px;
-    }
-}
-
-.select {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.select-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 0;
-}
-
-.select-title {
-    width: 50%;
-    font-size: 14px;
-    color: #fff;
-    padding-right: 12px;
-}
-
-.select-content {
-    width: 50%;
-    display: flex;
-    gap: 8px;
-}
-
-.radio-group {
-    width: 50%;
-    display: flex;
-    background-color: rgba(255, 255, 255, 0.04);
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.and {
-    color: #ffffff66;
-    margin: 0 4px;
-}
-
-.radio-item {
-    flex: 1;
-    height: 36px;
-    border: none;
-    background: transparent;
-    color: white;
-    font-size: 14px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s;
-}
-
-.radio-item.selected {
-    background-color: rgba(255, 255, 255, 0.08);
-    position: relative;
-}
-
-.radio-item.premium {
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
-    background-image: linear-gradient(to bottom, #7280FF, #DADFFF);
-    font-weight: 600;
-}
+@import url('../../assets/less/Video/text/text.less');
+</style>
 
+<style>
 .custom-select-popup {
     background-color: #2A2D34 !important;
     border-radius: 12px !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
     border: none !important;
-
-
-    .el-select-dropdown__item {
-        color: #ffffff !important;
-        background-color: transparent !important;
-        font-size: 14px !important;
-    }
-
-    .el-select-dropdown__item.selected,
-    .el-select-dropdown__item:hover {
-        background-color: #3a3d46 !important;
-    }
 }
 
-.el-select {
-    .el-input__inner {
-        background-color: #35383F !important;
-        border: none !important;
-        color: #fff !important;
-    }
+.custom-select-popup .el-select-dropdown__item {
+    color: #ffffff !important;
+    background-color: transparent !important;
+    font-size: 14px !important;
+}
 
-    .el-input__suffix-inner {
-        color: #fff !important;
-    }
+.custom-select-popup .el-select-dropdown__item.selected,
+.custom-select-popup .el-select-dropdown__item:hover {
+    background-color: #3a3d46 !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/video/TextVideo.vue b/src/components/video/TextVideo.vue
index 8a0181e..70ac5fe 100644
--- a/src/components/video/TextVideo.vue
+++ b/src/components/video/TextVideo.vue
@@ -128,6 +128,7 @@ import type {
   PriceQueryResponse,
   TextVideoParams,
   TextVideoResponse,
+  ModelParams,
 } from '../../types/model';
 
 // ==================== 事件定义 ====================
@@ -264,8 +265,11 @@ const fetchPrice = () => {
 
 // ==================== 模型加载 ====================
 const loadModels = async () => {
-  try {
-    const res = (await AllModel({})) as AllModelResponse;
+   const Props = {
+    type:'文生视频'
+   }
+  
+    const res = await AllModel<AllModelResponse,ModelParams>(Props);
     if (res.status === 'ok' && Array.isArray(res.data)) {
       models.value = res.data;
       if (models.value.length > 0) {
@@ -277,10 +281,7 @@ const loadModels = async () => {
     } else {
       ElMessage.error('获取模型列表失败');
     }
-  } catch (error) {
-    console.error('加载模型失败:', error);
-    ElMessage.error('加载模型列表失败，请刷新重试');
-  }
+
 };
 
 const handleModelChange = (modelId: string) => {
@@ -341,7 +342,7 @@ const buildSubmitParams = (): TextVideoParams => {
   if (configData.value.size !== undefined && !baseParams.resolution) {
     baseParams.resolution = String(configData.value.size);
   }
-  baseParams.audio = !!configData.value.audio_file;
+  baseParams.audio = Boolean(configData.value.audio_file);
 
   return baseParams;
 };
@@ -389,7 +390,7 @@ const generate = async (): Promise<boolean> => {
       ElMessage.success(`${statusMsg}，请稍后在任务列表中查看`);
       
       if (taskid) {
-        console.log('触发 task-created 事件, taskid:', taskid);
+        console.log('触发 task-created 事件, taskid:', taskid);   
         emit('task-created', taskid);
         console.log('task-created 事件已发送');
       } else {
@@ -400,7 +401,7 @@ const generate = async (): Promise<boolean> => {
       resetForm();
       return true;
     } else {
-      ElMessage.error(res.data?.message || '生成失败，请重试');
+      ElMessage.error(res.message || '生成失败，请重试');
       return false;
     }
   } catch (error) {
@@ -433,7 +434,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-@import url('../../assets/less/Video/text.less');
+@import url('../../assets/less/Video/text/text.less');
 </style>
 
 <style>
diff --git a/src/components/video/VideoLeft.vue b/src/components/video/VideoLeft.vue
index 576a68a..2a3c6fa 100644
--- a/src/components/video/VideoLeft.vue
+++ b/src/components/video/VideoLeft.vue
@@ -17,6 +17,7 @@
           v-else-if="activeTab === 'image'"
           @price-update="handleImagePriceUpdate"
           @prompt-change="handleImagePromptChange"
+          @task-created="handleTaskCreated"
         />
         <TextVideo
           ref="textVideoRef"
@@ -59,13 +60,15 @@ interface TextVideoExposed {
   resetForm: () => void;
 }
 
-/** 图生视频组件暴露的方法（示例，根据实际情况补充） */
+/** 图生视频组件暴露的方法 */
 interface ImgVideoExposed {
+  generate: () => Promise<boolean>;
   resetForm: () => void;
 }
 
-/** 参考生视频组件暴露的方法（示例） */
+/** 参考生视频组件暴露的方法 */
 interface ReferenceVideoExposed {
+  generate?: () => Promise<boolean>;
   resetForm: () => void;
 }
 
@@ -123,7 +126,11 @@ const handleTabChange = (tab: 'reference' | 'image' | 'text') => {
 
 // 创作按钮点击
 const handleCreate = async () => {
-  if (isCreateButtonDisabled.value) return;
+  if (isCreateButtonDisabled.value) {
+    ElMessage.warning('请先填写必要信息');
+    return;
+  }
+
   let result = false;
   switch (activeTab.value) {
     case 'text':
@@ -131,6 +138,18 @@ const handleCreate = async () => {
         result = await textVideoRef.value.generate();
       }
       break;
+    case 'image':
+      if (imgVideoRef.value?.generate) {
+        result = await imgVideoRef.value.generate();
+      }
+      break;
+    case 'reference':
+      if (referenceVideoRef.value?.generate) {
+        result = await referenceVideoRef.value.generate();
+      } else {
+        ElMessage.info('参考生视频功能暂未开放');
+      }
+      break;
     default:
       ElMessage.info('该功能暂未开放');
       break;
@@ -200,7 +219,7 @@ onMounted(() => updateActiveTabFromRoute());
   left: 0;
   width: 100%;
   padding: 16px;
-  background: linear-gradient(180deg, rgba(2, 11, 19, 0) 0%, #0f0f19 100%);
+  // background: linear-gradient(180deg, rgba(2, 11, 19, 0) 0%, #0f0f19 100%);
   // position: relative;
 }
 .create-button {
diff --git a/src/types/model.ts b/src/types/model.ts
index 50c2e8d..3839735 100644
--- a/src/types/model.ts
+++ b/src/types/model.ts
@@ -227,4 +227,9 @@ export interface TaskItem {
   model?: string;
   use_time?: string;
   action?: string;
+}
+
+
+export interface ModelParams {
+  type: string;
 }
\ No newline at end of file