1371 lines
38 KiB
Vue
1371 lines
38 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, computed } from 'vue'
|
|||
|
|
import { message } from 'ant-design-vue'
|
|||
|
|
import { EditOutlined, CopyOutlined } from '@ant-design/icons-vue'
|
|||
|
|
import { resolveId } from '@/utils/url'
|
|||
|
|
import { usePromptStore } from '@/stores/prompt'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
import { renderMarkdown } from '@/utils/markdown'
|
|||
|
|
|
|||
|
|
// ==================== 初始化 ====================
|
|||
|
|
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 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])
|
|||
|
|
|
|||
|
|
// ==================== 计算属性 ====================
|
|||
|
|
const batchPromptRendered = computed(() => {
|
|||
|
|
if (!batchPrompt.value) return '综合提示词将在这里显示...'
|
|||
|
|
return renderMarkdown(batchPrompt.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ==================== 数据处理函数 ====================
|
|||
|
|
/**
|
|||
|
|
* 映射抖音数据结构
|
|||
|
|
*/
|
|||
|
|
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')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==================== 会话存储相关 ====================
|
|||
|
|
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 '没有可用的语音转写内容，请给出一份适合短视频脚本创作的通用高质量提示词模板（包含框架、角色、语气、风格、内容要点等）。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 节流函数，优化流式渲染性能
|
|||
|
|
*/
|
|||
|
|
function createThrottledUpdate(updateFn, delay = 100) {
|
|||
|
|
let lastTime = 0
|
|||
|
|
let timeout = null
|
|||
|
|
|
|||
|
|
return (value) => {
|
|||
|
|
const now = Date.now()
|
|||
|
|
|
|||
|
|
if (now - lastTime >= delay) {
|
|||
|
|
lastTime = now
|
|||
|
|
updateFn(value)
|
|||
|
|
} else {
|
|||
|
|
clearTimeout(timeout)
|
|||
|
|
timeout = setTimeout(() => {
|
|||
|
|
lastTime = Date.now()
|
|||
|
|
updateFn(value)
|
|||
|
|
}, delay - (now - lastTime))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 通用：SSE 流式发送并累计文本，支持回调实时更新
|
|||
|
|
*/
|
|||
|
|
async function sendPromptWithStream(conversationId, content, onChunk) {
|
|||
|
|
const ctrl = new AbortController()
|
|||
|
|
let fullText = ''
|
|||
|
|
let errorOccurred = false
|
|||
|
|
let isResolved = false
|
|||
|
|
|
|||
|
|
await new Promise((resolve, reject) => {
|
|||
|
|
const timeout = setTimeout(() => {
|
|||
|
|
if (!isResolved) {
|
|||
|
|
ctrl.abort()
|
|||
|
|
reject(new Error('请求超时，请稍后重试'))
|
|||
|
|
}
|
|||
|
|
}, 120000)
|
|||
|
|
|
|||
|
|
ChatMessageApi.sendChatMessageStream({
|
|||
|
|
conversationId,
|
|||
|
|
content,
|
|||
|
|
ctrl,
|
|||
|
|
enableContext: true,
|
|||
|
|
enableWebSearch: false,
|
|||
|
|
onMessage: (event) => {
|
|||
|
|
try {
|
|||
|
|
if (errorOccurred) return
|
|||
|
|
|
|||
|
|
const dataStr = event?.data || ''
|
|||
|
|
if (!dataStr) return
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const { code, data: responseData, msg } = JSON.parse(dataStr)
|
|||
|
|
if (code !== 0) {
|
|||
|
|
message.warning(`对话异常! ${msg}`)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (responseData.receive.content === '' && !responseData.receive.reasoningContent) return
|
|||
|
|
|
|||
|
|
const piece = responseData.receive.content || responseData.receive.reasoningContent || ''
|
|||
|
|
if (piece) {
|
|||
|
|
fullText += piece
|
|||
|
|
if (typeof onChunk === 'function') onChunk(fullText)
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
try {
|
|||
|
|
const obj = JSON.parse(dataStr)
|
|||
|
|
const piece = obj?.content || obj?.data || obj?.text || ''
|
|||
|
|
if (piece) {
|
|||
|
|
fullText += piece
|
|||
|
|
if (typeof onChunk === 'function') onChunk(fullText)
|
|||
|
|
}
|
|||
|
|
} catch (parseErr) {
|
|||
|
|
console.warn('解析流数据异常:', parseErr)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('解析流数据异常:', e)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onError: (err) => {
|
|||
|
|
clearTimeout(timeout)
|
|||
|
|
if (!isResolved) {
|
|||
|
|
errorOccurred = true
|
|||
|
|
ctrl.abort()
|
|||
|
|
const errorMsg = err?.message || '网络请求失败'
|
|||
|
|
console.error('SSE请求错误:', err)
|
|||
|
|
message.error(errorMsg)
|
|||
|
|
reject(new Error(errorMsg))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onClose: () => {
|
|||
|
|
clearTimeout(timeout)
|
|||
|
|
if (!isResolved) {
|
|||
|
|
isResolved = true
|
|||
|
|
resolve()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
attachmentUrls: []
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return fullText.trim()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==================== 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) 分析完成后自动展开该行
|
|||
|
|
if (!expandedRowKeys.value.includes(row.id)) {
|
|||
|
|
expandedRowKeys.value.push(row.id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 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
|
|||
|
|
modalVisible.value = false
|
|||
|
|
batchPrompt.value = ''
|
|||
|
|
batchPromptEditMode.value = false
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 1. 获取所有选中视频的语音转写
|
|||
|
|
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
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await saveTableDataToSession()
|
|||
|
|
const mergedText = allTexts.map(item => item.text).join('\n\n---\n\n')
|
|||
|
|
|
|||
|
|
// 4. 打开弹窗
|
|||
|
|
modalVisible.value = true
|
|||
|
|
batchAnalyzeLoading.value = false
|
|||
|
|
|
|||
|
|
// 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 throttledUpdate = createThrottledUpdate((fullText) => {
|
|||
|
|
batchPrompt.value = fullText
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const aiContent = await sendPromptWithStream(conversationId, mergedText, throttledUpdate)
|
|||
|
|
|
|||
|
|
const finalPrompt = aiContent || mergedText || ''
|
|||
|
|
batchPrompt.value = finalPrompt
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
} finally {
|
|||
|
|
selectedRowKeys.value = []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ==================== UI 交互函数 ====================
|
|||
|
|
function onSelectChange(selectedKeys) {
|
|||
|
|
selectedRowKeys.value = selectedKeys
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleExpand(record, expanded) {
|
|||
|
|
const key = record.id
|
|||
|
|
if (expanded) {
|
|||
|
|
if (!expandedRowKeys.value.includes(key)) {
|
|||
|
|
expandedRowKeys.value.push(key)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
const index = expandedRowKeys.value.indexOf(key)
|
|||
|
|
if (index > -1) {
|
|||
|
|
expandedRowKeys.value.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
<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 }"
|
|||
|
|
:expandedRowKeys="expandedRowKeys"
|
|||
|
|
@expand="(record, expanded) => handleExpand(record, expanded)"
|
|||
|
|
rowKey="id"
|
|||
|
|
:loading="loading">
|
|||
|
|
<template #expandedRowRender="{ record }">
|
|||
|
|
<div class="expanded-content">
|
|||
|
|
<div 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">
|
|||
|
|
<div class="prompt-display" v-html="renderMarkdown(record.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 / 10000).toFixed(1) + 'w' : '0' }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.key === 'comment_count'">
|
|||
|
|
{{ record.comment_count ? (record.comment_count / 10000).toFixed(1) + 'w' : '0' }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.key === 'share_count'">
|
|||
|
|
{{ record.share_count ? (record.share_count / 10000).toFixed(1) + 'w' : '0' }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else-if="column.key === 'collect_count'">
|
|||
|
|
{{ record.collect_count ? (record.collect_count / 10000).toFixed(1) + 'w' : '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" v-html="batchPromptRendered"></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>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 批量分析按钮更明显 */
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
</style>
|