From d69d16e1963c3e20604b6efc8c58030e7ad96fdd Mon Sep 17 00:00:00 2001
From: old burden <hejianbin1995@gmail.com>
Date: Mon, 30 Mar 2026 13:25:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20bug=E4=BF=AE=E6=94=B9=20result=20?=
 =?UTF-8?q?=E5=86=99=E6=88=90=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 portal-ui/src/views/VideoGen.vue | 72 ++++++++++++++++++++++++++------
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/portal-ui/src/views/VideoGen.vue b/portal-ui/src/views/VideoGen.vue
index d704c61..a3b04fa 100644
--- a/portal-ui/src/views/VideoGen.vue
+++ b/portal-ui/src/views/VideoGen.vue
@@ -522,6 +522,9 @@ export default {
 			}).then((res) => {
 				this.generateLoading = false
 				if (res.code == 200) {
+					this.$message.success(
+						'已经提交任务，请等待或者稍后到个人中心查看作品'
+					)
 					this.videoId = res.data.id
 					this.showResult = true
 					this.getVideo(res.data.id)
@@ -532,9 +535,17 @@ export default {
 						content: this.$t('common.balenceLow'),
 						onOk: () => this.$router.push('/recharge')
 					})
+				} else {
+					const reason = res.msg || res.message || '提交失败'
+					this.$message.error(`${reason}，如需帮助请联系管理员`)
 				}
-			}).catch(() => {
+			}).catch((err) => {
 				this.generateLoading = false
+				const tip =
+					typeof err === 'string' && err
+						? err
+						: err?.message || err?.response?.data?.msg || '网络或服务异常，请稍后重试'
+				this.$message.error(`${tip}，如需帮助请联系管理员`)
 			})
 		},
 
@@ -660,13 +671,14 @@ export default {
 	min-height: 100%;
 	gap: 20px;
 	padding: 28px 28px 32px;
+	box-sizing: border-box;
 	background: radial-gradient(120% 80% at 50% -20%, rgba(0, 202, 224, 0.12), transparent 55%),
 		radial-gradient(80% 50% at 100% 30%, rgba(33, 151, 255, 0.08), transparent 45%), var(--vg-ink);
-	box-sizing: border-box;
 }
 
 /* —— Hero —— */
 .vg-hero {
+	flex-shrink: 0;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
@@ -702,14 +714,17 @@ export default {
 .vg-body {
 	display: flex;
 	flex: 1;
+	min-height: 0;
+	max-height: calc(100vh - 200px);
 	gap: 16px;
 	align-items: stretch;
-	min-height: 420px;
 }
 
 .vg-left-rail {
 	flex: 0 0 200px;
 	min-width: 176px;
+	min-height: 0;
+	overflow-y: auto;
 	padding: 18px 14px;
 	background: var(--vg-panel);
 	border: 1px solid var(--vg-border);
@@ -763,11 +778,16 @@ export default {
 .vg-generator {
 	flex: 1;
 	min-width: 280px;
+	min-height: 0;
 	display: flex;
+	overflow: hidden;
 }
 
 .vg-generator-inner {
 	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
@@ -870,7 +890,7 @@ export default {
 
 .rich-editor-container {
 	flex: 1;
-	min-height: 260px;
+	min-height: 180px;
 	margin: 0;
 	display: flex;
 	flex-direction: column;
@@ -879,7 +899,7 @@ export default {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
-		min-height: 280px;
+		min-height: 200px;
 	}
 }
 
@@ -981,22 +1001,28 @@ export default {
 	line-height: 1.5;
 }
 
-/* —— 右侧预览 —— */
+/* —— 右侧预览（收窄宽度、视频限高，内容可滚动） —— */
 .right {
-	flex: 1;
+	flex: 0 1 360px;
+	min-width: 260px;
+	max-width: min(360px, 100%);
+	min-height: 0;
 	background: rgba(0, 0, 0, 0.35);
 	border: 1px solid var(--vg-border);
 	border-radius: 20px;
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	overflow: hidden;
-	min-height: 360px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
 
 	&.has-result {
-		align-items: flex-start;
-		padding: 20px;
+		align-items: stretch;
+		justify-content: flex-start;
+		padding: 16px;
 	}
 }
 
@@ -1031,6 +1057,11 @@ export default {
 	}
 }
 
+.result-container {
+	width: 100%;
+	box-sizing: border-box;
+}
+
 @keyframes vg-pulse {
 	0%,
 	100% {
@@ -1045,11 +1076,18 @@ export default {
 
 .result-video-wrapper {
 	width: 100%;
-	max-width: 720px;
+	max-width: 320px;
+	margin: 0 auto;
 }
 
 .result-video {
+	display: block;
 	width: 100%;
+	max-width: 100%;
+	max-height: min(42vh, 360px);
+	height: auto;
+	object-fit: contain;
+	background: #000;
 	border-radius: 12px;
 }
 
@@ -1063,6 +1101,7 @@ export default {
 @media (max-width: 640px) {
 	.vg-body {
 		flex-direction: column;
+		max-height: none;
 	}
 	.vg-left-rail {
 		flex: none;
@@ -1081,6 +1120,13 @@ export default {
 	.vg-generator {
 		flex: none;
 		width: 100%;
+		max-height: none;
+	}
+	.right {
+		flex: 1 1 auto;
+		max-width: none;
+		min-height: 260px;
+		max-height: min(55vh, 480px);
 	}
 	.vg-hero {
 		flex-direction: column;
@@ -1095,11 +1141,13 @@ export default {
 }
 
 .vg-task-section {
+	flex-shrink: 0;
 	margin-top: 8px;
 	padding: 18px 22px;
 	background: var(--vg-panel);
 	border: 1px solid var(--vg-border);
 	border-radius: 16px;
+	min-height: 0;
 }
 
 .vg-task-head {