From 6f45735adfdcd973a19f638f9ced9629f79cd6de Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Wed, 15 Apr 2026 16:12:01 +0800
Subject: [PATCH] v2.0: 提交当前所有变更，准备创建v2.0标签
---
web-app/src/App.js | 125 +++++++++++++++++++++++++++++------------
1 files changed, 89 insertions(+), 36 deletions(-)
diff --git a/web-app/src/App.js b/web-app/src/App.js
index 19f17fc..0482c5c 100644
--- a/web-app/src/App.js
+++ b/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>
);
}
--
Gitblit v1.8.0