提示词保存
This commit is contained in:
@@ -0,0 +1,232 @@
|
||||
<script setup>
|
||||
import { reactive, h } from 'vue'
|
||||
import { DownloadOutlined } from '@ant-design/icons-vue'
|
||||
import { formatTime } from '../utils/benchmarkUtils'
|
||||
import ExpandedRowContent from './ExpandedRowContent.vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
selectedRowKeys: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
expandedRowKeys: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
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,
|
||||
sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
|
||||
{ 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,
|
||||
sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
|
||||
{ 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,
|
||||
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,
|
||||
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])
|
||||
|
||||
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>
|
||||
<a-button size="small" type="primary" class="batch-btn" @click="$emit('batchAnalyze')">
|
||||
批量分析 ({{ selectedRowKeys.length }})
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-table
|
||||
:dataSource="data"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
|
||||
:expandedRowKeys="expandedRowKeys"
|
||||
@expandedRowsChange="onExpandedRowKeysChange"
|
||||
:expandable="{
|
||||
expandRowByClick: false
|
||||
}"
|
||||
: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"
|
||||
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>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'desc'">
|
||||
<span :title="record.desc">{{ record.desc || '-' }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'play_count'">
|
||||
{{ 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' }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'comment_count'">
|
||||
{{ record.comment_count ? record.comment_count.toLocaleString('zh-CN') : '0' }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'share_count'">
|
||||
{{ record.share_count ? record.share_count.toLocaleString('zh-CN') : '0' }}
|
||||
</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>
|
||||
</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 v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button size="small" type="primary" :loading="record._analyzing" :disabled="record._analyzing" @click="$emit('analyze', record)">
|
||||
{{ record._analyzing ? '分析中…' : '分析' }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-inset-card);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.results-card {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-header .ant-space {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-header .ant-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.batch-btn {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.batch-btn:hover {
|
||||
box-shadow: var(--glow-primary);
|
||||
filter: brightness(1.03);
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
color: #1677ff;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.benchmark-table :deep(.ant-table-expand-icon-th),
|
||||
.benchmark-table :deep(.ant-table-row-expand-icon-cell) {
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.benchmark-table :deep(.ant-table-row-expand-icon) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user