feat: 完善AI调解状态控制功能及相关文档更新

tony.cheng

2026-03-17 0c8432f4ff5c95faca4ca62d6a4ec4618feba627

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

@@ -28,11 +28,10 @@
 */
const OutboundCallWidget = ({ onSwitchTab, onRefreshData }) => {
  const { caseData } = useCaseData();
  const [isVisible, setIsVisible] = useState(false); // 默认不显示，有任务时自动显示
  const [isVisible, setIsVisible] = useState(false); // 默认隐藏
  const [isMinimized, setIsMinimized] = useState(false); // 默认展开（非最小化）
  const [calls, setCalls] = useState([]);
  const isMountedRef = useRef(true);
  const fetchCallStatusRef = useRef(null); // 用于存储最新的 fetchCallStatus 函数引用
  
  // 轮询间隔（毫秒）
  const POLL_INTERVAL = 10000; // 10秒
@@ -40,7 +39,7 @@
  // 最大重试次数
  const MAX_RETRY_COUNT = 10;

  // 获取 caseIdg
  // 获取 caseId
  const caseId = caseData?.caseId || caseData?.case_id;

  // 格式化通话时长
@@ -59,12 +58,11 @@
      // 读取成功的任务
      const storedSuccess = localStorage.getItem(OUTBOUND_JOBS_KEY);
      const successJobs = storedSuccess ? JSON.parse(storedSuccess) : [];
      console.log('读取成功任务:', successJobs.length, successJobs);
      
      // 读取失败的任务
      const storedFailed = localStorage.getItem(`${OUTBOUND_JOBS_KEY}_failed`);
      const failedJobs = storedFailed ? JSON.parse(storedFailed) : [];
      console.log('读取失败任务:', failedJobs.length, failedJobs);
      console.log('读取失败任务:', failedJobs);
      
      // 清理失败任务 - 按 errorCode 不同策略
      const now = Date.now();
@@ -112,8 +110,14 @@
        }
      });
      
      // 获取成功任务的 personId 集合
      const successPersonIds = new Set(successJobs.map(job => job.personId));
      
      // 过滤掉已有成功任务的 personId 对应的失败任务（成功任务优先）
      const filteredFailedJobs = uniqueFailedJobs.filter(job => !successPersonIds.has(job.personId));
      
      // 合并所有任务
      return [...successJobs, ...uniqueFailedJobs];
      return [...successJobs, ...filteredFailedJobs];
    } catch (err) {
      console.error('读取外呼任务失败:', err);
      return [];
@@ -215,40 +219,22 @@
   * 查询通话状态
   */
  const fetchCallStatus = useCallback(async () => {
    console.log('fetchCallStatus 被调用');
    
    // 从 localStorage 读取任务
    const storedJobs = loadJobsFromStorage();
    console.log('从 localStorage 读取的所有任务:', storedJobs);
    
    // 分离成功任务和失败任务
    const successJobs = storedJobs.filter(job => !job.errorCode && isActiveStatus(job.callStatus));
    const failedJobs = storedJobs.filter(job => job.errorCode > 0);
    
    console.log('成功任务数量:', successJobs.length, '失败任务数量:', failedJobs.length);
    
    if (successJobs.length === 0) {
      // 没有活跃任务，更新状态并返回
      if (isMountedRef.current) {
        setCalls([...failedJobs]);
        if (failedJobs.length > 0) {
        if (failedJobs.length > 0 && !isVisible) {
          setIsVisible(true);
        }
      }
      return;
    }

    // 立即显示气泡（不等待 API 返回）
    console.log('isMountedRef.current:', isMountedRef.current);
    if (isMountedRef.current) {
      // 先合并当前的成功任务和失败任务，立即显示
      const immediateJobs = [...successJobs, ...failedJobs.filter(f => !successJobs.some(s => s.personId === f.personId))];
      console.log('准备设置 calls:', immediateJobs);
      setCalls(immediateJobs);
      setIsVisible(true);
      console.log('立即显示气泡，任务数:', immediateJobs.length, 'isVisible 设置为 true');
    } else {
      console.log('组件未挂载，跳过显示气泡');
    }

    // 收集需要更新到后端的任务（状态变化且原状态不是Scheduling）
@@ -340,26 +326,18 @@
    // 保存到 localStorage
    saveJobsToStorage(cleanedJobs);

    // 合并成功任务和失败任务，按 personId 去重（成功任务优先）
    const successPersonIds = new Set(cleanedJobs.map(job => job.personId));
    // 过滤掉已有成功任务的 personId 对应的失败任务
    const filteredFailedJobs = failedJobs.filter(job => !successPersonIds.has(job.personId));
    const allJobs = [...cleanedJobs, ...filteredFailedJobs];
    // 合并成功任务和失败任务
    const allJobs = [...cleanedJobs, ...failedJobs];

    // 更新组件状态
    if (isMountedRef.current) {
      setCalls(allJobs);
      // 如果有任务，显示气泡（使用函数式更新避免依赖 isVisible）
      if (allJobs.length > 0) {
      // 如果有任务，显示气泡
      if (allJobs.length > 0 && !isVisible) {
        setIsVisible(true);
      }
    }
  }, [triggerPageUpdate]);

  // 将最新的 fetchCallStatus 存储到 ref 中
  useEffect(() => {
    fetchCallStatusRef.current = fetchCallStatus;
  }, [fetchCallStatus]);
  }, [isVisible, triggerPageUpdate]);

  // 定时轮询通话状态
  useEffect(() => {
@@ -372,45 +350,32 @@
    // 设置轮询定时器（10秒间隔）
    const interval = setInterval(fetchCallStatus, POLL_INTERVAL);
    
    // 监听外呼任务更新事件（立即刷新）
    const handleOutboundJobsUpdated = () => {
      console.log('收到外呼任务更新事件，立即刷新');
      fetchCallStatus();
    };
    window.addEventListener('outbound-jobs-updated', handleOutboundJobsUpdated);
    
    // 监听调解终止事件（关闭外呼气泡）
    const handleMediationTerminated = () => {
      console.log('收到调解终止事件，关闭外呼气泡');
      setIsVisible(false);
      setIsMinimized(true);
      // 清空localStorage中的外呼任务
      localStorage.removeItem(OUTBOUND_JOBS_KEY);
      setCalls([]);
    };
    window.addEventListener('mediation-terminated', handleMediationTerminated);
    
    // 清理函数
    return () => {
      clearInterval(interval);
      window.removeEventListener('outbound-jobs-updated', handleOutboundJobsUpdated);
      window.removeEventListener('mediation-terminated', handleMediationTerminated);
      isMountedRef.current = false;
    };
  }, [fetchCallStatus]);

  // 监听 localStorage 变化，外呼成功后立即刷新
  useEffect(() => {
    const handleStorageChange = (e) => {
      // 监听外呼任务存储的变化
      if (e.key === OUTBOUND_JOBS_KEY || e.key === `${OUTBOUND_JOBS_KEY}_failed`) {
        console.log('localStorage 变化，刷新外呼状态');
        if (fetchCallStatusRef.current) {
          fetchCallStatusRef.current();
        }
      }
    };

    // 监听 storage 事件（跨标签页同步）
    window.addEventListener('storage', handleStorageChange);

    // 同页面内的 localStorage 变化需要手动触发
    // 创建自定义事件监听 - 使用 ref 避免依赖问题
    const handleCustomStorageChange = () => {
      console.log('同页面 localStorage 变化，刷新外呼状态');
      if (fetchCallStatusRef.current) {
        fetchCallStatusRef.current();
      }
    };
    window.addEventListener('outbound-jobs-updated', handleCustomStorageChange);

    console.log('事件监听器已设置: outbound-jobs-updated');

    return () => {
      window.removeEventListener('storage', handleStorageChange);
      window.removeEventListener('outbound-jobs-updated', handleCustomStorageChange);
    };
  }, []); // 空依赖数组，只在组件挂载时设置一次

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

  // 添加调试日志
  console.log('渲染检查 - calls:', calls.length, 'activeCalls:', activeCalls.length, 'isVisible:', isVisible, 'isMinimized:', isMinimized);

  // 如果没有任务，不渲染任何内容
  if (activeCalls.length === 0) {
    console.log('无活跃任务，不渲染气泡');
  // 如果没有活跃任务且不可见，不渲染任何内容
  if (activeCalls.length === 0 && !isVisible) {
    return null;
  }

@@ -628,14 +589,14 @@
              {call.errorCode > 0 ? (
                // 失败任务显示
                <span>
                  {call.perClassName || '联系人'}
                  {call.perTypeName || '联系人'}
                  {call.trueName && `（${call.trueName}）`}：
                  {call.message}
                </span>
              ) : (
                // 成功任务显示
                // 成功任务显示 - 使用 perTypeName 字段（申请方当事人/被申请方当事人）
                <span>
                  正在与{call.perClassName || '申请方'}（{call.trueName || call.personId}）电话沟通中...
                  正在与{call.perTypeName || '申请方当事人'}（{call.trueName || call.personId}）电话沟通中...
                </span>
              )}
            </div>
@@ -659,6 +620,64 @@
        </div>
      ))}

      {/* 无通话时的占位提示 */}
      {activeCalls.length === 0 && isVisible && (
        <div
          style={{
            background: 'linear-gradient(135deg, #1A6FB8 0%, #0d4a8a 100%)',
            borderRadius: 12,
            padding: '16px 20px',
            color: 'white',
            boxShadow: '0 4px 16px rgba(26, 111, 184, 0.3)',
            position: 'relative',
            minWidth: 280,
          }}
        >
          {/* 关闭按钮 */}
          <button
            onClick={handleClose}
            style={{
              position: 'absolute',
              top: 8,
              right: 8,
              width: 24,
              height: 24,
              borderRadius: '50%',
              border: 'none',
              background: 'rgba(255,255,255,0.2)',
              color: 'white',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 14,
            }}
          >
            <i className="fas fa-times" />
          </button>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <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-robot" style={{ fontSize: 18 }} />
            </div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>智能外呼系统</div>
              <div style={{ fontSize: 13, opacity: 0.85 }}>暂无进行中的通话</div>
            </div>
          </div>
        </div>
      )}

      {/* CSS 动画 */}
      <style>{`
        @keyframes pulse {