From 70ee0e1bba0c041949f1298f0039b521eecb0254 Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Fri, 10 Apr 2026 16:11:08 +0800
Subject: [PATCH] ok

---
 src/assets/less/RightResult/RightResult.less |  2 +-
 src/components/RightResult/RightResult.vue   | 14 +++++++++--
 src/components/img/ImgLeft.vue               | 11 ++++++---
 src/components/video/ImgVideo.vue            | 25 +++++++++++++++++---
 src/components/video/VideoLeft.vue           | 16 +++++++++----
 src/views/login/Login.vue                    | 20 +++++++++++++---
 6 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/src/assets/less/RightResult/RightResult.less b/src/assets/less/RightResult/RightResult.less
index 8a4ea4f..fb8a5e1 100644
--- a/src/assets/less/RightResult/RightResult.less
+++ b/src/assets/less/RightResult/RightResult.less
@@ -147,7 +147,7 @@
         content: '';
         position: absolute;
         inset: 0;
-        background-image: var(--bg-image-url);
+        background-image: var(--bg-image-url, none);
         background-size: cover;
         background-position: center;
         opacity: 0.48;
diff --git a/src/components/RightResult/RightResult.vue b/src/components/RightResult/RightResult.vue
index b5f0091..2071966 100644
--- a/src/components/RightResult/RightResult.vue
+++ b/src/components/RightResult/RightResult.vue
@@ -64,10 +64,10 @@
               <div class="task-prompt-wrapper">
                 <div class="prompt-content">
                   <div class="video-preview">
-                    <div class="preview-bg" :style="{ '--bg-image-url': `url(${task.cover_url})` }">
+                    <div class="preview-bg" :style="getPreviewBgStyle(task.cover_url)">
                       <video
                         :src="task.video_url"
-                        :poster="task.cover_url"
+                        :poster="task.cover_url || ''"
                         class="preview-video"
                         autoplay loop muted playsinline
                       ></video>
