refactor(header): extract dividing styles to separate header-dividing.scss and update imports

src/styles/header-dividing.scss

@@ -0,0 +1,129 @@
+@import './variables.scss';
+
+.dividing {
+  flex: 1;
+  display: block;
+  width: 100%;
+  height: 25px;
+  position: relative;
+  transition: opacity 0.3s ease-in-out;
+  --dash-spacing: 10px;
+  --dash-width: 2px;
+
+  // 虚线背景层 - 带遮罩
+  &::before {
+    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)
+    );
+    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%
+    );
+  }
+
+  // 扫描光效 - 模拟终端扫描线
+  &::after {
+    content: '';
+    position: absolute;
+    left: -30%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 30%;
+    height: 120%;
+    filter: blur(4px);
+    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: var(--background);
+    opacity: 0.8;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    &::before {
+      animation: line-flow 1.5s linear infinite;
+      mask-image: none;
+      -webkit-mask-image: none;
+      top: calc(50% - 1px);
+      height: 2px;
+    }
+
+    &::after {
+      animation: scan-line 2.5s ease-in-out infinite;
+      opacity: 0.6;
+      filter: blur(3px);
+      // 调整扫描线高度以适应 5px 容器
+      height: 200%;
+      width: 25%;
+    }
+  }
+}
+
+// 虚线流动动画 - 模拟加载进度
+@keyframes line-flow {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: var(--dash-spacing) 0;
+  }
+}
+
+// 扫描线动画 - 模拟终端扫描效果
+@keyframes scan-line {
+  0% {
+    left: -20%;
+    opacity: 0;
+  }
+  30% {
+    opacity: .3;
+  }
+  70% {
+    opacity: .3;
+  }
+  100% {
+    left: 80%;
+    opacity: 0;
+  }
+}

src/styles/header.scss

@@ -18,132 +18,6 @@
     flex: 1;
   }
 
-  .dividing {
-    flex: 1;
-    display: block;
-    width: 100%;
-    height: 25px;
-    position: relative;
-    --dash-spacing: 10px;
-    --dash-width: 2px;
-
-    // 虚线背景层 - 带遮罩
-    &::before {
-      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)
-      );
-      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%
-      );
-    }
-
-    // 扫描光效 - 模拟终端扫描线
-    &::after {
-      content: '';
-      position: absolute;
-      left: -30%;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 30%;
-      height: 120%;
-      filter: blur(4px);
-      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: var(--background);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-      &::before {
-        animation: line-flow 1.5s linear infinite;
-        mask-image: none;
-        -webkit-mask-image: none;
-        top: calc(50% - 1px);
-        height: 2px;
-      }
-
-      &::after {
-        animation: scan-line 2.5s ease-in-out infinite;
-        opacity: 0.6;
-        filter: blur(3px);
-        // 调整扫描线高度以适应 5px 容器
-        height: 200%;
-        width: 25%;
-      }
-    }
-  }
-
-  // 虚线流动动画 - 模拟加载进度
-  @keyframes line-flow {
-    0% {
-      background-position: 0 0;
-    }
-    100% {
-      background-position: var(--dash-spacing) 0;
-    }
-  }
-
-  // 扫描线动画 - 模拟终端扫描效果
-  @keyframes scan-line {
-    0% {
-      left: -20%;
-      opacity: 0;
-    }
-    30% {
-      opacity: .3;
-    }
-    70% {
-      opacity: .3;
-    }
-    100% {
-      left: 80%;
-      opacity: 0;
-    }
-  }
-
   .menu {
     margin: 20px 0;
 

src/styles/style.scss

@@ -2,10 +2,11 @@
 @tailwind utilities;
 @tailwind components;
 
+@import 'main';
+@import 'logo';
 @import 'buttons';
 @import 'header';
-@import 'logo';
+@import 'header-dividing';
-@import 'main';
 @import 'post';
 @import 'post-line-num';
 @import 'post-toc';