From a2076fe18b842ca39cc2af58fb4b959c24aebaaa Mon Sep 17 00:00:00 2001
From: yys <47@gamerwa.com>
Date: Tue, 7 Apr 2026 10:40:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BB=A5=E4=B8=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1、图片放大
2、显示区域加大可浮在组件外
3、选择区一行可显示多个
---
 portal-ui/src/components/VideoComposeCard.vue | 119 +++++++++++++++---
 1 file changed, 99 insertions(+), 20 deletions(-)

diff --git a/portal-ui/src/components/VideoComposeCard.vue b/portal-ui/src/components/VideoComposeCard.vue
index 9431308..a54a4a4 100644
--- a/portal-ui/src/components/VideoComposeCard.vue
+++ b/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 class="vg-rich-editor-wrap">
+				<div ref="richEditorWrapRef" class="vg-rich-editor-wrap">
 					<div
 						ref="editorRef"
 						class="vg-compose-textarea vg-rich-editor"
@@ -196,7 +196,9 @@
 						@keydown="onEditorKeydown"
 						@keyup="onEditorKeyup"
 						@click="onEditorClick"></div>
-					<div v-if="mentionVisible" class="vg-mention-panel">
+				</div>
+				<Teleport to="body">
+					<div v-if="mentionVisible" class="vg-mention-panel" :style="mentionPanelStyle">
 						<div
 							v-for="(item, idx) in mentionCandidates"
 							:key="item.key"
@@ -214,7 +216,7 @@
 						</div>
 						<div v-if="mentionCandidates.length === 0" class="vg-mention-empty">暂无可引用素材</div>
 					</div>
-				</div>
+				</Teleport>
 
 				<div class="vg-reference-actions-col">
 					<slot name="toolbar"></slot>
@@ -256,7 +258,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, 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'
@@ -315,6 +317,10 @@ 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
@@ -362,6 +368,11 @@ onMounted(() => {
 	}
 })
 
+onUnmounted(() => {
+	removeMentionPositionListeners?.()
+	removeMentionPositionListeners = null
+})
+
 const mediaList = computed(() => internalMediaList.value)
 const mentionCandidates = computed(() =>
 	(mediaList.value || [])
@@ -381,6 +392,54 @@ 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')
@@ -2281,35 +2340,52 @@ defineExpose({
 }
 
 .vg-mention-audio {
-	font-size: 12px;
+	display: flex;
+	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);
-	padding: 0 6px;
+	text-align: center;
+	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 {
-	position: absolute;
-	left: 8px;
-	right: 8px;
-	top: 8px;
-	bottom: 8px;
-	/* 高度与富文本框一致；内容超出时内部滚动 */
-	max-height: none;
+	min-height: 0;
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	gap: 6px 8px;
+	padding: 8px;
+	align-content: start;
 	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;
-	gap: 8px;
-	padding: 8px 10px;
+	justify-content: flex-start;
+	gap: 4px;
+	min-width: 0;
+	padding: 6px 4px;
 	cursor: pointer;
 	color: rgba(255, 255, 255, 0.88);
+	border-radius: 8px;
 }
 
 .vg-mention-item:hover {
@@ -2321,10 +2397,11 @@ defineExpose({
 }
 
 .vg-mention-thumb {
-	width: 30px;
-	height: 30px;
-	border-radius: 6px;
+	width: 64px;
+	height: 64px;
+	border-radius: 8px;
 	object-fit: cover;
+	border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .vg-mention-label {
@@ -2333,9 +2410,11 @@ 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 {