fix: 上传素材优化
This commit is contained in:
old burden
parent
96646cf5ed
commit
9a460e2de7
|
|
@ -23,7 +23,7 @@
|
|||
@click="onReferenceEmptyAreaClick">
|
||||
<div class="vg-compose-empty-icon" aria-hidden="true">+</div>
|
||||
<div class="vg-compose-empty-text">
|
||||
点击或拖拽/粘贴添加参考（仅云存储，不入库）；「上传资产」会写入素材库并加入参考
|
||||
点击或拖拽添加参考素材
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="vg-compose-media-scroll vg-compose-media-scroll--vertical">
|
||||
|
|
@ -129,31 +129,37 @@
|
|||
|
||||
<!-- 首尾帧模式 -->
|
||||
<div v-else-if="isFirstLastFrame" class="vg-first-last-panel">
|
||||
<div class="vg-panel-title">首帧图</div>
|
||||
<div class="vg-upload-single" @click="openFilePickerFor(0)">
|
||||
<div v-if="!mediaList[0]" class="vg-upload-placeholder">
|
||||
<div class="vg-upload-icon">+</div>
|
||||
<div class="vg-upload-text">上传首帧</div>
|
||||
</div>
|
||||
<div v-else class="vg-compose-media-item">
|
||||
<div class="vg-compose-media-preview">
|
||||
<img :src="mediaList[0].url" alt="" />
|
||||
<div class="vg-first-last-grid">
|
||||
<div class="vg-first-last-cell">
|
||||
<div class="vg-panel-title">首帧图</div>
|
||||
<div class="vg-upload-single" @click="openFilePickerFor(0)">
|
||||
<div v-if="!mediaList[0]" class="vg-upload-placeholder">
|
||||
<div class="vg-upload-icon">+</div>
|
||||
<div class="vg-upload-text">上传首帧</div>
|
||||
</div>
|
||||
<div v-else class="vg-compose-media-item">
|
||||
<div class="vg-compose-media-preview">
|
||||
<img :src="mediaList[0].url" alt="" />
|
||||
</div>
|
||||
<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[0])">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[0])">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vg-panel-title">尾帧图</div>
|
||||
<div class="vg-upload-single" @click="openFilePickerFor(1)">
|
||||
<div v-if="!mediaList[1]" class="vg-upload-placeholder">
|
||||
<div class="vg-upload-icon">+</div>
|
||||
<div class="vg-upload-text">上传尾帧</div>
|
||||
</div>
|
||||
<div v-else class="vg-compose-media-item">
|
||||
<div class="vg-compose-media-preview">
|
||||
<img :src="mediaList[1].url" alt="" />
|
||||
<div class="vg-first-last-cell">
|
||||
<div class="vg-panel-title">尾帧图</div>
|
||||
<div class="vg-upload-single" @click="openFilePickerFor(1)">
|
||||
<div v-if="!mediaList[1]" class="vg-upload-placeholder">
|
||||
<div class="vg-upload-icon">+</div>
|
||||
<div class="vg-upload-text">上传尾帧</div>
|
||||
</div>
|
||||
<div v-else class="vg-compose-media-item">
|
||||
<div class="vg-compose-media-preview">
|
||||
<img :src="mediaList[1].url" alt="" />
|
||||
</div>
|
||||
<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[1])">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[1])">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -725,15 +731,16 @@ const confirmPickAssets = () => {
|
|||
const mt = entry.mediaType || 'image'
|
||||
const assetType =
|
||||
mt === 'video' ? 'Video' : mt === 'audio' ? 'Audio' : 'Image'
|
||||
const fd = new FormData()
|
||||
fd.append('file', entry._fileRef)
|
||||
fd.append('groupId', gid)
|
||||
fd.append('assetType', assetType)
|
||||
fd.append('name', entry?.name || '')
|
||||
const createRes = await request({
|
||||
url: 'api/byteAsset/createAsset',
|
||||
method: 'POST',
|
||||
data: fd
|
||||
// 后端新增：通过 url JSON 创建素材，避免再次上传文件
|
||||
data: {
|
||||
URL: url,
|
||||
groupId: gid,
|
||||
assetType,
|
||||
name: entry?.name || ''
|
||||
}
|
||||
})
|
||||
if (createRes.code !== 200) {
|
||||
throw new Error(createRes?.msg || '创建素材失败')
|
||||
|
|
@ -1483,7 +1490,8 @@ defineExpose({
|
|||
display: grid;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
grid-template-columns: minmax(72px, 0.85fr) minmax(72px, 0.75fr) minmax(168px, 1.35fr) minmax(120px, 2.95fr);
|
||||
/* 缩小上传资产区域(第2列)，增大输入区域(第4列)，其它列宽不变 */
|
||||
grid-template-columns: minmax(64px, 0.85fr) minmax(44px, 0.52fr) minmax(188px, 1.35fr) minmax(165px, 3.6fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
column-gap: 10px;
|
||||
align-items: stretch;
|
||||
|
|
@ -1609,22 +1617,24 @@ defineExpose({
|
|||
|
||||
.vg-compose-media-scroll--vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 参考图：允许横向滚动查看更多参考图片 */
|
||||
flex-direction: row;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
gap: 8px;
|
||||
padding: 2px 4px 2px 2px;
|
||||
scroll-snap-type: y proximity;
|
||||
touch-action: pan-y;
|
||||
scroll-snap-type: x proximity;
|
||||
touch-action: pan-x;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.vg-compose-media-item--tile {
|
||||
width: 100%;
|
||||
/* 参考图横向列表：子项需要固定宽度，才能出现横向溢出滚动 */
|
||||
width: 90px;
|
||||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: start;
|
||||
|
|
@ -1690,6 +1700,24 @@ defineExpose({
|
|||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
/* 首尾帧：上传区改为并排且不需要滚动 */
|
||||
.vg-first-last-panel {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.vg-first-last-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 45% 45%;
|
||||
column-gap: 10%;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.vg-first-last-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 首帧/首尾帧：上传区不参与 flex 收缩，避免参数模块挤压导致上传区裁剪 */
|
||||
.vg-compose-card--split .vg-first-frame-panel,
|
||||
.vg-compose-card--split .vg-first-last-panel {
|
||||
|
|
@ -2270,6 +2298,19 @@ defineExpose({
|
|||
box-shadow: 0 0 0 3px rgba(0, 202, 224, 0.15);
|
||||
}
|
||||
|
||||
/* 参考图：窗口变窄时，参数选择列减宽，富文本列加宽（其它列不变） */
|
||||
@media (max-width: 1400px) and (min-width: 1201px) {
|
||||
.vg-compose-card--reference {
|
||||
grid-template-columns: minmax(64px, 0.85fr) minmax(44px, 0.52fr) minmax(170px, 1.05fr) minmax(190px, 4.2fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) and (min-width: 1201px) {
|
||||
.vg-compose-card--reference {
|
||||
grid-template-columns: minmax(64px, 0.85fr) minmax(44px, 0.52fr) minmax(160px, 0.9fr) minmax(205px, 4.6fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 小分辨率：参考图四块改为自上而下竖版（顺序：参考图 → 资产 → 参数 → 富文本） */
|
||||
@media (max-width: 768px) {
|
||||
.vg-compose-card--split {
|
||||
|
|
|
|||
|
|
@ -202,6 +202,7 @@
|
|||
|
||||
<script>
|
||||
import { byteApiItems, byteApiTotalCount } from '@/utils/byteAssetApi'
|
||||
import { extractUploadUrlFromResponse, PORTAL_TENCENT_COS_UPLOAD_URL, uploadFile } from '@/utils/file'
|
||||
|
||||
/** 素材树与筛选区素材组列表统一请求体 */
|
||||
const GROUP_LIST_REQUEST_BODY = {
|
||||
|
|
@ -380,15 +381,25 @@ export default {
|
|||
if (!this.createForm.file) return this.$message.error('请选择上传文件')
|
||||
this.createLoading = true
|
||||
try {
|
||||
const fd = new FormData()
|
||||
fd.append('file', this.createForm.file)
|
||||
fd.append('groupId', groupId)
|
||||
fd.append('assetType', this.createForm.assetType)
|
||||
fd.append('name', String(this.createForm.name || '').trim())
|
||||
// 1) 先走 /api/file/upload 拿到上传后的 url
|
||||
const uploadRes = await uploadFile({
|
||||
url: PORTAL_TENCENT_COS_UPLOAD_URL,
|
||||
file: this.createForm.file,
|
||||
name: 'file'
|
||||
})
|
||||
const uploadUrl = extractUploadUrlFromResponse(uploadRes)
|
||||
if (!uploadUrl) throw new Error(uploadRes?.msg || '上传后未返回文件地址')
|
||||
|
||||
// 2) 再通过 /api/byteAsset/createAsset(JSON) 用 url 创建素材
|
||||
const res = await this.$axios({
|
||||
url: ASSET_CREATE_API,
|
||||
method: 'POST',
|
||||
data: fd
|
||||
data: {
|
||||
URL: uploadUrl,
|
||||
groupId,
|
||||
assetType: this.createForm.assetType,
|
||||
name: String(this.createForm.name || '').trim()
|
||||
}
|
||||
})
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增素材成功')
|
||||
|
|
|
|||
|
|
@ -1566,7 +1566,12 @@ export default {
|
|||
/* 参考图模式：生成参数两列网格 */
|
||||
.vg-params-row--reference-col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
/* 两列：
|
||||
左列：生成模式 / 模型 / 分辨率（同一列，上下排列）
|
||||
右列：比例 / 时长（同一列，上下排列）
|
||||
且左列更宽，保证左列下拉框宽度 > 右列 */
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-auto-rows: auto;
|
||||
align-items: start;
|
||||
gap: 8px 10px;
|
||||
padding: 6px 8px;
|
||||
|
|
@ -1576,13 +1581,38 @@ export default {
|
|||
|
||||
.vg-params-row--reference-col .vg-param {
|
||||
flex: none;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.vg-params-row--reference-col > .vg-param:nth-child(1) {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.vg-params-row--reference-col > .vg-param:nth-child(2) {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.vg-params-row--reference-col > .vg-param:nth-child(3) {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.vg-params-row--reference-col > .vg-param:nth-child(4) {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.vg-params-row--reference-col > .vg-param:nth-child(5) {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.vg-params-row--reference-col .vg-param-label {
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue