From 4497f4dfcbfcea7ca2956f8b0900fc44299165a0 Mon Sep 17 00:00:00 2001
From: rohow <admin@dev.cm>
Date: Fri, 30 Jan 2026 23:06:59 +0800
Subject: [PATCH] feat(toc): add sticky positioning and entry animation for
 improved UX

---
 src/styles/header-dividing.scss | 19 ++++++++++++++++-
 src/styles/post-toc.scss        | 37 +++++++++++++++++++++------------
 templates/post.html             |  6 ++++--
 theme.yaml                      |  2 +-
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/styles/header-dividing.scss b/src/styles/header-dividing.scss
index 6a8d7a0..6a59fb9 100644
--- a/src/styles/header-dividing.scss
+++ b/src/styles/header-dividing.scss
@@ -10,6 +10,10 @@
   --dash-spacing: 10px;
   --dash-width: 2px;
 
+  // 进入动画初始状态（仅 sticky 激活时播放）
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+
   // 虚线背景层 - 带遮罩
   &::before {
     content: '';
@@ -81,6 +85,10 @@
     opacity: 0.8;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
+    /* 进入动画：透明度由0到1，宽度由中间到100% */
+    animation: sticky-in 0.5s ease-in-out forwards;
+    opacity: 1;
+
     &::before {
       animation: line-flow 1.5s linear infinite;
       mask-image: none;
@@ -126,4 +134,13 @@
     left: 80%;
     opacity: 0;
   }
-}
\ No newline at end of file
+}
+
+@keyframes sticky-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/styles/post-toc.scss b/src/styles/post-toc.scss
index 6c7f88c..500e533 100644
--- a/src/styles/post-toc.scss
+++ b/src/styles/post-toc.scss
@@ -1,14 +1,21 @@
 @import "variables";
 
+.post-toc-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  transform: translate(-260px, 100px);
+}
+
 .post-toc {
-  position: absolute;
-  left: -280px;
-  top: 85px;
+  position: relative;
   width: 200px;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
   overflow-x: hidden;
-  z-index: 100;
   font-size: 0.8rem;
   line-height: 1.6;
   color: var(--foreground);
@@ -126,6 +133,18 @@
     transition: color 0.15s ease, opacity 0.15s ease;
   }
 
+  // 左侧激活指示线
+  &::before {
+    content: '' !important;
+    position: absolute;
+    left: -10px !important;
+    top: 4px;
+    bottom: 4px;
+    width: 2px;
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
   // 活跃状态
   &--active {
     background-color: color-mix(in srgb, var(--brightBlue) 15%, transparent);
@@ -139,16 +158,8 @@
       color: var(--brightBlue);
     }
 
-    // 左侧激活指示线
     &::before {
-      content: '' !important;
-      position: absolute;
-      left: -10px !important;
-      top: 4px;
-      bottom: 4px;
-      width: 2px;
       background-color: var(--brightBlue);
-      border-radius: 1px;
     }
   }
 }
@@ -178,7 +189,7 @@
 
   &__icon {
     margin-right: 6px;
-    color: var(--yellow);
+    color: var(--red);
   }
 
   &__title {
diff --git a/templates/post.html b/templates/post.html
index 2f4bb84..51d67a3 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -4,8 +4,8 @@
   th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
 >
   <th:block th:fragment="content">
-    <div class="post" x-data="postLineNum" x-init="init()">
-      <!-- 目录组件 -->
+    <!-- 目录组件 -->
+    <div class="post-toc-sticky">
       <div class="post-toc" x-data="postToc" x-init="init()">
         <div class="toc-header">
           <span class="toc-header__icon">&lt;&gt;</span>
@@ -25,6 +25,8 @@
           </template>
         </ul>
       </div>
+    </div>
+    <div class="post" x-data="postLineNum" x-init="init()">
       <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>
diff --git a/theme.yaml b/theme.yaml
index 444bea6..049790c 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -13,5 +13,5 @@ spec:
   repo: https://git.dev.cm/theme-terminal
   settingName: "theme-terminal-setting"
   configMapName: "theme-terminal-configMap"
-  version: 1.2.2
+  version: 1.2.3
   require: ">=2.22.0"