fix(version): update theme version to 1.1.8 and require minimum version 2.22.0

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "theme-terminal",
   "private": true,
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "A terminal like theme for Halo.",
   "scripts": {
     "dev": "vite build --watch",

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 {
@@ -56,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;
@@ -70,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;
+            }
+          }
+        }
       }
     }
   }
@@ -80,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);
+    }
+  }
 }

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>

theme.yaml

@@ -13,5 +13,5 @@ spec:
   repo: https://git.dev.cm/theme-terminal
   settingName: "theme-terminal-setting"
   configMapName: "theme-terminal-configMap"
-  version: 1.1.7
-  require: ">=2.20.0"
+  version: 1.1.8
+  require: ">=2.22.0"