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;