feat(Benchmark.vue): replace custom card with UI component and improve styling
- Import Card and CardContent components from UI library - Replace custom div-based card structure with Card component - Update empty state display using Card component with modern styling - Remove deprecated .stack class and related CSS rules - Add spacing utilities for better layout consistency - Apply glassmorphism effect with bg-white/80 and backdrop-blur-sm classes - Update
This commit is contained in:
@@ -4,6 +4,7 @@ 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,
|
||||
@@ -98,275 +99,136 @@ function formatNumber(value) {
|
||||
</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('createAsyncTask')"
|
||||
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
|
||||
icon="clock-circle"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-wrapper">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead class="w-[40px]">
|
||||
<Checkbox
|
||||
:checked="isAllSelected"
|
||||
@update:checked="handleSelectAll"
|
||||
class="checkbox-small"
|
||||
/>
|
||||
</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="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-[40px]">
|
||||
<Checkbox
|
||||
:checked="isAllSelected"
|
||||
@update:checked="handleSelectAll"
|
||||
class="scale-85"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<div class="flex items-center gap-1">
|
||||
{{ col.title }}
|
||||
<span v-if="col.sortable" class="sort-icon">
|
||||
<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="table-row"
|
||||
>
|
||||
<TableCell class="w-[40px]">
|
||||
<Checkbox
|
||||
:checked="selectedRowKeys.includes(String(record.id))"
|
||||
@update:checked="handleSelect(record.id)"
|
||||
class="checkbox-small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<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>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span :title="record.desc" class="truncate-text">{{ 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>
|
||||
<TableCell class="w-[40px]">
|
||||
<Checkbox
|
||||
:checked="selectedRowKeys.includes(String(record.id))"
|
||||
@update:checked="handleSelect(record.id)"
|
||||
class="scale-85"
|
||||
/>
|
||||
</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="load-more-footer">
|
||||
<Button
|
||||
:disabled="loadingMore"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
@click="$emit('loadMore')"
|
||||
class="load-more-btn"
|
||||
>
|
||||
<Spinner v-if="loadingMore" class="mr-2 h-4 w-4" />
|
||||
{{ loadingMore ? '加载中...' : '加载更多内容' }}
|
||||
</Button>
|
||||
<div class="load-more-hint">已加载 {{ data.length }} 条</div>
|
||||
</div>
|
||||
<div v-else-if="data.length > 0" class="no-more-hint">
|
||||
已加载全部内容
|
||||
</div>
|
||||
</section>
|
||||
<!-- 加载更多 -->
|
||||
<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>
|
||||
.card {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.results-card {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
max-height: calc(100vh - 400px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar-thumb {
|
||||
background: var(--color-gray-300);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: var(--color-gray-50);
|
||||
}
|
||||
|
||||
.checkbox-small {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.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: var(--space-1);
|
||||
left: var(--space-1);
|
||||
padding: 1px 6px;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
background: var(--color-error-500);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cover-img {
|
||||
width: 80px;
|
||||
height: 45px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.no-cover {
|
||||
color: var(--color-gray-500);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.truncate-text {
|
||||
display: block;
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sort-icon {
|
||||
opacity: 0.4;
|
||||
transition: opacity var(--duration-fast);
|
||||
}
|
||||
|
||||
.table-row:hover .sort-icon,
|
||||
[onclick]:hover .sort-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.load-more-footer,
|
||||
.no-more-hint {
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.load-more-footer {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.load-more-btn {
|
||||
max-width: 200px;
|
||||
height: 40px;
|
||||
font-size: var(--font-size-base);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.load-more-hint,
|
||||
.no-more-hint {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.load-more-hint {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.no-more-hint {
|
||||
padding: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user