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

<script setup>
import { reactive, h } from 'vue'
import { DownloadOutlined } from '@ant-design/icons-vue'
import { formatTime } from '../utils/benchmarkUtils'
import ExpandedRowContent from './ExpandedRowContent.vue'
import GradientButton from '@/components/GradientButton.vue'

 defineProps({
  data: {
    type: Array,
    required: true,
  },
  selectedRowKeys: {
    type: Array,
    required: true,
  },
  expandedRowKeys: {
    type: Array,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits([
  'update:selectedRowKeys',
  'update:expandedRowKeys',
  'analyze',
  'export',
  'batchAnalyze',
  'copy',
  'saveToServer',
  'createContent',
])

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, 
    sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
  { title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true, 
    sorter: (a, b) => (a.comment_count || 0) - (b.comment_count || 0) },
  { title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true, 
    sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
  { title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true, 
    sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
  { title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true, 
    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, 
    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 },
  { title: '操作', key: 'action', width: 100, resizable: true, fixed: 'right' },
]

const columns = reactive([...defaultColumns])

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

function onExpandedRowKeysChange(keys) {
  emit('update:expandedRowKeys', keys)
}
</script>

<template>
  <section class="card results-card" v-if="data.length > 0">
    <div class="section-header">
      <div class="section-title">分析结果</div>
      <a-space align="center">
        <a-button 
          size="small" 
          type="default" 
          @click="$emit('export')"
          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 10">
          <template #icon>
            <DownloadOutlined />
          </template>
          导出Excel ({{ selectedRowKeys.length }}/10)
        </a-button>
        <GradientButton
          :text="`批量分析 (${selectedRowKeys.length})`"
          size="small"
          @click="$emit('batchAnalyze')"
          :disabled="selectedRowKeys.length === 0"
        />
      </a-space>
    </div>
    <a-table 
      :dataSource="data" 
      :columns="columns" 
      :pagination="false" 
      :row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
      :expandedRowKeys="expandedRowKeys"
      @expandedRowsChange="onExpandedRowKeysChange"
      :expandable="{ 
        expandRowByClick: false
      }"
      :rowKey="(record) => String(record.id)"
      :loading="loading"
      class="benchmark-table">
      <template #expandedRowRender="{ record }">
        <ExpandedRowContent
          :record="record"
          @analyze="(row) => $emit('analyze', row)"
          @copy="(row) => $emit('copy', row)"
          @save-to-server="(row) => $emit('saveToServer', row)"
          @create-content="(row) => $emit('createContent', row)"
        />
      </template>
      <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>
        </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'">
          {{ record.digg_count ? record.digg_count.toLocaleString('zh-CN') : '0' }}
        </template>
        <template v-else-if="column.key === 'comment_count'">
          {{ record.comment_count ? record.comment_count.toLocaleString('zh-CN') : '0' }}
        </template>
        <template v-else-if="column.key === 'share_count'">
          {{ record.share_count ? record.share_count.toLocaleString('zh-CN') : '0' }}
        </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>
        </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 v-else-if="column.key === 'action'">
          <a-space>
            <GradientButton
              text="分析"
              size="small"
              :loading="record._analyzing"
              loading-text="分析中…"
              :disabled="record._analyzing"
              @click="$emit('analyze', record)"
            />
          </a-space>
        </template>
      </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);
}

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

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

.section-header .ant-space {
  display: flex;
  align-items: center;
}

.section-header .ant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.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);
}

.link-btn {
  color: #1677ff;
  text-decoration: none;
  transition: opacity 0.2s;
}

.link-btn:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.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-row-expand-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  user-select: none;
}
</style>