feat: 实现通话状态变化时更新API并刷新页面

tony.cheng

2026-02-12 9161ffccb37c3e707f746674b2bace107bb1014f

 web-app/src/App.js

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import { Spin } from 'antd';
import './App.css';

@@ -32,7 +32,10 @@

function AppContent() {
  const [activeModal, setActiveModal] = useState(null);
  const { loading } = useCaseData();
  const { loading, refreshData } = useCaseData();
  
  // TabContainer ref - 用于切换Tab
  const tabContainerRef = useRef(null);

  // 工具配置
  const toolConfig = {
@@ -66,6 +69,25 @@
    setActiveModal(null);
  };

  /**
   * 切换Tab页签
   * @param {string} tabKey - Tab键名
   */
  const handleSwitchTab = (tabKey) => {
    if (tabContainerRef.current) {
      tabContainerRef.current.switchTab(tabKey);
    }
  };

  /**
   * 刷新案件数据
   */
  const handleRefreshData = () => {
    if (refreshData) {
      refreshData();
    }
  };

  const renderModalContent = () => {
    if (!activeModal || !toolConfig[activeModal]) return null;
    const Component = toolConfig[activeModal].component;
@@ -92,7 +114,7 @@
            <MediationProgress />

            {/* 选项卡容器 */}
            <TabContainer />
            <TabContainer ref={tabContainerRef} />
          </div>

          {/* B区域：右侧工具栏 */}
@@ -115,7 +137,10 @@
        )}

        {/* 智能外呼通话显示组件 - 默认隐藏，可主动触发显示 */}
        <OutboundCallWidget />
        <OutboundCallWidget
          onSwitchTab={handleSwitchTab}
          onRefreshData={handleRefreshData}
        />
      </div>
    </Spin>
  );