'commit'

2026-01-20 21:43:54 +08:00
parent 66cb0faeff
commit 55e88777d9
32 changed files with 1112 additions and 60 deletions
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -497,7 +497,18 @@ body {
    margin-top: 16px;
    display: flex;
    justify-content: center;
-    gap: 10px;
+}
+
+/* Douyin Container */
+.douyin-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+    max-width: 95%;
+    margin: 0 auto;
+    width: 100%;
+    scrollbar-width: thin;
+}    gap: 10px;
    flex-wrap: wrap;
 }

@@ -813,29 +824,7 @@ body {
  color: #fff;
 }

-.ad-close {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  color: #fff;
-  font-size: 20px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}

-.ad-close:hover {
-  background: rgba(239, 68, 68, 0.8);
-  transform: rotate(90deg);
-}

 .ad-header h2 {
  margin: 0 0 30px 0;
@@ -906,14 +895,24 @@ body {
  padding-top: 20px;
 }

-.auto-close-text {
-  font-size: 13px;
-  color: #94a3b8;
-  font-family: monospace;
-  background: rgba(0, 0, 0, 0.2);
+.ad-close-btn {
+  font-size: 14px;
+  color: #cbd5e1;
+  background: rgba(255, 255, 255, 0.1);
  display: inline-block;
-  padding: 4px 12px;
+  padding: 8px 24px;
  border-radius: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.ad-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: translateY(-1px);
 }

 /* Animations */
--- a/static/index.html
+++ b/static/index.html
@@ -17,7 +17,6 @@
  <transition name="fade">
    <div class="ad-overlay" v-if="showAd">
      <div class="ad-content">
-        <button class="ad-close" @click="closeAd">×</button>
        <div class="ad-header">
          <h2>⚡ 系统特性介绍</h2>
        </div>
@@ -46,6 +45,12 @@
            </div>
            <p>新增 <strong>智能海报生成</strong> 功能，未来将结合业务数据，一键生成精美的数据战报与营销海报</p>
          </div>
+          <div class="ad-item">
+            <div class="ad-icon-wrapper">
+                <span class="ad-icon">🎥</span>
+            </div>
+            <p>新增 <strong>抖音知识库</strong>：支持视频解析、知识获取与总结、博主专栏订阅，自动生成 <strong>充电企业知识日报</strong>，助力企业构建专属知识库</p>
+          </div>
          <div class="ad-item">
            <div class="ad-icon-wrapper">
                <span class="ad-icon">🎯</span>
@@ -60,7 +65,9 @@
          </div>
        </div>
        <div class="ad-footer">
-          <p class="auto-close-text">{{ adCountdown }} 秒后自动关闭</p>
+          <button class="ad-close-btn" @click="closeAd">
+             关闭 ({{ adCountdown }}s)
+          </button>
        </div>
      </div>
    </div>
@@ -72,6 +79,7 @@
    <div class="nav-tabs">
        <button class="nav-tab" :class="{active: activeTab==='dashboard'}" @click="activeTab='dashboard'">分时电价分析</button>
        <button class="nav-tab" :class="{active: activeTab==='degree'}" @click="activeTab='degree'">智能数据查询</button>
+        <button class="nav-tab" :class="{active: activeTab==='douyin'}" @click="activeTab='douyin'">抖音知识库</button>
        <a href="HaiBao/index.html" class="nav-tab" style="text-decoration: none; display: inline-block;">智能海报生成</a>
    </div>

@@ -123,7 +131,13 @@
    </div>
    
    <div class="right-panel">
-      <div class="ai-title">智能决策分析助手</div>
+      <div class="ai-title">
+        智能决策分析助手
+        <button class="btn-primary" @click="startAiAnalysis" :disabled="aiLoading" style="margin-left: auto; font-size: 0.8rem; padding: 4px 12px; height: auto;">
+          <span v-if="!aiLoading">🚀 开始分析</span>
+          <span v-else>⏳ 分析中...</span>
+        </button>
+      </div>
      <div class="ai-box" ref="aiBoxRef">
        <div class="ai-question">
          <div class="label">当前分析任务</div>
@@ -138,6 +152,104 @@
    </div>
  </div>

+  <!-- Douyin Tab -->
+  <div class="douyin-container" v-show="activeTab==='douyin'" style="padding: 24px; max-width: 95%; 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>
+        </h1>
+        <p style="color: #94a3b8;">自动解析视频、提取文案，构建企业充电知识图谱</p>
+    </div>
+
+    <!-- Input Section -->
+    <el-card class="box-card" style="margin-bottom: 32px;">
+        <template #header>
+            <div class="card-header">
+                <span style="font-weight: bold; font-size: 1.2rem;">粘贴抖音分享链接</span>
+            </div>
+        </template>
+        <el-input
+            v-model="shareText"
+            :rows="15"
+            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;" :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: #9ca3af; font-size: 12px;">
+                                    {{ formatDate(record.create_time) }}
+                                </span>
+                            </div>
+                            <h3 style="font-size: 1.25rem; font-weight: bold; color: #1f2937; line-height: 1.4;">
+                                {{ record.video_name || '处理中...' }}
+                            </h3>
+                            <a v-if="record.obs_url" :href="record.obs_url" target="_blank" style="color: #3b82f6; font-size: 14px; margin-top: 4px; display: inline-block; text-decoration: none;">
+                                📺 点击观看视频
+                            </a>
+                        </div>
+                        <el-button type="danger" circle @click="deleteRecord(record.id)" plain>
+                            <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: #ef4444; font-size: 13px; background: #fee2e2; 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: #f9fafb; border-radius: 8px; padding: 16px; margin-top: 16px;">
+                        <h4 style="font-size: 14px; font-weight: 600; color: #4b5563; margin-bottom: 8px; text-transform: uppercase;">视频文案</h4>
+                        <p style="color: #374151; white-space: pre-wrap; font-size: 14px; line-height: 1.6;" :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: #9ca3af; font-size: 12px;" @click="record.showOriginal = !record.showOriginal">
+                            {{ record.showOriginal ? '收起原始链接' : '查看原始链接信息' }}
+                         </div>
+                         <div v-if="record.showOriginal" style="color: #6b7280; font-size: 12px; background: #f3f4f6; 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: #9ca3af; padding: 40px;">
+            <p>暂无记录，请粘贴链接开始解析</p>
+        </div>
+    </div>
+  </div>
+
  <!-- Degree Query Tab -->
  <div class="degree-container" v-show="activeTab==='degree'">
    <!-- 悬浮二维码 -->
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -9,12 +9,18 @@ createApp({
        
        // Ad Overlay State
        const showAd = ref(true);
-        const adCountdown = ref(10);
+        const adCountdown = ref(15);
        let adTimer = null;

        const apiBase = ref(window.location.origin || "http://localhost:8000");
        const isMobile = ref(window.innerWidth <= 768);

+        // Douyin State
+        const shareText = ref('');
+        const douyinLoading = ref(false);
+        const douyinRecords = ref([]);
+        let douyinTimer = null;
+
        // Handle window resize
        window.addEventListener('resize', () => {
            isMobile.value = window.innerWidth <= 768;
@@ -509,6 +515,86 @@ createApp({
            if (adTimer) clearInterval(adTimer);
        };

+        // Douyin Methods
+        const startParsing = async () => {
+            if (!shareText.value.trim()) return;
+            douyinLoading.value = true;
+            try {
+                const response = await axios.post(apiBase.value + '/api/parse', { text: shareText.value });
+                if (response.data.id || (response.data.ids && response.data.ids.length > 0)) {
+                    shareText.value = '';
+                    fetchDouyinRecords();
+                    if (typeof ElementPlus !== 'undefined') {
+                        const count = response.data.ids ? response.data.ids.length : 1;
+                        ElementPlus.ElMessage.success(`成功提交 ${count} 个解析任务`);
+                    }
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                if (typeof ElementPlus !== 'undefined') ElementPlus.ElMessage.error('解析请求失败');
+            } finally {
+                douyinLoading.value = false;
+            }
+        };
+
+        const fetchDouyinRecords = async (isManual) => {
+            try {
+                const response = await axios.get(apiBase.value + '/api/records');
+                const newRecords = response.data;
+                douyinRecords.value = newRecords.map(newRec => {
+                    const oldRec = douyinRecords.value.find(r => r.id === newRec.id);
+                    return { 
+                        ...newRec, 
+                        expanded: oldRec ? oldRec.expanded : false,
+                        showOriginal: oldRec ? oldRec.showOriginal : false
+                    };
+                });
+                if (isManual === true || (isManual && isManual.type === 'click')) {
+                     if (typeof ElementPlus !== 'undefined') ElementPlus.ElMessage.success('列表已刷新');
+                }
+            } catch (error) {
+                console.error('Error fetching records:', error);
+                if (isManual === true || (isManual && isManual.type === 'click')) {
+                     if (typeof ElementPlus !== 'undefined') ElementPlus.ElMessage.error('刷新失败');
+                }
+            }
+        };
+
+        const deleteRecord = async (id) => {
+            if (!confirm('确定要删除这条记录吗？')) return;
+            try {
+                await axios.delete(apiBase.value + `/api/records/${id}`);
+                fetchDouyinRecords();
+                if (typeof ElementPlus !== 'undefined') ElementPlus.ElMessage.success('删除成功');
+            } catch (error) {
+                console.error('Error deleting:', error);
+                if (typeof ElementPlus !== 'undefined') ElementPlus.ElMessage.error('删除失败');
+            }
+        };
+
+        const statusColor = (status) => {
+            switch(status) {
+                case 'COMPLETED': return '#10b981';
+                case 'FAILED': return '#ef4444';
+                case 'PROCESSING': return '#3b82f6';
+                default: return '#9ca3af';
+            }
+        };
+
+        const statusType = (status) => {
+             switch(status) {
+                case 'COMPLETED': return 'success';
+                case 'FAILED': return 'danger';
+                case 'PROCESSING': return 'primary';
+                default: return 'info';
+            }
+        };
+
+        const formatDate = (dateStr) => {
+            if (!dateStr) return '';
+            return new Date(dateStr).toLocaleString();
+        };
+
        // ==========================================
        // Lifecycle
        // ==========================================
@@ -516,8 +602,19 @@ createApp({
            // Dashboard init
            initChart();
            loadAllOperatorsPrices();
-            startAiAnalysis();
+            // startAiAnalysis(); // Removed auto-start
+            placeholder.value = "请点击右上角“开始分析”按钮以获取报告。";
            
+            // Douyin init
+            fetchDouyinRecords();
+            if (douyinTimer) clearInterval(douyinTimer);
+            douyinTimer = setInterval(() => {
+                // Only poll if tab is active
+                if (activeTab.value === 'douyin') {
+                    fetchDouyinRecords();
+                }
+            }, 3000);
+
            // Start Chart Type Carousel (10s interval)
            if (chartInterval) clearInterval(chartInterval);
            chartInterval = setInterval(() => {
@@ -558,6 +655,9 @@ createApp({
            // Degree
            userQuery, queryLoading, queryResult, examples,
            handleDegreeSearch, setExample, renderedResult, stopDegreeGeneration,
+            // Douyin
+            shareText, douyinLoading, douyinRecords,
+            startParsing, fetchDouyinRecords, deleteRecord, statusColor, statusType, formatDate,
            // Ad
            showAd, adCountdown, closeAd
        };