feat: 优化 AI 调解实时看板功能并集成新组件

chengmw

2026-04-02 f6b958eedcfd1ec955a8638ec8f70d01a9c05ae6

 web-app/src/App.js

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

// Context
import { CaseDataProvider, useCaseData } from './contexts/CaseDataContext';

// 调解看板组件
import TopSection from './components/dashboard/TopSection';
@@ -10,6 +14,11 @@

// 弹窗组件
import ToolModal from './components/common/ToolModal';
import OutboundCallWidget from './components/common/OutboundCallWidget';

// 新增组件
import AppHeader from './components/common/AppHeader';
import WarningAlert from './components/common/WarningAlert';

// 工具内容组件
import WageCalculatorContent from './components/tools/WageCalculatorContent';
@@ -18,8 +27,19 @@
import SimilarCaseContent from './components/tools/SimilarCaseContent';

function App() {
  return (
    <CaseDataProvider>
      <AppContent />
    </CaseDataProvider>
  );
}

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

  // 工具配置
  const toolConfig = {
@@ -53,6 +73,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;
@@ -60,46 +99,60 @@
  };

  return (
    <div className="app">
      {/* Font Awesome CDN */}
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      />
    <Spin spinning={loading} tip="加载案件数据中...">
      <div className="app">
        {/* Font Awesome CDN */}
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        />

      {/* 顶部区域 */}
      <TopSection />
        {/* 蓝色顶部Header */}
        <AppHeader />

      {/* 中间区域 */}
      <section className="middle-section">
        {/* A区域：左侧主要内容 */}
        <div className="area-a">
          {/* AI调解进度 */}
          <MediationProgress currentStep={currentStep} />
        {/* 顶部区域 */}
        <TopSection />

          {/* 选项卡容器 */}
          <TabContainer />
        </div>
        {/* 中间区域 */}
        <section className="middle-section">
          {/* A区域：左侧主要内容 */}
          <div className="area-a">
            {/* AI调解进度 */}
            <MediationProgress />

        {/* B区域：右侧工具栏 */}
        <ToolsPanel onToolClick={handleToolClick} />
      </section>
            {/* 预警提示消息 */}
            <WarningAlert />

      {/* 底部悬浮控制看板 */}
      <FloatingControlPanel currentStep={currentStep} elapsedTime="25分钟" />
            {/* 选项卡容器 */}
            <TabContainer ref={tabContainerRef} />
          </div>

      {/* 工具弹窗 */}
      {activeModal && toolConfig[activeModal] && (
        <ToolModal
          visible={true}
          title={toolConfig[activeModal].title}
          icon={toolConfig[activeModal].icon}
          onClose={handleCloseModal}
        >
          {renderModalContent()}
        </ToolModal>
      )}
    </div>
          {/* B区域：右侧工具栏 */}
          <ToolsPanel onToolClick={handleToolClick} />
        </section>

        {/* 底部悬浮控制看板 */}
        <FloatingControlPanel />

        {/* 工具弹窗 */}
        {activeModal && toolConfig[activeModal] && (
          <ToolModal
            visible={true}
            title={toolConfig[activeModal].title}
            icon={toolConfig[activeModal].icon}
            onClose={handleCloseModal}
          >
            {renderModalContent()}
          </ToolModal>
        )}

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