From 7f5d9d9f198dc736401abb5cebfd7d90b12b3309 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Wed, 4 Mar 2026 02:13:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/web-gold/src/components/BrandLogo.vue |  246 ++
 .../app/web-gold/src/components/TopNav.vue    |    3 +-
 .../web-gold/src/components/UserDropdown.vue  |  189 +-
 frontend/app/web-gold/src/router/index.js     |    2 +-
 .../app/web-gold/src/views/material/Mix.vue   | 2234 +++++++----------
 .../material/components/GroupSelectModal.vue  |  135 +
 .../components/SceneSelectorModal.vue         |  642 +++--
 .../task-management/layout/TaskLayout.vue     |  147 +-
 .../system/task-management/mix-task/index.vue |    6 +
 .../yudao/module/infra/api/file/FileApi.java  |    7 +
 .../module/infra/api/file/FileApiImpl.java    |   17 +
 .../file/core/client/AbstractFileClient.java  |    5 +
 .../file/core/client/FileClient.java          |    7 +
 .../tik/media/BatchProduceAlignment.java      |   16 +-
 .../module/tik/mix/config/IceProperties.java  |   27 +
 .../src/main/resources/application-dev.yaml   |    1 -
 .../src/main/resources/application.yaml       |    1 -
 17 files changed, 1958 insertions(+), 1727 deletions(-)
 create mode 100644 frontend/app/web-gold/src/components/BrandLogo.vue
 create mode 100644 frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue

diff --git a/frontend/app/web-gold/src/components/BrandLogo.vue b/frontend/app/web-gold/src/components/BrandLogo.vue
new file mode 100644
index 0000000000..842d58d458
--- /dev/null
+++ b/frontend/app/web-gold/src/components/BrandLogo.vue
@@ -0,0 +1,246 @@
+<script setup>
+/**
+ * 牟野品牌 Logo
+ * 设计理念：Neo-Organic Tech（新有机科技）
+ * 融合自然有机形态与科技几何，体现"野"的生机与"道"的智慧
+ */
+defineProps({
+  size: {
+    type: Number,
+    default: 36
+  }
+})
+</script>
+
+<template>
+  <div class="brand-logo" :style="{ '--logo-size': `${size}px` }">
+    <svg
+      class="logo-icon"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <!-- 主色渐变：金色流光 -->
+        <linearGradient id="brandGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#F59E0B" />
+          <stop offset="50%" stop-color="#FBBF24" />
+          <stop offset="100%" stop-color="#F59E0B" />
+        </linearGradient>
+
+        <!-- 辅助渐变：深金 -->
+        <linearGradient id="brandGradientDark" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#D97706" />
+          <stop offset="100%" stop-color="#F59E0B" />
+        </linearGradient>
+
+        <!-- 光晕效果 -->
+        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
+          <feMerge>
+            <feMergeNode in="coloredBlur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+
+        <!-- 内阴影 -->
+        <filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
+          <feOffset dx="0" dy="1"/>
+          <feGaussianBlur stdDeviation="0.5"/>
+          <feComposite operator="out" in="SourceGraphic"/>
+          <feColorMatrix type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0"/>
+          <feBlend mode="normal" in2="SourceGraphic"/>
+        </filter>
+      </defs>
+
+      <!-- 背景圆 - 深色基底 -->
+      <circle cx="24" cy="24" r="22" fill="url(#brandGradientDark)" opacity="0.15"/>
+
+      <!-- 核心图形：抽象的"野"字 + 山野轮廓 -->
+      <g class="logo-core" filter="url(#glow)">
+        <!-- 左侧山峰 - 代表"野"的山野意象 -->
+        <path
+          class="peak peak-left"
+          d="M12 32 L18 18 L24 28"
+          stroke="url(#brandGradient)"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"
+        />
+
+        <!-- 右侧山峰 - 呼应平衡 -->
+        <path
+          class="peak peak-right"
+          d="M24 28 L30 16 L36 32"
+          stroke="url(#brandGradient)"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="none"
+        />
+
+        <!-- 中间连接 - 代表"道"的路径 -->
+        <path
+          class="path-line"
+          d="M18 24 Q24 20 30 24"
+          stroke="url(#brandGradient)"
+          stroke-width="2"
+          stroke-linecap="round"
+          fill="none"
+        />
+
+        <!-- 底部流动线 - 数据流/AI智能 -->
+        <path
+          class="flow-line"
+          d="M14 36 Q24 32 34 36"
+          stroke="url(#brandGradient)"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          fill="none"
+          opacity="0.7"
+        />
+
+        <!-- 数据节点 -->
+        <circle class="node node-1" cx="18" cy="18" r="2" fill="url(#brandGradient)"/>
+        <circle class="node node-2" cx="30" cy="16" r="2" fill="url(#brandGradient)"/>
+        <circle class="node node-3" cx="24" cy="28" r="2.5" fill="url(#brandGradient)" filter="url(#innerShadow)"/>
+      </g>
+
+      <!-- 能量环 - 科技感装饰 -->
+      <circle
+        class="energy-ring"
+        cx="24"
+        cy="24"
+        r="20"
+        stroke="url(#brandGradient)"
+        stroke-width="0.5"
+        fill="none"
+        opacity="0.4"
+        stroke-dasharray="4 6"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.brand-logo {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 200ms ease;
+}
+
+.brand-logo:hover {
+  transform: scale(1.05);
+}
+
+.logo-icon {
+  width: var(--logo-size);
+  height: var(--logo-size);
+  flex-shrink: 0;
+}
+
+/* 能量环旋转动画 */
+@keyframes ringRotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.energy-ring {
+  transform-origin: center;
+  animation: ringRotate 20s linear infinite;
+}
+
+/* 节点脉冲动画 */
+@keyframes nodePulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.2);
+  }
+}
+
+.node {
+  transform-origin: center;
+  transition: all 300ms ease;
+}
+
+.brand-logo:hover .node-1 {
+  animation: nodePulse 1.5s ease-in-out infinite;
+}
+
+.brand-logo:hover .node-2 {
+  animation: nodePulse 1.5s ease-in-out infinite 0.3s;
+}
+
+.brand-logo:hover .node-3 {
+  animation: nodePulse 1.5s ease-in-out infinite 0.6s;
+}
+
+/* 山峰绘制动画 */
+@keyframes drawPeak {
+  from { stroke-dashoffset: 30; }
+  to { stroke-dashoffset: 0; }
+}
+
+.peak {
+  stroke-dasharray: 30;
+  stroke-dashoffset: 0;
+  transition: all 300ms ease;
+}
+
+.brand-logo:hover .peak-left {
+  animation: drawPeak 0.6s ease-out;
+}
+
+.brand-logo:hover .peak-right {
+  animation: drawPeak 0.6s ease-out 0.15s;
+}
+
+/* 路径流动动画 */
+@keyframes pathFlow {
+  0% { stroke-dashoffset: 20; }
+  100% { stroke-dashoffset: 0; }
+}
+
+.path-line {
+  stroke-dasharray: 5 3;
+  stroke-dashoffset: 0;
+}
+
+.brand-logo:hover .path-line {
+  animation: pathFlow 1s linear infinite;
+}
+
+/* 底部流线波动 */
+@keyframes flowWave {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-1px); }
+}
+
+.flow-line {
+  transition: all 300ms ease;
+}
+
+.brand-logo:hover .flow-line {
+  animation: flowWave 1s ease-in-out infinite;
+}
+
+/* Logo 整体光晕 */
+@keyframes logoGlow {
+  0%, 100% {
+    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.4));
+  }
+  50% {
+    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
+  }
+}
+
+.brand-logo:hover .logo-core {
+  animation: logoGlow 2s ease-in-out infinite;
+}
+</style>
diff --git a/frontend/app/web-gold/src/components/TopNav.vue b/frontend/app/web-gold/src/components/TopNav.vue
index 75fd7c1b17..fcd7be00d3 100644
--- a/frontend/app/web-gold/src/components/TopNav.vue
+++ b/frontend/app/web-gold/src/components/TopNav.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { useUserStore } from '@/stores/user'
 import UserDropdown from '@/components/UserDropdown.vue'
