sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 前端优化

Browse Source
This commit is contained in:
shenaowei
2026-02-25 21:57:05 +08:00
parent 79a5c1f3ed
commit c8518a381f
6 changed files with 233 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
View File

@@ -1,56 +1,33 @@
<script setup>
import { reactive, h } from 'vue'
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,
},
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 emit = defineEmits(['update:selectedRowKeys', 'export', 'batchAnalyze', 'loadMore'])
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,
{ 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: 90, resizable: true,
{ 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: 90, resizable: true,
{ 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: 90, resizable: true,
{ title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 80,
sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
{ title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true,
{ title: '时长', key: 'duration_s', dataIndex: 'duration_s', width: 80,
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,
{ title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 140,
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 },
]
const columns = reactive([...defaultColumns])
@@ -58,6 +35,10 @@ const columns = reactive([...defaultColumns])
function onSelectChange(selectedKeys) {
emit('update:selectedRowKeys', selectedKeys)
}
function formatNumber(value) {
return value ? value.toLocaleString('zh-CN') : '0'
}
</script>
<template>
@@ -91,9 +72,17 @@ function onSelectChange(selectedKeys) {
class="benchmark-table">
<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>
<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>
@@ -102,28 +91,20 @@ function onSelectChange(selectedKeys) {
{{ 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' }}
{{ formatNumber(record.digg_count) }}
</template>
<template v-else-if="column.key === 'comment_count'">
{{ record.comment_count ? record.comment_count.toLocaleString('zh-CN') : '0' }}
{{ formatNumber(record.comment_count) }}
</template>
<template v-else-if="column.key === 'share_count'">
{{ record.share_count ? record.share_count.toLocaleString('zh-CN') : '0' }}
{{ formatNumber(record.share_count) }}
</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>
{{ formatNumber(record.collect_count) }}
</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>
<template #footer>
<div v-if="hasMore" class="load-more-footer">
@@ -151,6 +132,7 @@ function onSelectChange(selectedKeys) {
padding: 16px;
box-shadow: var(--shadow-inset-card);
border: 1px solid var(--color-border);
overflow: hidden;
}
.results-card {
@@ -185,15 +167,44 @@ function onSelectChange(selectedKeys) {
filter: brightness(1.03);
}
.link-btn {
color: #1677ff;
text-decoration: none;
transition: opacity 0.2s;
.cover-wrapper {
position: relative;
display: inline-block;
}
.link-btn:hover {
opacity: 0.8;
text-decoration: underline;
.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),
@@ -203,6 +214,27 @@ function onSelectChange(selectedKeys) {
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;
@@ -213,12 +245,16 @@ function onSelectChange(selectedKeys) {
user-select: none;
}
.load-more-footer {
padding: 16px;
.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;
@@ -226,18 +262,18 @@ function onSelectChange(selectedKeys) {
border-radius: 8px;
}
.load-more-hint {
margin-top: 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;
text-align: center;
font-size: 12px;
color: var(--color-text-secondary);
border-top: 1px solid var(--color-border);
}
</style>