From 17e496e5d5e8f8985c9df469347b13b8213849f0 Mon Sep 17 00:00:00 2001
From: SolitudeRA <solitude@protogalaxy.me>
Date: Tue, 13 Jan 2026 21:06:09 +0900
Subject: [PATCH] feat: navbar style management update, navbar nav design
 update

---
 src/components/layout/dock/DockNav.astro      |   4 +-
 src/components/layout/dock/DockNavMobile.tsx  |  40 +++---
 .../layout/dock/DockSocialMobile.tsx          |  10 +-
 src/styles/components/dock.css                | 122 ++++++++++++++++++
 src/styles/index.css                          |   1 +
 src/styles/theme.css                          |  32 +++++
 6 files changed, 182 insertions(+), 27 deletions(-)
 create mode 100644 src/styles/components/dock.css

diff --git a/src/components/layout/dock/DockNav.astro b/src/components/layout/dock/DockNav.astro
index b3d30b8..f3216b4 100644
--- a/src/components/layout/dock/DockNav.astro
+++ b/src/components/layout/dock/DockNav.astro
@@ -26,8 +26,8 @@ const privacyLink = buildLocalePath(lang, 'privacy-policy');
 <div class="hidden md:grid md:justify-items-center">
     <div
         class:list={[
-            'text-color-ui flex items-center justify-center rounded-[2em]',
-            'bg-gray-100 opacity-[0.85] shadow-xl dark:bg-zinc-800',
+            'dock-nav',
+            'text-color-ui flex items-center justify-center',
             'h-10 md:h-11 lg:h-12 xl:h-14',
             'min-h-[2.5rem] md:min-h-[2.75rem] lg:min-h-[3rem]',
             'w-auto max-w-full',
diff --git a/src/components/layout/dock/DockNavMobile.tsx b/src/components/layout/dock/DockNavMobile.tsx
index 61f9a8c..86a4bd0 100644
--- a/src/components/layout/dock/DockNavMobile.tsx
+++ b/src/components/layout/dock/DockNavMobile.tsx
@@ -188,11 +188,9 @@ export default function DockNavMobile() {
             <button
                 onClick={toggleMenu}
                 className={cn(
-                    'text-color-ui flex h-12 w-12 items-center justify-center rounded-full',
-                    'bg-gray-100 opacity-85 shadow-lg transition-all duration-300',
-                    'dark:bg-zinc-800',
-                    'hover:opacity-100 active:scale-95',
-                    'focus-visible:ring-foreground/50 focus:outline-none focus-visible:ring-2',
+                    'dock-button',
+                    'text-color-ui flex h-12 w-12 items-center justify-center',
+                    isOpen && 'dock-button--active',
                 )}
                 aria-label={isOpen ? '关闭菜单' : '打开菜单'}
                 aria-expanded={isOpen}
@@ -207,7 +205,7 @@ export default function DockNavMobile() {
             {/* 遮罩层 */}
             <div
                 className={cn(
-                    'fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300',
+                    'dock-overlay fixed inset-0 z-40 transition-opacity duration-300',
                     isOpen
                         ? 'pointer-events-auto opacity-100'
                         : 'pointer-events-none opacity-0',
@@ -219,8 +217,8 @@ export default function DockNavMobile() {
             {/* 菜单面板 */}
             <div
                 className={cn(
-                    'fixed right-4 bottom-20 left-4 z-50',
-                    'rounded-2xl bg-gray-100 p-4 shadow-2xl dark:bg-zinc-800',
+                    'dock-menu',
+                    'fixed right-4 bottom-20 left-4 z-50 p-4',
                     'transform transition-all duration-300 ease-out',
                     'max-h-[70vh] overflow-y-auto',
                     isOpen
@@ -238,13 +236,20 @@ export default function DockNavMobile() {
                                 <button
                                     onClick={toggleRssMenu}
                                     className={cn(
-                                        'text-color-ui flex w-full items-center justify-between rounded-xl px-4 py-3 font-medium',
-                                        'transition-colors duration-200',
-                                        'hover:bg-gray-200 dark:hover:bg-zinc-700',
+                                        'dock-menu-item',
+                                        'text-color-ui flex w-full items-center justify-between',
                                         isRssExpanded &&
-                                            'bg-gray-200 dark:bg-zinc-700',
+                                            'dock-menu-item--active',
                                     )}
                                     aria-expanded={isRssExpanded}
+                                    style={
+                                        isRssExpanded
+                                            ? {
+                                                  background:
+                                                      'var(--dock-menu-item-hover-bg)',
+                                              }
+                                            : undefined
+                                    }
                                 >
                                     <span>{item.label}</span>
                                     <ChevronDown
@@ -274,9 +279,8 @@ export default function DockNavMobile() {
                                                     )
                                                 }
                                                 className={cn(
-                                                    'text-color-ui flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium',
-                                                    'transition-colors duration-200',
-                                                    'hover:bg-gray-200 dark:hover:bg-zinc-700',
+                                                    'dock-menu-subitem',
+                                                    'text-color-ui flex items-center gap-2',
                                                     option.id === currentLocale
                                                         ? 'bg-primary/10 text-primary'
                                                         : '',
@@ -303,10 +307,8 @@ export default function DockNavMobile() {
                                 href={item.href}
                                 onClick={closeMenu}
                                 className={cn(
-                                    'text-color-ui block rounded-xl px-4 py-3 font-medium',
-                                    'transition-colors duration-200',
-                                    'hover:bg-gray-200 dark:hover:bg-zinc-700',
-                                    'active:bg-gray-300 dark:active:bg-zinc-600',
+                                    'dock-menu-item',
+                                    'text-color-ui block',
                                 )}
                             >
                                 {item.label}
diff --git a/src/components/layout/dock/DockSocialMobile.tsx b/src/components/layout/dock/DockSocialMobile.tsx
index 171aafd..b4a8336 100644
--- a/src/components/layout/dock/DockSocialMobile.tsx
+++ b/src/components/layout/dock/DockSocialMobile.tsx
@@ -56,7 +56,7 @@ export default function DockSocialMobile() {
             {/* 汉堡按钮 */}
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className={`flex h-10 w-10 items-center justify-center rounded-full bg-gray-100/85 shadow-lg backdrop-blur-sm transition-all duration-200 hover:scale-105 sm:h-11 sm:w-11 dark:bg-zinc-800/85 ${isOpen ? 'ring-2 ring-blue-400' : ''} `}
+                className={`dock-button flex h-10 w-10 items-center justify-center sm:h-11 sm:w-11 ${isOpen ? 'dock-button--active' : ''}`}
                 aria-label="Social links menu"
                 aria-expanded={isOpen}
             >
@@ -66,16 +66,14 @@ export default function DockSocialMobile() {
             {/* 遮罩层 */}
             {isOpen && (
                 <div
-                    className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
+                    className="dock-overlay fixed inset-0 z-40"
                     onClick={() => setIsOpen(false)}
                 />
             )}
 
             {/* 弹出菜单 */}
             {isOpen && (
-                <div
-                    className={`animate-in slide-in-from-bottom-4 fade-in fixed right-4 bottom-24 z-50 min-w-[200px] rounded-2xl bg-gray-100/95 p-4 shadow-2xl backdrop-blur-md duration-200 sm:right-6 dark:bg-zinc-800/95`}
-                >
+                <div className="dock-menu animate-in slide-in-from-bottom-4 fade-in fixed right-4 bottom-24 z-50 min-w-[200px] p-4 duration-200 sm:right-6">
                     <div className="flex flex-col gap-3">
                         {socialLinks.map((link) => (
                             <a
@@ -83,7 +81,7 @@ export default function DockSocialMobile() {
                                 href={link.href}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-gray-200/80 dark:hover:bg-zinc-700/80"
+                                className="dock-social-item flex items-center gap-3"
                                 onClick={() => setIsOpen(false)}
                             >
                                 <link.icon className="h-5 w-5" />
diff --git a/src/styles/components/dock.css b/src/styles/components/dock.css
new file mode 100644
index 0000000..2ce1b75
--- /dev/null
+++ b/src/styles/components/dock.css
@@ -0,0 +1,122 @@
+/**
+ * Dock 组件样式
+ * 底部导航栏及移动端菜单的主题化样式
+ */
+
+@layer components {
+    /* ===== 桌面端导航栏 ===== */
+    .dock-nav {
+        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);
+    }
+
+    /* 彩虹色边框 - 与 PostView 卡片一致 */
+    .dock-nav::after {
+        content: '';
+        position: absolute;
+        inset: -1px;
+        border-radius: inherit;
+        padding: 1px;
+        background: conic-gradient(
+            from 0deg,
+            #ff6b6b,
+            #feca57,
+            #48dbfb,
+            #ff9ff3,
+            #54a0ff,
+            #5f27cd,
+            #ff6b6b
+        );
+        -webkit-mask:
+            linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+        pointer-events: none;
+        opacity: 0.5;
+        transition: opacity 0.3s ease;
+        z-index: 0;
+    }
+
+    .dock-nav:hover::after {
+        opacity: 0.8;
+    }
+
+    /* 确保导航栏内容在彩虹边框之上 */
+    .dock-nav > * {
+        position: relative;
+        z-index: 1;
+    }
+
+    /* ===== 汉堡按钮（移动端菜单触发器） ===== */
+    .dock-button {
+        background: var(--dock-button-bg);
+        box-shadow: 0 4px 20px var(--dock-button-shadow);
+        @apply rounded-full transition-all duration-300;
+    }
+
+    .dock-button:hover {
+        @apply opacity-100;
+    }
+
+    .dock-button:active {
+        @apply scale-95;
+    }
+
+    .dock-button:focus-visible {
+        @apply ring-2 outline-none;
+        --tw-ring-color: var(--dock-button-ring);
+    }
+
+    .dock-button--active {
+        @apply ring-2;
+        --tw-ring-color: var(--dock-button-ring);
+    }
+
+    /* ===== 遮罩层 ===== */
+    .dock-overlay {
+        background: var(--dock-overlay-bg);
+        @apply backdrop-blur-sm;
+    }
+
+    /* ===== 菜单面板 ===== */
+    .dock-menu {
+        background: var(--dock-menu-bg);
+        box-shadow: 0 25px 50px -12px var(--dock-menu-shadow);
+        @apply rounded-2xl backdrop-blur-md;
+    }
+
+    /* ===== 菜单项 ===== */
+    .dock-menu-item {
+        @apply rounded-xl px-4 py-3 font-medium transition-colors duration-200;
+    }
+
+    .dock-menu-item:hover {
+        background: var(--dock-menu-item-hover-bg);
+    }
+
+    .dock-menu-item:active {
+        background: var(--dock-menu-item-active-bg);
+    }
+
+    /* 子菜单项（RSS 选项等） */
+    .dock-menu-subitem {
+        @apply rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200;
+    }
+
+    .dock-menu-subitem:hover {
+        background: var(--dock-menu-item-hover-bg);
+    }
+
+    /* ===== 社交链接菜单项 ===== */
+    .dock-social-item {
+        @apply rounded-lg px-3 py-2 transition-colors duration-200;
+    }
+
+    .dock-social-item:hover {
+        background: var(--dock-menu-item-hover-bg);
+    }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index ab50434..affacc8 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -6,4 +6,5 @@
 @import './tailwind-settings.css';
 @import './components/article/index.css';
 @import './components/navbar.css';
+@import './components/dock.css';
 @import './utilities/text-utilities.css';
diff --git a/src/styles/theme.css b/src/styles/theme.css
index ca98125..e80e029 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -162,6 +162,24 @@ html[lang='en-GB'] {
     --navbar-scrolled-border: oklch(0.5 0.01 264.665 / 0.1);
     --navbar-scrolled-shadow: oklch(0.3 0.02 264.665 / 0.15);
 
+    /* ===== Dock 配色 ===== */
+    /* 导航栏 */
+    --dock-nav-bg: oklch(0.96 0.005 264.665);
+    --dock-nav-opacity: 0.85;
+    --dock-nav-shadow: oklch(0.3 0.02 264.665 / 0.25);
+    --dock-nav-radius: 2em;
+    /* 按钮 */
+    --dock-button-bg: oklch(0.96 0.005 264.665 / 0.85);
+    --dock-button-shadow: oklch(0.3 0.02 264.665 / 0.2);
+    --dock-button-ring: oklch(0.6 0.18 260);
+    /* 菜单面板 */
+    --dock-menu-bg: oklch(0.96 0.005 264.665 / 0.95);
+    --dock-menu-shadow: oklch(0.2 0.02 264.665 / 0.3);
+    --dock-menu-item-hover-bg: oklch(0.92 0.005 264.665);
+    --dock-menu-item-active-bg: oklch(0.88 0.008 264.665);
+    /* 遮罩层 */
+    --dock-overlay-bg: oklch(0 0 0 / 0.5);
+
     /* ===== Post View 页面配色 ===== */
     /* 卡片覆盖层渐变 - 更亮的白色调 */
     --post-view-card-overlay-start: oklch(0.98 0 0 / 0.78);
@@ -300,6 +318,20 @@ html[lang='en-GB'] {
     --navbar-scrolled-border: oklch(0.98 0.005 264.665 / 0.05);
     --navbar-scrolled-shadow: oklch(0 0 0 / 0.2);
 
+    /* ===== Dock 配色 ===== */
+    /* 导航栏 */
+    --dock-nav-bg: oklch(0.24 0.02 264.665);
+    --dock-nav-shadow: oklch(0 0 0 / 0.35);
+    /* 按钮 */
+    --dock-button-bg: oklch(0.24 0.02 264.665 / 0.85);
+    --dock-button-shadow: oklch(0 0 0 / 0.3);
+    --dock-button-ring: oklch(0.6 0.18 260);
+    /* 菜单面板 */
+    --dock-menu-bg: oklch(0.24 0.02 264.665 / 0.95);
+    --dock-menu-shadow: oklch(0 0 0 / 0.4);
+    --dock-menu-item-hover-bg: oklch(0.3 0.02 264.665);
+    --dock-menu-item-active-bg: oklch(0.35 0.02 264.665);
+
     /* ===== Post View 页面配色 ===== */
     /* 卡片覆盖层渐变 */
     --post-view-card-overlay-start: oklch(0.12 0.025 264.665 / 0.65);