Skip to content

Commit ce24a3a

Browse files
CC11001100CC11001100
committed
界面组件添加：新增算法解释组件和树可视化增强组件
1 parent c178573 commit ce24a3a

File tree

4 files changed

+1135
-0
lines changed

4 files changed

+1135
-0
lines changed

‎src/components/tree/AlgorithmExplanation.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import './SymmetricTree.css';
3+
4+
// 算法解释组件
5+
const AlgorithmExplanation: React.FC = () => {
6+
return (
7+
<div className="algorithm-explanation">
8+
<h3>对称二叉树判断原理</h3>
9+
<div className="explanation-content">
10+
<p>
11+
<span className="info-icon">ℹ️</span> 对称二叉树的左子树和右子树互为镜像。
12+
</p>
13+
<div className="rule-box">
14+
<div className="rule-title">判断规则：</div>
15+
<ul className="rule-list">
16+
<li>
17+
<span className="check-icon">✓</span> 两个节点都为空 → 对称
18+
</li>
19+
<li>
20+
<span className="error-icon">✗</span> 一个节点为空，一个不为空 → 不对称
21+
</li>
22+
<li>
23+
<span className="error-icon">✗</span> 两个节点值不相等 → 不对称
24+
</li>
25+
<li>
26+
<span className="check-icon">✓</span> 两个节点值相等，且：
27+
<ul>
28+
<li>左节点的左子树与右节点的右子树对称</li>
29+
<li>左节点的右子树与右节点的左子树对称</li>
30+
</ul>
31+
</li>
32+
</ul>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
};
38+
39+
export default AlgorithmExplanation;

‎src/components/tree/TreeVisualExplanations.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import React from 'react';
2+
import './TreeVisualization.css';
3+
4+
interface ExplanationProps {
5+
step: number;
6+
totalSteps: number;
7+
message: string;
8+
isSymmetric?: boolean;
9+
currentNode?: {
10+
left: string | number | null;
11+
right: string | number | null;
12+
};
13+
}
14+
15+
// 创建详细的步骤解释组件
16+
export const StepExplanation: React.FC<ExplanationProps> = ({
17+
step,
18+
totalSteps,
19+
message,
20+
isSymmetric,
21+
currentNode
22+
}) => {
23+
return (
24+
<div className="step-explanation">
25+
<div className="step-header">
26+
<div className="step-counter">
27+
<div className="step-number">{step}/{totalSteps}</div>
28+
<div className="step-progress">
29+
<div
30+
className="progress-bar"
31+
style={{width: `${(step / totalSteps) * 100}%`}}
32+
></div>
33+
</div>
34+
</div>
35+
{isSymmetric !== undefined && (
36+
<div className={`symmetry-status ${isSymmetric ? 'symmetric' : 'not-symmetric'}`}>
37+
{isSymmetric ? '对称' : '不对称'}
38+
</div>
39+
)}
40+
</div>
41+
42+
<div className="step-message">
43+
{message}
44+
</div>
45+
46+
{currentNode && (
47+
<div className="node-comparison">
48+
<div className="comparison-item">
49+
<div className="comparison-label">左节点值:</div>
50+
<div className="comparison-value left">
51+
{currentNode.left !== null ? currentNode.left : '空'}
52+
</div>
53+
</div>
54+
<div className="comparison-operator">
55+
{currentNode.left === currentNode.right ? '=' : '≠'}
56+
</div>
57+
<div className="comparison-item">
58+
<div className="comparison-label">右节点值:</div>
59+
<div className="comparison-value right">
60+
{currentNode.right !== null ? currentNode.right : '空'}
61+
</div>
62+
</div>
63+
</div>
64+
)}
65+
</div>
66+
);
67+
};
68+
69+
// 创建简单的图标组件
70+
interface IconProps {
71+
type: 'check' | 'warning' | 'info' | 'error';
72+
size?: number;
73+
}
74+
75+
export const Icon: React.FC<IconProps> = ({ type, size = 16 }) => {
76+
const getIconPath = () => {
77+
switch (type) {
78+
case 'check':
79+
return (
80+
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
81+
);
82+
case 'warning':
83+
return (
84+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" />
85+
);
86+
case 'info':
87+
return (
88+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-11h2v7h-2zm0-4h2v2h-2z" />
89+
);
90+
case 'error':
91+
return (
92+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" />
93+
);
94+
default:
95+
return null;
96+
}
97+
};
98+
99+
const getColor = () => {
100+
switch (type) {
101+
case 'check': return '#4CAF50';
102+
case 'warning': return '#FFC107';
103+
case 'info': return '#2196F3';
104+
case 'error': return '#F44336';
105+
default: return '#000';
106+
}
107+
};
108+
109+
return (
110+
<svg
111+
xmlns="http://www.w3.org/2000/svg"
112+
width={size}
113+
height={size}
114+
viewBox="0 0 24 24"
115+
fill={getColor()}
116+
>
117+
{getIconPath()}
118+
</svg>
119+
);
120+
};
121+
122+
// 算法解释组件
123+
export const AlgorithmExplanation: React.FC = () => {
124+
return (
125+
<div className="algorithm-explanation">
126+
<h3>对称二叉树判断原理</h3>
127+
<div className="explanation-content">
128+
<p>
129+
<Icon type="info" /> 对称二叉树的左子树和右子树互为镜像。
130+
</p>
131+
<div className="rule-box">
132+
<div className="rule-title">判断规则：</div>
133+
<ul className="rule-list">
134+
<li>
135+
<Icon type="check" /> 两个节点都为空 → 对称
136+
</li>
137+
<li>
138+
<Icon type="error" /> 一个节点为空，一个不为空 → 不对称
139+
</li>
140+
<li>
141+
<Icon type="error" /> 两个节点值不相等 → 不对称
142+
</li>
143+
<li>
144+
<Icon type="check" /> 两个节点值相等，且：
145+
<ul>
146+
<li>左节点的左子树与右节点的右子树对称</li>
147+
<li>左节点的右子树与右节点的左子树对称</li>
148+
</ul>
149+
</li>
150+
</ul>
151+
</div>
152+
</div>
153+
</div>
154+
);
155+
};

0 commit comments

Comments
 (0)