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

feat: 功能优化

Browse Source
This commit is contained in:
sion123
2026-01-17 19:33:59 +08:00
parent fecd47e25d
commit 091e3d2d05
22 changed files with 1871 additions and 1229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,6 @@
<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({
@@ -14,10 +12,6 @@ import GradientButton from '@/components/GradientButton.vue'
type: Array,
required: true,
},
expandedRowKeys: {
type: Array,
required: true,
},
loading: {
type: Boolean,
default: false,
@@ -26,34 +20,28 @@ import GradientButton from '@/components/GradientButton.vue'
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,
{ 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,
{ 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,
{ 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,
{ 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,
{ 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,
{ 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])
@@ -61,57 +49,36 @@ 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>
<div class="button-group">
<GradientButton
:text="`批量分析 (${selectedRowKeys.length})`"
: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('batchAnalyze')"
:disabled="selectedRowKeys.length === 0"
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
/>
</a-space>
</div>
</div>
<a-table
:dataSource="data"
:columns="columns"
:pagination="false"
:row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
:expandedRowKeys="expandedRowKeys"
@expandedRowsChange="onExpandedRowKeysChange"
:expandable="{
expandRowByClick: false
}"
<a-table
:dataSource="data"
:columns="columns"
:pagination="false"
:row-selection="{ selectedRowKeys, onChange: onSelectChange }"
: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"
@@ -147,18 +114,6 @@ function onExpandedRowKeysChange(keys) {
<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>
@@ -184,15 +139,10 @@ function onExpandedRowKeysChange(keys) {
margin-bottom: 12px;
}
.section-header .ant-space {
.button-group {
display: flex;
align-items: center;
}
.section-header .ant-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.section-title {