1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| import React from 'react';
|
| /**
| * 右侧工具箱组件
| */
| const ToolsPanel = ({ onToolClick }) => {
| const tools = [
| {
| key: 'wage-calculator',
| name: '欠薪计算器',
| desc: '自动计算工资、加班费、赔偿金',
| icon: 'fa-calculator',
| iconClass: 'calculator',
| },
| {
| key: 'similar-case',
| name: '类案与法条推荐',
| desc: '推荐相似案例和相关法律条文',
| icon: 'fa-balance-scale',
| iconClass: 'law',
| },
| {
| key: 'law-search',
| name: '法律条文查询',
| desc: '劳动法、劳动合同法相关条款',
| icon: 'fa-gavel',
| iconClass: 'doc',
| },
| {
| key: 'case-search',
| name: '典型案例查询',
| desc: '查询类似劳动争议案例',
| icon: 'fa-search',
| iconClass: 'law',
| },
| ];
|
| const handleClick = (toolKey) => {
| if (onToolClick) {
| onToolClick(toolKey);
| }
| };
|
| return (
| <div className="area-b">
| <div className="tools-panel">
| <h3 className="tools-title">
| <i className="fas fa-toolbox"></i> 调解工具箱
| </h3>
| <div className="tools-list">
| {tools.map((tool) => (
| <div
| key={tool.key}
| className="tool-item"
| onClick={() => handleClick(tool.key)}
| >
| <div className={`tool-icon ${tool.iconClass}`}>
| <i className={`fas ${tool.icon}`}></i>
| </div>
| <div className="tool-text">
| <div className="tool-name">{tool.name}</div>
| <div className="tool-desc">{tool.desc}</div>
| </div>
| </div>
| ))}
| </div>
| </div>
| </div>
| );
| };
|
| export default ToolsPanel;
|
|
