v2.0: 提交当前所有变更，准备创建v2.0标签

shimai

1 days ago 6f45735adfdcd973a19f638f9ced9629f79cd6de

 web-app/src/components/common/OutboundCallWidget.jsx

@@ -1,6 +1,7 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useCaseData } from '../../contexts/CaseDataContext';
import OutboundBotAPIService from '../../services/OutboundBotAPIService';
import ProcessAPIService from '../../services/ProcessAPIService';
import { message } from 'antd';

const OUTBOUND_JOBS_KEY = 'outbound_call_jobs';
@@ -27,20 +28,47 @@
 * @param {Function} props.onRefreshData - 数据刷新回调
 */
const OutboundCallWidget = ({ onSwitchTab, onRefreshData }) => {
  const { caseData } = useCaseData();
  const { caseData, refreshNodeData } = useCaseData();
  const [isVisible, setIsVisible] = useState(false); // 默认隐藏
  const [isMinimized, setIsMinimized] = useState(false); // 默认展开（非最小化）
  const [calls, setCalls] = useState([]);
  const [mediationRecords, setMediationRecords] = useState([]); // AI调解记录
  const [aiProcessingTasks, setAiProcessingTasks] = useState([]); // AI处理中任务
  const isMountedRef = useRef(true);
  
  // 轮询间隔（毫秒）
  const POLL_INTERVAL = 10000; // 10秒
  const POLL_INTERVAL = 2000; // 2秒
  
  // 节点数据轻量刷新间隔（毫秒）—— 与主轮询对齐，避免节点进度延迟
  const NODE_REFRESH_INTERVAL = 2000; // 2秒
  
  // 最大重试次数
  const MAX_RETRY_COUNT = 10;

  // 获取 caseId
  const caseId = caseData?.caseId || caseData?.case_id;
  
  // 获取 mediationId
  const mediationId = caseData?.mediation?.id;

  // 加载AI调解记录（无Loading效果）
  const loadMediationRecords = useCallback(async () => {
    if (!mediationId) return;
    
    try {
      const response = await ProcessAPIService.getProcessRecords({
        mediation_id: mediationId
      });
      
      if (isMountedRef.current) {
        setMediationRecords(response.data || []);
        console.log('AI调解记录加载成功:', response.data?.length || 0, '条');
      }
    } catch (err) {
      console.error('加载AI调解记录失败:', err);
      // 不显示错误提示，不设置loading状态
    }
  }, [mediationId]);

  // 格式化通话时长
  const formatDuration = (seconds) => {
@@ -141,57 +169,26 @@
  };

  /**
   * 批量更新通话状态到后端
   * @param {Array} jobsToUpdate - 需要更新的任务列表
   * @returns {Promise<boolean>} 是否有成功的更新
   * [已废弃] 批量更新通话状态到后端
   * 改造后状态更新由后端回调驱动，前端不再调用 update-status API
   */
  const updateCallStatusToBackend = async (jobsToUpdate) => {
    if (!jobsToUpdate || jobsToUpdate.length === 0) return false;

    try {
      // 并行调用所有任务的更新API
      const results = await Promise.all(
        jobsToUpdate.map(async (job) => {
          try {
            const statusToUpdate = job.backendStatus || job.newStatus;
            if (!statusToUpdate) {
              return { success: false, job };
            }
            await OutboundBotAPIService.updateCallStatus({
              jobId: job.jobId,
              callStatus: statusToUpdate
            });
            console.log(`状态更新成功: ${job.jobId} -> ${statusToUpdate}`);
            return { success: true, job };
          } catch (err) {
            console.error(`状态更新失败: ${job.jobId}`, err);
            return { success: false, job };
          }
        })
      );

      // 检查是否有成功的更新
      const hasSuccess = results.some(r => r.success);
      return hasSuccess;
    } catch (err) {
      console.error('批量更新状态失败:', err);
      return false;
    }
  };
  // const updateCallStatusToBackend = async (jobsToUpdate) => { ... 已移除 };

  /**
   * 触发页面更新（刷新数据 + 切换Tab）
   * 触发页面更新（轻量刷新节点数据 + 切换Tab）
   * 不调用 onRefreshData（全量刷新会重复触发外呼/OCR），改用轻量级 refreshNodeData
   */
  const triggerPageUpdate = useCallback(() => {
    // 刷新案件数据
    if (onRefreshData) {
      onRefreshData();
    // 轻量刷新节点数据（仅 timeline + processNodes，不触发外呼等副作用）
    if (refreshNodeData) {
      console.log('[Widget] 终态检测 → 立即轻量刷新节点数据');
      refreshNodeData();
    }
    // 切换到AI调解实时看板
    if (onSwitchTab) {
      onSwitchTab('mediation-board');
    }
  }, [onRefreshData, onSwitchTab]);
  }, [refreshNodeData, onSwitchTab]);

  /**
   * 移除终态或超时的任务
@@ -219,7 +216,39 @@
   * 查询通话状态
   */
  const fetchCallStatus = useCallback(async () => {
    // 从 localStorage 读取任务
    // ── Step 1: 从后端补充活跃记录（解决后端创建任务前端不知情的问题）──
    if (mediationId) {
      try {
        const backendResp = await OutboundBotAPIService.getActiveRecords({ mediation_id: mediationId });
        const backendJobs = backendResp?.data || [];
        if (backendJobs.length > 0) {
          const storedRaw = localStorage.getItem(OUTBOUND_JOBS_KEY);
          const storedJobs = storedRaw ? JSON.parse(storedRaw) : [];
          const storedJobIds = new Set(storedJobs.map(j => j.jobId));
          let changed = false;
          backendJobs.forEach(bj => {
            if (!storedJobIds.has(bj.jobId)) {
              const createTs = bj.createTime ? new Date(bj.createTime).getTime() : Date.now();
              storedJobs.push({
                ...bj,
                startTime: createTs,
                pollStartTime: Date.now(),
                retryCount: 0,
              });
              changed = true;
              console.log('[Widget] 从后端补充活跃外呼任务:', bj.jobId, bj.perTypeName, bj.callStatus);
            }
          });
          if (changed) {
            localStorage.setItem(OUTBOUND_JOBS_KEY, JSON.stringify(storedJobs));
          }
        }
      } catch (e) {
        console.warn('[Widget] 从后端获取活跃记录失败:', e);
      }
    }

    // ── Step 2: 从 localStorage 读取任务（与原逻辑一致）──
    const storedJobs = loadJobsFromStorage();
    
    // 分离成功任务和失败任务
@@ -313,14 +342,13 @@
    // 清理超时任务
    const cleanedJobs = cleanupJobs(filteredJobs);

    // 如果有需要更新到后端的任务，批量调用更新API
    if (jobsNeedBackendUpdate.length > 0) {
      const hasUpdateSuccess = await updateCallStatusToBackend(jobsNeedBackendUpdate);
      
      // 如果有成功的更新，触发页面更新
      if (hasUpdateSuccess) {
        triggerPageUpdate();
      }
    // 轮询仅用于 UI 展示，不再调用后端 update-status API
    // 状态更新已由后端回调驱动，前端不再触发推进

    // 如果有终态任务，触发页面更新
    const hasTerminalJobs = jobsNeedBackendUpdate.length > 0;
    if (hasTerminalJobs) {
      triggerPageUpdate();
    }

    // 保存到 localStorage
@@ -337,7 +365,38 @@
        setIsVisible(true);
      }
    }
  }, [isVisible, triggerPageUpdate]);
  }, [isVisible, triggerPageUpdate, mediationId]);

  // 记录上一次 AI 处理任务数，用于检测 "处理中→完成" 变化
  const prevAiTaskCountRef = useRef(0);

  // 轮询 AI 处理状态
  const fetchAiProcessingStatus = useCallback(async () => {
    if (!mediationId) return;
    try {
      const resp = await OutboundBotAPIService.getAiProcessingStatus({ mediation_id: mediationId });
      const tasks = resp?.data || [];
      if (isMountedRef.current) {
        const prevCount = prevAiTaskCountRef.current;
        prevAiTaskCountRef.current = tasks.length;
        setAiProcessingTasks(tasks);

        // AI 任务从 "有" → "无"（处理完成），立即刷新节点数据以感知新节点推进
        if (prevCount > 0 && tasks.length === 0) {
          console.log('[Widget] AI处理全部完成 → 立即刷新节点数据');
          if (refreshNodeData) refreshNodeData();
        }

        // 如果有 AI 处理中任务，确保悬浮窗可见
        if (tasks.length > 0 && !isVisible) {
          setIsVisible(true);
        }
      }
    } catch (e) {
      // 不影响主流程，静默失败
      console.warn('[Widget] 查询AI处理状态失败:', e);
    }
  }, [mediationId, isVisible, refreshNodeData]);

  // 定时轮询通话状态
  useEffect(() => {
@@ -346,9 +405,17 @@
    
    // 初始加载
    fetchCallStatus();
    loadMediationRecords(); // 初始加载调解记录
    
    // AI 处理状态初始加载
    fetchAiProcessingStatus();

    // 设置轮询定时器（10秒间隔）
    const interval = setInterval(fetchCallStatus, POLL_INTERVAL);
    const interval = setInterval(() => {
      fetchCallStatus();
      loadMediationRecords(); // 每10秒加载一次AI调解记录
      fetchAiProcessingStatus(); // 每10秒查询AI处理状态
    }, POLL_INTERVAL);
    
    // 监听外呼任务更新事件（立即刷新）
    const handleOutboundJobsUpdated = () => {
@@ -375,7 +442,24 @@
      window.removeEventListener('mediation-terminated', handleMediationTerminated);
      isMountedRef.current = false;
    };
  }, [fetchCallStatus]);
  }, [fetchCallStatus, loadMediationRecords, fetchAiProcessingStatus]);

  // 独立定时器：周期性轻量刷新 timeline + processNodes（不依赖闭包变量，避免过期状态问题）
  useEffect(() => {
    const mediationState = caseData?.mediation?.state;
    // 仅在调解进行中时启动周期性刷新
    if (mediationState !== 1) return;

    console.log('[Widget] 启动节点数据周期性轻量刷新，间隔:', NODE_REFRESH_INTERVAL, 'ms');
    const nodeRefreshTimer = setInterval(() => {
      if (isMountedRef.current && refreshNodeData) {
        console.log('[Widget] 执行节点数据轻量刷新');
        refreshNodeData();
      }
    }, NODE_REFRESH_INTERVAL);

    return () => clearInterval(nodeRefreshTimer);
  }, [caseData?.mediation?.state, refreshNodeData]);

  // 关闭气泡
  const handleClose = (e) => {
@@ -414,8 +498,8 @@
    return true;
  });

  // 如果没有活跃任务且不可见，不渲染任何内容
  if (activeCalls.length === 0 && !isVisible) {
  // 如果没有活跃任务且没有AI处理中任务且不可见，不渲染任何内容
  if (activeCalls.length === 0 && aiProcessingTasks.length === 0 && !isVisible) {
    return null;
  }

@@ -454,8 +538,8 @@
            color: 'white',
          }}
        />
        {/* 红点提示有通话 */}
        {activeCalls.length > 0 && (
        {/* 红点提示有通话或AI处理中 */}
        {(activeCalls.length + aiProcessingTasks.length) > 0 && (
          <div
            style={{
              position: 'absolute',
@@ -464,7 +548,7 @@
              width: 16,
              height: 16,
              borderRadius: '50%',
              background: '#ff4d4f',
              background: aiProcessingTasks.length > 0 ? '#722ED1' : '#ff4d4f',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
@@ -473,7 +557,7 @@
              fontWeight: 'bold',
            }}
          >
            {activeCalls.length}
            {activeCalls.length + aiProcessingTasks.length}
          </div>
        )}
      </div>
@@ -620,8 +704,97 @@
        </div>
      ))}

      {/* AI 处理中加载态卡片 */}
      {aiProcessingTasks.map((task, index) => (
        <div
          key={`ai-${task.jobId || index}`}
          style={{
            background: 'linear-gradient(135deg, #722ED1 0%, #531DAB 100%)',
            borderRadius: 12,
            padding: '16px 20px',
            color: 'white',
            boxShadow: '0 4px 16px rgba(114, 46, 209, 0.3)',
            position: 'relative',
            minWidth: 280,
          }}
        >
          {/* 头部 - AI 分析中 */}
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              marginBottom: 12,
            }}
          >
            <div
              style={{
                width: 36,
                height: 36,
                borderRadius: '50%',
                background: 'rgba(255,255,255,0.2)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <i className="fas fa-brain" style={{ fontSize: 18, animation: 'pulse 1.5s infinite' }} />
            </div>
            <div style={{ flex: 1 }}>
              <div
                style={{
                  fontSize: 16,
                  fontWeight: 600,
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                }}
              >
                AI 分析中
                <span
                  style={{
                    width: 8,
                    height: 8,
                    borderRadius: '50%',
                    background: '#B37FEB',
                    animation: 'pulse 1.5s infinite',
                  }}
                />
              </div>
            </div>
          </div>

          {/* 分析信息 */}
          <div style={{ marginBottom: 10 }}>
            <div style={{ fontSize: 14, opacity: 0.95, lineHeight: 1.6 }}>
              <span>{task.personName || '当事人'} 通话分析</span>
            </div>
            <div style={{ fontSize: 12, opacity: 0.75, marginTop: 6, display: 'flex', flexDirection: 'column', gap: 4 }}>
              {(task.steps || []).includes('summary') && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <i className="fas fa-file-alt" style={{ fontSize: 11 }} />
                  <span>对话总结生成中...</span>
                </div>
              )}
              {(task.steps || []).includes('emotion') && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <i className="fas fa-heart" style={{ fontSize: 11 }} />
                  <span>情绪识别中...</span>
                </div>
              )}
              {(task.steps || []).includes('success_rate') && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <i className="fas fa-chart-line" style={{ fontSize: 11 }} />
                  <span>成功率评估中...</span>
                </div>
              )}
            </div>
          </div>
        </div>
      ))}

      {/* 无通话时的占位提示 */}
      {activeCalls.length === 0 && isVisible && (
      {activeCalls.length === 0 && aiProcessingTasks.length === 0 && isVisible && (
        <div
          style={{
            background: 'linear-gradient(135deg, #1A6FB8 0%, #0d4a8a 100%)',