238 lines
9.0 KiB
Vue
238 lines
9.0 KiB
Vue
<script setup>
|
|
import { reactive, computed, ref } from 'vue'
|
|
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,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { Spinner } from '@/components/ui/spinner'
|
|
|
|
const props = 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', 'loadMore', 'createAsyncTask'])
|
|
|
|
// 列定义
|
|
const columns = [
|
|
{ key: 'cover', title: '封面', width: '100px' },
|
|
{ key: 'desc', title: '描述', width: '200px' },
|
|
{ key: 'digg_count', title: '点赞', width: '80px', sortable: true },
|
|
{ key: 'comment_count', title: '评论', width: '80px', sortable: true },
|
|
{ key: 'share_count', title: '分享', width: '80px', sortable: true },
|
|
{ key: 'collect_count', title: '收藏', width: '80px', sortable: true },
|
|
{ key: 'duration_s', title: '时长', width: '80px', sortable: true },
|
|
{ key: 'create_time', title: '创建时间', width: '140px', sortable: true },
|
|
]
|
|
|
|
// 排序状态
|
|
const sortKey = ref('digg_count')
|
|
const sortOrder = ref('desc')
|
|
|
|
// 全选状态
|
|
const isAllSelected = computed(() => {
|
|
return props.data.length > 0 && props.selectedRowKeys.length === props.data.length
|
|
})
|
|
|
|
// 切换排序
|
|
function handleSort(key) {
|
|
if (sortKey.value === key) {
|
|
sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
|
|
} else {
|
|
sortKey.value = key
|
|
sortOrder.value = 'desc'
|
|
}
|
|
emit('update:selectedRowKeys', [])
|
|
}
|
|
|
|
// 选择切换
|
|
function handleSelectAll(checked) {
|
|
if (isAllSelected.value) {
|
|
emit('update:selectedRowKeys', [])
|
|
} else {
|
|
emit('update:selectedRowKeys', props.data.map(item => String(item.id)))
|
|
}
|
|
}
|
|
|
|
function handleSelect(id) {
|
|
const key = String(id)
|
|
const newKeys = [...props.selectedRowKeys]
|
|
const index = newKeys.indexOf(key)
|
|
if (index > -1) {
|
|
newKeys.splice(index, 1)
|
|
} else {
|
|
newKeys.push(key)
|
|
}
|
|
emit('update:selectedRowKeys', newKeys)
|
|
}
|
|
|
|
// 排序后的数据
|
|
const sortedData = computed(() => {
|
|
const data = [...props.data]
|
|
const key = sortKey.value
|
|
|
|
if (!key) return data
|
|
|
|
return data.sort((a, b) => {
|
|
const aVal = a[key] || 0
|
|
const bVal = b[key] || 0
|
|
return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
|
|
})
|
|
})
|
|
|
|
// 格式化数字
|
|
function formatNumber(value) {
|
|
return value ? value.toLocaleString('zh-CN') : '0'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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 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-[60px]">
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
:checked="isAllSelected"
|
|
@update:checked="handleSelectAll"
|
|
class="scale-110"
|
|
/>
|
|
<span class="text-xs text-muted-foreground">全选</span>
|
|
</div>
|
|
</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"
|
|
>
|
|
<TableCell class="w-[60px]">
|
|
<Checkbox
|
|
:checked="selectedRowKeys.includes(String(record.id))"
|
|
@update:checked="handleSelect(record.id)"
|
|
class="scale-110"
|
|
/>
|
|
</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="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>
|
|
</style>
|