From 1edf9601c0afed4255ee355a44d509e7c1555064 Mon Sep 17 00:00:00 2001
From: old burden <hejianbin1995@gmail.com>
Date: Tue, 31 Mar 2026 13:49:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=BF=E7=85=A7=E5=8D=B3=E6=A2=A6?=
 =?UTF-8?q?=E5=87=BA=E4=B8=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 portal-ui/.env                                |    2 +-
 portal-ui/src/components/VideoComposeCard.vue | 1200 +++++++++++++++++
 portal-ui/src/layout/components/appMain.vue   |    2 +
 portal-ui/src/views/VideoGen.vue              |  995 ++++++++++----
 4 files changed, 1899 insertions(+), 300 deletions(-)
 create mode 100644 portal-ui/src/components/VideoComposeCard.vue

diff --git a/portal-ui/.env b/portal-ui/.env
index 0d31cff..8fa58e4 100644
--- a/portal-ui/.env
+++ b/portal-ui/.env
@@ -4,4 +4,4 @@ VITE_AMAP_SAFE_KEY = 23d3fdbc6b4eaf65d4a82a16510938c9
 VITE_REGISTER_SOURCE = ALL
 #VITE_REGISTER_SOURCE = XM001
 VITE_SHOW_PAY = SUCCESS
