From 9fa32cdd5ad883e42c2fdbe1cec7869b28ead253 Mon Sep 17 00:00:00 2001
From: rohow <admin@dev.cm>
Date: Wed, 28 Jan 2026 15:56:25 +0800
Subject: [PATCH] fix(ui): update halo image version and enhance header styles
 with animations

---
 docker/docker-compose.yaml    |  2 +-
 src/styles/header.scss        | 87 ++++++++++++++++++++++++++++++++++-
 templates/modules/header.html |  6 ++-
 3 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 9e48353..91d74f7 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -1,6 +1,6 @@
 services:
   halo:
-    image: registry.fit2cloud.com/halo/halo:2.20.10
+    image: registry.fit2cloud.com/halo/halo:2.22.12
     volumes:
       - ./data:/root/.halo2
       - ../:/root/.halo2/themes/theme-terminal
diff --git a/src/styles/header.scss b/src/styles/header.scss
index c418a8e..41aa66b 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -13,10 +13,95 @@
 
   .dividing {
     flex: 1;
-    background: repeating-linear-gradient(90deg, var(--foreground), var(--foreground) 2px, transparent 0, transparent 10px);
     display: block;
     width: 100%;
     height: 25px;
+    position: relative;
+
+    // 虚线背景层 - 带遮罩
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: repeating-linear-gradient(
+                      90deg,
+                      var(--foreground),
+                      var(--foreground) 2px,
+                      transparent 0,
+                      transparent 10px
+      );
+      background-size: 10px 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;
+    }
+  }
+
+  // 虚线流动动画 - 模拟加载进度
+  @keyframes line-flow {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 10px 0;
+    }
+  }
+
+  // 扫描线动画 - 模拟终端扫描效果
+  @keyframes scan-line {
+    0% {
+      left: -20%;
+      opacity: 0;
+    }
+    30% {
+      opacity: .3;
+    }
+    70% {
+      opacity: .3;
+    }
+    100% {
+      left: 80%;
+      opacity: 0;
+    }
   }
 
   .menu {
diff --git a/templates/modules/header.html b/templates/modules/header.html
index c425e79..31c398c 100644
--- a/templates/modules/header.html
+++ b/templates/modules/header.html
@@ -51,6 +51,7 @@
           <a
             class="text-gray-600 hover:text-blue-600"
             th:href="${menuItem.status.href}"
+            th:target="${menuItem.spec.target?.value}"
             th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
           ></a>
           <ul 
@@ -61,8 +62,9 @@
             <li th:each="childMenuItem : ${menuItem.children}">
               <a 
                 class="text-gray-600 hover:text-blue-600" 
-                th:href="${childMenuItem.status.href} " 
-                th:text="${childMenuItem.status.displayName} "
+                th:href="${childMenuItem.status.href}"
+                th:target="${childMenuItem.spec.target?.value}"
+                th:text="${childMenuItem.status.displayName}"
               ></a>
             </li>
           </ul>