style: 优化应用样式和布局

Author: CC11001100

src/App.css

@@ -49,6 +49,9 @@
   --text-color: #333;
   --light-bg: #f5f5f5;
   --border-color: #ddd;
+  --highlight-color: #FF5722;
+  --code-bg: #282c34;
+  --code-text: #abb2bf;
 }
 
 * {
@@ -79,12 +82,16 @@ body, html {
   align-items: center;
   padding: 0 10px 5px 10px;
   border-bottom: 1px solid var(--border-color);
-  height: 50px;
+  height: 60px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 5px;
 }
 
 .app-header h1 {
   font-size: 1.5rem;
   margin: 0;
+  color: var(--primary-color);
 }
 
 .stairs-config {
@@ -103,17 +110,29 @@ body, html {
 .app-content {
   display: flex;
   flex: 1;
-  height: calc(100vh - 60px);
+  height: calc(100vh - 70px);
   overflow: hidden;
 }
 
 .left-panel {
-  width: 25%;
+  width: 30%;
   padding: 5px;
   overflow-y: auto;
   border-right: 1px solid var(--border-color);
 }
 
+.left-panel h2 {
+  margin-bottom: 10px;
+  color: var(--primary-color);
+  padding-bottom: 5px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.left-panel h3 {
+  color: var(--secondary-color);
+  margin: 10px 0;
+}
+
 .center-panel {
   flex: 1;
   display: flex;
@@ -125,13 +144,16 @@ body, html {
 .center-panel svg {
   flex: 1;
   min-height: 0;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .algorithm-description {
   margin-top: 10px;
   padding: 10px;
   background-color: var(--light-bg);
   border-radius: 4px;
+  border-left: 4px solid var(--primary-color);
 }
 
 .algorithm-description h3 {
@@ -141,6 +163,60 @@ body, html {
 
 .algorithm-description ul {
   padding-left: 20px;
+  text-align: left;
+}
+
+.algorithm-description li {
+  margin-bottom: 5px;
+}
+
+/* 代码面板样式 */
+.code-section {
+  margin-top: 20px;
+}
+
+.code-panel {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 10px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+pre {
+  background-color: var(--code-bg);
+  color: var(--code-text);
+  padding: 10px;
+  border-radius: 4px;
+  overflow: auto;
+  font-family: 'Fira Code', monospace;
+  text-align: left;
+}
+
+code {
+  font-family: 'Fira Code', monospace;
+}
+
+/* 步骤显示样式 */
+.step-description {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #E3F2FD;
+  border-radius: 4px;
+  border-left: 4px solid var(--secondary-color);
+  text-align: left;
+}
+
+/* 高亮动画 */
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+.node-highlight {
+  animation: pulse 1.5s infinite;
+  filter: drop-shadow(0 0 5px var(--highlight-color));
 }
 
 /* 色盲模式支持 */
@@ -157,19 +233,48 @@ button:focus, input:focus {
 }
 
 /* 响应式设计 */
+@media (max-width: 1024px) {
+  .app-content {
+    flex-direction: column;
+  }
+  
+  .left-panel {
+    width: 100%;
+    height: 40%;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .algorithm-description, .code-section {
+    width: 50%;
+    padding: 5px;
+  }
+  
+  .center-panel {
+    height: 60%;
+  }
+}
+
 @media (max-width: 768px) {
   .app-content {
     flex-direction: column;
   }
 
   .left-panel {
     width: 100%;
-    height: 30%;
+    height: 50%;
     border-right: none;
     border-bottom: 1px solid var(--border-color);
+    flex-direction: column;
+  }
+  
+  .algorithm-description, .code-section {
+    width: 100%;
   }
 
   .center-panel {
-    height: 70%;
+    height: 50%;
   }
 }