fix: 前端优化

frontend/app/web-gold/src/components/UserDropdown.vue

@@ -25,7 +25,7 @@ async function handleLogout() {
 </script>
 
 <template>
-  <a-dropdown placement="bottomRight" :trigger="['click', 'hover']">
+  <a-dropdown placement="bottomRight" :trigger="['hover']">
     <div class="user-avatar-container">
       <img 
         v-if="userStore.displayAvatar" 
@@ -63,31 +63,33 @@ async function handleLogout() {
   cursor: pointer;
   display: flex;
   align-items: center;
-  transition: transform 0.2s ease;
+  will-change: transform;
 }
 
 .user-avatar-container:hover {
   transform: scale(1.05);
 }
 
-.user-avatar {
+.user-avatar,
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid var(--color-border, #e5e7eb);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.user-avatar:hover {
-  border-color: var(--color-primary, #1890ff);
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-
 .user-avatar-placeholder {
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  border: 2px solid var(--color-border, #e5e7eb);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.user-avatar-container:hover .user-avatar,
+.user-avatar-container:hover .user-avatar-placeholder {
+  border-color: var(--color-primary, #1890ff);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.user-avatar {
+  object-fit: cover;
+}
+
+.user-avatar-placeholder {
   background: linear-gradient(135deg, var(--color-primary, #1890ff), var(--color-blue, #36cfc9));
   display: flex;
   align-items: center;
@@ -95,12 +97,5 @@ async function handleLogout() {
   color: #fff;
   font-weight: 600;
   font-size: 16px;
-  border: 2px solid var(--color-border, #e5e7eb);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.user-avatar-placeholder:hover {
-  border-color: var(--color-primary, #1890ff);
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
 </style>

frontend/app/web-gold/src/layouts/MainLayout.vue

@@ -30,6 +30,7 @@ import SidebarNav from '@/components/SidebarNav.vue'
 .app-body {
   padding-top: 70px; /* 与 TopNav 高度对齐 */
   display: grid;
+  overflow: hidden;
   grid-template-columns: 220px 1fr; /* 左侧固定宽度侧边栏 */
 }
 
@@ -41,7 +42,8 @@ import SidebarNav from '@/components/SidebarNav.vue'
 
 .content-scroll {
   flex: 1 1 auto;
-  overflow: auto; /* 右侧内容区域滚动 */
+  overflow-x: hidden;
+  overflow-y: auto; /* 右侧内容区域滚动 */
   padding: 16px;
 }
 </style>

frontend/app/web-gold/src/layouts/components/BasicLayout.vue

@@ -3,37 +3,21 @@ import LayoutHeader from './LayoutHeader.vue'
 
 defineOptions({ name: 'BasicLayout' })
 
-// Props
+defineProps({
-const props = defineProps({
+  title: { type: String, default: '' },
-  title: {
+  showBack: { type: Boolean, default: false },
-    type: String,
+  extra: { type: Object, default: () => ({}) }
-    default: ''
-  },
-  showBack: {
-    type: Boolean,
-    default: false
-  },
-  extra: {
-    type: Object,
-    default: () => ({})
-  }
 })
 
-// Emits
 const emit = defineEmits(['back'])
-
-// Methods
-const handleBack = () => {
-  emit('back')
-}
 </script>
 
 <template>
   <div class="basic-layout">
-    <LayoutHeader 
+    <LayoutHeader
-      :title="title" 
+      :title="title"
-      :show-back="showBack" 
+      :show-back="showBack"
-      @back="handleBack"
+      @back="emit('back')"
     >
       <template #extra>
         <slot name="extra"></slot>
@@ -62,7 +46,8 @@ const handleBack = () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: var(--bg-primary);
   padding: var(--space-md);
 }

frontend/app/web-gold/src/views/content-style/Benchmark.vue

@@ -116,45 +116,33 @@ async function handleExportToExcel() {
   const selectedRows = data.value.filter(item => selectedRowKeys.value.includes(item.id))
   const rowsNeedTranscription = selectedRows.filter(row => !row.transcriptions)
 
-  if (rowsNeedTranscription.length) {
+  globalLoading.value = true
-    globalLoading.value = true
+  globalLoadingText.value = rowsNeedTranscription.length ? '正在分析中...' : '正在导出数据...'
-    globalLoadingText.value = '正在分析中...'
-
-    try {
-      const transcriptions = await getVoiceText(rowsNeedTranscription)
-
-      for (const row of rowsNeedTranscription) {
-        const transcription = transcriptions.find(item => item.audio_url === row.audio_url)
-        if (transcription) {
-          const index = data.value.findIndex(item => item.id === row.id)
-          if (index !== -1) {
-            data.value[index].transcriptions = transcription.value
-          }
-        }
-      }
-
-      globalLoadingText.value = '正在导出...'
-    } catch (error) {
-      console.error('获取语音转写失败:', error)
-      message.warning('部分数据语音转写失败，将导出已有数据')
-    }
-  } else {
-    globalLoading.value = true
-    globalLoadingText.value = '正在导出数据...'
-  }
 
   try {
+    if (rowsNeedTranscription.length) {
+      try {
+        const transcriptions = await getVoiceText(rowsNeedTranscription)
+        rowsNeedTranscription.forEach(row => {
+          const transcription = transcriptions.find(item => item.audio_url === row.audio_url)
+          const index = data.value.findIndex(item => item.id === row.id)
+          if (transcription && index !== -1) {
+            data.value[index].transcriptions = transcription.value
+          }
+        })
+        globalLoadingText.value = '正在导出...'
+      } catch (error) {
+        console.error('获取语音转写失败:', error)
+        message.warning('部分数据语音转写失败，将导出已有数据')
+      }
+    }
+
     const finalSelectedRows = data.value.filter(item => selectedRowKeys.value.includes(item.id))
     const result = exportBenchmarkDataToExcel(finalSelectedRows, {
       platform: form.value.platform,
       formatTime
     })
-
+    message[result.success ? 'success' : 'error'](result.message)
-    if (result.success) {
-      message.success(result.message)
-    } else {
-      message.error(result.message)
-    }
   } finally {
     globalLoading.value = false
     globalLoadingText.value = ''
@@ -232,25 +220,23 @@ async function handleLoadMore() {
   }
 }
 
-async function handleCopyBatchPrompt(prompt) {
+function validatePrompt(prompt, warningMsg = '没有提示词') {
   if (!prompt?.trim()) {
-    message.warning('没有提示词可复制')
+    message.warning(warningMsg)
-    return
+    return false
   }
+  return true
+}
+
+async function handleCopyBatchPrompt(prompt) {
+  if (!validatePrompt(prompt, '没有提示词可复制')) return
 
   const success = await copyToClipboard(prompt)
-  if (success) {
+  message[success ? 'success' : 'error'](success ? '提示词已复制到剪贴板' : '复制失败')
-    message.success('提示词已复制到剪贴板')
-  } else {
-    message.error('复制失败')
-  }
 }
 
 function handleUseBatchPrompt(prompt) {
-  if (!prompt?.trim()) {
+  if (!validatePrompt(prompt, '暂无批量生成的提示词')) return
-    message.warning('暂无批量生成的提示词')
-    return
-  }
 
   promptStore.setPrompt(prompt, { batch: true })
   router.push('/content-style/copywriting')
@@ -258,10 +244,8 @@ function handleUseBatchPrompt(prompt) {
 
 function handleOpenSavePromptModal(batchPrompt = null) {
   const promptToSave = batchPrompt || batchPromptMergedText.value
-  if (!promptToSave?.trim()) {
+  if (!validatePrompt(promptToSave, '没有提示词可保存')) return
-    message.warning('没有提示词可保存')
+
-    return
-  }
   savePromptContent.value = promptToSave
   savePromptModalVisible.value = true
 }
@@ -338,13 +322,18 @@ defineOptions({ name: 'ContentStyleBenchmark' })
 
 <style scoped>
 /* 页面垂直堆叠间距 */
+.stack {
+  overflow-x: hidden;
+}
+
 .stack>*+* {
   margin-top: 16px;
 }
 
-/* 稳定滚动条，避免内容高度变化导致页面左右抖动 */
+/* 稳定滚动条，只在垂直方向预留空间 */
 .page {
-  scrollbar-gutter: stable both-edges;
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 /* 卡片样式（不依赖 tailwind） */
@@ -382,6 +371,7 @@ defineOptions({ name: 'ContentStyleBenchmark' })
 :deep(.batch-analyze-spin-wrapper) {
   width: 100%;
   min-height: calc(100vh - 120px);
+  overflow-x: hidden;
 }
 
 :deep(.batch-analyze-spin-wrapper .ant-spin-spinning) {

frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue

@@ -57,8 +57,14 @@ function handleReset() {
 
       <a-form-item label="分析数量">
         <div class="slider-row">
-          <a-slider v-model:value="form.count" :min="1" :max="40" :tooltip-open="true" style="flex:1" />
+          <span class="slider-num">{{ form.count }}</span>
-          <a-input-number v-model:value="form.count" :min="1" :max="40" style="width:96px; margin-left:12px;" />
+          <input
+            type="range"
+            v-model.number="form.count"
+            min="1"
+            max="40"
+            class="level-slider"
+          />
         </div>
         <div class="form-hint">建议 20-30 个内容</div>
       </a-form-item>
@@ -89,6 +95,55 @@ function handleReset() {
 .slider-row {
   display: flex;
   align-items: center;
+  gap: 12px;
+}
+
+.slider-num {
+  min-width: 32px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-primary);
+  text-align: center;
+}
+
+.level-slider {
+  flex: 1;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--color-slate-200);
+  border-radius: 2px;
+  outline: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s;
+
+    &:hover {
+      transform: scale(1.15);
+      box-shadow: 0 0 0 4px rgba(0, 176, 48, 0.15);
+    }
+  }
+
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    transition: transform 0.15s, box-shadow 0.15s;
+
+    &:hover {
+      transform: scale(1.15);
+      box-shadow: 0 0 0 4px rgba(0, 176, 48, 0.15);
+    }
+  }
 }
 
 .form-hint {
@@ -104,32 +159,5 @@ function handleReset() {
   text-align: center;
 }
 
-:deep(.ant-slider) {
-  padding: 10px 0;
-}
-
-:deep(.ant-slider-rail) {
-  background-color: var(--color-slate-200);
-  height: 4px;
-}
-
-:deep(.ant-slider-track) {
-  background-color: var(--color-primary);
-  height: 4px;
-}
-
-:deep(.ant-slider:hover .ant-slider-track) {
-  background-color: var(--color-primary);
-}
-
-:deep(.ant-slider-handle::after) {
-  box-shadow: 0 0 0 2px var(--color-primary);
-}
-
-:deep(.ant-slider-handle:focus-visible::after),
-:deep(.ant-slider-handle:hover::after),
-:deep(.ant-slider-handle:active::after) {
-  box-shadow: 0 0 0 3px var(--color-primary);
-}
 </style>
 

frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue

@@ -1,56 +1,33 @@
 <script setup>
-import { reactive, h } from 'vue'
+import { reactive } from 'vue'
 import { formatTime } from '../utils/benchmarkUtils'
 import GradientButton from '@/components/GradientButton.vue'
 
- defineProps({
+defineProps({
-  data: {
+  data: { type: Array, required: true },
-    type: Array,
+  selectedRowKeys: { type: Array, required: true },
-    required: true,
+  loading: { type: Boolean, default: false },
-  },
+  loadingMore: { type: Boolean, default: false },
-  selectedRowKeys: {
+  hasMore: { type: Boolean, default: false },
-    type: Array,
-    required: true,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  loadingMore: {
-    type: Boolean,
-    default: false,
-  },
-  hasMore: {
-    type: Boolean,
-    default: false,
-  },
 })
 
-const emit = defineEmits([
+const emit = defineEmits(['update:selectedRowKeys', 'export', 'batchAnalyze', 'loadMore'])
-  'update:selectedRowKeys',
-  'export',
-  'batchAnalyze',
-  'loadMore',
-])
 
 const defaultColumns = [
-  { title: '封面', key: 'cover', dataIndex: 'cover', width: 120, resizable: true },
+  { title: '封面', key: 'cover', dataIndex: 'cover', width: 100 },
-  { title: '描述', key: 'desc', dataIndex: 'desc', width: 280, resizable: true, ellipsis: true },
+  { title: '描述', key: 'desc', dataIndex: 'desc', width: 200, ellipsis: true },
-  { title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: 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: 90, resizable: true,
+  { 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: 90, resizable: true,
+  { 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: 90, resizable: true,
+  { title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 80,
     sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
-  { title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true,
+  { title: '时长', key: 'duration_s', dataIndex: 'duration_s', width: 80,
     sorter: (a, b) => (a.duration_s || 0) - (b.duration_s || 0) },
-  { title: '置顶', key: 'is_top', dataIndex: 'is_top', width: 70, resizable: true },
+  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 140,
-  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true,
     sorter: (a, b) => (a.create_time || 0) - (b.create_time || 0) },
-  { title: '链接', key: 'share_url', dataIndex: 'share_url', width: 80, resizable: true,
-    customRender: ({ record }) => record.share_url ? h('a', { href: record.share_url, target: '_blank' }, '打开') : null },
 ]
 
 const columns = reactive([...defaultColumns])
@@ -58,6 +35,10 @@ const columns = reactive([...defaultColumns])
 function onSelectChange(selectedKeys) {
   emit('update:selectedRowKeys', selectedKeys)
 }
+
+function formatNumber(value) {
+  return value ? value.toLocaleString('zh-CN') : '0'
+}
 </script>
 
 <template>
@@ -91,9 +72,17 @@ function onSelectChange(selectedKeys) {
       class="benchmark-table">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'cover'">
-          <img v-if="record.cover" :src="record.cover" alt="cover" loading="lazy"
+          <div class="cover-wrapper">
-            style="width:120px;height:68px;object-fit:cover;border-radius:6px;border:1px solid #eee;" />
+            <a v-if="record.cover && record.share_url" :href="record.share_url" target="_blank" class="cover-link">
-          <span v-else style="color:#999;font-size:12px;">无封面</span>
+              <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>
@@ -102,28 +91,20 @@ function onSelectChange(selectedKeys) {
           {{ record.play_count ? (record.play_count / 10000).toFixed(1) + 'w' : '0' }}
         </template>
         <template v-else-if="column.key === 'digg_count'">
-          {{ record.digg_count ? record.digg_count.toLocaleString('zh-CN') : '0' }}
+          {{ formatNumber(record.digg_count) }}
         </template>
         <template v-else-if="column.key === 'comment_count'">
-          {{ record.comment_count ? record.comment_count.toLocaleString('zh-CN') : '0' }}
+          {{ formatNumber(record.comment_count) }}
         </template>
         <template v-else-if="column.key === 'share_count'">
-          {{ record.share_count ? record.share_count.toLocaleString('zh-CN') : '0' }}
+          {{ formatNumber(record.share_count) }}
         </template>
         <template v-else-if="column.key === 'collect_count'">
-          {{ record.collect_count ? record.collect_count.toLocaleString('zh-CN') : '0' }}
+          {{ formatNumber(record.collect_count) }}
-        </template>
-        <template v-else-if="column.key === 'is_top'">
-          <a-tag v-if="record.is_top" color="red">置顶</a-tag>
-          <span v-else>-</span>
         </template>
         <template v-else-if="column.key === 'create_time'">
           {{ formatTime(record.create_time) }}
         </template>
-        <template v-else-if="column.key === 'share_url'">
-          <a v-if="record.share_url" :href="record.share_url" target="_blank" class="link-btn">打开</a>
-          <span v-else>-</span>
-        </template>
       </template>
       <template #footer>
         <div v-if="hasMore" class="load-more-footer">
@@ -151,6 +132,7 @@ function onSelectChange(selectedKeys) {
   padding: 16px;
   box-shadow: var(--shadow-inset-card);
   border: 1px solid var(--color-border);
+  overflow: hidden;
 }
 
 .results-card {
@@ -185,15 +167,44 @@ function onSelectChange(selectedKeys) {
   filter: brightness(1.03);
 }
 
-.link-btn {
+.cover-wrapper {
-  color: #1677ff;
+  position: relative;
-  text-decoration: none;
+  display: inline-block;
-  transition: opacity 0.2s;
 }
 
-.link-btn:hover {
+.cover-link {
-  opacity: 0.8;
+  display: block;
-  text-decoration: underline;
+  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: 4px;
+  left: 4px;
+  padding: 1px 6px;
+  font-size: 10px;
+  color: #fff;
+  background: #ff4d4f;
+  border-radius: 2px;
+}
+
+.cover-img {
+  width: 80px;
+  height: 45px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.no-cover {
+  color: #999;
+  font-size: 12px;
 }
 
 .benchmark-table :deep(.ant-table-expand-icon-th),
@@ -203,6 +214,27 @@ function onSelectChange(selectedKeys) {
   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%;
+  overflow: hidden;
+}
+
+.benchmark-table :deep(.ant-table-body) {
+  overflow-x: hidden !important;
+}
+
+.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;
@@ -213,12 +245,16 @@ function onSelectChange(selectedKeys) {
   user-select: none;
 }
 
-.load-more-footer {
+.load-more-footer,
-  padding: 16px;
+.no-more-hint {
   text-align: center;
   border-top: 1px solid var(--color-border);
 }
 
+.load-more-footer {
+  padding: 16px;
+}
+
 .load-more-footer .ant-btn {
   max-width: 200px;
   height: 40px;
@@ -226,18 +262,18 @@ function onSelectChange(selectedKeys) {
   border-radius: 8px;
 }
 
-.load-more-hint {
+.load-more-hint,
-  margin-top: 8px;
+.no-more-hint {
   font-size: 12px;
   color: var(--color-text-secondary);
 }
 
+.load-more-hint {
+  margin-top: 8px;
+}
+
 .no-more-hint {
   padding: 12px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  border-top: 1px solid var(--color-border);
 }
 </style>