fix(ui): enhance header and post styles with new animations and layout adjustments

src/styles/header.scss

@@ -158,7 +158,7 @@
 
       &.open {
         display: block;
-        animation: terminal-frame 0.2s ease-out;
+        animation: terminal-frame-reveal 0.3s ease-out forwards;
 
         // 逐行渲染效果 - 为每个子项添加延迟动画
         li {
@@ -182,17 +182,14 @@
     padding: 0;
   }
 
-  // 菜单框架渲染动画 - 模拟终端窗口从上到下打开
-  @keyframes terminal-frame {
+  // 菜单框架渲染动画 - 从上到下逐层渲染边框和内容
+  @keyframes terminal-frame-reveal {
     0% {
-      max-height: 0;
-      opacity: 0;
-    }
-    50% {
+      clip-path: inset(-10px -10px calc(100% + 10px) -10px);
       opacity: 1;
     }
     100% {
-      max-height: 800px;
+      clip-path: inset(-10px -10px -10px -10px);
       opacity: 1;
     }
   }
@@ -201,7 +198,7 @@
   @keyframes terminal-line {
     0% {
       opacity: 0;
-      transform: translateX(-10px);
+      transform: translateX(-2px);
     }
     50% {
       opacity: 0.5;

src/styles/post.scss

@@ -38,6 +38,8 @@
   }
 
   %meta {
+    display: flex;
+    align-items: center;
     font-size: 1rem;
     margin-bottom: 10px;
     color: var(--brightBlue);
@@ -53,6 +55,30 @@
     display: inline;
   }
 
+  &-separator {
+    position: relative;
+    top: 1px;
+    display: inline-grid;
+    grid-template-columns: repeat(2, 3px);
+    grid-template-rows: repeat(2, 3px);
+    gap: 2px;
+    margin: 0 6px;
+
+    span {
+      width: 2px;
+      height: 2px;
+      background-color: var(--brightBlue);
+      border-radius: 50%;
+      opacity: 0.2;
+    }
+
+    // 每个点使用不同动画和时长，形成随机效果
+    span:nth-child(1) { animation: dot-blink-1 2.8s ease-in-out infinite; }
+    span:nth-child(2) { animation: dot-blink-2 2.2s ease-in-out infinite 0.4s; }
+    span:nth-child(3) { animation: dot-blink-3 3.4s ease-in-out infinite 1s; }
+    span:nth-child(4) { animation: dot-blink-4 2.6s ease-in-out infinite 0.2s; }
+  }
+
   &-title {
     --border: 3px dotted var(--blue);
 
@@ -173,3 +199,33 @@
   position: relative;
   z-index: 2;
 }
+
+// 4个不同的随机动画模式
+@keyframes dot-blink-1 {
+  0%, 100% { opacity: 0.2; }
+  25% { opacity: 1; }
+  50% { opacity: 0.3; }
+  75% { opacity: 0.8; }
+}
+
+@keyframes dot-blink-2 {
+  0%, 100% { opacity: 0.3; }
+  30% { opacity: 0.9; }
+  60% { opacity: 0.2; }
+  85% { opacity: 0.7; }
+}
+
+@keyframes dot-blink-3 {
+  0%, 100% { opacity: 0.2; }
+  20% { opacity: 0.6; }
+  45% { opacity: 1; }
+  70% { opacity: 0.4; }
+}
+
+@keyframes dot-blink-4 {
+  0%, 100% { opacity: 0.4; }
+  15% { opacity: 0.2; }
+  40% { opacity: 0.8; }
+  65% { opacity: 1; }
+  90% { opacity: 0.3; }
+}

templates/index.html

@@ -12,18 +12,21 @@
       <div class="posts">
         <div class="post on-list" th:each="post : ${posts.items}">
           <h1 class="post-title">
-            <a th:text="${post.spec.title}" th:href="${post.status.permalink}">Post Title</a>
+            <a th:text="'<' + ${post.spec.title} + '>'" th:href="${post.status.permalink}">Post Title</a>
           </h1>
           <div class="post-meta">
             <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
               Post CreateTime
             </span>
-            <span
-              class="post-author"
-              th:with="contributor = ${post.contributors[0]}"
-              th:text="${':: '+contributor.displayName}"
-              >:: Author</span
-            >
+            <span class="post-separator">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+            <span class="post-author" th:with="contributor = ${post.contributors[0]}" th:text="${contributor.displayName}">
+              Author
+            </span>
           </div>
           <span class="post-tags-inline" th:each="tag : ${post.tags}">
             <a

templates/post.html

@@ -5,10 +5,16 @@
 >
   <th:block th:fragment="content">
     <div class="post">
-      <h1 class="post-title" th:text="${post.spec.title}">Post Title</h1>
+      <h1 class="post-title" th:text="'<' + ${post.spec.title} + '>'">Post Title</h1>
       <div class="post-meta">
         <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
-        <span class="post-author" th:text="${':: '+post.owner.displayName}">:: Author</span>
+        <span class="post-separator">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <span class="post-author" th:text="${post.owner.displayName}">Author</span>
       </div>
       <span class="post-tags-inline" th:each="tag : ${post.tags}">
         <a