feat: 优化外呼组件和 Tab 容器功能

chengmw

2026-03-31 15332eb2a66375b0b2aff130737202682980a23d

feat: 优化外呼组件和 Tab 容器功能

 document/原型_V2/解纷智能体-产品首页.jpg

 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';
@@ -31,6 +32,7 @@
  const [isVisible, setIsVisible] = useState(false); // 默认隐藏
  const [isMinimized, setIsMinimized] = useState(false); // 默认展开（非最小化）
  const [calls, setCalls] = useState([]);
  const [mediationRecords, setMediationRecords] = useState([]); // AI调解记录
  const isMountedRef = useRef(true);
  
  // 轮询间隔（毫秒）
@@ -41,6 +43,28 @@

  // 获取 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) => {
@@ -346,9 +370,13 @@
    
    // 初始加载
    fetchCallStatus();
    loadMediationRecords(); // 初始加载调解记录
    
    // 设置轮询定时器（10秒间隔）
    const interval = setInterval(fetchCallStatus, POLL_INTERVAL);
    const interval = setInterval(() => {
      fetchCallStatus();
      loadMediationRecords(); // 每10秒加载一次AI调解记录
    }, POLL_INTERVAL);
    
    // 监听外呼任务更新事件（立即刷新）
    const handleOutboundJobsUpdated = () => {
@@ -375,7 +403,7 @@
      window.removeEventListener('mediation-terminated', handleMediationTerminated);
      isMountedRef.current = false;
    };
  }, [fetchCallStatus]);
  }, [fetchCallStatus, loadMediationRecords]);

  // 关闭气泡
  const handleClose = (e) => {

 web-app/src/components/dashboard/TabContainer.jsx

@@ -135,7 +135,7 @@
            <div className="success-label">预计调解成功概率</div>
            <div className="success-change">
              
              {/* <i className="fas fa-arrow-up"></i><span>较{updateTime} +8%</span> */}
              <i className="fas fa-arrow-up"></i><span>较{updateTime} +8%</span>
            </div>
            <div style={{ marginTop: 15, fontSize: '0.9rem', color: 'var(--gray-color)' }}>
              协商沟通：<span style={{ color: 'var(--dark-color)', fontWeight: 600 }}>{roundCount}</span>