refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability

src/styles/header-dividing.scss

@@ -1,4 +1,4 @@
-@import './variables.scss';
+@import "./variables.scss";
 
 .dividing {
   flex: 1;
@@ -10,48 +10,35 @@
   --dash-spacing: 10px;
   --dash-width: 2px;
 
-  // 进入动画初始状态（仅 sticky 激活时播放）
   opacity: 1;
   transition: opacity 0.3s ease-in-out;
 
   // 虚线背景层 - 带遮罩
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: repeating-linear-gradient(
-                    90deg,
-                    var(--foreground),
-                    var(--foreground) var(--dash-width),
-                    transparent 0,
-                    transparent var(--dash-spacing)
+      90deg,
+      var(--foreground),
+      var(--foreground) var(--dash-width),
+      transparent 0,
+      transparent var(--dash-spacing)
     );
     background-size: var(--dash-spacing) 100%;
     animation: line-flow 3s linear infinite;
 
     // 遮罩层实现虚线淡入淡出效果
-    mask-image: linear-gradient(
-                    90deg,
-                    transparent 0%,
-                    black 3%,
-                    black 97%,
-                    transparent 100%
-    );
-    -webkit-mask-image: linear-gradient(
-                    90deg,
-                    transparent 0%,
-                    black 3%,
-                    black 97%,
-                    transparent 100%
-    );
+    mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
+    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
   }
 
   // 扫描光效 - 模拟终端扫描线
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     left: -5%;
     top: 50%;
@@ -59,48 +46,13 @@
     width: 30%;
     height: 120%;
     filter: blur(4px);
-    background: linear-gradient(
-                    90deg,
-                    transparent 0%,
-                    var(--green) 80%,
-                    transparent 100%
-    );
+    background: linear-gradient(90deg, transparent 0%, var(--green) 80%, transparent 100%);
     opacity: 0.3;
     animation: scan-line 5s ease-in-out infinite;
     pointer-events: none;
     z-index: 10;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
-
-  &.sticky {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 5px;
-    z-index: 100;
-    --dash-spacing: 6px;
-    --dash-width: 2px;
-    background-color: color-mix(in srgb, var(--background) 90%, transparent);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-    // 进入动画：透明度由0到1
-    animation: sticky-in 0.5s ease-in-out forwards;
-    opacity: 1;
-
-    &::before {
-      top: calc(50% - 1px);
-      height: 2px;
-    }
-
-    &::after {
-      opacity: 0.6;
-      filter: blur(3px);
-      // 调整扫描线高度以适应 5px 容器
-      height: 200%;
-      width: 25%;
-    }
-  }
 }
 
 // 虚线流动动画 - 模拟加载进度
@@ -122,22 +74,13 @@
   }
   30% {
     width: 30%;
-    opacity: .3;
+    opacity: 0.3;
   }
   70% {
-    opacity: .3;
+    opacity: 0.3;
   }
   100% {
     left: 80%;
     opacity: 0;
   }
 }
-
-@keyframes sticky-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}