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 62a5bef300..8a686b330b 100644
--- a/frontend/app/web-gold/src/views/content-style/Benchmark.vue
+++ b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
@@ -11,6 +11,7 @@ import { formatTime } from './utils/benchmarkUtils'
 import BenchmarkForm from './components/BenchmarkForm.vue'
 import BenchmarkTable from './components/BenchmarkTable.vue'
 import CreateStyleTaskModal from './components/CreateStyleTaskModal.vue'
+import { Card, CardContent } from '@/components/ui/card'
 
 const {
   data,
@@ -237,43 +238,42 @@ defineOptions({ name: 'ContentStyleBenchmark' })
 </script>
 
 <template>
-  <div class="page">
-    <div class="stack">
-      <!-- 表单区域 -->
-      <BenchmarkForm
-        v-model="form"
-        :loading="loading"
-        @analyze="handleAnalyzeUser"
-        @reset="handleResetForm"
-      />
+  <div class="page space-y-4">
+    <!-- 表单区域 -->
+    <BenchmarkForm
+      v-model="form"
+      :loading="loading"
+      @analyze="handleAnalyzeUser"
+      @reset="handleResetForm"
+    />
 
-      <!-- 表格区域 -->
-      <BenchmarkTable
-        :data="data"
-        v-model:selectedRowKeys="selectedRowKeys"
-        :loading="loading"
-        :loading-more="loadingMore"
-        :has-more="hasMore"
-        @export="handleExportToExcel"
-        @load-more="handleLoadMore"
-        @create-async-task="handleCreateAsyncTask"
-      />
+    <!-- 表格区域 -->
+    <BenchmarkTable
+      :data="data"
+      v-model:selectedRowKeys="selectedRowKeys"
+      :loading="loading"
+      :loading-more="loadingMore"
+      :has-more="hasMore"
+      @export="handleExportToExcel"
+      @load-more="handleLoadMore"
+      @create-async-task="handleCreateAsyncTask"
+    />
 
-      <section v-if="!data.length" class="card results-card empty-state">
-        <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>
+    <!-- 空态 -->
+    <Card v-if="!data.length" class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
+      <CardContent class="flex flex-col items-center justify-center py-16 min-h-[420px]">
+        <svg class="text-gray-300 mb-4" 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="text-gray-500">暂无数据，请点击开始分析</p>
+      </CardContent>
+    </Card>
 
     <!-- 创建风格任务弹窗 -->
     <CreateStyleTaskModal
@@ -288,58 +288,8 @@ defineOptions({ name: 'ContentStyleBenchmark' })
 </template>
 
 <style scoped>
-/* 页面垂直堆叠间距 */
-.stack {
-  overflow-x: hidden;
-}
-
-.stack>*+* {
-  margin-top: var(--space-4);
-}
-
-/* 稳定滚动条，只在垂直方向预留空间 */
 .page {
   overflow-x: hidden;
   max-width: 100%;
 }
-
-/* 卡片样式 */
-.card {
-  background: var(--color-bg-card);
-  border-radius: var(--radius-md);
-  padding: var(--space-4);
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--color-gray-200);
-}
-
-/* 结果区预留最小高度，切换视图时避免高度突变 */
-.results-card {
-  min-height: 420px;
-}
-
-/* 空态卡片样式 */
-.empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 420px;
-}
-
-.empty-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 40px 0;
-}
-
-.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 7cfb7c2e6b..8f8fc26108 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
@@ -5,6 +5,7 @@ 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 { Card, CardContent } from '@/components/ui/card'
 import { usePointsConfigStore } from '@/stores/pointsConfig'
 
 const pointsConfigStore = usePointsConfigStore()
