fix: 前端优化

2026-02-25 21:57:05 +08:00
parent 79a5c1f3ed
commit c8518a381f
6 changed files with 233 additions and 197 deletions
--- a/frontend/app/web-gold/src/components/UserDropdown.vue
+++ b/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 {
-  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,
 .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>
--- a/frontend/app/web-gold/src/layouts/MainLayout.vue
+++ b/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>
--- a/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
@@ -3,37 +3,21 @@ import LayoutHeader from './LayoutHeader.vue'

 defineOptions({ name: 'BasicLayout' })

-// Props
-const props = defineProps({
-  title: {
-    type: String,
-    default: ''
-  },
-  showBack: {
-    type: Boolean,
-    default: false
-  },
-  extra: {
-    type: Object,
-    default: () => ({})
-  }
+defineProps({
+  title: { type: String, 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 
-      :title="title" 
-      :show-back="showBack" 
-      @back="handleBack"
+    <LayoutHeader
+      :title="title"
+      :show-back="showBack"
+      @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);
 }
--- a/frontend/app/web-gold/src/views/content-style/Benchmark.vue
+++ b/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
-    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 = '正在导出数据...'
-  }
+  globalLoading.value = true
+  globalLoadingText.value = rowsNeedTranscription.length ? '正在分析中...' : '正在导出数据...'

  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
    })
-
-    if (result.success) {
-      message.success(result.message)
-    } else {
-      message.error(result.message)
-    }
+    message[result.success ? 'success' : '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('没有提示词可复制')
-    return
+    message.warning(warningMsg)
+    return false
  }
+  return true
+}
+
+async function handleCopyBatchPrompt(prompt) {
+  if (!validatePrompt(prompt, '没有提示词可复制')) return

  const success = await copyToClipboard(prompt)
-  if (success) {
-    message.success('提示词已复制到剪贴板')
-  } else {
-    message.error('复制失败')
-  }
+  message[success ? 'success' : 'error'](success ? '提示词已复制到剪贴板' : '复制失败')
 }

 function handleUseBatchPrompt(prompt) {
-  if (!prompt?.trim()) {
-    message.warning('暂无批量生成的提示词')
-    return
-  }
+  if (!validatePrompt(prompt, '暂无批量生成的提示词')) 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()) {
-    message.warning('没有提示词可保存')
-    return
-  }
+  if (!validatePrompt(promptToSave, '没有提示词可保存')) 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) {
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
+++ b/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" />
-          <a-input-number v-model:value="form.count" :min="1" :max="40" style="width:96px; margin-left:12px;" />
+          <span class="slider-num">{{ form.count }}</span>
+          <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>

--- 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,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({
-  data: {
-    type: Array,
-    required: true,
-  },
-  selectedRowKeys: {
-    type: Array,
-    required: true,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  loadingMore: {
-    type: Boolean,
-    default: false,
-  },
-  hasMore: {
-    type: Boolean,
-    default: false,
-  },
+defineProps({
+  data: { type: Array, required: true },
+  selectedRowKeys: { type: Array, required: true },
+  loading: { type: Boolean, default: false },
+  loadingMore: { type: Boolean, default: false },
+  hasMore: { type: Boolean, default: false },
 })

-const emit = defineEmits([
-  'update:selectedRowKeys',
-  'export',
-  'batchAnalyze',
-  'loadMore',
-])
+const emit = defineEmits(['update:selectedRowKeys', 'export', 'batchAnalyze', 'loadMore'])

 const defaultColumns = [
-  { title: '封面', key: 'cover', dataIndex: 'cover', width: 120, resizable: true },
-  { title: '描述', key: 'desc', dataIndex: 'desc', width: 280, resizable: true, ellipsis: true },
-  { title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true,
+  { 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: 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: 160, resizable: true,
+  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 140,
    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"
-            style="width:120px;height:68px;object-fit:cover;border-radius:6px;border:1px solid #eee;" />
-          <span v-else style="color:#999;font-size:12px;">无封面</span>
+          <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>
@@ -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' }}
-        </template>
-        <template v-else-if="column.key === 'is_top'">
-          <a-tag v-if="record.is_top" color="red">置顶</a-tag>
-          <span v-else>-</span>
+          {{ formatNumber(record.collect_count) }}
        </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 {
-  color: #1677ff;
-  text-decoration: none;
-  transition: opacity 0.2s;
+.cover-wrapper {
+  position: relative;
+  display: inline-block;
 }

-.link-btn:hover {
-  opacity: 0.8;
-  text-decoration: underline;
+.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: 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 {
-  padding: 16px;
+.load-more-footer,
+.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 {
-  margin-top: 8px;
+.load-more-hint,
+.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>