From 16f34ac54e04a2b47267436150dc8d66833ae6b6 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Mon, 16 Mar 2026 01:52:38 +0800
Subject: [PATCH] refactor(layout): update BasicLayout and LayoutHeader styling
 with ant design improvements

- Replace ant-design-vue message with vue-sonner toast notifications
- Remove LayoutHeader component import from BasicLayout
- Update CSS classes for better styling consistency
- Adjust padding and spacing in layout components
- Modify shadow and overflow properties in task management views
- Add hidden class utility for element visibility control
---
 .../src/layouts/components/BasicLayout.vue    |  17 +-
 .../src/layouts/components/LayoutHeader.vue   |  12 +-
 .../src/views/content-style/Benchmark.vue     |  68 +-
 .../components/BenchmarkForm.vue              | 109 ++-
 .../components/BenchmarkTable.vue             | 319 ++++---
 .../components/CreateStyleTaskModal.vue       | 122 +--
 .../app/web-gold/src/views/dh/VoiceCopy.vue   | 848 ++++++++++--------
 .../digital-human-task/index.vue              |   4 +-
 .../task-management/layout/TaskLayout.vue     |   6 +-
 .../system/task-management/mix-task/index.vue |   3 +-
 .../web-gold/src/views/trends/Forecast.vue    | 161 ++--
 11 files changed, 977 insertions(+), 692 deletions(-)

diff --git a/frontend/app/web-gold/src/layouts/components/BasicLayout.vue b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
index 508039f6c2..b5c1b2d566 100644
--- a/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
@@ -1,8 +1,5 @@
 <script setup>
-import LayoutHeader from './LayoutHeader.vue'
-
 defineOptions({ name: 'BasicLayout' })
