import React, { useState, useEffect } from 'react';
|
import { mockLawDetail } from '../../mocks/lawMocks';
|
import './LawDetailContent.css';
|
|
const LawDetailContent = ({ lawId }) => {
|
const [activeChapter, setActiveChapter] = useState('chapter1');
|
const [lawDetail, setLawDetail] = useState(null);
|
|
useEffect(() => {
|
// 模拟根据 lawId 获取详情
|
setLawDetail(mockLawDetail);
|
}, [lawId]);
|
|
if (!lawDetail) return <div className="law-detail-loading">加载中...</div>;
|
|
const handleChapterClick = (chapterId) => {
|
setActiveChapter(chapterId);
|
const element = document.getElementById(chapterId);
|
if (element) {
|
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
}
|
};
|
|
return (
|
<div className="law-detail-modal-body">
|
{/* 章节导航 */}
|
<div className="law-detail-chapter-nav">
|
<h3 className="law-detail-chapter-nav-title">
|
<i className="fas fa-list-ol"></i>
|
章节导航
|
</h3>
|
<div className="law-detail-chapter-list">
|
{lawDetail.chapters.map((chapter) => (
|
<a
|
key={chapter.id}
|
href={`#${chapter.id}`}
|
className={`law-detail-chapter-link ${activeChapter === chapter.id ? 'active' : ''}`}
|
onClick={(e) => {
|
e.preventDefault();
|
handleChapterClick(chapter.id);
|
}}
|
>
|
{chapter.title}
|
</a>
|
))}
|
</div>
|
</div>
|
|
{/* 法律详情容器 */}
|
<div className="law-detail-main-container">
|
<div className="law-detail-header">
|
<h2 className="law-detail-title">{lawDetail.lawName}</h2>
|
<div className="law-detail-meta-grid">
|
<div className="law-detail-meta-item">
|
<span className="law-detail-meta-label">时效性:</span>
|
<span className="law-detail-meta-value status-effective">{lawDetail.status}</span>
|
</div>
|
<div className="law-detail-meta-item">
|
<span className="law-detail-meta-label">法律效力位阶:</span>
|
<span className="law-detail-meta-value">{lawDetail.effectLevel}</span>
|
</div>
|
<div className="law-detail-meta-item">
|
<span className="law-detail-meta-label">制定机关:</span>
|
<span className="law-detail-meta-value">{lawDetail.org}</span>
|
</div>
|
<div className="law-detail-meta-item">
|
<span className="law-detail-meta-label">公布日期:</span>
|
<span className="law-detail-meta-value">{lawDetail.publishDate}</span>
|
</div>
|
<div className="law-detail-meta-item">
|
<span className="law-detail-meta-label">实施日期:</span>
|
<span className="law-detail-meta-value">{lawDetail.effectiveDate}</span>
|
</div>
|
</div>
|
</div>
|
|
<div className="law-detail-content-area">
|
{lawDetail.chapters.map((chapter) => (
|
<div className="law-detail-chapter-section" id={chapter.id} key={chapter.id}>
|
<h3 className="law-detail-chapter-title">
|
<i className="fas fa-bookmark"></i>
|
{chapter.title}
|
</h3>
|
<div className="law-detail-articles-container">
|
{chapter.articles.map((article, index) => (
|
<div className="law-detail-article-item" key={index}>
|
<div className="law-detail-article-number">{article.number}</div>
|
<div className="law-detail-article-content">
|
{article.content.split('\n').map((line, i) => (
|
<React.Fragment key={i}>
|
{line}
|
{i < article.content.split('\n').length - 1 && <br />}
|
</React.Fragment>
|
))}
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default LawDetailContent;
|
