优化CodeDisplay组件样式，增加变量监视面板样式

Author: CC11001100

src/components/tree/CodeDisplay.css

@@ -5,6 +5,9 @@
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   font-size: 13px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .code-header {
@@ -33,7 +36,7 @@
 .code-content {
   display: flex;
   overflow-x: auto;
-  max-height: 600px;
+  flex: 1;
   overflow-y: auto;
 }
 
@@ -44,15 +47,35 @@
   background-color: #252526;
   border-right: 1px solid #3d3d3d;
   user-select: none;
-  min-width: 40px;
+  min-width: 50px;
 }
 
 .line-number {
-  padding: 0 12px;
+  padding: 0 8px 0 12px;
   color: #858585;
   text-align: right;
   line-height: 1.6;
   font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.line-number.execution-line {
+  background-color: rgba(255, 235, 59, 0.1);
+  color: #ffeb3b;
+}
+
+.execution-arrow {
+  color: #ffeb3b;
+  font-size: 10px;
+  animation: pulse-arrow 1s ease-in-out infinite;
+}
+
+@keyframes pulse-arrow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 
 .code-lines {
@@ -69,38 +92,77 @@
   line-height: 1.6;
   white-space: pre;
   transition: background-color 0.3s ease;
+  min-height: 21px;
 }
 
 .code-line.highlighted {
-  background-color: rgba(255, 235, 59, 0.15);
-  border-left: 3px solid #ffeb3b;
-  padding-left: 9px;
-  animation: highlight-pulse 1.5s ease-in-out infinite;
+  background-color: rgba(255, 235, 59, 0.1);
 }
 
-@keyframes highlight-pulse {
-  0%, 100% {
-    background-color: rgba(255, 235, 59, 0.15);
-  }
-  50% {
-    background-color: rgba(255, 235, 59, 0.25);
-  }
+.code-line.execution {
+  background-color: rgba(255, 235, 59, 0.2);
+  border-left: 3px solid #ffeb3b;
+  padding-left: 9px;
 }
 
 .code-text {
   color: #d4d4d4;
+  flex-shrink: 0;
 }
 
-.variable-value {
-  margin-left: 20px;
+/* 变量标注样式 */
+.variable-annotations {
+  display: inline-flex;
+  gap: 8px;
+  margin-left: 16px;
+  flex-wrap: wrap;
+}
+
+.variable-tag {
+  display: inline-flex;
+  align-items: center;
   padding: 2px 8px;
-  background-color: rgba(76, 175, 80, 0.2);
-  border: 1px solid #4caf50;
   border-radius: 4px;
-  color: #4caf50;
   font-size: 11px;
-  white-space: nowrap;
   animation: fade-in 0.3s ease;
+  white-space: nowrap;
+}
+
+.variable-tag.variable-node {
+  background-color: rgba(33, 150, 243, 0.2);
+  border: 1px solid #2196F3;
+  color: #64B5F6;
+}
+
+.variable-tag.variable-value {
+  background-color: rgba(156, 39, 176, 0.2);
+  border: 1px solid #9C27B0;
+  color: #CE93D8;
+}
+
+.variable-tag.variable-result {
+  background-color: rgba(76, 175, 80, 0.2);
+  border: 1px solid #4CAF50;
+  color: #81C784;
+}
+
+.variable-tag.variable-size {
+  background-color: rgba(255, 152, 0, 0.2);
+  border: 1px solid #FF9800;
+  color: #FFB74D;
+}
+
+.var-name {
+  font-weight: 500;
+}
+
+.var-equals {
+  margin: 0 4px;
+  opacity: 0.7;
+}
+
+.var-value {
+  font-weight: 600;
 }
 
 @keyframes fade-in {
@@ -114,6 +176,92 @@
   }
 }
 
+/* 旧的变量值样式（保留兼容） */
+.variable-value {
+  margin-left: 20px;
+  padding: 2px 8px;
+  background-color: rgba(76, 175, 80, 0.2);
+  border: 1px solid #4caf50;
+  border-radius: 4px;
+  color: #4caf50;
+  font-size: 11px;
+  white-space: nowrap;
+  animation: fade-in 0.3s ease;
+}
+
+/* 变量监视面板 */
+.variables-panel {
+  background-color: #252526;
+  border-top: 1px solid #3d3d3d;
+  padding: 10px 12px;
+  min-height: 60px;
+  max-height: 120px;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.variables-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #9cdcfe;
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #3d3d3d;
+}
+
+.variables-icon {
+  font-size: 12px;
+}
+
+.variables-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+
+.variable-item {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+}
+
+.variable-key {
+  color: #9cdcfe;
+  font-weight: 500;
+}
+
+.variable-separator {
+  color: #666;
+  margin: 0 4px;
+}
+
+.variable-val {
+  font-weight: 600;
+}
+
+.variable-val.val-null {
+  color: #569cd6;
+}
+
+.variable-val.val-true {
+  color: #4ec9b0;
+}
+
+.variable-val.val-false {
+  color: #f48771;
+}
+
+.variable-val.val-number {
+  color: #b5cea8;
+}
+
+.variable-val.val-string {
+  color: #ce9178;
+}
+
 /* 语法高亮颜色 */
 .code-text .keyword {
   color: #569cd6;
@@ -145,21 +293,25 @@
 }
 
 /* 滚动条样式 */
-.code-content::-webkit-scrollbar {
+.code-content::-webkit-scrollbar,
+.variables-panel::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
-.code-content::-webkit-scrollbar-track {
+.code-content::-webkit-scrollbar-track,
+.variables-panel::-webkit-scrollbar-track {
   background: #1e1e1e;
 }
 
-.code-content::-webkit-scrollbar-thumb {
+.code-content::-webkit-scrollbar-thumb,
+.variables-panel::-webkit-scrollbar-thumb {
   background: #424242;
   border-radius: 4px;
 }
 
-.code-content::-webkit-scrollbar-thumb:hover {
+.code-content::-webkit-scrollbar-thumb:hover,
+.variables-panel::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
 
@@ -174,11 +326,24 @@
   }
 
   .line-number {
-    padding: 0 8px;
-    min-width: 30px;
+    padding: 0 6px 0 8px;
+    min-width: 40px;
   }
 
   .code-line {
     padding: 0 8px;
   }
+  
+  .variable-annotations {
+    margin-left: 8px;
+  }
+  
+  .variable-tag {
+    padding: 1px 6px;
+    font-size: 10px;
+  }
+  
+  .variables-panel {
+    max-height: 80px;
+  }
 }