From c59f3e71bef0078309f6a2bbb77d86ce0d8b7404 Mon Sep 17 00:00:00 2001
From: SolitudeRA <solitude@protogalaxy.me>
Date: Wed, 14 Jan 2026 22:46:31 +0900
Subject: [PATCH 1/2] feat/update navbar nav defign

---
 src/styles/modules/dock.css    | 37 +++++++++++++++++++++++++++++-----
 src/styles/theme/dark/dock.css |  4 ++--
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/styles/modules/dock.css b/src/styles/modules/dock.css
index 54e857e..4b3101a 100644
--- a/src/styles/modules/dock.css
+++ b/src/styles/modules/dock.css
@@ -10,8 +10,31 @@
         position: relative;
         background: var(--dock-nav-bg);
         opacity: var(--dock-nav-opacity);
-        box-shadow: 0 10px 40px var(--dock-nav-shadow);
         border-radius: var(--dock-nav-radius);
+        /* 玻璃质感效果 */
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        box-shadow:
+            0 10px 40px var(--dock-nav-shadow),
+            inset 0 1px 1px oklch(1 0 0 / 0.1),
+            inset 0 -1px 1px oklch(0 0 0 / 0.05);
+    }
+
+    /* 顶部光泽渐变 - 玻璃高光效果 + 彩虹光晕 */
+    .dock-nav::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: linear-gradient(
+            180deg,
+            oklch(1 0 0 / 0.12) 0%,
+            oklch(1 0 0 / 0.04) 30%,
+            transparent 60%
+        );
+        box-shadow: 0 0 30px oklch(0.7 0.15 280 / 0.15);
+        pointer-events: none;
+        z-index: 1;
     }
 
     /* 彩虹色边框 - 与 PostView 卡片一致 */
@@ -20,7 +43,7 @@
         position: absolute;
         inset: -1px;
         border-radius: inherit;
-        padding: 1px;
+        padding: 2px;
         background: conic-gradient(
             from 0deg,
             #ff6b6b,
@@ -37,13 +60,17 @@
         -webkit-mask-composite: xor;
         mask-composite: exclude;
         pointer-events: none;
-        opacity: 0.5;
-        transition: opacity 0.3s ease;
+        opacity: 0.4;
+        filter: blur(1px);
+        transition:
+            opacity 0.3s ease,
+            filter 0.3s ease;
         z-index: 0;
     }
 
     .dock-nav:hover::after {
-        opacity: 0.8;
+        opacity: 0.9;
+        filter: blur(2px);
     }
 
     /* 确保导航栏内容在彩虹边框之上 */
