205 lines
10 KiB
HTML
205 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>抖音知识库 - 驿来特AI智能大脑</title>
|
||
<link rel="stylesheet" href="css/element-plus.index.css">
|
||
<link rel="stylesheet" href="css/app.css">
|
||
<link rel="stylesheet" href="css/douyin.css">
|
||
<style>
|
||
body {
|
||
background-color: #0f172a;
|
||
color: #f1f5f9;
|
||
margin: 0;
|
||
padding: 20px;
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
}
|
||
.home-link {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 20px;
|
||
color: #94a3b8;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
transition: color 0.2s;
|
||
z-index: 10;
|
||
}
|
||
.home-link:hover {
|
||
color: #f1f5f9;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<a href="index.html" class="home-link">
|
||
← 返回首页
|
||
</a>
|
||
|
||
<!-- Summary Dialog -->
|
||
<el-dialog v-model="showSummaryDialog" title="💡 知识精华总结" width="60%" :before-close="handleSummaryClose">
|
||
<div class="dialog-content" style="max-height: 60vh; overflow-y: auto; padding: 10px;">
|
||
<div v-if="summaryLoading && !summaryText" style="text-align: center; padding: 20px; color: #6b7280;">
|
||
<p>⚡ AI正在阅读您的知识库并提炼精华，请稍候...</p>
|
||
</div>
|
||
<div class="markdown-body" v-html="renderedSummary"></div>
|
||
<span v-if="summaryLoading && summaryText" class="cursor-blink">|</span>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="handleSummaryClose">关闭</el-button>
|
||
<el-button type="primary" @click="fetchDouyinSummary" :loading="summaryLoading">
|
||
{{ summaryText ? '重新生成' : '开始总结' }}
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<div class="douyin-container" style="padding-top: 40px; max-width: 1200px; margin: 0 auto;">
|
||
<div class="douyin-header" style="text-align: center; margin-bottom: 40px;">
|
||
<h1 style="font-size: 2.5rem; font-weight: bold; color: #f1f5f9; margin-bottom: 0.5rem;">
|
||
抖音知识库
|
||
<button class="btn-primary" @click="fetchDouyinRecords" style="font-size: 1rem; padding: 4px 12px; margin-left: 12px; vertical-align: middle;">
|
||
🔄 刷新列表
|
||
</button>
|
||
<button class="btn-primary" @click="openSummaryDialog" style="font-size: 1rem; padding: 4px 12px; margin-left: 12px; vertical-align: middle; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); border: none;">
|
||
✨ 提取知识精华
|
||
</button>
|
||
</h1>
|
||
<p style="color: #94a3b8;">自动解析视频、提取文案，构建企业充电知识图谱</p>
|
||
</div>
|
||
|
||
<!-- Input Section -->
|
||
<el-card class="box-card" style="margin-bottom: 32px; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); color: #fff;">
|
||
<template #header>
|
||
<div class="card-header" style="color: #f1f5f9;">
|
||
<span style="font-weight: bold; font-size: 1.2rem;">粘贴抖音分享链接</span>
|
||
</div>
|
||
</template>
|
||
<el-input
|
||
v-model="shareText"
|
||
:rows="6"
|
||
type="textarea"
|
||
placeholder="支持批量粘贴！
|
||
例如：
|
||
1.23 复制打开抖音，看看【...】 https://v.douyin.com/...
|
||
7.89 复制打开抖音，看看【...】 https://v.douyin.com/..."
|
||
style="margin-bottom: 20px; font-size: 16px;"
|
||
></el-input>
|
||
<div style="display: flex; justify-content: flex-end;">
|
||
<el-button type="primary" @click="startParsing" :loading="douyinLoading" :disabled="!shareText.trim()">
|
||
{{ douyinLoading ? '解析处理中...' : '开始解析' }}
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- Records List -->
|
||
<div class="records-list">
|
||
<el-card v-for="record in douyinRecords" :key="record.id" style="margin-bottom: 20px; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); color: #fff;" :body-style="{ padding: '0px' }">
|
||
<div style="display: flex; border-left: 4px solid;" :style="{borderColor: statusColor(record.status)}">
|
||
<div style="padding: 24px; flex: 1;">
|
||
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px;">
|
||
<div>
|
||
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
||
<el-tag :type="statusType(record.status)" effect="dark" size="small" style="margin-right: 8px;">
|
||
{{ record.status }}
|
||
</el-tag>
|
||
<span style="color: #94a3b8; font-size: 12px;">
|
||
{{ formatDate(record.create_time) }}
|
||
</span>
|
||
</div>
|
||
<h3 style="font-size: 1.25rem; font-weight: bold; color: #f1f5f9; line-height: 1.4; margin: 0 0 8px 0;">
|
||
{{ record.video_name || '处理中...' }}
|
||
</h3>
|
||
<a v-if="record.obs_url" :href="record.obs_url" target="_blank" style="color: #60a5fa; font-size: 14px; margin-top: 4px; display: inline-block; text-decoration: none;">
|
||
📺 点击观看视频
|
||
</a>
|
||
</div>
|
||
<el-button type="danger" circle @click="deleteRecord(record.id)" plain size="small">
|
||
<span style="font-size: 12px;">Del</span>
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- Error Message -->
|
||
<div v-if="record.status === 'FAILED' && record.error_msg" style="margin-top: 12px; color: #fca5a5; font-size: 13px; background: rgba(127, 29, 29, 0.3); padding: 8px; border-radius: 4px; word-break: break-all;">
|
||
<strong>Error:</strong> {{ record.error_msg }}
|
||
</div>
|
||
|
||
<!-- Transcript -->
|
||
<div v-if="record.transcript" style="background-color: rgba(15, 23, 42, 0.5); border-radius: 8px; padding: 16px; margin-top: 16px;">
|
||
<h4 style="font-size: 14px; font-weight: 600; color: #94a3b8; margin-bottom: 8px; text-transform: uppercase;">视频文案</h4>
|
||
<p style="color: #cbd5e1; white-space: pre-wrap; font-size: 14px; line-height: 1.6; margin: 0;" :style="record.expanded ? {} : {display: '-webkit-box', '-webkit-line-clamp': '3', '-webkit-box-orient': 'vertical', overflow: 'hidden'}">
|
||
{{ record.transcript }}
|
||
</p>
|
||
<el-button type="primary" link @click="record.expanded = !record.expanded" style="margin-top: 8px; font-size: 12px;">
|
||
{{ record.expanded ? '收起' : '展开全文' }}
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- Original Text -->
|
||
<div style="margin-top: 16px;">
|
||
<div style="cursor: pointer; color: #64748b; font-size: 12px;" @click="record.showOriginal = !record.showOriginal">
|
||
{{ record.showOriginal ? '收起原始链接' : '查看原始链接信息' }}
|
||
</div>
|
||
<div v-if="record.showOriginal" style="color: #94a3b8; font-size: 12px; background: rgba(15, 23, 42, 0.5); padding: 8px; border-radius: 4px; margin-top: 4px;">
|
||
{{ record.original_text }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<div v-if="douyinRecords.length === 0" style="text-align: center; color: #64748b; padding: 40px;">
|
||
<p>暂无记录，请粘贴链接开始解析</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/vue.global.js"></script>
|
||
<script src="js/element-plus.index.full.js"></script>
|
||
<script src="js/element-plus.zh-cn.min.js"></script>
|
||
<script src="js/axios.min.js"></script>
|
||
<!-- Markdown & LaTeX Support -->
|
||
<link rel="stylesheet" href="https://unpkg.com/github-markdown-css@5.5.1/github-markdown-dark.css">
|
||
<link rel="stylesheet" href="https://unpkg.com/katex@0.16.9/dist/katex.min.css">
|
||
<script src="https://unpkg.com/katex@0.16.9/dist/katex.min.js"></script>
|
||
<script src="https://unpkg.com/marked@12.0.0/lib/marked.umd.js"></script>
|
||
<style>
|
||
/* 适配对话框中的 Markdown 样式 */
|
||
.markdown-body {
|
||
box-sizing: border-box;
|
||
min-width: 200px;
|
||
max-width: 980px;
|
||
margin: 0 auto;
|
||
padding: 15px;
|
||
background-color: transparent !important;
|
||
color: #cbd5e1 !important;
|
||
}
|
||
.el-dialog {
|
||
background-color: #1e293b !important;
|
||
border: 1px solid #334155;
|
||
}
|
||
.el-dialog__title {
|
||
color: #f1f5f9 !important;
|
||
}
|
||
.el-dialog__body {
|
||
color: #cbd5e1 !important;
|
||
}
|
||
.cursor-blink {
|
||
color: #3b82f6;
|
||
font-weight: bold;
|
||
animation: blink 1s step-end infinite;
|
||
}
|
||
@keyframes blink {
|
||
from, to { opacity: 1; }
|
||
50% { opacity: 0; }
|
||
}
|
||
</style>
|
||
<script src="js/douyin.js"></script>
|
||
</body>
|
||
</html>
|