From 4eb71775167ae903aea17bb410c6201e872daf66 Mon Sep 17 00:00:00 2001
From: tony.cheng <chengmingwei_1984122@126.com>
Date: Thu, 05 Feb 2026 16:35:50 +0800
Subject: [PATCH] feat: 优化类案推荐功能 - 相似度分级、分页加载、详情字段扩展及法条显示优化
---
web-app/src/components/tools/LawSearchContent.jsx | 56 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 45 insertions(+), 11 deletions(-)
diff --git a/web-app/src/components/tools/LawSearchContent.jsx b/web-app/src/components/tools/LawSearchContent.jsx
index 24c9420..e69c760 100644
--- a/web-app/src/components/tools/LawSearchContent.jsx
+++ b/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>
);
};
--
Gitblit v1.8.0