fix: 参考图@插入图bug修复

portal-ui/src/components/VideoComposeCard.vue

@@ -2290,8 +2290,10 @@ defineExpose({
 	position: absolute;
 	left: 8px;
 	right: 8px;
+	top: 8px;
 	bottom: 8px;
-	max-height: 180px;
+	/* 高度与富文本框一致；内容超出时内部滚动 */
+	max-height: none;
 	overflow-y: auto;
 	background: rgba(22, 24, 30, 0.98);
 	border: 1px solid rgba(255, 255, 255, 0.12);

portal-ui/src/views/AssetManage.vue

@@ -201,6 +201,9 @@
 							<div class="asset-file-dropzone-text">点击选择或拖拽上传</div>
 						</div>
 					</div>
+					<div v-if="createForm.previewUrl && createForm.assetType === 'Image'" class="asset-file-preview">
+						<img :src="createForm.previewUrl" alt="" />
+					</div>
 					<div class="asset-file-hint">{{ createForm.fileName || '未选择文件' }}</div>
 				</a-form-item>
 				<a-form-item label="素材名称">
@@ -255,6 +258,8 @@ export default {
 				groupId: '',
 				file: null,
 				fileName: '',
+				previewUrl: '',
+				localPreviewUrl: '',
 				name: '',
 				assetType: 'Image'
 			},
@@ -284,7 +289,40 @@ export default {
 	mounted() {
 		this.loadGroups()
 	},
+	watch: {
+		createAssetVisible(val) {
+			if (!val) this.clearCreateUploadPreview()
+		}
+	},
 	methods: {
+		clearCreateUploadPreview() {
+			if (this.createForm?.localPreviewUrl) {
+				try {
+					URL.revokeObjectURL(this.createForm.localPreviewUrl)
+				} catch (_) {}
+			}
+			this.createForm.previewUrl = ''
+			this.createForm.localPreviewUrl = ''
+		},
+		setCreateFormFile(file) {
+			this.createForm.file = file || null
+			this.createForm.fileName = file?.name || ''
+
+			const mime = String(file?.type || '').toLowerCase()
+			// 根据文件类型自动设置素材类型，避免与文件不匹配
+			if (mime.startsWith('image/')) this.createForm.assetType = 'Image'
+			else if (mime.startsWith('video/')) this.createForm.assetType = 'Video'
+			else if (mime.startsWith('audio/')) this.createForm.assetType = 'Audio'
+
+			// 图片预览
+			this.clearCreateUploadPreview()
+			if (mime.startsWith('image/')) {
+				try {
+					this.createForm.localPreviewUrl = URL.createObjectURL(file)
+					this.createForm.previewUrl = this.createForm.localPreviewUrl
+				} catch (_) {}
+			}
+		},
 		formatAssetTypeLabel(it) {
 			const t = String(it?.AssetType || it?.assetType || '').trim()
 			if (!t) return '-'
@@ -352,6 +390,7 @@ export default {
 			this.createForm.fileName = ''
 			this.createForm.name = ''
 			this.createForm.assetType = 'Image'
+			this.clearCreateUploadPreview()
 			this.createAssetVisible = true
 		},
 		async loadGroups() {
@@ -389,30 +428,28 @@ export default {
 			this.createForm.groupId = gid
 			this.searchAssets(1)
 		},
-			triggerCreateFilePicker() {
+		triggerCreateFilePicker() {
-				const el = this.$refs.createAssetFileInput
+			const el = this.$refs.createAssetFileInput
-				if (el && typeof el.click === 'function') el.click()
+			if (el && typeof el.click === 'function') el.click()
-			},
+		},
-			onCreateUploadDragEnter() {
+		onCreateUploadDragEnter() {
-				this.createUploadDragOver = true
+			this.createUploadDragOver = true
-			},
+		},
-			onCreateUploadDragOver() {
+		onCreateUploadDragOver() {
-				this.createUploadDragOver = true
+			this.createUploadDragOver = true
-			},
+		},
-			onCreateUploadDragLeave() {
+		onCreateUploadDragLeave() {
-				this.createUploadDragOver = false
+			this.createUploadDragOver = false
-			},
+		},
-			onCreateUploadDrop(e) {
+		onCreateUploadDrop(e) {
-				this.createUploadDragOver = false
+			this.createUploadDragOver = false
-				const file = e?.dataTransfer?.files?.[0]
+			const file = e?.dataTransfer?.files?.[0]
-				if (!file) return
+			if (!file) return
-				this.createForm.file = file
+			this.setCreateFormFile(file)
-				this.createForm.fileName = file?.name || ''
+		},
-			},
 		onFileChange(e) {
-				const file = e?.target?.files?.[0]
+			const file = e?.target?.files?.[0]
-				this.createForm.file = file || null
+			this.setCreateFormFile(file)
-				this.createForm.fileName = file?.name || ''
 		},
 		async createAsset() {
 			const groupId = String(this.createForm.groupId || '').trim()
@@ -429,6 +466,12 @@ export default {
 				const uploadUrl = extractUploadUrlFromResponse(uploadRes)
 				if (!uploadUrl) throw new Error(uploadRes?.msg || '上传后未返回文件地址')
 
+				// 图片上传成功后，在上传组件展示远程预览（替换本地预览）
+				if (this.createForm.assetType === 'Image') {
+					this.clearCreateUploadPreview()
+					this.createForm.previewUrl = uploadUrl
+				}
+
 				// 2) 再通过 /api/byteAsset/createAsset(JSON) 用 url 创建素材
 				const res = await this.$axios({
 					url: ASSET_CREATE_API,
@@ -441,11 +484,18 @@ export default {
 					}
 				})
 				if (res.code === 200) {
-					this.$message.success('新增素材成功')
+					this.$message.success(this.createForm.assetType === 'Image' ? '上传图片成功' : '上传成功')
 					this.createForm.file = null
-					this.createForm.fileName = ''
 					this.createForm.name = ''
-					this.createAssetVisible = false
+					const isImage = this.createForm.assetType === 'Image'
+					if (isImage) {
+						// 图片模式下延迟关闭，避免用户来不及看到上传组件缩略图
+						setTimeout(() => {
+							this.createAssetVisible = false
+						}, 500)
+					} else {
+						this.createAssetVisible = false
+					}
 					this.searchAssets(1)
 				} else {
 					this.$message.error(res.msg || '新增素材失败')
@@ -857,6 +907,22 @@ export default {
 	color: rgba(255, 255, 255, 0.7);
 }
 
+.asset-file-preview {
+	margin-top: 10px;
+	width: 100%;
+	max-width: 160px;
+	border-radius: 10px;
+	overflow: hidden;
+	border: 1px solid rgba(255, 255, 255, 0.14);
+	background: rgba(0, 0, 0, 0.25);
+}
+
+.asset-file-preview img {
+	display: block;
+	width: 100%;
+	height: auto;
+}
+
 .asset-file-hint {
 	margin-top: 6px;
 	font-size: 12px;