diff --git a/portal-ui/src/components/VideoComposeCard.vue b/portal-ui/src/components/VideoComposeCard.vue index f39dc20..9431308 100644 --- a/portal-ui/src/components/VideoComposeCard.vue +++ b/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); diff --git a/portal-ui/src/views/AssetManage.vue b/portal-ui/src/views/AssetManage.vue index 321fedb..70e288b 100644 --- a/portal-ui/src/views/AssetManage.vue +++ b/portal-ui/src/views/AssetManage.vue @@ -201,6 +201,9 @@
点击选择或拖拽上传
+
+ +
{{ createForm.fileName || '未选择文件' }}
@@ -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() { - const el = this.$refs.createAssetFileInput - if (el && typeof el.click === 'function') el.click() - }, - onCreateUploadDragEnter() { - this.createUploadDragOver = true - }, - onCreateUploadDragOver() { - this.createUploadDragOver = true - }, - onCreateUploadDragLeave() { - this.createUploadDragOver = false - }, - onCreateUploadDrop(e) { - this.createUploadDragOver = false - const file = e?.dataTransfer?.files?.[0] - if (!file) return - this.createForm.file = file - this.createForm.fileName = file?.name || '' - }, + triggerCreateFilePicker() { + const el = this.$refs.createAssetFileInput + if (el && typeof el.click === 'function') el.click() + }, + onCreateUploadDragEnter() { + this.createUploadDragOver = true + }, + onCreateUploadDragOver() { + this.createUploadDragOver = true + }, + onCreateUploadDragLeave() { + this.createUploadDragOver = false + }, + onCreateUploadDrop(e) { + this.createUploadDragOver = false + const file = e?.dataTransfer?.files?.[0] + if (!file) return + this.setCreateFormFile(file) + }, onFileChange(e) { - const file = e?.target?.files?.[0] - this.createForm.file = file || null - this.createForm.fileName = file?.name || '' + const file = e?.target?.files?.[0] + this.setCreateFormFile(file) }, 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;