-
 defineProps({
   title: { type: String, default: '' },
   showBack: { type: Boolean, default: false },
@@ -13,19 +10,9 @@ const emit = defineEmits(['back'])
 </script>
 
 <template>
-  <div class="flex flex-col h-full overflow-hidden rounded-xl border bg-card">
-    <LayoutHeader
-      :title="title"
-      :show-back="showBack"
-      @back="emit('back')"
-    >
-      <template #extra>
-        <slot name="extra"></slot>
-      </template>
-    </LayoutHeader>
-
+  <div class="flex flex-col h-full overflow-hidden">
     <!-- 页面内容 -->
-    <div class="flex-1 flex flex-col overflow-x-hidden overflow-y-auto bg-card p-4">
+    <div class="flex-1 flex flex-col overflow-x-hidden overflow-y-auto p-4">
       <slot></slot>
     </div>
   </div>
diff --git a/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue b/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
index ebce07d3ed..11206e72a2 100644
--- a/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
+++ b/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
@@ -32,12 +32,10 @@ const handleBack = () => {
 
 <template>
   <div
-    class="flex justify-between items-center gap-4 border-b bg-card shrink-0 min-h-14 transition-all"
+    class="flex justify-between items-center gap-4 shrink-0 min-h-12"
     :class="{
-      'border-border': !ghost,
-      'border-transparent bg-transparent': ghost,
-      'px-4 py-3': !padding,
-      'dark:border-border dark:bg-card dark:text-foreground': !ghost
+      'bg-transparent': ghost,
+      'px-4 py-2': !padding
     }"
     :style="padding ? { padding } : {}"
   >
@@ -53,9 +51,9 @@ const handleBack = () => {
       </Button>
       <div class="flex-1 min-w-0 flex items-center">
         <slot name="header">
-          <h1 v-if="title" class="text-lg font-semibold text-foreground m-0 leading-snug tracking-tight">
+          <span v-if="title" class="text-base font-medium text-foreground">
             {{ title }}
-          </h1>
+          </span>
         </slot>
       </div>
     </div>
diff --git a/frontend/app/web-gold/src/views/content-style/Benchmark.vue b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
index 92e7d3b87b..62a5bef300 100644
--- a/frontend/app/web-gold/src/views/content-style/Benchmark.vue
+++ b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
+import { toast } from 'vue-sonner'
 import { resolveId } from '@/utils/url'
 import { exportBenchmarkDataToExcel } from '@/utils/excel'
 import GlobalLoading from '@/components/GlobalLoading.vue'
@@ -75,10 +75,10 @@ async function handleAnalyzeUser() {
     maxCursor.value = result.maxCursor
     hasMore.value = result.hasMore
     await saveTableDataToSession()
-    message.success('分析完成')
+    toast.success('分析完成')
   } catch (err) {
     console.error(err)
-    message.error('请求失败，请稍后重试')
+    toast.error('请求失败，请稍后重试')
   } finally {
     loading.value = false
   }
@@ -86,17 +86,17 @@ async function handleAnalyzeUser() {
 
 async function handleExportToExcel() {
   if (!data.value?.length) {
-    message.warning('暂无数据可导出')
+    toast.warning('暂无数据可导出')
     return
   }
 
   if (!selectedRowKeys.value.length) {
-    message.warning('请先选择要导出的行')
+    toast.warning('请先选择要导出的行')
     return
   }
 
   if (selectedRowKeys.value.length > 20) {
-    message.warning('最多只能导出20条数据，请重新选择')
+    toast.warning('最多只能导出20条数据，请重新选择')
     return
   }
 
@@ -120,7 +120,7 @@ async function handleExportToExcel() {
         globalLoadingText.value = '正在导出...'
       } catch (error) {
         console.error('获取语音转写失败:', error)
-        message.warning('部分数据语音转写失败，将导出已有数据')
+        toast.warning('部分数据语音转写失败，将导出已有数据')
       }
     }
 
@@ -129,7 +129,11 @@ async function handleExportToExcel() {
       platform: form.value.platform,
       formatTime
     })
-    message[result.success ? 'success' : 'error'](result.message)
+    if (result.success) {
+      toast.success(result.message)
+    } else {
+      toast.error(result.message)
+    }
   } finally {
     globalLoading.value = false
     globalLoadingText.value = ''
@@ -186,10 +190,10 @@ async function handleLoadMore() {
     }
 
     await saveTableDataToSession()
-    message.success(`已加载 ${data.value.length} 条数据`)
+    toast.success(`已加载 ${data.value.length} 条数据`)
   } catch (err) {
     console.error(err)
-    message.error('加载失败，请稍后重试')
+    toast.error('加载失败，请稍后重试')
   } finally {
     loadingMore.value = false
   }
@@ -206,15 +210,15 @@ function getSelectedVideoUrls() {
 // 打开创建风格任务弹窗
 function handleCreateAsyncTask() {
   if (!selectedRowKeys.value.length) {
-    message.warning('请先选择要分析的视频')
+    toast.warning('请先选择要分析的视频')
     return
   }
   if (selectedRowKeys.value.length > 20) {
-    message.warning('最多只能选择20个视频')
+    toast.warning('最多只能选择20个视频')
     return
   }
   if (!getSelectedVideoUrls().length) {
-    message.warning('选中的视频没有有效的URL')
+    toast.warning('选中的视频没有有效的URL')
     return
   }
   createTaskModalVisible.value = true
@@ -256,19 +260,18 @@ defineOptions({ name: 'ContentStyleBenchmark' })
       />
 
       <section v-if="!data.length" class="card results-card empty-state">
-        <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"/>
-              <line x1="32" y1="75" x2="88" y2="75" stroke="currentColor" stroke-width="2" opacity="0.3"/>
-              <line x1="32" y1="82" x2="88" y2="82" stroke="currentColor" stroke-width="2" opacity="0.3"/>
-              <line x1="32" y1="89" x2="72" y2="89" stroke="currentColor" stroke-width="2" opacity="0.3"/>
-            </svg>
-          </template>
-        </a-empty>
+        <div class="empty-content">
+          <svg class="empty-icon" 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"/>
+            <line x1="32" y1="75" x2="88" y2="75" stroke="currentColor" stroke-width="2" opacity="0.3"/>
+            <line x1="32" y1="82" x2="88" y2="82" stroke="currentColor" stroke-width="2" opacity="0.3"/>
+            <line x1="32" y1="89" x2="72" y2="89" stroke="currentColor" stroke-width="2" opacity="0.3"/>
+          </svg>
+          <p class="empty-text">暂无数据，请点击开始分析</p>
+        </div>
       </section>
     </div>
 
@@ -322,12 +325,21 @@ defineOptions({ name: 'ContentStyleBenchmark' })
   min-height: 420px;
 }
 
-.empty-state :deep(.ant-empty) {
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 40px 0;
 }
 
-.empty-state :deep(.ant-empty-description) {
+.empty-icon {
+  color: var(--color-gray-400);
+  margin-bottom: var(--space-4);
+}
+
+.empty-text {
   color: var(--color-gray-600);
   font-size: var(--font-size-base);
+  margin: 0;
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue b/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
index efc998e12f..7cfb7c2e6b 100644
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
@@ -1,6 +1,10 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import GradientButton from '@/components/GradientButton.vue'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Label } from '@/components/ui/label'
 import { usePointsConfigStore } from '@/stores/pointsConfig'
 
 const pointsConfigStore = usePointsConfigStore()
@@ -39,23 +43,31 @@ function handleReset() {
 
 <template>
   <section class="form-container">
-    <a-form :model="form" layout="vertical">
-      <a-form-item label="平台">
-        <a-radio-group v-model:value="form.platform" button-style="solid">
-          <a-radio-button value="抖音">抖音</a-radio-button>
-        </a-radio-group>
-      </a-form-item>
+    <div class="form-space-y-6">
+      <!-- 平台选择 -->
+      <div class="form-field">
+        <Label class="form-label">平台</Label>
+        <RadioGroup v-model="form.platform" class="radio-group">
+          <div class="radio-item active">
+            <RadioGroupItem value="抖音" id="douyin" class="hidden" />
+            <label for="douyin" class="radio-label">抖音</label>
+          </div>
+        </RadioGroup>
+      </div>
 
-      <a-form-item label="主页/视频链接">
-        <a-input
-          v-model:value="form.url"
+      <!-- 链接输入 -->
+      <div class="form-field">
+        <Label class="form-label">主页/视频链接</Label>
+        <Input
+          v-model="form.url"
           placeholder="粘贴抖音主页或视频链接"
-          allow-clear
-          size="large"
+          class="form-input h-11"
         />
-      </a-form-item>
+      </div>
 
-      <a-form-item label="分析数量">
+      <!-- 分析数量 -->
+      <div class="form-field">
+        <Label class="form-label">分析数量</Label>
         <div class="slider-row">
           <span class="slider-num">{{ form.count }}</span>
           <input
@@ -67,9 +79,10 @@ function handleReset() {
           />
         </div>
         <div class="form-hint">建议 20-30 个内容</div>
-      </a-form-item>
+      </div>
 
-      <a-space>
+      <!-- 操作按钮 -->
+      <div class="button-row">
         <GradientButton
           text="开始分析"
           :loading="loading"
@@ -77,10 +90,10 @@ function handleReset() {
           size="middle"
           @click="handleAnalyze"
         />
-        <a-button @click="handleReset">重置</a-button>
-      </a-space>
+        <Button variant="outline" @click="handleReset">重置</Button>
+      </div>
       <p class="points-hint">每次分析将消耗积分，消耗量与分析数量相关</p>
-    </a-form>
+    </div>
   </section>
 </template>
 
@@ -92,6 +105,60 @@ function handleReset() {
   border: 1px solid var(--color-gray-200);
 }
 
+.form-space-y-6 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.form-label {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-700);
+}
+
+.form-input {
+  background: var(--color-gray-50);
+  border-color: var(--color-gray-300);
+}
+
+.radio-group {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.radio-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-4);
+  height: 36px;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-gray-600);
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-base);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+.radio-item.active {
+  color: #fff;
+  background: var(--color-primary-500);
+  border-color: var(--color-primary-500);
+}
+
+.radio-label {
+  cursor: pointer;
+}
+
 .slider-row {
   display: flex;
   align-items: center;
@@ -152,6 +219,11 @@ function handleReset() {
   color: var(--color-gray-600);
 }
 
+.button-row {
+  display: flex;
+  gap: var(--space-3);
+}
+
 .points-hint {
   margin-top: var(--space-3);
   font-size: var(--font-size-xs);
@@ -159,4 +231,3 @@ function handleReset() {
   text-align: center;
 }
 </style>
-
diff --git a/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue b/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
index a6d697a23a..444e4231c7 100644
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
@@ -1,9 +1,20 @@
 <script setup>
-import { reactive } from 'vue'
+import { reactive, computed, ref } from 'vue'
 import { formatTime } from '../utils/benchmarkUtils'
 import GradientButton from '@/components/GradientButton.vue'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Spinner } from '@/components/ui/spinner'
 
-defineProps({
+const props = defineProps({
   data: { type: Array, required: true },
   selectedRowKeys: { type: Array, required: true },
   loading: { type: Boolean, default: false },
@@ -13,29 +24,74 @@ defineProps({
 
 const emit = defineEmits(['update:selectedRowKeys', 'export', 'loadMore', 'createAsyncTask'])
 
-const defaultColumns = [
-  { title: '封面', key: 'cover', dataIndex: 'cover', width: 100 },
-  { title: '描述', key: 'desc', dataIndex: 'desc', width: 200, ellipsis: true },
-  { title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 80,
-    sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
-  { title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 80,
-    sorter: (a, b) => (a.comment_count || 0) - (b.comment_count || 0) },
-  { title: '分享', key: 'share_count', dataIndex: 'share_count', width: 80,
-    sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
-  { title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 80,
-    sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
-  { title: '时长', key: 'duration_s', dataIndex: 'duration_s', width: 80,
-    sorter: (a, b) => (a.duration_s || 0) - (b.duration_s || 0) },
-  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 140,
-    sorter: (a, b) => (a.create_time || 0) - (b.create_time || 0) },
+// 列定义
+const columns = [
+  { key: 'cover', title: '封面', width: '100px' },
+  { key: 'desc', title: '描述', width: '200px' },
+  { key: 'digg_count', title: '点赞', width: '80px', sortable: true },
+  { key: 'comment_count', title: '评论', width: '80px', sortable: true },
+  { key: 'share_count', title: '分享', width: '80px', sortable: true },
+  { key: 'collect_count', title: '收藏', width: '80px', sortable: true },
+  { key: 'duration_s', title: '时长', width: '80px', sortable: true },
+  { key: 'create_time', title: '创建时间', width: '140px', sortable: true },
 ]
 
-const columns = reactive([...defaultColumns])
+// 排序状态
+const sortKey = ref('digg_count')
+const sortOrder = ref('desc')
 
-function onSelectChange(selectedKeys) {
-  emit('update:selectedRowKeys', selectedKeys)
+// 全选状态
+const isAllSelected = computed(() => {
+  return props.data.length > 0 && props.selectedRowKeys.length === props.data.length
+})
+
+// 切换排序
+function handleSort(key) {
+  if (sortKey.value === key) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortOrder.value = 'desc'
+  }
+  emit('update:selectedRowKeys', [])
 }
 
+// 选择切换
+function handleSelectAll() {
+  if (isAllSelected.value) {
+    emit('update:selectedRowKeys', [])
+  } else {
+    emit('update:selectedRowKeys', props.data.map(item => String(item.id)))
+  }
+}
+
+function handleSelect(id) {
+  const key = String(id)
+  const newKeys = [...props.selectedRowKeys]
+  const index = newKeys.indexOf(key)
+  if (index > -1) {
+    newKeys.splice(index, 1)
+  } else {
+    newKeys.push(key)
+  }
+  emit('update:selectedRowKeys', newKeys)
+}
+
+// 排序后的数据
+const sortedData = computed(() => {
+  const data = [...props.data]
+  const key = sortKey.value
+
+  if (!key) return data
+
+  return data.sort((a, b) => {
+    const aVal = a[key] || 0
+    const bVal = b[key] || 0
+    return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
+  })
+})
+
+// 格式化数字
 function formatNumber(value) {
   return value ? value.toLocaleString('zh-CN') : '0'
 }
@@ -62,58 +118,105 @@ function formatNumber(value) {
         />
       </div>
     </div>
-    <a-table
-      :dataSource="data"
-      :columns="columns"
-      :pagination="false"
-      :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
-      :rowKey="(record) => String(record.id)"
-      :loading="loading"
-      :scroll="{ y: 'calc(100vh - 400px)' }"
-      class="benchmark-table">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'cover'">
-          <div class="cover-wrapper">
-            <a v-if="record.cover && record.share_url" :href="record.share_url" target="_blank" class="cover-link">
-              <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
-              <span v-if="record.is_top" class="top-tag">置顶</span>
-            </a>
-            <template v-else-if="record.cover">
-              <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
-              <span v-if="record.is_top" class="top-tag">置顶</span>
-            </template>
-            <span v-else class="no-cover">无封面</span>
-          </div>
-        </template>
-        <template v-else-if="column.key === 'desc'">
-          <span :title="record.desc">{{ record.desc || '-' }}</span>
-        </template>
-        <template v-else-if="column.key === 'play_count'">
-          {{ record.play_count ? (record.play_count / 10000).toFixed(1) + 'w' : '0' }}
-        </template>
-        <template v-else-if="['digg_count', 'comment_count', 'share_count', 'collect_count'].includes(column.key)">
-          {{ formatNumber(record[column.key]) }}
-        </template>
-        <template v-else-if="column.key === 'create_time'">
-          {{ formatTime(record.create_time) }}
-        </template>
-      </template>
-      <template #footer>
-        <div v-if="hasMore" class="load-more-footer">
-          <a-button
-            :loading="loadingMore"
-            @click="$emit('loadMore')"
-            size="large"
+
+    <!-- 表格 -->
+    <div class="table-wrapper">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="w-[40px]">
+              <Checkbox
+                :checked="isAllSelected"
+                @update:checked="handleSelectAll"
+                class="checkbox-small"
+              />
+            </TableHead>
+            <TableHead
+              v-for="col in columns"
+              :key="col.key"
+              :class="[col.width && `w-[${col.width}]`, col.sortable && 'cursor-pointer']"
+              @click="col.sortable && handleSort(col.key)"
+            >
+              <div class="flex items-center gap-1">
+                {{ col.title }}
+                <span v-if="col.sortable" class="sort-icon">
+                  <svg v-if="sortKey !== col.key" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M7 15l5 5 5-5M7 9l5-5 5 5"/>
+                  </svg>
+                  <svg v-else-if="sortOrder === 'asc'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 19V5M5 12l7-7 7 7"/>
+                  </svg>
+                  <svg v-else width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 5v14M5 12l7 7 7-7"/>
+                  </svg>
+                </span>
+              </div>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-if="loading">
+            <TableCell :col-span="columns.length + 1" class="h-32 text-center">
+              <Spinner class="mx-auto" />
+            </TableCell>
+          </TableRow>
+          <TableRow
+            v-else
+            v-for="record in sortedData"
+            :key="record.id"
+            class="table-row"
           >
-            加载更多内容
-          </a-button>
-          <div class="load-more-hint">已加载 {{ data.length }} 条</div>
-        </div>
-        <div v-else-if="data.length > 0" class="no-more-hint">
-          已加载全部内容
-        </div>
-      </template>
-    </a-table>
+            <TableCell class="w-[40px]">
+              <Checkbox
+                :checked="selectedRowKeys.includes(String(record.id))"
+                @update:checked="handleSelect(record.id)"
+                class="checkbox-small"
+              />
+            </TableCell>
+            <TableCell>
+              <div class="cover-wrapper">
+                <a v-if="record.cover && record.share_url" :href="record.share_url" target="_blank" class="cover-link">
+                  <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
+                  <span v-if="record.is_top" class="top-tag">置顶</span>
+                </a>
+                <template v-else-if="record.cover">
+                  <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
+                  <span v-if="record.is_top" class="top-tag">置顶</span>
+                </template>
+                <span v-else class="no-cover">无封面</span>
+              </div>
+            </TableCell>
+            <TableCell>
+              <span :title="record.desc" class="truncate-text">{{ record.desc || '-' }}</span>
+            </TableCell>
+            <TableCell>{{ formatNumber(record.digg_count) }}</TableCell>
+            <TableCell>{{ formatNumber(record.comment_count) }}</TableCell>
+            <TableCell>{{ formatNumber(record.share_count) }}</TableCell>
+            <TableCell>{{ formatNumber(record.collect_count) }}</TableCell>
+            <TableCell>{{ record.duration_s ? `${record.duration_s}s` : '-' }}</TableCell>
+            <TableCell>{{ formatTime(record.create_time) }}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <!-- 加载更多 -->
+    <div v-if="hasMore" class="load-more-footer">
+      <Button
+        :disabled="loadingMore"
+        size="lg"
+        variant="outline"
+        @click="$emit('loadMore')"
+        class="load-more-btn"
+      >
+        <Spinner v-if="loadingMore" class="mr-2 h-4 w-4" />
+        {{ loadingMore ? '加载中...' : '加载更多内容' }}
+      </Button>
+      <div class="load-more-hint">已加载 {{ data.length }} 条</div>
+    </div>
+    <div v-else-if="data.length > 0" class="no-more-hint">
+      已加载全部内容
+    </div>
   </section>
 </template>
 
@@ -150,13 +253,32 @@ function formatNumber(value) {
   margin-bottom: var(--space-3);
 }
 
-.batch-btn {
-  font-weight: 600;
+.table-wrapper {
+  overflow-x: auto;
+  max-height: calc(100vh - 400px);
+  overflow-y: auto;
 }
 
-.batch-btn:hover {
-  box-shadow: var(--shadow-blue);
-  filter: brightness(1.03);
+.table-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: var(--color-gray-300);
+  border-radius: 3px;
+}
+
+.table-row:hover {
+  background: var(--color-gray-50);
+}
+
+.checkbox-small {
+  transform: scale(0.85);
 }
 
 .cover-wrapper {
@@ -199,42 +321,22 @@ function formatNumber(value) {
   font-size: var(--font-size-xs);
 }
 
-.benchmark-table :deep(.ant-table-expand-icon-th),
-.benchmark-table :deep(.ant-table-row-expand-icon-cell) {
-  width: 48px;
-  min-width: 48px;
-  text-align: center;
-}
-
-.benchmark-table :deep(.ant-table) {
-  table-layout: fixed;
-}
-
-.benchmark-table :deep(.ant-table-wrapper),
-.benchmark-table :deep(.ant-spin-nested-loading),
-.benchmark-table :deep(.ant-spin-container),
-.benchmark-table :deep(.ant-table-container) {
-  width: 100%;
+.truncate-text {
+  display: block;
+  max-width: 180px;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.benchmark-table :deep(.ant-table-body) {
-  overflow-x: hidden !important;
+.sort-icon {
+  opacity: 0.4;
+  transition: opacity var(--duration-fast);
 }
 
-.benchmark-table :deep(.ant-table-thead > tr > th),
-.benchmark-table :deep(.ant-table-tbody > tr > td) {
-  word-break: break-all;
-}
-
-.benchmark-table :deep(.ant-table-row-expand-icon) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  user-select: none;
+.table-row:hover .sort-icon,
+[onclick]:hover .sort-icon {
+  opacity: 1;
 }
 
 .load-more-footer,
@@ -247,7 +349,7 @@ function formatNumber(value) {
   padding: var(--space-4);
 }
 
-.load-more-footer .ant-btn {
+.load-more-btn {
   max-width: 200px;
   height: 40px;
   font-size: var(--font-size-base);
@@ -268,4 +370,3 @@ function formatNumber(value) {
   padding: var(--space-3);
 }
 </style>
-
diff --git a/frontend/app/web-gold/src/views/content-style/components/CreateStyleTaskModal.vue b/frontend/app/web-gold/src/views/content-style/components/CreateStyleTaskModal.vue
index 4ca4611960..2f6a1f5ffa 100644
--- a/frontend/app/web-gold/src/views/content-style/components/CreateStyleTaskModal.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/CreateStyleTaskModal.vue
@@ -1,7 +1,20 @@
 <script setup>
 import { ref, watchEffect } from 'vue'
-import { message } from 'ant-design-vue'
+import { toast } from 'vue-sonner'
 import { BenchmarkTaskApi } from '@/api/benchmarkTask'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { Spinner } from '@/components/ui/spinner'
 
 const props = defineProps({
   visible: {
@@ -38,17 +51,17 @@ watchEffect(() => {
 
 async function handleSubmit() {
   if (!form.value.taskName.trim()) {
-    message.warning('请输入任务名称')
+    toast.warning('请输入任务名称')
     return
   }
 
   if (!props.videoUrls?.length) {
-    message.warning('没有选择视频')
+    toast.warning('没有选择视频')
     return
   }
 
   if (!form.value.promptName.trim()) {
-    message.warning('请输入提示词名称')
+    toast.warning('请输入提示词名称')
     return
   }
 
@@ -64,7 +77,7 @@ async function handleSubmit() {
     const response = await BenchmarkTaskApi.createTask(payload)
 
     if (response?.code === 0 || response?.data) {
-      message.success('任务创建成功！请到任务中心查看进度')
+      toast.success('任务创建成功！请到任务中心查看进度')
       emit('update:visible', false)
       emit('success', response.data)
     } else {
@@ -72,7 +85,7 @@ async function handleSubmit() {
     }
   } catch (error) {
     console.error('创建任务失败:', error)
-    message.error(error?.message || '创建任务失败')
+    toast.error(error?.message || '创建任务失败')
   } finally {
     loading.value = false
   }
@@ -84,52 +97,61 @@ function handleCancel() {
 </script>
 
 <template>
-  <a-modal
-    :open="visible"
-    title="创建风格分析任务"
-    :width="500"
-    :maskClosable="false"
-    :confirmLoading="loading"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
-  >
-    <a-form :model="form" layout="vertical">
-      <a-form-item label="任务名称" required>
-        <a-input
-          v-model:value="form.taskName"
-          placeholder="请输入任务名称"
-          :maxlength="100"
-        />
-      </a-form-item>
+  <Dialog :open="visible" @update:open="(v) => emit('update:visible', v)">
+    <DialogContent class="sm:max-w-[500px]">
+      <DialogHeader>
+        <DialogTitle>创建风格分析任务</DialogTitle>
+        <DialogDescription>
+          将选中的视频创建为异步分析任务
+        </DialogDescription>
+      </DialogHeader>
 
-      <a-form-item label="提示词名称" required>
-        <a-input
-          v-model:value="form.promptName"
-          placeholder="任务完成后将保存为提示词"
-          :maxlength="50"
-        />
-      </a-form-item>
+      <div class="space-y-4 py-4">
+        <div class="space-y-2">
+          <Label for="taskName">任务名称 <span class="text-destructive">*</span></Label>
+          <Input
+            id="taskName"
+            v-model="form.taskName"
+            placeholder="请输入任务名称"
+            :maxlength="100"
+          />
+        </div>
 
-      <a-form-item label="分类/标签">
-        <a-input
-          v-model:value="form.category"
-          placeholder="可选：输入分类或标签"
-          :maxlength="20"
-        />
-      </a-form-item>
+        <div class="space-y-2">
+          <Label for="promptName">提示词名称 <span class="text-destructive">*</span></Label>
+          <Input
+            id="promptName"
+            v-model="form.promptName"
+            placeholder="任务完成后将保存为提示词"
+            :maxlength="50"
+          />
+        </div>
 
-      <a-form-item label="选中视频">
-        <a-tag color="blue">{{ videoUrls.length }} 个视频</a-tag>
-      </a-form-item>
-    </a-form>
+        <div class="space-y-2">
+          <Label for="category">分类/标签</Label>
+          <Input
+            id="category"
+            v-model="form.category"
+            placeholder="可选：输入分类或标签"
+            :maxlength="20"
+          />
+        </div>
 
-    <template #footer>
-      <a-space>
-        <a-button @click="handleCancel">取消</a-button>
-        <a-button type="primary" :loading="loading" @click="handleSubmit">
-          创建任务
-        </a-button>
-      </a-space>
-    </template>
-  </a-modal>
+        <div class="space-y-2">
+          <Label>选中视频</Label>
+          <div>
+            <Badge variant="secondary">{{ videoUrls.length }} 个视频</Badge>
+          </div>
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" @click="handleCancel">取消</Button>
+        <Button :disabled="loading" @click="handleSubmit">
+          <Spinner v-if="loading" class="mr-2 h-4 w-4" />
+          {{ loading ? '创建中...' : '创建任务' }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>
diff --git a/frontend/app/web-gold/src/views/dh/VoiceCopy.vue b/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
index fb6ea57b75..e0587492fd 100644
--- a/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
+++ b/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
@@ -1,151 +1,7 @@
-<template>
-  <BasicLayout
-    title="配音管理"
-    :show-back="false"
-  >
-    <!-- 搜索栏 -->
-    <div class="search-bar">
-      <a-space>
-        <a-button type="primary" @click="handleCreate">
-          <PlusOutlined />
-          新建配音
-        </a-button>
-        <a-input
-          v-model:value="searchParams.name"
-          placeholder="搜索配音名称"
-          style="width: 250px"
-          @press-enter="handleSearch"
-        >
-          <SearchOutlined />
-        </a-input>
-        <a-button @click="handleSearch">查询</a-button>
-        <a-button @click="handleReset">重置</a-button>
-      </a-space>
-    </div>
-
-    <!-- 列表表格 -->
-    <div class="table-container">
-      <a-table
-        :columns="columns"
-        :data-source="voiceList"
-        :loading="loading"
-        :pagination="pagination"
-        row-key="id"
-        @change="handleTableChange"
-      >
-        <template #bodyCell="{ column, record }">
-          <div v-if="column.key === 'name'" class="voice-name">
-            {{ record.name || '未命名' }}
-          </div>
-          <a-tooltip v-else-if="column.key === 'note'" :title="record.note" placement="topLeft">
-            <span class="note-text">{{ record.note || '-' }}</span>
-          </a-tooltip>
-          <span v-else-if="column.key === 'createTime'">
-            {{ formatDateTime(record.createTime) }}
-          </span>
-          <a-button v-else-if="column.key === 'fileUrl'" type="link" size="small" @click="handlePlayAudio(record)">
-            <PlayCircleOutlined />
-            播放
-          </a-button>
-          <a-space v-else-if="column.key === 'actions'">
-            <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
-            <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
-          </a-space>
-        </template>
-      </a-table>
-    </div>
-
-    <!-- 表单 Modal -->
-    <a-modal
-      v-model:open="modalVisible"
-      :title="isCreateMode ? '新建配音' : '编辑配音'"
-      :width="480"
-      ok-text="保存"
-      cancel-text="取消"
-      :confirm-loading="submitting"
-      :ok-button-props="{ disabled: isSubmitDisabled }"
-      :mask-closable="false"
-      centered
-      @ok="handleSubmit"
-      @cancel="handleCancel"
-    >
-      <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
-        <a-form-item label="配音名称" name="name">
-          <a-input v-model:value="formData.name" placeholder="请输入配音名称" allow-clear />
-        </a-form-item>
-
-        <a-form-item
-          v-if="isCreateMode"
-          label="音频文件"
-          name="fileId"
-          :rules="[{ required: true, message: '请上传音频文件' }]"
-        >
-          <div class="upload-area" :class="{ 'has-file': fileList.length > 0 }">
-            <a-upload-dragger
-              v-model:file-list="fileList"
-              :custom-request="handleCustomUpload"
-              :before-upload="handleBeforeUpload"
-              :max-count="1"
-              :show-upload-list="false"
-              accept="audio/*,.mp3,.wav,.aac,.m4a,.flac,.ogg"
-              @remove="handleRemoveFile"
-            >
-              <template v-if="!uploadState.uploading && fileList.length === 0">
-                <div class="upload-icon">
-                  <CloudUploadOutlined />
-                </div>
-                <p class="upload-text">点击或拖拽音频文件到此区域</p>
-                <p class="upload-hint-inline">支持 MP3、WAV、AAC 等格式，最大 5MB</p>
-              </template>
-              <template v-else-if="uploadState.uploading">
-                <a-progress type="circle" :percent="50" :width="60" status="active" />
-                <p class="upload-text" style="margin-top: 12px">正在上传...</p>
-              </template>
-              <template v-else-if="extractingText">
-                <a-progress type="circle" :percent="50" :width="60" status="active" />
-                <p class="upload-text" style="margin-top: 12px">正在识别语音...</p>
-              </template>
-              <template v-else>
-                <div class="file-preview">
-                  <SoundOutlined class="file-icon" />
-                  <div class="file-info">
-                    <span class="file-name">{{ fileList[0]?.name || '音频文件' }}</span>
-                    <span v-if="formData.text" class="text-status success">
-                      <CheckCircleOutlined /> 已识别语音文本
-                    </span>
-                    <span v-else class="text-status warning">
-                      <ExclamationCircleOutlined /> 未识别到语音文本
-                    </span>
-                    <a-button type="link" size="small" danger @click.stop="handleRemoveFile">
-                      <DeleteOutlined /> 移除
-                    </a-button>
-                  </div>
-                </div>
-              </template>
-            </a-upload-dragger>
-          </div>
-        </a-form-item>
-
-        <a-form-item label="备注" name="note">
-          <a-textarea
-            v-model:value="formData.note"
-            :rows="2"
-            placeholder="备注信息（选填）"
-            :auto-size="{ minRows: 2, maxRows: 4 }"
-            allow-clear
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <audio ref="audioPlayer" style="display: none" />
-  </BasicLayout>
-</template>
-
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { message, Modal } from 'ant-design-vue'
-import { PlusOutlined, SearchOutlined, PlayCircleOutlined, CloudUploadOutlined, SoundOutlined, DeleteOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { toast } from 'vue-sonner'
+import { Icon } from '@iconify/vue'
 import dayjs from 'dayjs'
 import BasicLayout from '@/layouts/components/BasicLayout.vue'
 import { MaterialService } from '@/api/material'
@@ -153,7 +9,44 @@ import { VoiceService } from '@/api/voice'
 import { useUpload } from '@/composables/useUpload'
 import useVoiceText from '@/hooks/web/useVoiceText'
 
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { Spinner } from '@/components/ui/spinner'
+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,
+} from '@/components/ui/alert-dialog'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { Progress } from '@/components/ui/progress'
+
 // ========== 常量 ==========
+const MAX_FILE_SIZE = 5 * 1024 * 1024
+const VALID_AUDIO_TYPES = ['audio/mpeg', 'audio/wav', 'audio/aac', 'audio/mp4', 'audio/flac', 'audio/ogg']
+const VALID_AUDIO_EXTENSIONS = ['.mp3', '.wav', '.aac', '.m4a', '.flac', '.ogg']
 
 const DEFAULT_FORM_DATA = {
   id: null,
@@ -167,20 +60,19 @@ const DEFAULT_FORM_DATA = {
   fileUrl: ''
 }
 
-const MAX_FILE_SIZE = 5 * 1024 * 1024  // SiliconFlow API 限制参考音频不超过 5MB
-const VALID_AUDIO_TYPES = ['audio/mpeg', 'audio/wav', 'audio/wave', 'audio/x-wav', 'audio/aac', 'audio/mp4', 'audio/flac', 'audio/ogg']
-const VALID_AUDIO_EXTENSIONS = ['.mp3', '.wav', '.aac', '.m4a', '.flac', '.ogg']
-
 // ========== 响应式数据 ==========
 const loading = ref(false)
 const submitting = ref(false)
 const voiceList = ref([])
 const modalVisible = ref(false)
+const deleteDialogVisible = ref(false)
+const deleteTarget = ref(null)
 const formMode = ref('create')
-const formRef = ref(null)
 const audioPlayer = ref(null)
 const fileList = ref([])
-const extractingText = ref(false) // 语音识别中状态
+const extractingText = ref(false)
+const fileInputRef = ref(null)
+const isDragging = ref(false)
 
 const searchParams = reactive({
   name: '',
@@ -193,67 +85,30 @@ const pagination = reactive({
   pageSize: 10,
   total: 0,
   showSizeChanger: true,
-  showTotal: (total) => `共 ${total} 条`
 })
 
 const formData = reactive({ ...DEFAULT_FORM_DATA })
 
-// ========== Upload Hook ==========
+// ========== Hooks ==========
 const { state: uploadState, upload } = useUpload()
-
-// ========== VoiceText Hook ==========
 const { getVoiceText } = useVoiceText()
 
 // ========== 计算属性 ==========
 const isCreateMode = computed(() => formMode.value === 'create')
 
-// 保存按钮是否禁用（新建模式下，文本为空或正在提取时禁用）
-const isSubmitDisabled = computed(function() {
-  if (!isCreateMode.value) {
-    return false
-  }
-  // 正在提取文本时禁用
-  if (extractingText.value) {
-    return true
-  }
-  // 已上传文件但文本为空时禁用
-  if (formData.fileId && !formData.text) {
-    return true
-  }
+const isSubmitDisabled = computed(() => {
+  if (!isCreateMode.value) return false
+  if (extractingText.value) return true
+  if (formData.fileId && !formData.text) return true
   return false
 })
 
-// ========== 表格配置 ==========
-const columns = [
-  { title: '配音名称', key: 'name', dataIndex: 'name', width: 160 },
-  { title: '备注', key: 'note', dataIndex: 'note', ellipsis: true },
-  { title: '创建时间', key: 'createTime', dataIndex: 'createTime', width: 180 },
-  { title: '操作', key: 'actions', width: 100, fixed: 'right' }
-]
-
-// ========== 表单验证规则 ==========
-const formRules = {
-  name: [{ required: true, message: '请输入配音名称' }],
-  fileId: [{ required: true, message: '请上传音频文件' }]
-}
-
 // ========== 工具函数 ==========
 const formatDateTime = (value) => {
   if (!value) return '-'
   return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
 }
 
-const fillFormData = (data) => {
-  Object.assign(formData, {
-    id: data.id || null,
-    name: data.name || '',
-    fileId: data.fileId || null,
-    language: data.language || 'zh-CN',
-    gender: data.gender || 'female',
-    note: data.note || ''
-  })
-}
-
 // ========== 数据加载 ==========
 const loadVoiceList = async () => {
   loading.value = true
@@ -263,13 +118,15 @@ const loadVoiceList = async () => {
       pageSize: pagination.pageSize,
       name: searchParams.name || undefined
     })
-    if (res.code !== 0) return message.error(res.msg || '加载失败')
-
+    if (res.code !== 0) {
+      toast.error(res.msg || '加载失败')
+      return
+    }
     voiceList.value = res.data.list || []
     pagination.total = res.data.total || 0
   } catch (error) {
     console.error('加载配音列表失败:', error)
-    message.error('加载失败，请稍后重试')
+    toast.error('加载失败，请稍后重试')
   } finally {
     loading.value = false
   }
@@ -287,9 +144,8 @@ function handleReset() {
   loadVoiceList()
 }
 
-function handleTableChange(pag) {
-  pagination.current = pag.current
-  pagination.pageSize = pag.pageSize
+function handlePageChange(page) {
+  pagination.current = page
   loadVoiceList()
 }
 
@@ -304,33 +160,50 @@ async function handleEdit(record) {
   formMode.value = 'edit'
   try {
     const res = await VoiceService.get(record.id)
-    fillFormData(res.code === 0 && res.data ? res.data : record)
+    if (res.code === 0 && res.data) {
+      Object.assign(formData, {
+        id: res.data.id || null,
+        name: res.data.name || '',
+        fileId: res.data.fileId || null,
+        language: res.data.language || 'zh-CN',
+        gender: res.data.gender || 'female',
+        note: res.data.note || ''
+      })
+    }
   } catch (error) {
     console.error('获取配音详情失败:', error)
-    fillFormData(record)
+    Object.assign(formData, {
+      id: record.id,
+      name: record.name || '',
+      fileId: record.fileId || null,
+      note: record.note || ''
+    })
   }
   modalVisible.value = true
 }
 
 function handleDelete(record) {
-  Modal.confirm({
-    title: '确认删除',
-    content: `确定要删除配音「${record.name}」吗？此操作不可恢复。`,
-    okButtonProps: { danger: true },
-    centered: true,
-    onOk: async function() {
-      try {
-        const res = await VoiceService.delete(record.id)
-        if (res.code !== 0) return message.error(res.msg || '删除失败')
+  deleteTarget.value = record
+  deleteDialogVisible.value = true
+}
 
-        message.success('删除成功')
-        loadVoiceList()
-      } catch (error) {
-        console.error('删除失败:', error)
-        message.error('删除失败，请稍后重试')
-      }
+async function confirmDelete() {
+  if (!deleteTarget.value) return
+  try {
+    const res = await VoiceService.delete(deleteTarget.value.id)
+    if (res.code !== 0) {
+      toast.error(res.msg || '删除失败')
+      return
     }
-  })
+    toast.success('删除成功')
+    loadVoiceList()
+  } catch (error) {
+    console.error('删除失败:', error)
+    toast.error('删除失败，请稍后重试')
+  } finally {
+    deleteDialogVisible.value = false
+    deleteTarget.value = null
+  }
 }
 
 // ========== 音频播放 ==========
@@ -339,80 +212,87 @@ function handlePlayAudio(record) {
     audioPlayer.value.src = record.fileUrl
     audioPlayer.value.play()
   } else {
-    message.warning('音频文件不存在')
+    toast.warning('音频文件不存在')
   }
 }
 
 // ========== 文件上传 ==========
-function handleBeforeUpload(file) {
+function triggerFileInput() {
+  fileInputRef.value?.click()
+}
+
+function handleFileSelect(event) {
+  const file = event.target.files?.[0]
+  if (file) processFile(file)
+}
+
+function handleDragOver(e) {
+  e.preventDefault()
+  isDragging.value = true
+}
+
+function handleDragLeave() {
+  isDragging.value = false
+}
+
+function handleDrop(event) {
+  event.preventDefault()
+  isDragging.value = false
+  const file = event.dataTransfer?.files?.[0]
+  if (file) processFile(file)
+}
+
+function validateFile(file) {
   if (file.size > MAX_FILE_SIZE) {
-    message.error('文件大小不能超过 5MB')
+    toast.error('文件大小不能超过 5MB')
     return false
   }
-
   const fileName = file.name.toLowerCase()
-  const fileType = file.type.toLowerCase()
-
-  const isValidType = VALID_AUDIO_TYPES.some(function(type) {
-    return fileType.includes(type)
-  }) || VALID_AUDIO_EXTENSIONS.some(function(ext) {
-    return fileName.endsWith(ext)
-  })
-
-  if (!isValidType) {
-    message.error('请上传音频文件（MP3、WAV、AAC、M4A、FLAC、OGG）')
+  const isValid = VALID_AUDIO_TYPES.some(t => file.type.includes(t)) ||
+    VALID_AUDIO_EXTENSIONS.some(ext => fileName.endsWith(ext))
+  if (!isValid) {
+    toast.error('请上传音频文件（MP3、WAV、AAC 等）')
     return false
   }
-
   return true
 }
 
-// ========== 文件上传相关 ==========
-async function handleCustomUpload(options) {
-  const { file, onSuccess, onError } = options
+async function processFile(file) {
+  if (!validateFile(file)) return
 
   try {
-    const fileId = await upload(file, {
+    await upload(file, {
       fileCategory: 'voice',
       groupId: null,
-      onSuccess: async function(id, fileUrl) {
+      onSuccess: async (id, fileUrl) => {
         formData.fileId = id
         formData.fileUrl = fileUrl
+        fileList.value = [file]
         await fetchAudioTextById(id)
-        onSuccess?.({ code: 0, data: id }, file)
       },
-      onError: function(error) {
-        const errorMsg = error.message || '上传失败，请稍后重试'
-        message.error(errorMsg)
-        onError?.(error)
+      onError: (error) => {
+        toast.error(error.message || '上传失败')
       }
     })
-
-    return fileId
   } catch (error) {
     console.error('上传失败:', error)
-    onError?.(error)
   }
 }
 
-// 通过fileId获取音频文本
 async function fetchAudioTextById(fileId) {
   if (!fileId) return
-
   extractingText.value = true
   try {
     const res = await MaterialService.getAudioPlayUrl(fileId)
     if (res.code === 0 && res.data) {
-      const rawFileUrl = res.data
-      const results = await getVoiceText([{ audio_url: rawFileUrl }])
-      if (results && results.length > 0) {
-        const text = results[0].value
-        formData.text = text
+      const results = await getVoiceText([{ audio_url: res.data }])
+      if (results?.length > 0) {
+        formData.text = results[0].value || ''
       }
     }
   } catch (error) {
     console.error('获取音频文本失败:', error)
-    message.error('语音识别失败，请重试')
+    toast.error('语音识别失败')
   } finally {
     extractingText.value = false
   }
@@ -421,19 +301,22 @@ async function fetchAudioTextById(fileId) {
 function handleRemoveFile() {
   formData.fileId = null
   formData.text = ''
+  formData.fileUrl = ''
   fileList.value = []
 }
 
 // ========== 表单操作 ==========
 async function handleSubmit() {
-  try {
-    await formRef.value.validate()
-  } catch {
+  if (!formData.name.trim()) {
+    toast.warning('请输入配音名称')
+    return
+  }
+  if (isCreateMode.value && !formData.fileId) {
+    toast.warning('请上传音频文件')
     return
   }
 
   submitting.value = true
-
   const params = isCreateMode.value
     ? {
         name: formData.name,
@@ -456,140 +339,399 @@ async function handleSubmit() {
     const res = isCreateMode.value
       ? await VoiceService.create(params)
       : await VoiceService.update(params)
-
     if (res.code !== 0) {
-      message.error(res.msg || '操作失败')
+      toast.error(res.msg || '操作失败')
       return
     }
-
-    message.success(isCreateMode.value ? '创建成功' : '更新成功')
+    toast.success(isCreateMode.value ? '创建成功' : '更新成功')
     modalVisible.value = false
     loadVoiceList()
   } catch (error) {
     console.error('提交失败:', error)
-    message.error('操作失败，请稍后重试')
+    toast.error('操作失败，请稍后重试')
   } finally {
     submitting.value = false
   }
 }
 
 function handleCancel() {
- modalVisible.value = false
- resetForm()
+  modalVisible.value = false
+  resetForm()
 }
 
 function resetForm() {
   Object.assign(formData, { ...DEFAULT_FORM_DATA })
   fileList.value = []
-  formRef.value?.resetFields()
 }
 
 // ========== 生命周期 ==========
-onMounted(function() {
-  loadVoiceList()
-})
+onMounted(() => loadVoiceList())
 </script>
 
+<template>
+  <BasicLayout :show-back="false" :show-title="false">
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <Button @click="handleCreate">
+          <Icon icon="lucide:plus" class="mr-1.5 size-4" />
+          新建配音
+        </Button>
+      </div>
+      <div class="toolbar-right">
+        <Input
+          v-model="searchParams.name"
+          placeholder="搜索配音名称..."
+          class="w-64"
+          @keypress.enter="handleSearch"
+        >
+          <template #prefix>
+            <Icon icon="lucide:search" class="size-4 text-muted-foreground" />
+          </template>
+        </Input>
+        <Button variant="outline" @click="handleSearch">搜索</Button>
+        <Button variant="ghost" @click="handleReset">重置</Button>
+      </div>
+    </div>
+
+    <!-- 表格区域 -->
+    <div class="table-wrapper">
+      <Table>
+        <TableHeader>
+          <TableRow class="hover:bg-transparent">
+            <TableHead class="w-44">配音名称</TableHead>
+            <TableHead>备注</TableHead>
+            <TableHead class="w-44">创建时间</TableHead>
+            <TableHead class="w-40 text-center">操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <!-- 加载状态 -->
+          <TableRow v-if="loading">
+            <TableCell :col-span="4" class="h-48 text-center">
+              <Spinner class="mx-auto size-6" />
+            </TableCell>
+          </TableRow>
+
+          <!-- 空状态 -->
+          <TableRow v-else-if="voiceList.length === 0">
+            <TableCell :col-span="4" class="h-48 text-center">
+              <div class="flex flex-col items-center gap-3 text-muted-foreground">
+                <Icon icon="lucide:mic-off" class="size-10 opacity-50" />
+                <span>暂无配音数据</span>
+              </div>
+            </TableCell>
+          </TableRow>
+
+          <!-- 数据列表 -->
+          <TableRow v-else v-for="record in voiceList" :key="record.id" class="group">
+            <TableCell>
+              <span class="font-medium">{{ record.name || '未命名' }}</span>
+            </TableCell>
+            <TableCell>
+              <Tooltip v-if="record.note" :delay-duration="200">
+                <TooltipTrigger as-child>
+                  <span class="text-muted-foreground line-clamp-1">{{ record.note }}</span>
+                </TooltipTrigger>
+                <TooltipContent class="max-w-xs">
+                  {{ record.note }}
+                </TooltipContent>
+              </Tooltip>
+              <span v-else class="text-muted-foreground">-</span>
+            </TableCell>
+            <TableCell class="text-muted-foreground">
+              {{ formatDateTime(record.createTime) }}
+            </TableCell>
+            <TableCell class="text-center">
+              <div class="flex items-center justify-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <Button variant="ghost" size="sm" class="h-8 px-2" @click="handlePlayAudio(record)">
+                  <Icon icon="lucide:play" class="size-4 mr-1" />
+                  播放
+                </Button>
+                <Button variant="ghost" size="sm" class="h-8 px-2" @click="handleEdit(record)">
+                  <Icon icon="lucide:pencil" class="size-4 mr-1" />
+                  编辑
+                </Button>
+                <Button variant="ghost" size="sm" class="h-8 px-2 text-destructive hover:text-destructive" @click="handleDelete(record)">
+                  <Icon icon="lucide:trash-2" class="size-4 mr-1" />
+                  删除
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+
+      <!-- 分页 -->
+      <div v-if="pagination.total > pagination.pageSize" class="pagination-bar">
+        <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>
+    </div>
+
+    <!-- 新建/编辑弹窗 -->
+    <Dialog :open="modalVisible" @update:open="(v) => modalVisible = v">
+      <DialogContent class="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{{ isCreateMode ? '新建配音' : '编辑配音' }}</DialogTitle>
+        </DialogHeader>
+
+        <div class="space-y-5 py-2">
+          <!-- 名称 -->
+          <div class="space-y-2">
+            <Label for="name">配音名称 <span class="text-destructive">*</span></Label>
+            <Input id="name" v-model="formData.name" placeholder="请输入配音名称" />
+          </div>
+
+          <!-- 上传区域 -->
+          <div v-if="isCreateMode" class="space-y-2">
+            <Label>音频文件 <span class="text-destructive">*</span></Label>
+
+            <!-- 未上传状态 -->
+            <div
+              v-if="fileList.length === 0 && !uploadState.uploading && !extractingText"
+              class="upload-zone"
+              :class="{ 'upload-zone--dragging': isDragging }"
+              @click="triggerFileInput"
+              @dragover="handleDragOver"
+              @dragleave="handleDragLeave"
+              @drop="handleDrop"
+            >
+              <div class="upload-zone__icon">
+                <Icon icon="lucide:cloud-upload" />
+              </div>
+              <p class="upload-zone__title">点击或拖拽音频文件到此区域</p>
+              <p class="upload-zone__hint">支持 MP3、WAV、AAC、M4A、FLAC、OGG，最大 5MB</p>
+            </div>
+
+            <!-- 上传中 -->
+            <div v-else-if="uploadState.uploading" class="upload-status">
+              <Progress :value="50" class="w-16" />
+              <p class="mt-3 text-sm text-muted-foreground">正在上传...</p>
+            </div>
+
+            <!-- 识别中 -->
+            <div v-else-if="extractingText" class="upload-status">
+              <Progress :value="50" class="w-16" />
+              <p class="mt-3 text-sm text-muted-foreground">正在识别语音...</p>
+            </div>
+
+            <!-- 已上传 -->
+            <div v-else class="upload-preview">
+              <div class="upload-preview__icon">
+                <Icon icon="lucide:file-audio" />
+              </div>
+              <div class="upload-preview__info">
+                <span class="upload-preview__name">{{ fileList[0]?.name || '音频文件' }}</span>
+                <Badge v-if="formData.text" variant="secondary" class="gap-1">
+                  <Icon icon="lucide:check-circle" class="size-3" />
+                  已识别语音
+                </Badge>
+                <Badge v-else variant="outline" class="gap-1 text-amber-600">
+                  <Icon icon="lucide:alert-circle" class="size-3" />
+                  未识别到语音
+                </Badge>
+              </div>
+              <Button variant="ghost" size="sm" class="text-destructive" @click="handleRemoveFile">
+                <Icon icon="lucide:x" class="size-4" />
+              </Button>
+            </div>
+
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept="audio/*,.mp3,.wav,.aac,.m4a,.flac,.ogg"
+              class="hidden"
+              @change="handleFileSelect"
+            />
+          </div>
+
+          <!-- 备注 -->
+          <div class="space-y-2">
+            <Label for="note">备注</Label>
+            <Textarea
+              id="note"
+              v-model="formData.note"
+              placeholder="备注信息（选填）"
+              :rows="2"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" @click="handleCancel">取消</Button>
+          <Button :disabled="isSubmitDisabled" :loading="submitting" @click="handleSubmit">
+            保存
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <!-- 删除确认 -->
+    <AlertDialog :open="deleteDialogVisible" @update:open="(v) => deleteDialogVisible = v">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认删除</AlertDialogTitle>
+          <AlertDialogDescription>
+            确定要删除配音「{{ deleteTarget?.name }}」吗？此操作不可恢复。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction
+            class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            @click="confirmDelete"
+          >
+            删除
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
+    <audio ref="audioPlayer" class="hidden" />
+  </BasicLayout>
+</template>
+
 <style scoped lang="less">
-.search-bar {
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  margin-bottom: 16px;
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-4);
+  background: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-4);
+  box-shadow: var(--shadow-sm);
 }
 
-.table-container {
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-}
-
-.voice-name {
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.note-text {
-  color: var(--color-text-secondary);
-}
-
-// 上传区域样式
-.upload-area {
-  :deep(.ant-upload-drag) {
-    border: 2px dashed var(--color-border, #d9d9d9);
-    border-radius: 8px;
-    background: var(--color-bg-container, #fafafa);
-    transition: all 0.3s;
-    padding: 24px 16px;
-
-    &:hover {
-      border-color: var(--color-primary, #1890ff);
-      background: var(--color-primary-bg, #e6f7ff);
-    }
-  }
-
-  &.has-file :deep(.ant-upload-drag) {
-    border-style: solid;
-    border-color: var(--color-success-border, #b7eb8f);
-    background: var(--color-success-bg, #f6ffed);
-  }
-}
-
-.upload-icon {
-  font-size: 40px;
-  color: var(--color-primary, #1890ff);
-  margin-bottom: 12px;
-}
-
-.upload-text {
-  font-size: 14px;
-  color: var(--color-text, #333);
-  margin-bottom: 4px;
-}
-
-.upload-hint-inline {
-  font-size: 12px;
-  color: var(--color-text-secondary, #999);
-}
-
-.file-preview {
+.toolbar-right {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 12px;
+  gap: var(--space-2);
+}
 
-  .file-icon {
-    font-size: 32px;
-    color: var(--color-primary, #1890ff);
+.table-wrapper {
+  background: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.pagination-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bg-card);
+}
+
+// 上传区域
+.upload-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-4);
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: var(--color-primary);
+    background: oklch(0.97 0.01 254.604);
   }
 
-  .file-info {
+  &--dragging {
+    border-color: var(--color-primary);
+    background: oklch(0.95 0.02 254.604);
+  }
+
+  &__icon {
+    font-size: 36px;
+    color: var(--color-primary);
+    margin-bottom: var(--space-3);
+    opacity: 0.8;
+  }
+
+  &__title {
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+    margin-bottom: var(--space-1);
+  }
+
+  &__hint {
+    font-size: var(--font-size-xs);
+    color: var(--color-muted-foreground);
+  }
+}
+
+.upload-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-4);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-muted);
+}
+
+.upload-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: 1px solid oklch(0.92 0.02 145);
+  border-radius: var(--radius-lg);
+  background: oklch(0.98 0.01 145);
+
+  &__icon {
+    font-size: 28px;
+    color: var(--color-primary);
+  }
+
+  &__info {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
+    gap: var(--space-1);
   }
 
-  .file-name {
-    font-size: 14px;
-    color: var(--color-text, #333);
-    max-width: 200px;
+  &__name {
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+    max-width: 220px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+}
 
-  .text-status {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    &.success {
-      color: var(--color-success, #52c41a);
-    }
-
-    &.warning {
-      color: var(--color-warning, #faad14);
-    }
-  }
+.hidden {
+  display: none;
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
index 638fdf42a5..6f7232a241 100644
--- a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
@@ -407,18 +407,16 @@ onMounted(fetchList)
   padding: var(--space-4);
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
 }
 
 .task-page__content {
   flex: 1;
-  overflow: auto;
+  overflow: hidden;
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
   display: flex;
   flex-direction: column;
-  box-shadow: var(--shadow-sm);
 }
 
 .batch-actions {
diff --git a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue b/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
index 29dcc73a8a..2bb6395de5 100644
--- a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
@@ -8,9 +8,7 @@
             v-for="item in NAV_ITEMS"
             :key="item.type"
             :value="item.type"
-            class="h-10 px-4 gap-2 rounded-lg transition-all
-              data-[state=active]:bg-primary data-[state=active]:text-white data-[state=active]:shadow-sm
-              data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground data-[state=inactive]:hover:bg-muted"
+            class="h-10 px-4 gap-2 rounded-lg transition-all data-[state=active]:bg-foreground data-[state=active]:!text-white data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground data-[state=inactive]:hover:bg-muted"
           >
             <Icon :icon="item.icon" class="size-4" />
             <span>{{ item.label }}</span>
@@ -82,14 +80,12 @@ const currentComponent = computed(() => {
 .task-layout__header {
   flex-shrink: 0;
   padding: 0 var(--space-4);
-  border-bottom: 1px solid var(--color-border);
   background: var(--color-bg-card);
 }
 
 .task-layout__content {
   flex: 1;
   overflow: auto;
-  background: var(--color-bg-page);
 }
 
 .fade-enter-active,
diff --git a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
index 2e94b194f5..dcb7a1d65a 100644
--- a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
@@ -72,6 +72,7 @@
           :disabled="!hasDownloadableSelected"
           :loading="batchDownloading"
           size="sm"
+          class="text-white"
           @click="handleBatchDownloadSelected"
         >
           <Icon icon="lucide:download" class="mr-1 size-4" />
@@ -630,7 +631,6 @@ onMounted(fetchList)
   padding: var(--space-4);
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
 }
 
 .task-page__content {
@@ -641,7 +641,6 @@ onMounted(fetchList)
   padding: var(--space-4);
   display: flex;
   flex-direction: column;
-  box-shadow: var(--shadow-sm);
 }
 
 .batch-toolbar {
diff --git a/frontend/app/web-gold/src/views/trends/Forecast.vue b/frontend/app/web-gold/src/views/trends/Forecast.vue
index 2acb4e72b2..82ac2be1e1 100644
--- a/frontend/app/web-gold/src/views/trends/Forecast.vue
+++ b/frontend/app/web-gold/src/views/trends/Forecast.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { onMounted, reactive, ref, computed } from 'vue'
-import { message } from 'ant-design-vue'
+import { toast } from 'vue-sonner'
+import { Textarea } from '@/components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 
 import TikhubService, { InterfaceType, MethodType, ParamType } from '@/api/tikhub'
 import { rewriteStream } from '@/api/forecast'
@@ -76,9 +78,9 @@ function handleSearchKeypress(event) {
 async function copyContent() {
   const success = await copyToClipboard(generatedContent.value)
   if (success) {
-    message.success('已复制')
+    toast.success('已复制')
   } else {
-    message.error('复制失败')
+    toast.error('复制失败')
   }
 }
 
@@ -117,7 +119,7 @@ async function analyzeVoice(audioUrl) {
         ? `${topicDetails.copywriting}\n\n${transcript}`
         : transcript
     } else {
-      message.warning('未获取到可用文案')
+      toast.warning('未获取到可用文案')
     }
   } catch (error) {
     console.error('分析语音失败:', error)
@@ -143,12 +145,12 @@ async function handleCreate(topic) {
 // 生成文案（流式）
 async function handleGenerate() {
   if (!topicDetails.copywriting?.trim()) {
-    message.warning('请输入文案内容')
+    toast.warning('请输入文案内容')
     return
   }
 
   if (!selectedAgent.value?.id) {
-    message.warning('请先选择文案风格')
+    toast.warning('请先选择文案风格')
     return
   }
 
@@ -197,7 +199,7 @@ async function handleGenerate() {
             completed = true
             clearTimeout(timeout)
             ctrl.abort()
-            message.error(err?.message || '网络请求失败')
+            toast.error(err?.message || '网络请求失败')
             reject(new Error(err?.message || '网络请求失败'))
           }
         },
@@ -223,10 +225,10 @@ async function handleGenerate() {
     })
 
     generatedContent.value = fullText.trim()
-    message.success('文案生成成功')
+    toast.success('文案生成成功')
   } catch (error) {
     console.error('生成文案失败:', error)
-    message.error('生成文案失败')
+    toast.error('生成文案失败')
   } finally {
     isGenerating.value = false
   }
@@ -291,7 +293,7 @@ function processSearchResults(response, startId = 1) {
 async function handleSearch() {
   const keyword = searchKeyword.value.trim()
   if (!keyword) {
-    message.warning('请输入搜索关键词')
+    toast.warning('请输入搜索关键词')
     return
   }
 
@@ -326,15 +328,15 @@ async function handleSearch() {
     const searchResults = processSearchResults(response)
 
     if (searchResults.length === 0) {
-      message.warning('未找到相关结果')
+      toast.warning('未找到相关结果')
       return
     }
 
     hotTopics.value = searchResults
-    message.success(`找到 ${searchResults.length} 个结果`)
+    toast.success(`找到 ${searchResults.length} 个结果`)
   } catch (error) {
     console.error('搜索失败:', error)
-    message.error(error?.message || '搜索失败')
+    toast.error(error?.message || '搜索失败')
     hotTopics.value = []
   } finally {
     isLoading.value = false
@@ -385,29 +387,44 @@ onMounted(() => {
       <div class="filters-row">
         <div class="filter-item">
           <span class="filter-label">排序</span>
-          <a-select v-model:value="searchParams.sort_type" size="small">
-            <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>
+          <Select v-model="searchParams.sort_type">
+            <SelectTrigger class="h-[26px] w-[88px]">
+              <SelectValue placeholder="综合" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">综合</SelectItem>
+              <SelectItem value="1">最多点赞</SelectItem>
+              <SelectItem value="2">最新发布</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div class="filter-item">
           <span class="filter-label">时间</span>
-          <a-select v-model:value="searchParams.publish_time" size="small">
-            <a-select-option value="0">不限</a-select-option>
-            <a-select-option value="1">一天</a-select-option>
-            <a-select-option value="7">一周</a-select-option>
-            <a-select-option value="180">半年</a-select-option>
-          </a-select>
+          <Select v-model="searchParams.publish_time">
+            <SelectTrigger class="h-[26px] w-[88px]">
+              <SelectValue placeholder="不限" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">不限</SelectItem>
+              <SelectItem value="1">一天</SelectItem>
+              <SelectItem value="7">一周</SelectItem>
+              <SelectItem value="180">半年</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div class="filter-item">
           <span class="filter-label">时长</span>
-          <a-select v-model:value="searchParams.filter_duration" size="small">
-            <a-select-option value="0">不限</a-select-option>
-            <a-select-option value="0-1">1分钟内</a-select-option>
-            <a-select-option value="1-5">1-5分钟</a-select-option>
-            <a-select-option value="5-10000">5分钟+</a-select-option>
-          </a-select>
+          <Select v-model="searchParams.filter_duration">
+            <SelectTrigger class="h-[26px] w-[88px]">
+              <SelectValue placeholder="不限" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">不限</SelectItem>
+              <SelectItem value="0-1">1分钟内</SelectItem>
+              <SelectItem value="1-5">1-5分钟</SelectItem>
+              <SelectItem value="5-10000">5分钟+</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
 
@@ -498,12 +515,12 @@ onMounted(() => {
               分析中
             </span>
           </div>
-          <a-textarea
-            v-model:value="topicDetails.copywriting"
+          <Textarea
+            v-model="topicDetails.copywriting"
             :rows="5"
             placeholder="输入文案或点击热点卡片自动提取..."
             :disabled="isAnalyzing"
-            class="content-input"
+            class="content-input min-h-[120px]"
           />
         </div>
 
@@ -600,24 +617,18 @@ onMounted(() => {
   grid-template-columns: 1fr 400px;
   gap: var(--space-4);
   height: 100%;
-  background: var(--color-gray-50);
 }
 
-// 面板基础
+ // 面板基础 - 更现代简洁
 .search-panel,
 .create-panel {
   background: var(--color-bg-card);
-  border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: var(--shadow-sm);
-}
-
-.panel-header {
-  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid var(--color-gray-200);
+}.panel-header {
+  padding: var(--space-3) var(--space-4);
 }
 
 .panel-title {
@@ -709,7 +720,6 @@ onMounted(() => {
   display: flex;
   gap: var(--space-3);
   padding: 0 var(--space-4) var(--space-3);
-  border-bottom: 1px solid var(--color-gray-200);
 }
 
 .filter-item {
@@ -723,23 +733,6 @@ onMounted(() => {
   color: var(--color-gray-400);
 }
 
-:deep(.ant-select) {
-  width: 88px;
-
-  .ant-select-selector {
-    background: var(--color-gray-50) !important;
-    border-color: var(--color-gray-300) !important;
-    border-radius: var(--radius-base) !important;
-    height: 26px !important;
-
-    .ant-select-selection-item {
-      color: var(--color-gray-900) !important;
-      font-size: var(--font-size-xs) !important;
-      line-height: 24px !important;
-    }
-  }
-}
-
 // 结果区域
 .results-area {
   flex: 1;
@@ -812,19 +805,16 @@ onMounted(() => {
   gap: var(--space-3);
   padding: var(--space-3);
   background: var(--color-bg-card);
-  border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--duration-fast);
 
   &:hover {
-    border-color: var(--color-gray-300);
-    box-shadow: var(--shadow-md);
+    background: var(--color-gray-50);
   }
 
   &.selected {
-    border-color: var(--color-primary-500);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    background: rgba(59, 130, 246, 0.08);
   }
 }
 
@@ -1008,42 +998,11 @@ onMounted(() => {
 }
 
 .content-input {
-  :deep(.ant-input) {
-    background: var(--color-gray-50) !important;
-    border-color: var(--color-gray-300) !important;
-    color: var(--color-gray-900) !important;
-    border-radius: var(--radius-base) !important;
-    font-size: var(--font-size-sm) !important;
-    line-height: 1.6 !important;
-
-    &::placeholder { color: var(--color-gray-400) !important; }
-    &:focus {
-      border-color: var(--color-primary-500) !important;
-      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
-    }
-  }
-}
-
-// 下拉选择器
-:deep(.ant-select) {
-  .ant-select-selector {
-    background: var(--color-gray-50) !important;
-    border-color: var(--color-gray-300) !important;
-    border-radius: var(--radius-base) !important;
-    height: 36px !important;
-
-    .ant-select-selection-item,
-    .ant-select-selection-placeholder {
-      color: var(--color-gray-900) !important;
-      font-size: var(--font-size-sm) !important;
-      line-height: 34px !important;
-    }
-  }
-
-  &.ant-select-focused .ant-select-selector {
-    border-color: var(--color-primary-500) !important;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
-  }
+  background: var(--color-gray-50);
+  border-color: var(--color-gray-300);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
 }
 
 .agent-category {