180 lines
3.8 KiB
Markdown
180 lines
3.8 KiB
Markdown
# 混剪场景编排样式更新说明
|
||
|
||
## 更新日期
|
||
2025-12-21
|
||
|
||
## 修改内容
|
||
|
||
### 1. 前端样式修改
|
||
|
||
#### 场景布局调整
|
||
- **修改前**：场景横向排列，类似网格布局
|
||
- **修改后**：场景纵向排列，每个场景独立显示
|
||
|
||
#### 场景展示效果
|
||
每个场景现在包含：
|
||
1. **场景标题**：显示"场景一"、"场景二"等，带有时长标签
|
||
2. **候选列表**：
|
||
- 空态：显示大的加号图标和"点击添加候选"提示
|
||
- 已填充：显示所有候选视频的缩略图和文件名
|
||
3. **候选数量徽标**：右上角显示"候选 X/10"
|
||
|
||
#### 样式特点
|
||
- 候选视频以卡片形式展示，带阴影效果
|
||
- 悬停时有放大动画
|
||
- 每个候选显示缩略图和文件名
|
||
- 响应式设计，自动换行
|
||
|
||
### 2. 一键填充功能修复
|
||
|
||
#### 问题诊断
|
||
1. 空场景的 `candidates` 数组未正确初始化
|
||
2. 随机选择函数返回的对象格式不正确
|
||
3. 数据结构转换存在问题
|
||
|
||
#### 修复措施
|
||
|
||
**修复 1：确保 candidates 数组存在**
|
||
```javascript
|
||
// 在 autoFillScenes 中
|
||
if (!scene.candidates) {
|
||
scene.candidates = []
|
||
}
|
||
```
|
||
|
||
**修复 2：转换素材格式**
|
||
```javascript
|
||
// 在 randomlySelectMaterials 中
|
||
return selected.map(material => ({
|
||
fileId: material.id,
|
||
fileUrl: material.fileUrl
|
||
}))
|
||
```
|
||
|
||
**修复 3：处理空场景**
|
||
```javascript
|
||
// 在 handleFileClick 中
|
||
if (!scenes.value[emptyIndex].candidates) {
|
||
scenes.value[emptyIndex].candidates = []
|
||
}
|
||
```
|
||
|
||
#### 一键填充算法
|
||
1. 收集所有可用素材
|
||
2. 过滤已使用的素材（避免重复）
|
||
3. 为每个场景随机分配素材
|
||
4. 支持三种策略：
|
||
- `empty_only`：仅填充空场景
|
||
- `supplement`：补充不足场景
|
||
- `full_fill`：全量重新填充
|
||
|
||
### 3. 用户体验优化
|
||
|
||
#### 视觉反馈
|
||
- 场景标题更清晰，显示场景序号和时长
|
||
- 候选视频以卡片形式展示，一目了然
|
||
- 候选数量徽标帮助用户快速了解填充状态
|
||
|
||
#### 操作便利性
|
||
- 一键填充功能正常工作
|
||
- 支持智能分配素材，避免重复
|
||
- 实时显示填充结果
|
||
|
||
## 技术实现
|
||
|
||
### 核心文件
|
||
- `frontend/app/web-gold/src/views/material/Mix.vue`
|
||
|
||
### 关键修改
|
||
1. **布局结构**：从 `flex-wrap: wrap` 改为 `flex-direction: column`
|
||
2. **场景组件**：添加场景容器、标题、候选列表等子组件
|
||
3. **样式优化**：新增候选卡片样式、悬停效果等
|
||
4. **逻辑修复**：确保数据结构正确，修复一键填充
|
||
|
||
### CSS 样式要点
|
||
```scss
|
||
// 纵向布局
|
||
&__scenes {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
// 场景标题
|
||
&__scene-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
// 候选列表
|
||
&__candidates-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
width: 100%;
|
||
}
|
||
|
||
// 候选卡片
|
||
&__candidate-item {
|
||
width: 120px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
}
|
||
```
|
||
|
||
## 验证结果
|
||
|
||
### 前端代码
|
||
- ✅ 语法检查通过
|
||
- ✅ 样式渲染正常
|
||
- ✅ 交互功能正常
|
||
|
||
### 一键填充测试
|
||
- ✅ 空场景正确填充
|
||
- ✅ 防重复机制有效
|
||
- ✅ 候选数量显示正确
|
||
- ✅ 素材分配均匀
|
||
|
||
## 效果展示
|
||
|
||
### 修改前
|
||
```
|
||
[场景1] [场景2] [场景3]
|
||
[视频A] [视频B] [视频C]
|
||
```
|
||
|
||
### 修改后
|
||
```
|
||
场景一 (3s)
|
||
[视频A] [视频B] [视频C]
|
||
|
||
场景二 (3s)
|
||
[视频D] [视频E]
|
||
|
||
场景三 (3s)
|
||
点击添加候选
|
||
```
|
||
|
||
## 总结
|
||
|
||
本次更新成功实现了：
|
||
1. ✅ 场景纵向排列，显示标题和候选列表
|
||
2. ✅ 修复一键填充功能，确保正常工作
|
||
3. ✅ 优化用户界面，提升使用体验
|
||
4. ✅ 保持数据结构和业务逻辑的完整性
|
||
|
||
所有修改已完成并通过验证，可以正常使用。
|