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 数组存在

// 在 autoFillScenes 中
if (!scene.candidates) {
  scene.candidates = []
}

修复 2：转换素材格式

// 在 randomlySelectMaterials 中
return selected.map(material => ({
  fileId: material.id,
  fileUrl: material.fileUrl
}))

修复 3：处理空场景

// 在 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 样式要点

// 纵向布局
&__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. ✅ 保持数据结构和业务逻辑的完整性

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