+import BrandLogo from '@/components/BrandLogo.vue'
 
 const styles = {
   background: 'var(--color-gray-900)',
@@ -22,7 +23,7 @@ const shouldShowUser = computed(() => {
     <div>
       <div class="h-[70px] flex items-center">
         <div class="flex items-center gap-3 flex-1 pl-[30px]">
-          <!-- 左侧可放 logo 或其他内容 -->
+          <BrandLogo :size="40" />
         </div>
         <div class="flex items-center gap-4 pr-[35px]">
           <template v-if="shouldShowUser">
diff --git a/frontend/app/web-gold/src/components/UserDropdown.vue b/frontend/app/web-gold/src/components/UserDropdown.vue
index 78ee6f7c47..e5138a4ab2 100644
--- a/frontend/app/web-gold/src/components/UserDropdown.vue
+++ b/frontend/app/web-gold/src/components/UserDropdown.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { UserOutlined, LogoutOutlined } from '@ant-design/icons-vue'
@@ -6,6 +7,25 @@ import { UserOutlined, LogoutOutlined } from '@ant-design/icons-vue'
 const router = useRouter()
 const userStore = useUserStore()
 
+// 根据用户名生成稳定的渐变色 - 使用更协调的蓝金配色
+const avatarGradient = computed(() => {
+  const name = userStore.displayName || 'User'
+  const gradients = [
+    'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
+    'linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)',
+    'linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)',
+    'linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)',
+    'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+    'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)'
+  ]
+  // 根据用户名生成稳定的索引
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return gradients[Math.abs(hash) % gradients.length]
+})
+
 const handleMenuClick = ({ key }) => {
   if (key === 'profile') {
     router.push('/user/profile')
@@ -26,20 +46,35 @@ async function handleLogout() {
 
 <template>
   <a-dropdown placement="bottomRight" :trigger="['hover']">
-    <div class="user-avatar-container">
-      <img 
-        v-if="userStore.displayAvatar" 
-        class="user-avatar" 
-        :src="userStore.displayAvatar" 
-        alt="avatar" 
-      />
-      <div v-else class="user-avatar-placeholder">
-        {{ userStore.displayName?.charAt(0) || 'U' }}
+    <div class="user-trigger">
+      <div class="user-avatar-ring">
+        <div class="user-avatar-wrapper">
+          <img
+            v-if="userStore.displayAvatar"
+            class="user-avatar"
+            :src="userStore.displayAvatar"
+            alt="avatar"
+          />
+          <div
+            v-else
+            class="user-avatar-placeholder"
+            :style="{ background: avatarGradient }"
+          >
+            <span class="avatar-text">{{ userStore.displayName?.charAt(0)?.toUpperCase() || 'U' }}</span>
+          </div>
+        </div>
+        <div class="status-dot"></div>
       </div>
+      <div class="user-info">
+        <span class="user-name">{{ userStore.displayName || '用户' }}</span>
+      </div>
+      <svg class="dropdown-arrow" viewBox="0 0 12 12" fill="none">
+        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
     </div>
-    
+
     <template #overlay>
-      <a-menu @click="handleMenuClick">
+      <a-menu class="user-menu" @click="handleMenuClick">
         <a-menu-item key="profile">
           <template #icon>
             <UserOutlined />
@@ -58,44 +93,130 @@ async function handleLogout() {
   </a-dropdown>
 </template>
 
-<style scoped>
-.user-avatar-container {
-  cursor: pointer;
+<style scoped lang="less">
+.user-trigger {
   display: flex;
   align-items: center;
-  will-change: transform;
+  gap: 12px;
+  padding: 6px 12px 6px 6px;
+  border-radius: 40px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-1px);
+
+    .user-avatar-ring::before {
+      opacity: 1;
+      transform: rotate(180deg);
+    }
+
+    .dropdown-arrow {
+      transform: rotate(180deg);
+    }
+  }
 }
 
-.user-avatar-container:hover {
-  transform: scale(1.05);
+.user-avatar-ring {
+  position: relative;
+  width: 36px;
+  height: 36px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: 50%;
+    background: conic-gradient(
+      from 0deg,
+      rgba(59, 130, 246, 0.8),
+      rgba(99, 102, 241, 0.8),
+      rgba(139, 92, 246, 0.8),
+      rgba(59, 130, 246, 0.8)
+    );
+    opacity: 0;
+    transition: all 0.4s ease;
+    z-index: 0;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: var(--color-gray-900);
+    z-index: 1;
+  }
+}
+
+.user-avatar-wrapper {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  overflow: hidden;
+  z-index: 2;
 }
 
 .user-avatar,
 .user-avatar-placeholder {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2px solid var(--color-border, #e5e7eb);
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.user-avatar-container:hover .user-avatar,
-.user-avatar-container:hover .user-avatar-placeholder {
-  border-color: var(--color-primary, #1890ff);
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-
-.user-avatar {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 
 .user-avatar-placeholder {
-  background: linear-gradient(135deg, var(--color-primary, #1890ff), var(--color-blue, #36cfc9));
   display: flex;
   align-items: center;
   justify-content: center;
+  background-size: cover;
+}
+
+.avatar-text {
   color: #fff;
-  font-weight: 600;
-  font-size: 16px;
+  font-weight: 700;
+  font-size: 15px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.status-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  background: #22c55e;
+  border: 2px solid var(--color-gray-900);
+  border-radius: 50%;
+  z-index: 3;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.dropdown-arrow {
+  width: 12px;
+  height: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  transition: transform 0.25s ease;
+  flex-shrink: 0;
 }
 </style>
diff --git a/frontend/app/web-gold/src/router/index.js b/frontend/app/web-gold/src/router/index.js
index aabf8c0c65..15dd996962 100644
--- a/frontend/app/web-gold/src/router/index.js
+++ b/frontend/app/web-gold/src/router/index.js
@@ -29,7 +29,7 @@ const navConfig = [
     items: [
       { name: '素材列表', path: 'material/list', icon: 'grid', component: () => import('../views/material/MaterialListNew.vue') },
       { name: '智能混剪', path: 'material/mix', icon: 'scissors', component: () => import('../views/material/Mix.vue') },
-      { name: '任务中心', path: 'system/task-management/:type', icon: 'video', component: () => import('../views/system/task-management/layout/TaskLayout.vue'), requiresAuth: true, params: { type: 'mix-task' } },
+      { name: '任务中心', path: 'system/task-management', icon: 'video', component: () => import('../views/system/task-management/layout/TaskLayout.vue'), requiresAuth: true },
     ]
   },
   // {
diff --git a/frontend/app/web-gold/src/views/material/Mix.vue b/frontend/app/web-gold/src/views/material/Mix.vue
index e7daa3563e..699aa426ac 100644
--- a/frontend/app/web-gold/src/views/material/Mix.vue
+++ b/frontend/app/web-gold/src/views/material/Mix.vue
@@ -1,372 +1,262 @@
 <template>
-  <FullWidthLayout :show-back="false" class="mix-page-layout">
-    <!-- 页面标题 -->
-    <template #header>
-      <div class="page-header">
-        <div class="page-header__icon">
-          <RocketOutlined />
+  <div class="mix-page">
+    <!-- 顶部操作栏 -->
+    <header class="page-header">
+      <div class="header-left">
+        <a-button type="text" @click="router.push('/material/list')">
+          <template #icon><ArrowLeftOutlined /></template>
+          返回
+        </a-button>
+        <a-divider type="vertical" />
+        <h1 class="page-title">智能混剪</h1>
+        <a-tag color="processing" size="small">{{ sceneCount }} 场景</a-tag>
+      </div>
+
+      <div class="header-center">
+        <!-- 核心参数 -->
+        <div class="param-item">
+          <span class="param-label">总时长</span>
+          <a-slider
+            v-model:value="formData.totalDuration"
+            :min="15"
+            :max="30"
+            :step="1"
+            style="width: 100px;"
+          />
+          <span class="param-value">{{ formData.totalDuration }}s</span>
         </div>
-        <div class="page-header__content">
-          <h1 class="page-header__title">智能混剪</h1>
+
+        <a-divider type="vertical" />
+
+        <div class="param-item">
+          <span class="param-label">切片</span>
+          <a-slider
+            v-model:value="formData.clipDuration"
+            :min="3"
+            :max="5"
+            :step="1"
+            style="width: 80px;"
+          />
+          <span class="param-value">{{ formData.clipDuration }}s</span>
         </div>
-        <div class="page-header__actions">
-          <a-button @click="router.push('/material/list')">返回列表</a-button>
+
+        <a-divider type="vertical" />
+
+        <div class="param-item">
+          <span class="param-label">生成</span>
+          <a-select
+            v-model:value="formData.produceCount"
+            size="small"
+            style="width: 70px;"
+            @change="saveProduceCount"
+          >
+            <a-select-option :value="1">1 个</a-select-option>
+            <a-select-option :value="3">3 个</a-select-option>
+            <a-select-option :value="5">5 个</a-select-option>
+            <a-select-option :value="10">10 个</a-select-option>
+            <a-select-option :value="15">15 个</a-select-option>
+          </a-select>
         </div>
       </div>
-    </template>
 
-    <!-- 主要内容 -->
-    <div class="mix-page">
-      <!-- 骨架屏加载状态 -->
-      <template v-if="uiState.loadingGroups">
-        <div class="loading-container">
-          <a-skeleton :loading="true" active :paragraph="{ rows: 8 }" />
-        </div>
-      </template>
+      <div class="header-right">
+        <a-button @click="showSettings = true">
+          <template #icon><SettingOutlined /></template>
+          高级设置
+        </a-button>
+        <a-button
+          type="primary"
+          :loading="uiState.submitting"
+          :disabled="!canSubmit"
+          @click="handleSubmit"
+        >
+          <template #icon><RocketOutlined /></template>
+          开始混剪
+        </a-button>
+      </div>
+    </header>
 
-      <template v-else>
-        <div class="content-wrapper">
-          <!-- 左侧：参数配置 -->
-          <div class="params-section">
-            <div class="card">
-              <div class="card__header">
-                <h2 class="card__title">
-                  <SettingOutlined />
-                  混剪参数
-                </h2>
-              </div>
-              <div class="card__body">
-                <a-form layout="vertical">
-                  <!-- 生成数量 -->
-                  <a-form-item label="生成数量">
-                    <a-radio-group v-model:value="formData.produceCount" button-style="solid" @change="saveProduceCount">
-                      <a-radio-button :value="1">1个</a-radio-button>
-                      <a-radio-button :value="3">3个</a-radio-button>
-                      <a-radio-button :value="5">5个</a-radio-button>
-                      <a-radio-button :value="10">10个</a-radio-button>
-                      <a-radio-button :value="15">15个</a-radio-button>
-                    </a-radio-group>
-                  </a-form-item>
+    <!-- 进度条 -->
+    <div class="progress-bar">
+      <div class="progress-track">
+        <div class="progress-fill" :style="{ width: progressPercent + '%' }" />
+      </div>
+      <span class="progress-text">
+        <CheckCircleFilled v-if="filledCount === sceneCount" class="icon-complete" />
+        <span v-else class="icon-pending">{{ filledCount }}/{{ sceneCount }}</span>
+        场景已就绪
+      </span>
+    </div>
 
-                  <!-- 成品总时长 -->
-                  <a-form-item label="成品总时长">
-                    <div class="slider-box">
-                      <a-slider
-                        v-model:value="formData.totalDuration"
-                        :min="15"
-                        :max="30"
-                        :step="1"
-                        :marks="{ 15: '15s', 20: '20s', 25: '25s', 30: '30s' }"
-                      />
-                      <div class="slider-value">{{ formData.totalDuration }}秒</div>
-                    </div>
-                  </a-form-item>
-
-                  <!-- 单切片时长 -->
-                  <a-form-item label="单切片时长">
-                    <div class="slider-box">
-                      <a-slider
-                        v-model:value="formData.clipDuration"
-                        :min="3"
-                        :max="5"
-                        :step="1"
-                        :marks="{ 3: '3s', 4: '4s', 5: '5s' }"
-                      />
-                      <div class="slider-value">{{ formData.clipDuration }}秒</div>
-                    </div>
-                  </a-form-item>
-
-                  <!-- 裁剪模式 -->
-                  <a-form-item label="裁剪模式">
-                    <a-radio-group v-model:value="formData.cropMode" button-style="solid">
-                      <a-radio-button value="center">
-                        居中裁剪
-                      </a-radio-button>
-                      <a-radio-button value="fill">
-                        填充模式
-                      </a-radio-button>
-                    </a-radio-group>
-                  </a-form-item>
-
-                  <!-- 自动计算的场景数 -->
-                  <div class="scene-info">
-                    <div class="scene-row">
-                      <span>场景数</span>
-                      <strong>{{ sceneCount }} 个</strong>
-                    </div>
-                    <div class="scene-row">
-                      <span>实际总时长</span>
-                      <strong>{{ actualTotalDuration }}秒</strong>
-                    </div>
-                    <div class="scene-row">
-                      <span>已填充</span>
-                      <strong :class="{ 'text-green': filledCount === sceneCount }">
-                        {{ filledCount }} / {{ sceneCount }}
-                      </strong>
-                    </div>
-                  </div>
-
-                  <!-- 按钮间距 -->
-                  <div class="spacing-sm"></div>
-
-                  <a-button
-                    type="primary"
-                    block
-                    size="large"
-                    :loading="uiState.submitting"
-                    :disabled="!canSubmit"
-                    @click="handleSubmit"
-                  >
-                    <template #icon><RocketOutlined /></template>
-                    开始混剪
-                  </a-button>
-                </a-form>
-              </div>
-            </div>
+    <!-- 主内容区：场景轨道全宽 -->
+    <main class="page-main">
+      <section class="scenes-section">
+        <div class="section-header">
+          <span class="section-title">
+            <PlaySquareOutlined />
+            场景编排
+          </span>
+          <div class="header-actions">
+            <a-button size="small" @click="clearScenes">
+              <template #icon><ClearOutlined /></template>
+              清空
+            </a-button>
+            <a-button size="small" type="primary" ghost @click="autoFillAllScenes">
+              <template #icon><ThunderboltOutlined /></template>
+              一键填充
+            </a-button>
           </div>
+        </div>
 
-          <!-- 右侧：场景格子 + 素材列表 -->
-          <div class="preview-section">
-            <!-- 场景格子区域 -->
-            <div class="card">
-              <div class="card__header">
-                <h2 class="card__title">
-                  <PlaySquareOutlined />
-                  场景编排
-                </h2>
-                <a-button size="small" @click="clearScenes">
-                  <template #icon><ClearOutlined /></template>
-                  清空
-                </a-button>
-              </div>
-              <div class="card__body">
-                <draggable
-                  v-model="dataState.scenes"
-                  item-key="index"
-                  handle=".scene-drag-handle"
-                  ghost-class="scene-ghost"
-                  class="scenes-grid"
-                  @end="onSceneDragEnd"
-                >
-                  <template #item="{ element: scene, index }">
+        <div class="scenes-list">
+          <draggable
+            v-model="dataState.scenes"
+            item-key="index"
+            handle=".scene-drag"
+            animation="200"
+            class="draggable-list"
+            @end="onSceneDragEnd"
+          >
+            <template #item="{ element: scene, index }">
+              <div
+                class="scene-card"
+                :class="{
+                  'scene-card--complete': scene.candidates?.length > 0
+                }"
+              >
+                <!-- 场景头部 -->
+                <div class="scene-header">
+                  <div class="scene-drag">
+                    <HolderOutlined />
+                  </div>
+                  <div class="scene-index">{{ index + 1 }}</div>
+                  <div class="scene-duration">{{ formData.clipDuration }}s</div>
+                  <div class="scene-status">
+                    <a-badge
+                      :count="scene.candidates?.length || 0"
+                      :number-style="{
+                        backgroundColor: scene.candidates?.length
+                          ? 'var(--color-primary-500)'
+                          : 'var(--color-gray-300)'
+                      }"
+                    />
+                  </div>
+                </div>
+
+                <!-- 场景内容 -->
+                <div class="scene-body">
+                  <template v-if="scene.candidates?.length > 0">
                     <div
-                      class="scene-container"
-                      :class="{ 'scene-container--selected': uiState.selectedSceneIndex === index }"
-                      @click="selectScene(index)"
+                      v-for="(candidate, cIndex) in scene.candidates"
+                      :key="cIndex"
+                      class="candidate-thumb"
+                      @click.stop="removeCandidate(index, cIndex)"
                     >
-                      <!-- 场景标题 -->
-                      <div class="scene-header">
-                        <div class="scene-title-row">
-                          <!-- 拖拽手柄 -->
-                          <div class="scene-drag-handle" @click.stop>
-                            <HolderOutlined />
-                          </div>
-                          <h3 class="scene-title">
-                            <span class="scene-index">场景 {{ index + 1 }}</span>
-                            <span class="scene-duration">{{ formData.clipDuration }}s</span>
-                            <span v-if="scene.candidates && scene.candidates.length > 0" class="scene-count">
-                              候选 {{ scene.candidates.length }}/{{ constants.MAX_CANDIDATES_PER_SCENE }}
-                            </span>
-                          </h3>
-                        </div>
-                        <!-- 场景素材源：只读标签显示 -->
-                        <div class="scene-source">
-                          <span class="scene-source__text">
-                            来源: {{ getSceneEffectiveGroupName(scene) }}
-                          </span>
-                          <template v-if="scene.groupId">
-                            <a-tooltip title="重置为默认素材源">
-                              <a-button
-                                type="text"
-                                size="small"
-                                class="reset-source-btn"
-                                @click.stop="handleSceneGroupChange(index, null)"
-                              >
-                                <CloseOutlined />
-                              </a-button>
-                            </a-tooltip>
-                            <a-tooltip title="应用到所有场景">
-                              <a-button
-                                type="text"
-                                size="small"
-                                class="apply-all-btn"
-                                @click.stop="applyGroupToAllScenes(scene.groupId)"
-                              >
-                                <CopyOutlined />
-                              </a-button>
-                            </a-tooltip>
-                          </template>
-                        </div>
+                      <img
+                        v-if="getFileById(candidate.fileId)?.coverBase64"
+                        :src="getFileById(candidate.fileId).coverBase64"
+                      />
+                      <div v-else class="thumb-placeholder">
+                        <VideoCameraOutlined />
                       </div>
-
-                      <!-- 场景内容区域 - Grid布局 -->
-                      <div class="scene-grid">
-                        <!-- 空态格子（始终显示在第一个） -->
-                        <div
-                          class="scene-empty"
-                          @click.stop="openSceneSelector(index)"
-                        >
-                          <PlusOutlined />
-                          <span>点击添加候选</span>
-                        </div>
-
-                        <!-- 已填充：显示候选列表 -->
-                        <div
-                          v-for="(candidate, cIndex) in scene.candidates"
-                          :key="cIndex"
-                          class="candidate-item"
-                          @click.stop="removeCandidate(index, cIndex)"
-                        >
-                          <img
-                            v-if="getFileById(candidate.fileId)?.coverBase64"
-                            :src="getFileById(candidate.fileId).coverBase64"
-                            class="candidate-thumb"
-                          />
-                          <div v-else class="candidate-placeholder">
-                            <VideoCameraOutlined />
-                          </div>
-                          <div class="candidate-name" :title="getFileById(candidate.fileId)?.fileName">
-                            {{ getFileById(candidate.fileId)?.fileName }}
-                          </div>
-                          <!-- 删除按钮 -->
-                          <a-button
-                            class="candidate-remove"
-                            type="text"
-                            size="small"
-                            danger
-                            @click.stop="removeCandidate(index, cIndex)"
-                          >
-                            <CloseOutlined />
-                          </a-button>
-                        </div>
+                      <div class="thumb-order">{{ cIndex + 1 }}</div>
+                      <div class="thumb-remove">
+                        <CloseOutlined />
                       </div>
                     </div>
+                    <div
+                      v-if="scene.candidates.length < constants.MAX_CANDIDATES_PER_SCENE"
+                      class="candidate-add"
+                      @click.stop="openSceneSelector(index)"
+                    >
+                      <PlusOutlined />
+                      <span>继续添加</span>
+                    </div>
                   </template>
-                </draggable>
-              </div>
-            </div>
+                  <template v-else>
+                    <div class="scene-empty" @click.stop="openSceneSelector(index)">
+                      <PlusCircleOutlined />
+                      <span>点击添加候选素材</span>
+                      <span class="empty-hint">最多 {{ constants.MAX_CANDIDATES_PER_SCENE }} 个</span>
+                    </div>
+                  </template>
+                </div>
 
-            <!-- 素材库 -->
-            <div class="card" style="flex: 1;">
-              <div class="card__header">
-                <h2 class="card__title">
-                  <FolderOutlined />
-                  素材库
-                </h2>
-              </div>
-
-              <!-- 筛选层：分组 + 搜索 + 统计 -->
-              <div class="library-filter">
-                <div class="library-filter__tabs">
+                <!-- 场景底部：素材来源（只读） -->
+                <div class="scene-footer">
+                  <span class="source-label">来源:</span>
                   <a-tag
-                    v-for="group in dataState.groupList"
-                    :key="group.id"
-                    :color="uiState.selectedLibraryGroup === group.id ? 'blue' : 'default'"
-                    class="library-tab"
-                    @click="handleLibraryGroupChange(group.id)"
+                    size="small"
+                    :color="scene.groupId ? 'blue' : 'default'"
                   >
-                    {{ group.name }}
+                    {{ getSceneEffectiveGroupName(scene) }}
                   </a-tag>
                 </div>
-                <div class="library-filter__actions">
-                  <a-input-search
-                    v-model:value="uiState.searchKeyword"
-                    placeholder="搜索素材..."
-                    size="small"
-                    style="width: 140px;"
-                    allow-clear
-                  />
-                  <span class="library-filter__count">共 {{ currentLibraryMaterialCount }} 个</span>
-                </div>
               </div>
+            </template>
+          </draggable>
+        </div>
+      </section>
+    </main>
 
-              <!-- 操作层：目标场景 + 一键填充 -->
-              <div class="library-actions">
-                <div class="library-actions__scenes">
-                  <span class="library-actions__label">目标场景</span>
-                  <div class="library-actions__tags">
-                    <a-tag
-                      v-for="(scene, index) in dataState.scenes"
-                      :key="index"
-                      :color="uiState.selectedSceneIndex === index ? 'blue' : 'default'"
-                      class="scene-tag"
-                      @click="selectScene(index)"
-                    >
-                      {{ index + 1 }}
-                      <span class="scene-tag__count">{{ scene.candidates?.length || 0 }}</span>
-                    </a-tag>
-                  </div>
-                </div>
-                <a-button
-                  type="primary"
-                  size="small"
-                  :disabled="currentLibraryMaterialCount === 0"
-                  @click="autoFillScenes('supplement', constants.MAX_CANDIDATES_PER_SCENE)"
-                >
-                  <template #icon><ThunderboltOutlined /></template>
-                  一键填充全部
-                </a-button>
-              </div>
+    <!-- 高级设置抽屉 -->
+    <a-drawer
+      v-model:open="showSettings"
+      title="高级设置"
+      placement="right"
+      :width="320"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="裁剪模式">
+          <a-radio-group v-model:value="formData.cropMode" button-style="solid">
+            <a-radio-button value="center">居中裁剪</a-radio-button>
+            <a-radio-button value="fill">填充模式</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
 
-              <div class="card__body" style="height: 100%; overflow: auto;">
-                <a-spin :spinning="uiState.loadingFiles">
-                  <template v-if="filteredMaterials.length > 0">
-                    <div class="material-grid">
-                      <div
-                        v-for="file in filteredMaterials"
-                        :key="file.id"
-                        class="material-item"
-                        :class="{ 'material-item--used': isFileUsed(file.id) }"
-                        @click="handleFileClick(file)"
-                      >
-                        <!-- 封面图 -->
-                        <div class="material-thumb">
-                          <img v-if="file.coverBase64" :src="file.coverBase64" :alt="file.displayName || file.fileName" />
-                          <div v-else class="material-placeholder">
-                            <VideoCameraOutlined />
-                          </div>
-                        </div>
+        <a-divider />
 
-                        <!-- 已使用标记（带 Tooltip 显示详情） -->
-                        <a-tooltip v-if="isFileUsed(file.id)" :title="getFileUsageDetails(file.id)">
-                          <span class="material-badge">
-                            已使用 ×{{ getFileUsageCount(file.id) }}
-                          </span>
-                        </a-tooltip>
-
-                        <!-- 文件名 -->
-                        <div class="material-name" :title="file.displayName || file.fileName">
-                          {{ file.displayName || file.fileName }}
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-
-                  <a-empty v-else-if="currentLibraryMaterialCount > 0" description="未找到匹配的素材" />
-                  <a-empty v-else description="该分组暂无素材" />
-                </a-spin>
-              </div>
+        <a-form-item label="统计信息">
+          <div class="stats-row">
+            <div class="stat-item">
+              <span class="stat-value">{{ sceneCount }}</span>
+              <span class="stat-label">场景数</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-value">{{ filledCount }}</span>
+              <span class="stat-label">已填充</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-value">{{ actualTotalDuration }}s</span>
+              <span class="stat-label">总时长</span>
             </div>
           </div>
-        </div>
-      </template>
+        </a-form-item>
+      </a-form>
+    </a-drawer>
 
-      <!-- 候选选择弹窗 -->
-      <SceneSelectorModal
-        v-model:visible="uiState.selectorVisible"
-        :scene-index="uiState.currentSceneIndex"
-        :scene-group-id="dataState.scenes[uiState.currentSceneIndex]?.groupId"
-        :global-group-id="uiState.selectedLibraryGroup"
-        :group-list="dataState.groupList"
-        :all-group-files="dataState.allGroupFiles"
-        :group-files="dataState.groupFiles"
-        :initial-candidates="currentSceneCandidateIds"
-        :max-candidates="constants.MAX_CANDIDATES_PER_SCENE"
-        @confirm="handleModalConfirm"
-        @load-group-files="loadGroupFiles"
-      />
-    </div>
-  </FullWidthLayout>
+    <!-- 场景选择弹窗 -->
+    <SceneSelectorModal
+      v-model:visible="uiState.selectorVisible"
+      :scene-index="uiState.currentSceneIndex"
+      :scene-group-id="dataState.scenes[uiState.currentSceneIndex]?.groupId"
+      :global-group-id="uiState.selectedLibraryGroup"
+      :group-list="dataState.groupList"
+      :all-group-files="dataState.allGroupFiles"
+      :group-files="dataState.groupFiles"
+      :initial-candidates="currentSceneCandidateIds"
+      :max-candidates="constants.MAX_CANDIDATES_PER_SCENE"
+      @confirm="handleModalConfirm"
+      @load-group-files="loadGroupFiles"
+    />
+
+    <!-- 一键填充分组选择弹窗 -->
+    <GroupSelectModal
+      v-model:visible="uiState.groupSelectVisible"
+      :group-list="dataState.groupList"
+      @confirm="handleGroupSelectConfirm"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -375,30 +265,32 @@ import { message } from 'ant-design-vue'
 import { useRouter } from 'vue-router'
 import draggable from 'vuedraggable'
 
-// 图标导入
 import {
-  RocketOutlined,
-  VideoCameraOutlined,
-  PlusOutlined,
-  CloseOutlined,
-  ThunderboltOutlined,
+  ArrowLeftOutlined,
   SettingOutlined,
+  RocketOutlined,
   PlaySquareOutlined,
-  FolderOutlined,
   ClearOutlined,
-  CopyOutlined,
+  ThunderboltOutlined,
   HolderOutlined,
+  PlusOutlined,
+  PlusCircleOutlined,
+  CheckCircleFilled,
+  VideoCameraOutlined,
+  CloseOutlined
 } from '@ant-design/icons-vue'
 
-// API 服务
 import { MaterialService, MaterialGroupService } from '@/api/material'
 import { MixTaskService } from '@/api/mixTask'
-import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
 import SceneSelectorModal from './components/SceneSelectorModal.vue'
+import GroupSelectModal from './components/GroupSelectModal.vue'
 
 const router = useRouter()
 
-// ==================== 工具函数 ====================
+// ════════════════════════════════════════════════════════════════════════════
+// 常量 & 工具函数
+// ════════════════════════════════════════════════════════════════════════════
+const constants = { MAX_CANDIDATES_PER_SCENE: 10 }
 
 const createDeterministicRandom = (seed) => {
   let x = Math.sin(seed) * 10000
@@ -411,20 +303,21 @@ const createDeterministicRandom = (seed) => {
 const randomlySelectMaterials = (count, materials, seed) => {
   const shuffled = [...materials]
   const random = createDeterministicRandom(seed)
-
   for (let i = shuffled.length - 1; i > 0; i--) {
     const j = Math.floor(random() * (i + 1))
     ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
   }
-
-  const selected = shuffled.slice(0, Math.min(count, shuffled.length))
-  return selected.map(material => ({
-    fileId: material.id,
-    fileUrl: material.fileUrl
+  return shuffled.slice(0, Math.min(count, shuffled.length)).map(m => ({
+    fileId: m.id,
+    fileUrl: m.fileUrl
   }))
 }
 
-// ==================== 表单数据 ====================
+// ════════════════════════════════════════════════════════════════════════════
+// 状态
+// ════════════════════════════════════════════════════════════════════════════
+const showSettings = ref(false)
+
 const formData = ref({
   title: '',
   produceCount: Number(localStorage.getItem('mix-produce-count')) || 3,
@@ -433,36 +326,26 @@ const formData = ref({
   cropMode: 'center'
 })
 
-const saveProduceCount = () => {
-  localStorage.setItem('mix-produce-count', formData.value.produceCount.toString())
-}
-
-// ==================== 状态管理 ====================
 const uiState = ref({
   loadingGroups: false,
   loadingFiles: false,
   submitting: false,
   selectorVisible: false,
   currentSceneIndex: -1,
-  // 场景选中态：当前选中的场景索引（null表示未选中）
-  selectedSceneIndex: null,
-  // 素材搜索关键词
-  searchKeyword: '',
-  // 素材库当前选中的分组ID
-  selectedLibraryGroup: null
+  selectedLibraryGroup: null,
+  groupSelectVisible: false
 })
 
 const dataState = ref({
   groupList: [],
   groupFiles: [],
-  // 新增：按分组缓存的素材
   allGroupFiles: {},
   scenes: []
 })
 
-const constants = { MAX_CANDIDATES_PER_SCENE: 10 }
-
+// ════════════════════════════════════════════════════════════════════════════
 // 计算属性
+// ════════════════════════════════════════════════════════════════════════════
 const sceneCount = computed(() =>
   Math.floor(formData.value.totalDuration / formData.value.clipDuration)
 )
@@ -475,47 +358,45 @@ const filledCount = computed(() =>
   dataState.value.scenes.filter(s => s.candidates?.length > 0).length
 )
 
-// 带搜索过滤的素材列表（根据素材库选中的分组）
-const filteredMaterials = computed(() => {
-  const keyword = uiState.value.searchKeyword.toLowerCase().trim()
-  // 根据素材库选中的分组获取素材
-  const groupId = uiState.value.selectedLibraryGroup
-  const materials = groupId
-    ? (dataState.value.allGroupFiles[groupId] || [])
-    : dataState.value.groupFiles
+const progressPercent = computed(() =>
+  sceneCount.value > 0 ? (filledCount.value / sceneCount.value) * 100 : 0
+)
 
-  if (!keyword) return materials
-
-  return materials.filter(file =>
-    file.fileName?.toLowerCase().includes(keyword) ||
-    file.displayName?.toLowerCase().includes(keyword)
-  )
+const currentSceneCandidateIds = computed(() => {
+  const index = uiState.value.currentSceneIndex
+  if (index < 0 || index >= dataState.value.scenes.length) return []
+  return dataState.value.scenes[index]?.candidates?.map(c => c.fileId) || []
 })
 
-// 当前素材库分组的素材数量（用于空状态判断）
-const currentLibraryMaterialCount = computed(() => {
-  const groupId = uiState.value.selectedLibraryGroup
-  return groupId
-    ? (dataState.value.allGroupFiles[groupId]?.length || 0)
-    : dataState.value.groupFiles.length
-})
+const canSubmit = computed(() => filledCount.value === sceneCount.value)
 
-// 选择目标场景
-const selectScene = (index) => {
-  uiState.value.selectedSceneIndex = index
+// ════════════════════════════════════════════════════════════════════════════
+// 工具方法
+// ════════════════════════════════════════════════════════════════════════════
+const saveProduceCount = () => {
+  localStorage.setItem('mix-produce-count', formData.value.produceCount.toString())
 }
 
-// 场景拖拽结束处理
-const onSceneDragEnd = () => {
-  // 更新场景索引
-  dataState.value.scenes.forEach((scene, index) => {
-    scene.index = index
-  })
-  // 清除选中态，避免索引错乱
-  uiState.value.selectedSceneIndex = null
+const getFileById = (fileId) => {
+  let file = dataState.value.groupFiles.find(f => f.id === fileId)
+  if (file) return file
+  for (const files of Object.values(dataState.value.allGroupFiles)) {
+    file = files.find(f => f.id === fileId)
+    if (file) return file
+  }
+  return null
 }
 
-// 监听场景数变化，自动调整场景数组
+const getSceneEffectiveGroupName = (scene) => {
+  const effectiveGroupId = scene.groupId || uiState.value.selectedLibraryGroup
+  if (!effectiveGroupId) return '默认'
+  const group = dataState.value.groupList.find(g => g.id === effectiveGroupId)
+  return group?.name || '未知'
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 场景管理
+// ════════════════════════════════════════════════════════════════════════════
 watch(sceneCount, (newCount) => {
   const current = dataState.value.scenes.length
   if (newCount > current) {
@@ -523,7 +404,7 @@ watch(sceneCount, (newCount) => {
       dataState.value.scenes.push({
         index: i,
         duration: formData.value.clipDuration,
-        groupId: null,  // 场景专属分组ID，null表示使用全局分组
+        groupId: null,
         candidates: []
       })
     }
@@ -532,72 +413,107 @@ watch(sceneCount, (newCount) => {
   }
 }, { immediate: true })
 
-// 工具函数
-const getFileById = (fileId) => {
-  // 先从当前素材库查找
-  let file = dataState.value.groupFiles.find(f => f.id === fileId)
-  if (file) return file
-
-  // 从所有缓存的素材中查找
-  for (const files of Object.values(dataState.value.allGroupFiles)) {
-    file = files.find(f => f.id === fileId)
-    if (file) return file
-  }
-  return null
-}
-
-const isFileUsed = (fileId) =>
-  dataState.value.scenes.some(scene =>
-    scene.candidates?.some(c => c.fileId === fileId)
-  )
-
-const getFileUsageCount = (fileId) => {
-  return dataState.value.scenes.reduce((count, scene) => {
-    return count + (scene.candidates?.filter(c => c.fileId === fileId).length || 0)
-  }, 0)
-}
-
-// 获取素材在各场景的使用详情（用于 Tooltip）
-const getFileUsageDetails = (fileId) => {
-  const details = []
+const onSceneDragEnd = () => {
   dataState.value.scenes.forEach((scene, index) => {
-    const count = scene.candidates?.filter(c => c.fileId === fileId).length || 0
-    if (count > 0) {
-      details.push(`场景${index + 1}: ${count}次`)
-    }
+    scene.index = index
   })
-  return details.join(', ') || '未使用'
 }
 
-// 当前场景的候选ID列表（用于弹窗）
-const currentSceneCandidateIds = computed(() => {
-  const index = uiState.value.currentSceneIndex
-  if (index < 0 || index >= dataState.value.scenes.length) return []
-  return dataState.value.scenes[index]?.candidates?.map(c => c.fileId) || []
-})
-
-// 弹窗确认处理
-// 弹窗确认处理
-const handleModalConfirm = ({ sceneIndex, fileIds, setGroupId }) => {
-  const scene = dataState.value.scenes[sceneIndex]
-  if (!scene) return
-
-  // 更新候选列表
-  const candidates = fileIds.map(fileId => ({
-    fileId,
-    fileUrl: getFileById(fileId)?.fileUrl
+const clearScenes = () => {
+  dataState.value.scenes = Array(sceneCount.value).fill(null).map((_, index) => ({
+    index,
+    duration: formData.value.clipDuration,
+    groupId: null,
+    candidates: []
   }))
-  scene.candidates = candidates
+  message.success('已清空所有场景')
+}
 
-  // 如果需要设置场景分组
-  if (setGroupId !== null && setGroupId !== undefined) {
-    scene.groupId = setGroupId
+const removeCandidate = (sceneIndex, candidateIndex) => {
+  const candidates = dataState.value.scenes[sceneIndex]?.candidates
+  if (candidates?.[candidateIndex] !== undefined) {
+    candidates.splice(candidateIndex, 1)
+    message.success('已移除候选')
+  }
+}
+
+const openSceneSelector = (index) => {
+  uiState.value.currentSceneIndex = index
+  uiState.value.selectorVisible = true
+}
+
+const openGroupSelector = (index) => {
+  const groups = dataState.value.groupList
+  if (groups.length === 0) return
+
+  const currentGroupId = dataState.value.scenes[index].groupId
+  const currentIndex = groups.findIndex(g => g.id === currentGroupId)
+  const nextIndex = (currentIndex + 1) % groups.length
+  const nextGroup = groups[nextIndex]
+
+  dataState.value.scenes[index].groupId = nextGroup.id
+  dataState.value.scenes[index].candidates = []
+  loadGroupFiles(nextGroup.id)
+  message.success(`场景${index + 1} 切换到 ${nextGroup.name}`)
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 素材操作
+// ════════════════════════════════════════════════════════════════════════════
+const autoFillAllScenes = async () => {
+  // 检查是否有分组
+  if (dataState.value.groupList.length === 0) {
+    message.warning('暂无素材分组，请先创建分组')
+    return
   }
 
-  message.success(`已为场景${sceneIndex + 1}设置${candidates.length}个候选`)
+  // 如果没有选中分组，弹出选择弹窗
+  if (!uiState.value.selectedLibraryGroup) {
+    uiState.value.groupSelectVisible = true
+    return
+  }
+
+  // 已有选中分组，直接填充
+  await doAutoFill()
 }
 
-// ==================== 数据操作 ====================
+const handleGroupSelectConfirm = async (groupId) => {
+  uiState.value.selectedLibraryGroup = groupId
+
+  // 加载该分组的素材
+  await handleLibraryGroupChange(groupId)
+
+  // 执行填充
+  await doAutoFill()
+}
+
+const doAutoFill = async () => {
+  let filled = 0
+  for (let i = 0; i < dataState.value.scenes.length; i++) {
+    const scene = dataState.value.scenes[i]
+    if (scene.candidates?.length >= 3) continue
+
+    const groupId = scene.groupId || uiState.value.selectedLibraryGroup
+    const materials = dataState.value.allGroupFiles[groupId] || await loadGroupFiles(groupId)
+
+    if (materials.length === 0) continue
+
+    const needed = 3 - (scene.candidates?.length || 0)
+    const selected = randomlySelectMaterials(needed, materials, i + Date.now())
+    scene.candidates = [...(scene.candidates || []), ...selected]
+    filled++
+  }
+
+  if (filled > 0) {
+    message.success(`已为 ${filled} 个场景填充候选素材`)
+  } else {
+    message.info('所有场景已满')
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 数据加载
+// ════════════════════════════════════════════════════════════════════════════
 const loadGroups = async () => {
   uiState.value.loadingGroups = true
   try {
@@ -612,11 +528,9 @@ const loadGroups = async () => {
   }
 }
 
-// 素材库分组切换（仅切换显示，不影响场景数据）
 const handleLibraryGroupChange = async (groupId) => {
   uiState.value.selectedLibraryGroup = groupId
 
-  // 如果该分组素材未缓存，则加载
   if (!dataState.value.allGroupFiles[groupId]) {
     uiState.value.loadingFiles = true
     try {
@@ -637,31 +551,8 @@ const handleLibraryGroupChange = async (groupId) => {
   }
 }
 
-// ==================== 场景级分组功能 ====================
-
-// 获取场景的有效分组ID（场景分组 > 素材库当前分组）
-const getSceneEffectiveGroupId = (scene) => {
-  return scene.groupId || uiState.value.selectedLibraryGroup
-}
-
-// 获取场景的有效分组名称（用于显示）
-const getSceneEffectiveGroupName = (scene) => {
-  const effectiveGroupId = getSceneEffectiveGroupId(scene)
-  return getGroupName(effectiveGroupId)
-}
-
-// 获取分组名称
-const getGroupName = (groupId) => {
-  if (!groupId) return '全局分组'
-  const group = dataState.value.groupList.find(g => g.id === groupId)
-  return group?.name || '未知分组'
-}
-
-// 加载指定分组的素材（带缓存）
 const loadGroupFiles = async (groupId) => {
   if (!groupId) return []
-
-  // 如果已缓存，直接返回
   if (dataState.value.allGroupFiles[groupId]) {
     return dataState.value.allGroupFiles[groupId]
   }
@@ -684,156 +575,28 @@ const loadGroupFiles = async (groupId) => {
   return []
 }
 
-// 场景分组切换处理
-const handleSceneGroupChange = (sceneIndex, groupId) => {
+// ════════════════════════════════════════════════════════════════════════════
+// 弹窗处理
+// ════════════════════════════════════════════════════════════════════════════
+const handleModalConfirm = ({ sceneIndex, fileIds, setGroupId }) => {
   const scene = dataState.value.scenes[sceneIndex]
   if (!scene) return
 
-  scene.candidates = []
-  scene.groupId = groupId || null
-
-  if (groupId) loadGroupFiles(groupId)
-  message.success(`场景${sceneIndex + 1}已切换到 ${getGroupName(groupId)}`)
-}
-
-// 应用分组设置到所有场景
-const applyGroupToAllScenes = (groupId) => {
-  dataState.value.scenes.forEach(scene => {
-    scene.groupId = groupId || null
-    scene.candidates = []
-  })
-  if (groupId) loadGroupFiles(groupId)
-  message.success(`已将所有场景设置为 ${getGroupName(groupId)}`)
-}
-
-// 获取所有已缓存的素材
-const getAllCachedFiles = () => {
-  const seenIds = new Set()
-  const allFiles = []
-
-  for (const files of Object.values(dataState.value.allGroupFiles)) {
-    for (const file of files) {
-      if (!seenIds.has(file.id)) {
-        seenIds.add(file.id)
-        allFiles.push(file)
-      }
-    }
-  }
-  return allFiles
-}
-
-// 根据分组ID获取素材（用于素材库显示）
-const getFilesByGroup = (groupId) =>
-  groupId ? (dataState.value.allGroupFiles[groupId] || []) : dataState.value.groupFiles
-
-// ==================== 场景操作 ====================
-const openSceneSelector = (index) => {
-  uiState.value.currentSceneIndex = index
-  uiState.value.selectorVisible = true
-}
-
-const clearScenes = () => {
-  dataState.value.scenes = Array(sceneCount.value).fill(null).map((_, index) => ({
-    index,
-    duration: formData.value.clipDuration,
-    groupId: null,  // 场景专属分组ID，null表示使用全局分组
-    candidates: []
+  scene.candidates = fileIds.map(fileId => ({
+    fileId,
+    fileUrl: getFileById(fileId)?.fileUrl
   }))
-}
 
-const clearScene = (index) => {
-  const scene = dataState.value.scenes[index]
-  if (scene) scene.candidates = []
-}
-
-const removeCandidate = (sceneIndex, candidateIndex) => {
-  const candidates = dataState.value.scenes[sceneIndex]?.candidates
-  if (candidates?.[candidateIndex] !== undefined) {
-    candidates.splice(candidateIndex, 1)
-    message.success('已删除候选素材')
-  }
-}
-
-const handleFileClick = (file) => {
-  // 优先使用选中的目标场景
-  const targetIndex = uiState.value.selectedSceneIndex
-
-  if (targetIndex !== null) {
-    // 有选中场景，添加到该场景（允许重复添加）
-    const scene = dataState.value.scenes[targetIndex]
-    if (!scene) return
-
-    if (scene.candidates.length >= constants.MAX_CANDIDATES_PER_SCENE) {
-      message.warning(`场景${targetIndex + 1}候选数量已达上限`)
-      return
-    }
-
-    scene.candidates.push({ fileId: file.id, fileUrl: file.fileUrl })
-    message.success(`已添加到场景${targetIndex + 1}`)
-    return
+  if (setGroupId !== null && setGroupId !== undefined) {
+    scene.groupId = setGroupId
   }
 
-  // 未选中场景，提示用户
-  message.info('请先点击选择目标场景')
+  message.success(`场景 ${sceneIndex + 1} 已设置 ${scene.candidates.length} 个候选`)
 }
 
-const autoFillScenes = async (strategy = 'empty_only', targetCount = 3) => {
-  const hasMaterials = dataState.value.groupFiles.length > 0 ||
-    Object.keys(dataState.value.allGroupFiles).length > 0
-  if (!hasMaterials) {
-    message.warning('请先选择素材分组并加载素材库')
-    return
-  }
-
-  let totalFilledScenes = 0
-  let totalFilledCandidates = 0
-  const incompleteScenes = []
-
-  for (let sceneIndex = 0; sceneIndex < dataState.value.scenes.length; sceneIndex++) {
-    const scene = dataState.value.scenes[sceneIndex]
-    scene.candidates ??= []
-
-    if (scene.candidates.length >= targetCount) continue
-
-    const effectiveGroupId = scene.groupId || uiState.value.selectedLibraryGroup
-    let availableMaterials = effectiveGroupId
-      ? [...(dataState.value.allGroupFiles[effectiveGroupId] || await loadGroupFiles(effectiveGroupId))]
-      : [...dataState.value.groupFiles]
-
-    if (availableMaterials.length === 0) continue
-
-    const sceneUsedIds = new Set(scene.candidates.map(c => c.fileId))
-    const availableForScene = availableMaterials.filter(m => !sceneUsedIds.has(m.id))
-    if (availableForScene.length === 0) continue
-
-    const actualFillCount = Math.min(targetCount - scene.candidates.length, availableForScene.length)
-    const selectedMaterials = randomlySelectMaterials(actualFillCount, availableForScene, sceneIndex)
-    scene.candidates.push(...selectedMaterials)
-
-    if (selectedMaterials.length > 0) {
-      totalFilledScenes++
-      totalFilledCandidates += selectedMaterials.length
-      if (scene.candidates.length < targetCount) {
-        incompleteScenes.push(sceneIndex + 1)
-      }
-    }
-  }
-
-  if (totalFilledScenes === 0) {
-    message.info('所有场景已满，无需填充')
-  } else {
-    const msg = `已为${totalFilledScenes}个场景填充${totalFilledCandidates}个候选`
-    incompleteScenes.length > 0
-      ? message.warning(`${msg}，其中${incompleteScenes.length}个场景未达到目标数量（素材不足）`)
-      : message.success(msg)
-  }
-}
-
-const canSubmit = computed(() =>
-  uiState.value.selectedLibraryGroup &&
-  filledCount.value === sceneCount.value
-)
-
+// ════════════════════════════════════════════════════════════════════════════
+// 提交
+// ════════════════════════════════════════════════════════════════════════════
 const handleSubmit = async () => {
   if (!canSubmit.value) return
 
@@ -857,7 +620,6 @@ const handleSubmit = async () => {
 
     if (res.code === 0) {
       message.success('混剪任务创建成功！')
-      router.push('/material/mix-task')
     }
   } catch (error) {
     message.error('提交失败：' + error.message)
@@ -866,818 +628,528 @@ const handleSubmit = async () => {
   }
 }
 
+// ════════════════════════════════════════════════════════════════════════════
+// 生命周期
+// ════════════════════════════════════════════════════════════════════════════
 onMounted(() => {
   loadGroups()
 })
 </script>
 
 <style scoped lang="less">
+// ════════════════════════════════════════════════════════════════════════════
+// 混剪页面 - 使用项目设计系统
+// ════════════════════════════════════════════════════════════════════════════
+
+// 🎨 使用 CSS 变量引用项目设计令牌
+@primary: var(--color-primary-500);
+@primary-light: var(--color-primary-50);
+@primary-hover: var(--color-primary-400);
+
+@success: var(--color-success-500);
+@success-light: var(--color-success-50);
+
+@warning: var(--color-warning-500);
+@danger: var(--color-error-500);
+
+@text: var(--color-text);
+@text-secondary: var(--color-text-secondary);
+@text-muted: var(--color-text-muted);
+@text-disabled: var(--color-text-disabled);
+
+@bg-page: var(--color-bg-page);
+@bg-card: var(--color-bg-card);
+@bg-elevated: var(--color-gray-100);
+
+@border: var(--color-border);
+@border-light: var(--color-gray-100);
+
+// ════════════════════════════════════════════════════════════════════════════
+// 页面容器
+// ════════════════════════════════════════════════════════════════════════════
+.mix-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: @bg-page;
+  overflow: hidden;
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 顶部操作栏
+// ════════════════════════════════════════════════════════════════════════════
 .page-header {
   display: flex;
   align-items: center;
-  gap: var(--space-4);
-
-  &__icon {
-    width: 48px;
-    height: 48px;
-    border-radius: var(--radius-lg);
-    background: var(--color-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: var(--font-size-2xl);
-    box-shadow: var(--shadow-inset-card);
-  }
-
-  &__content {
-    flex: 1;
-  }
-
-  &__title {
-    font-size: var(--font-size-2xl);
-    font-weight: 600;
-    color: var(--color-text);
-    margin: 0;
-    line-height: 1.2;
-  }
-
-  &__subtitle {
-    font-size: var(--font-size-base);
-    color: var(--color-text-secondary);
-    margin: var(--space-1) 0 0;
-  }
-}
-
-.loading-container {
-  padding: var(--space-3);
-}
-
-.mix-page {
-  min-height: calc(100vh - 140px);
-  background: var(--color-bg);
-  padding: var(--space-3) 0;
-}
-
-.content-wrapper {
-  display: flex;
-  gap: var(--space-3);
-  margin: 0 auto;
-}
-
-.params-section {
-  width: 360px;
+  justify-content: space-between;
+  height: var(--header-height);
+  padding: 0 var(--space-5);
+  background: @bg-card;
+  border-bottom: 1px solid @border;
   flex-shrink: 0;
-}
 
-// 表单标签带图标
-.label-with-icon {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-weight: 600;
-  color: var(--color-text);
-
-  .anticon {
-    color: var(--color-primary);
-    font-size: var(--font-size-lg);
-  }
-}
-
-// 标签帮助图标
-.label-help {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-base);
-  cursor: help;
-  margin-left: var(--space-1);
-
-  &:hover {
-    color: var(--color-primary);
-  }
-}
-
-.card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  height: fit-content;
-
-  &__header {
-    display: flex;
-    padding: var(--space-3) var(--space-4);
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  &__title {
-    font-size: var(--font-size-md);
-    font-weight: 600;
-    color: var(--color-text);
-    margin: 0;
+  .header-left {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: var(--space-3);
 
-    .anticon {
-      color: var(--color-primary);
-      font-size: var(--font-size-lg);
+    .page-title {
+      margin: 0;
+      font-size: var(--font-size-md);
+      font-weight: 600;
+      color: @text;
     }
   }
 
-  &__body {
-    padding: var(--space-4);
-  }
-}
-
-.preview-section {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.spacing-sm {
-  height: var(--space-2);
-}
-
-.slider-box {
-  .slider-value {
-    text-align: center;
-    margin-top: var(--space-3);
-    font-size: var(--font-size-lg);
-    font-weight: 700;
-    color: var(--color-primary);
-    padding: var(--space-2) var(--space-4);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-  }
-}
-
-.scene-info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  margin: var(--space-3) 0;
-  padding: var(--space-5);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-
-  .scene-row {
+  .header-center {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: var(--space-4);
 
-    span {
-      color: var(--color-text-secondary);
-      font-size: var(--font-size-base);
-      font-weight: 500;
-    }
+    .param-item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
 
-    strong {
-      color: var(--color-text);
-      font-size: var(--font-size-lg);
-      font-weight: 700;
+      .param-label {
+        font-size: var(--font-size-sm);
+        color: @text-secondary;
+        white-space: nowrap;
+      }
 
-      &.text-green {
-        color: var(--color-success);
+      .param-value {
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+        color: @primary;
+        min-width: 28px;
+      }
+
+      :deep(.ant-slider) {
+        margin: 0;
+
+        .ant-slider-track {
+          background: @primary;
+        }
+
+        .ant-slider-handle {
+          border-color: @primary;
+        }
+      }
+
+      :deep(.ant-select) {
+        .ant-select-selector {
+          height: 24px !important;
+          line-height: 22px !important;
+          padding: 0 var(--space-2) !important;
+        }
+
+        .ant-select-selection-item {
+          line-height: 22px !important;
+        }
       }
     }
   }
-}
 
-.btn-secondary {
-  height: 48px;
-  font-size: var(--font-size-md);
-  font-weight: 600;
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-  transition: all var(--duration-base) ease;
-
-  &:hover:not(:disabled) {
-    background: var(--color-bg);
-    border-color: var(--color-primary);
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
-
-.scenes-grid {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.scene-container {
-  width: 100%;
-  padding: var(--space-3);
-  border: 2px solid transparent;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.03);
-  }
-
-  &--selected {
-    border-color: var(--color-primary);
-    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.08);
-  }
-}
-
-.scene-header {
-  margin-bottom: var(--space-3);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.scene-title-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-// 拖拽手柄样式
-.scene-drag-handle {
-  cursor: grab;
-  color: var(--color-text-secondary);
-  padding: var(--space-1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    color: var(--color-primary);
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-// 拖拽时的幽灵样式
-.scene-ghost {
-  opacity: 0.5;
-  background: var(--color-primary-light);
-}
-
-// 场景素材源样式（只读显示）
-.scene-source {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-
-  &__text {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-  }
-
-  .reset-source-btn,
-  .apply-all-btn {
-    padding: 0 4px;
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-
-    &:hover {
-      color: var(--color-primary);
-    }
-  }
-}
-
-.apply-all-btn {
-  padding: 2px 6px;
-  color: var(--color-text-3);
-
-  &:hover {
-    color: var(--color-primary);
-  }
-}
-
-.scene-title {
-  font-size: var(--font-size-md);
-  font-weight: 600;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-
-  .scene-index {
-    color: var(--color-primary);
-    font-weight: 700;
-  }
-
-  .scene-duration {
-    font-size: var(--font-size-base);
-    font-weight: 500;
-    padding: var(--space-1) var(--space-3);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    color: var(--color-text);
-    border-radius: var(--radius-base);
-  }
-
-  .scene-count {
-    font-size: var(--font-size-sm);
-    color: var(--color-success);
-    margin-left: auto;
-    padding: var(--space-1) var(--space-3);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-base);
-    font-weight: 600;
-  }
-}
-
-.scene-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: var(--space-2);
-  align-items: start;
-}
-
-.scene-empty {
-  width: 140px;
-  height: 140px;
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all var(--duration-base) ease;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  background: var(--color-surface);
-  position: relative;
-
-  &:hover {
-    border-color: var(--color-primary);
-    background: var(--color-bg);
-    box-shadow: var(--shadow-inset-card);
-  }
-
-  .anticon {
-    font-size: 32px;
-    color: var(--color-text-secondary);
-  }
-
-  span {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    font-weight: 500;
-  }
-}
-
-.candidate-item {
-  width: 140px;
-  height: 130px;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  transition: all var(--duration-base) ease;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    box-shadow: var(--shadow-inset-card);
-    transform: translateY(-2px);
-  }
-
-  .candidate-thumb {
-    width: 100%;
-    height: 80px;
-    object-fit: cover;
-  }
-
-  .candidate-placeholder {
-    width: 100%;
-    height: 80px;
+  .header-right {
     display: flex;
     align-items: center;
-    justify-content: center;
-    background: var(--color-bg);
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-2xl);
-  }
-
-  .candidate-name {
-    font-size: var(--font-size-xs);
-    color: var(--color-text);
-    padding: var(--space-2) var(--space-2);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background: var(--color-bg);
-    border-top: 1px solid var(--color-border);
-    height: 50px;
-    line-height: 34px;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-  }
-
-  .candidate-remove {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 2;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    line-height: 1;
-    min-width: auto;
-    opacity: 0;
-    transition: all var(--duration-base) ease;
-    border-radius: var(--radius-base);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    color: var(--color-text-secondary);
-
-    &:hover {
-      background: var(--color-error);
-      color: white;
-      border-color: var(--color-error);
-      opacity: 1;
-    }
-
-    .anticon {
-      position: absolute ;
-      top: 50% ;
-      left: 50% ;
-      transform: translate(-50%, -50%);
-      font-size: var(--font-size-xs);
-    }
-  }
-
-  &:hover .candidate-remove {
-    opacity: 1;
-  }
-}
-
-// 素材库筛选层样式
-.library-filter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-4);
-  background: var(--color-surface);
-  border-bottom: 1px solid var(--color-border);
-
-  &__tabs {
-    display: flex;
     gap: var(--space-2);
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 进度条 - 状态指示器
+// ════════════════════════════════════════════════════════════════════════════
+.progress-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 36px;
+  padding: 0 var(--space-5);
+  background: @bg-card;
+  border-bottom: 1px solid @border;
+
+  .progress-track {
     flex: 1;
+    max-width: 300px;
+    height: 6px;
+    background: @border;
+    border-radius: 3px;
+    overflow: hidden;
+
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
+      border-radius: 3px;
+      transition: width var(--duration-slow) ease;
+    }
+  }
+
+  .progress-text {
+    font-size: var(--font-size-sm);
+    color: @text-secondary;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+
+    .icon-complete {
+      color: var(--color-primary-400);
+    }
+
+    .icon-pending {
+      font-weight: 500;
+      color: @primary;
+    }
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 主内容区
+// ════════════════════════════════════════════════════════════════════════════
+.page-main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 场景区 - 全宽
+// ════════════════════════════════════════════════════════════════════════════
+.scenes-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: @bg-card;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+    padding: 0 var(--space-5);
+    border-bottom: 1px solid @border-light;
+    flex-shrink: 0;
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      font-size: var(--font-size-base);
+      font-weight: 500;
+      color: @text;
+
+      .anticon {
+        color: @primary;
+      }
+    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+    }
+  }
+
+  .scenes-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-4) var(--space-5);
+
+    .draggable-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+    }
+  }
+}
+
+.scene-card {
+  background: @bg-elevated;
+  border: 1px solid @border;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: all var(--duration-base) ease;
+
+  &:hover {
+    border-color: @primary;
+    box-shadow: var(--shadow-blue);
+  }
+
+  // ✅ 已完成状态 - 青色主题
+  &--complete {
+    border-left: 3px solid var(--color-primary-400);
+    background: var(--color-primary-50);
+  }
+
+  .scene-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    background: @bg-card;
+    border-bottom: 1px solid @border-light;
+
+    .scene-drag {
+      cursor: grab;
+      color: @text-disabled;
+      padding: var(--space-1);
+
+      &:hover {
+        color: @primary;
+      }
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
+    .scene-index {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: @primary;
+      color: var(--color-text-inverse);
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      border-radius: var(--radius-button);
+    }
+
+    .scene-duration {
+      font-size: var(--font-size-sm);
+      color: @text-secondary;
+      padding: 3px var(--space-2);
+      background: var(--color-gray-100);
+      border-radius: var(--radius-tag);
+    }
+
+    .scene-status {
+      margin-left: auto;
+    }
+  }
+
+  .scene-body {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    min-height: 90px;
     overflow-x: auto;
 
-    &::-webkit-scrollbar {
-      display: none;
+    .candidate-thumb {
+      position: relative;
+      width: 100px;
+      height: 65px;
+      border-radius: var(--radius-button);
+      overflow: hidden;
+      flex-shrink: 0;
+      cursor: pointer;
+      border: 2px solid transparent;
+      transition: all var(--duration-base) ease;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .thumb-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--color-gray-100);
+        color: @text-disabled;
+      }
+
+      // 🏷️ 候选序号
+      .thumb-order {
+        position: absolute;
+        top: var(--space-1);
+        left: var(--space-1);
+        width: 18px;
+        height: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: @warning;
+        color: var(--color-text-inverse);
+        font-size: var(--font-size-xs);
+        font-weight: 600;
+        border-radius: 50%;
+      }
+
+      // 🗑️ 删除遮罩
+      .thumb-remove {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(239, 68, 68, 0.9);
+        color: var(--color-text-inverse);
+        font-size: var(--font-size-md);
+        opacity: 0;
+        transition: opacity var(--duration-base) ease;
+      }
+
+      &:hover {
+        border-color: @danger;
+
+        .thumb-remove {
+          opacity: 1;
+        }
+      }
+    }
+
+    // ➕ 添加更多
+    .candidate-add {
+      display: flex;
+      align-items: center;
+      gap: var(--space-1);
+      padding: 18px var(--space-5);
+      border: 2px dashed var(--color-gray-300);
+      border-radius: var(--radius-button);
+      color: @text-muted;
+      font-size: var(--font-size-sm);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: all var(--duration-base) ease;
+
+      &:hover {
+        border-color: @primary;
+        color: @primary;
+        background: @primary-light;
+      }
+    }
+
+    // 📭 空状态
+    .scene-empty {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-2);
+      padding: var(--space-6);
+      border: 2px dashed var(--color-gray-300);
+      border-radius: var(--radius-lg);
+      color: @text-muted;
+      font-size: var(--font-size-base);
+      cursor: pointer;
+      transition: all var(--duration-base) ease;
+
+      .anticon {
+        font-size: 28px;
+        color: @text-disabled;
+      }
+
+      .empty-hint {
+        font-size: var(--font-size-xs);
+        color: @text-disabled;
+      }
+
+      &:hover {
+        border-color: @primary;
+        color: @primary;
+        background: @primary-light;
+
+        .anticon {
+          color: @primary;
+        }
+      }
     }
   }
 
-  &__actions {
+  // 📎 来源标签
+  .scene-footer {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
-    flex-shrink: 0;
-  }
-
-  &__count {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-    white-space: nowrap;
-  }
-}
-
-// 素材库操作层样式
-.library-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-4);
-  background: var(--color-bg);
-  border-bottom: 1px solid var(--color-border);
-
-  &__scenes {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__label {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-    flex-shrink: 0;
-  }
-
-  &__tags {
-    display: flex;
-    flex-wrap: wrap;
     gap: var(--space-1);
-  }
-}
+    padding: var(--space-2) var(--space-4);
+    border-top: 1px solid @border-light;
+    background: @bg-card;
 
-.library-tab {
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  user-select: none;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.material-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: var(--space-2);
-}
-
-.material-item {
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  transition: all var(--duration-base) ease;
-  position: relative;
-
-  &:hover {
-    box-shadow: var(--shadow-inset-card);
-    transform: translateY(-2px);
-  }
-
-  &--used {
-    opacity: 0.6;
-
-    &:hover {
-      transform: none;
-      box-shadow: none;
+    .source-label {
+      font-size: var(--font-size-xs);
+      color: @text-muted;
     }
   }
 }
 
-.material-thumb {
-  width: 100%;
-  height: 100px;
-  background: var(--color-bg);
+// ════════════════════════════════════════════════════════════════════════════
+// 统计信息 - 抽屉内
+// ════════════════════════════════════════════════════════════════════════════
+.stats-row {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  font-size: 28px;
+  gap: var(--space-3);
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.material-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.material-badge {
-  position: absolute;
-  top: var(--space-2);
-  right: var(--space-2);
-  background: var(--color-error);
-  color: #fff;
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-base);
-  font-size: var(--font-size-xs);
-  z-index: 2;
-  font-weight: 600;
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
-}
-
-.material-name {
-  padding: var(--space-2);
-  font-size: var(--font-size-sm);
-  color: var(--color-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background: var(--color-bg);
-  font-weight: 500;
-}
-
-.selector-container {
-  .selector-actions {
-    margin-bottom: var(--space-2);
-    padding: var(--space-4);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border);
-  }
-}
-
-.selector-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--space-2);
-  max-height: 480px;
-  overflow-y: auto;
-  padding: var(--space-2);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-}
-
-.selector-item {
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  border: 2px solid transparent;
-  transition: all var(--duration-base) ease;
-  position: relative;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-inset-card);
-
-  &:hover {
-    border-color: var(--color-primary);
-    box-shadow: var(--shadow-inset-card);
-  }
-
-  &--selected {
-    border-color: var(--color-success);
-    box-shadow: var(--shadow-inset-card);
-  }
-
-  .selector-thumb {
-    aspect-ratio: 16/9;
-    background: var(--color-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-2xl);
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  .selector-name {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--font-size-xs);
+  .stat-item {
+    flex: 1;
     text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 500;
-    color: var(--color-text);
-    background: var(--color-bg);
-  }
+    padding: var(--space-3);
+    background: var(--color-gray-100);
+    border-radius: var(--radius-button);
 
-  .selector-checkmark {
-    position: absolute;
-    top: var(--space-2);
-    right: var(--space-2);
-    background: var(--color-success);
-    color: #fff;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--font-size-base);
-    z-index: 2;
-    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
+    .stat-value {
+      display: block;
+      font-size: var(--font-size-xl);
+      font-weight: 600;
+      color: @primary;
+    }
+
+    .stat-label {
+      display: block;
+      font-size: var(--font-size-xs);
+      color: @text-muted;
+      margin-top: var(--space-1);
+    }
   }
 }
 
-.selector-actions-footer {
-  margin-top: var(--space-2);
-  padding: var(--space-4);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  text-align: right;
-  border: 1px solid var(--color-border);
-}
-
-:deep(.selector-modal) {
-  .ant-modal-content {
-    border-radius: var(--radius-md);
-    overflow: hidden;
-  }
-
-  .ant-modal-header {
-    padding: var(--space-5);
-    border-bottom: 1px solid var(--color-border);
-    background: var(--color-surface);
-  }
-
-  .ant-modal-title {
-    font-weight: 600;
-    color: var(--color-text);
-  }
-
-  .ant-modal-body {
-    padding: var(--space-5);
-  }
-}
-
-@media (max-width: 1200px) {
-  .content-wrapper {
-    flex-direction: column;
-  }
-
-  .params-section {
-    width: 100%;
-  }
-
-  .selector-grid {
-    grid-template-columns: repeat(3, 1fr);
+// ════════════════════════════════════════════════════════════════════════════
+// 响应式适配
+// ════════════════════════════════════════════════════════════════════════════
+@media (max-width: 1000px) {
+  .header-center {
+    display: none !important;
   }
 }
 
 @media (max-width: 768px) {
-  .mix-page {
-    padding: var(--space-2);
-  }
-
-  .material-grid,
-  .scene-grid,
-  .selector-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-2);
-  }
-
-  .scene-empty,
-  .candidate-item {
-    width: 100%;
-  }
-
-  .loading-container {
-    padding: var(--space-2);
-  }
-}
-
-@media (max-width: 480px) {
   .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-3);
+    flex-wrap: wrap;
+    height: auto;
+    padding: var(--space-3);
+    gap: var(--space-2);
 
-    &__title {
-      font-size: var(--font-size-xl);
+    .header-left {
+      order: 1;
     }
 
-    &__subtitle {
-      font-size: var(--font-size-sm);
+    .header-right {
+      order: 2;
+    }
+
+    .header-center {
+      order: 3;
+      width: 100%;
+      justify-content: flex-start;
+      display: flex !important;
     }
   }
 
-  .material-grid,
-  .scene-grid,
-  .selector-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-1);
-  }
-}
-
-// 场景 Tag 样式
-.scene-tag {
-  cursor: pointer;
-  transition: all 0.2s ease;
-  user-select: none;
-  padding: 0 6px;
-  font-size: var(--font-size-xs);
-  line-height: 20px;
-
-  &:hover {
-    opacity: 0.8;
-  }
-
-  &__count {
-    font-size: 10px;
-    opacity: 0.7;
-    margin-left: 2px;
+  .scene-card {
+    .scene-body {
+      .candidate-thumb {
+        width: 80px;
+        height: 55px;
+      }
+    }
   }
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue b/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue
new file mode 100644
index 0000000000..b1e29489f1
--- /dev/null
+++ b/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue
@@ -0,0 +1,135 @@
+<template>
+  <a-modal
+    :open="visible"
+    title="选择素材分组"
+    :width="400"
+    :footer="null"
+    centered
+    @update:open="$emit('update:visible', $event)"
+  >
+    <div class="group-select-content">
+      <p class="group-select-hint">请选择用于填充的素材分组：</p>
+      <div class="group-select-list">
+        <div
+          v-for="group in groupList"
+          :key="group.id"
+          class="group-select-item"
+          :class="{ 'group-select-item--active': tempSelectedId === group.id }"
+          @click="tempSelectedId = group.id"
+        >
+          <FolderOutlined class="group-icon" />
+          <span class="group-name">{{ group.name }}</span>
+          <CheckOutlined v-if="tempSelectedId === group.id" class="group-check" />
+        </div>
+      </div>
+      <div class="group-select-footer">
+        <a-button @click="$emit('update:visible', false)">取消</a-button>
+        <a-button
+          type="primary"
+          :disabled="!tempSelectedId"
+          @click="handleConfirm"
+        >
+          确认填充
+        </a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { FolderOutlined, CheckOutlined } from '@ant-design/icons-vue'
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  groupList: { type: Array, default: () => [] },
+  defaultGroupId: { type: [Number, String], default: null }
+})
+
+const emit = defineEmits(['update:visible', 'confirm'])
+
+const tempSelectedId = ref(null)
+
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    tempSelectedId.value = props.defaultGroupId || (props.groupList[0]?.id ?? null)
+  }
+})
+
+const handleConfirm = () => {
+  if (!tempSelectedId.value) return
+  emit('confirm', tempSelectedId.value)
+  emit('update:visible', false)
+}
+</script>
+
+<style scoped lang="less">
+.group-select-content {
+  .group-select-hint {
+    margin: 0 0 16px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .group-select-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    margin-bottom: 20px;
+  }
+
+  .group-select-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: #1890ff;
+      background: #f0f7ff;
+    }
+
+    &--active {
+      border-color: #1890ff;
+      background: #e6f7ff;
+
+      .group-icon {
+        color: #1890ff;
+      }
+
+      .group-name {
+        color: #1890ff;
+        font-weight: 500;
+      }
+    }
+
+    .group-icon {
+      font-size: 18px;
+      color: #8c8c8c;
+    }
+
+    .group-name {
+      flex: 1;
+      font-size: 14px;
+      color: #333;
+    }
+
+    .group-check {
+      font-size: 14px;
+      color: #1890ff;
+    }
+  }
+
+  .group-select-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+}
+</style>
diff --git a/frontend/app/web-gold/src/views/material/components/SceneSelectorModal.vue b/frontend/app/web-gold/src/views/material/components/SceneSelectorModal.vue
index a64da25598..c1b28f47a1 100644
--- a/frontend/app/web-gold/src/views/material/components/SceneSelectorModal.vue
+++ b/frontend/app/web-gold/src/views/material/components/SceneSelectorModal.vue
@@ -1,146 +1,147 @@
 <template>
   <a-modal
     :open="visible"
-    :title="modalTitle"
     :footer="null"
+    :closable="false"
     width="800px"
-    class="selector-modal"
+    centered
+    class="scene-selector-modal"
     @update:open="$emit('update:visible', $event)"
   >
-    <div class="selector-container">
-      <!-- 分组选择器 + 批量操作按钮 -->
-      <div class="selector-actions">
-        <a-space>
-          <!-- 分组选择器 -->
-          <a-select
-            :value="selectorGroupId"
-            placeholder="使用场景默认分组"
-            size="small"
-            style="width: 160px;"
-            allow-clear
-            @change="handleSelectorGroupChange"
-          >
-            <a-select-option v-for="g in groupList" :key="g.id" :value="g.id">
-              {{ g.name }}
-            </a-select-option>
-          </a-select>
-          <a-divider type="vertical" />
-          <a-button size="small" @click="handleSelectAll">
-            <template #icon><SelectOutlined /></template>
-            全选
-          </a-button>
-          <a-button size="small" @click="handleClearSelection">
-            <template #icon><StopOutlined /></template>
-            清空
-          </a-button>
-          <a-button size="small" @click="handleAutoFill">
-            <template #icon><ThunderboltOutlined /></template>
-            智能填充
-          </a-button>
-        </a-space>
-      </div>
-
-      <!-- 候选网格 -->
-      <div class="selector-grid">
-        <div
-          v-for="file in selectorFiles"
-          :key="file.id"
-          class="selector-item"
-          :class="{ 'selector-item--selected': isSelected(file.id) }"
-          @click="toggleSelection(file)"
-        >
-          <div class="selector-thumb">
-            <img v-if="file.coverBase64" :src="file.coverBase64" />
-            <VideoCameraOutlined v-else />
-          </div>
-          <div class="selector-name">{{ file.displayName || file.fileName }}</div>
-          <div v-if="isSelected(file.id)" class="selector-checkmark">
-            <CheckOutlined />
-          </div>
+    <!-- 顶部 -->
+    <div class="modal-header">
+      <div class="header-left">
+        <div class="scene-badge">场景 {{ sceneIndex + 1 }}</div>
+        <div class="counter">
+          <span class="counter-current">{{ tempSelectedFiles.length }}</span>
+          <span class="counter-sep">/</span>
+          <span class="counter-max">{{ maxCandidates }}</span>
         </div>
       </div>
 
-      <!-- 底部操作按钮 -->
-      <div class="selector-actions-footer">
-        <a-space>
-          <a-button @click="$emit('update:visible', false)">取消</a-button>
-          <a-button type="primary" @click="handleConfirm">确定</a-button>
-        </a-space>
+      <!-- 分组切换 -->
+      <div v-if="groupList.length > 1" class="group-tabs">
+        <a-tag
+          v-for="g in groupList"
+          :key="g.id"
+          :color="selectorGroupId === g.id ? 'blue' : 'default'"
+          style="cursor: pointer;"
+          @click="handleSelectorGroupChange(g.id)"
+        >
+          {{ g.name }}
+        </a-tag>
       </div>
+
+      <a-button type="text" size="small" @click="$emit('update:visible', false)">
+        <CloseOutlined />
+      </a-button>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <a-space size="small">
+        <a-button size="small" @click="handleSelectAll">
+          <template #icon><CheckSquareOutlined /></template>
+          全选
+        </a-button>
+        <a-button size="small" @click="handleClearSelection">
+          <template #icon><CloseSquareOutlined /></template>
+          清空
+        </a-button>
+        <a-button size="small" type="primary" ghost @click="handleAutoFill">
+          <template #icon><ThunderboltOutlined /></template>
+          随机
+        </a-button>
+      </a-space>
+      <span class="toolbar-hint">点击选择 · 双击确认 · Enter 提交</span>
+    </div>
+
+    <!-- 素材网格 -->
+    <div class="material-grid">
+      <template v-if="selectorFiles.length > 0">
+        <div
+          v-for="(file, index) in selectorFiles"
+          :key="file.id"
+          class="material-card"
+          :class="{ 'material-card--selected': isSelected(file.id) }"
+          :style="{ animationDelay: `${index * 20}ms` }"
+          @click="toggleSelection(file)"
+          @dblclick="handleQuickConfirm(file)"
+        >
+          <div class="card-cover">
+            <img v-if="file.coverBase64" :src="file.coverBase64" />
+            <div v-else class="cover-placeholder">
+              <VideoCameraOutlined />
+            </div>
+
+            <!-- 选中标记 -->
+            <div v-if="isSelected(file.id)" class="card-check">
+              <CheckOutlined />
+            </div>
+
+            <!-- 序号 -->
+            <div v-if="isSelected(file.id)" class="card-order">
+              {{ getSelectionOrder(file.id) }}
+            </div>
+          </div>
+          <div class="card-name">{{ file.displayName || file.fileName }}</div>
+        </div>
+      </template>
+
+      <a-empty v-else description="暂无素材" />
+    </div>
+
+    <!-- 底部 -->
+    <div class="modal-footer">
+      <a-space>
+        <a-button @click="$emit('update:visible', false)">取消</a-button>
+        <a-button
+          type="primary"
+          :disabled="tempSelectedFiles.length === 0"
+          @click="handleConfirm"
+        >
+          <template #icon><CheckOutlined /></template>
+          确认选择
+        </a-button>
+      </a-space>
     </div>
   </a-modal>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
 import { message } from 'ant-design-vue'
 import {
   VideoCameraOutlined,
-  ThunderboltOutlined,
   CheckOutlined,
-  SelectOutlined,
-  StopOutlined
+  CloseOutlined,
+  CheckSquareOutlined,
+  CloseSquareOutlined,
+  ThunderboltOutlined
 } from '@ant-design/icons-vue'
 
 const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  sceneIndex: {
-    type: Number,
-    default: -1
-  },
-  sceneGroupId: {
-    type: [Number, String],
-    default: null
-  },
-  globalGroupId: {
-    type: [Number, String],
-    default: null
-  },
-  groupList: {
-    type: Array,
-    default: () => []
-  },
-  allGroupFiles: {
-    type: Object,
-    default: () => ({})
-  },
-  groupFiles: {
-    type: Array,
-    default: () => []
-  },
-  initialCandidates: {
-    type: Array,
-    default: () => []
-  },
-  maxCandidates: {
-    type: Number,
-    default: 10
-  }
+  visible: { type: Boolean, default: false },
+  sceneIndex: { type: Number, default: -1 },
+  sceneGroupId: { type: [Number, String], default: null },
+  globalGroupId: { type: [Number, String], default: null },
+  groupList: { type: Array, default: () => [] },
+  allGroupFiles: { type: Object, default: () => ({}) },
+  groupFiles: { type: Array, default: () => [] },
+  initialCandidates: { type: Array, default: () => [] },
+  maxCandidates: { type: Number, default: 10 }
 })
 
 const emit = defineEmits(['update:visible', 'confirm', 'load-group-files'])
 
-// 弹窗分组选择
 const selectorGroupId = ref(null)
-
-// 临时选中的文件ID列表
 const tempSelectedFiles = ref([])
 
-// 弹窗标题
-const modalTitle = computed(() =>
-  `场景${props.sceneIndex + 1} - 已选择 ${tempSelectedFiles.value.length}/${props.maxCandidates} 个候选`
-)
-
-// 弹窗中显示的素材列表
 const selectorFiles = computed(() => {
   const groupId = selectorGroupId.value
   if (groupId) {
     return props.allGroupFiles[groupId] || []
   }
-  // 使用场景分组或全局分组
   const effectiveGroupId = props.sceneGroupId || props.globalGroupId
   if (effectiveGroupId) {
     return props.allGroupFiles[effectiveGroupId] || props.groupFiles
@@ -148,24 +149,36 @@ const selectorFiles = computed(() => {
   return props.groupFiles
 })
 
-// 监听弹窗打开，初始化状态
 watch(() => props.visible, (visible) => {
   if (visible) {
-    // 初始化选中列表
     tempSelectedFiles.value = [...props.initialCandidates]
-    // 设置初始分组
     selectorGroupId.value = props.sceneGroupId || props.globalGroupId || null
-    // 如果分组素材未缓存，通知父组件加载
     if (selectorGroupId.value && !props.allGroupFiles[selectorGroupId.value]) {
       emit('load-group-files', selectorGroupId.value)
     }
   }
 })
 
-// 判断是否选中
-const isSelected = (fileId) => tempSelectedFiles.value.includes(fileId)
+// 键盘快捷键
+const handleKeydown = (e) => {
+  if (!props.visible) return
+  if (e.key === 'Enter' && tempSelectedFiles.value.length > 0) {
+    e.preventDefault()
+    handleConfirm()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
+
+const isSelected = (fileId) => tempSelectedFiles.value.includes(fileId)
+const getSelectionOrder = (fileId) => tempSelectedFiles.value.indexOf(fileId) + 1
+
+const getFileName = (fileId) => {
+  const file = selectorFiles.value.find(f => f.id === fileId)
+  return file ? (file.displayName || file.fileName) : '未知'
+}
 
-// 切换选中状态
 const toggleSelection = (file) => {
   const index = tempSelectedFiles.value.indexOf(file.id)
   if (index > -1) {
@@ -174,26 +187,31 @@ const toggleSelection = (file) => {
     if (tempSelectedFiles.value.length < props.maxCandidates) {
       tempSelectedFiles.value.push(file.id)
     } else {
-      message.warning(`每个场景最多只能选择${props.maxCandidates}个候选`)
+      message.warning(`最多选择 ${props.maxCandidates} 个素材`)
     }
   }
 }
 
-// 全选
-const handleSelectAll = () => {
-  tempSelectedFiles.value = selectorFiles.value.map(f => f.id)
+const removeSelection = (fileId) => {
+  const index = tempSelectedFiles.value.indexOf(fileId)
+  if (index > -1) tempSelectedFiles.value.splice(index, 1)
+}
+
+const handleQuickConfirm = (file) => {
+  if (!isSelected(file.id)) toggleSelection(file)
+  handleConfirm()
+}
+
+const handleSelectAll = () => {
+  tempSelectedFiles.value = selectorFiles.value.slice(0, props.maxCandidates).map(f => f.id)
 }
 
-// 清空
 const handleClearSelection = () => {
   tempSelectedFiles.value = []
 }
 
-// 智能填充
 const handleAutoFill = () => {
-  if (props.sceneIndex < 0) return
-
-  const availableMaterials = props.groupFiles.filter(
+  const availableMaterials = selectorFiles.value.filter(
     material => !tempSelectedFiles.value.includes(material.id)
   )
 
@@ -206,18 +224,16 @@ const handleAutoFill = () => {
   const targetCount = Math.min(3, maxAddCount)
 
   if (targetCount <= 0) {
-    message.warning(`候选数量已达上限（${props.maxCandidates}个）`)
+    message.warning('已达到上限')
     return
   }
 
-  // 简单随机选择
   const shuffled = [...availableMaterials].sort(() => Math.random() - 0.5)
   const selected = shuffled.slice(0, targetCount)
   tempSelectedFiles.value.push(...selected.map(m => m.id))
-  message.success(`已智能选择${selected.length}个候选素材`)
+  message.success(`已随机选择 ${selected.length} 个素材`)
 }
 
-// 分组切换
 const handleSelectorGroupChange = (groupId) => {
   selectorGroupId.value = groupId
   tempSelectedFiles.value = []
@@ -226,123 +242,337 @@ const handleSelectorGroupChange = (groupId) => {
   }
 }
 
-// 确认选择
 const handleConfirm = () => {
+  if (tempSelectedFiles.value.length === 0) {
+    message.warning('请至少选择一个素材')
+    return
+  }
   emit('confirm', {
     sceneIndex: props.sceneIndex,
-    fileIds: [...tempSelectedFiles.value]
+    fileIds: [...tempSelectedFiles.value],
+    setGroupId: selectorGroupId.value
   })
   emit('update:visible', false)
 }
 </script>
 
 <style scoped lang="less">
-.selector-container {
-  .selector-actions {
-    margin-bottom: var(--space-2);
-    padding: var(--space-4);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border);
+// ════════════════════════════════════════════════════════════════════════════
+// 弹窗样式 - 使用项目设计系统
+// ════════════════════════════════════════════════════════════════════════════
+
+// 🎨 设计令牌引用
+@primary: var(--color-primary-500);
+@primary-light: var(--color-primary-50);
+@primary-hover: var(--color-primary-400);
+
+@success: var(--color-success-500);
+@success-light: var(--color-success-50);
+
+@warning: var(--color-warning-500);
+
+@text: var(--color-text);
+@text-secondary: var(--color-text-secondary);
+@text-muted: var(--color-text-muted);
+@text-disabled: var(--color-text-disabled);
+
+@bg-card: var(--color-bg-card);
+@bg-elevated: var(--color-gray-100);
+
+@border: var(--color-border);
+@border-light: var(--color-gray-100);
+
+.scene-selector-modal {
+  :deep(.ant-modal-content) {
+    padding: 0;
+    border-radius: var(--radius-card);
+    overflow: hidden;
+  }
+
+  :deep(.ant-modal-body) {
+    padding: 0;
   }
 }
 
-.selector-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--space-2);
-  max-height: 480px;
-  overflow-y: auto;
-  padding: var(--space-2);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-}
+// ════════════════════════════════════════════════════════════════════════════
+// 顶部标题栏
+// ════════════════════════════════════════════════════════════════════════════
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-4);
+  background: @bg-elevated;
+  border-bottom: 1px solid @border-light;
 
-.selector-item {
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  border: 2px solid transparent;
-  transition: all var(--duration-base) ease;
-  position: relative;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-inset-card);
-
-  &:hover {
-    border-color: var(--color-primary);
-    box-shadow: var(--shadow-inset-card);
-  }
-
-  &--selected {
-    border-color: var(--color-success);
-    box-shadow: var(--shadow-inset-card);
-  }
-
-  .selector-thumb {
-    aspect-ratio: 16/9;
-    background: var(--color-bg);
+  .header-left {
     display: flex;
     align-items: center;
+    gap: var(--space-3);
+  }
+
+  .scene-badge {
+    padding: var(--space-1) var(--space-3);
+    background: @primary-light;
+    border: 1px solid var(--color-primary-200);
+    border-radius: var(--radius-tag);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: @primary;
+  }
+
+  .counter {
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+
+    .counter-current {
+      font-size: 22px;
+      font-weight: 600;
+      color: @primary;
+    }
+
+    .counter-sep {
+      color: @text-disabled;
+      margin: 0 2px;
+    }
+
+    .counter-max {
+      font-size: var(--font-size-base);
+      color: @text-muted;
+    }
+  }
+
+  .group-tabs {
+    display: flex;
+    gap: var(--space-1);
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 工具栏
+// ════════════════════════════════════════════════════════════════════════════
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  background: @bg-card;
+  border-bottom: 1px solid @border-light;
+
+  .toolbar-hint {
+    font-size: var(--font-size-xs);
+    color: @text-muted;
+  }
+}
+
+// ════════════════════════════════════════════════════════════════════════════
+// 素材网格
+// ════════════════════════════════════════════════════════════════════════════
+.material-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-3);
+  padding: var(--space-4);
+  min-height: 360px;
+  max-height: 360px;
+  overflow-y: auto;
+  background: @bg-card;
+  align-content: start;
+
+  &:deep(.ant-empty) {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-2xl);
+    min-height: 320px;
+    margin: 0;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-gray-300);
+    border-radius: 3px;
+  }
+}
+
+.material-card {
+  cursor: pointer;
+  border-radius: var(--radius-button);
+  overflow: hidden;
+  background: @bg-elevated;
+  border: 2px solid transparent;
+  transition: all var(--duration-base) ease;
+  animation: fadeIn var(--duration-slow) ease backwards;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  &:hover {
+    border-color: @primary;
+    box-shadow: var(--shadow-blue);
+  }
+
+  // ✅ 选中状态 - 青色主题
+  &--selected {
+    border-color: var(--color-primary-400);
+    background: var(--color-primary-50);
+
+    .card-check {
+      opacity: 1;
+    }
+
+    .card-order {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .card-cover {
+    position: relative;
+    aspect-ratio: 16/9;
 
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
+
+    .cover-placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-gray-100);
+      color: @text-disabled;
+      font-size: 24px;
+    }
+
+    // ✓ 选中勾选
+    .card-check {
+      position: absolute;
+      top: var(--space-1);
+      left: var(--space-1);
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: @primary;
+      color: var(--color-text-inverse);
+      border-radius: 50%;
+      font-size: 11px;
+      opacity: 0;
+      transition: opacity var(--duration-base) ease;
+    }
+
+    // 🏷️ 选中序号
+    .card-order {
+      position: absolute;
+      top: var(--space-1);
+      right: var(--space-1);
+      min-width: 20px;
+      height: 20px;
+      padding: 0 var(--space-1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: @warning;
+      color: var(--color-text-inverse);
+      font-size: 11px;
+      font-weight: 600;
+      border-radius: 10px;
+      opacity: 0;
+      transform: scale(0.8);
+      transition: all var(--duration-base) ease;
+    }
   }
 
-  .selector-name {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--font-size-xs);
-    text-align: center;
+  .card-name {
+    padding: var(--space-2);
+    font-size: 11px;
+    color: @text-secondary;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-weight: 500;
-    color: var(--color-text);
-    background: var(--color-bg);
+    background: @bg-card;
   }
+}
 
-  .selector-checkmark {
-    position: absolute;
-    top: var(--space-2);
-    right: var(--space-2);
-    background: var(--color-success);
-    color: #fff;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
+// ════════════════════════════════════════════════════════════════════════════
+// 底部操作栏
+// ════════════════════════════════════════════════════════════════════════════
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--space-3) var(--space-4);
+  background: @bg-elevated;
+  border-top: 1px solid @border-light;
+
+  .selected-preview {
     display: flex;
     align-items: center;
-    justify-content: center;
-    font-size: var(--font-size-base);
-    z-index: 2;
-    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
+    gap: var(--space-1);
+    flex: 1;
+    overflow-x: auto;
+
+    &::-webkit-scrollbar {
+      height: 0;
+    }
+
+    .more-tag {
+      padding: 2px var(--space-2);
+      background: var(--color-gray-100);
+      border-radius: var(--radius-tag);
+      font-size: var(--font-size-xs);
+      color: @text-muted;
+      flex-shrink: 0;
+    }
+
+    .no-selection {
+      font-size: var(--font-size-sm);
+      color: @text-disabled;
+    }
   }
 }
 
-.selector-actions-footer {
-  margin-top: var(--space-2);
-  padding: var(--space-4);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  text-align: right;
-  border: 1px solid var(--color-border);
-}
-
-@media (max-width: 1200px) {
-  .selector-grid {
+// ════════════════════════════════════════════════════════════════════════════
+// 响应式适配
+// ════════════════════════════════════════════════════════════════════════════
+@media (max-width: 800px) {
+  .material-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (max-width: 768px) {
-  .selector-grid {
+@media (max-width: 600px) {
+  .material-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .modal-header {
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+
+  .group-tabs {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+  }
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue b/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
index 4ec75aadab..686c1525ee 100644
--- a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
@@ -1,47 +1,41 @@
 <template>
   <div class="task-layout">
-    <!-- 左侧导航 -->
-    <aside class="task-layout__sidebar">
-      <nav class="task-layout__nav">
-        <div class="task-layout__nav-header">
-          <h2 class="task-layout__nav-title">任务管理</h2>
+    <!-- 顶部Tab栏 -->
+    <div class="task-layout__header">
+      <div class="task-tabs">
+        <div
+          v-for="item in NAV_ITEMS"
+          :key="item.type"
+          class="task-tab"
+          :class="{ 'is-active': currentType === item.type }"
+          @click="currentType = item.type"
+        >
+          <component :is="item.icon" class="tab-icon" />
+          <span>{{ item.label }}</span>
         </div>
-        <ul class="task-layout__nav-list">
-          <li
-            v-for="item in NAV_ITEMS"
-            :key="item.type"
-            class="task-layout__nav-item"
-            :class="{ 'is-active': currentType === item.type }"
-          >
-            <a class="task-layout__nav-link" @click="navigateTo(item.type)">
-              <component :is="item.icon" class="nav-icon" />
-              <span class="nav-text">{{ item.label }}</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </aside>
+      </div>
+    </div>
 
-    <!-- 右侧内容 -->
-    <main class="task-layout__content">
+    <!-- 内容区 -->
+    <div class="task-layout__content">
       <transition name="fade" mode="out-in">
         <component :is="currentComponent" :key="currentType" />
       </transition>
-    </main>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { computed, defineAsyncComponent, markRaw } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, computed, defineAsyncComponent, markRaw, onMounted, watch } from 'vue'
 import { VideoCameraOutlined, UserOutlined } from '@ant-design/icons-vue'
 
-const route = useRoute()
-const router = useRouter()
+const STORAGE_KEY = 'task-management-active-tab'
 
-const currentType = computed(() => {
-  const { type } = route.params
-  return !type || type === 'task-management' ? 'mix-task' : type
+const currentType = ref(localStorage.getItem(STORAGE_KEY) || 'mix-task')
+
+// 监听变化，同步到localStorage
+watch(currentType, (val) => {
+  localStorage.setItem(STORAGE_KEY, val)
 })
 
 const NAV_ITEMS = [
@@ -62,95 +56,64 @@ const NAV_ITEMS = [
 const currentComponent = computed(() => {
   return NAV_ITEMS.find(item => item.type === currentType.value)?.component ?? NAV_ITEMS[0].component
 })
-
-const navigateTo = (type) => {
-  router.push(`/system/task-management/${type}`)
-}
 </script>
 
 <style scoped lang="less">
 .task-layout {
-  display: flex;
   height: 100%;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
+  overflow: hidden;
 }
 
-.task-layout__sidebar {
-  width: 220px;
-  background: transparent;
-  border-right: 1px solid var(--color-gray-200);
+.task-layout__header {
   flex-shrink: 0;
-  overflow-y: auto;
-}
-
-.task-layout__nav-header {
-  height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-6);
+  padding: 0 var(--space-4);
   border-bottom: 1px solid var(--color-gray-200);
+  background: var(--color-bg-card);
 }
 
-.task-layout__nav-title {
-  margin: 0;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-gray-800);
+.task-tabs {
+  display: flex;
+  gap: var(--space-1);
+  height: 48px;
 }
 
-.task-layout__nav-list {
-  list-style: none;
-  padding: var(--space-2) 0;
-  margin: 0;
-}
-
-.task-layout__nav-item {
-  margin: var(--space-1) var(--space-3);
-
-  &.is-active .task-layout__nav-link {
-    background: var(--color-primary-500);
-    color: #fff;
-    box-shadow: var(--shadow-sm);
-
-    .nav-icon {
-      color: #fff;
-    }
-  }
-}
-
-.task-layout__nav-link {
+.task-tab {
   display: flex;
   align-items: center;
-  padding: var(--space-3);
-  border-radius: var(--radius-md);
-  color: var(--color-gray-600);
+  gap: var(--space-2);
+  padding: 0 var(--space-4);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-500);
   cursor: pointer;
+  border-bottom: 2px solid transparent;
   transition: all var(--duration-fast) var(--ease-out);
+  user-select: none;
 
   &:hover {
-    background: var(--color-gray-100);
     color: var(--color-primary-500);
   }
 
-  .is-active &:hover {
-    background: var(--color-primary-600);
-    color: #fff;
+  &.is-active {
+    color: var(--color-primary-500);
+    border-bottom-color: var(--color-primary-500);
+
+    .tab-icon {
+      color: var(--color-primary-500);
+    }
   }
-}
 
-.nav-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: var(--space-2);
-  color: var(--color-gray-500);
-}
-
-.nav-text {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  .tab-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--color-gray-400);
+    transition: color var(--duration-fast) var(--ease-out);
+  }
 }
 
 .task-layout__content {
diff --git a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
index 8890102b77..c918f764aa 100644
--- a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
@@ -416,4 +416,10 @@ onMounted(fetchList)
 :deep(.ant-btn .anticon) {
   line-height: 0;
 }
+
+/* 修复 popconfirm 按钮对齐 */
+:deep(.ant-popover .ant-popover-buttons) {
+  display: flex;
+  gap: 8px;
+}
 </style>
diff --git a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApi.java b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApi.java
index db914cc105..376804913a 100644
--- a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApi.java
+++ b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApi.java
@@ -52,4 +52,11 @@ public interface FileApi {
     String presignGetUrl(@NotEmpty(message = "URL 不能为空") String url,
                          Integer expirationSeconds);
 
+    /**
+     * 获取主文件配置的自定义域名（CDN域名）
+     *
+     * @return 自定义域名，如 https://oss.muyetools.cn
+     */
+    String getMasterFileDomain();
+
 }
diff --git a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApiImpl.java b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApiImpl.java
index 98bdba2a53..5cebe9b3d7 100644
--- a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApiImpl.java
+++ b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/api/file/FileApiImpl.java
@@ -1,5 +1,9 @@
 package cn.iocoder.yudao.module.infra.api.file;
 
+import cn.iocoder.yudao.module.infra.framework.file.core.client.FileClient;
+import cn.iocoder.yudao.module.infra.framework.file.core.client.s3.S3FileClient;
+import cn.iocoder.yudao.module.infra.framework.file.core.client.s3.S3FileClientConfig;
+import cn.iocoder.yudao.module.infra.service.file.FileConfigService;
 import cn.iocoder.yudao.module.infra.service.file.FileService;
 import jakarta.annotation.Resource;
 import org.springframework.stereotype.Service;
@@ -17,6 +21,9 @@ public class FileApiImpl implements FileApi {
     @Resource
     private FileService fileService;
 
+    @Resource
+    private FileConfigService fileConfigService;
+
     @Override
     public String createFile(byte[] content, String name, String directory, String type) {
         return fileService.createFile(content, name, directory, type);
@@ -27,4 +34,14 @@ public class FileApiImpl implements FileApi {
         return fileService.presignGetUrl(url, expirationSeconds);
     }
 
+    @Override
+    public String getMasterFileDomain() {
+        FileClient client = fileConfigService.getMasterFileClient();
+        if (client instanceof S3FileClient) {
+            S3FileClient s3Client = (S3FileClient) client;
+            return s3Client.getConfig().getDomain();
+        }
+        return null;
+    }
+
 }
diff --git a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/AbstractFileClient.java b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/AbstractFileClient.java
index 3c7883b83d..e8f10b4864 100644
--- a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/AbstractFileClient.java
+++ b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/AbstractFileClient.java
@@ -54,6 +54,11 @@ public abstract class AbstractFileClient<Config extends FileClientConfig> implem
         return id;
     }
 
+    @Override
+    public Config getConfig() {
+        return config;
+    }
+
     /**
      * 格式化文件的 URL 访问地址
      * 使用场景：local、ftp、db，通过 FileController 的 getFile 来获取文件内容
diff --git a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/FileClient.java b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/FileClient.java
index 8120fd69e3..a6145a3d26 100644
--- a/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/FileClient.java
+++ b/yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/framework/file/core/client/FileClient.java
@@ -74,4 +74,11 @@ public interface FileClient {
         throw new UnsupportedOperationException("不支持的操作");
     }
 
+    /**
+     * 获取文件配置
+     *
+     * @return 文件配置
+     */
+    FileClientConfig getConfig();
+
 }
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/media/BatchProduceAlignment.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/media/BatchProduceAlignment.java
index 561d0a135e..200d23ec52 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/media/BatchProduceAlignment.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/media/BatchProduceAlignment.java
@@ -119,11 +119,9 @@ public class BatchProduceAlignment {
         for (int i = 0; i < videoArray.length; i++) {
             String videoUrl = videoArray[i];
 
-            // 验证视频URL必须是阿里云OSS地址
-            if (!videoUrl.contains(".aliyuncs.com")) {
-                log.error("[ICE][视频URL不是阿里云OSS地址][视频{}: {}]", i + 1, videoUrl);
-                throw new IllegalArgumentException("视频URL必须是阿里云OSS地址，当前URL: " + videoUrl);
-            }
+            // 将CDN URL转换为OSS原始URL（ICE需要原始域名）
+            videoUrl = properties.convertToOssUrl(videoUrl);
+            videoArray[i] = videoUrl; // 更新数组中的URL
 
             log.debug("[ICE][添加视频片段][{}: {}]", i + 1, videoUrl);
             // 使用标准的 MediaURL 参数（符合 ICE API 文档规范）
@@ -275,11 +273,9 @@ public class BatchProduceAlignment {
             String videoUrl = material.getFileUrl();
             int duration = material.getDuration();
 
-            // 验证视频URL必须是阿里云OSS地址
-            if (!videoUrl.contains(".aliyuncs.com")) {
-                log.error("[ICE][视频URL不是阿里云OSS地址][视频{}: {}]", i + 1, videoUrl);
-                throw new IllegalArgumentException("视频URL必须是阿里云OSS地址，当前URL: " + videoUrl);
-            }
+            // 将CDN URL转换为OSS原始URL（ICE需要原始域名）
+            videoUrl = properties.convertToOssUrl(videoUrl);
+            material.setFileUrl(videoUrl); // 更新material中的URL
 
             // 计算随机截取起点
             // 优先使用前端传入的素材实际时长，无则从0开始截取（兜底）
diff --git a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/config/IceProperties.java b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/config/IceProperties.java
index 7731dfabf8..bba718af7f 100644
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/config/IceProperties.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/config/IceProperties.java
@@ -1,7 +1,9 @@
 package cn.iocoder.yudao.module.tik.mix.config;
 
 import cn.hutool.core.util.StrUtil;
+import cn.iocoder.yudao.module.infra.api.file.FileApi;
 import lombok.Data;
+import lombok.RequiredArgsConstructor;
 import org.springframework.boot.context.properties.ConfigurationProperties;
 import org.springframework.stereotype.Component;
 
@@ -13,8 +15,11 @@ import java.time.Duration;
 @Data
 @Component
 @ConfigurationProperties(prefix = "yudao.ice")
+@RequiredArgsConstructor
 public class IceProperties {
 
+    private final FileApi fileApi;
+
     /**
      * AccessKey ID
      */
@@ -60,4 +65,26 @@ public class IceProperties {
     public String getOssWriteUrl(String path) {
         return "https://" + bucket + ".oss-" + regionId + ".aliyuncs.com/" + path;
     }
+
+    /**
+     * 将CDN URL转换为OSS原始URL（ICE需要原始域名才能访问）
+     * CDN域名从数据库的文件配置中获取
+     */
+    public String convertToOssUrl(String url) {
+        if (StrUtil.isBlank(url)) {
+            return url;
+        }
+        // 如果已经是OSS原始域名，直接返回
+        if (url.contains(".aliyuncs.com")) {
+            return url;
+        }
+        // 从数据库获取CDN域名
+        String cdnDomain = fileApi.getMasterFileDomain();
+        if (StrUtil.isBlank(cdnDomain)) {
+            return url;
+        }
+        // 将CDN域名替换为OSS原始域名
+        String ossDomain = "https://" + bucket + ".oss-" + regionId + ".aliyuncs.com";
+        return url.replace(cdnDomain, ossDomain);
+    }
 }
diff --git a/yudao-server/src/main/resources/application-dev.yaml b/yudao-server/src/main/resources/application-dev.yaml
index 3124b85d09..9dabe762b5 100644
--- a/yudao-server/src/main/resources/application-dev.yaml
+++ b/yudao-server/src/main/resources/application-dev.yaml
@@ -206,7 +206,6 @@ yudao:
     region-id: cn-hangzhou
     bucket: muye-ai-chat
     enabled: true
-    oss-domain: https://oss.muyetools.cn  # CDN加速域名（用于文件访问）
   captcha:
     enable: false # 关闭图片验证码，方便登录等接口的测试
   security:
diff --git a/yudao-server/src/main/resources/application.yaml b/yudao-server/src/main/resources/application.yaml
index f6b6065aa5..f2466165b1 100644
--- a/yudao-server/src/main/resources/application.yaml
+++ b/yudao-server/src/main/resources/application.yaml
@@ -268,7 +268,6 @@ yudao:
     region-id: cn-hangzhou
     bucket: muye-ai-chat
     enabled: true
-    oss-domain: https://oss.muyetools.cn  # CDN加速域名（用于文件访问）
   dify:
     api-url: http://127.0.0.1:8088  # Dify API 地址，请根据实际情况修改
     timeout: 240  # 请求超时时间（秒）