feat: 新增产品处理流程监控功能

- 新增处理会话表(process_sessions)和步骤表(process_steps) - 支持实时查看每个产品的处理步骤进度 - 支持暂停/继续/停止正在进行的处理 - 处理步骤包括：搜索内容库、搜索互联网、抓取网页、提取数据、填充字段、提交审核 - 新增处理监控页面 /process - 每个步骤记录详细数据、耗时、状态 - 历史记录可查看每个步骤的执行详情
2026-07-14 12:23:49 +08:00
parent 3f9848c635
commit 8f0efe28b6
7 changed files with 1592 additions and 0 deletions
@@ -0,0 +1,404 @@
+// API基础地址
+const API_BASE = '';
+
+// 自动刷新定时器
+let autoRefreshInterval = null;
+
+// 页面加载
+document.addEventListener('DOMContentLoaded', () => {
+    loadStepDefinitions();
+    loadActiveProcesses();
+    loadHistory();
+    
+    // 启动自动刷新（每2秒）
+    startAutoRefresh();
+});
+
+// 启动自动刷新
+function startAutoRefresh() {
+    if (autoRefreshInterval) {
+        clearInterval(autoRefreshInterval);
+    }
+    
+    autoRefreshInterval = setInterval(() => {
+        loadActiveProcesses();
+    }, 2000);
+}
+
+// 加载步骤定义
+async function loadStepDefinitions() {
+    try {
+        const response = await fetch(`${API_BASE}/api/process/steps`);
+        const data = await response.json();
+        
+        if (data.success) {
+            displayStepDefinitions(data.steps);
+        }
+    } catch (error) {
+        console.error('加载步骤定义失败:', error);
+    }
+}
+
+// 显示步骤定义
+function displayStepDefinitions(steps) {
+    const container = document.getElementById('steps-flow');
+    
+    container.innerHTML = steps.map((step, i) => `
+        <div class="step-card">
+            <div class="step-number">${step.num}</div>
+            <div class="step-title">${escapeHtml(step.name)}</div>
+            <div class="step-desc">${escapeHtml(step.description)}</div>
+        </div>
+        ${i < steps.length - 1 ? '<i class="ri-arrow-right-line" style="color: #ccc;"></i>' : ''}
+    `).join('');
+}
+
+// 加载活动处理
+async function loadActiveProcesses() {
+    try {
+        const response = await fetch(`${API_BASE}/api/process/active`);
+        const data = await response.json();
+        
+        if (data.success) {
+            displayActiveProcesses(data.sessions);
+        }
+    } catch (error) {
+        console.error('加载活动处理失败:', error);
+    }
+}
+
+// 显示活动处理
+function displayActiveProcesses(sessions) {
+    const container = document.getElementById('active-list');
+    
+    if (sessions.length === 0) {
+        container.innerHTML = '<div class="empty-text">暂无正在进行的处理</div>';
+        return;
+    }
+    
+    container.innerHTML = sessions.map(item => {
+        const session = item.session;
+        const steps = item.steps || [];
+        const isPaused = session.paused || session.status === 'paused';
+        
+        return `
+            <div class="active-process-item ${isPaused ? 'paused' : ''}" id="process-${session.session_id}">
+                <div class="process-info">
+                    <div>
+                        <div class="process-name">${escapeHtml(session.product_name)}</div>
+                        <div class="process-meta">
+                            ${session.category ? `分类: ${escapeHtml(session.category)} | ` : ''}
+                            会话ID: ${escapeHtml(session.session_id)}
+                        </div>
+                    </div>
+                    <div>
+                        <span class="process-status-badge status-${session.status}">
+                            ${getStatusText(session.status)}
+                        </span>
+                    </div>
+                </div>
+                
+                <!-- 步骤进度 -->
+                <div class="steps-progress">
+                    ${renderStepsProgress(steps, session.current_step)}
+                </div>
+                
+                <!-- 操作按钮 -->
+                <div class="process-actions">
+                    ${session.status === 'running' ? `
+                        <button onclick="pauseProcess('${session.session_id}')" class="btn btn-warning btn-sm">
+                            <i class="ri-pause-line"></i> 暂停
+                        </button>
+                    ` : ''}
+                    ${session.status === 'paused' ? `
+                        <button onclick="resumeProcess('${session.session_id}')" class="btn btn-success btn-sm">
+                            <i class="ri-play-line"></i> 继续
+                        </button>
+                    ` : ''}
+                    ${session.status !== 'completed' ? `
+                        <button onclick="stopProcess('${session.session_id}')" class="btn btn-danger btn-sm">
+                            <i class="ri-stop-line"></i> 停止
+                        </button>
+                    ` : ''}
+                    <button onclick="showProcessDetail('${session.session_id}')" class="btn btn-secondary btn-sm">
+                        <i class="ri-eye-line"></i> 详情
+                    </button>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+// 渲染步骤进度
+function renderStepsProgress(steps, currentStep) {
+    const totalSteps = 6;
+    const stepStatuses = {};
+    
+    // 构建步骤状态映射
+    steps.forEach(s => {
+        stepStatuses[s.step_number] = s.step_status;
+    });
+    
+    const stepNames = ['搜索内容库', '搜索互联网', '抓取网页', '提取数据', '填充字段', '提交审核'];
+    
+    let html = '';
+    for (let i = 1; i <= totalSteps; i++) {
+        const status = stepStatuses[i] || (i > currentStep ? 'pending' : '');
+        let className = '';
+        
+        if (status === 'completed') className = 'completed';
+        else if (status === 'running') className = 'running';
+        else if (status === 'failed') className = 'failed';
+        else if (status === 'skipped') className = 'skipped';
+        
+        html += `
+            <div class="step-node ${className}">
+                <div class="step-circle">${i}</div>
+                <div class="step-label">${stepNames[i-1]}</div>
+            </div>
+        `;
+    }
+    
+    return html;
+}
+
+// 加载历史
+async function loadHistory() {
+    try {
+        const response = await fetch(`${API_BASE}/api/process/recent?limit=20`);
+        const data = await response.json();
+        
+        if (data.success) {
+            displayHistory(data.sessions);
+        }
+    } catch (error) {
+        console.error('加载历史失败:', error);
+    }
+}
+
+// 显示历史
+function displayHistory(sessions) {
+    const container = document.getElementById('history-table');
+    
+    if (sessions.length === 0) {
+        container.innerHTML = '<tr><td colspan="6" class="empty-text">暂无处理历史</td></tr>';
+        return;
+    }
+    
+    container.innerHTML = sessions.map(session => `
+        <tr>
+            <td>${escapeHtml(session.product_name)}</td>
+            <td>
+                <span class="process-status-badge status-${session.status}">
+                    ${getStatusText(session.status)}
+                </span>
+            </td>
+            <td>
+                <div class="step-indicator">
+                    <span class="dot ${session.status}"></span>
+                    步骤 ${session.current_step || 0}/6
+                </div>
+            </td>
+            <td>${formatDate(session.started_at || session.created_at)}</td>
+            <td>${formatDate(session.finished_at) || '-'}</td>
+            <td>
+                <button onclick="showProcessDetail('${session.session_id}')" class="btn btn-sm btn-secondary">
+                    <i class="ri-eye-line"></i>
+                </button>
+            </td>
+        </tr>
+    `).join('');
+}
+
+// 暂停处理
+async function pauseProcess(sessionId) {
+    try {
+        const response = await fetch(`${API_BASE}/api/process/${sessionId}/pause`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+        
+        if (data.success) {
+            showToast('处理已暂停', 'success');
+            loadActiveProcesses();
+        } else {
+            showToast('暂停失败: ' + data.error, 'error');
+        }
+    } catch (error) {
+        showToast('暂停失败', 'error');
+    }
+}
+
+// 继续处理
+async function resumeProcess(sessionId) {
+    try {
+        const response = await fetch(`${API_BASE}/api/process/${sessionId}/resume`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+        
+        if (data.success) {
+            showToast('处理已继续', 'success');
+            loadActiveProcesses();
+        } else {
+            showToast('继续失败: ' + data.error, 'error');
+        }
+    } catch (error) {
+        showToast('继续失败', 'error');
+    }
+}
+
+// 停止处理
+async function stopProcess(sessionId) {
+    if (!confirm('确定要停止处理吗？')) return;
+    
+    try {
+        const response = await fetch(`${API_BASE}/api/process/${sessionId}/stop`, {
+            method: 'POST'
+        });
+        const data = await response.json();
+        
+        if (data.success) {
+            showToast('处理已停止', 'success');
+            loadActiveProcesses();
+            loadHistory();
+        } else {
+            showToast('停止失败: ' + data.error, 'error');
+        }
+    } catch (error) {
+        showToast('停止失败', 'error');
+    }
+}
+
+// 显示处理详情
+async function showProcessDetail(sessionId) {
+    try {
+        const response = await fetch(`${API_BASE}/api/process/${sessionId}/status`);
+        const data = await response.json();
+        
+        if (data.success) {
+            const session = data.data.session;
+            const steps = data.data.steps;
+            
+            document.getElementById('detail-title').innerHTML = 
+                `<i class="ri-file-list-3-line"></i> ${escapeHtml(session.product_name)} - 处理详情`;
+            
+            const body = document.getElementById('detail-body');
+            body.innerHTML = `
+                <div class="detail-meta" style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
+                    <div><strong>状态:</strong> ${getStatusText(session.status)}</div>
+                    <div><strong>分类:</strong> ${escapeHtml(session.category || '未分类')}</div>
+                    <div><strong>开始时间:</strong> ${formatDate(session.started_at) || '未开始'}</div>
+                    <div><strong>完成时间:</strong> ${formatDate(session.finished_at) || '-'}</div>
+                    ${session.review_id ? `<div><strong>审核ID:</strong> ${escapeHtml(session.review_id)}</div>` : ''}
+                </div>
+                
+                <h4 style="margin-bottom: 15px;"><i class="ri-list-check"></i> 处理步骤</h4>
+                <div class="detail-steps">
+                    ${steps.map(step => renderDetailStep(step)).join('')}
+                </div>
+            `;
+            
+            document.getElementById('process-detail-modal').classList.add('active');
+        }
+    } catch (error) {
+        showToast('获取详情失败', 'error');
+    }
+}
+
+// 渲染详情步骤
+function renderDetailStep(step) {
+    const statusColors = {
+        'completed': '#10b981',
+        'running': '#667eea',
+        'failed': '#ef4444',
+        'skipped': '#9ca3af',
+        'pending': '#e9ecef'
+    };
+    
+    let stepDataHtml = '';
+    if (step.step_data) {
+        try {
+            const data = typeof step.step_data === 'string' ? JSON.parse(step.step_data) : step.step_data;
+            stepDataHtml = `<pre style="margin: 0; white-space: pre-wrap;">${escapeHtml(JSON.stringify(data, null, 2))}</pre>`;
+        } catch (e) {
+            stepDataHtml = escapeHtml(step.step_data);
+        }
+    }
+    
+    return `
+        <div class="detail-step">
+            <div class="detail-step-header">
+                <div class="detail-step-name">
+                    <span style="color: ${statusColors[step.step_status] || '#999'}; font-size: 18px;">●</span>
+                    步骤${step.step_number}: ${escapeHtml(step.step_name)}
+                </div>
+                <span class="detail-step-status" style="background: ${statusColors[step.step_status] || '#e9ecef'}; color: white;">
+                    ${step.step_status}
+                </span>
+            </div>
+            ${stepDataHtml ? `<div class="detail-step-content">${stepDataHtml}</div>` : ''}
+            ${step.error_message ? `<div style="color: #ef4444; font-size: 13px;"><i class="ri-error-warning-line"></i> ${escapeHtml(step.error_message)}</div>` : ''}
+            <div class="detail-step-time">
+                ${step.started_at ? `开始: ${formatDate(step.started_at)}` : ''}
+                ${step.finished_at ? ` | 完成: ${formatDate(step.finished_at)}` : ''}
+                ${step.duration_ms ? ` | 耗时: ${step.duration_ms}ms` : ''}
+            </div>
+        </div>
+    `;
+}
+
+// 刷新数据
+function refreshData() {
+    loadActiveProcesses();
+    loadHistory();
+}
+
+// 关闭模态框
+function closeModal(modalId) {
+    document.getElementById(modalId).classList.remove('active');
+}
+
+// 获取状态文本
+function getStatusText(status) {
+    const statusMap = {
+        'pending': '等待中',
+        'running': '处理中',
+        'paused': '已暂停',
+        'completed': '已完成',
+        'failed': '失败',
+        'stopped': '已停止'
+    };
+    return statusMap[status] || status;
+}
+
+// HTML转义
+function escapeHtml(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// 日期格式化
+function formatDate(dateString) {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return date.toLocaleString('zh-CN', {
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+
+// 显示提示
+function showToast(message, type = '') {
+    const toast = document.getElementById('toast');
+    toast.textContent = message;
+    toast.className = `toast active ${type}`;
+    
+    setTimeout(() => {
+        toast.classList.remove('active');
+    }, 3000);
+}