Skip to content

Commit 00507a5

Browse files
CC11001100CC11001100
committed
组件优化：改进算法控制器、递归栈和树可视化组件的交互与样式
1 parent ce24a3a commit 00507a5

File tree

10 files changed

+2085
-2310
lines changed

10 files changed

+2085
-2310
lines changed

‎src/App.css‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,28 +24,59 @@ html, body, #root {
2424
}
2525

2626
body {
27-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
28-
line-height: 1.4;
27+
margin: 0;
28+
padding: 0;
29+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
30+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
31+
sans-serif;
32+
-webkit-font-smoothing: antialiased;
33+
-moz-osx-font-smoothing: grayscale;
34+
background-color: #f5f7fa;
2935
color: #333;
30-
background-color: #f5f8fa;
3136
}
3237

3338
.app {
34-
height: 100vh;
35-
width: 100vw;
39+
min-height: 100vh;
3640
display: flex;
3741
flex-direction: column;
38-
background-color: #f5f5f5;
39-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
42+
}
43+
44+
.app-header {
45+
background: linear-gradient(135deg, #2196F3, #1976D2);
46+
color: white;
47+
padding: 20px;
48+
text-align: center;
49+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
50+
}
51+
52+
.app-header h1 {
53+
margin: 0;
54+
font-size: 2rem;
55+
font-weight: 700;
56+
}
57+
58+
.subtitle {
59+
margin: 10px 0 0;
60+
font-size: 1rem;
61+
opacity: 0.9;
4062
}
4163

4264
.app-main {
4365
flex: 1;
66+
padding: 20px;
67+
max-width: 1200px;
68+
margin: 0 auto;
4469
width: 100%;
45-
overflow: hidden;
46-
display: flex;
47-
justify-content: center;
48-
height: var(--content-height);
70+
box-sizing: border-box;
71+
}
72+
73+
.app-footer {
74+
background-color: #f0f0f0;
75+
text-align: center;
76+
padding: 15px;
77+
color: #555;
78+
font-size: 0.85rem;
79+
border-top: 1px solid #ddd;
4980
}
5081

5182
/* Button styles */
@@ -67,8 +98,12 @@ button:focus {
6798

6899
/* 响应式调整 */
69100
@media (max-width: 768px) {
70-
:root {
71-
--content-height: 100vh;
101+
.app-header h1 {
102+
font-size: 1.5rem;
103+
}
104+
105+
.app-main {
106+
padding: 15px;
72107
}
73108
}
74109

‎src/App.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,16 @@ import './App.css';
55
const App: React.FC = () => {
66
return (
77
<div className="app">
8+
<header className="app-header">
9+
<h1>对称二叉树可视化</h1>
10+
<p className="subtitle">通过直观的动画和解释理解二叉树对称性判断算法</p>
11+
</header>
812
<main className="app-main">
913
<SymmetricTree />
1014
</main>
15+
<footer className="app-footer">
16+
<p>基于React和D3实现的算法可视化项目 | 2024</p>
17+
</footer>
1118
</div>
1219
);
1320
};

‎src/components/tree/AlgorithmController.css‎

Lines changed: 85 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,88 @@
1+
/* AlgorithmController样式已移至TreeVisualization.css中，采用全局布局设计 */
2+
/* 这个文件保留用于特定的控制器样式调整，但主要样式已移动到主CSS文件中 */
3+
4+
/* 保留特殊效果的动画 */
5+
@keyframes fadeIn {
6+
from { opacity: 0; transform: translateY(-5px); }
7+
to { opacity: 1; transform: translateY(0); }
8+
}
9+
10+
.step-result.success {
11+
background-color: #d4edda;
12+
color: #28a745;
13+
}
14+
15+
.step-result.failure {
16+
background-color: #f8d7da;
17+
color: #dc3545;
18+
}
19+
20+
.step-result {
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
width: 20px; /* 减小尺寸 */
25+
height: 20px; /* 减小尺寸 */
26+
border-radius: 50%;
27+
margin-right: 8px; /* 减小右边距 */
28+
font-weight: bold;
29+
font-size: 0.9rem; /* 减小字体 */
30+
}
31+
32+
.step-number {
33+
font-size: 0.75rem; /* 减小字体 */
34+
color: #666;
35+
margin-bottom: 2px; /* 减小底部边距 */
36+
}
37+
38+
.step-text {
39+
font-size: 0.85rem; /* 减小字体 */
40+
color: #333;
41+
transition: margin-left 0.3s ease-in-out;
42+
}
43+
44+
/* 按钮颜色样式保留 */
45+
.reset-btn {
46+
background-color: #f8d7da;
47+
color: #721c24;
48+
}
49+
50+
.reset-btn:hover:not(:disabled) {
51+
background-color: #f5c6cb;
52+
}
53+
54+
.start-btn {
55+
background-color: #d4edda;
56+
color: #155724;
57+
}
58+
59+
.start-btn:hover:not(:disabled) {
60+
background-color: #c3e6cb;
61+
}
62+
63+
.step-btn {
64+
background-color: #e2e3e5;
65+
color: #383d41;
66+
}
67+
68+
.step-btn:hover:not(:disabled) {
69+
background-color: #d6d8db;
70+
}
71+
72+
.auto-btn {
73+
background-color: #cce5ff;
74+
color: #004085;
75+
}
76+
77+
.auto-btn:hover:not(:disabled) {
78+
background-color: #b8daff;
79+
}
80+
81+
.auto-btn.active {
82+
background-color: #004085;
83+
color: white;
84+
}
85+
186
.algorithm-controller {
287
background-color: #f8f9fa;
388
border-radius: 8px;
@@ -59,49 +144,10 @@
59144
animation: fadeIn 0.3s ease-in-out;
60145
}
61146

62-
@keyframes fadeIn {
63-
from { opacity: 0; transform: translateY(-5px); }
64-
to { opacity: 1; transform: translateY(0); }
65-
}
66-
67-
.step-result {
68-
display: flex;
69-
align-items: center;
70-
justify-content: center;
71-
width: 24px;
72-
height: 24px;
73-
border-radius: 50%;
74-
margin-right: 10px;
75-
font-weight: bold;
76-
font-size: 1rem;
77-
}
78-
79-
.step-result.success {
80-
background-color: #d4edda;
81-
color: #28a745;
82-
}
83-
84-
.step-result.failure {
85-
background-color: #f8d7da;
86-
color: #dc3545;
87-
}
88-
89147
.step-message {
90148
flex: 1;
91149
}
92150

93-
.step-number {
94-
font-size: 0.8rem;
95-
color: #666;
96-
margin-bottom: 4px;
97-
}
98-
99-
.step-text {
100-
font-size: 0.95rem;
101-
color: #333;
102-
transition: margin-left 0.3s ease-in-out;
103-
}
104-
105151
.controls {
106152
display: flex;
107153
gap: 10px;
@@ -122,47 +168,6 @@
122168
cursor: not-allowed;
123169
}
124170

125-
.reset-btn {
126-
background-color: #f8d7da;
127-
color: #721c24;
128-
}
129-
130-
.reset-btn:hover:not(:disabled) {
131-
background-color: #f5c6cb;
132-
}
133-
134-
.start-btn {
135-
background-color: #d4edda;
136-
color: #155724;
137-
}
138-
139-
.start-btn:hover:not(:disabled) {
140-
background-color: #c3e6cb;
141-
}
142-
143-
.step-btn {
144-
background-color: #e2e3e5;
145-
color: #383d41;
146-
}
147-
148-
.step-btn:hover:not(:disabled) {
149-
background-color: #d6d8db;
150-
}
151-
152-
.auto-btn {
153-
background-color: #cce5ff;
154-
color: #004085;
155-
}
156-
157-
.auto-btn:hover:not(:disabled) {
158-
background-color: #b8daff;
159-
}
160-
161-
.auto-btn.active {
162-
background-color: #004085;
163-
color: white;
164-
}
165-
166171
.algorithm-explanation {
167172
margin-top: 20px;
168173
border-top: 1px solid #eee;

0 commit comments

Comments
 (0)