Merge branch 'test/tony.cheng/260312' of http://120.79.193.119:9090/r/~chen...

shimai

2026-04-03 e4dfe9f17d64d016376872b786d2987805ee41ef

 web-app/src/components/common/WarningAlert.jsx

New file
@@ -0,0 +1,119 @@
/**
 * WarningAlert 组件 - 预警提示消息条
 * 在调解进度条下方显示预警消息
 */

import React, { useState, useEffect, useCallback } from 'react';
import { Modal, List } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { useCaseData } from '../../contexts/CaseDataContext';
import MediationTimelineAPIService from '../../services/MediationTimelineAPIService';
import './WarningAlert.css';

// 警告图标图片
const WARNING_ICON = '/warning.png';

/**
 * 预警消息列表弹窗
 */
const WarningModal = ({ visible, warnings, onClose }) => (
  <Modal
    title={<span><img src={WARNING_ICON} alt="warning" className="warning-modal-icon" />预警消息列表</span>}
    open={visible}
    onCancel={onClose}
    footer={null}
    width={520}
    className="warning-modal"
  >
    <List
      dataSource={warnings}
      renderItem={(item, index) => (
        <List.Item className="warning-modal-item">
          <div className="warning-modal-content">
            <span className="warning-modal-index">{index + 1}.</span>
            <span className="warning-modal-text">{item.content}</span>
          </div>
          <span className="warning-modal-time">{item.create_time}</span>
        </List.Item>
      )}
    />
  </Modal>
);

/**
 * WarningAlert 主组件
 */
const WarningAlert = () => {
  const { caseData } = useCaseData();
  const [warnings, setWarnings] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const mediationId = caseData?.mediation?.id;

  // 加载预警消息
  const loadWarnings = useCallback(async () => {
    if (!mediationId) return;
    
    setLoading(true);
    try {
      const response = await MediationTimelineAPIService.getWarningNotifyList(mediationId);
      setWarnings(response.data || []);
    } catch (err) {
      console.error('加载预警消息失败:', err);
      setWarnings([]);
    } finally {
      setLoading(false);
    }
  }, [mediationId]);

  // 组件挂载时加载数据
  useEffect(() => {
    loadWarnings();
  }, [loadWarnings]);

  // 打开弹窗
  const handleOpenModal = useCallback(() => {
    setModalVisible(true);
  }, []);

  // 关闭弹窗
  const handleCloseModal = useCallback(() => {
    setModalVisible(false);
  }, []);

  // 无预警消息时不渲染
  if (!warnings.length || loading) {
    return null;
  }

  const firstWarning = warnings[0];
  const hasMore = warnings.length > 1;

  return (
    <div className="warning-alert">
      <div className="warning-alert-content">
        <img src={WARNING_ICON} alt="warning" className="warning-icon-img" />
        <span className="warning-label">预警：</span>
        <span className="warning-text">{firstWarning.content}</span>
      </div>

      {hasMore && (
        <div className="warning-alert-actions">
          <span className="warning-count">还有{warnings.length - 1}条预警</span>
          <button className="warning-more-btn" onClick={handleOpenModal}>
            查看更多 <RightOutlined />
          </button>
        </div>
      )}

      <WarningModal 
        visible={modalVisible}
        warnings={warnings}
        onClose={handleCloseModal}
      />
    </div>
  );
};

export default WarningAlert;