1446 lines
41 KiB
Vue
1446 lines
41 KiB
Vue
<script setup>
|
||
import dayjs from 'dayjs'
|
||
import storage from '@/utils/storage'
|
||
import { ChatMessageApi } from '@/api/chat'
|
||
import TikhubService, { InterfaceType, MethodType } from '@/api/tikhub/index.js'
|
||
import useVoiceText from '@gold/hooks/web/useVoiceText'
|
||
import { ref, h, onMounted, reactive } from 'vue'
|
||
import { message } from 'ant-design-vue'
|
||
import { EditOutlined, CopyOutlined, DownloadOutlined } from '@ant-design/icons-vue'
|
||
import { resolveId } from '@/utils/url'
|
||
import { exportBenchmarkDataToExcel } from '@/utils/excel'
|
||
import { usePromptStore } from '@/stores/prompt'
|
||
import { useRouter } from 'vue-router'
|
||
import GlobalLoading from '@/components/GlobalLoading.vue'
|
||
import { streamChat } from '@/utils/streamChat'
|
||
import ChatMessageRenderer from '@/components/ChatMessageRenderer.vue'
|
||
|
||
// ==================== 初始化 ====================
|
||
const router = useRouter()
|
||
const promptStore = usePromptStore()
|
||
const { getVoiceText } = useVoiceText()
|
||
|
||
// ==================== 常量定义 ====================
|
||
const TABLE_DATA_STORAGE_KEY = 'benchmark_table_data'
|
||
|
||
// ==================== 响应式状态 ====================
|
||
const loading = ref(false)
|
||
const batchAnalyzeLoading = ref(false)
|
||
const globalLoading = ref(false)
|
||
const globalLoadingText = ref('')
|
||
const data = ref([])
|
||
const selectedRowKeys = ref([])
|
||
const expandedRowKeys = ref([])
|
||
const batchPrompt = ref('')
|
||
const modalVisible = ref(false)
|
||
const editingRowId = ref(null)
|
||
const batchPromptEditMode = ref(false)
|
||
const batchPromptGenerating = ref(false)
|
||
|
||
const form = ref({
|
||
platform: '抖音',
|
||
url: '',
|
||
count: 20,
|
||
sort_type: 0,
|
||
})
|
||
|
||
|
||
|
||
// ==================== 表格配置 ====================
|
||
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])
|
||
|
||
// ==================== 计算属性 ====================
|
||
// batchPromptRendered 已移除，使用 ChatMessageRenderer 组件渲染
|
||
|
||
// ==================== 数据处理函数 ====================
|
||
/**
|
||
* 映射抖音数据结构
|
||
*/
|
||
function mapFromDouyin(awemeList) {
|
||
return awemeList.map((item, idx) => ({
|
||
id: item?.statistics?.aweme_id || item?.aweme_id || idx + 1,
|
||
cover: item?.video?.origin_cover?.url_list?.[0] || item?.video?.cover?.url_list?.[0]
|
||
|| item?.video?.dynamic_cover?.url_list?.[0] || item?.video?.animated_cover?.url_list?.[0] || '',
|
||
is_top: item?.is_top ? 1 : 0,
|
||
create_time: item?.create_time,
|
||
audio_url: item?.video?.play_addr?.url_list?.reverse()[0] || '',
|
||
desc: item?.desc || item?.caption || '',
|
||
duration_s: Math.round((item?.video?.duration ?? 0) / 1000),
|
||
digg_count: item?.statistics?.digg_count ?? 0,
|
||
comment_count: item?.statistics?.comment_count ?? 0,
|
||
share_count: item?.statistics?.share_count ?? 0,
|
||
collect_count: item?.statistics?.collect_count ?? 0,
|
||
play_count: item?.statistics?.play_count ?? 0,
|
||
share_url: item?.share_info?.share_url || '',
|
||
}))
|
||
}
|
||
|
||
/**
|
||
* 映射小红书数据结构
|
||
*/
|
||
function mapFromXhs(notes) {
|
||
return notes.map((note, idx) => ({
|
||
id: note?.note_id || note?.id || idx + 1,
|
||
cover: note?.cover?.url || note?.image_list?.[0]?.url || '',
|
||
is_top: 0,
|
||
create_time: note?.time || note?.create_time,
|
||
desc: note?.desc || note?.title || '',
|
||
duration_s: 0,
|
||
digg_count: note?.liked_count ?? note?.likes ?? 0,
|
||
comment_count: note?.comment_count ?? 0,
|
||
share_count: note?.share_count ?? 0,
|
||
play_count: note?.view_count ?? 0,
|
||
share_url: note?.link || '',
|
||
}))
|
||
}
|
||
|
||
/**
|
||
* 格式化时间戳
|
||
*/
|
||
function formatTime(ts) {
|
||
if (!ts) return ''
|
||
const ms = ts > 1e12 ? ts : ts * 1000
|
||
return dayjs(ms).format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
|
||
/**
|
||
* 导出博主主页数据到 Excel（仅导出选中的行，最多10个）
|
||
*/
|
||
async function exportToExcel() {
|
||
if (!data.value || data.value.length === 0) {
|
||
message.warning('暂无数据可导出')
|
||
return
|
||
}
|
||
|
||
// 检查是否有选中的行
|
||
if (selectedRowKeys.value.length === 0) {
|
||
message.warning('请先选择要导出的行')
|
||
return
|
||
}
|
||
|
||
// 限制最多10个
|
||
if (selectedRowKeys.value.length > 10) {
|
||
message.warning('最多只能导出10条数据，请重新选择')
|
||
return
|
||
}
|
||
|
||
// 获取选中的行数据
|
||
const selectedRows = data.value.filter(item => selectedRowKeys.value.includes(item.id))
|
||
|
||
// 检查是否有未分析的行
|
||
const unanalyzedRows = selectedRows.filter(row => !row.transcriptions && !row.prompt)
|
||
|
||
if (unanalyzedRows.length > 0) {
|
||
// 有未分析的行，先分析
|
||
globalLoading.value = true
|
||
globalLoadingText.value = `正在分析 ${unanalyzedRows.length} 条数据...`
|
||
|
||
try {
|
||
// 逐个分析未分析的行
|
||
for (let i = 0; i < unanalyzedRows.length; i++) {
|
||
const row = unanalyzedRows[i]
|
||
globalLoadingText.value = `正在分析第 ${i + 1}/${unanalyzedRows.length} 条数据...`
|
||
await analyzeVideo(row)
|
||
}
|
||
|
||
globalLoadingText.value = '分析完成，正在导出...'
|
||
} catch (error) {
|
||
console.error('分析失败:', error)
|
||
message.error('部分数据分析失败，将导出已分析的数据')
|
||
}
|
||
} else {
|
||
globalLoading.value = true
|
||
globalLoadingText.value = '正在导出数据...'
|
||
}
|
||
|
||
try {
|
||
// 重新获取选中的行数据（可能已经更新）
|
||
const finalSelectedRows = data.value.filter(item => selectedRowKeys.value.includes(item.id))
|
||
|
||
// 导出数据
|
||
const result = exportBenchmarkDataToExcel(finalSelectedRows, {
|
||
platform: form.value.platform,
|
||
formatTime
|
||
})
|
||
|
||
if (result.success) {
|
||
message.success(result.message)
|
||
} else {
|
||
message.error(result.message)
|
||
}
|
||
} finally {
|
||
globalLoading.value = false
|
||
globalLoadingText.value = ''
|
||
}
|
||
}
|
||
|
||
// ==================== 会话存储相关 ====================
|
||
async function saveTableDataToSession() {
|
||
try {
|
||
// 过滤掉不需要持久化的临时字段（如 _analyzing）
|
||
const persistData = (data.value || []).map((item) => {
|
||
const rest = { ...(item || {}) }
|
||
delete rest._analyzing
|
||
return rest
|
||
})
|
||
await storage.setJSON(TABLE_DATA_STORAGE_KEY, persistData)
|
||
} catch (error) {
|
||
console.warn('保存表格数据到session失败:', error)
|
||
}
|
||
}
|
||
|
||
async function loadTableDataFromSession() {
|
||
try {
|
||
const savedData = await storage.getJSON(TABLE_DATA_STORAGE_KEY)
|
||
if (savedData && Array.isArray(savedData) && savedData.length > 0) {
|
||
// 强制恢复临时字段的初始状态
|
||
data.value = savedData.map((item) => ({ ...item, _analyzing: false }))
|
||
console.log('从session加载了表格数据:', savedData.length, '条')
|
||
}
|
||
} catch (error) {
|
||
console.warn('从session加载表格数据失败:', error)
|
||
}
|
||
}
|
||
|
||
// 列宽持久化能力已移除
|
||
|
||
// ==================== AI 相关工具函数 ====================
|
||
/**
|
||
* 根据转写内容构建 AI 提示
|
||
*/
|
||
function buildPromptFromTranscription(text) {
|
||
if (text && text.trim()) return `${text}`
|
||
return '没有可用的语音转写内容，请给出一份适合短视频脚本创作的通用高质量提示词模板（包含框架、角色、语气、风格、内容要点等）。'
|
||
}
|
||
|
||
/**
|
||
* 通用：SSE 流式发送并累计文本，支持打字机效果和平滑更新
|
||
* @deprecated 使用 streamChat 替代，此函数保留用于兼容
|
||
*/
|
||
async function sendPromptWithStream(conversationId, content, onChunk) {
|
||
return await streamChat({
|
||
conversationId,
|
||
content,
|
||
onUpdate: onChunk,
|
||
enableTypewriter: true,
|
||
typewriterSpeed: 10,
|
||
typewriterBatchSize: 2
|
||
})
|
||
}
|
||
|
||
// ==================== API 调用函数 ====================
|
||
/**
|
||
* 分析用户主页，获取视频列表
|
||
*/
|
||
async function analyzeUser() {
|
||
const sec_user_id = resolveId(form.value.url, {
|
||
queryKeys: ['user'],
|
||
pathPatterns: ['/user/:id'],
|
||
})
|
||
if (!sec_user_id) {
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
const isDouyin = form.value.platform === '抖音'
|
||
const req = await TikhubService.postTikHup({
|
||
type: InterfaceType.DOUYIN_WEB_USER_POST_VIDEOS,
|
||
methodType: MethodType.GET,
|
||
urlParams: {
|
||
sec_user_id,
|
||
max_cursor: 0,
|
||
type: 'tik-app',
|
||
sort_type: form.value.sort_type,
|
||
count: form.value.count || 20,
|
||
},
|
||
})
|
||
|
||
try {
|
||
const resp = await req
|
||
if (isDouyin) {
|
||
const awemeList = resp?.data?.aweme_list || []
|
||
console.log('抖音返回的原始数据:', awemeList[0])
|
||
data.value = mapFromDouyin(awemeList)
|
||
console.log('映射后的第一条数据:', data.value[0])
|
||
} else {
|
||
const notes = resp?.data?.notes || resp?.data?.data || []
|
||
data.value = mapFromXhs(notes)
|
||
}
|
||
await saveTableDataToSession()
|
||
message.success('分析完成')
|
||
} catch (err) {
|
||
console.error(err)
|
||
message.error('请求失败，请稍后重试')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 分析单个视频，获取提示词
|
||
*/
|
||
async function analyzeVideo(row) {
|
||
try {
|
||
if (row._analyzing) return
|
||
|
||
row._analyzing = true
|
||
|
||
// 1) 获取音频转写
|
||
message.info('正在获取音频转写...')
|
||
const transcriptions = await getVoiceText([row])
|
||
row.transcriptions = transcriptions.find(item => item.audio_url === row.audio_url)?.value
|
||
|
||
// 2) 检查是否有语音文案
|
||
if (!row.transcriptions || !row.transcriptions.trim()) {
|
||
message.warning('未提取到语音内容，请检查音频文件或稍后重试')
|
||
row._analyzing = false
|
||
return false
|
||
}
|
||
|
||
// 3) 创建对话
|
||
message.info('正在创建对话...')
|
||
const createPayload = { roleId: 20, role_id: 20 }
|
||
console.debug('createChatConversationMy payload:', createPayload)
|
||
const conversationResp = await ChatMessageApi.createChatConversationMy(createPayload)
|
||
|
||
let conversationId = null
|
||
if (conversationResp?.data) {
|
||
conversationId = typeof conversationResp.data === 'object' ? conversationResp.data.id : conversationResp.data
|
||
}
|
||
|
||
if (!conversationId) {
|
||
throw new Error('创建对话失败：未获取到 conversationId')
|
||
}
|
||
|
||
// 4) 基于转写构建提示，流式生成并实时写入 UI
|
||
message.info('正在生成提示词...')
|
||
const content = buildPromptFromTranscription(row.transcriptions)
|
||
const index = data.value.findIndex(item => item.id === row.id)
|
||
const aiContent = await sendPromptWithStream(conversationId, content, (fullText) => {
|
||
if (index !== -1) data.value[index].prompt = fullText
|
||
})
|
||
|
||
// 5) 兜底处理
|
||
const finalPrompt = aiContent || row.transcriptions || ''
|
||
if (index !== -1) data.value[index].prompt = finalPrompt
|
||
|
||
// 6) 分析完成后自动展开该行
|
||
const rowId = String(row.id) // 确保类型一致
|
||
if (!expandedRowKeys.value.includes(rowId)) {
|
||
expandedRowKeys.value.push(rowId)
|
||
}
|
||
|
||
// 7) 保存数据到 session
|
||
await saveTableDataToSession()
|
||
|
||
message.success('分析完成')
|
||
return true
|
||
} catch (error) {
|
||
console.error('分析视频失败:', error)
|
||
message.error('分析失败，请稍后重试')
|
||
return false
|
||
} finally {
|
||
row._analyzing = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 批量分析选中的视频
|
||
*/
|
||
async function batchAnalyze() {
|
||
if (selectedRowKeys.value.length === 0) {
|
||
message.warning('请先选择要分析的视频')
|
||
return
|
||
}
|
||
|
||
batchAnalyzeLoading.value = true
|
||
globalLoading.value = true
|
||
globalLoadingText.value = `正在批量分析 ${selectedRowKeys.value.length} 个视频...`
|
||
modalVisible.value = false
|
||
batchPrompt.value = ''
|
||
batchPromptEditMode.value = false
|
||
|
||
try {
|
||
// 1. 获取所有选中视频的语音转写
|
||
globalLoadingText.value = '正在获取中...'
|
||
const selectedRows = data.value.filter(item => selectedRowKeys.value.includes(item.id))
|
||
const transcriptions = await getVoiceText(selectedRows)
|
||
|
||
// 2. 收集所有转写内容
|
||
const allTexts = []
|
||
for (const id of selectedRowKeys.value) {
|
||
const row = data.value.find(item => item.id === id)
|
||
if (row && row.audio_url) {
|
||
const transcription = transcriptions.find(item => item.audio_url === row.audio_url)
|
||
if (transcription && transcription.value && transcription.value.trim()) {
|
||
allTexts.push({ id: row.id, url: row.audio_url, text: transcription.value })
|
||
row.transcriptions = transcription.value
|
||
}
|
||
}
|
||
}
|
||
|
||
// 3. 检查是否有可用的语音内容
|
||
if (allTexts.length === 0) {
|
||
message.warning('未提取到任何语音内容，请检查音频文件或稍后重试')
|
||
batchAnalyzeLoading.value = false
|
||
globalLoading.value = false
|
||
globalLoadingText.value = ''
|
||
return
|
||
}
|
||
|
||
await saveTableDataToSession()
|
||
const mergedText = allTexts.map(item => item.text).join('\n\n---\n\n')
|
||
|
||
// 4. 打开弹窗
|
||
modalVisible.value = true
|
||
batchAnalyzeLoading.value = false
|
||
globalLoading.value = false
|
||
globalLoadingText.value = ''
|
||
|
||
// 5. 在弹窗中流式生成 AI 内容
|
||
try {
|
||
batchPromptGenerating.value = true
|
||
const createPayload2 = { roleId: 20,}
|
||
console.debug('createChatConversationMy payload(batch):', createPayload2)
|
||
const conversationResp = await ChatMessageApi.createChatConversationMy(createPayload2)
|
||
|
||
let conversationId = null
|
||
if (conversationResp?.data) {
|
||
conversationId = typeof conversationResp.data === 'object' ? conversationResp.data.id : conversationResp.data
|
||
}
|
||
|
||
if (!conversationId) {
|
||
throw new Error('创建对话失败：未获取到 conversationId')
|
||
}
|
||
|
||
const aiContent = await streamChat({
|
||
conversationId,
|
||
content: mergedText,
|
||
onUpdate: (fullText) => {
|
||
batchPrompt.value = fullText
|
||
},
|
||
enableTypewriter: true,
|
||
typewriterSpeed: 10,
|
||
typewriterBatchSize: 2
|
||
})
|
||
|
||
// streamChat 已经通过 onUpdate 更新了 batchPrompt，这里确保最终值正确
|
||
if (aiContent && aiContent !== batchPrompt.value) {
|
||
batchPrompt.value = aiContent
|
||
}
|
||
|
||
message.success(`批量分析完成：已基于 ${allTexts.length} 个视频的文案生成综合提示词`)
|
||
} catch (aiError) {
|
||
console.error('AI生成失败:', aiError)
|
||
message.error('AI生成失败，请稍后重试')
|
||
} finally {
|
||
batchPromptGenerating.value = false
|
||
}
|
||
} catch (error) {
|
||
console.error('批量分析失败:', error)
|
||
message.error('批量分析失败，请稍后重试')
|
||
batchAnalyzeLoading.value = false
|
||
globalLoading.value = false
|
||
globalLoadingText.value = ''
|
||
} finally {
|
||
selectedRowKeys.value = []
|
||
}
|
||
}
|
||
|
||
// ==================== UI 交互函数 ====================
|
||
function onSelectChange(selectedKeys) {
|
||
selectedRowKeys.value = selectedKeys
|
||
}
|
||
|
||
|
||
|
||
function onView(row) {
|
||
analyzeVideo(row)
|
||
}
|
||
|
||
function toggleEditMode(row) {
|
||
if (editingRowId.value === row.id) {
|
||
editingRowId.value = null
|
||
} else {
|
||
editingRowId.value = row.id
|
||
}
|
||
}
|
||
|
||
async function resetForm() {
|
||
form.value = { platform: '抖音', url: '', count: 20, sort_type: 0 }
|
||
data.value = []
|
||
selectedRowKeys.value = []
|
||
expandedRowKeys.value = []
|
||
await storage.remove(TABLE_DATA_STORAGE_KEY)
|
||
}
|
||
|
||
// ==================== 创作相关函数 ====================
|
||
function onCreateContent(row) {
|
||
promptStore.setPrompt(row.prompt, row)
|
||
router.push('/content-style/copywriting')
|
||
}
|
||
|
||
function useBatchPrompt() {
|
||
if (!batchPrompt.value.trim()) {
|
||
message.warning('暂无批量生成的提示词')
|
||
return
|
||
}
|
||
|
||
promptStore.setPrompt(batchPrompt.value, { batch: true })
|
||
router.push('/content-style/copywriting')
|
||
}
|
||
|
||
// ==================== 提示词操作函数 ====================
|
||
async function savePrompt(row) {
|
||
if (!row || !row.id) return
|
||
try {
|
||
const key = `video_prompt_${row.id}`
|
||
await storage.setJSON(key, { id: row.id, prompt: row.prompt || '', ts: Date.now() })
|
||
|
||
const index = data.value.findIndex(item => item.id === row.id)
|
||
if (index !== -1) {
|
||
data.value[index].prompt = row.prompt
|
||
await saveTableDataToSession()
|
||
}
|
||
message.success('提示词已保存')
|
||
} catch (e) {
|
||
console.error(e)
|
||
message.error('保存失败，请稍后重试')
|
||
}
|
||
}
|
||
|
||
function copyPrompt(row) {
|
||
if (!row.prompt) {
|
||
message.warning('没有提示词可复制')
|
||
return
|
||
}
|
||
|
||
navigator.clipboard.writeText(row.prompt).then(() => {
|
||
message.success('提示词已复制到剪贴板')
|
||
}).catch(() => {
|
||
message.error('复制失败')
|
||
})
|
||
}
|
||
|
||
function copyBatchPrompt() {
|
||
if (!batchPrompt.value.trim()) {
|
||
message.warning('没有提示词可复制')
|
||
return
|
||
}
|
||
|
||
navigator.clipboard.writeText(batchPrompt.value).then(() => {
|
||
message.success('提示词已复制到剪贴板')
|
||
}).catch(() => {
|
||
message.error('复制失败')
|
||
})
|
||
}
|
||
|
||
|
||
// ==================== 生命周期 ====================
|
||
onMounted(async () => {
|
||
await loadTableDataFromSession()
|
||
})
|
||
|
||
defineOptions({ name: 'ContentStyleBenchmark' })
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page">
|
||
<a-spin :spinning="batchAnalyzeLoading" tip="批量分析中，请稍候..." wrapperClassName="batch-analyze-spin-wrapper">
|
||
<div class="stack">
|
||
|
||
<!-- 表单区域 -->
|
||
<section class="card">
|
||
<a-form :model="form" layout="vertical">
|
||
<a-form-item label="平台">
|
||
<a-radio-group v-model:value="form.platform" button-style="solid">
|
||
<a-radio-button value="抖音">抖音</a-radio-button>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
<a-form-item label="主页/视频链接">
|
||
<a-input
|
||
v-model:value="form.url"
|
||
placeholder="粘贴抖音主页或视频链接，或点击下方示例试一试"
|
||
allow-clear
|
||
size="large"
|
||
/>
|
||
|
||
</a-form-item>
|
||
<a-form-item label="最大数量（建议保持默认值20）">
|
||
<div class="slider-row">
|
||
<a-slider v-model:value="form.count" :min="1" :max="100" :tooltip-open="true" style="flex:1" />
|
||
<a-input-number v-model:value="form.count" :min="1" :max="100" style="width:96px; margin-left:12px;" />
|
||
</div>
|
||
<div class="form-hint">数量越大越全面，但分析时间更长；建议 20–30。</div>
|
||
</a-form-item>
|
||
<!-- <a-form-item label="排序类型">
|
||
<a-radio-group v-model:value="form.sort_type">
|
||
<a-radio :value="0">最新</a-radio>
|
||
<a-radio :value="1">热门</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item> -->
|
||
<a-space>
|
||
<a-button type="primary" :loading="loading" @click="analyzeUser">
|
||
{{ loading ? '分析中…' : '开始分析' }}
|
||
</a-button>
|
||
<a-button @click="resetForm">清空</a-button>
|
||
</a-space>
|
||
</a-form>
|
||
</section>
|
||
|
||
<!-- 表格区域 -->
|
||
<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="exportToExcel"
|
||
: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" :loading="batchAnalyzeLoading" @click="batchAnalyze">
|
||
批量分析 ({{ selectedRowKeys.length }})
|
||
</a-button>
|
||
</a-space>
|
||
</div>
|
||
<a-table
|
||
:dataSource="data"
|
||
:columns="columns"
|
||
:pagination="false"
|
||
:row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
|
||
v-model:expandedRowKeys="expandedRowKeys"
|
||
:expandable="{
|
||
expandRowByClick: false
|
||
}"
|
||
:rowKey="(record) => String(record.id)"
|
||
:loading="loading"
|
||
class="benchmark-table">
|
||
<template #expandedRowRender="{ record }">
|
||
<div class="expanded-content">
|
||
<!-- 未分析的行显示提示 -->
|
||
<div v-if="!record.transcriptions && !record.prompt" class="no-analysis-tip">
|
||
<a-empty description="该视频尚未分析">
|
||
<template #image>
|
||
<svg 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"/>
|
||
</svg>
|
||
</template>
|
||
<a-button type="primary" @click="onView(record)" :loading="record._analyzing">
|
||
{{ record._analyzing ? '分析中…' : '开始分析' }}
|
||
</a-button>
|
||
</a-empty>
|
||
</div>
|
||
|
||
<!-- 已分析的行显示内容 -->
|
||
<div v-else class="two-col">
|
||
<!-- 左侧：原配音内容 -->
|
||
<section class="col left-col">
|
||
<div class="sub-title">原配音</div>
|
||
<div class="transcript-box" v-if="record.transcriptions">
|
||
<div class="transcript-content">{{ record.transcriptions }}</div>
|
||
</div>
|
||
<div v-else class="no-transcript">暂无转写文本，请先点击"分析"获取</div>
|
||
</section>
|
||
|
||
<!-- 右侧：提示词（可编辑） -->
|
||
<section class="col right-col">
|
||
<div class="sub-title">
|
||
提示词（可编辑）
|
||
<a-button
|
||
v-if="editingRowId !== record.id"
|
||
size="small"
|
||
type="text"
|
||
class="edit-hint"
|
||
:title="'编辑'"
|
||
@click="toggleEditMode(record)">
|
||
<template #icon>
|
||
<EditOutlined />
|
||
</template>
|
||
</a-button>
|
||
</div>
|
||
|
||
<div v-if="editingRowId !== record.id" class="prompt-display-wrapper">
|
||
<ChatMessageRenderer
|
||
:content="record.prompt || ''"
|
||
:is-streaming="record._analyzing || false"
|
||
/>
|
||
<div v-if="!record.prompt" class="no-prompt">暂无提示词</div>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<a-textarea v-model:value="record.prompt" :rows="12" placeholder="这里编辑/完善提示词..." />
|
||
</div>
|
||
|
||
<div class="right-actions">
|
||
<a-space>
|
||
<a-button v-if="editingRowId === record.id" type="primary" @click="savePrompt(record); toggleEditMode(record)">
|
||
保存提示词
|
||
</a-button>
|
||
<a-button
|
||
v-if="editingRowId !== record.id"
|
||
size="small"
|
||
type="text"
|
||
class="copy-btn"
|
||
:title="'复制'"
|
||
@click="copyPrompt(record)">
|
||
<template #icon>
|
||
<CopyOutlined />
|
||
</template>
|
||
</a-button>
|
||
<a-button
|
||
type="dashed"
|
||
:disabled="!record.prompt || record._analyzing"
|
||
@click="onCreateContent(record)">基于提示词去创作</a-button>
|
||
</a-space>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</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="onView(record)">
|
||
{{ record._analyzing ? '分析中…' : '分析' }}
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</section>
|
||
|
||
<!-- 空态显示 -->
|
||
<section class="card results-card empty-state" v-if="data.length === 0 && !loading">
|
||
<a-empty description="暂无数据，请点击开始分析">
|
||
<template #image>
|
||
<svg 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>
|
||
</template>
|
||
</a-empty>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 批量分析结果弹窗 -->
|
||
<a-modal
|
||
v-model:open="modalVisible"
|
||
title="综合分析结果"
|
||
:width="800"
|
||
:maskClosable="false"
|
||
:keyboard="false">
|
||
<div class="batch-prompt-modal">
|
||
<div v-if="!batchPromptEditMode" class="batch-prompt-display">
|
||
<ChatMessageRenderer
|
||
:content="batchPrompt"
|
||
:is-streaming="batchPromptGenerating"
|
||
/>
|
||
</div>
|
||
<a-textarea
|
||
v-else
|
||
v-model:value="batchPrompt"
|
||
:rows="15"
|
||
placeholder="内容将在这里显示..." />
|
||
</div>
|
||
|
||
<template #footer>
|
||
<a-space>
|
||
<a-button size="small" :title="batchPromptEditMode ? '取消编辑' : '编辑'" @click="batchPromptEditMode = !batchPromptEditMode">
|
||
<template #icon>
|
||
<EditOutlined />
|
||
</template>
|
||
</a-button>
|
||
<a-button size="small" title="复制" @click="copyBatchPrompt">
|
||
<template #icon>
|
||
<CopyOutlined />
|
||
</template>
|
||
</a-button>
|
||
<a-button @click="modalVisible = false">取消</a-button>
|
||
<a-button
|
||
type="primary"
|
||
:disabled="batchPromptGenerating || !batchPrompt.trim()"
|
||
@click="useBatchPrompt">去创作</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-modal>
|
||
</a-spin>
|
||
|
||
<!-- 全局 Loading 遮罩 -->
|
||
<GlobalLoading :visible="globalLoading" :text="globalLoadingText" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 页面垂直堆叠间距 */
|
||
.stack>*+* {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* 稳定滚动条，避免内容高度变化导致页面左右抖动 */
|
||
.page {
|
||
scrollbar-gutter: stable both-edges;
|
||
}
|
||
|
||
/* 卡片样式（不依赖 tailwind） */
|
||
.card {
|
||
background: var(--color-surface);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
box-shadow: var(--shadow-inset-card);
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
/* 顶部引导 */
|
||
.guide {
|
||
background: rgba(26,102,224,0.10);
|
||
border: 1px solid rgba(26,102,224,0.35);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
}
|
||
.guide-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 8px;
|
||
}
|
||
.guide-step {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.step-badge {
|
||
width: 20px;
|
||
height: 20px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--color-blue);
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
font-size: 12px;
|
||
box-shadow: 0 0 0 2px rgba(26,102,224,0.2);
|
||
}
|
||
|
||
/* 结果区预留最小高度，切换视图时避免高度突变 */
|
||
.results-card {
|
||
min-height: 420px;
|
||
}
|
||
|
||
/* 空态卡片样式 */
|
||
.empty-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 420px;
|
||
}
|
||
|
||
.empty-state :deep(.ant-empty) {
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.empty-state :deep(.ant-empty-description) {
|
||
color: var(--color-text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 两列网格 */
|
||
.grid-2 {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 标题文本（次要说明） */
|
||
.section-title {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* 区域头部布局 */
|
||
.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;
|
||
}
|
||
|
||
/* 批量分析按钮更明显 */
|
||
.batch-btn {
|
||
font-weight: 600;
|
||
}
|
||
.batch-btn:hover {
|
||
box-shadow: var(--glow-primary);
|
||
filter: brightness(1.03);
|
||
}
|
||
|
||
/* 滑块行布局 */
|
||
.slider-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 表单辅助说明与动作 */
|
||
.form-hint {
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.form-actions {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* 输入框在暗色下的可见度增强 */
|
||
:deep(.ant-input), :deep(.ant-input-affix-wrapper), :deep(textarea) {
|
||
background: #0f0f0f;
|
||
border-color: var(--color-border);
|
||
}
|
||
:deep(.ant-input:hover), :deep(.ant-input-affix-wrapper:hover), :deep(textarea:hover) {
|
||
border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border));
|
||
}
|
||
:deep(.ant-input:focus), :deep(.ant-input-affix-wrapper-focused), :deep(textarea:focus) {
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
|
||
}
|
||
|
||
/* 滑块在暗色下的可见性增强（仅本页） */
|
||
:deep(.ant-slider) {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
:deep(.ant-slider-rail) {
|
||
background-color: #252525;
|
||
height: 4px;
|
||
}
|
||
|
||
:deep(.ant-slider-track) {
|
||
background-color: var(--color-primary);
|
||
height: 4px;
|
||
}
|
||
|
||
:deep(.ant-slider:hover .ant-slider-track) {
|
||
background-color: var(--color-primary);
|
||
}
|
||
|
||
:deep(.ant-slider-handle::after) {
|
||
box-shadow: 0 0 0 2px var(--color-primary);
|
||
}
|
||
|
||
:deep(.ant-slider-handle:focus-visible::after),
|
||
:deep(.ant-slider-handle:hover::after),
|
||
:deep(.ant-slider-handle:active::after) {
|
||
box-shadow: 0 0 0 3px var(--color-primary);
|
||
}
|
||
|
||
/* 分段控件蓝色选中风格 */
|
||
.seg-blue :deep(.ant-segmented-item) {
|
||
color: #000;
|
||
}
|
||
|
||
.seg-blue :deep(.ant-segmented-item-selected) {
|
||
background-color: #1677ff;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 展开行内容样式 */
|
||
.expanded-content {
|
||
padding: 16px;
|
||
background: #161616;
|
||
border-radius: 6px;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
/* 左右两列布局 */
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.col {
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.left-col .transcript-content {
|
||
white-space: pre-wrap;
|
||
line-height: 1.6;
|
||
color: var(--color-text-secondary);
|
||
background: #0d0d0d;
|
||
border: 1px dashed var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.sub-title-2 {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--color-text-secondary);
|
||
margin: 12px 0 6px 0;
|
||
}
|
||
|
||
.no-transcript {
|
||
font-size: 12px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.prompt-display-wrapper {
|
||
min-height: 200px;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
background: #0d0d0d;
|
||
border: 1px dashed var(--color-border);
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.prompt-display {
|
||
color: var(--color-text);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.prompt-display :deep(h1) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.prompt-display :deep(h2) {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 16px 0 8px 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.prompt-display :deep(h3) {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin: 12px 0 6px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.prompt-display :deep(p) {
|
||
margin: 8px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.prompt-display :deep(ul) {
|
||
margin: 8px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.prompt-display :deep(ol) {
|
||
margin: 8px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.prompt-display :deep(li) {
|
||
margin: 4px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.prompt-display :deep(strong) {
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.prompt-display :deep(code) {
|
||
background: #1a1a1a;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
color: #e11d48;
|
||
}
|
||
|
||
.prompt-display :deep(pre) {
|
||
background: #1a1a1a;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.prompt-display :deep(pre code) {
|
||
background: transparent;
|
||
padding: 0;
|
||
}
|
||
|
||
.prompt-display :deep(blockquote) {
|
||
border-left: 3px solid var(--color-primary);
|
||
padding-left: 12px;
|
||
margin: 8px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.copy-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: var(--color-primary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.copy-btn svg {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.edit-hint {
|
||
margin-left: 8px;
|
||
color: var(--color-text-secondary);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.edit-hint:hover {
|
||
color: var(--color-primary);
|
||
background: rgba(22, 119, 255, 0.1);
|
||
}
|
||
|
||
.edit-hint svg {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.right-actions {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.preview-box {
|
||
margin-top: 12px;
|
||
border-top: 1px solid var(--color-border);
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.no-prompt {
|
||
padding: 16px;
|
||
text-align: center;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.prompt-display {
|
||
margin-bottom: 16px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.action-bar {
|
||
text-align: right;
|
||
border-top: 1px solid var(--color-border);
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.expanded-content :deep(h1) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.expanded-content :deep(h2) {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 16px 0 8px 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.expanded-content :deep(h3) {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin: 12px 0 6px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.expanded-content :deep(p) {
|
||
margin: 8px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.expanded-content :deep(ul) {
|
||
margin: 8px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.expanded-content :deep(ol) {
|
||
margin: 8px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.expanded-content :deep(li) {
|
||
margin: 4px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.expanded-content :deep(strong) {
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.expanded-content :deep(code) {
|
||
background: #1a1a1a;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
color: #e11d48;
|
||
}
|
||
|
||
/* Modal 中的 textarea 样式 */
|
||
:deep(.ant-modal-body .ant-input) {
|
||
font-family: monospace;
|
||
}
|
||
|
||
/* 链接按钮样式 */
|
||
.link-btn {
|
||
color: #1677ff;
|
||
text-decoration: none;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.link-btn:hover {
|
||
opacity: 0.8;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 批量提示词弹窗样式 */
|
||
.batch-prompt-modal {
|
||
min-height: 200px;
|
||
}
|
||
|
||
.batch-prompt-display {
|
||
min-height: 300px;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
padding: 12px;
|
||
background: #0d0d0d;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.batch-prompt-display :deep(h1) {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 12px 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.batch-prompt-display :deep(h2) {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 16px 0 8px 0;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.batch-prompt-display :deep(h3) {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin: 12px 0 6px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.batch-prompt-display :deep(p) {
|
||
margin: 8px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.batch-prompt-display :deep(ul),
|
||
.batch-prompt-display :deep(ol) {
|
||
margin: 8px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.batch-prompt-display :deep(li) {
|
||
margin: 4px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.batch-prompt-display :deep(strong) {
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.batch-prompt-display :deep(code) {
|
||
background: #1a1a1a;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 12px;
|
||
color: #e11d48;
|
||
}
|
||
|
||
.batch-prompt-display :deep(pre) {
|
||
background: #1a1a1a;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.batch-prompt-display :deep(pre code) {
|
||
background: transparent;
|
||
padding: 0;
|
||
}
|
||
|
||
.batch-prompt-display :deep(blockquote) {
|
||
border-left: 3px solid var(--color-primary);
|
||
padding-left: 12px;
|
||
margin: 8px 0;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.batch-prompt-actions {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.batch-prompt-actions .ant-space {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 全屏 Spin 遮罩样式 */
|
||
:deep(.batch-analyze-spin-wrapper) {
|
||
width: 100%;
|
||
min-height: calc(100vh - 120px);
|
||
}
|
||
|
||
:deep(.batch-analyze-spin-wrapper .ant-spin-spinning) {
|
||
max-height: none;
|
||
}
|
||
|
||
/* 展开列样式优化 */
|
||
.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;
|
||
}
|
||
|
||
/* 未分析提示样式 */
|
||
.no-analysis-tip {
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.no-analysis-tip :deep(.ant-empty) {
|
||
margin: 0;
|
||
}
|
||
|
||
.no-analysis-tip :deep(.ant-empty-description) {
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 16px;
|
||
}
|
||
</style>
|