From 52c3b5489d0eec7289a3dccf24b0c94a3cbd29e9 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Mon, 16 Mar 2026 02:30:43 +0800
Subject: [PATCH] feat(ui): replace Ant Design components with shadcn-vue
 components in content analysis views

- Replace Ant Design buttons and empty state components with shadcn-vue Button and custom empty state using lucide icons
- Update ExpandedRowContent.vue to use new component library with consistent styling
- Migrate task center components to use new UI framework
- Add proper loading states and disabled button handling
- Refactor modal dialog structure and styling for better consistency
---
 .../components/ExpandedRowContent.vue         |  171 ++-
 frontend/app/web-gold/src/views/home/Home.vue |  781 -----------
 .../src/views/material/MaterialListNew.vue    | 1172 +++++------------
 .../app/web-gold/src/views/material/Mix.vue   |  511 ++++---
 .../material/components/GroupSelectModal.vue  |  148 +--
 .../components/SceneSelectorModal.vue         |  425 +++---
 .../views/task-center/BenchmarkTaskList.vue   |  301 +++--
 7 files changed, 1171 insertions(+), 2338 deletions(-)
 delete mode 100644 frontend/app/web-gold/src/views/home/Home.vue

diff --git a/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue b/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue
index 957868668e..14169ad8f3 100644
--- a/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { CopyOutlined, SaveOutlined } from '@ant-design/icons-vue'
+import { Icon } from '@iconify/vue'
+import { Button } from '@/components/ui/button'
 import ChatMessageRendererV2 from '@/components/ChatMessageRendererV2.vue'
 
 const props = defineProps({
@@ -26,22 +27,20 @@ function handleCreateContent() {
 
 <template>
   <div class="expanded-content">
-    <div v-if="!record.transcriptions && !record.prompt" class="no-analysis-tip">
-      <a-empty description="该视频尚未分析">
-        <template #image>
-          <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="20" y="30" width="80" height="60" rx="4" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
-            <circle cx="40" cy="50" r="8" fill="currentColor" opacity="0.4"/>
-            <rect x="54" y="47" width="40" height="6" rx="3" fill="currentColor" opacity="0.4"/>
-            <rect x="54" y="60" width="32" height="6" rx="3" fill="currentColor" opacity="0.4"/>
-          </svg>
-        </template>
-        <a-button type="primary" @click="$emit('analyze', record)" :loading="record._analyzing">
-          {{ record._analyzing ? '分析中…' : '开始分析' }}
-        </a-button>
-      </a-empty>
+    <!-- 未分析状态 -->
+    <div v-if="!record.transcriptions && !record.prompt" class="empty-state">
+      <div class="empty-icon">
+        <Icon icon="lucide:video-off" class="size-10 text-muted-foreground/40" />
+      </div>
+      <p class="text-muted-foreground mb-4">该视频尚未分析</p>
+      <Button @click="$emit('analyze', record)" :disabled="record._analyzing">
+        <Icon v-if="record._analyzing" icon="lucide:loader-2" class="size-4 animate-spin" />
+        <Icon v-else icon="lucide:play" class="size-4" />
+        {{ record._analyzing ? '分析中…' : '开始分析' }}
+      </Button>
     </div>
 
+    <!-- 已分析内容 -->
     <div v-else class="two-col">
       <section class="col left-col">
         <div class="sub-title">原配音</div>
@@ -63,34 +62,33 @@ function handleCreateContent() {
         </div>
 
         <div class="right-actions">
-          <a-space>
-            <a-button
-              size="small"
-              type="text"
-              class="copy-btn"
+          <div class="flex gap-2">
+            <Button
+              size="sm"
+              variant="ghost"
               title="复制"
-              @click="handleCopy">
-              <template #icon>
-                <CopyOutlined />
-              </template>
-            </a-button>
-            <a-button
+              @click="handleCopy"
+            >
+              <Icon icon="lucide:copy" class="size-4" />
+            </Button>
+            <Button
               v-if="record.prompt"
-              size="small"
-              type="text"
-              class="save-server-btn"
+              size="sm"
+              variant="ghost"
               title="保存"
-              @click="handleSaveToServer">
-              <template #icon>
-                <SaveOutlined />
-              </template>
+              @click="handleSaveToServer"
+            >
+              <Icon icon="lucide:save" class="size-4" />
               保存
-            </a-button>
-            <a-button
-              type="dashed"
+            </Button>
+            <Button
+              variant="outline"
               :disabled="!record.prompt || record._analyzing"
-              @click="handleCreateContent">基于提示词去创作</a-button>
-          </a-space>
+              @click="handleCreateContent"
+            >
+              基于提示词去创作
+            </Button>
+          </div>
         </div>
       </section>
     </div>
@@ -99,10 +97,29 @@ function handleCreateContent() {
 
 <style scoped>
 .expanded-content {
-  padding: var(--space-4);
+  padding: 16px;
   background: var(--color-gray-50);
-  border-radius: var(--radius-card);
-  margin: var(--space-2) 0;
+  border-radius: 12px;
+  margin: 8px 0;
+}
+
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-icon {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-gray-100);
+  border-radius: 50%;
+  margin-bottom: 16px;
 }
 
 .two-col {
@@ -112,79 +129,59 @@ function handleCreateContent() {
 }
 
 .col {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 12px;
+  background: white;
+  border: 1px solid var(--color-gray-100);
+  border-radius: 10px;
+  padding: 16px;
 }
 
 .left-col .transcript-content {
   white-space: pre-wrap;
   line-height: 1.6;
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-card);
-  padding: var(--space-2);
+  color: var(--color-gray-600);
+  background: var(--color-gray-50);
+  border: 1px dashed var(--color-gray-200);
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 14px;
 }
 
 .sub-title {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: var(--space-2);
+  color: var(--color-gray-800);
+  margin-bottom: 12px;
 }
 
 .no-transcript {
   font-size: 14px;
-  color: var(--color-text-secondary);
+  color: var(--color-gray-400);
 }
 
 .prompt-display-wrapper {
   min-height: 200px;
   max-height: 500px;
   overflow-y: auto;
-  background: var(--color-surface);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-card);
-  padding: var(--space-3);
-  margin-bottom: var(--space-2);
+  background: var(--color-gray-50);
+  border: 1px dashed var(--color-gray-200);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
 }
 
 .no-prompt {
-  padding: var(--space-4);
+  padding: 16px;
   text-align: center;
-  color: var(--color-text-secondary);
+  color: var(--color-gray-400);
 }
 
 .right-actions {
-  margin-top: var(--space-2);
+  margin-top: 8px;
 }
 
-.copy-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  color: var(--color-primary);
-  cursor: pointer;
-}
-
-.copy-btn:hover {
-  opacity: 0.8;
-}
-
-.no-analysis-tip {
-  padding: var(--space-8) var(--space-5);
-  text-align: center;
-}
-
-.no-analysis-tip :deep(.ant-empty) {
-  margin: 0;
-}
-
-.no-analysis-tip :deep(.ant-empty-description) {
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-4);
+@media (max-width: 768px) {
+  .two-col {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
-
diff --git a/frontend/app/web-gold/src/views/home/Home.vue b/frontend/app/web-gold/src/views/home/Home.vue
deleted file mode 100644
index f25f76ed14..0000000000
--- a/frontend/app/web-gold/src/views/home/Home.vue
+++ /dev/null
@@ -1,781 +0,0 @@
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-
-defineOptions({
-  name: 'HomeBusiness'
-})
-
-const kpis = ref([
-  { label: '企业客户', value: '1,200+' },
-  { label: '月度生成内容', value: '3,5M+' },
-  { label: '平均提效', value: '↑ 67%' },
-])
-
-const features = ref([
-  { title: '内容风格洞察', desc: '结构化拆解头部账号，提炼风格要素与提示词', icon: '📊' },
-  { title: '热点趋势分析', desc: '全网热度追踪，关联话题、时段与平台建议', icon: '📈' },
-  { title: 'AI文案与脚本', desc: '场景化模板与知识库支持，一键生成可用稿', icon: '📝' },
-  { title: '数字人&配音', desc: '声音训练、语音合成、数字人出镜一体化', icon: '🎙️' },
-])
-
-// 轮播数据（商务风渐变 + 文案）
-const banners = ref([
-  { id: 1, title: '内容风格分析', desc: '结构特征与关键词洞察', color: 'from-indigo-600 via-indigo-500 to-sky-500' },
-  { id: 2, title: '热点趋势分析', desc: '热度变化与预测建议', color: 'from-fuchsia-600 via-fuchsia-500 to-pink-500' },
-  { id: 3, title: '数字人与配音', desc: '声音训练与数字人视频', color: 'from-emerald-600 via-emerald-500 to-teal-500' },
-])
-const active = ref(0)
-let timer = null
-onMounted(() => {
-  timer = setInterval(() => {
-    active.value = (active.value + 1) % banners.value.length
-  }, 4500)
-})
-onUnmounted(() => {
-  if (timer) clearInterval(timer)
-})
-</script>
-
-<template>
-  <div class="mt-4 home">
-    <!-- Hero 区：大气商务风 -->
-    <section class="hero-section fade-in">
-      <div class="hero-bg"></div>
-      <div class="hero-ornaments">
-        <div class="blob blob-1"></div>
-        <div class="blob blob-2"></div>
-        <div class="grid-lines"></div>
-      </div>
-      <div class="hero-gradient">
-        <div class="container">
-          <div class="hero-grid">
-            <!-- 左侧文案 -->
-            <div class="hero-left">
-              <div class="badge">
-                <span class="badge-dot"></span>
-                企业级内容智能平台
-              </div>
-              <h1 class="hero-title">
-                让每一次创作，兼具<span class="gradient-text">效率</span>与<span class="gradient-text-2">品质</span>
-              </h1>
-              <p class="hero-desc">
-                金牌内容大师面向品牌与机构，提供从策略到产出的全链路内容能力：对标洞察、趋势分析、AI脚本、数字人及配音，助力营销持续增长。
-              </p>
-              <div class="hero-actions">
-                <button class="btn-primary">
-                  立即体验
-                </button>
-                <button class="btn-ghost">
-                  安全与合规
-                </button>
-              </div>
-              <!-- 关键信息 KPI -->
-              <div class="kpi-grid">
-                <div v-for="k in kpis" :key="k.label" class="antd-card glass kpi-item">
-                  <div class="kpi-value">{{ k.value }}</div>
-                  <div class="kpi-label">{{ k.label }}</div>
-                </div>
-              </div>
-            </div>
-            <!-- 右侧示意卡片 -->
-            <div class="hero-right">
-              <!-- 轮播图（大气商务风） -->
-              <div class="carousel antd-shadow">
-                <div v-for="(b, i) in banners" :key="b.id" class="banner"
-                  :class="['banner--' + b.id, { 'is-active': i === active }]">
-                  <div class="banner-content">
-                    <div class="banner-text">
-                      <div class="banner-title">{{ b.title }}</div>
-                      <div class="banner-desc">{{ b.desc }}</div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- 指示点 -->
-                <div class="dots">
-                  <button v-for="(b, i) in banners" :key="'dot-' + b.id" class="dot"
-                    :class="{ 'dot--active': i === active }" @click="active = i" aria-label="切换轮播"></button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- 核心能力栅格 -->
-    <section class="core-section fade-in">
-      <div class="features-grid">
-        <div v-for="f in features" :key="f.title" class="antd-card glass feature-item">
-          <div class="feature-icon">{{ f.icon }}</div>
-          <div class="feature-title">{{ f.title }}</div>
-          <div class="feature-desc">{{ f.desc }}</div>
-          <div class="feature-link">了解更多</div>
-        </div>
-      </div>
-    </section>
-
-    <!-- 品牌背书与合规提示 -->
-    <section class="brand-compliance fade-in">
-      <div class="brand-card antd-card">
-        <div class="brand-title">服务过的行业伙伴</div>
-        <div class="logos-grid">
-          <div v-for="i in 12" :key="i" class="logo-item antd-card">LOGO</div>
-        </div>
-      </div>
-      <div class="compliance-card antd-shadow">
-        <div class="compliance-title">数据与合规</div>
-        <ul class="compliance-list">
-          <li>· 严格遵循平台与数据合规要求</li>
-          <li>· 支持企业私有化部署与访问控制</li>
-          <li>· 可定制审计留痕与内容风控</li>
-        </ul>
-        <button class="btn-primary compliance-button">查看白皮书</button>
-      </div>
-    </section>
-  </div>
-
-</template>
-
-<style scoped>
-/* antd 阴影与卡片风格 */
-.antd-shadow {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  transition: box-shadow 0.2s ease;
-}
-
-.antd-shadow:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-}
-
-.antd-card {
-  background: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
-}
-
-.antd-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
-  transform: translateY(-1px);
-  border-color: #e6f4ff;
-}
-
-/* 按钮风格（主色 #1890FF，hover #40A9FF） */
-.btn-primary {
-  padding: 12px 20px;
-  border-radius: 8px;
-  background: linear-gradient(90deg, #1890FF, #40A9FF);
-  color: #fff;
-  font-weight: 600;
-  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.35);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
-}
-
-.btn-primary:hover {
-  transform: translateY(-1px) scale(1.02);
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.45);
-  filter: brightness(1.02);
-}
-
-.btn-ghost {
-  padding: 12px 20px;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #1890FF;
-  font-weight: 600;
-  border: 1px solid #91D5FF;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-}
-
-.btn-ghost:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  background-color: #E6F7FF;
-}
-
-/* 页面进入动画与可交互动画 */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.fade-in {
-  animation: fadeIn 0.5s ease forwards;
-}
-
-/* ======= 首页自定义样式（替代 Tailwind） ======= */
-.home {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-
-.hero-section {
-  position: relative;
-  overflow: hidden;
-  border-radius: 16px;
-}
-
-.hero-bg {
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(900px 300px at 0% 0%, rgba(24, 144, 255, 0.08), transparent);
-}
-
-  /* 装饰性模糊色块与细网格，增强时尚层次感 */
-  .hero-ornaments {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-
-  .hero-ornaments .blob {
-    position: absolute;
-    filter: blur(40px);
-    opacity: 0.5;
-    border-radius: 50%;
-  }
-
-  .hero-ornaments .blob-1 {
-    width: 240px;
-    height: 240px;
-    left: -40px;
-    top: -60px;
-    background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.55), rgba(14,165,233,.25));
-  }
-
-  .hero-ornaments .blob-2 {
-    width: 280px;
-    height: 280px;
-    right: -60px;
-    bottom: -80px;
-    background: radial-gradient(circle at 70% 70%, rgba(16,185,129,.5), rgba(20,184,166,.25));
-  }
-
-  .hero-ornaments .grid-lines {
-    position: absolute;
-    inset: 0;
-    background-image: linear-gradient(rgba(24,144,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(24,144,255,0.06) 1px, transparent 1px);
-    background-size: 24px 24px, 24px 24px;
-    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
-    mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
-  }
-
-.hero-gradient {
-  background: linear-gradient(180deg, #E6F7FF 0%, #FFFFFF 100%);
-}
-
-.container {
-  padding: 40px 16px;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@media (min-width: 768px) {
-  .container {
-    padding: 48px 32px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    padding: 64px 48px;
-  }
-}
-
-.hero-grid {
-  display: grid;
-  gap: 40px;
-  align-items: center;
-}
-
-@media (min-width: 1024px) {
-  .hero-grid {
-    grid-template-columns: 1fr 1fr;
-    gap: 40px;
-  }
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: #1890FF;
-  background: #E6F7FF;
-  padding: 4px 12px;
-  border-radius: 999px;
-  box-shadow: inset 0 0 0 1px #91D5FF;
-}
-
-.badge-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #1890FF;
-  display: inline-block;
-}
-
-.hero-title {
-  margin-top: 16px;
-  color: #111827;
-  font-weight: 800;
-  line-height: 1.2;
-  font-size: 24px;
-    letter-spacing: -0.01em;
-}
-
-@media (min-width: 768px) {
-  .hero-title {
-    font-size: 32px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .hero-title {
-    font-size: 40px;
-  }
-}
-
-.text-primary {
-  color: #1890FF;
-}
-
-.text-accent {
-  color: #FA8C16;
-}
-
-  /* 渐变文本：更具时尚感 */
-  .gradient-text {
-    background: linear-gradient(90deg, #1677ff, #22d3ee);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
-
-  .gradient-text-2 {
-    background: linear-gradient(90deg, #f97316, #ef4444);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
-
-.hero-desc {
-  margin-top: 16px;
-  font-size: 16px;
-  color: #4B5563;
-  line-height: 1.75;
-}
-
-.hero-actions {
-  margin-top: 24px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.kpi-grid {
-  margin-top: 32px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-}
-
-.kpi-item {
-  padding: 16px;
-  text-align: center;
-}
-
-  .kpi-item:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  }
-
-.kpi-value {
-  font-size: 24px;
-  font-weight: 700;
-  color: #111827;
-}
-
-.kpi-label {
-  margin-top: 4px;
-  font-size: 14px;
-  color: #6B7280;
-}
-
-.carousel {
-  position: relative;
-  height: 224px;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid rgba(145, 213, 255, 0.4);
-}
-
-@media (min-width: 640px) {
-  .carousel {
-    height: 256px;
-  }
-}
-
-@media (min-width: 768px) {
-  .carousel {
-    height: 288px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .carousel {
-    height: 320px;
-  }
-}
-
-.banner {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  transition: opacity 0.7s ease-in-out;
-  display: flex;
-}
-
-.banner.is-active {
-  opacity: 1;
-}
-
-.banner-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  color: #111827;
-    position: relative;
-}
-
-  /* 玻璃覆层叠加彩色背景，弱化纯色感 */
-  .banner-content::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px);
-  }
-
-.banner-text {
-  padding-left: 24px;
-  padding-right: 24px;
-}
-
-@media (min-width: 768px) {
-  .banner-text {
-    padding-left: 40px;
-    padding-right: 40px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .banner-text {
-    padding-left: 48px;
-    padding-right: 48px;
-  }
-}
-
-.banner-title {
-  font-size: 24px;
-  font-weight: 800;
-  letter-spacing: -0.01em;
-}
-
-@media (min-width: 768px) {
-  .banner-title {
-    font-size: 28px;
-  }
-}
-
-.banner-desc {
-  margin-top: 8px;
-  font-size: 16px;
-  color: rgba(55, 65, 81, 0.9);
-}
-
-.banner--1 .banner-content {
-  background: linear-gradient(90deg, #4F46E5 0%, #6366F1 50%, #0EA5E9 100%);
-}
-
-.banner--2 .banner-content {
-  background: linear-gradient(90deg, #A21CAF 0%, #D946EF 50%, #EC4899 100%);
-}
-
-.banner--3 .banner-content {
-  background: linear-gradient(90deg, #059669 0%, #10B981 50%, #14B8A6 100%);
-}
-
-.dots {
-  position: absolute;
-  bottom: 12px;
-  right: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dot {
-  height: 10px;
-  width: 10px;
-  border-radius: 999px;
-  background: #91D5FF;
-  transition: all 0.2s ease;
-}
-
-.dot--active {
-  width: 24px;
-  background: #1890FF;
-}
-
-.core-section {
-  display: block;
-}
-
-.features-grid {
-  display: grid;
-  gap: 24px;
-}
-
-@media (min-width: 768px) {
-  .features-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .features-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.feature-item {
-  padding: 16px;
-}
-
-  .feature-item {
-    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
-  }
-
-  .feature-item:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(17,24,39,.12);
-    border-color: rgba(99, 102, 241, 0.25);
-  }
-
-.feature-icon {
-  font-size: 24px;
-  line-height: 1;
-}
-
-.feature-title {
-  margin-top: 12px;
-  font-size: 20px;
-  font-weight: 600;
-  color: #111827;
-}
-
-.feature-desc {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #4B5563;
-  line-height: 1.75;
-}
-
-.feature-link {
-  margin-top: 12px;
-  font-size: 14px;
-  color: #1890FF;
-  font-weight: 600;
-  cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    position: relative;
-    padding-right: 18px;
-}
-
-.feature-link:hover {
-    text-decoration: none;
-    transform: translateX(2px);
-}
-
-  .feature-link::after {
-    content: "→";
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: transform .2s ease;
-  }
-
-  .feature-link:hover::after {
-    transform: translate(3px, -50%);
-  }
-
-.brand-compliance {
-  display: grid;
-  gap: 24px;
-}
-
-@media (min-width: 1024px) {
-  .brand-compliance {
-    grid-template-columns: 2fr 1fr;
-  }
-}
-
-.brand-card {
-  padding: 24px;
-}
-
-.brand-title {
-  font-size: 14px;
-  color: #6B7280;
-}
-
-.logos-grid {
-  margin-top: 12px;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-}
-
-@media (min-width: 640px) {
-  .logos-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (min-width: 768px) {
-  .logos-grid {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-
-.logo-item {
-  height: 40px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: #6B7280;
-    filter: grayscale(0.9);
-    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
-}
-
-.compliance-card {
-  border-radius: 12px;
-  background: linear-gradient(135deg, #E6F7FF 0%, #FFFFFF 100%);
-  padding: 24px;
-  border: 1px solid rgba(145, 213, 255, 0.6);
-}
-
-  .logo-item:hover {
-    filter: grayscale(0);
-    transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
-  }
-
-  /* 玻璃拟态：统一视觉语汇 */
-  .glass {
-    background: rgba(255, 255, 255, 0.6);
-    -webkit-backdrop-filter: saturate(140%) blur(8px);
-    backdrop-filter: saturate(140%) blur(8px);
-    border-color: rgba(145, 213, 255, 0.6);
-  }
-
-  /* 入场动画：特性卡和KPI稍后淡入上移，强化层次 */
-  @keyframes floatIn {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .kpi-item, .feature-item { opacity: 0; animation: floatIn .45s ease forwards; }
-  .kpi-item:nth-child(1), .feature-item:nth-child(1) { animation-delay: .02s; }
-  .kpi-item:nth-child(2), .feature-item:nth-child(2) { animation-delay: .08s; }
-  .kpi-item:nth-child(3), .feature-item:nth-child(3) { animation-delay: .14s; }
-  .feature-item:nth-child(4) { animation-delay: .2s; }
-
-.compliance-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #111827;
-}
-
-.compliance-list {
-  margin-top: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 16px;
-  color: #374151;
-}
-
-.compliance-button {
-  margin-top: 16px;
-}
-</style>
-<style scoped>
-/* 暗色覆盖（不破坏原有类名，基于变量快速换肤） */
-.home {
-  color: var(--color-text);
-}
-
-/* 卡片与玻璃风格在暗色下的表现 */
-.home .antd-card { background: var(--color-surface); border-color: var(--color-border); }
-.home .glass { background: rgba(26,26,26,0.66); border-color: var(--color-border); }
-
-/* 英雄区与渐变、徽标与说明文字 */
-.home .hero-gradient { background: linear-gradient(180deg, rgba(26,102,224,0.10) 0%, rgba(0,0,0,0) 60%) !important; }
-.home .hero-title { color: var(--color-text) !important; }
-.home .hero-desc { color: var(--color-text-secondary) !important; }
-.home .badge { color: var(--color-blue) !important; background: rgba(26,102,224,0.12) !important; box-shadow: inset 0 0 0 1px rgba(26,102,224,0.35) !important; }
-.home .badge-dot { background: var(--color-blue) !important; }
-
-/* KPI 与特性卡片文案色 */
-.home .kpi-value { color: var(--color-text) !important; }
-.home .kpi-label { color: var(--color-text-secondary) !important; }
-.home .feature-title { color: var(--color-text) !important; }
-.home .feature-desc { color: var(--color-text-secondary) !important; }
-.home .feature-link { color: var(--color-blue) !important; }
-
-/* 轮播与横幅 */
-.home .carousel { border-color: var(--color-border) !important; }
-.home .banner-content { color: var(--color-text) !important; }
-.home .banner-content::after { background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06)) !important; }
-
-/* 品牌与合规区 */
-.home .brand-title { color: var(--color-text-secondary) !important; }
-.home .logo-item { color: var(--color-text-secondary) !important; }
-.home .compliance-card { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
-.home .compliance-title { color: var(--color-text) !important; }
-.home .compliance-list { color: var(--color-text-secondary) !important; }
-
-/* 主按钮与次要按钮 */
-.home .btn-primary { background: var(--color-primary) !important; color: #fff !important; box-shadow: var(--glow-primary) !important; }
-.home .btn-primary:hover { box-shadow: var(--glow-primary) !important; filter: brightness(1.03) !important; }
-.home .btn-ghost { background: var(--color-surface) !important; color: var(--color-text-secondary) !important; border: 1px solid var(--color-border) !important; }
-.home .btn-ghost:hover { background: #161616 !important; color: var(--color-text) !important; box-shadow: var(--glow-primary) !important; }
-
-/* 生成内容区（若有） */
-.home .generated-content :deep(h1) { color: var(--color-text) !important; }
-.home .generated-content :deep(h2) { color: var(--color-text) !important; }
-.home .generated-content :deep(h3) { color: var(--color-text-secondary) !important; }
-.home .generated-content :deep(p) { color: var(--color-text-secondary) !important; }
-</style>
diff --git a/frontend/app/web-gold/src/views/material/MaterialListNew.vue b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
index 42212beba3..f8f8bae69b 100644
--- a/frontend/app/web-gold/src/views/material/MaterialListNew.vue
+++ b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
@@ -3,49 +3,60 @@
     <div class="material-list-container">
     <!-- 左侧分组面板 - 仅混剪素材显示 -->
     <transition name="sidebar-slide">
-      <div class="material-sidebar" v-show="activeCategory === 'MIX'">
+      <div
+        v-show="activeCategory === 'MIX'"
+        class="w-[220px] bg-card border-r border-border flex flex-col px-3 py-5 shrink-0"
+      >
         <!-- 分组列表 -->
-        <div class="sidebar-section">
-          <div class="sidebar-section__header">
-            <span>分组</span>
-            <a-button type="link" size="small" @click="handleOpenCreateGroupModal">
-              <PlusOutlined />
-            </a-button>
+        <div class="flex flex-col h-full">
+          <div class="flex items-center justify-between px-2 mb-3">
+            <span class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">分组</span>
+            <Button variant="ghost" size="sm" class="h-6 px-2" @click="handleOpenCreateGroupModal">
+              <Icon icon="lucide:plus" class="size-3" />
+            </Button>
           </div>
-          <div class="sidebar-group-list">
+          <div class="flex-1 overflow-y-auto -mx-1 px-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-w-1">
             <div
               v-for="group in groupList"
               :key="group.id"
-              class="sidebar-group-item"
-              :class="{ 'sidebar-group-item--active': selectedGroupId === group.id }"
+              class="group flex items-center justify-between px-3 py-2 cursor-pointer rounded-lg mb-0.5 transition-all duration-150"
+              :class="selectedGroupId === group.id
+                ? 'bg-primary/10 text-primary'
+                : 'hover:bg-muted'"
               @click="handleSelectGroup(group)"
             >
-              <div class="sidebar-group-item__content">
-                <FolderOutlined class="sidebar-group-item__icon" />
+              <div class="flex items-center min-w-0 flex-1">
+                <Icon
+                  icon="lucide:folder"
+                  class="mr-2 text-base shrink-0 transition-colors"
+                  :class="selectedGroupId === group.id ? 'text-primary' : 'text-muted-foreground'"
+                />
                 <template v-if="editingGroupId !== group.id">
-                  <span class="sidebar-group-item__name">{{ group.name }}</span>
+                  <span class="text-sm font-medium truncate">{{ group.name }}</span>
                 </template>
                 <template v-else>
-                  <a-input
-                    v-model:value="editingGroupName"
-                    size="small"
-                    class="sidebar-group-item__edit-input"
+                  <Input
+                    v-model="editingGroupName"
+                    size="sm"
+                    class="h-6 text-sm"
                     @blur="handleSaveGroupName(group)"
-                    @press-enter="handleSaveGroupName(group)"
+                    @keypress-enter="handleSaveGroupName(group)"
                     @click.stop
-                    autofocus
+                    autoFocus
                   />
                 </template>
               </div>
-              <div class="sidebar-group-item__actions">
+              <div class="flex items-center gap-0.5">
                 <template v-if="editingGroupId !== group.id">
-                  <span class="sidebar-group-item__count">{{ group.fileCount }}</span>
-                  <EditOutlined
-                    class="sidebar-group-item__action-btn"
+                  <span class="text-xs text-muted-foreground mr-2">{{ group.fileCount }}</span>
+                  <Icon
+                    icon="lucide:pencil"
+                    class="opacity-0 group-hover:opacity-100 p-1 cursor-pointer text-muted-foreground hover:text-primary text-xs transition-all"
                     @click.stop="handleEditGroup(group, $event)"
                   />
-                  <DeleteOutlined
-                    class="sidebar-group-item__action-btn sidebar-group-item__action-btn--danger"
+                  <Icon
+                    icon="lucide:trash-2"
+                    class="opacity-0 group-hover:opacity-100 p-1 cursor-pointer text-muted-foreground hover:text-destructive text-xs transition-all"
                     @click.stop="handleDeleteGroup(group, $event)"
                   />
                 </template>
@@ -59,186 +70,228 @@
     <!-- 右侧内容区域 -->
     <div class="material-content">
       <!-- 顶部工具栏 -->
-      <div class="material-toolbar">
-        <!-- 分类切换器 -->
-        <div class="category-switcher">
-          <div
-            class="category-switcher__item"
-            :class="{ 'category-switcher__item--active': activeCategory === 'MIX' }"
+      <div class="flex items-center justify-between px-6 py-4 bg-card border-b border-border gap-6">
+        <!-- 分类切换器 - 胶囊式设计 -->
+        <div class="flex bg-muted rounded-lg p-1 gap-1">
+          <button
+            class="flex items-center gap-2 px-5 py-2 rounded-lg cursor-pointer text-sm font-medium transition-all duration-200"
+            :class="activeCategory === 'MIX'
+              ? 'bg-card text-primary shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'"
             @click="handleCategoryChange('MIX')"
           >
-            <VideoCameraOutlined class="category-switcher__icon" />
+            <Icon icon="lucide:video" class="text-base" :class="activeCategory === 'MIX' ? 'text-primary' : 'text-muted-foreground'" />
             <span>混剪素材</span>
-          </div>
-          <div
-            class="category-switcher__item"
-            :class="{ 'category-switcher__item--active': activeCategory === 'DIGITAL_HUMAN' }"
+          </button>
+          <button
+            class="flex items-center gap-2 px-5 py-2 rounded-lg cursor-pointer text-sm font-medium transition-all duration-200"
+            :class="activeCategory === 'DIGITAL_HUMAN'
+              ? 'bg-card text-primary shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'"
             @click="handleCategoryChange('DIGITAL_HUMAN')"
           >
-            <UserOutlined class="category-switcher__icon" />
+            <Icon icon="lucide:user" class="text-base" :class="activeCategory === 'DIGITAL_HUMAN' ? 'text-primary' : 'text-muted-foreground'" />
             <span>数字人素材</span>
-          </div>
+          </button>
         </div>
 
         <!-- 搜索和操作区 -->
-        <div class="toolbar-actions">
+        <div class="flex items-center gap-3">
           <!-- 存储配额显示 -->
-          <div class="storage-quota">
-            <span class="storage-quota__label">存储空间</span>
-            <span class="storage-quota__value">{{ userStore.usedStorage.toFixed(2) }} / {{ userStore.totalStorage }} GB</span>
-            <div class="storage-quota__bar">
-              <div class="storage-quota__used" :style="{ width: `${Math.min((userStore.usedStorage / userStore.totalStorage) * 100, 100)}%` }"></div>
+          <div class="flex items-center gap-2 px-3 py-2 bg-muted rounded-lg border border-border">
+            <span class="text-xs text-muted-foreground">存储空间</span>
+            <span class="text-xs font-medium">{{ userStore.usedStorage.toFixed(2) }} / {{ userStore.totalStorage }} GB</span>
+            <div class="w-20 h-1 bg-border rounded-full overflow-hidden">
+              <div
+                class="h-full bg-gradient-to-r from-primary to-primary/70 rounded-full transition-all duration-300"
+                :style="{ width: `${Math.min((userStore.usedStorage / userStore.totalStorage) * 100, 100)}%` }"
+              ></div>
             </div>
           </div>
-          <a-input
-            v-model="searchKeyword"
-            placeholder="搜索文件名..."
-            class="search-input"
-            allow-clear
-            @press-enter="handleSearch"
-          >
-            <template #prefix>
-              <SearchOutlined />
-            </template>
-          </a-input>
-          <a-button
-            type="primary"
-            class="upload-btn"
+          <div class="relative flex items-center">
+            <Input
+              v-model="searchKeyword"
+              placeholder="搜索文件名..."
+              class="w-72"
+              @keypress-enter="handleSearch"
+            >
+              <template #prefix>
+                <Icon icon="lucide:search" class="size-4 text-muted-foreground" />
+              </template>
+            </Input>
+            <Button v-if="searchKeyword" variant="ghost" size="sm" class="absolute right-0" @click="searchKeyword = ''; handleSearch()">
+              <Icon icon="lucide:x" class="size-3" />
+            </Button>
+          </div>
+          <Button
             :disabled="activeCategory === 'MIX' && (!selectedGroupId || groupList.length === 0)"
             @click="handleOpenUploadModal"
           >
-            <UploadOutlined />
+            <Icon icon="lucide:upload" class="mr-2 size-4" />
             上传
-          </a-button>
+          </Button>
         </div>
       </div>
 
       <!-- 批量操作栏 -->
       <transition name="fade-slide">
-        <div class="batch-actions" v-if="selectedFileIds.length > 0">
-          <div class="batch-actions__info">
-            <CheckSquareOutlined />
-            <span>已选择 <strong>{{ selectedFileIds.length }}</strong> 个文件</span>
+        <div
+          v-if="selectedFileIds.length > 0"
+          class="flex items-center justify-between px-6 py-3 bg-primary/5 border-b border-primary/10"
+        >
+          <div class="flex items-center gap-2 text-sm text-foreground">
+            <Icon icon="lucide:check-square" class="size-5 text-primary" />
+            <span>已选择 <strong class="text-primary">{{ selectedFileIds.length }}</strong> 个文件</span>
           </div>
-          <div class="batch-actions__btns">
-            <a-button size="small" @click="selectedFileIds = []">取消选择</a-button>
-            <a-button type="primary" danger size="small" @click="handleBatchDelete">
-              <DeleteOutlined /> 删除
-            </a-button>
+          <div class="flex gap-2">
+            <Button variant="outline" size="sm" @click="selectedFileIds = []">取消选择</Button>
+            <Button variant="destructive" size="sm" @click="handleBatchDelete">
+              <Icon icon="lucide:trash-2" class="mr-1 size-4" />
+              删除
+            </Button>
           </div>
         </div>
       </transition>
 
       <!-- 文件列表 -->
-      <div class="material-content__list">
-        <a-spin :spinning="loading" tip="加载中..." class="loading-spinner">
-          <template v-if="fileList.length > 0">
-            <div class="material-grid">
+      <div class="flex-1 p-6 overflow-y-auto">
+        <div v-if="loading" class="w-full min-h-[400px] flex items-center justify-center">
+          <Spinner class="size-6" />
+        </div>
+        <template v-else-if="fileList.length > 0">
+          <!-- 素材网格 -->
+          <div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-5">
+            <div
+              v-for="file in fileList"
+              :key="file.id"
+              :data-file-id="file.id"
+              class="group relative bg-card border border-border rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:border-primary hover:shadow-md hover:-translate-y-0.5"
+              :class="{ 'border-primary shadow-[0_0_0_2px_rgba(59,130,246,0.2),var(--shadow-md)]': selectedFileIds.includes(file.id) }"
+              @click="handleFileClick(file)"
+            >
+              <!-- 选择指示器 -->
               <div
-                v-for="file in fileList"
-                :key="file.id"
-                :data-file-id="file.id"
-                class="material-item"
-                :class="{ 'material-item--selected': selectedFileIds.includes(file.id) }"
-                @click="handleFileClick(file)"
+                class="absolute top-2 left-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+                :class="{ '!opacity-100': selectedFileIds.includes(file.id) }"
               >
-                <!-- 选择指示器 -->
-                <div class="material-item__check">
-                  <div class="check-circle" :class="{ 'check-circle--checked': selectedFileIds.includes(file.id) }">
-                    <CheckOutlined v-if="selectedFileIds.includes(file.id)" />
-                  </div>
+                <div
+                  class="w-[22px] h-[22px] rounded-full border-2 flex items-center justify-center shadow-sm transition-all duration-150"
+                  :class="selectedFileIds.includes(file.id)
+                    ? 'bg-primary border-primary text-white'
+                    : 'bg-white/90 border-border'"
+                >
+                  <Icon v-if="selectedFileIds.includes(file.id)" icon="lucide:check" class="size-3" />
                 </div>
+              </div>
 
-                <!-- 预览图 -->
-                <div class="material-item__preview">
-                  <img
-                    v-if="file.imgUrl"
-                    :src="file.imgUrl"
-                    :alt="file.fileName"
-                    @error="handleImageError"
-                    loading="lazy"
-                  />
-                  <div v-else class="material-item__preview-placeholder">
-                    <FileOutlined />
-                  </div>
-                  <div class="material-item__overlay">
-                    <span class="material-item__type-tag">{{ getFileTypeText(file.fileName) }}</span>
-                  </div>
-                  <!-- hover 播放按钮 -->
-                  <div class="material-item__play-overlay" @click.stop="handlePreview(file)">
-                    <PlayCircleOutlined />
-                    <span v-if="file.duration" class="duration-tag">{{ formatDuration(file.duration) }}</span>
-                  </div>
+              <!-- 预览图 -->
+              <div class="relative w-full aspect-[16/10] bg-gradient-to-br from-muted to-muted/50 overflow-hidden">
+                <img
+                  v-if="file.imgUrl"
+                  :src="file.imgUrl"
+                  :alt="file.fileName"
+                  class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  @error="handleImageError"
+                  loading="lazy"
+                />
+                <div v-else class="w-full h-full flex items-center justify-center text-muted-foreground">
+                  <Icon icon="lucide:file" class="size-10" />
                 </div>
+                <!-- hover 播放按钮 -->
+                <div
+                  class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer text-white"
+                  @click.stop="handlePreview(file)"
+                >
+                  <Icon icon="lucide:play-circle" class="size-12" />
+                  <span v-if="file.duration" class="px-2 py-0.5 bg-black/60 rounded text-xs">{{ formatDuration(file.duration) }}</span>
+                </div>
+                <!-- 类型标签 -->
+                <div class="absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  <span class="text-xs font-semibold text-white uppercase tracking-wide">{{ getFileTypeText(file.fileName) }}</span>
+                </div>
+              </div>
 
-                <!-- 文件信息 -->
-                <div class="material-item__info">
-                  <div
-                    class="material-item__name"
-                    :title="file.displayName"
-                    @click.stop="handleEditName(file)"
-                  >
-                    <template v-if="editingFileId !== file.id">
-                      {{ file.displayName }}
-                    </template>
-                    <template v-else>
-                      <a-input
-                        ref="nameInputRef"
-                        v-model:value="editingDisplayName"
-                        size="small"
-                        @blur="handleSaveName(file)"
-                        @press-enter="handleSaveName(file)"
-                        @click.stop
-                        autofocus
-                      />
-                    </template>
-                  </div>
-                  <div class="material-item__meta">
-                    <span>{{ formatFileSize(file.fileSize) }}</span>
-                    <span class="meta-dot">·</span>
-                    <span>{{ formatDate(file.createTime) }}</span>
-                  </div>
+              <!-- 文件信息 -->
+              <div class="p-3 px-4">
+                <div
+                  class="text-sm font-semibold text-foreground truncate leading-snug mb-1.5 transition-colors hover:text-primary cursor-pointer"
+                  :title="file.displayName"
+                  @click.stop="handleEditName(file)"
+                >
+                  <template v-if="editingFileId !== file.id">
+                    {{ file.displayName }}
+                  </template>
+                  <template v-else>
+                    <Input
+                      ref="nameInputRef"
+                      v-model="editingDisplayName"
+                      size="sm"
+                      class="h-6"
+                      @blur="handleSaveName(file)"
+                      @keypress-enter="handleSaveName(file)"
+                      @click.stop
+                      autoFocus
+                    />
+                  </template>
+                </div>
+                <div class="flex items-center text-xs text-muted-foreground">
+                  <span>{{ formatFileSize(file.fileSize) }}</span>
+                  <span class="mx-2">·</span>
+                  <span>{{ formatDate(file.createTime) }}</span>
                 </div>
               </div>
             </div>
-          </template>
-          <div v-else class="empty-state">
-            <div class="empty-state__icon">
-              <FolderOpenOutlined />
-            </div>
-            <p class="empty-state__text">暂无素材</p>
-            <a-button type="primary" @click="handleOpenUploadModal">
-              <UploadOutlined /> 上传素材
-            </a-button>
           </div>
-        </a-spin>
+        </template>
+        <div v-else class="flex flex-col items-center justify-center py-20 px-6">
+          <div class="w-20 h-20 flex items-center justify-center bg-muted rounded-full mb-5 text-muted-foreground">
+            <Icon icon="lucide:folder-open" class="size-10" />
+          </div>
+          <p class="text-base text-muted-foreground mb-5">暂无素材</p>
+          <Button @click="handleOpenUploadModal">
+            <Icon icon="lucide:upload" class="mr-2 size-4" />
+            上传素材
+          </Button>
+        </div>
       </div>
 
       <!-- 底部操作栏 -->
-      <div class="material-footer">
-        <div class="footer-left">
-          <a-checkbox
+      <div class="flex items-center justify-between px-6 py-3 bg-card border-t border-border">
+        <div class="flex items-center gap-4">
+          <Checkbox
             :checked="selectedFileIds.length === fileList.length && fileList.length > 0"
             :indeterminate="selectedFileIds.length > 0 && selectedFileIds.length < fileList.length"
-            @change="handleSelectAll"
+            @update:checked="handleSelectAll"
           >
             全选
-          </a-checkbox>
-          <span class="footer-count" v-if="pagination.total > 0">
+          </Checkbox>
+          <span v-if="pagination.total > 0" class="text-sm text-muted-foreground">
             共 {{ pagination.total }} 个文件
           </span>
         </div>
-        <a-pagination
-          v-model:current="pagination.current"
-          v-model:page-size="pagination.pageSize"
-          :total="pagination.total"
-          :show-size-changer="true"
-          :show-quick-jumper="true"
-          :show-total="false"
-          size="small"
-          @change="handlePageChange"
-          @show-size-change="handlePageSizeChange"
-        />
+        <div class="flex items-center gap-3">
+          <span class="text-sm text-muted-foreground">
+            第 {{ pagination.current }} / {{ totalPages }} 页
+          </span>
+          <div class="flex gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="pagination.current === 1"
+              @click="handlePageChange(pagination.current - 1)"
+            >
+              上一页
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              :disabled="pagination.current * pagination.pageSize >= pagination.total"
+              @click="handlePageChange(pagination.current + 1)"
+            >
+              下一页
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -251,21 +304,27 @@
     />
 
     <!-- 新建分组弹窗 -->
-    <a-modal
-      v-model:visible="createGroupModalVisible"
-      title="新建分组"
-      @ok="handleCreateGroup"
-      @cancel="createGroupModalVisible = false"
-    >
-      <a-form :model="createGroupForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
-        <a-form-item label="分组名称" name="name" :rules="[{ required: true, message: '请输入分组名称' }]">
-          <a-input v-model:value="createGroupForm.name" placeholder="请输入分组名称" />
-        </a-form-item>
-        <a-form-item label="分组描述">
-          <a-textarea v-model:value="createGroupForm.description" placeholder="请输入分组描述（可选）" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
+    <Dialog :open="createGroupModalVisible" @update:open="(v) => createGroupModalVisible = v">
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>新建分组</DialogTitle>
+        </DialogHeader>
+        <div class="space-y-4 py-4">
+          <div class="space-y-2">
+            <Label for="groupName">分组名称 <span class="text-destructive">*</span></Label>
+            <Input id="groupName" v-model="createGroupForm.name" placeholder="请输入分组名称" />
+          </div>
+          <div class="space-y-2">
+            <Label for="groupDesc">分组描述</Label>
+            <Textarea id="groupDesc" v-model="createGroupForm.description" placeholder="请输入分组描述（可选）" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="createGroupModalVisible = false">取消</Button>
+          <Button @click="handleCreateGroup">确定</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
 
     <!-- 视频预览弹窗 -->
     <VideoPreviewModal
@@ -278,23 +337,34 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, watch, nextTick } from 'vue';
+import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue';
+import { toast } from 'vue-sonner';
+import { Icon } from '@iconify/vue';
+import { Loader2 as Spinner } from 'lucide-vue-next';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
-  UploadOutlined,
-  SearchOutlined,
-  FileOutlined,
-  FolderOutlined,
-  FolderOpenOutlined,
-  PlusOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  VideoCameraOutlined,
-  UserOutlined,
-  CheckOutlined,
-  CheckSquareOutlined,
-  PlayCircleOutlined
-} from '@ant-design/icons-vue';
-import { message, Modal } from 'ant-design-vue';
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
 import MaterialUploadModal from '@/components/material/MaterialUploadModal.vue';
 import MaterialService, { MaterialGroupService } from '@/api/material';
 import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue';
@@ -346,6 +416,9 @@ const pagination = reactive({
   total: 0
 })
 
+// 计算总页数
+const totalPages = computed(() => Math.ceil(pagination.total / pagination.pageSize))
+
 // 方法
 const handleCategoryChange = async (category) => {
   activeCategory.value = category
@@ -387,7 +460,7 @@ const handleSaveGroupName = async (group) => {
   const newName = editingGroupName.value.trim()
 
   if (!newName) {
-    message.warning('分组名称不能为空')
+    toast.warning('分组名称不能为空')
     editingGroupId.value = null
     return
   }
@@ -408,10 +481,10 @@ const handleSaveGroupName = async (group) => {
     })
 
     group.name = newName
-    message.success('分组重命名成功')
+    toast.success('分组重命名成功')
   } catch (error) {
     console.error('分组重命名失败:', error)
-    message.error('分组重命名失败，请重试')
+    toast.error('分组重命名失败，请重试')
   } finally {
     editingGroupId.value = null
   }
@@ -420,16 +493,9 @@ const handleSaveGroupName = async (group) => {
 // 通用的确认删除弹窗
 const showConfirmDelete = (title, content) => {
   return new Promise((resolve) => {
-    Modal.confirm({
-      title,
-      content,
-      okText: '确认删除',
-      cancelText: '取消',
-      okType: 'danger',
-      centered: true,
-      onOk: () => resolve(true),
-      onCancel: () => resolve(false),
-    })
+    // 使用简单的 confirm，后续可以替换为 AlertDialog
+    const result = window.confirm(`${title}\n\n${content}`)
+    resolve(result)
   })
 }
 
@@ -438,7 +504,7 @@ const handleDeleteGroup = async (group, event) => {
 
   // 校验：分组内还有文件时不允许删除
   if (group.fileCount > 0) {
-    message.warning(`分组「${group.name}」内还有 ${group.fileCount} 个文件，请先删除文件后再删除分组`)
+    toast.warning(`分组「${group.name}」内还有 ${group.fileCount} 个文件，请先删除文件后再删除分组`)
     return
   }
 
@@ -456,10 +522,10 @@ const handleDeleteGroup = async (group, event) => {
       await loadFileList()
     }
 
-    message.success('分组删除成功')
+    toast.success('分组删除成功')
   } catch (error) {
     console.error('分组删除失败:', error)
-    message.error('分组删除失败，请重试')
+    toast.error('分组删除失败，请重试')
   } finally {
     loading.value = false
   }
@@ -473,13 +539,17 @@ const handleOpenCreateGroupModal = () => {
 }
 
 const handleCreateGroup = async () => {
+  if (!createGroupForm.name.trim()) {
+    toast.warning('请输入分组名称')
+    return
+  }
   try {
     await MaterialGroupService.createGroup(createGroupForm)
-    message.success('分组创建成功')
+    toast.success('分组创建成功')
     createGroupModalVisible.value = false
     await loadGroupList()
   } catch (error) {
-    message.error('分组创建失败')
+    toast.error('分组创建失败')
   }
 }
 
@@ -529,7 +599,7 @@ const loadFileList = async () => {
     totalFileCount.value = total
   } catch (error) {
     console.error('加载文件列表失败:', error)
-    message.error('加载文件列表失败')
+    toast.error('加载文件列表失败')
   } finally {
     loading.value = false
   }
@@ -540,9 +610,8 @@ const handleSearch = () => {
   loadFileList()
 }
 
-const handlePageChange = (page, pageSize) => {
+const handlePageChange = (page) => {
   pagination.current = page
-  pagination.pageSize = pageSize
   loadFileList()
 }
 
@@ -578,8 +647,7 @@ const handleUploadComplete = async ({ successCount, failCount }) => {
 }
 
 
-const handleSelectAll = (event) => {
-  const checked = event.target.checked
+const handleSelectAll = (checked) => {
   if (checked) {
     selectedFileIds.value = fileList.value.map(file => file.id)
   } else {
@@ -589,7 +657,7 @@ const handleSelectAll = (event) => {
 
 const handleBatchDelete = async () => {
   if (selectedFileIds.value.length === 0) {
-    message.warning('请先选择要删除的文件')
+    toast.warning('请先选择要删除的文件')
     return
   }
 
@@ -617,10 +685,10 @@ const handleBatchDelete = async () => {
       await loadFileList()
     }
 
-    message.success(`成功删除 ${count} 个文件`)
+    toast.success(`成功删除 ${count} 个文件`)
   } catch (error) {
     console.error('批量删除失败:', error)
-    message.error('删除失败，请重试')
+    toast.error('删除失败，请重试')
   } finally {
     loading.value = false
   }
@@ -664,7 +732,7 @@ const handleSaveName = async (file) => {
   const newName = editingDisplayName.value.trim()
 
   if (!newName) {
-    message.warning('名称不能为空')
+    toast.warning('名称不能为空')
     editingFileId.value = null
     return
   }
@@ -677,7 +745,7 @@ const handleSaveName = async (file) => {
   try {
     await MaterialService.updateDisplayName(file.id, newName)
     file.displayName = newName
-    message.success('重命名成功')
+    toast.success('重命名成功')
 
     // 成功动画效果
     const nameElement = document.querySelector(`[data-file-id="${file.id}"] .material-item__name`)
@@ -690,7 +758,7 @@ const handleSaveName = async (file) => {
     }
   } catch (error) {
     console.error('重命名失败:', error)
-    message.error('重命名失败，请重试')
+    toast.error('重命名失败，请重试')
   } finally {
     editingFileId.value = null
   }
@@ -703,29 +771,29 @@ const handleImageError = (e) => {
 // 视频预览
 const handlePreview = async (file) => {
   if (!file.id) {
-    message.warning('文件信息不完整')
+    toast.warning('文件信息不完整')
     return
   }
 
   // 显示加载提示
-  const hideLoading = message.loading('正在获取视频地址...', 0)
+  const loadingToast = toast.loading('正在获取视频地址...')
 
   try {
     // 调用后端API获取带签名的视频播放URL
     const res = await MaterialService.getVideoPlayUrl(file.id)
-    hideLoading()
+    toast.dismiss(loadingToast)
 
     if (res.code === 0 && res.data) {
       previewUrl.value = res.data
       previewTitle.value = file.displayName || file.fileName || '视频预览'
       previewVisible.value = true
     } else {
-      message.error(res.msg || '获取视频地址失败')
+      toast.error(res.msg || '获取视频地址失败')
     }
   } catch (error) {
-    hideLoading()
+    toast.dismiss(loadingToast)
     console.error('获取视频播放URL失败:', error)
-    message.error('获取视频地址失败，请重试')
+    toast.error('获取视频地址失败，请重试')
   }
 }
 
@@ -761,165 +829,8 @@ onMounted(async () => {
   display: flex;
   height: 100%;
   background: var(--color-gray-50);
-}
-
-// ========================================
-// 侧边栏 - 分组面板
-// ========================================
-.material-sidebar {
-  width: 220px;
-  background: var(--color-bg-card);
-  border-right: 1px solid var(--color-gray-200);
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-5) var(--space-3);
-  flex-shrink: 0;
-}
-
-.sidebar-slide-enter-active,
-.sidebar-slide-leave-active {
-  transition: all var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.sidebar-slide-enter-from,
-.sidebar-slide-leave-to {
-  width: 0;
-  opacity: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.sidebar-section {
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 var(--space-2);
-    margin-bottom: var(--space-3);
-
-    span {
-      font-size: var(--font-size-xs);
-      font-weight: 600;
-      color: var(--color-gray-500);
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-    }
-
-    .ant-btn {
-      padding: 2px 6px;
-      height: auto;
-      color: var(--color-gray-500);
-
-      &:hover {
-        color: var(--color-primary-500);
-      }
-    }
-  }
-}
-
-.sidebar-group-list {
-  flex: 1;
-  overflow-y: auto;
-  margin: 0 calc(var(--space-1) * -1);
-  padding: 0 var(--space-1);
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--color-gray-200);
-    border-radius: 2px;
-  }
-}
-
-.sidebar-group-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-3);
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  margin-bottom: 2px;
-  transition: all var(--duration-fast);
-
-  &:hover {
-    background: var(--color-gray-100);
-
-    .sidebar-group-item__action-btn {
-      opacity: 1;
-    }
-  }
-
-  &--active {
-    background: var(--color-primary-50);
-    color: var(--color-primary-500);
-
-    .sidebar-group-item__icon {
-      color: var(--color-primary-500);
-    }
-  }
-
-  &__content {
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    flex: 1;
-  }
-
-  &__icon {
-    margin-right: var(--space-2);
-    font-size: var(--font-size-base);
-    color: var(--color-gray-500);
-    flex-shrink: 0;
-  }
-
-  &__name {
-    font-size: var(--font-size-sm);
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  &__count {
-    font-size: var(--font-size-xs);
-    color: var(--color-gray-500);
-    margin-right: var(--space-2);
-  }
-
-  &__action-btn {
-    opacity: 0;
-    padding: var(--space-1);
-    cursor: pointer;
-    color: var(--color-gray-500);
-    font-size: var(--font-size-xs);
-    transition: all var(--duration-fast);
-
-    &:hover {
-      color: var(--color-primary-500);
-    }
-
-    &--danger:hover {
-      color: var(--color-error-500);
-    }
-  }
-
-  &__edit-input {
-    :deep(.ant-input) {
-      height: 24px;
-      font-size: var(--font-size-sm);
-      border-color: var(--color-primary-500);
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-      border-radius: var(--radius-sm);
-    }
-  }
+  padding: var(--space-5);
+  gap: var(--space-5);
 }
 
 // ========================================
@@ -934,165 +845,19 @@ onMounted(async () => {
 }
 
 // ========================================
-// 顶部工具栏
+// 过渡动画
 // ========================================
-.material-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4) var(--space-6);
-  background: var(--color-bg-card);
-  border-bottom: 1px solid var(--color-gray-200);
-  gap: var(--space-6);
+.sidebar-slide-enter-active,
+.sidebar-slide-leave-active {
+  transition: all var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-// 分类切换器
-.category-switcher {
-  display: flex;
-  background: var(--color-gray-50);
-  border-radius: var(--radius-md);
-  padding: var(--space-1);
-  gap: var(--space-1);
-
-  &__item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-5);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    font-size: var(--font-size-base);
-    font-weight: 500;
-    color: var(--color-gray-600);
-    transition: all var(--duration-base) ease;
-
-    &:hover {
-      color: var(--color-gray-900);
-    }
-
-    &--active {
-      background: var(--color-bg-card);
-      color: var(--color-primary-500);
-      box-shadow: var(--shadow-sm);
-
-      .category-switcher__icon {
-        color: var(--color-primary-500);
-      }
-    }
-  }
-
-  &__icon {
-    font-size: var(--font-size-md);
-    color: var(--color-gray-500);
-    transition: color var(--duration-base) ease;
-  }
-}
-
-// 存储配额显示
-.storage-quota {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  background: var(--color-gray-50);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-gray-200);
-
-  &__label {
-    font-size: var(--font-size-xs);
-    color: var(--color-gray-500);
-  }
-
-  &__value {
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    color: var(--color-gray-900);
-  }
-
-  &__bar {
-    width: 80px;
-    height: 4px;
-    background: var(--color-gray-200);
-    border-radius: 2px;
-    overflow: hidden;
-  }
-
-  &__used {
-    height: 100%;
-    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
-    border-radius: 2px;
-    transition: width var(--duration-slow) ease;
-  }
-}
-
-// 工具栏操作区
-.toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-
-  .search-input {
-    width: 280px;
-
-    :deep(.ant-input) {
-      border-radius: var(--radius-md);
-      border-color: var(--color-gray-200);
-      background: var(--color-gray-50);
-
-      &:focus {
-        background: var(--color-bg-card);
-        border-color: var(--color-primary-500);
-        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-      }
-    }
-
-    :deep(.ant-input-prefix) {
-      color: var(--color-gray-500);
-    }
-  }
-
-  .upload-btn {
-    border-radius: var(--radius-md);
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-  }
-}
-
-// ========================================
-// 批量操作栏
-// ========================================
-.batch-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-3) var(--space-6);
-  background: var(--color-primary-50);
-  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
-
-  &__info {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    font-size: var(--font-size-base);
-    color: var(--color-gray-900);
-
-    .anticon {
-      color: var(--color-primary-500);
-      font-size: var(--font-size-md);
-    }
-
-    strong {
-      color: var(--color-primary-500);
-      font-weight: 600;
-    }
-  }
-
-  &__btns {
-    display: flex;
-    gap: var(--space-2);
-  }
+.sidebar-slide-enter-from,
+.sidebar-slide-leave-to {
+  width: 0;
+  opacity: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .fade-slide-enter-active,
@@ -1107,331 +872,16 @@ onMounted(async () => {
 }
 
 // ========================================
-// 文件列表区域
+// 滚动条样式
 // ========================================
-.material-content__list {
-  flex: 1;
-  padding: var(--space-6);
-  overflow-y: auto;
-
-  .loading-spinner {
-    width: 100%;
-    min-height: 400px;
-  }
-}
-
-// 空状态
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 80px var(--space-6);
-
-  &__icon {
-    width: 80px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--color-gray-100);
-    border-radius: 50%;
-    margin-bottom: var(--space-5);
-
-    .anticon {
-      font-size: 36px;
-      color: var(--color-gray-500);
-    }
+.scrollbar-thin {
+  &::-webkit-scrollbar {
+    width: 4px;
   }
 
-  &__text {
-    font-size: var(--font-size-md);
-    color: var(--color-gray-600);
-    margin-bottom: var(--space-5);
-  }
-}
-
-// ========================================
-// 素材网格
-// ========================================
-.material-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: var(--space-5);
-}
-
-.material-item {
-  position: relative;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  cursor: pointer;
-  transition: all var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    border-color: var(--color-primary-500);
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-
-    .material-item__check {
-      opacity: 1;
-    }
-
-    .material-item__overlay {
-      opacity: 1;
-    }
-  }
-
-  &--selected {
-    border-color: var(--color-primary-500);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), var(--shadow-md);
-
-    .material-item__check .check-circle {
-      background: var(--color-primary-500);
-      border-color: var(--color-primary-500);
-      opacity: 1;
-
-      .anticon {
-        opacity: 1;
-      }
-    }
-  }
-
-  // 选择指示器
-  &__check {
-    position: absolute;
-    top: var(--space-2);
-    left: var(--space-2);
-    z-index: 10;
-    opacity: 0;
-    transition: opacity var(--duration-fast);
-
-    .check-circle {
-      width: 22px;
-      height: 22px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.9);
-      border: 2px solid var(--color-gray-200);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--duration-fast);
-      box-shadow: var(--shadow-sm);
-
-      .anticon {
-        font-size: var(--font-size-xs);
-        color: white;
-        opacity: 0;
-        transition: opacity var(--duration-fast);
-      }
-
-      &--checked {
-        background: var(--color-primary-500);
-        border-color: var(--color-primary-500);
-
-        .anticon {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  // 预览区
-  &__preview {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 16 / 10;
-    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
-    overflow: hidden;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      transition: transform var(--duration-slower) ease;
-    }
-
-    &:hover img {
-      transform: scale(1.05);
-    }
-  }
-
-  &__preview-placeholder {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .anticon {
-      font-size: 40px;
-      color: var(--color-gray-500);
-    }
-  }
-
-  &__overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: var(--space-2) var(--space-3);
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
-    opacity: 0;
-    transition: opacity var(--duration-slow) ease;
-  }
-
-  &__play-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    background: rgba(0, 0, 0, 0.4);
-    opacity: 0;
-    transition: opacity var(--duration-base);
-    cursor: pointer;
-
-    .anticon {
-      font-size: 48px;
-      color: white;
-    }
-
-    .duration-tag {
-      padding: 2px 8px;
-      background: rgba(0, 0, 0, 0.6);
-      border-radius: 4px;
-      color: white;
-      font-size: var(--font-size-xs);
-    }
-  }
-
-  &__preview:hover &__play-overlay {
-    opacity: 1;
-  }
-
-  &__type-tag {
-    font-size: var(--font-size-xs);
-    font-weight: 600;
-    color: white;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  // 信息区
-  &__info {
-    padding: var(--space-3) var(--space-4);
-  }
-
-  &__name {
-    font-size: var(--font-size-base);
-    font-weight: 600;
-    color: var(--color-gray-900);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1.4;
-    margin-bottom: var(--space-2);
-    transition: color var(--duration-fast);
-
-    &:hover {
-      color: var(--color-primary-500);
-    }
-
-    :deep(.ant-input) {
-      font-size: var(--font-size-base);
-      font-weight: 600;
-      height: 22px;
-      border-radius: var(--radius-sm);
-      border-color: var(--color-primary-500);
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-    }
-  }
-
-  &__meta {
-    display: flex;
-    align-items: center;
-    font-size: var(--font-size-xs);
-    color: var(--color-gray-500);
-
-    .meta-dot {
-      margin: 0 var(--space-2);
-    }
-  }
-}
-
-// ========================================
-// 底部操作栏
-// ========================================
-.material-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-3) var(--space-6);
-  background: var(--color-bg-card);
-  border-top: 1px solid var(--color-gray-200);
-
-  .footer-left {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-  }
-
-  .footer-count {
-    font-size: var(--font-size-sm);
-    color: var(--color-gray-500);
-  }
-
-  :deep(.ant-pagination) {
-    .ant-pagination-item {
-      border-radius: var(--radius-base);
-      border-color: var(--color-gray-200);
-
-      &:hover {
-        border-color: var(--color-primary-500);
-
-        a {
-          color: var(--color-primary-500);
-        }
-      }
-    }
-
-    .ant-pagination-item-active {
-      border-color: var(--color-primary-500);
-      background: var(--color-primary-500);
-
-      a {
-        color: white;
-      }
-    }
-
-    .ant-pagination-options {
-      .ant-select-selector {
-        border-radius: var(--radius-base);
-        border-color: var(--color-gray-200);
-      }
-    }
-  }
-}
-
-// ========================================
-// 弹窗样式
-// ========================================
-:deep(.ant-modal-confirm) {
-  .ant-modal-content {
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-  }
-
-  .ant-modal-body {
-    padding: var(--space-6);
-  }
-
-  .ant-modal-footer {
-    padding: var(--space-4) var(--space-6);
-    border-top: 1px solid var(--color-gray-200);
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-gray-200);
+    border-radius: 2px;
   }
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/material/Mix.vue b/frontend/app/web-gold/src/views/material/Mix.vue
index d8f8aa2f86..c2cd3fcdc8 100644
--- a/frontend/app/web-gold/src/views/material/Mix.vue
+++ b/frontend/app/web-gold/src/views/material/Mix.vue
@@ -3,78 +3,75 @@
     <!-- 顶部操作栏 -->
     <header class="page-header">
       <div class="header-left">
-        <a-button type="text" @click="router.push('/material/list')">
-          <template #icon><ArrowLeftOutlined /></template>
+        <Button variant="ghost" size="sm" @click="router.push('/material/list')">
+          <Icon icon="lucide:arrow-left" class="mr-1" />
           返回
-        </a-button>
-        <a-divider type="vertical" />
+        </Button>
+        <div class="divider-vertical" />
         <h1 class="page-title">智能混剪</h1>
-        <a-tag color="processing" size="small">{{ sceneCount }} 场景</a-tag>
+        <Badge variant="secondary">{{ sceneCount }} 场景</Badge>
       </div>
 
       <div class="header-center">
         <!-- 核心参数 -->
         <div class="param-item">
           <span class="param-label">总时长</span>
-          <a-slider
-            v-model:value="formData.totalDuration"
+          <Slider
+            v-model="formData.totalDuration"
             :min="15"
             :max="30"
             :step="1"
-            :tooltip-visible="false"
-            style="width: 100px;"
+            class="w-24"
           />
           <span class="param-value">{{ formData.totalDuration }}s</span>
         </div>
 
-        <a-divider type="vertical" />
+        <div class="divider-vertical" />
 
         <div class="param-item">
           <span class="param-label">切片</span>
-          <a-slider
-            v-model:value="formData.clipDuration"
+          <Slider
+            v-model="formData.clipDuration"
             :min="3"
             :max="5"
             :step="1"
-            :tooltip-visible="false"
-            style="width: 80px;"
+            class="w-20"
           />
           <span class="param-value">{{ formData.clipDuration }}s</span>
         </div>
 
-        <a-divider type="vertical" />
+        <div class="divider-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>
+          <Select v-model="formData.produceCount" @update:model-value="saveProduceCount">
+            <SelectTrigger class="w-16 h-7">
+              <SelectValue placeholder="选择" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem :value="1">1 个</SelectItem>
+              <SelectItem :value="3">3 个</SelectItem>
+              <SelectItem :value="5">5 个</SelectItem>
+              <SelectItem :value="10">10 个</SelectItem>
+              <SelectItem :value="15">15 个</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
 
       <div class="header-right">
-        <a-button @click="showSettings = true">
-          <template #icon><SettingOutlined /></template>
+        <Button variant="outline" size="sm" @click="showSettings = true">
+          <Icon icon="lucide:settings" class="mr-1" />
           高级设置
-        </a-button>
-        <a-button
-          type="primary"
-          :loading="uiState.submitting"
+        </Button>
+        <Button
           :disabled="!canSubmit"
           @click="handleSubmit"
         >
-          <template #icon><RocketOutlined /></template>
+          <Icon v-if="!uiState.submitting" icon="lucide:rocket" class="mr-1" />
+          <Loader2Icon v-else class="mr-1 h-4 w-4 animate-spin" />
           开始混剪
-        </a-button>
+        </Button>
       </div>
     </header>
 
@@ -84,7 +81,7 @@
         <div class="progress-fill" :style="{ width: progressPercent + '%' }" />
       </div>
       <span class="progress-text">
-        <CheckCircleFilled v-if="filledCount === sceneCount" class="icon-complete" />
+        <CheckCircleIcon v-if="filledCount === sceneCount" class="icon-complete" />
         <span v-else class="icon-pending">{{ filledCount }}/{{ sceneCount }}</span>
         场景已就绪
       </span>
@@ -95,18 +92,18 @@
       <section class="scenes-section">
         <div class="section-header">
           <span class="section-title">
-            <PlaySquareOutlined />
+            <Icon icon="lucide:play-square" />
             场景编排
           </span>
           <div class="header-actions">
-            <a-button size="small" @click="clearScenes">
-              <template #icon><ClearOutlined /></template>
+            <Button variant="ghost" size="sm" @click="clearScenes">
+              <Icon icon="lucide:eraser" class="mr-1" />
               清空
-            </a-button>
-            <a-button size="small" type="primary" ghost @click="autoFillAllScenes">
-              <template #icon><ThunderboltOutlined /></template>
+            </Button>
+            <Button variant="outline" size="sm" @click="autoFillAllScenes">
+              <Icon icon="lucide:zap" class="mr-1" />
               一键填充
-            </a-button>
+            </Button>
           </div>
         </div>
 
@@ -129,19 +126,17 @@
                 <!-- 场景头部 -->
                 <div class="scene-header">
                   <div class="scene-drag">
-                    <HolderOutlined />
+                    <Icon icon="lucide:grip-vertical" />
                   </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)'
-                      }"
-                    />
+                    <Badge
+                      :variant="scene.candidates?.length ? 'default' : 'secondary'"
+                      class="px-2"
+                    >
+                      {{ scene.candidates?.length || 0 }}
+                    </Badge>
                   </div>
                 </div>
 
@@ -163,11 +158,11 @@
                             :src="getFileById(candidate.fileId).imgUrl"
                           />
                           <div v-else class="thumb-placeholder">
-                            <VideoCameraOutlined />
+                            <Icon icon="lucide:video" />
                           </div>
                           <div class="thumb-order">{{ cIndex + 1 }}</div>
                           <div class="thumb-remove" @click.stop="removeCandidate(index, cIndex)">
-                            <CloseOutlined />
+                            <Icon icon="lucide:x" />
                           </div>
                         </div>
                       </template>
@@ -177,13 +172,13 @@
                       class="candidate-add"
                       @click.stop="openSceneSelector(index)"
                     >
-                      <PlusOutlined />
+                      <Icon icon="lucide:plus" />
                       <span>继续添加</span>
                     </div>
                   </template>
                   <template v-else>
                     <div class="scene-empty" @click.stop="openSceneSelector(index)">
-                      <PlusCircleOutlined />
+                      <Icon icon="lucide:plus-circle" />
                       <span>点击添加候选素材</span>
                       <span class="empty-hint">最多 {{ constants.MAX_CANDIDATES_PER_SCENE }} 个</span>
                     </div>
@@ -193,12 +188,12 @@
                 <!-- 场景底部：素材来源（只读） -->
                 <div class="scene-footer">
                   <span class="source-label">来源:</span>
-                  <a-tag
-                    size="small"
-                    :color="scene.groupId ? 'blue' : 'default'"
+                  <Badge
+                    :variant="scene.groupId ? 'default' : 'outline'"
+                    class="text-xs"
                   >
                     {{ getSceneEffectiveGroupName(scene) }}
-                  </a-tag>
+                  </Badge>
                 </div>
               </div>
             </template>
@@ -208,40 +203,72 @@
     </main>
 
     <!-- 高级设置抽屉 -->
-    <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>
+    <Sheet v-model:open="showSettings" style="padding: 0 16px;">
+      <SheetContent class="w-80">
+        <SheetHeader class="pb-4 border-b border-border">
+          <SheetTitle class="text-lg">高级设置</SheetTitle>
+        </SheetHeader>
 
-        <a-divider />
-
-        <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 class="py-6 space-y-8">
+          <!-- 裁剪模式 - 胶囊式切换 -->
+          <div class="space-y-3">
+            <Label class="text-sm font-medium text-foreground">裁剪模式</Label>
+            <div class="crop-mode-switcher">
+              <button
+                class="crop-mode-btn"
+                :class="{ 'crop-mode-btn--active': formData.cropMode === 'center' }"
+                @click="formData.cropMode = 'center'"
+              >
+                <Icon icon="lucide:crop" class="size-4" />
+                <span>居中裁剪</span>
+              </button>
+              <button
+                class="crop-mode-btn"
+                :class="{ 'crop-mode-btn--active': formData.cropMode === 'fill' }"
+                @click="formData.cropMode = 'fill'"
+              >
+                <Icon icon="lucide:maximize-2" class="size-4" />
+                <span>填充模式</span>
+              </button>
             </div>
           </div>
-        </a-form-item>
-      </a-form>
-    </a-drawer>
+
+          <!-- 统计信息 - 现代卡片 -->
+          <div class="space-y-3">
+            <Label class="text-sm font-medium text-foreground">统计信息</Label>
+            <div class="stats-grid">
+              <div class="stat-card">
+                <div class="stat-card__icon stat-card__icon--blue">
+                  <Icon icon="lucide:layers" class="size-4" />
+                </div>
+                <div class="stat-card__content">
+                  <span class="stat-card__value">{{ sceneCount }}</span>
+                  <span class="stat-card__label">场景数</span>
+                </div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-card__icon stat-card__icon--green">
+                  <Icon icon="lucide:check-circle" class="size-4" />
+                </div>
+                <div class="stat-card__content">
+                  <span class="stat-card__value">{{ filledCount }}</span>
+                  <span class="stat-card__label">已填充</span>
+                </div>
+              </div>
+              <div class="stat-card stat-card--wide">
+                <div class="stat-card__icon stat-card__icon--purple">
+                  <Icon icon="lucide:clock" class="size-4" />
+                </div>
+                <div class="stat-card__content">
+                  <span class="stat-card__value">{{ actualTotalDuration }}<small>s</small></span>
+                  <span class="stat-card__label">总时长</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
 
     <!-- 场景选择弹窗 -->
     <SceneSelectorModal
@@ -269,24 +296,30 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
+import { toast } from 'vue-sonner'
 import { useRouter } from 'vue-router'
 import draggable from 'vuedraggable'
+import { Icon } from '@iconify/vue'
+import { Loader2Icon, CheckCircleIcon } from 'lucide-vue-next'
 
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Slider } from '@/components/ui/slider'
 import {
-  ArrowLeftOutlined,
-  SettingOutlined,
-  RocketOutlined,
-  PlaySquareOutlined,
-  ClearOutlined,
-  ThunderboltOutlined,
-  HolderOutlined,
-  PlusOutlined,
-  PlusCircleOutlined,
-  CheckCircleFilled,
-  VideoCameraOutlined,
-  CloseOutlined
-} from '@ant-design/icons-vue'
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle
+} from '@/components/ui/sheet'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 
 import { MaterialService, MaterialGroupService } from '@/api/material'
 import { MixTaskService } from '@/api/mixTask'
@@ -329,8 +362,8 @@ const showSettings = ref(false)
 const formData = ref({
   title: '',
   produceCount: Number(localStorage.getItem('mix-produce-count')) || 3,
-  totalDuration: Number(localStorage.getItem('mix-total-duration')) || 15,
-  clipDuration: Number(localStorage.getItem('mix-clip-duration')) || 5,
+  totalDuration: [Number(localStorage.getItem('mix-total-duration')) || 15],
+  clipDuration: [Number(localStorage.getItem('mix-clip-duration')) || 5],
   cropMode: localStorage.getItem('mix-crop-mode') || 'center'
 })
 
@@ -355,11 +388,11 @@ const dataState = ref({
 // 计算属性
 // ════════════════════════════════════════════════════════════════════════════
 const sceneCount = computed(() =>
-  Math.floor(formData.value.totalDuration / formData.value.clipDuration)
+  Math.floor(formData.value.totalDuration[0] / formData.value.clipDuration[0])
 )
 
 const actualTotalDuration = computed(() =>
-  sceneCount.value * formData.value.clipDuration
+  sceneCount.value * formData.value.clipDuration[0]
 )
 
 const filledCount = computed(() =>
@@ -416,7 +449,7 @@ watch(sceneCount, (newCount) => {
     for (let i = current; i < newCount; i++) {
       dataState.value.scenes.push({
         index: i,
-        duration: formData.value.clipDuration,
+        duration: formData.value.clipDuration[0],
         groupId: null,
         candidates: []
       })
@@ -431,12 +464,12 @@ watch([
   () => formData.value.clipDuration,
   () => formData.value.totalDuration
 ], ([clipDuration, totalDuration]) => {
-  localStorage.setItem('mix-clip-duration', clipDuration.toString())
-  localStorage.setItem('mix-total-duration', totalDuration.toString())
+  localStorage.setItem('mix-clip-duration', clipDuration[0].toString())
+  localStorage.setItem('mix-total-duration', totalDuration[0].toString())
   dataState.value.scenes.forEach(scene => {
-    scene.duration = clipDuration
+    scene.duration = clipDuration[0]
   })
-})
+}, { deep: true })
 
 const onSceneDragEnd = () => {
   dataState.value.scenes.forEach((scene, index) => {
@@ -447,16 +480,16 @@ const onSceneDragEnd = () => {
 const clearScenes = () => {
   dataState.value.scenes = Array(sceneCount.value).fill(null).map((_, index) => ({
     index,
-    duration: formData.value.clipDuration,
+    duration: formData.value.clipDuration[0],
     groupId: null,
     candidates: []
   }))
-  message.success('已清空所有场景')
+  toast.success('已清空所有场景')
 }
 
 const removeCandidate = (sceneIndex, candidateIndex) => {
   dataState.value.scenes[sceneIndex]?.candidates?.splice(candidateIndex, 1)
-  message.success('已移除候选')
+  toast.success('已移除候选')
 }
 
 const openSceneSelector = (index) => {
@@ -471,7 +504,7 @@ const openSceneSelector = (index) => {
 const autoFillAllScenes = async () => {
   // 检查是否有分组
   if (dataState.value.groupList.length === 0) {
-    message.warning('暂无素材分组，请先创建分组')
+    toast.warning('暂无素材分组，请先创建分组')
     return
   }
 
@@ -513,9 +546,9 @@ const doAutoFill = async () => {
   }
 
   if (filled > 0) {
-    message.success(`已为 ${filled} 个场景填充候选素材`)
+    toast.success(`已为 ${filled} 个场景填充候选素材`)
   } else {
-    message.info('所有场景已满')
+    toast.info('所有场景已满')
   }
 }
 
@@ -530,7 +563,7 @@ const loadGroups = async () => {
       dataState.value.groupList = res.data || []
     }
   } catch {
-    message.error('加载分组失败')
+    toast.error('加载分组失败')
   } finally {
     uiState.value.loadingGroups = false
   }
@@ -552,7 +585,7 @@ const handleLibraryGroupChange = async (groupId) => {
         dataState.value.allGroupFiles[groupId] = res.data.list || []
       }
     } catch {
-      message.error('加载素材失败')
+      toast.error('加载素材失败')
     } finally {
       uiState.value.loadingFiles = false
     }
@@ -578,7 +611,7 @@ const loadGroupFiles = async (groupId) => {
       return files
     }
   } catch {
-    message.error('加载素材失败')
+    toast.error('加载素材失败')
   }
   return []
 }
@@ -599,7 +632,7 @@ const handleModalConfirm = ({ sceneIndex, fileIds, setGroupId }) => {
     scene.groupId = setGroupId
   }
 
-  message.success(`场景 ${sceneIndex + 1} 已设置 ${scene.candidates.length} 个候选`)
+  toast.success(`场景 ${sceneIndex + 1} 已设置 ${scene.candidates.length} 个候选`)
 }
 
 // ════════════════════════════════════════════════════════════════════════════
@@ -627,10 +660,10 @@ const handleSubmit = async () => {
     })
 
     if (res.code === 0) {
-      message.success('混剪任务创建成功！')
+      toast.success('混剪任务创建成功！')
     }
   } catch (error) {
-    message.error('提交失败：' + error.message)
+    toast.error('提交失败：' + error.message)
   } finally {
     uiState.value.submitting = false
   }
@@ -731,30 +764,6 @@ onMounted(() => {
         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;
-        }
-      }
     }
   }
 
@@ -765,6 +774,12 @@ onMounted(() => {
   }
 }
 
+.divider-vertical {
+  width: 1px;
+  height: 16px;
+  background: @border;
+}
+
 // ════════════════════════════════════════════════════════════════════════════
 // 进度条 - 状态指示器
 // ════════════════════════════════════════════════════════════════════════════
@@ -847,10 +862,6 @@ onMounted(() => {
       font-size: var(--font-size-base);
       font-weight: 500;
       color: @text;
-
-      .anticon {
-        color: @primary;
-      }
     }
 
     .header-actions {
@@ -1075,11 +1086,6 @@ onMounted(() => {
       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;
@@ -1089,10 +1095,6 @@ onMounted(() => {
         border-color: @primary;
         color: @primary;
         background: @primary-light;
-
-        .anticon {
-          color: @primary;
-        }
       }
     }
   }
@@ -1114,32 +1116,175 @@ onMounted(() => {
 }
 
 // ════════════════════════════════════════════════════════════════════════════
-// 统计信息 - 抽屉内
+// 高级设置抽屉 - 现代化样式
 // ════════════════════════════════════════════════════════════════════════════
-.stats-row {
-  display: flex;
-  gap: var(--space-3);
+.settings-section {
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
 
-  .stat-item {
-    flex: 1;
-    text-align: center;
-    padding: var(--space-3);
-    background: var(--color-gray-100);
-    border-radius: var(--radius-button);
-
-    .stat-value {
-      display: block;
-      font-size: var(--font-size-xl);
+    &-title {
+      font-size: var(--font-size-sm);
       font-weight: 600;
-      color: @primary;
+      color: @text;
+    }
+  }
+}
+
+// 现代化 Toggle 按钮组
+.toggle-group {
+  display: flex;
+  background: var(--color-gray-100);
+  border-radius: 10px;
+  padding: 3px;
+  gap: 2px;
+}
+
+.toggle-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: 8px;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-600);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  background: transparent;
+
+  &:hover:not(&--active) {
+    color: @text;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &--active {
+    background: white;
+    color: @primary;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+  }
+}
+
+// 现代化统计卡片网格
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-3);
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  }
+
+  &--wide {
+    grid-column: span 2;
+  }
+
+  &__icon {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    flex-shrink: 0;
+
+    &--blue {
+      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+      color: var(--color-primary-500);
     }
 
-    .stat-label {
-      display: block;
-      font-size: var(--font-size-xs);
-      color: @text-muted;
-      margin-top: var(--space-1);
+    &--green {
+      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
+      color: var(--color-success-500);
     }
+
+    &--purple {
+      background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
+      color: #a855f7;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__value {
+    font-size: 20px;
+    font-weight: 700;
+    color: @text;
+    line-height: 1.2;
+
+    small {
+      font-size: var(--font-size-sm);
+      font-weight: 500;
+      color: var(--color-gray-500);
+      margin-left: 2px;
+    }
+  }
+
+  &__label {
+    font-size: var(--font-size-xs);
+    color: var(--color-gray-500);
+  }
+
+  &--wide {
+    grid-column: span 2;
+  }
+}
+
+// 胶囊式裁剪模式切换器
+.crop-mode-switcher {
+  display: flex;
+  background: var(--color-gray-100);
+  border-radius: 12px;
+  padding: 4px;
+  gap: 4px;
+}
+
+.crop-mode-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-600);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  background: transparent;
+
+  &:hover:not(&--active) {
+    color: @text;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &--active {
+    background: white;
+    color: var(--color-primary-500);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
   }
 }
 
diff --git a/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue b/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue
index b1e29489f1..836b2db1e0 100644
--- a/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue
+++ b/frontend/app/web-gold/src/views/material/components/GroupSelectModal.vue
@@ -1,44 +1,52 @@
 <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" />
+  <Dialog :open="visible" @update:open="$emit('update:visible', $event)">
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>选择素材分组</DialogTitle>
+      </DialogHeader>
+
+      <div class="py-4">
+        <p class="text-sm text-muted-foreground mb-4">请选择用于填充的素材分组：</p>
+        <div class="space-y-2">
+          <button
+            v-for="group in groupList"
+            :key="group.id"
+            class="group-select-item"
+            :class="{ 'group-select-item--active': tempSelectedId === group.id }"
+            @click="tempSelectedId = group.id"
+          >
+            <div class="flex items-center gap-3">
+              <Icon icon="lucide:folder" class="size-5 text-muted-foreground" />
+              <span class="flex-1 text-left">{{ group.name }}</span>
+              <Icon
+                v-if="tempSelectedId === group.id"
+                icon="lucide:check"
+                class="size-4 text-primary"
+              />
+            </div>
+          </button>
         </div>
       </div>
-      <div class="group-select-footer">
-        <a-button @click="$emit('update:visible', false)">取消</a-button>
-        <a-button
-          type="primary"
+
+      <DialogFooter>
+        <Button variant="outline" @click="$emit('update:visible', false)">取消</Button>
+        <Button
           :disabled="!tempSelectedId"
           @click="handleConfirm"
         >
           确认填充
-        </a-button>
-      </div>
-    </div>
-  </a-modal>
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
-import { FolderOutlined, CheckOutlined } from '@ant-design/icons-vue'
+import { Icon } from '@iconify/vue'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
 
 const props = defineProps({
   visible: { type: Boolean, default: false },
@@ -64,72 +72,24 @@ const handleConfirm = () => {
 </script>
 
 <style scoped lang="less">
-.group-select-content {
-  .group-select-hint {
-    margin: 0 0 16px;
-    font-size: 14px;
-    color: #666;
+.group-select-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  background: transparent;
+
+  &:hover {
+    background: var(--color-gray-50);
   }
 
-  .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;
+  &--active {
+    background: var(--color-primary-50);
+    border-color: var(--color-primary-200);
   }
 }
 </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 1fc231531c..5320dc07eb 100644
--- a/frontend/app/web-gold/src/views/material/components/SceneSelectorModal.vue
+++ b/frontend/app/web-gold/src/views/material/components/SceneSelectorModal.vue
@@ -1,124 +1,112 @@
 <template>
-  <a-modal
-    :open="visible"
-    :footer="null"
-    :closable="false"
-    width="800px"
-    centered
-    class="scene-selector-modal"
-    @update:open="$emit('update:visible', $event)"
-  >
-    <!-- 顶部 -->
-    <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 v-if="groupList.length > 1" class="group-tabs">
-        <div
-          v-for="g in groupList"
-          :key="g.id"
-          class="group-tab-item"
-          :class="{ 'group-tab-item--active': selectorGroupId === g.id }"
-          @click="handleSelectorGroupChange(g.id)"
-        >
-          {{ g.name }}
-        </div>
-      </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.imgUrl" :src="file.imgUrl" />
-            <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>
+  <Dialog :open="visible" @update:open="$emit('update:visible', $event)">
+    <DialogContent class="scene-selector-dialog sm:max-w-[800px] p-0 gap-0">
+      <!-- 顶部 -->
+      <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 class="card-name">{{ file.displayName || file.fileName }}</div>
         </div>
-      </template>
 
-      <a-empty v-else description="暂无素材" />
-    </div>
+        <!-- 分组切换 -->
+        <div v-if="groupList.length > 1" class="group-tabs">
+          <button
+            v-for="g in groupList"
+            :key="g.id"
+            class="group-tab-item"
+            :class="{ 'group-tab-item--active': selectorGroupId === g.id }"
+            @click="handleSelectorGroupChange(g.id)"
+          >
+            {{ g.name }}
+          </button>
+        </div>
+      </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>
+      <!-- 工具栏 -->
+      <div class="toolbar">
+        <div class="flex gap-2">
+          <Button size="sm" variant="outline" @click="handleSelectAll">
+            <Icon icon="lucide:check-square" class="size-4" />
+            全选
+          </Button>
+          <Button size="sm" variant="outline" @click="handleClearSelection">
+            <Icon icon="lucide:x-square" class="size-4" />
+            清空
+          </Button>
+          <Button size="sm" variant="secondary" @click="handleAutoFill">
+            <Icon icon="lucide:zap" class="size-4" />
+            随机
+          </Button>
+        </div>
+        <span class="toolbar-hint">点击选择 · 双击确认 · Enter 提交</span>
+      </div>
+
+      <!-- 素材网格 -->
+      <div class="material-grid">
+        <template v-if="selectorFiles.length > 0">
+          <button
+            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.imgUrl" :src="file.imgUrl" />
+              <div v-else class="cover-placeholder">
+                <Icon icon="lucide:video" class="size-6" />
+              </div>
+
+              <!-- 选中标记 -->
+              <div v-if="isSelected(file.id)" class="card-check">
+                <Icon icon="lucide:check" class="size-3" />
+              </div>
+
+              <!-- 序号 -->
+              <div v-if="isSelected(file.id)" class="card-order">
+                {{ getSelectionOrder(file.id) }}
+              </div>
+            </div>
+            <div class="card-name">{{ file.displayName || file.fileName }}</div>
+          </button>
+        </template>
+
+        <div v-else class="empty-state">
+          <Icon icon="lucide:image-off" class="size-12 text-muted-foreground/50" />
+          <p class="text-muted-foreground text-sm">暂无素材</p>
+        </div>
+      </div>
+
+      <!-- 底部 -->
+      <div class="modal-footer">
+        <div class="flex gap-2 justify-end">
+          <Button variant="outline" @click="$emit('update:visible', false)">取消</Button>
+          <Button
+            :disabled="tempSelectedFiles.length === 0"
+            @click="handleConfirm"
+          >
+            <Icon icon="lucide:check" class="size-4" />
+            确认选择
+          </Button>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup>
 import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
-import { message } from 'ant-design-vue'
-import {
-  VideoCameraOutlined,
-  CheckOutlined,
-  CloseOutlined,
-  CheckSquareOutlined,
-  CloseSquareOutlined,
-  ThunderboltOutlined
-} from '@ant-design/icons-vue'
+import { toast } from 'vue-sonner'
+import { Icon } from '@iconify/vue'
+
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
 
 const props = defineProps({
   visible: { type: Boolean, default: false },
@@ -205,7 +193,7 @@ const toggleSelection = (file) => {
     if (tempSelectedFiles.value.length < props.maxCandidates) {
       tempSelectedFiles.value.push(file.id)
     } else {
-      message.warning(`最多选择 ${props.maxCandidates} 个素材`)
+      toast.warning(`最多选择 ${props.maxCandidates} 个素材`)
     }
   }
 }
@@ -229,7 +217,7 @@ const handleAutoFill = () => {
   )
 
   if (availableMaterials.length === 0) {
-    message.warning('没有更多可用素材')
+    toast.warning('没有更多可用素材')
     return
   }
 
@@ -237,14 +225,14 @@ const handleAutoFill = () => {
   const targetCount = Math.min(3, maxAddCount)
 
   if (targetCount <= 0) {
-    message.warning('已达到上限')
+    toast.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} 个素材`)
+  toast.success(`已随机选择 ${selected.length} 个素材`)
 }
 
 const handleSelectorGroupChange = (groupId) => {
@@ -259,7 +247,7 @@ const handleSelectorGroupChange = (groupId) => {
 
 const handleConfirm = () => {
   if (tempSelectedFiles.value.length === 0) {
-    message.warning('请至少选择一个素材')
+    toast.warning('请至少选择一个素材')
     return
   }
   emit('confirm', {
@@ -273,40 +261,12 @@ const handleConfirm = () => {
 
 <style scoped lang="less">
 // ════════════════════════════════════════════════════════════════════════════
-// 弹窗样式 - 使用项目设计系统
+// 弹窗样式 - 现代化设计
 // ════════════════════════════════════════════════════════════════════════════
 
-// 🎨 设计令牌引用
-@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;
-  }
+.scene-selector-dialog {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
 }
 
 // ════════════════════════════════════════════════════════════════════════════
@@ -316,24 +276,24 @@ const handleConfirm = () => {
   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;
+  padding: 16px 20px;
+  background: var(--color-gray-50);
+  border-bottom: 1px solid var(--color-gray-100);
 
   .header-left {
     display: flex;
     align-items: center;
-    gap: var(--space-3);
+    gap: 12px;
   }
 
   .scene-badge {
-    padding: var(--space-1) var(--space-3);
-    background: @primary-light;
+    padding: 4px 12px;
+    background: var(--color-primary-50);
     border: 1px solid var(--color-primary-200);
-    border-radius: var(--radius-tag);
-    font-size: var(--font-size-sm);
+    border-radius: 6px;
+    font-size: 13px;
     font-weight: 500;
-    color: @primary;
+    color: var(--color-primary-500);
   }
 
   .counter {
@@ -344,49 +304,49 @@ const handleConfirm = () => {
     .counter-current {
       font-size: 22px;
       font-weight: 600;
-      color: @primary;
+      color: var(--color-primary-500);
     }
 
     .counter-sep {
-      color: @text-disabled;
+      color: var(--color-gray-300);
       margin: 0 2px;
     }
 
     .counter-max {
-      font-size: var(--font-size-base);
-      color: @text-muted;
+      font-size: 14px;
+      color: var(--color-gray-400);
     }
   }
 
   .group-tabs {
     display: flex;
-    gap: var(--space-2);
+    gap: 8px;
     flex: 1;
     justify-content: center;
   }
 
   .group-tab-item {
-    padding: var(--space-2) var(--space-4);
-    font-size: var(--font-size-sm);
+    padding: 8px 16px;
+    font-size: 13px;
     font-weight: 500;
-    color: @text-secondary;
+    color: var(--color-gray-500);
     background: var(--color-gray-100);
-    border-radius: var(--radius-button);
+    border: none;
+    border-radius: 8px;
     cursor: pointer;
-    transition: all var(--duration-base) ease;
-    user-select: none;
+    transition: all 0.2s ease;
 
     &:hover {
       background: var(--color-gray-200);
-      color: @text;
+      color: var(--color-gray-700);
     }
 
     &--active {
-      background: @primary;
-      color: var(--color-text-inverse);
+      background: var(--color-primary-500);
+      color: white;
 
       &:hover {
-        background: @primary-hover;
+        background: var(--color-primary-400);
       }
     }
   }
@@ -399,13 +359,13 @@ const handleConfirm = () => {
   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;
+  padding: 12px 20px;
+  background: white;
+  border-bottom: 1px solid var(--color-gray-100);
 
   .toolbar-hint {
-    font-size: var(--font-size-xs);
-    color: @text-muted;
+    font-size: 12px;
+    color: var(--color-gray-400);
   }
 }
 
@@ -415,42 +375,43 @@ const handleConfirm = () => {
 .material-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: var(--space-3);
-  padding: var(--space-4);
+  gap: 12px;
+  padding: 16px 20px;
   min-height: 360px;
   max-height: 360px;
   overflow-y: auto;
-  background: @bg-card;
+  background: white;
   align-content: start;
 
-  &:deep(.ant-empty) {
-    grid-column: 1 / -1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 320px;
-    margin: 0;
-  }
-
   &::-webkit-scrollbar {
     width: 6px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--color-gray-300);
+    background: var(--color-gray-200);
     border-radius: 3px;
   }
 }
 
+.empty-state {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 320px;
+  gap: 12px;
+}
+
 .material-card {
   cursor: pointer;
-  border-radius: var(--radius-button);
+  border-radius: 10px;
   overflow: hidden;
-  background: @bg-elevated;
+  background: var(--color-gray-50);
   border: 2px solid transparent;
-  transition: all var(--duration-base) ease;
-  animation: fadeIn var(--duration-slow) ease backwards;
+  transition: all 0.2s ease;
+  animation: fadeIn 0.3s ease backwards;
+  text-align: left;
 
   @keyframes fadeIn {
     from {
@@ -464,11 +425,11 @@ const handleConfirm = () => {
   }
 
   &:hover {
-    border-color: @primary;
-    box-shadow: var(--shadow-blue);
+    border-color: var(--color-primary-300);
+    box-shadow: 0 0 0 3px var(--color-primary-100);
   }
 
-  // ✅ 选中状态 - 青色主题
+  // ✅ 选中状态
   &--selected {
     border-color: var(--color-primary-400);
     background: var(--color-primary-50);
@@ -500,58 +461,56 @@ const handleConfirm = () => {
       align-items: center;
       justify-content: center;
       background: var(--color-gray-100);
-      color: @text-disabled;
-      font-size: 24px;
+      color: var(--color-gray-300);
     }
 
     // ✓ 选中勾选
     .card-check {
       position: absolute;
-      top: var(--space-1);
-      left: var(--space-1);
+      top: 6px;
+      left: 6px;
       width: 20px;
       height: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: @primary;
-      color: var(--color-text-inverse);
+      background: var(--color-primary-500);
+      color: white;
       border-radius: 50%;
-      font-size: 11px;
       opacity: 0;
-      transition: opacity var(--duration-base) ease;
+      transition: opacity 0.2s ease;
     }
 
     // 🏷️ 选中序号
     .card-order {
       position: absolute;
-      top: var(--space-1);
-      right: var(--space-1);
+      top: 6px;
+      right: 6px;
       min-width: 20px;
       height: 20px;
-      padding: 0 var(--space-1);
+      padding: 0 6px;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: @warning;
-      color: var(--color-text-inverse);
+      background: var(--color-warning-500);
+      color: white;
       font-size: 11px;
       font-weight: 600;
       border-radius: 10px;
       opacity: 0;
       transform: scale(0.8);
-      transition: all var(--duration-base) ease;
+      transition: all 0.2s ease;
     }
   }
 
   .card-name {
-    padding: var(--space-2);
+    padding: 8px;
     font-size: 11px;
-    color: @text-secondary;
+    color: var(--color-gray-500);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    background: @bg-card;
+    background: white;
   }
 }
 
@@ -562,35 +521,9 @@ const handleConfirm = () => {
   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;
-    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;
-    }
-  }
+  padding: 12px 20px;
+  background: var(--color-gray-50);
+  border-top: 1px solid var(--color-gray-100);
 }
 
 // ════════════════════════════════════════════════════════════════════════════
@@ -609,7 +542,7 @@ const handleConfirm = () => {
 
   .modal-header {
     flex-wrap: wrap;
-    gap: var(--space-2);
+    gap: 8px;
   }
 
   .group-tabs {
diff --git a/frontend/app/web-gold/src/views/task-center/BenchmarkTaskList.vue b/frontend/app/web-gold/src/views/task-center/BenchmarkTaskList.vue
index 3f311a69c5..4577f575fe 100644
--- a/frontend/app/web-gold/src/views/task-center/BenchmarkTaskList.vue
+++ b/frontend/app/web-gold/src/views/task-center/BenchmarkTaskList.vue
@@ -2,94 +2,209 @@
   <div class="task-list-container">
     <!-- 筛选 -->
     <div class="filter-section">
-      <a-select
-        v-model:value="filterStatus"
-        placeholder="全部状态"
-        style="width: 150px"
-        allowClear
-        @change="handleFilterChange"
-      >
-        <a-select-option :value="0">待处理</a-select-option>
-        <a-select-option :value="1">处理中</a-select-option>
-        <a-select-option :value="2">成功</a-select-option>
-        <a-select-option :value="3">失败</a-select-option>
-      </a-select>
-      <a-button type="primary" @click="handleRefresh" :loading="loading">刷新</a-button>
+      <Select v-model="filterStatus" @update:model-value="handleFilterChange">
+        <SelectTrigger class="w-[150px]">
+          <SelectValue placeholder="全部状态" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem :value="null">全部状态</SelectItem>
+          <SelectItem :value="0">待处理</SelectItem>
+          <SelectItem :value="1">处理中</SelectItem>
+          <SelectItem :value="2">成功</SelectItem>
+          <SelectItem :value="3">失败</SelectItem>
+        </SelectContent>
+      </Select>
+      <Button @click="handleRefresh" :disabled="loading">
+        <Icon v-if="loading" icon="lucide:loader-2" class="size-4 animate-spin" />
+        <Icon v-else icon="lucide:refresh-cw" class="size-4" />
+        刷新
+      </Button>
     </div>
 
     <!-- 列表 -->
-    <a-table
-      :columns="columns"
-      :data-source="taskList"
-      :loading="loading"
-      :pagination="pagination"
-      @change="handleTableChange"
-      row-key="id"
-    >
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'status'">
-          <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
-        </template>
-        <template v-else-if="column.key === 'progress'">
-          <a-progress :percent="record.progress" :status="getProgressStatus(record.status)" size="small" />
-        </template>
-        <template v-else-if="column.key === 'createTime'">
-          {{ formatTime(record.createTime) }}
-        </template>
-        <template v-else-if="column.key === 'action'">
-          <a-space>
-            <a-button v-if="record.status === 2 && record.generatedPrompt" type="link" size="small" @click="handleViewPrompt(record)">查看</a-button>
-            <a-button v-if="record.status === 2 && record.generatedPrompt" type="link" size="small" @click="handleCopyPrompt(record)">复制</a-button>
-            <a-popconfirm v-if="record.status !== 1" title="确定删除？" @confirm="handleDelete(record)">
-              <a-button type="link" size="small" danger>删除</a-button>
-            </a-popconfirm>
-          </a-space>
-        </template>
-      </template>
-    </a-table>
+    <div class="table-wrapper">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="min-w-[200px]">任务名称</TableHead>
+            <TableHead class="w-[100px]">视频数量</TableHead>
+            <TableHead class="w-[100px]">状态</TableHead>
+            <TableHead class="w-[150px]">进度</TableHead>
+            <TableHead class="w-[180px]">创建时间</TableHead>
+            <TableHead class="w-[180px]">操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="record in taskList" :key="record.id">
+            <TableCell class="font-medium">
+              <span class="truncate block max-w-[200px]" :title="record.taskName">
+                {{ record.taskName }}
+              </span>
+            </TableCell>
+            <TableCell>{{ record.videoCount }}</TableCell>
+            <TableCell>
+              <Badge :variant="getStatusVariant(record.status)" :class="STATUS_MAP.class[record.status]">
+                {{ getStatusText(record.status) }}
+              </Badge>
+            </TableCell>
+            <TableCell>
+              <Progress :model-value="record.progress" class="h-2" />
+            </TableCell>
+            <TableCell class="text-muted-foreground">
+              {{ formatTime(record.createTime) }}
+            </TableCell>
+            <TableCell>
+              <div class="flex gap-1">
+                <Button
+                  v-if="record.status === 2 && record.generatedPrompt"
+                  variant="link"
+                  size="sm"
+                  class="h-auto p-0"
+                  @click="handleViewPrompt(record)"
+                >
+                  查看
+                </Button>
+                <Button
+                  v-if="record.status === 2 && record.generatedPrompt"
+                  variant="link"
+                  size="sm"
+                  class="h-auto p-0"
+                  @click="handleCopyPrompt(record)"
+                >
+                  复制
+                </Button>
+                <AlertDialog v-if="record.status !== 1">
+                  <AlertDialogTrigger as-child>
+                    <Button variant="link" size="sm" class="h-auto p-0 text-destructive">
+                      删除
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>确认删除</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        确定要删除这个任务吗？此操作无法撤销。
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>取消</AlertDialogCancel>
+                      <AlertDialogAction @click="handleDelete(record)">确认删除</AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </TableCell>
+          </TableRow>
+          <TableRow v-if="taskList.length === 0 && !loading">
+            <TableCell colspan="6" class="h-32 text-center text-muted-foreground">
+              暂无任务数据
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="pagination.total > 0" class="pagination-section">
+      <span class="text-sm text-muted-foreground">
+        共 {{ pagination.total }} 条
+      </span>
+      <div class="flex gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="pagination.current === 1"
+          @click="handlePageChange(pagination.current - 1)"
+        >
+          上一页
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="pagination.current * pagination.pageSize >= pagination.total"
+          @click="handlePageChange(pagination.current + 1)"
+        >
+          下一页
+        </Button>
+      </div>
+    </div>
 
     <!-- 提示词弹窗 -->
-    <a-modal v-model:open="promptModalVisible" title="生成的提示词" :footer="null" width="700px">
-      <div class="prompt-content">{{ currentPrompt }}</div>
-      <div class="prompt-actions">
-        <a-button type="primary" @click="handleCopyCurrentPrompt">复制到剪贴板</a-button>
-      </div>
-    </a-modal>
+    <Dialog v-model:open="promptModalVisible">
+      <DialogContent class="sm:max-w-[700px]">
+        <DialogHeader>
+          <DialogTitle>生成的提示词</DialogTitle>
+        </DialogHeader>
+        <div class="prompt-content">{{ currentPrompt }}</div>
+        <DialogFooter>
+          <Button @click="handleCopyCurrentPrompt">
+            <Icon icon="lucide:copy" class="size-4" />
+            复制到剪贴板
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
+import { toast } from 'vue-sonner'
+import { Icon } from '@iconify/vue'
 import dayjs from 'dayjs'
+
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Progress } from '@/components/ui/progress'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
+
 import { BenchmarkTaskApi } from '@/api/benchmarkTask'
 import { copyToClipboard } from '@/utils/clipboard'
 
 const loading = ref(false)
 const taskList = ref([])
-const filterStatus = ref(undefined)
+const filterStatus = ref(null)
 const promptModalVisible = ref(false)
 const currentPrompt = ref('')
 
 const pagination = reactive({
   current: 1,
   pageSize: 10,
-  total: 0,
-  showSizeChanger: true,
-  showTotal: (total) => `共 ${total} 条`,
+  total: 0
 })
 
-const columns = [
-  { title: '任务名称', dataIndex: 'taskName', key: 'taskName', ellipsis: true },
-  { title: '视频数量', dataIndex: 'videoCount', key: 'videoCount', width: 100 },
-  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
-  { title: '进度', dataIndex: 'progress', key: 'progress', width: 150 },
-  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
-  { title: '操作', key: 'action', width: 180 },
-]
-
 const STATUS_MAP = {
-  color: { 0: 'default', 1: 'processing', 2: 'success', 3: 'error' },
+  // 0: 待处理(灰), 1: 处理中(蓝), 2: 成功(绿), 3: 失败(红)
+  variant: { 0: 'secondary', 1: 'default', 2: 'outline', 3: 'destructive' },
+  class: {
+    2: 'border-green-500 text-green-600 bg-green-50'
+  },
   text: { 0: '待处理', 1: '处理中', 2: '成功', 3: '失败' }
 }
 
@@ -112,30 +227,32 @@ async function loadTaskList() {
     }
   } catch (error) {
     console.error('加载失败:', error)
-    message.error('加载任务列表失败')
+    toast.error('加载任务列表失败')
   } finally {
     loading.value = false
   }
 }
 
 function handleRefresh() { loadTaskList() }
-function handleFilterChange() { pagination.current = 1; loadTaskList() }
-function handleTableChange(page) { pagination.current = page.current; pagination.pageSize = page.pageSize; loadTaskList() }
 
-function getStatusColor(status) {
-  return STATUS_MAP.color[status] || 'default'
+function handleFilterChange() {
+  pagination.current = 1
+  loadTaskList()
+}
+
+function handlePageChange(page) {
+  pagination.current = page
+  loadTaskList()
+}
+
+function getStatusVariant(status) {
+  return STATUS_MAP.variant[status] || 'secondary'
 }
 
 function getStatusText(status) {
   return STATUS_MAP.text[status] || '未知'
 }
 
-function getProgressStatus(status) {
-  if (status === 3) return 'exception'
-  if (status === 2) return 'success'
-  return 'active'
-}
-
 function handleViewPrompt(record) {
   currentPrompt.value = record.generatedPrompt
   promptModalVisible.value = true
@@ -143,7 +260,7 @@ function handleViewPrompt(record) {
 
 async function copyPromptText(text) {
   const success = await copyToClipboard(text)
-  message[success ? 'success' : 'error'](success ? '已复制' : '复制失败')
+  toast[success ? 'success' : 'error'](success ? '已复制' : '复制失败')
 }
 
 function handleCopyPrompt(record) {
@@ -157,10 +274,10 @@ function handleCopyCurrentPrompt() {
 async function handleDelete(record) {
   try {
     await BenchmarkTaskApi.deleteTask(record.id)
-    message.success('删除成功')
+    toast.success('删除成功')
     loadTaskList()
   } catch {
-    message.error('删除失败')
+    toast.error('删除失败')
   }
 }
 
@@ -178,21 +295,33 @@ onMounted(() => {
 
 .filter-section {
   display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.table-wrapper {
+  background: white;
+  border-radius: 12px;
+  border: 1px solid var(--color-gray-100);
+  overflow: hidden;
+}
+
+.pagination-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  margin-top: 16px;
 }
 
 .prompt-content {
   padding: 16px;
-  background: var(--color-bg-secondary, #f5f5f5);
-  border-radius: 6px;
+  background: var(--color-gray-50);
+  border-radius: 8px;
   white-space: pre-wrap;
   max-height: 400px;
   overflow-y: auto;
-}
-
-.prompt-actions {
-  margin-top: 16px;
-  text-align: right;
+  font-size: 14px;
+  line-height: 1.6;
 }
 </style>