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

<script setup>
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 },
})

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

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 = reactive([...defaultColumns])

function onSelectChange(selectedKeys) {
  emit('update:selectedRowKeys', selectedKeys)
}

function formatNumber(value) {
  return value ? value.toLocaleString('zh-CN') : '0'
}
</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('batchAnalyze')"
          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
        />
      </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="column.key === 'digg_count'">
          {{ formatNumber(record.digg_count) }}
        </template>
        <template v-else-if="column.key === 'comment_count'">
          {{ formatNumber(record.comment_count) }}
        </template>
        <template v-else-if="column.key === 'share_count'">
          {{ formatNumber(record.share_count) }}
        </template>
        <template v-else-if="column.key === 'collect_count'">
          {{ formatNumber(record.collect_count) }}
        </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"
          >
            加载更多内容
          </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>
  </section>
</template>

<style scoped>
.card {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-inset-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.results-card {
  min-height: 420px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.button-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.batch-btn {
  font-weight: 600;
}

.batch-btn:hover {
  box-shadow: var(--glow-primary);
  filter: brightness(1.03);
}

.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: 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),
.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%;
  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;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  user-select: none;
}

.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;
  font-size: 14px;
  border-radius: 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;
}
</style>