@@ -42,47 +43,53 @@ function handleReset() {
 </script>
 
 <template>
-  <section class="form-container">
-    <div class="form-space-y-6">
+  <Card class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
+    <CardContent class="p-5 space-y-5">
       <!-- 平台选择 -->
-      <div class="form-field">
-        <Label class="form-label">平台</Label>
-        <RadioGroup v-model="form.platform" class="radio-group">
-          <div class="radio-item active">
+      <div class="space-y-2">
+        <Label class="text-sm font-medium text-gray-700">平台</Label>
+        <RadioGroup v-model="form.platform" class="flex gap-2">
+          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium text-white bg-primary-500 border border-primary-500 rounded-md cursor-pointer">
             <RadioGroupItem value="抖音" id="douyin" class="hidden" />
-            <label for="douyin" class="radio-label">抖音</label>
+            <label for="douyin" class="cursor-pointer">抖音</label>
           </div>
         </RadioGroup>
       </div>
 
       <!-- 链接输入 -->
-      <div class="form-field">
-        <Label class="form-label">主页/视频链接</Label>
+      <div class="space-y-2">
+        <Label class="text-sm font-medium text-gray-700">主页/视频链接</Label>
         <Input
           v-model="form.url"
           placeholder="粘贴抖音主页或视频链接"
-          class="form-input h-11"
+          class="h-11 bg-gray-50 border-gray-300"
         />
       </div>
 
       <!-- 分析数量 -->
-      <div class="form-field">
-        <Label class="form-label">分析数量</Label>
-        <div class="slider-row">
-          <span class="slider-num">{{ form.count }}</span>
+      <div class="space-y-2">
+        <Label class="text-sm font-medium text-gray-700">分析数量</Label>
+        <div class="flex items-center gap-3">
+          <span class="min-w-[32px] text-sm font-semibold text-primary-500 text-center">{{ form.count }}</span>
           <input
             type="range"
             v-model.number="form.count"
             min="1"
             max="40"
-            class="level-slider"
+            class="flex-1 h-1 bg-gray-200 rounded-full appearance-none cursor-pointer
+              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:bg-primary-500 [&::-webkit-slider-thumb]:rounded-full
+              [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-transform
+              [&::-webkit-slider-thumb]:hover:scale-110 [&::-webkit-slider-thumb]:hover:shadow-[0_0_0_4px_rgba(59,130,246,0.15)]
+              [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-primary-500
+              [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:cursor-pointer"
           />
         </div>
-        <div class="form-hint">建议 20-30 个内容</div>
+        <p class="text-sm text-gray-500 mt-1">建议 20-30 个内容</p>
       </div>
 
       <!-- 操作按钮 -->
-      <div class="button-row">
+      <div class="flex gap-3">
         <GradientButton
           text="开始分析"
           :loading="loading"
@@ -92,142 +99,10 @@ function handleReset() {
         />
         <Button variant="outline" @click="handleReset">重置</Button>
       </div>
-      <p class="points-hint">每次分析将消耗积分，消耗量与分析数量相关</p>
-    </div>
-  </section>
+      <p class="text-xs text-gray-500 text-center">每次分析将消耗积分，消耗量与分析数量相关</p>
+    </CardContent>
+  </Card>
 </template>
 
 <style scoped>
-.form-container {
-  background: var(--color-bg-card);
-  border-radius: var(--radius-md);
-  padding: var(--space-4);
-  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;
-  gap: var(--space-3);
-}
-
-.slider-num {
-  min-width: 32px;
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  color: var(--color-primary-500);
-  text-align: center;
-}
-
-.level-slider {
-  flex: 1;
-  height: 4px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: var(--color-gray-200);
-  border-radius: 2px;
-  outline: none;
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    background: var(--color-primary-500);
-    border-radius: 50%;
-    cursor: pointer;
-    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
-
-    &:hover {
-      transform: scale(1.15);
-      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
-    }
-  }
-
-  &::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-    background: var(--color-primary-500);
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
-
-    &:hover {
-      transform: scale(1.15);
-      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
-    }
-  }
-}
-
-.form-hint {
-  margin-top: var(--space-1);
-  font-size: var(--font-size-sm);
-  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);
-  color: var(--color-gray-600);
-  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 444e4231c7..35067b5dfe 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
@@ -4,6 +4,7 @@ import { formatTime } from '../utils/benchmarkUtils'
 import GradientButton from '@/components/GradientButton.vue'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
+import { Card, CardContent } from '@/components/ui/card'
 import {
   Table,
   TableBody,
@@ -98,275 +99,136 @@ function formatNumber(value) {
 </script>
 
 <template>
-  <section class="card results-card" v-if="data.length > 0">
-    <div class="section-header">
-      <div class="section-title">分析结果</div>
-      <div class="button-group">
-        <GradientButton
-          :text="`导出Excel (${selectedRowKeys.length}/20)`"
-          size="small"
-          @click="$emit('export')"
-          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
-          icon="download"
-        />
-        <GradientButton
-          :text="`批量分析 (${selectedRowKeys.length}/20)`"
-          size="small"
-          @click="$emit('createAsyncTask')"
-          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
-          icon="clock-circle"
-        />
+  <Card v-if="data.length > 0" class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
+    <CardContent class="p-5">
+      <div class="flex justify-between items-center mb-4">
+        <div class="text-xs text-gray-500 mb-3">分析结果</div>
+        <div class="flex items-center gap-3">
+          <GradientButton
+            :text="`导出Excel (${selectedRowKeys.length}/20)`"
+            size="small"
+            @click="$emit('export')"
+            :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
+            icon="download"
+          />
+          <GradientButton
+            :text="`批量分析 (${selectedRowKeys.length}/20)`"
+            size="small"
+            @click="$emit('createAsyncTask')"
+            :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
+            icon="clock-circle"
+          />
+        </div>
       </div>
-    </div>
 
-    <!-- 表格 -->
-    <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="overflow-x-auto max-h-[calc(100vh-400px)] overflow-y-auto
+        [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5
+        [&::-webkit-scrollbar-track]:bg-transparent
+        [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead class="w-[40px]">
+                <Checkbox
+                  :checked="isAllSelected"
+                  @update:checked="handleSelectAll"
+                  class="scale-85"
+                />
+              </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="opacity-40 transition-opacity">
+                    <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="hover:bg-gray-50 transition-colors"
             >
-              <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"
-          >
-            <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>
+              <TableCell class="w-[40px]">
+                <Checkbox
+                  :checked="selectedRowKeys.includes(String(record.id))"
+                  @update:checked="handleSelect(record.id)"
+                  class="scale-85"
+                />
+              </TableCell>
+              <TableCell>
+                <div class="relative inline-block">
+                  <a v-if="record.cover && record.share_url" :href="record.share_url" target="_blank" class="block cursor-pointer group">
+                    <img :src="record.cover" alt="cover" loading="lazy"
+                      class="w-20 h-11 object-cover rounded border border-gray-200
+                        transition-all duration-200 group-hover:scale-[1.02] group-hover:shadow-md" />
+                    <span v-if="record.is_top"
+                      class="absolute top-1 left-1 px-1.5 py-0.5 text-[10px] text-white bg-red-500 rounded">置顶</span>
+                  </a>
+                  <template v-else-if="record.cover">
+                    <img :src="record.cover" alt="cover" loading="lazy" class="w-20 h-11 object-cover rounded border border-gray-200" />
+                    <span v-if="record.is_top"
+                      class="absolute top-1 left-1 px-1.5 py-0.5 text-[10px] text-white bg-red-500 rounded">置顶</span>
+                  </template>
+                  <span v-else class="text-xs text-gray-400">无封面</span>
+                </div>
+              </TableCell>
+              <TableCell>
+                <span :title="record.desc" class="block max-w-[180px] truncate">{{ 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>
+      <!-- 加载更多 -->
+      <div v-if="hasMore" class="text-center pt-4 border-t border-gray-100">
+        <Button
+          :disabled="loadingMore"
+          size="lg"
+          variant="outline"
+          @click="$emit('loadMore')"
+          class="max-w-[200px] h-10 text-base rounded-lg"
+        >
+          <Spinner v-if="loadingMore" class="mr-2 h-4 w-4" />
+          {{ loadingMore ? '加载中...' : '加载更多内容' }}
+        </Button>
+        <div class="text-xs text-gray-500 mt-2">已加载 {{ data.length }} 条</div>
+      </div>
+      <div v-else-if="data.length > 0" class="text-center py-3 text-xs text-gray-500 border-t border-gray-100">
+        已加载全部内容
+      </div>
+    </CardContent>
+  </Card>
 </template>
 
 <style scoped>
-.card {
-  background: var(--color-bg-card);
-  border-radius: var(--radius-md);
-  padding: var(--space-4);
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--color-gray-200);
-  overflow: hidden;
-}
-
-.results-card {
-  min-height: 420px;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-3);
-}
-
-.button-group {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-.section-title {
-  font-size: var(--font-size-xs);
-  color: var(--color-gray-600);
-  margin-bottom: var(--space-3);
-}
-
-.table-wrapper {
-  overflow-x: auto;
-  max-height: calc(100vh - 400px);
-  overflow-y: auto;
-}
-
-.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 {
-  position: relative;
-  display: inline-block;
-}
-
-.cover-link {
-  display: block;
-  cursor: pointer;
-}
-
-.cover-link:hover .cover-img {
-  transform: scale(1.02);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.top-tag {
-  position: absolute;
-  top: var(--space-1);
-  left: var(--space-1);
-  padding: 1px 6px;
-  font-size: 10px;
-  color: #fff;
-  background: var(--color-error-500);
-  border-radius: 2px;
-}
-
-.cover-img {
-  width: 80px;
-  height: 45px;
-  object-fit: cover;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-gray-200);
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.no-cover {
-  color: var(--color-gray-500);
-  font-size: var(--font-size-xs);
-}
-
-.truncate-text {
-  display: block;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sort-icon {
-  opacity: 0.4;
-  transition: opacity var(--duration-fast);
-}
-
-.table-row:hover .sort-icon,
-[onclick]:hover .sort-icon {
-  opacity: 1;
-}
-
-.load-more-footer,
-.no-more-hint {
-  text-align: center;
-  border-top: 1px solid var(--color-gray-200);
-}
-
-.load-more-footer {
-  padding: var(--space-4);
-}
-
-.load-more-btn {
-  max-width: 200px;
-  height: 40px;
-  font-size: var(--font-size-base);
-  border-radius: var(--radius-md);
-}
-
-.load-more-hint,
-.no-more-hint {
-  font-size: var(--font-size-xs);
-  color: var(--color-gray-600);
-}
-
-.load-more-hint {
-  margin-top: var(--space-2);
-}
-
-.no-more-hint {
-  padding: var(--space-3);
-}
 </style>