diff --git a/src/styles/theme/dark/dock.css b/src/styles/theme/dark/dock.css
index cc35c03..d047c32 100644
--- a/src/styles/theme/dark/dock.css
+++ b/src/styles/theme/dark/dock.css
@@ -4,10 +4,10 @@
 
 .dark {
     /* 桌面端导航栏 */
-    --dock-nav-bg: oklch(0.18 0.025 264.665 / 0.9);
+    --dock-nav-bg: oklch(0.13 0.028 261.692 / 0.85);
     --dock-nav-opacity: 1;
     --dock-nav-shadow: oklch(0 0 0 / 0.3);
-    --dock-nav-radius: 1rem;
+    --dock-nav-radius: 1.2rem;
 
     /* 汉堡按钮（移动端菜单触发器） */
     --dock-button-bg: oklch(0.2 0.03 264.665 / 0.95);

From 35eb3e07cb7270686876323453eecb90f5de710f Mon Sep 17 00:00:00 2001
From: SolitudeRA <solitude@protogalaxy.me>
Date: Wed, 14 Jan 2026 23:26:35 +0900
Subject: [PATCH 2/2] feat: navbar nav design update

---
 src/components/common/RssSelector.tsx    |  5 +-
 src/components/layout/dock/DockNav.astro | 50 +++++++++++++----
 src/styles/modules/dock.css              | 69 ++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 12 deletions(-)

diff --git a/src/components/common/RssSelector.tsx b/src/components/common/RssSelector.tsx
index 77bf2c1..079064a 100644
--- a/src/components/common/RssSelector.tsx
+++ b/src/components/common/RssSelector.tsx
@@ -139,7 +139,10 @@ export default function RssSelector({
             <button
                 onClick={() => setIsOpen(!isOpen)}
                 onKeyDown={handleKeyDown}
-                className="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
+                className={cn(
+                    'text-xs font-medium whitespace-nowrap md:text-sm lg:text-base',
+                    'dock-nav-link',
+                )}
                 aria-label="订阅 RSS"
                 aria-expanded={isOpen}
                 aria-haspopup="listbox"
diff --git a/src/components/layout/dock/DockNav.astro b/src/components/layout/dock/DockNav.astro
index f3216b4..b985b55 100644
--- a/src/components/layout/dock/DockNav.astro
+++ b/src/components/layout/dock/DockNav.astro
@@ -35,45 +35,73 @@ const privacyLink = buildLocalePath(lang, 'privacy-policy');
             '3xl:space-x-12 space-x-2 md:space-x-3 lg:space-x-5 xl:space-x-8 2xl:space-x-10',
         ]}
     >
-        <div>
+        <div class="dock-nav-item">
             <a
                 href={homeLink}
-                class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
+                class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
                 >Home</a
             >
         </div>
-        <div>
+        <div class="dock-nav-item">
             <a
                 href={postsLink}
-                class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
+                class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
                 >Posts</a
             >
         </div>
-        <div>
+        <div class="dock-nav-item">
             <a
                 href={aboutLink}
-                class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
+                class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
                 >About</a
             >
         </div>
-        <div>
+        <div class="dock-nav-item">
             <a
                 href={contactLink}
-                class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
+                class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
                 >Contact</a
             >
         </div>
         <!-- RSS 选择器 - 在平板竖屏隐藏，横屏及以上显示 -->
-        <div class="hidden lg:flex lg:items-center">
+        <div class="dock-nav-item hidden lg:flex">
             <RssSelector client:load showLabel={true} />
         </div>
         <!-- Privacy Policy 仅在大屏显示 -->
-        <div class="hidden xl:block">
+        <div class="dock-nav-item hidden xl:flex">
             <a
                 href={privacyLink}
-                class="text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
+                class="dock-nav-link text-xs font-medium whitespace-nowrap md:text-sm lg:text-base"
                 >Privacy</a
             >
         </div>
     </div>
 </div>
+
+<script>
+    // 方向感知下划线效果
+    function initDirectionalUnderline() {
+        const items = document.querySelectorAll('.dock-nav-item');
+
+        items.forEach((item) => {
+            const link = item.querySelector('.dock-nav-link');
+            if (!link) return;
+
+            item.addEventListener('mouseenter', (e) => {
+                const rect = item.getBoundingClientRect();
+                const mouseX = (e as MouseEvent).clientX;
+                const centerX = rect.left + rect.width / 2;
+
+                // 根据鼠标进入位置判断方向
+                const direction = mouseX < centerX ? 'left' : 'right';
+                link.setAttribute('data-direction', direction);
+            });
+        });
+    }
+
+    // 页面加载时初始化
+    initDirectionalUnderline();
+
+    // 支持 Astro 视图过渡
+    document.addEventListener('astro:after-swap', initDirectionalUnderline);
+</script>
diff --git a/src/styles/modules/dock.css b/src/styles/modules/dock.css
index 4b3101a..8150376 100644
--- a/src/styles/modules/dock.css
+++ b/src/styles/modules/dock.css
@@ -79,6 +79,75 @@
         z-index: 1;
     }
 
+    /* ===== 导航项容器 - 扩展触发区域 ===== */
+    .dock-nav-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 0 0.5rem;
+        cursor: pointer;
+        border-radius: 8px;
+        transition:
+            background 0.3s ease,
+            box-shadow 0.3s ease;
+    }
+
+    /* 玻璃质感高光 hover 效果 */
+    .dock-nav-item:hover {
+        background: oklch(1 0 0 / 0.1);
+        box-shadow:
+            inset 0 1px 0 oklch(1 0 0 / 0.2),
+            inset 0 -1px 0 oklch(0 0 0 / 0.05);
+    }
+
+    /* ===== 导航链接 hover 效果 - 方向感知下划线 ===== */
+    .dock-nav-link {
+        position: relative;
+        display: inline-block;
+        transition: color 0.3s ease;
+    }
+
+    .dock-nav-link::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        height: 2px;
+        background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #54a0ff);
+        border-radius: 1px;
+        transition:
+            left 0.3s ease,
+            right 0.3s ease,
+            width 0.3s ease;
+        width: 0;
+        left: 0;
+        right: auto;
+    }
+
+    /* 父容器 hover 或链接自身 hover 都触发效果 */
+    .dock-nav-item:hover .dock-nav-link::after,
+    .dock-nav-link:hover::after {
+        width: 100%;
+    }
+
+    /* 从右到左进入 */
+    .dock-nav-link[data-direction='right']::after {
+        left: auto;
+        right: 0;
+    }
+
+    /* 从左到右进入 */
+    .dock-nav-link[data-direction='left']::after {
+        left: 0;
+        right: auto;
+    }
+
+    /* 父容器 hover 或链接自身 hover 都改变颜色 */
+    .dock-nav-item:hover .dock-nav-link,
+    .dock-nav-link:hover {
+        color: oklch(0.85 0.1 280);
+    }
+
     /* ===== 汉堡按钮（移动端菜单触发器） ===== */
     .dock-button {
         background: var(--dock-button-bg);