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:
@@ -11,6 +11,7 @@ import { formatTime } from './utils/benchmarkUtils'
|
||||
import BenchmarkForm from './components/BenchmarkForm.vue'
|
||||
import BenchmarkTable from './components/BenchmarkTable.vue'
|
||||
import CreateStyleTaskModal from './components/CreateStyleTaskModal.vue'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
const {
|
||||
data,
|
||||
@@ -237,43 +238,42 @@ defineOptions({ name: 'ContentStyleBenchmark' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="stack">
|
||||
<!-- 表单区域 -->
|
||||
<BenchmarkForm
|
||||
v-model="form"
|
||||
:loading="loading"
|
||||
@analyze="handleAnalyzeUser"
|
||||
@reset="handleResetForm"
|
||||
/>
|
||||
<div class="page space-y-4">
|
||||
<!-- 表单区域 -->
|
||||
<BenchmarkForm
|
||||
v-model="form"
|
||||
:loading="loading"
|
||||
@analyze="handleAnalyzeUser"
|
||||
@reset="handleResetForm"
|
||||
/>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<BenchmarkTable
|
||||
:data="data"
|
||||
v-model:selectedRowKeys="selectedRowKeys"
|
||||
:loading="loading"
|
||||
:loading-more="loadingMore"
|
||||
:has-more="hasMore"
|
||||
@export="handleExportToExcel"
|
||||
@load-more="handleLoadMore"
|
||||
@create-async-task="handleCreateAsyncTask"
|
||||
/>
|
||||
<!-- 表格区域 -->
|
||||
<BenchmarkTable
|
||||
:data="data"
|
||||
v-model:selectedRowKeys="selectedRowKeys"
|
||||
:loading="loading"
|
||||
:loading-more="loadingMore"
|
||||
:has-more="hasMore"
|
||||
@export="handleExportToExcel"
|
||||
@load-more="handleLoadMore"
|
||||
@create-async-task="handleCreateAsyncTask"
|
||||
/>
|
||||
|
||||
<section v-if="!data.length" class="card results-card empty-state">
|
||||
<div class="empty-content">
|
||||
<svg class="empty-icon" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="20" y="30" width="80" height="60" rx="4" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
|
||||
<circle cx="40" cy="50" r="8" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="54" y="47" width="40" height="6" rx="3" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="54" y="60" width="32" height="6" rx="3" fill="currentColor" opacity="0.4"/>
|
||||
<line x1="32" y1="75" x2="88" y2="75" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
||||
<line x1="32" y1="82" x2="88" y2="82" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
||||
<line x1="32" y1="89" x2="72" y2="89" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
||||
</svg>
|
||||
<p class="empty-text">暂无数据，请点击开始分析</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- 空态 -->
|
||||
<Card v-if="!data.length" class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
|
||||
<CardContent class="flex flex-col items-center justify-center py-16 min-h-[420px]">
|
||||
<svg class="text-gray-300 mb-4" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="20" y="30" width="80" height="60" rx="4" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
|
||||
<circle cx="40" cy="50" r="8" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="54" y="47" width="40" height="6" rx="3" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="54" y="60" width="32" height="6" rx="3" fill="currentColor" opacity="0.4"/>
|
||||
<line x1="32" y1="75" x2="88" y2="75" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
||||
<line x1="32" y1="82" x2="88" y2="82" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
||||
<line x1="32" y1="89" x2="72" y2="89" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
||||
</svg>
|
||||
<p class="text-gray-500">暂无数据，请点击开始分析</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- 创建风格任务弹窗 -->
|
||||
<CreateStyleTaskModal
|
||||
@@ -288,58 +288,8 @@ defineOptions({ name: 'ContentStyleBenchmark' })
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 页面垂直堆叠间距 */
|
||||
.stack {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.stack>*+* {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
/* 稳定滚动条，只在垂直方向预留空间 */
|
||||
.page {
|
||||
overflow-x: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 结果区预留最小高度，切换视图时避免高度突变 */
|
||||
.results-card {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
/* 空态卡片样式 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
color: var(--color-gray-400);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: var(--color-gray-600);
|
||||
font-size: var(--font-size-base);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { usePointsConfigStore } from '@/stores/pointsConfig'
|
||||
|
||||
const pointsConfigStore = usePointsConfigStore()
|
||||
@@ -42,47 +43,53 @@ function handleReset() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="form-container">
|
||||
<div class="form-space-y-6">
|
||||
<Card class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
|
||||
<CardContent class="p-5 space-y-5">
|
||||
<!-- 平台选择 -->
|
||||
<div class="form-field">
|
||||
<Label class="form-label">平台</Label>
|
||||
<RadioGroup v-model="form.platform" class="radio-group">
|
||||
<div class="radio-item active">
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium text-gray-700">平台</Label>
|
||||
<RadioGroup v-model="form.platform" class="flex gap-2">
|
||||
<div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium text-white bg-primary-500 border border-primary-500 rounded-md cursor-pointer">
|
||||
<RadioGroupItem value="抖音" id="douyin" class="hidden" />
|
||||
<label for="douyin" class="radio-label">抖音</label>
|
||||
<label for="douyin" class="cursor-pointer">抖音</label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<!-- 链接输入 -->
|
||||
<div class="form-field">
|
||||
<Label class="form-label">主页/视频链接</Label>
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium text-gray-700">主页/视频链接</Label>
|
||||
<Input
|
||||
v-model="form.url"
|
||||
placeholder="粘贴抖音主页或视频链接"
|
||||
class="form-input h-11"
|
||||
class="h-11 bg-gray-50 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分析数量 -->
|
||||
<div class="form-field">
|
||||
<Label class="form-label">分析数量</Label>
|
||||
<div class="slider-row">
|
||||
<span class="slider-num">{{ form.count }}</span>
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium text-gray-700">分析数量</Label>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="min-w-[32px] text-sm font-semibold text-primary-500 text-center">{{ form.count }}</span>
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="form.count"
|
||||
min="1"
|
||||
max="40"
|
||||
class="level-slider"
|
||||
class="flex-1 h-1 bg-gray-200 rounded-full appearance-none cursor-pointer
|
||||
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
|
||||
[&::-webkit-slider-thumb]:bg-primary-500 [&::-webkit-slider-thumb]:rounded-full
|
||||
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-transform
|
||||
[&::-webkit-slider-thumb]:hover:scale-110 [&::-webkit-slider-thumb]:hover:shadow-[0_0_0_4px_rgba(59,130,246,0.15)]
|
||||
[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-primary-500
|
||||
[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-hint">建议 20-30 个内容</div>
|
||||
<p class="text-sm text-gray-500 mt-1">建议 20-30 个内容</p>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="button-row">
|
||||
<div class="flex gap-3">
|
||||
<GradientButton
|
||||
text="开始分析"
|
||||
:loading="loading"
|
||||
@@ -92,142 +99,10 @@ function handleReset() {
|
||||
/>
|
||||
<Button variant="outline" @click="handleReset">重置</Button>
|
||||
</div>
|
||||
<p class="points-hint">每次分析将消耗积分，消耗量与分析数量相关</p>
|
||||
</div>
|
||||
</section>
|
||||
<p class="text-xs text-gray-500 text-center">每次分析将消耗积分，消耗量与分析数量相关</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.form-space-y-6 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: var(--color-gray-50);
|
||||
border-color: var(--color-gray-300);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 var(--space-4);
|
||||
height: 36px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-gray-600);
|
||||
background: var(--color-gray-50);
|
||||
border: 1px solid var(--color-gray-300);
|
||||
border-radius: var(--radius-base);
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast);
|
||||
}
|
||||
|
||||
.radio-item.active {
|
||||
color: #fff;
|
||||
background: var(--color-primary-500);
|
||||
border-color: var(--color-primary-500);
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.slider-num {
|
||||
min-width: 32px;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-500);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level-slider {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--color-gray-200);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--color-primary-500);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--color-primary-500);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: transform var(--duration-fast), box-shadow var(--duration-fast);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
margin-top: var(--space-1);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.points-hint {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-gray-600);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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