-VITE_API_URL = http://111.230.37.169:10009/api
\ No newline at end of file
+VITE_API_URL = http://47.86.170.114:8011/api
\ No newline at end of file
diff --git a/portal-ui/src/components/VideoComposeCard.vue b/portal-ui/src/components/VideoComposeCard.vue
new file mode 100644
index 0000000..6f63c60
--- /dev/null
+++ b/portal-ui/src/components/VideoComposeCard.vue
@@ -0,0 +1,1200 @@
+<template>
+	<div class="vg-compose-card">
+		<!-- 左侧面板 - 根据模式动态渲染 -->
+		<div class="vg-compose-left" v-if="!isTextToVideo">
+			<!-- 首帧模式 -->
+			<div v-if="isFirstFrame" class="vg-first-frame-panel">
+				<div class="vg-panel-title">首帧图</div>
+				<div class="vg-upload-single" @click="openFilePicker">
+					<div v-if="mediaList.length === 0" class="vg-upload-placeholder">
+						<div class="vg-upload-icon">+</div>
+						<div class="vg-upload-text">上传首帧图</div>
+					</div>
+					<div v-else class="vg-compose-media-item">
+						<div class="vg-compose-media-preview">
+							<img :src="mediaList[0].url" alt="" />
+						</div>
+						<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[0])">×</button>
+					</div>
+				</div>
+			</div>
+
+			<!-- 首尾帧模式 -->
+			<div v-else-if="isFirstLastFrame" class="vg-first-last-panel">
+				<div class="vg-panel-title">首帧图</div>
+				<div class="vg-upload-single" @click="openFilePickerFor(0)">
+					<div v-if="!mediaList[0]" class="vg-upload-placeholder">
+						<div class="vg-upload-icon">+</div>
+						<div class="vg-upload-text">上传首帧</div>
+					</div>
+					<div v-else class="vg-compose-media-item">
+						<div class="vg-compose-media-preview">
+							<img :src="mediaList[0].url" alt="" />
+						</div>
+						<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[0])">×</button>
+					</div>
+				</div>
+
+				<div class="vg-panel-title">尾帧图</div>
+				<div class="vg-upload-single" @click="openFilePickerFor(1)">
+					<div v-if="!mediaList[1]" class="vg-upload-placeholder">
+						<div class="vg-upload-icon">+</div>
+						<div class="vg-upload-text">上传尾帧</div>
+					</div>
+					<div v-else class="vg-compose-media-item">
+						<div class="vg-compose-media-preview">
+							<img :src="mediaList[1].url" alt="" />
+						</div>
+						<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[1])">×</button>
+					</div>
+				</div>
+			</div>
+
+			<!-- 参考图模式 -->
+			<div v-else-if="isReference" class="vg-reference-panel">
+				<div class="vg-compose-left-head">
+					<div class="vg-compose-left-title">
+						参考图（{{ mediaList.length }}/{{ maxMediaCount }}）
+					</div>
+					<mf-button class="vg-compose-left-upload" size="small" type="primary" @click="openFilePicker">
+						添加图片
+					</mf-button>
+				</div>
+
+				<div v-if="mediaList.length === 0" class="vg-compose-empty" @click="openFilePicker">
+					<div class="vg-compose-empty-icon" aria-hidden="true">+</div>
+					<div class="vg-compose-empty-text">点击添加参考图</div>
+				</div>
+
+				<div v-else class="vg-compose-media-scroll">
+					<div
+						v-for="(item, index) in mediaList"
+						:key="item.id || item.url"
+						class="vg-compose-media-item"
+						:title="item.name || ''">
+						<div class="vg-compose-media-preview">
+							<img :src="item.url" alt="" />
+						</div>
+						<button
+							type="button"
+							class="vg-compose-remove-btn"
+							@click.stop="removeItem(item)">
+							×
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- 文生视频模式 - 左侧不显示素材 -->
+		<div v-else class="vg-compose-left hidden">
+			<!-- 文生视频无需参考素材 -->
+		</div>
+
+		<div class="vg-compose-right">
+			<div class="vg-compose-right-head">
+				<div class="vg-compose-right-title">描述画面与动态</div>
+				<mf-button size="small" type="text" class="vg-compose-clear" @click="clearAll">
+					清空
+				</mf-button>
+			</div>
+
+			<div class="vg-rich-editor-wrap">
+				<div
+					ref="editorRef"
+					class="vg-compose-textarea vg-rich-editor"
+					contenteditable="true"
+					:data-placeholder="placeholder"
+					@input="onEditorInput"
+					@keydown="onEditorKeydown"
+					@keyup="onEditorKeyup"
+					@click="onEditorClick"></div>
+				<div v-if="mentionVisible" class="vg-mention-panel">
+					<div
+						v-for="item in mentionCandidates"
+						:key="item.key"
+						class="vg-mention-item"
+						@mousedown.prevent="selectMentionItem(item)">
+						<img :src="item.url" alt="" class="vg-mention-thumb" />
+					</div>
+					<div v-if="mentionCandidates.length === 0" class="vg-mention-empty">暂无可引用参考图</div>
+				</div>
+			</div>
+
+			<!-- 选择区域和提交按钮将从父组件传入 -->
+			<slot name="toolbar"></slot>
+		</div>
+
+		<input
+			ref="fileInputRef"
+			class="hidden-input"
+			type="file"
+			:accept="acceptAttr"
+			:multiple="isReference"
+			@change="handleSelectFiles" />
+	</div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { uploadFile, extractUploadUrlFromResponse, PORTAL_TENCENT_COS_UPLOAD_URL } from '@/utils/file'
+
+/** 图生参考：不同参考图最多 4 张（图1–图4），同一 URL 可多次 @ */
+const MAX_REFERENCE_UNIQUE = 4
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: ''
+	},
+	mediaList: {
+		type: Array,
+		default: () => []
+	},
+	maxMediaCount: {
+		type: Number,
+		default: 12
+	},
+	allowedMediaTypes: {
+		type: Array,
+		default: () => ['image', 'video']
+	},
+	placeholder: {
+		type: String,
+		default: ''
+	},
+	videoMode: {
+		type: String,
+		default: 'text-to-video'
+	}
+})
+
+const emit = defineEmits(['update:modelValue', 'update:mediaList'])
+
+const fileInputRef = ref(null)
+const editorRef = ref(null)
+const localPrompt = ref(props.modelValue || '')
+const internalMediaList = ref(Array.isArray(props.mediaList) ? [...props.mediaList] : [])
+const currentUploadIndex = ref(-1) // for first/last frame mode
+const savedSelectionRange = ref(null)
+const mentionVisible = ref(false)
+
+watch(
+	() => props.modelValue,
+	(v) => {
+		if (v !== localPrompt.value) localPrompt.value = v || ''
+		if (editorRef.value) {
+			const current = getEditorPlainText()
+			if ((v || '') !== current) {
+				editorRef.value.innerText = v || ''
+			}
+		}
+	}
+)
+
+watch(
+	() => props.mediaList,
+	(v) => {
+		internalMediaList.value = Array.isArray(v) ? [...v] : []
+	}
+)
+
+// 参考图模式加载本地存储
+watch(() => props.videoMode, (newMode) => {
+	mentionVisible.value = false
+	if (newMode === 'image-reference') {
+		const saved = loadReferenceFromStorage()
+		if (saved.length > 0 && (!internalMediaList.value || internalMediaList.value.length === 0)) {
+			internalMediaList.value = saved
+			emit('update:mediaList', saved)
+		}
+	}
+}, { immediate: true })
+
+onMounted(() => {
+	if (editorRef.value && localPrompt.value) {
+		editorRef.value.innerText = localPrompt.value
+	}
+})
+
+const mediaList = computed(() => internalMediaList.value)
+const mentionCandidates = computed(() =>
+	(mediaList.value || [])
+		.filter((i) => i?.mediaType === 'image' && i?.url)
+		.map((i, idx) => ({
+			key: i.id || i.url || String(idx),
+			url: i.url
+		}))
+)
+
+const isTextToVideo = computed(() => props.videoMode === 'text-to-video')
+const isFirstFrame = computed(() => props.videoMode === 'image-first-frame')
+const isFirstLastFrame = computed(() => props.videoMode === 'image-first-last-frame')
+const isReference = computed(() => props.videoMode === 'image-reference')
+
+const setPrompt = (next) => {
+	localPrompt.value = next
+	emit('update:modelValue', next)
+}
+
+const setMediaList = (next) => {
+	internalMediaList.value = next
+	emit('update:mediaList', next)
+}
+
+const openFilePicker = () => {
+	currentUploadIndex.value = -1
+	fileInputRef.value?.click()
+}
+
+const openFilePickerFor = (index) => {
+	currentUploadIndex.value = index
+	fileInputRef.value?.click()
+}
+
+	const acceptAttr = computed(() => {
+		const types = new Set(props.allowedMediaTypes || [])
+		if (types.has('image') && types.has('video')) return 'image/*,video/*'
+		if (types.has('image')) return 'image/*'
+		if (types.has('video')) return 'video/*'
+		return 'image/*,video/*'
+	})
+
+const detectMediaType = (file) => {
+	const mime = (file?.type || '').toLowerCase()
+	if (mime.startsWith('image/')) return 'image'
+	if (mime.startsWith('video/')) return 'video'
+	const lowerName = (file?.name || '').toLowerCase()
+	if (/\.(png|jpe?g|gif|webp|bmp|svg)$/.test(lowerName)) return 'image'
+	if (/\.(mp4|mov|webm|m4v|avi|mkv|ogg)$/.test(lowerName)) return 'video'
+	return 'image'
+}
+
+const normalizeItemKey = (item) => item?.id || item?.url || String(Date.now())
+
+const removeItem = (item) => {
+	const next = mediaList.value.filter((x) => normalizeItemKey(x) !== normalizeItemKey(item))
+	setMediaList(next)
+	
+	// 参考图模式保存到 localStorage
+	if (isReference.value) {
+		reconcileReferenceMentions(next)
+		saveReferenceToStorage(next)
+	}
+}
+
+const saveReferenceToStorage = (list) => {
+	try {
+		localStorage.setItem('video_reference_images', JSON.stringify(list))
+	} catch (e) {
+		console.warn('Failed to save reference images to localStorage')
+	}
+}
+
+const loadReferenceFromStorage = () => {
+	try {
+		const saved = localStorage.getItem('video_reference_images')
+		if (saved) {
+			return JSON.parse(saved)
+		}
+	} catch (e) {}
+	return []
+}
+
+const clearAll = () => {
+	setMediaList([])
+	setPrompt('')
+	if (editorRef.value) editorRef.value.innerHTML = ''
+	mentionVisible.value = false
+}
+
+	const handleSelectFiles = async (event) => {
+	const input = event.target
+	const files = Array.from(input.files || [])
+	if (!files.length) return
+
+	const isReferenceMode = isReference.value
+	let targetList = [...mediaList.value]
+
+	// 首尾帧模式特殊处理索引
+	if (isFirstLastFrame.value && currentUploadIndex.value >= 0) {
+		const idx = currentUploadIndex.value
+		if (files.length > 0) {
+			const file = files[0]
+			const mediaType = detectMediaType(file)
+			if (mediaType !== 'image') {
+				Message.warning('首尾帧仅支持图片')
+				input.value = ''
+				return
+			}
+			const id = `frame_${Date.now()}`
+			const localPreview = URL.createObjectURL(file)
+			const entry = { id, url: localPreview, mediaType: 'image', name: file.name, _fileRef: file, isUploading: true, label: idx === 0 ? '[首帧]' : '[尾帧]' }
+			targetList[idx] = entry
+		}
+	} else {
+		// 其他模式正常处理
+		const remain = props.maxMediaCount - mediaList.value.length
+		if (remain <= 0 && !isReferenceMode) {
+			Message.warning(`最多添加 ${props.maxMediaCount} 个参考素材`)
+			input.value = ''
+			return
+		}
+
+		const selected = files.slice(0, remain || files.length)
+		const uploadingEntries = []
+
+		for (const file of selected) {
+			const mediaType = detectMediaType(file)
+			if (!props.allowedMediaTypes.includes(mediaType)) {
+				Message.warning(`当前模式不支持该类型：${mediaType}`)
+				continue
+			}
+
+			const id = `tmp_${Date.now()}_${Math.random().toString(16).slice(2)}`
+			const localPreview = URL.createObjectURL(file)
+
+			const entry = {
+				id,
+				url: localPreview,
+				mediaType,
+				name: file.name,
+				_fileRef: file,
+				isUploading: true
+			}
+			uploadingEntries.push(entry)
+		}
+
+		if (uploadingEntries.length) {
+			targetList = [...targetList, ...uploadingEntries]
+		}
+	}
+
+	setMediaList(targetList)
+	await nextTick()
+
+	// 上传处理
+	const toUpload = targetList.filter(item => item.isUploading)
+	for (const entry of toUpload) {
+		try {
+			const res = await uploadFile({
+				url: PORTAL_TENCENT_COS_UPLOAD_URL,
+				file: entry._fileRef,
+				name: 'file'
+			})
+			const url = extractUploadUrlFromResponse(res)
+			if (!url) throw new Error(res?.msg || '未返回文件地址')
+
+			const localPreview = entry.url
+			setMediaList(
+				mediaList.value.map((x) =>
+					normalizeItemKey(x) === normalizeItemKey(entry) 
+						? { ...x, url, isUploading: false } 
+						: x
+				)
+			)
+
+			try {
+				URL.revokeObjectURL(localPreview)
+			} catch (_) {}
+		} catch (err) {
+			setMediaList(mediaList.value.filter((x) => normalizeItemKey(x) !== normalizeItemKey(entry)))
+			Message.error('上传失败，请重试')
+		}
+	}
+
+	input.value = ''
+	currentUploadIndex.value = -1
+}
+
+const onPromptInput = (e) => {
+	setPrompt(e.target.value)
+}
+
+const saveSelection = () => {
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount === 0) return
+	const range = selection.getRangeAt(0)
+	if (editorRef.value?.contains(range.commonAncestorContainer)) {
+		savedSelectionRange.value = range.cloneRange()
+	}
+}
+
+const restoreSelection = () => {
+	const selection = window.getSelection()
+	if (!selection || !editorRef.value) return
+	selection.removeAllRanges()
+	if (savedSelectionRange.value) {
+		selection.addRange(savedSelectionRange.value)
+		return
+	}
+	const range = document.createRange()
+	range.selectNodeContents(editorRef.value)
+	range.collapse(false)
+	selection.addRange(range)
+}
+
+const hasActiveMentionTrigger = () => {
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount === 0) return false
+	const range = selection.getRangeAt(0)
+	if (!range.collapsed) return false
+	const node = range.startContainer
+	if (!editorRef.value?.contains(node) || node.nodeType !== Node.TEXT_NODE) return false
+	const before = node.data.slice(0, range.startOffset)
+	const atIndex = before.lastIndexOf('@')
+	if (atIndex < 0) return false
+	const afterAt = before.slice(atIndex + 1)
+	return !/\s/.test(afterAt)
+}
+
+const removeMentionTrigger = () => {
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount === 0) return
+	const range = selection.getRangeAt(0)
+	if (!range.collapsed) return
+	const node = range.startContainer
+	if (node.nodeType !== Node.TEXT_NODE) return
+	const before = node.data.slice(0, range.startOffset)
+	const atIndex = before.lastIndexOf('@')
+	if (atIndex < 0) return
+	const afterAt = before.slice(atIndex + 1)
+	if (/\s/.test(afterAt)) return
+	const delRange = document.createRange()
+	delRange.setStart(node, atIndex)
+	delRange.setEnd(node, range.startOffset)
+	delRange.deleteContents()
+}
+
+const isBlockElement = (n) =>
+	n &&
+	n.nodeType === Node.ELEMENT_NODE &&
+	['DIV', 'P', 'LI'].includes(n.tagName)
+
+/** 与编辑器 DOM 顺序一致：描述与 [图n] 在文中的位置即用户输入/插入的位置 */
+const getEditorPlainText = () => {
+	const editor = editorRef.value
+	if (!editor) return ''
+	let out = ''
+	const walk = (node) => {
+		if (node.nodeType === Node.TEXT_NODE) {
+			out += node.textContent || ''
+			return
+		}
+		if (node.nodeType !== Node.ELEMENT_NODE) return
+		const el = node
+		if (el.dataset?.mentionReference === '1' && el.dataset?.token) {
+			out += el.dataset.token
+			return
+		}
+		if (el.tagName === 'BR') {
+			out += '\n'
+			return
+		}
+		Array.from(el.childNodes).forEach(walk)
+	}
+	const top = Array.from(editor.childNodes)
+	top.forEach((node, i) => {
+		if (i > 0 && isBlockElement(top[i - 1]) && isBlockElement(node)) {
+			out += '\n'
+		}
+		walk(node)
+	})
+	return out.replace(/\u00a0/g, ' ').replace(/[ \t]+\n/g, '\n').trim()
+}
+
+const getUniqueRefUrlsInDoc = () => {
+	const s = new Set()
+	editorRef.value?.querySelectorAll('.vg-inline-ref[data-mention-reference="1"]').forEach((el) => {
+		const u = el.getAttribute('data-reference-url')
+		if (u) s.add(u)
+	})
+	return s
+}
+
+/** 按文档顺序为不同 URL 分配 图1–图4，并同步 data-token / 展示 */
+const renumberAllReferenceMentions = () => {
+	if (!editorRef.value || !isReference.value) return
+	const refs = Array.from(editorRef.value.querySelectorAll('.vg-inline-ref[data-mention-reference="1"]'))
+	const urlToNo = new Map()
+	let next = 1
+	let droppedExtra = false
+	for (const el of refs) {
+		const u = el.getAttribute('data-reference-url') || ''
+		if (!u) {
+			el.remove()
+			continue
+		}
+		if (!urlToNo.has(u)) {
+			if (next > MAX_REFERENCE_UNIQUE) {
+				el.remove()
+				droppedExtra = true
+				continue
+			}
+			urlToNo.set(u, next++)
+		}
+		const n = urlToNo.get(u)
+		const token = `[图${n}]`
+		el.setAttribute('data-token', token)
+		const imgEl = el.querySelector('.vg-inline-ref-image')
+		if (imgEl) imgEl.alt = token
+	}
+	if (droppedExtra) {
+		Message.warning(`最多 ${MAX_REFERENCE_UNIQUE} 张不同参考图，已移除多余引用`)
+	}
+}
+
+const reconcileReferenceMentions = (nextList) => {
+	if (!editorRef.value) return
+	const allowed = new Set(
+		(nextList || []).filter((x) => x?.mediaType === 'image' && x?.url).map((x) => x.url)
+	)
+	editorRef.value.querySelectorAll('.vg-inline-ref[data-mention-reference="1"]').forEach((el) => {
+		const u = el.getAttribute('data-reference-url') || ''
+		if (!allowed.has(u)) el.remove()
+	})
+	renumberAllReferenceMentions()
+	setPrompt(getEditorPlainText())
+}
+
+/** 文档顺序下首次出现的参考图 URL（对应 图1、图2…） */
+const collectReferenceUrlsInDocOrder = () => {
+	const editor = editorRef.value
+	if (!editor) return []
+	const urls = []
+	const seen = new Set()
+	const walk = (node) => {
+		if (node.nodeType === Node.TEXT_NODE) return
+		if (node.nodeType !== Node.ELEMENT_NODE) return
+		const el = node
+		if (el.dataset?.mentionReference === '1') {
+			const url = el.getAttribute('data-reference-url') || ''
+			if (url && !seen.has(url)) {
+				seen.add(url)
+				urls.push(url)
+			}
+			return
+		}
+		Array.from(el.childNodes).forEach(walk)
+	}
+	Array.from(editor.childNodes).forEach(walk)
+	return urls
+}
+
+/**
+ * 参考图模式提交用：第 1 条必须是 text（整段文案，仅含 [图n]，不含 URL）；
+ * 其后按 图1→图n 顺序各一条 image_url + reference_image。
+ */
+const getImageReferenceContentItems = () => {
+	const text = getEditorPlainText()
+	const first = { type: 'text', text: text || '' }
+	const urls = collectReferenceUrlsInDocOrder()
+	const rest = urls.map((url) => ({
+		type: 'image_url',
+		image_url: { url },
+		role: 'reference_image'
+	}))
+	return [first, ...rest]
+}
+
+const onEditorInput = () => {
+	if (isReference.value) renumberAllReferenceMentions()
+	setPrompt(getEditorPlainText())
+	saveSelection()
+	mentionVisible.value = isReference.value && hasActiveMentionTrigger()
+}
+
+const findClosestMentionInEditor = (el) => {
+	if (!el || !editorRef.value) return null
+	const hit = typeof el.closest === 'function' ? el.closest('.vg-inline-ref[data-mention-reference="1"]') : null
+	return hit && editorRef.value.contains(hit) ? hit : null
+}
+
+const syncAfterReferenceChange = () => {
+	if (isReference.value) renumberAllReferenceMentions()
+	setPrompt(getEditorPlainText())
+	saveSelection()
+}
+
+const onEditorClick = (e) => {
+	if (isReference.value) {
+		const m = findClosestMentionInEditor(e.target)
+		if (m) {
+			e.preventDefault()
+			const sel = window.getSelection()
+			if (sel) {
+				const range = document.createRange()
+				range.selectNode(m)
+				sel.removeAllRanges()
+				sel.addRange(range)
+			}
+			saveSelection()
+			mentionVisible.value = false
+			return
+		}
+	}
+	saveSelection()
+	mentionVisible.value = isReference.value && hasActiveMentionTrigger()
+}
+
+const onEditorKeydown = (e) => {
+	if (!isReference.value || !editorRef.value) return
+	const sel = window.getSelection()
+	if (!sel || sel.rangeCount === 0) return
+	const range = sel.getRangeAt(0)
+	const startEl =
+		range.startContainer.nodeType === Node.TEXT_NODE
+			? range.startContainer.parentElement
+			: range.startContainer
+	const insideMention = findClosestMentionInEditor(startEl)
+	if (insideMention && insideMention.contains(range.startContainer)) {
+		if (e.key === 'Backspace' || e.key === 'Delete') {
+			e.preventDefault()
+			insideMention.remove()
+			syncAfterReferenceChange()
+			return
+		}
+		const navKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Tab']
+		if (!navKeys.includes(e.key) && !e.ctrlKey && !e.metaKey) {
+			e.preventDefault()
+			const r = document.createRange()
+			r.setStartAfter(insideMention)
+			r.collapse(true)
+			sel.removeAllRanges()
+			sel.addRange(r)
+		}
+	}
+
+	if (e.key === 'Backspace' || e.key === 'Delete') {
+		if (!sel.isCollapsed) {
+			const refs = editorRef.value.querySelectorAll('.vg-inline-ref[data-mention-reference="1"]')
+			let removed = false
+			refs.forEach((m) => {
+				if (range.intersectsNode(m)) {
+					m.remove()
+					removed = true
+				}
+			})
+			if (removed) {
+				e.preventDefault()
+				syncAfterReferenceChange()
+				return
+			}
+		}
+		if (e.key === 'Backspace' && sel.isCollapsed) {
+			const n = range.startContainer
+			const off = range.startOffset
+			let toRemove = null
+			if (n.nodeType === Node.TEXT_NODE && off === 0) {
+				const prev = n.previousSibling
+				if (prev && prev.classList?.contains?.('vg-inline-ref')) toRemove = prev
+			} else if (n === editorRef.value && off > 0) {
+				const prev = n.childNodes[off - 1]
+				if (prev && prev.classList?.contains?.('vg-inline-ref')) toRemove = prev
+			} else if (n.nodeType === Node.ELEMENT_NODE && off > 0) {
+				const prev = n.childNodes[off - 1]
+				if (prev && prev.classList?.contains?.('vg-inline-ref')) toRemove = prev
+			}
+			if (toRemove) {
+				e.preventDefault()
+				toRemove.remove()
+				syncAfterReferenceChange()
+				return
+			}
+		}
+		if (e.key === 'Delete' && sel.isCollapsed) {
+			const n = range.startContainer
+			const off = range.startOffset
+			let toRemove = null
+			if (n.nodeType === Node.TEXT_NODE && off === n.length) {
+				const next = n.nextSibling
+				if (next && next.classList?.contains?.('vg-inline-ref')) toRemove = next
+			} else if (n === editorRef.value) {
+				const next = n.childNodes[off]
+				if (next && next.classList?.contains?.('vg-inline-ref')) toRemove = next
+			} else if (n.nodeType === Node.ELEMENT_NODE) {
+				const next = n.childNodes[off]
+				if (next && next.classList?.contains?.('vg-inline-ref')) toRemove = next
+			}
+			if (toRemove) {
+				e.preventDefault()
+				toRemove.remove()
+				syncAfterReferenceChange()
+				return
+			}
+		}
+	}
+}
+
+const onEditorKeyup = (e) => {
+	saveSelection()
+	if (e.key === 'Escape') {
+		mentionVisible.value = false
+		return
+	}
+	mentionVisible.value = isReference.value && hasActiveMentionTrigger()
+}
+
+const selectMentionItem = (item) => {
+	if (!item?.url || !editorRef.value) return
+	const urls = getUniqueRefUrlsInDoc()
+	if (!urls.has(item.url) && urls.size >= MAX_REFERENCE_UNIQUE) {
+		Message.warning(`最多 ${MAX_REFERENCE_UNIQUE} 张不同参考图，无法再插入新图`)
+		mentionVisible.value = false
+		return
+	}
+	editorRef.value.focus()
+	restoreSelection()
+	removeMentionTrigger()
+	saveSelection()
+
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount === 0) return
+	const range = selection.getRangeAt(0)
+	if (!editorRef.value.contains(range.commonAncestorContainer)) return
+
+	const token = '[图?]'
+	const holder = document.createElement('span')
+	holder.className = 'vg-inline-ref'
+	holder.setAttribute('data-mention-reference', '1')
+	holder.setAttribute('data-token', token)
+	holder.setAttribute('data-reference-url', item.url)
+	holder.setAttribute('contenteditable', 'false')
+
+	const img = document.createElement('img')
+	img.src = item.url
+	img.alt = ''
+	img.setAttribute('draggable', 'false')
+	img.setAttribute('contenteditable', 'false')
+	img.className = 'vg-inline-ref-image'
+
+	holder.appendChild(img)
+
+	range.insertNode(holder)
+	// 不在引用后自动加空格，保证导出 text 为 「描述[图1]描述[图2]…」，占位与描述紧挨在用户输入的位置
+	range.setStartAfter(holder)
+	range.collapse(true)
+	selection.removeAllRanges()
+	selection.addRange(range)
+
+	saveSelection()
+	mentionVisible.value = false
+	renumberAllReferenceMentions()
+	setPrompt(getEditorPlainText())
+}
+
+defineExpose({
+	getEditorPlainText,
+	getImageReferenceContentItems,
+	clearPromptOnly: () => {
+		setPrompt('')
+		if (editorRef.value) editorRef.value.innerHTML = ''
+		mentionVisible.value = false
+	}
+})
+</script>
+
+<style scoped lang="less">
+.vg-compose-card {
+	display: flex;
+	gap: 16px;
+	align-items: stretch;
+	background: rgba(22, 24, 30, 0.92);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	border-radius: 18px;
+	padding: 10px;
+	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+	min-height: 240px;
+}
+
+.vg-compose-left {
+	width: 260px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.vg-compose-left.hidden {
+	display: none;
+}
+
+.vg-panel-title {
+	font-size: 13px;
+	font-weight: 600;
+	color: rgba(255, 255, 255, 0.88);
+	margin-bottom: 8px;
+}
+
+.vg-first-frame-panel,
+.vg-first-last-panel,
+.vg-reference-panel {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.vg-upload-single {
+	cursor: pointer;
+}
+
+.vg-upload-placeholder {
+	border: 2px dashed rgba(255, 255, 255, 0.2);
+	border-radius: 12px;
+	padding: 32px 20px;
+	text-align: center;
+	background: rgba(0, 0, 0, 0.22);
+	transition: all 0.2s;
+}
+
+.vg-upload-placeholder:hover {
+	border-color: rgba(0, 202, 224, 0.4);
+	background: rgba(0, 202, 224, 0.03);
+}
+
+.vg-upload-icon {
+	font-size: 32px;
+	color: rgba(0, 202, 224, 0.6);
+	margin-bottom: 8px;
+}
+
+.vg-upload-text {
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.65);
+}
+
+.vg-label {
+	position: absolute;
+	top: 6px;
+	left: 6px;
+	background: rgba(0, 202, 224, 0.9);
+	color: white;
+	font-size: 11px;
+	padding: 1px 6px;
+	border-radius: 10px;
+	z-index: 2;
+	font-weight: 600;
+}
+
+.vg-at-toolbar {
+	margin-top: 8px;
+}
+
+.vg-at-btn {
+	background: rgba(0, 202, 224, 0.1);
+	color: #00cae0;
+	border: 1px solid rgba(0, 202, 224, 0.3);
+	padding: 4px 12px;
+	border-radius: 12px;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.vg-at-btn:hover {
+	background: rgba(0, 202, 224, 0.2);
+}
+
+.vg-compose-left-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+}
+
+.vg-compose-left-title {
+	font-size: 12px;
+	color: rgba(255, 255, 255, 0.7);
+	font-weight: 600;
+}
+
+.vg-compose-left-upload {
+	white-space: nowrap;
+}
+
+.vg-compose-left-upload:deep(.arco-btn) {
+	background: rgba(0, 202, 224, 0.2);
+	border-color: rgba(0, 202, 224, 0.35);
+	color: #7eeaf2;
+}
+
+.vg-compose-left-upload:deep(.arco-btn:hover) {
+	background: rgba(0, 202, 224, 0.28);
+	border-color: rgba(0, 202, 224, 0.45);
+	color: #a8f4f9;
+}
+
+.hidden-input {
+	display: none;
+}
+
+.vg-compose-empty {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	border: 1px dashed rgba(255, 255, 255, 0.18);
+	border-radius: 16px;
+	background: rgba(0, 0, 0, 0.2);
+	min-height: 140px;
+}
+
+.vg-compose-empty-icon {
+	width: 52px;
+	height: 52px;
+	border-radius: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 28px;
+	color: rgba(0, 202, 224, 0.9);
+	border: 1px solid rgba(0, 202, 224, 0.25);
+	background: rgba(0, 202, 224, 0.06);
+}
+
+.vg-compose-empty-text {
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.55);
+	text-align: center;
+	padding: 0 16px;
+	line-height: 1.4;
+}
+
+.vg-compose-media-scroll {
+	flex: 1;
+	overflow-x: auto;
+	overflow-y: hidden;
+	display: flex;
+	gap: 12px;
+	padding: 2px 2px 6px;
+	scroll-snap-type: x mandatory;
+	touch-action: pan-x;
+}
+
+.vg-compose-media-item {
+	width: 96px;
+	height: 96px;
+	scroll-snap-align: start;
+	border-radius: 16px;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	background: rgba(0, 0, 0, 0.22);
+	position: relative;
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.vg-compose-media-preview {
+	width: 100%;
+	height: 100%;
+	background: rgba(2, 6, 23, 0.02);
+
+	img,
+	video {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+}
+
+.vg-compose-remove-btn {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	width: 26px;
+	height: 26px;
+	border-radius: 50%;
+	border: none;
+	background: rgba(15, 23, 42, 0.55);
+	color: #fff;
+	cursor: pointer;
+	font-size: 16px;
+	line-height: 26px;
+	padding: 0;
+}
+
+.vg-compose-uploading-mask {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+	color: rgba(255, 255, 255, 0.95);
+	background: rgba(15, 23, 42, 0.4);
+}
+
+.vg-compose-right {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.vg-compose-toolbar {
+	margin-top: 12px;
+	padding-top: 12px;
+	border-top: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.vg-compose-right-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	margin-bottom: 10px;
+}
+
+.vg-compose-right-title {
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.88);
+	font-weight: 700;
+}
+
+.vg-compose-clear {
+	white-space: nowrap;
+}
+
+.vg-compose-clear:deep(.arco-btn) {
+	color: rgba(255, 255, 255, 0.75);
+}
+
+.vg-compose-clear:deep(.arco-btn:hover) {
+	color: #7eeaf2;
+	background: rgba(0, 202, 224, 0.1);
+}
+
+.vg-compose-textarea {
+	flex: 1;
+	min-height: 150px;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-radius: 16px;
+	padding: 8px 10px;
+	font-size: 14px;
+	line-height: 1.6;
+	color: rgba(255, 255, 255, 0.92);
+	resize: none;
+	outline: none;
+	background: rgba(0, 0, 0, 0.25);
+}
+
+.vg-rich-editor-wrap {
+	position: relative;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 150px;
+}
+
+.vg-rich-editor {
+	white-space: pre-wrap;
+	word-break: break-word;
+	overflow-y: auto;
+	scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.06);
+}
+
+.vg-rich-editor:empty:before {
+	content: attr(data-placeholder);
+	color: rgba(255, 255, 255, 0.4);
+	pointer-events: none;
+}
+
+.vg-rich-editor::selection {
+	background: rgba(0, 202, 224, 0.3);
+	color: rgba(255, 255, 255, 0.98);
+}
+
+.vg-rich-editor :deep(*)::selection {
+	background: rgba(0, 202, 224, 0.3);
+	color: rgba(255, 255, 255, 0.98);
+}
+
+.vg-rich-editor :deep(.vg-inline-ref) {
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 0;
+	margin: 0 2px;
+	padding: 0;
+	border-radius: 8px;
+	border: 1px solid rgba(0, 202, 224, 0.35);
+	background: rgba(0, 0, 0, 0.25);
+	outline: none;
+	user-select: none;
+}
+
+.vg-rich-editor :deep(.vg-inline-ref-image) {
+	display: block;
+	width: auto;
+	height: auto;
+	max-width: 120px;
+	max-height: 72px;
+	object-fit: cover;
+	border-radius: 6px;
+	vertical-align: middle;
+	pointer-events: none;
+}
+
+.vg-mention-panel {
+	position: absolute;
+	left: 8px;
+	right: 8px;
+	bottom: 8px;
+	max-height: 180px;
+	overflow-y: auto;
+	background: rgba(22, 24, 30, 0.98);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	border-radius: 10px;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+	z-index: 20;
+}
+
+.vg-mention-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 10px;
+	cursor: pointer;
+	color: rgba(255, 255, 255, 0.88);
+}
+
+.vg-mention-item:hover {
+	background: rgba(255, 255, 255, 0.06);
+}
+
+.vg-mention-thumb {
+	width: 30px;
+	height: 30px;
+	border-radius: 6px;
+	object-fit: cover;
+}
+
+.vg-mention-label {
+	font-size: 12px;
+	color: rgba(255, 255, 255, 0.88);
+}
+
+.vg-mention-empty {
+	padding: 8px 10px;
+	font-size: 12px;
+	color: rgba(255, 255, 255, 0.45);
+}
+
+.vg-compose-textarea:focus {
+	border-color: rgba(0, 202, 224, 0.55);
+	box-shadow: 0 0 0 3px rgba(0, 202, 224, 0.15);
+}
+
+@media (max-width: 640px) {
+	.vg-compose-card {
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	.vg-compose-left {
+		width: 100%;
+	}
+}
+</style>
+
diff --git a/portal-ui/src/layout/components/appMain.vue b/portal-ui/src/layout/components/appMain.vue
index 330008b..b0df111 100644
--- a/portal-ui/src/layout/components/appMain.vue
+++ b/portal-ui/src/layout/components/appMain.vue
@@ -84,6 +84,8 @@ export default {
 .app-main {
 	position: relative;
 	height: 100%;
+	overflow-y: auto;
+	overflow-x: hidden;
 	&-wrap {
 		height: 100%;
 		overflow: hidden;
diff --git a/portal-ui/src/views/VideoGen.vue b/portal-ui/src/views/VideoGen.vue
index 116556c..21066a0 100644
--- a/portal-ui/src/views/VideoGen.vue
+++ b/portal-ui/src/views/VideoGen.vue
@@ -1,103 +1,131 @@
 <template>
 	<div :class="prefixCls">
-		<header class="vg-hero">
-			<div class="vg-hero-text">
-				<h1 class="vg-hero-title">视频生成</h1>
-				<p class="vg-hero-desc">左侧选择生成模式，编辑描述与参考素材后生成成片</p>
+		<section class="vg-chat-section">
+			<div class="vg-chat-head">
+				<h3 class="vg-chat-title">对话记录</h3>
+				<button type="button" class="vg-task-refresh" @click="refreshChatList">刷新</button>
 			</div>
-		</header>
+
+			<p v-if="!sortedTaskRows.length" class="vg-task-empty">暂无对话，开始生成后将显示在此</p>
+
+			<div
+				v-else
+				class="vg-chat-list"
+				ref="chatListRef"
+				@scroll="onChatScroll">
+				<div
+					v-for="row in sortedTaskRows"
+					:key="row.id"
+					class="vg-chat-block">
+					<!-- 用户输入部分 -->
+					<div class="vg-chat-user-section">
+						<div class="vg-chat-user-text">
+							<template v-for="(seg, idx) in getRowPromptSegments(row)" :key="`${row.id || 'row'}_${idx}`">
+								<span v-if="seg.type === 'text'">{{ seg.text }}</span>
+								<img
+									v-else
+									class="vg-chat-inline-ref-image"
+									:src="seg.url"
+									:alt="seg.token || ''" />
+							</template>
+						</div>
+
+						<div class="vg-chat-time">{{ formatCreateTime(row.createTime) }}</div>
+					</div>
+
+					<!-- 分隔线 -->
+					<div class="vg-chat-divider"></div>
+
+					<!-- AI响应部分（视频结果） -->
+					<div class="vg-chat-ai-section">
+						<div class="vg-chat-ai-top">
+							<div class="vg-chat-ai-status">
+								{{ taskStatusText(row) }}
+							</div>
+							<div class="vg-chat-ai-time">{{ formatCreateTime(row.updateTime || row.createTime) }}</div>
+						</div>
+
+						<div v-if="row.status === 0" class="vg-chat-loading">
+							生成中，请稍后…
+						</div>
+
+						<div
+							v-else-if="row.status === 1 && row.result && isHttpOrHttpsUrl(row.result)"
+							class="vg-chat-result">
+							<video
+								v-if="isVideoUrl(row.result)"
+								:src="row.result"
+								controls
+								preload="metadata" />
+							<div v-else class="vg-chat-result-link">
+								<a :href="row.result" target="_blank" rel="noreferrer">查看结果</a>
+							</div>
+						</div>
+
+						<div
+							v-else-if="row.status === 1 && row.result && !isHttpOrHttpsUrl(row.result)"
+							class="vg-chat-loading">
+							执行任务中，请稍后…
+						</div>
+
+						<div v-else-if="row.status === 1 && !row.result" class="vg-chat-loading">
+							执行任务中，请稍后…
+						</div>
+
+						<div v-else class="vg-chat-failed">
+							生成失败或已取消
+						</div>
+
+						<div class="vg-chat-ai-actions">
+							<button
+								type="button"
+								class="vg-link"
+								v-if="row.result && row.status === 0"
+								@click="cancelRowTask(row)">
+								取消
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-if="chatLoadingMore" class="vg-chat-loadmore">
+				加载更多…
+			</div>
+		</section>
 
 		<div class="vg-body">
-			<!-- 最左：生成模式 -->
-			<aside class="vg-left-rail">
-				<p class="vg-rail-title">生成模式</p>
-				<ul class="vg-mode-list" role="list">
-					<li
-						v-for="opt in videoModeOptions"
-						:key="opt.value"
-						:class="['vg-mode-item', { active: videoMode === opt.value }]"
-						role="listitem"
-						@click="pickVideoMode(opt.value)">
-						{{ opt.label }}
-					</li>
-				</ul>
-			</aside>
-
 			<!-- 中间：生成器 -->
 			<div class="vg-generator">
 				<div class="vg-generator-inner">
-					<!-- 参考上传区（图生视频）；文生视频时显示轻量占位 -->
-					<div class="vg-refs">
-						<div class="vg-ref-group">
-							<div class="vg-ref-bg" />
-							<div v-if="isImageVideoMode" class="vg-ref-content">
-								<div class="vg-ref-tilt">
-									<div class="upload-inner">
-										<template v-if="videoMode === 'image-reference'">
-											<div class="upload-title">
-												<div class="upload-title-left">参考图</div>
-												<div class="upload-title-tip">
-													请使用下方编辑器工具栏「插入参考素材」添加图片（此处不再单独上传）
-												</div>
-											</div>
-										</template>
-										<template v-else>
-											<div class="upload-title">
-												<div class="upload-title-left">
-													{{ imageUploadPrimaryLabel }}
-												</div>
-												<div class="upload-title-tip">
-													{{ $t('common.uploadImageTip') || '支持PNG/JPG，最大10MB' }}
-												</div>
-											</div>
-											<mf-image-upload
-												listType="picture-card"
-												uploadHeight="140px"
-												:show-file-list="false"
-												:content="$t('common.uploadFirstPlaceholder') || '点击上传'"
-												v-model="firstUrl" />
-											<div class="last-frame" v-if="videoMode === 'image-first-last-frame'">
-												<div class="upload-title-left">
-													{{ $t('common.uploadLastPlaceholder') || '尾帧（可选）' }}
-												</div>
-												<mf-image-upload
-													listType="picture-card"
-													uploadHeight="100px"
-													:show-file-list="false"
-													:content="$t('common.uploadLastPlaceholder') || '上传尾帧'"
-													v-model="lastUrl" />
-											</div>
-										</template>
-									</div>
-								</div>
-							</div>
-							<div v-else class="vg-ref-placeholder">
-								<div class="vg-ref-placeholder-icon" aria-hidden="true">
-									<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 20a1.2 1.2 0 0 0 2.4 0v-6.8H20a1.2 1.2 0 1 0 0-2.4h-6.8V4a1.2 1.2 0 0 0-2.4 0v6.8H4a1.2 1.2 0 0 0 0 2.4h6.8V20Z" fill="currentColor" />
-									</svg>
-								</div>
-								<p class="vg-ref-placeholder-text">切换到「图生视频」可上传参考图</p>
-							</div>
-						</div>
-					</div>
-
 					<div class="vg-main-column">
-						<div class="rich-editor-container">
-							<VideoRichEditor
-								ref="videoRichEditor"
-								:show-toolbar="videoMode === 'image-reference'"
-								@text-change="onVideoEditorTextChange"
-								:placeholder="
-									$t('common.textVideoPlaceholder') ||
-									'描述画面与动态，例如：阳光下的女孩在海边起舞…'
-								"
-							/>
-						</div>
+						<VideoComposeCard
+							ref="videoComposeRef"
+							v-model="promptText"
+							v-model:mediaList="mediaList"
+							:max-media-count="maxMediaCount"
+							:allowed-media-types="allowedMediaTypes"
+							:placeholder="
+								$t('common.textVideoPlaceholder') ||
+								'描述画面与动态，例如：阳光下的女孩在海边起舞…'
+							"
+							:video-mode="videoMode">
+							<template #toolbar>
+								<div class="vg-toolbar">
 
-						<div class="vg-toolbar">
 							<div class="vg-toolbar-settings">
 								<div class="vg-params-row">
+									<div class="vg-param">
+										<span class="vg-param-label">生成模式</span>
+										<a-select
+											v-model="videoMode"
+											class="vg-param-select"
+											placeholder="请选择模式"
+											@change="pickVideoMode">
+											<a-option v-for="opt in videoModeOptions" :key="opt.value" :value="opt.value">
+												{{ opt.label }}
+											</a-option>
+										</a-select>
+									</div>
 									<div class="vg-param">
 										<span class="vg-param-label">模型</span>
 										<a-select
@@ -148,80 +176,21 @@
 									</span>
 								</button>
 							</div>
-						</div>
+								</div>
+							</template>
+						</VideoComposeCard>
 
-						<div class="vg-submit-hint">
-							{{
-								price
-									? `${$t('common.createVideo', { price: price })} · ${$t('common.generateTip') || '生成将消耗余额'}`
-									: $t('common.generateTip') || '生成视频需要消耗余额'
-							}}
-						</div>
 					</div>
 				</div>
 			</div>
 
-			<!-- 右侧预览 -->
-			<div class="right" :class="{ 'has-result': showResult }">
-				<div v-if="!showResult" class="empty-state">
-					<div class="empty-visual">
-						<div class="empty-ring" />
-						<img src="/images/empty-video.png" alt="" />
-					</div>
-					<p>生成的视频将在这里显示</p>
-				</div>
-
-				<div v-else class="result-container">
-					<div class="result-video-wrapper">
-						<video
-							v-if="videoUrl"
-							:src="videoUrl"
-							controls
-							autoplay
-							class="result-video"
-							:poster="posterUrl">
-							您的浏览器不支持视频播放。
-						</video>
-					</div>
-
-					<div class="result-actions">
-						<mf-button v-if="canCancel" @click="cancelTask" type="danger"> 取消任务 </mf-button>
-						<mf-button @click="saveVideo" :disabled="!videoUrl">
-							<a-image src="/images/btn_save.png" /> 保存视频
-						</mf-button>
-						<mf-button @click="closeResult">
-							<a-image src="/images/btn_close.png" /> 关闭
-						</mf-button>
-					</div>
-				</div>
-			</div>
 		</div>
-
-		<section class="vg-task-section">
-			<div class="vg-task-head">
-				<h3 class="vg-task-title">我的视频任务</h3>
-				<button type="button" class="vg-task-refresh" @click="loadTaskList">刷新</button>
-			</div>
-			<p v-if="!taskRows.length" class="vg-task-empty">暂无任务，生成后将显示在此</p>
-			<ul v-else class="vg-task-list">
-				<li v-for="row in taskRows" :key="row.id" class="vg-task-item">
-					<div class="vg-task-meta">
-						<span class="vg-task-id">{{ row.result || '—' }}</span>
-						<span class="vg-task-st">{{ taskStatusText(row) }}</span>
-					</div>
-					<div class="vg-task-actions">
-						<button type="button" class="vg-link" v-if="row.result && row.status === 0" @click="cancelRowTask(row)">
-							取消
-						</button>
-					</div>
-				</li>
-			</ul>
-		</section>
 	</div>
 </template>
 
 <script>
-import VideoRichEditor from '@/components/VideoRichEditor.vue'
+import { mapGetters } from 'vuex'
+import VideoComposeCard from '@/components/VideoComposeCard.vue'
 
 const REFERENCE_DRAFT_STORAGE_KEY = 'portalVideoGen_referenceDraft_v1'
 
@@ -230,15 +199,15 @@ export default {
 	data() {
 		return {
 			prefixCls: 'video-gen',
-			videoMode: 'text-to-video',
+			videoMode: 'image-reference',
 			videoModeOptions: [
 				{ value: 'text-to-video', label: '文生视频' },
 				{ value: 'image-first-frame', label: '图生视频 · 首帧' },
 				{ value: 'image-first-last-frame', label: '图生视频 · 首尾帧' },
 				{ value: 'image-reference', label: '图生视频 · 参考图' }
 			],
-			firstUrl: '',
-			lastUrl: '',
+			promptText: '',
+			mediaList: [],
 			editorVisualTick: 0,
 			interval: null,
 			videoUrl: null,
@@ -253,50 +222,87 @@ export default {
 			durationOptions: [],
 			resolutionOptions: [],
 			selectedModel: '',
-			selectedRatio: '',
+			selectedRatio: '16:9',
 			selectedDuration: null,
 			selectedResolution: '',
 			// 每 30 秒查询任务状态，最多 30 次（约 15 分钟）
 			maxPollAttempts: 30,
 			pollIntervalMs: 30000,
-			taskRows: []
+			taskRows: [],
+
+			// 对话历史分页加载（仅用于对话记录区域）
+			chatPageNum: 1,
+			chatPageSize: 10,
+			chatMaxTotal: 50,
+			chatLoadingMore: false,
+			chatHasMore: true,
+			chatMaxHintShown: false
 		}
 	},
 	components: {
-		VideoRichEditor
+		VideoComposeCard
 	},
 	computed: {
 		canCancel() {
 			return !!this.videoId && !this.videoUrl
 		},
-		isImageVideoMode() {
-			return this.videoMode !== 'text-to-video'
+		maxMediaCount() {
+			if (this.videoMode === 'image-first-frame') return 1
+			if (this.videoMode === 'image-first-last-frame') return 2
+			if (this.videoMode === 'image-reference') return 9
+			return 12
 		},
-		imageUploadPrimaryLabel() {
-			if (this.videoMode === 'image-reference') return '上传参考图'
-			if (this.videoMode === 'image-first-last-frame') return '上传首帧'
-			return this.$t('common.uploadFirstImage') || '上传首帧'
+		allowedMediaTypes() {
+			if (this.videoMode === 'image-first-frame' || this.videoMode === 'image-first-last-frame') return ['image']
+			if (this.videoMode === 'image-reference') return ['image']
+			return ['image', 'video']
 		},
 		posterUrl() {
-			void this.editorVisualTick
-			if (this.videoMode === 'image-reference') {
-				const url = this.firstReferenceImageUrlFromEditor()
-				return url || ''
-			}
-			const f = this.firstUrl
-			if (!f) return ''
-			return typeof f === 'object' ? (f.url || '') : f
+			const list = Array.isArray(this.mediaList) ? this.mediaList : []
+			const firstImage = list.find((i) => i?.mediaType === 'image') || list[0]
+			if (!firstImage?.url) return ''
+			// 预览封面主要用于参考图/首帧类模式
+			if (this.videoMode === 'image-reference') return firstImage.url
+			if (this.videoMode === 'image-first-frame' || this.videoMode === 'image-first-last-frame') return firstImage.url
+			return ''
+		},
+		sortedTaskRows() {
+			const list = Array.isArray(this.taskRows) ? this.taskRows : []
+			return [...list].sort((a, b) => {
+				const at = this.parseDateTimeToMs(a?.createTime)
+				const bt = this.parseDateTimeToMs(b?.createTime)
+				// 升序：对话越往下越新（底部最新）
+				if (at !== bt) return at - bt
+				// createTime 相同：id 小的更旧，排前；id 大的更新，排后
+				return Number(a?.id || 0) - Number(b?.id || 0)
+			})
+		},
+		...mapGetters(['token'])
+	},
+	watch: {
+		token(newVal, oldVal) {
+			if (!newVal || newVal === oldVal) return
+			// 登录成功（token 从无到有或切换账号）后补拉依赖鉴权的接口
+			this.loadInitialData()
 		}
 	},
 	mounted() {
-		this.loadPriceInfo()
-		this.loadTaskList()
-		this.loadVideoParams()
+		this.loadInitialData()
 	},
 	beforeUnmount() {
 		this.destroyInterval()
 	},
 	methods: {
+		loadInitialData() {
+			this.loadPriceInfo()
+			this.loadTaskList(true).then(() => {
+				this.$nextTick(() => {
+					this.scrollChatToBottom()
+				})
+			})
+			this.loadVideoParams()
+		},
+
 		plainPromptText() {
 			return this.$refs.videoRichEditor?.getPlainText?.() || ''
 		},
@@ -351,46 +357,273 @@ export default {
 		},
 
 		pickVideoMode(m) {
-			if (this.videoMode === 'image-reference') {
-				this.saveReferenceDraftFromEditor()
-			}
 			this.videoMode = m
-			this.firstUrl = ''
-			this.lastUrl = ''
-			this.$nextTick(() => {
-				if (m === 'image-reference') {
-					this.restoreReferenceDraftToEditor()
-				} else {
-					this.$refs.videoRichEditor?.clear?.()
+			// 切换生成模式后清空参考素材，避免不同后端入参结构混用
+			this.mediaList = []
+		},
+
+		async loadTaskList(reset = false) {
+			try {
+				if (reset) {
+					this.chatPageNum = 1
+					this.chatHasMore = true
+					this.chatMaxHintShown = false
+					this.chatLoadingMore = false
+					this.taskRows = []
 				}
-				this.bumpEditorVisualTick()
+
+				if (!this.chatHasMore || this.chatLoadingMore) return
+
+				const pageNum = this.chatPageNum
+				const pageSize = this.chatPageSize
+				this.chatLoadingMore = true
+
+				const res = await this.$axios({
+					url: 'api/portal/video/tasks',
+					method: 'GET',
+					data: { pageNum, pageSize }
+				})
+
+				const newRows = res.code === 200 ? res.rows || [] : []
+
+				// 合并去重（按 id）
+				const existMap = new Map((this.taskRows || []).map((x) => [x.id, x]))
+				for (const row of newRows) {
+					if (!row || row.id == null) continue
+					if (existMap.has(row.id)) {
+						existMap.set(row.id, { ...existMap.get(row.id), ...row })
+					} else {
+						existMap.set(row.id, row)
+					}
+				}
+
+				const merged = Array.from(existMap.values())
+				// 始终保留“最新的最多 50 条”，避免向上翻页时截断造成顺序/条数错乱
+				this.taskRows = merged
+					.sort(
+						(a, b) =>
+							(this.parseDateTimeToMs(b?.createTime) -
+								this.parseDateTimeToMs(a?.createTime)) ||
+							(Number(b?.id || 0) - Number(a?.id || 0))
+					)
+					.slice(0, this.chatMaxTotal)
+
+				// 更新分页状态
+				if (this.taskRows.length >= this.chatMaxTotal) {
+					this.chatHasMore = false
+				} else {
+					if (newRows.length < pageSize) this.chatHasMore = false
+					this.chatPageNum = pageNum + 1
+				}
+			} catch (_) {
+				/* 未登录等忽略 */
+			} finally {
+				this.chatLoadingMore = false
+			}
+		},
+
+		async onChatScroll(e) {
+			const el = e?.target
+			if (!el) return
+			if (this.chatLoadingMore) return
+			// 向上滚动加载更早历史：滚到顶部附近（60px 内）触发下一页
+			if (el.scrollTop > 60) return
+
+			if (this.taskRows.length >= this.chatMaxTotal) {
+				if (!this.chatMaxHintShown) {
+					this.chatMaxHintShown = true
+					this.$message.warning(`最多加载 ${this.chatMaxTotal} 条历史数据`)
+				}
+				this.chatHasMore = false
+				return
+			}
+			// 记录旧高度，避免加载更多后用户位置跳动
+			const prevScrollHeight = el.scrollHeight
+			const prevScrollTop = el.scrollTop
+			await this.loadTaskList(false)
+			this.$nextTick(() => {
+				const newScrollHeight = el.scrollHeight
+				const diff = newScrollHeight - prevScrollHeight
+				// 保持相对视口位置：滚动高度增加多少，就把 scrollTop 增加多少
+				el.scrollTop = diff >= 0 ? prevScrollTop + diff : prevScrollTop
 			})
 		},
 
-		async loadTaskList() {
+		// 轮询成功/失败/取消后，只刷新第一页数据，避免把用户已滚动加载的历史重置回 10 条
+		async refreshChatFirstPage() {
 			try {
 				const res = await this.$axios({
 					url: 'api/portal/video/tasks',
 					method: 'GET',
-					data: { pageNum: 1, pageSize: 30 }
+					data: { pageNum: 1, pageSize: this.chatPageSize }
 				})
-				if (res.code === 200 && res.rows) this.taskRows = res.rows
+				const newRows = res.code === 200 ? res.rows || [] : []
+				const existMap = new Map((this.taskRows || []).map((x) => [x.id, x]))
+				for (const row of newRows) {
+					if (!row || row.id == null) continue
+					if (existMap.has(row.id)) {
+						existMap.set(row.id, { ...existMap.get(row.id), ...row })
+					} else {
+						existMap.set(row.id, row)
+					}
+				}
+				this.taskRows = Array.from(existMap.values())
+					.sort(
+						(a, b) =>
+							(this.parseDateTimeToMs(b?.createTime) -
+								this.parseDateTimeToMs(a?.createTime)) ||
+							(Number(b?.id || 0) - Number(a?.id || 0))
+					)
+					.slice(0, this.chatMaxTotal)
 			} catch (_) {
-				/* 未登录等忽略 */
+				/* ignore */
 			}
 		},
 
+		async refreshChatList() {
+			await this.loadTaskList(true)
+			this.$nextTick(() => {
+				this.scrollChatToBottom()
+			})
+		},
+
+		scrollChatToBottom() {
+			const el = this.$refs.chatListRef
+			if (!el) return
+			el.scrollTop = el.scrollHeight
+		},
+
 		taskStatusText(row) {
-			if (row.status === 1) return '已完成'
+			if (row.status === 1 && row.result && this.isHttpOrHttpsUrl(row.result)) return '已完成'
+			if (row.status === 1) return '执行任务中'
 			if (row.status === 2) return '已失败/已取消'
 			return '进行中'
 		},
 
+		parseDateTimeToMs(value) {
+			if (!value) return 0
+			const ms = new Date(value).getTime()
+			return Number.isFinite(ms) ? ms : 0
+		},
+
+		formatCreateTime(value) {
+			const ms = this.parseDateTimeToMs(value)
+			if (!ms) return ''
+			return new Date(ms).toLocaleString()
+		},
+
+		/** 对话结果是否为可访问的 http(s) 链接（任务 id 等非 URL 不视为已完成） */
+		isHttpOrHttpsUrl(value) {
+			const u = String(value || '').trim()
+			return /^https?:\/\//i.test(u)
+		},
+
+		isVideoUrl(url) {
+			const u = String(url || '')
+			if (!u) return false
+			return /\.(mp4|webm|mov|ogg|m4v|avi|mkv)(\?.*)?$/i.test(u)
+		},
+
+		getRowAttachmentList(row) {
+			const list = []
+			if (row?.img1) list.push(row.img1)
+			if (row?.img2 && row.img2 !== row.img1) list.push(row.img2)
+
+			// text-to-video：附件 url 可能落在 videoParams.content 里
+			if (!list.length && row?.videoParams) {
+				try {
+					const vp = typeof row.videoParams === 'string' ? JSON.parse(row.videoParams) : row.videoParams
+					const content = vp?.content
+					if (Array.isArray(content)) {
+						for (const item of content) {
+							const url = item?.image_url?.url
+							if (url) list.push(url)
+						}
+					}
+				} catch (_) {
+					// ignore parse error
+				}
+			}
+
+			return list
+				.filter((url) => !!url)
+				.map((url) => ({
+					url,
+					mediaType: this.isVideoUrl(url) ? 'video' : 'image'
+				}))
+		},
+
+		getRowReferenceImageUrls(row) {
+			const urls = []
+			if (!row?.videoParams) return urls
+			try {
+				const vp = typeof row.videoParams === 'string' ? JSON.parse(row.videoParams) : row.videoParams
+				const content = Array.isArray(vp?.content) ? vp.content : []
+				for (const item of content) {
+					if (item?.type !== 'image_url') continue
+					if (item?.role && item.role !== 'reference_image') continue
+					const url = item?.image_url?.url
+					if (url) urls.push(url)
+				}
+			} catch (_) {
+				// ignore parse error
+			}
+			return urls
+		},
+
+		getRowPromptSegments(row) {
+			const rawText = row?.text || '—'
+			const text = String(rawText)
+			const mode = String(row?.mode || '').trim()
+			if (mode === 'image-first-frame') {
+				const segs = []
+				if (row?.img1) segs.push({ type: 'image', url: row.img1, token: '[首帧]' })
+				segs.push({ type: 'text', text })
+				return segs
+			}
+			if (mode === 'image-first-last-frame') {
+				const segs = []
+				if (row?.img1) segs.push({ type: 'image', url: row.img1, token: '[首帧]' })
+				segs.push({ type: 'text', text })
+				if (row?.img2) segs.push({ type: 'image', url: row.img2, token: '[尾帧]' })
+				return segs
+			}
+
+			// 参考图模式：按 [图n] 替换为对应 reference_image
+			const refs = this.getRowReferenceImageUrls(row)
+			if (!refs.length) {
+				return [{ type: 'text', text }]
+			}
+			const tokenReg = /\[图(\d+)\]/g
+			const segments = []
+			let last = 0
+			let m
+			while ((m = tokenReg.exec(text)) !== null) {
+				const token = m[0]
+				const idx = Number(m[1]) - 1
+				const start = m.index
+				if (start > last) {
+					segments.push({ type: 'text', text: text.slice(last, start) })
+				}
+				const url = idx >= 0 ? refs[idx] : ''
+				if (url) {
+					segments.push({ type: 'image', url, token })
+				} else {
+					segments.push({ type: 'text', text: token })
+				}
+				last = start + token.length
+			}
+			if (last < text.length) {
+				segments.push({ type: 'text', text: text.slice(last) })
+			}
+			return segments.length ? segments : [{ type: 'text', text }]
+		},
+
 		async cancelRowTask(row) {
 			const tid = row.result
 			if (!tid) return
 			await this.cancelTaskById(tid)
-			await this.loadTaskList()
+			await this.refreshChatFirstPage()
 		},
 
 		async loadPriceInfo() {
@@ -422,7 +655,9 @@ export default {
 				} else if (this.modelOptions.length) {
 					this.selectedModel = this.modelOptions[0].value
 				}
-				if (d.ratio && this.ratioOptions.includes(d.ratio)) {
+				if (this.ratioOptions.includes('16:9')) {
+					this.selectedRatio = '16:9'
+				} else if (d.ratio && this.ratioOptions.includes(d.ratio)) {
 					this.selectedRatio = d.ratio
 				} else if (this.ratioOptions.length) {
 					this.selectedRatio = this.ratioOptions[0]
@@ -444,47 +679,23 @@ export default {
 		},
 
 		async generateVideo() {
-			if (this.generateLoading) {
+			if (this.generateLoading) return
+
+			const prompt = (this.promptText || '').trim()
+			const text = prompt || '一个优雅的女孩在阳光下跳舞'
+			const list = Array.isArray(this.mediaList) ? this.mediaList : []
+			if (list.some((x) => x && x.isUploading)) {
+				this.$message.warning('素材正在上传中，请稍后再生成')
 				return
 			}
-			const plain = this.plainPromptText()
-			const text = plain || '一个优雅的女孩在阳光下跳舞'
-
-			if (this.isImageVideoMode) {
-				if (this.videoMode === 'image-reference') {
-					if (!this.firstReferenceImageUrlFromEditor()) {
-						this.$message.error('请通过编辑器工具栏「插入参考素材」添加参考图')
-						return
-					}
-				} else {
-					const firstImageUrl = typeof this.firstUrl === 'object' ? this.firstUrl?.url : this.firstUrl
-					if (!firstImageUrl) {
-						this.$message.error(this.$t('common.uploadFirstImageError') || '请上传首帧图')
-						return
-					}
-					if (this.videoMode === 'image-first-last-frame') {
-						const last = typeof this.lastUrl === 'object' ? this.lastUrl?.url : this.lastUrl
-						if (!last) {
-							this.$message.error('请上传尾帧图')
-							return
-						}
-					}
-				}
-			} else {
-				const contentItems = this.$refs.videoRichEditor?.getContentItems?.() || []
-				if (!plain && (!contentItems.length || !contentItems.some((i) => i.type === 'image_url'))) {
-					this.$message.error('请输入视频描述文本或插入参考素材')
-					return
-				}
-			}
+			const attachments = list.filter((x) => x && x.url)
 
 			if (!this.selectedModel || !this.selectedRatio || this.selectedDuration == null || !this.selectedResolution) {
 				this.$message.error('请选择模型、比例、时长与分辨率')
 				return
 			}
 
-			this.generateLoading = true
-
+			// 组装入参：只依赖 promptText + mediaList
 			const params = {
 				text,
 				functionType: '21',
@@ -495,12 +706,87 @@ export default {
 			}
 
 			if (this.videoMode === 'text-to-video') {
-				const contentItems = this.$refs.videoRichEditor?.getContentItems?.() || []
+				if (!prompt && attachments.length === 0) {
+					this.$message.error('请输入视频描述或添加参考素材')
+					return
+				}
+				const contentItems = []
+				if (prompt) {
+					contentItems.push({
+						type: 'text',
+						text: prompt
+					})
+				}
+				if (attachments.length) {
+					contentItems.push(
+						...attachments.map((item) => ({
+							type: 'image_url',
+							image_url: { url: item.url },
+							role: 'reference_image'
+						}))
+					)
+				}
 				if (contentItems.length) {
 					params.content = contentItems
 				}
 			}
 
+			if (this.videoMode === 'image-first-frame') {
+				const first = attachments[0]
+				if (!first) {
+					this.$message.error(this.$t('common.uploadFirstImageError') || '请上传首帧图')
+					return
+				}
+				if (first.mediaType !== 'image') {
+					this.$message.error('首帧模式仅支持图片素材')
+					return
+				}
+				params.firstUrl = first.url
+			}
+
+			if (this.videoMode === 'image-first-last-frame') {
+				const first = attachments[0]
+				const last = attachments[1]
+				if (!first) {
+					this.$message.error(this.$t('common.uploadFirstImageError') || '请上传首帧图')
+					return
+				}
+				if (!last) {
+					this.$message.error('请上传尾帧图')
+					return
+				}
+				if (first.mediaType !== 'image' || last.mediaType !== 'image') {
+					this.$message.error('首尾帧模式仅支持图片素材')
+					return
+				}
+				params.firstUrl = first.url
+				params.lastUrl = last.url
+			}
+
+			if (this.videoMode === 'image-reference') {
+				if (attachments.length === 0) {
+					this.$message.error('请至少上传一张参考图')
+					return
+				}
+				const compose = this.$refs.videoComposeRef
+				const contentItems =
+					compose && typeof compose.getImageReferenceContentItems === 'function'
+						? compose.getImageReferenceContentItems()
+						: []
+				const first = contentItems[0]
+				if (!first || first.type !== 'text') {
+					this.$message.error('参考图内容格式异常，请重试')
+					return
+				}
+				const refUrls = contentItems.filter((x, idx) => idx > 0 && x?.type === 'image_url')
+				if (!refUrls.length) {
+					this.$message.error('请通过 @ 在描述中插入参考图')
+					return
+				}
+				params.text = first.text || text
+				params.content = contentItems
+			}
+
 			const urlMap = {
 				'text-to-video': 'api/portal/video/text-to-video',
 				'image-first-frame': 'api/portal/video/image-first-frame',
@@ -508,16 +794,8 @@ export default {
 				'image-reference': 'api/portal/video/image-reference'
 			}
 			const path = urlMap[this.videoMode]
-			if (this.videoMode === 'image-first-frame' || this.videoMode === 'image-first-last-frame') {
-				params.firstUrl = typeof this.firstUrl === 'object' ? this.firstUrl.url : this.firstUrl
-			}
-			if (this.videoMode === 'image-first-last-frame') {
-				params.lastUrl = typeof this.lastUrl === 'object' ? this.lastUrl.url : this.lastUrl
-			}
-			if (this.videoMode === 'image-reference') {
-				params.referenceUrl = this.firstReferenceImageUrlFromEditor()
-			}
 
+			this.generateLoading = true
 			try {
 				const res = await this.$axios({
 					url: path,
@@ -525,13 +803,12 @@ export default {
 					data: params
 				})
 				if (res.code == 200) {
-					this.$message.success(
-						'已经提交任务，请等待或者稍后到个人中心查看作品'
-					)
+					this.$message.success('已经提交任务，请等待或者稍后到个人中心查看作品')
 					this.videoId = res.data.id
 					this.showResult = true
+					this.$refs.videoComposeRef?.clearPromptOnly?.()
 					this.getVideo(res.data.id)
-					this.loadTaskList()
+					this.refreshChatFirstPage()
 				} else if (res.code == -1) {
 					this.$confirm({
 						title: this.$t('common.notice'),
@@ -559,7 +836,7 @@ export default {
 				attempts++
 				if (attempts > this.maxPollAttempts) {
 					this.$message.warning(
-						'等待结果超时：任务可能仍在云端生成，可稍后在「我的视频任务」刷新或向客服提供任务 ID'
+						'等待结果超时：任务可能仍在云端生成，可稍后在「对话记录」刷新或向客服提供任务 ID'
 					)
 					this.destroyInterval()
 					return
@@ -581,6 +858,7 @@ export default {
 							this.$message.warning('任务已完成但未返回视频地址，请稍后重试或联系管理员')
 						}
 						this.destroyInterval()
+						this.refreshChatFirstPage()
 						return
 					}
 					if (st === 'failed' || st === 'cancelled' || st === 'canceled') {
@@ -588,6 +866,7 @@ export default {
 						this.$message.error(
 							res.data.error?.message || res.data.message || '视频生成失败或已取消'
 						)
+						this.refreshChatFirstPage()
 					}
 				}).catch(() => {
 					/* 单次网络错误不停止轮询，避免偶发抖动 */
@@ -644,7 +923,7 @@ export default {
 								this.showResult = false
 								this.videoUrl = null
 								this.videoId = null
-								this.loadTaskList()
+								this.refreshChatFirstPage()
 							} else {
 								this.$message.error(res.msg || '取消失败')
 							}
@@ -673,53 +952,23 @@ export default {
 	display: flex;
 	flex-direction: column;
 	min-height: 100%;
+	height: 100%;
 	gap: 20px;
 	padding: 28px 28px 32px;
 	box-sizing: border-box;
+	overflow-y: hidden;
+	overflow-x: hidden;
 	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);
 }
 
-/* —— Hero —— */
-.vg-hero {
-	flex-shrink: 0;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: flex-end;
-	justify-content: space-between;
-	gap: 16px 24px;
-	padding: 4px 0 16px;
-	border-bottom: 1px solid var(--vg-border);
-	margin-bottom: 4px;
-}
-
-.vg-hero-text {
-	flex: 1;
-	min-width: 200px;
-}
-
-.vg-hero-title {
-	margin: 0 0 6px;
-	font-size: clamp(22px, 3vw, 30px);
-	font-weight: 700;
-	letter-spacing: -0.02em;
-	color: var(--vg-text);
-	line-height: 1.2;
-}
-
-.vg-hero-desc {
-	margin: 0;
-	font-size: 14px;
-	color: var(--vg-muted);
-	line-height: 1.5;
-}
-
 /* —— Body —— */
 .vg-body {
 	display: flex;
-	flex: 1;
+	flex: 0 0 auto;
+	order: 1;
 	min-height: 0;
-	max-height: calc(100vh - 200px);
+	max-height: none;
 	gap: 16px;
 	align-items: stretch;
 }
@@ -784,18 +1033,18 @@ export default {
 	min-width: 280px;
 	min-height: 0;
 	display: flex;
-	overflow: hidden;
+	overflow: visible;
 }
 
 .vg-generator-inner {
 	flex: 1;
 	min-height: 0;
-	overflow-y: auto;
+	overflow-y: visible;
 	-webkit-overflow-scrolling: touch;
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
-	padding: 22px;
+	padding: 16px;
 	background: var(--vg-panel);
 	border: 1px solid var(--vg-border);
 	border-radius: 20px;
@@ -925,9 +1174,9 @@ export default {
 .vg-params-row {
 	display: flex;
 	flex-wrap: wrap;
-	align-items: flex-end;
+	align-items: center;
 	gap: 12px 14px;
-	padding: 10px 12px;
+	padding: 6px 10px;
 	background: rgba(0, 0, 0, 0.2);
 	border-radius: 12px;
 	border: 1px solid var(--vg-border);
@@ -935,20 +1184,24 @@ export default {
 
 .vg-param {
 	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	flex: 1 1 140px;
-	min-width: 120px;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	flex: 1 1 220px;
+	min-width: 200px;
 }
 
 .vg-param-label {
 	font-size: 12px;
 	color: var(--vg-muted);
 	font-weight: 600;
+	white-space: nowrap;
+	min-width: 48px;
 }
 
 .vg-param-select {
-	width: 100%;
+	flex: 1;
+	min-width: 120px;
 
 	:deep(.arco-select-view-single) {
 		background: rgba(0, 0, 0, 0.2) !important;
@@ -998,13 +1251,6 @@ export default {
 	justify-content: center;
 }
 
-.vg-submit-hint {
-	margin-top: 12px;
-	font-size: 12px;
-	color: var(--vg-muted);
-	line-height: 1.5;
-}
-
 /* —— 右侧预览（收窄宽度、视频限高，内容可滚动） —— */
 .right {
 	flex: 0 1 360px;
@@ -1132,10 +1378,6 @@ export default {
 		min-height: 260px;
 		max-height: min(55vh, 480px);
 	}
-	.vg-hero {
-		flex-direction: column;
-		align-items: stretch;
-	}
 }
 
 .vg-task-empty {
@@ -1144,6 +1386,161 @@ export default {
 	color: var(--vg-muted);
 }
 
+.vg-chat-section {
+	order: 0;
+	flex: 1;
+	margin-top: 8px;
+	padding: 18px 22px;
+	background: var(--vg-panel);
+	border: 1px solid var(--vg-border);
+	border-radius: 16px;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.vg-chat-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 12px;
+}
+
+.vg-chat-title {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--vg-text);
+}
+
+.vg-chat-list {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	gap: 14px;
+	max-height: none;
+	overflow: auto;
+	padding-right: 4px;
+}
+
+.vg-chat-block {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 0;
+	padding: 16px;
+	border-radius: 16px;
+	background: rgba(0, 0, 0, 0.25);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	min-width: 0;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* 用户输入区域 */
+.vg-chat-user-section {
+	padding-bottom: 16px;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.vg-chat-ai-section {
+	padding-top: 16px;
+}
+
+.vg-chat-user-text {
+	font-size: 13px;
+	color: var(--vg-text);
+	white-space: pre-wrap;
+	line-height: 1.7;
+	margin-bottom: 12px;
+}
+
+.vg-chat-inline-ref-image {
+	display: inline-block;
+	width: 44px;
+	height: 44px;
+	object-fit: cover;
+	border-radius: 6px;
+	vertical-align: middle;
+	margin: 0 4px;
+	border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.vg-chat-time {
+	margin-top: 8px;
+	font-size: 12px;
+	color: var(--vg-muted);
+}
+
+.vg-chat-ai-top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	flex-wrap: wrap;
+	margin-bottom: 12px;
+}
+
+.vg-chat-ai-status {
+	font-size: 13px;
+	color: var(--vg-cyan);
+	font-weight: 600;
+}
+
+.vg-chat-ai-time {
+	font-size: 12px;
+	color: var(--vg-muted);
+}
+
+.vg-chat-loading {
+	padding: 16px 0;
+	font-size: 13px;
+	color: var(--vg-muted);
+	text-align: center;
+}
+
+.vg-chat-failed {
+	padding: 16px 0;
+	font-size: 13px;
+	color: rgba(255, 107, 107, 0.95);
+	text-align: center;
+}
+
+.vg-chat-result {
+	margin-top: 8px;
+}
+
+.vg-chat-result video {
+	width: 33%;
+	max-width: 33%;
+	margin: 0;
+	display: block;
+	max-height: 240px;
+	border-radius: 12px;
+	background: #000;
+}
+
+.vg-chat-result-link {
+	padding: 10px 0;
+}
+
+.vg-chat-result-link a {
+	color: var(--vg-cyan);
+}
+
+.vg-chat-ai-actions {
+	margin-top: 10px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.vg-chat-loadmore {
+	padding: 6px 0;
+	font-size: 12px;
+	color: var(--vg-muted);
+	text-align: center;
+}
+
 .vg-task-section {
 	flex-shrink: 0;
 	margin-top: 8px;