portal-ui/src/components/VideoComposeCard.vue

@@ -186,7 +186,7 @@
 			class="vg-compose-right"
 			:class="{ 'vg-compose-right--reference': isReference || isTextToVideo || isFirstFrame || isFirstLastFrame }">
 			<div class="vg-compose-right-body vg-reference-editor-row">
-				<div ref="richEditorWrapRef" class="vg-rich-editor-wrap">
+				<div class="vg-rich-editor-wrap">
 					<div
 						ref="editorRef"
 						class="vg-compose-textarea vg-rich-editor"
@@ -197,9 +197,7 @@
 						@keydown="onEditorKeydown"
 						@keyup="onEditorKeyup"
 						@click="onEditorClick"></div>
-				</div>
+					<div v-if="mentionVisible" class="vg-mention-panel">
-				<Teleport to="body">
-					<div v-if="mentionVisible" class="vg-mention-panel" :style="mentionPanelStyle">
 						<div
 							v-for="(item, idx) in mentionCandidates"
 							:key="item.key"
@@ -217,7 +215,7 @@
 						</div>
 						<div v-if="mentionCandidates.length === 0" class="vg-mention-empty">暂无可引用素材</div>
 					</div>
-				</Teleport>
+				</div>
 
 				<div class="vg-reference-actions-col">
 					<slot name="toolbar"></slot>
@@ -259,7 +257,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+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'
 import request from '@/utils/request'
@@ -318,10 +316,6 @@ const emit = defineEmits(['update:modelValue', 'update:mediaList'])
 
 const fileInputRef = ref(null)
 const editorRef = ref(null)
-/** 用于 @ 面板 Teleport 后 fixed 定位（对齐富文本列宽） */
-const richEditorWrapRef = ref(null)
-const mentionPanelStyle = ref({})
-let removeMentionPositionListeners = null
 const localPrompt = ref(props.modelValue || '')
 const internalMediaList = ref(Array.isArray(props.mediaList) ? [...props.mediaList] : [])
 const currentUploadIndex = ref(-1) // for first/last frame mode
@@ -369,11 +363,6 @@ onMounted(() => {
 	}
 })
 
-onUnmounted(() => {
-	removeMentionPositionListeners?.()
-	removeMentionPositionListeners = null
-})
-
 const mediaList = computed(() => internalMediaList.value)
 const mentionCandidates = computed(() =>
 	(mediaList.value || [])
@@ -393,54 +382,6 @@ const mentionCandidates = computed(() =>
 		}))
 )
 
-const MENTION_PANEL_MARGIN = 8
-const updateMentionPanelPosition = () => {
-	if (!mentionVisible.value || !richEditorWrapRef.value) return
-	const rect = richEditorWrapRef.value.getBoundingClientRect()
-	const maxH = Math.min(window.innerHeight * 0.55, 480)
-	const w = Math.max(120, rect.width - MENTION_PANEL_MARGIN * 2)
-	mentionPanelStyle.value = {
-		position: 'fixed',
-		left: `${rect.left + MENTION_PANEL_MARGIN}px`,
-		width: `${w}px`,
-		bottom: `${window.innerHeight - rect.bottom + MENTION_PANEL_MARGIN}px`,
-		maxHeight: `${maxH}px`,
-		zIndex: 200000,
-		boxSizing: 'border-box'
-	}
-}
-
-const bindMentionPositionListeners = () => {
-	const handler = () => updateMentionPanelPosition()
-	window.addEventListener('resize', handler)
-	window.addEventListener('scroll', handler, true)
-	return () => {
-		window.removeEventListener('resize', handler)
-		window.removeEventListener('scroll', handler, true)
-	}
-}
-
-watch(mentionVisible, async (vis) => {
-	if (vis) {
-		await nextTick()
-		updateMentionPanelPosition()
-		requestAnimationFrame(() => updateMentionPanelPosition())
-		removeMentionPositionListeners?.()
-		removeMentionPositionListeners = bindMentionPositionListeners()
-	} else {
-		removeMentionPositionListeners?.()
-		removeMentionPositionListeners = null
-		mentionPanelStyle.value = {}
-	}
-})
-
-watch(
-	() => mentionCandidates.value.length,
-	() => {
-		if (mentionVisible.value) nextTick(() => updateMentionPanelPosition())
-	}
-)
-
 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')
@@ -2409,52 +2350,35 @@ defineExpose({
 }
 
 .vg-mention-audio {
-	display: flex;
+	font-size: 12px;
-	align-items: center;
-	justify-content: center;
-	min-width: 64px;
-	min-height: 64px;
-	box-sizing: border-box;
-	padding: 4px 6px;
-	font-size: 11px;
-	line-height: 1.2;
 	color: rgba(255, 255, 255, 0.88);
-	text-align: center;
+	padding: 0 6px;
-	border-radius: 6px;
-	border: 1px solid rgba(255, 255, 255, 0.1);
-	background: rgba(0, 0, 0, 0.22);
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
-/* @ 候选面板 Teleport 到 body，位置由 :style fixed（见 updateMentionPanelPosition） */
 .vg-mention-panel {
-	min-height: 0;
+	position: absolute;
-	display: grid;
+	left: 8px;
-	grid-template-columns: repeat(4, minmax(0, 1fr));
+	right: 8px;
-	gap: 6px 8px;
+	top: 8px;
-	padding: 8px;
+	bottom: 8px;
-	align-content: start;
+	/* 高度与富文本框一致；内容超出时内部滚动 */
+	max-height: none;
 	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: 99999;
 }
 
 .vg-mention-item {
 	display: flex;
-	flex-direction: column;
 	align-items: center;
-	justify-content: flex-start;
+	gap: 8px;
-	gap: 4px;
+	padding: 8px 10px;
-	min-width: 0;
-	padding: 6px 4px;
 	cursor: pointer;
 	color: rgba(255, 255, 255, 0.88);
-	border-radius: 8px;
 }
 
 .vg-mention-item:hover {
@@ -2466,11 +2390,10 @@ defineExpose({
 }
 
 .vg-mention-thumb {
-	width: 64px;
+	width: 30px;
-	height: 64px;
+	height: 30px;
-	border-radius: 8px;
+	border-radius: 6px;
 	object-fit: cover;
-	border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .vg-mention-label {
@@ -2479,11 +2402,9 @@ defineExpose({
 }
 
 .vg-mention-empty {
-	grid-column: 1 / -1;
 	padding: 8px 10px;
 	font-size: 12px;
 	color: rgba(255, 255, 255, 0.45);
-	text-align: center;
 }
 
 .vg-compose-textarea:focus {