Optimize typical case search and detail UI to match prototype 100%

tony.cheng

2026-01-27 6a77991808ba41650e646afd247b17fa3903c6e4

 web-app/src/components/tools/LawSearchContent.jsx

@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { Input, DatePicker, Button, Pagination, Spin } from 'antd';
import { Input, DatePicker, Button, Pagination, Spin, Modal } from 'antd';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import LawDetailContent from './LawDetailContent';
import './LawSearchContent.css';

// Mock数据 - 按原型格式
@@ -100,6 +101,8 @@
  const [activeId, setActiveId] = useState('law-001');
  const [filters, setFilters] = useState(filterConfig);
  const [currentPage, setCurrentPage] = useState(1);
  const [detailVisible, setDetailVisible] = useState(false);
  const [selectedLawId, setSelectedLawId] = useState(null);
  const pageSize = 10;
  const total = 256;

@@ -117,7 +120,7 @@
  };

  const toggleFilter = (category, index) => {
    setFilters(prev => {
    setFilters((prev) => {
      const newFilters = { ...prev };
      newFilters[category] = [...prev[category]];
      newFilters[category][index] = {
@@ -126,6 +129,16 @@
      };
      return newFilters;
    });
  };

  const handleLawItemClick = (lawId) => {
    if (activeId === lawId) {
      // 如果已经是激活状态，再次点击弹出详情
      setSelectedLawId(lawId);
      setDetailVisible(true);
    } else {
      setActiveId(lawId);
    }
  };

  return (
@@ -182,7 +195,9 @@
                  <div className={`law-search-filter-checkbox ${item.checked ? 'checked' : ''}`}>
                    {item.checked && <i className="fas fa-check"></i>}
                  </div>
                  <span>{item.label} ({item.count})</span>
                  <span>
                    {item.label} ({item.count})
                  </span>
                </div>
              ))}
            </div>
@@ -193,15 +208,13 @@
            <h3 className="law-search-filter-title">制定机关</h3>
            <div className="law-search-filter-list">
              {filters.org.map((item, index) => (
                <div
                  key={index}
                  className="law-search-filter-item"
                  onClick={() => toggleFilter('org', index)}
                >
                <div key={index} className="law-search-filter-item" onClick={() => toggleFilter('org', index)}>
                  <div className={`law-search-filter-checkbox ${item.checked ? 'checked' : ''}`}>
                    {item.checked && <i className="fas fa-check"></i>}
                  </div>
                  <span>{item.label} ({item.count})</span>
                  <span>
                    {item.label} ({item.count})
                  </span>
                </div>
              ))}
            </div>
@@ -220,7 +233,9 @@
                  <div className={`law-search-filter-checkbox ${item.checked ? 'checked' : ''}`}>
                    {item.checked && <i className="fas fa-check"></i>}
                  </div>
                  <span>{item.label} ({item.count})</span>
                  <span>
                    {item.label} ({item.count})
                  </span>
                </div>
              ))}
            </div>
@@ -241,7 +256,7 @@
              <div
                key={law.id}
                className={`law-search-law-item ${activeId === law.id ? 'active' : ''}`}
                onClick={() => setActiveId(law.id)}
                onClick={() => handleLawItemClick(law.id)}
              >
                <h3 className="law-search-law-title">{law.lawName}</h3>
                <div className="law-search-law-meta">
@@ -295,6 +310,25 @@
          />
        </div>
      </div>

      {/* 详情弹窗 */}
      <Modal
        title={
          <div style={{ fontSize: '1.2rem', fontWeight: 600 }}>
            <i className="fas fa-book" style={{ marginRight: 10, color: '#1a6fb8' }}></i>
            法律条文详情
          </div>
        }
        visible={detailVisible}
        onCancel={() => setDetailVisible(false)}
        footer={null}
        width={1000}
        bodyStyle={{ padding: 0, height: '80vh', overflow: 'hidden' }}
        centered
        destroyOnClose
      >
        <LawDetailContent lawId={selectedLawId} />
      </Modal>
    </div>
  );
};