import React from 'react';
|
import { useCaseData } from '../../contexts/CaseDataContext';
|
import { translateMediationState } from '../../utils/stateTranslator';
|
|
/**
|
* 顶部区域组件 - 标题、AI状态、案件信息
|
*/
|
const TopSection = () => {
|
const { caseData } = useCaseData();
|
const timeline = caseData || {};
|
|
// 从 timeline 中获取数据，提供默认值
|
const caseNumber = timeline.case_ref || 'LD-2026-0014';
|
const disputeType = timeline.case_type_first_name || '劳动争议/拖欠、克扣工资';
|
const startTime = timeline.mediation?.start_date || '2026-01-15 09:30';
|
const endTime = timeline.mediation?.end_date || '2026-01-15 11:00';
|
const aiStatus = translateMediationState(timeline.mediation?.state) || 'AI调解中';
|
|
return (
|
<section className="top-section">
|
<div className="header">
|
<div className="title-area">
|
<div className="title-icon">
|
<img
|
style={{ width: 36 }}
|
src="http://gz.hugeinfo.com.cn/dyh/wx414ae04ac3f10b4e/images/pngAI_logo.png"
|
alt="云小调"
|
/>
|
</div>
|
<div className="title-text">
|
<h1>"云小调"劳动争议AI调解智能体</h1>
|
<div className="title-subtitle">
|
<div className="subtitle-text">AI调解员驾驶舱 - 全自动调解系统</div>
|
<div className="ai-status-tag">
|
<i className="fas fa-circle" style={{ fontSize: '0.6rem' }}></i>
|
{aiStatus}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className="case-info">
|
<div className="info-item">
|
<div className="info-label">事项编号</div>
|
<div className="info-value">{caseNumber}</div>
|
</div>
|
<div className="info-item">
|
<div className="info-label">纠纷类型</div>
|
<div className="info-value">{disputeType}</div>
|
</div>
|
<div className="info-item">
|
<div className="info-label">调解开始时间</div>
|
<div className="info-value">{startTime}</div>
|
</div>
|
<div className="info-item">
|
<div className="info-label">预计结束时间</div>
|
<div className="info-value">{endTime}</div>
|
</div>
|
</div>
|
</div>
|
</section>
|
);
|
};
|
|
export default TopSection;
|
