sionrui/openspec/changes/refactor-mix-scene编排/STYLE_UPDATE.md

# 混剪场景编排样式更新说明

## 更新日期
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. ✅ 保持数据结构和业务逻辑的完整性

所有修改已完成并通过验证，可以正常使用。