Merge branch 'seedance' of https://gitea.06zk.com/best_yunwei/ai_images into seedance

portal-ui/src/components/VideoComposeCard.vue

@@ -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,6 +129,8 @@
 
 			<!-- 首尾帧模式 -->
 			<div v-else-if="isFirstLastFrame" class="vg-first-last-panel">
+				<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">
@@ -142,7 +144,9 @@
 								<button type="button" class="vg-compose-remove-btn" @click.stop="removeItem(mediaList[0])">×</button>
 							</div>
 						</div>
+					</div>
 
+					<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">
@@ -157,6 +161,8 @@
 							</div>
 						</div>
 					</div>
+				</div>
+			</div>
 
 			<!-- 参数选择列：已由 VideoGen.vue 统一通过 reference-params slot 渲染 -->
 			<div class="vg-compose-mod vg-compose-mod--pick">
@@ -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-x: auto;
-	overflow-y: auto;
+	overflow-y: hidden;
 	gap: 8px;
 	padding: 2px 4px 2px 2px;
-	scroll-snap-type: y proximity;
+	scroll-snap-type: x proximity;
-	touch-action: pan-y;
+	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 {

portal-ui/src/views/AssetManage.vue

@@ -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()
+				// 1) 先走 /api/file/upload 拿到上传后的 url
-				fd.append('file', this.createForm.file)
+				const uploadRes = await uploadFile({
-				fd.append('groupId', groupId)
+					url: PORTAL_TENCENT_COS_UPLOAD_URL,
-				fd.append('assetType', this.createForm.assetType)
+					file: this.createForm.file,
-				fd.append('name', String(this.createForm.name || '').trim())
+					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('新增素材成功')

portal-ui/src/views/VideoGen.vue

@@ -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;
 }