@@ -223,6 +223,16 @@ const handleLogin = () => {
  */
 const handleFilterChange = () => {};
 
+const getPreviewBgStyle = (coverUrl?: string) => {
+  if (!coverUrl) {
+    return {};
+  }
+
+  return {
+    '--bg-image-url': `url("${coverUrl}")`
+  };
+};
+
 /**
  * 获取状态显示文本
  * @param status 状态值
diff --git a/src/components/img/ImgLeft.vue b/src/components/img/ImgLeft.vue
index 59aa81d..798110c 100644
--- a/src/components/img/ImgLeft.vue
+++ b/src/components/img/ImgLeft.vue
@@ -21,11 +21,12 @@
     </div>
 </template>
 <script setup lang='ts'>
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import ImgTap from './ImgTap.vue';
 import ReferenceImg from './ReferenceImg.vue';
 import TextImg from './TextImg.vue';
+import { debounce } from '@/utlis/debounce';
 
 const route = useRoute();
 const router = useRouter();
@@ -34,11 +35,11 @@ const router = useRouter();
 const activeTab = ref('reference');
 
 // 处理tab切换
-const handleTabChange = (tab: string) => {
+const handleTabChange = debounce((tab: string) => {
     activeTab.value = tab;
     // 更新路由
     router.push(`/ImgGenerate/${tab}`);
-};
+}, 300);
 
 // 根据路由设置activeTab
 const updateActiveTabFromRoute = () => {
@@ -62,6 +63,10 @@ watch(() => route.path, () => {
 onMounted(() => {
     updateActiveTabFromRoute();
 });
+
+onUnmounted(() => {
+    handleTabChange.cancel();
+});
 </script>
 <style scoped lang='less'>
 .left{
diff --git a/src/components/video/ImgVideo.vue b/src/components/video/ImgVideo.vue
index cf88d3c..44bf7c1 100644
--- a/src/components/video/ImgVideo.vue
+++ b/src/components/video/ImgVideo.vue
@@ -634,23 +634,42 @@ onBeforeUnmount(() => {
 @import url('../../assets/less/Video/text/text.less');
 
 .reference-to-video {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  overflow: visible;
   box-sizing: border-box;
   background-color: #0f1114;
 
   .card {
     margin-bottom: 16px;
-    flex-shrink: 0;
+    flex: 0 0 auto;
+    min-height: fit-content;
   }
 
   .btmcard {
+    flex: 0 0 auto;
+    min-height: fit-content;
     margin-bottom: 0;
+    overflow: visible;
   }
 }
 
+.card :deep(.el-card__body) {
+  height: auto;
+  overflow: visible;
+}
+
+.reference-container {
+  flex: none;
+  overflow: visible;
+}
+
+.select {
+  min-height: max-content;
+}
+
 .image-preview-container {
   position: relative;
   width: 148px;
diff --git a/src/components/video/VideoLeft.vue b/src/components/video/VideoLeft.vue
index 2a3c6fa..35fb514 100644
--- a/src/components/video/VideoLeft.vue
+++ b/src/components/video/VideoLeft.vue
@@ -45,13 +45,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import VideoTab from './VideoTab.vue';
 import Referencevideo from './ReferenceVideo.vue';
 import TextVideo from './TextVideo.vue';
 import ImgVideo from './ImgVideo.vue';
+import { debounce } from '@/utlis/debounce';
 
 // ==================== 子组件暴露的方法类型定义 ====================
 /** 文生视频组件暴露的方法 */
@@ -119,13 +120,13 @@ const isCreateButtonDisabled = computed(() => {
 });
 
 // 切换标签页（类型已明确）
-const handleTabChange = (tab: 'reference' | 'image' | 'text') => {
+const handleTabChange = debounce((tab: 'reference' | 'image' | 'text') => {
   activeTab.value = tab;
   router.push(`/videoGenerate/${tab}`);
-};
+}, 300);
 
 // 创作按钮点击
-const handleCreate = async () => {
+const handleCreate = debounce(async () => {
   if (isCreateButtonDisabled.value) {
     ElMessage.warning('请先填写必要信息');
     return;
@@ -155,7 +156,7 @@ const handleCreate = async () => {
       break;
   }
   return result;
-};
+}, 500);
 
 const emit = defineEmits<{ (e: 'task-created', taskid: string): void }>();
 
@@ -196,6 +197,11 @@ const updateActiveTabFromRoute = () => {
 
 watch(() => route.path, () => updateActiveTabFromRoute());
 onMounted(() => updateActiveTabFromRoute());
+
+onUnmounted(() => {
+  handleTabChange.cancel();
+  handleCreate.cancel();
+});
 </script>
 
 
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index 1c8075c..47b2360 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -26,6 +26,7 @@
         :rules="rules"
         label-width="0px"
         class="login-form"
+          @submit.prevent="submitForm"
       >
         <!-- 手机号 -->
         <el-form-item prop="cellphone">
@@ -34,6 +35,7 @@
             placeholder="请输入手机号"
             :prefix-icon="Iphone"
             size="large"
+            @keyup.enter="submitForm"
           />
         </el-form-item>
 
@@ -46,6 +48,7 @@
               :prefix-icon="Key"
               size="large"
               class="captcha-input"
+              @keyup.enter="submitForm"
             />
             <el-button
               :disabled="countingDown || !validPhone"
@@ -110,6 +113,7 @@ import { ElMessage } from 'element-plus';
 import { Code } from '@/apis/login';
 import type { CodeResult, LoginParams, CaptchaParams } from '@/types/login';
 import { useLoginStore } from '@/store/LoginStore';
+import { debounce } from '@/utlis/debounce';
 
 // 登录Store
 const loginStore = useLoginStore();
@@ -160,7 +164,7 @@ const validPhone = computed(() => {
 });
 
 // 获取验证码
-const handleGetCaptcha = async () => {
+const requestCaptcha = async () => {
   if (countingDown.value) return;
 
   try {
@@ -190,9 +194,12 @@ const handleGetCaptcha = async () => {
   }, 1000);
 };
 
+const handleGetCaptcha = debounce(requestCaptcha, 500);
+
 // 提交表单（登录）
-const submitForm = async () => {
+const doSubmitForm = async () => {
   if (!formRef.value) return;
+  if (loading.value) return;
 
   await formRef.value.validate(async (valid, fields) => {
     if (valid) {
@@ -217,8 +224,10 @@ const submitForm = async () => {
   });
 };
 
+const submitForm = debounce(doSubmitForm, 500);
+
 // 选择账号
-const selectAccount = async (selectedId: string) => {
+const handleSelectAccount = async (selectedId: string) => {
   // 避免重复点击时多次请求
   if (loading.value) return;
   loading.value = true;
@@ -233,6 +242,8 @@ const selectAccount = async (selectedId: string) => {
   }
 };
 
+const selectAccount = debounce(handleSelectAccount, 500);
+
 // 弹窗关闭时的回调（如果用户直接关闭，清空账号列表，避免下次残留）
 const handleDialogClose = () => {
   loginStore.accountList = [];
@@ -241,6 +252,9 @@ const handleDialogClose = () => {
 // 组件卸载时清除定时器
 onUnmounted(() => {
   if (timer) clearInterval(timer);
+  handleGetCaptcha.cancel();
+  submitForm.cancel();
+  selectAccount.cancel();
 });
 </script>