fix(ui): enhance header styles with terminal-like animations for menu items

src/styles/header.scss

@@ -141,12 +141,15 @@
       border: 2px solid var(--red);
       background: var(--background);
       box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background);
+      overflow: hidden;
 
       li {
         padding: 5px;
         white-space: nowrap;
         text-decoration: underline;
         color: var(--green);
+        opacity: 0;
+        transform: translateX(-10px);
 
         &:not(:last-of-type) {
           margin-right: 0;
@@ -155,6 +158,19 @@
 
       &.open {
         display: block;
+        animation: terminal-frame 0.2s ease-out;
+
+        // 逐行渲染效果 - 为每个子项添加延迟动画
+        li {
+          animation: terminal-line 0.2s ease-out forwards;
+
+          // 为前20个菜单项添加递增延迟
+          @for $i from 1 through 20 {
+            &:nth-child(#{$i}) {
+              animation-delay: #{($i * 0.05) + 0.1}s;
+            }
+          }
+        }
       }
     }
   }
@@ -165,4 +181,34 @@
     margin: 0 0 0 .5rem;
     padding: 0;
   }
+
+  // 菜单框架渲染动画 - 模拟终端窗口从上到下打开
+  @keyframes terminal-frame {
+    0% {
+      max-height: 0;
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      max-height: 800px;
+      opacity: 1;
+    }
+  }
+
+  // 菜单项逐行渲染动画 - 模拟终端文本逐行输出
+  @keyframes terminal-line {
+    0% {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
 }