@jet-w/astro-blog 0.1.0

package/src/components/ui/ThemeToggle.vue

@@ -0,0 +1,90 @@
+<template>
+  <button
+    @click="toggleTheme"
+    class="p-2 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 transition-colors"
+    :aria-label="isDark ? '切换到浅色模式' : '切换到深色模式'"
+  >
+    <transition name="fade" mode="out-in">
+      <svg
+        v-if="isDark"
+        key="sun"
+        class="w-5 h-5 text-slate-700 dark:text-slate-300"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+        />
+      </svg>
+      <svg
+        v-else
+        key="moon"
+        class="w-5 h-5 text-slate-700 dark:text-slate-300"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+        />
+      </svg>
+    </transition>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const isDark = ref(false)
+
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+
+  if (isDark.value) {
+    document.documentElement.classList.add('dark')
+    localStorage.setItem('theme', 'dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+  }
+}
+
+onMounted(() => {
+  // 检查当前主题
+  const savedTheme = localStorage.getItem('theme')
+  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  isDark.value = savedTheme === 'dark' || (!savedTheme && systemPrefersDark)
+
+  // 监听系统主题变化
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+      isDark.value = e.matches
+      if (e.matches) {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    }
+  })
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/layouts/AboutLayout.astro

@@ -0,0 +1,18 @@
+---
+import PageLayout from './PageLayout.astro';
+
+export interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<PageLayout
+  title={title}
+  description={description}
+  showSidebar={false}
+>
+  <slot />
+</PageLayout>

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,362 @@
+---
+import type { SEOProps } from '../types';
+import { siteConfig, defaultSEO } from '../config/site';
+import '../styles/global.css';
+import fs from 'node:fs';
+import path from 'node:path';
+
+export interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  type?: 'website' | 'article';
+  publishedTime?: string;
+  modifiedTime?: string;
+  tags?: string[];
+}
+
+const {
+  title = defaultSEO.title,
+  description = defaultSEO.description,
+  image = defaultSEO.image,
+  type = 'website',
+  publishedTime,
+  modifiedTime,
+  tags
+} = Astro.props;
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const fullTitle = title === siteConfig.title ? title : `${title} | ${siteConfig.title}`;
+const fullImage = new URL(image, Astro.site);
+
+// 检查 favicon 文件是否存在，不存在则使用 avatar
+const publicDir = path.join(process.cwd(), 'public');
+const faviconSvgExists = fs.existsSync(path.join(publicDir, 'favicon.svg'));
+const faviconIcoExists = fs.existsSync(path.join(publicDir, 'favicon.ico'));
+const faviconHref = faviconSvgExists ? '/favicon.svg' : faviconIcoExists ? '/favicon.ico' : siteConfig.avatar;
+const faviconType = faviconSvgExists ? 'image/svg+xml' : faviconIcoExists ? 'image/x-icon' : 'image/jpeg';
+---
+
+<!DOCTYPE html>
+<html lang="zh-CN" class="scroll-smooth">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={description} />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type={faviconType} href={faviconHref} />
+    <meta name="generator" content={Astro.generator} />
+
+    <!-- SEO -->
+    <title>{fullTitle}</title>
+    <link rel="canonical" href={canonicalURL} />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content={type} />
+    <meta property="og:title" content={fullTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:image" content={fullImage} />
+    <meta property="og:site_name" content={siteConfig.title} />
+
+    {publishedTime && (
+      <meta property="article:published_time" content={publishedTime} />
+    )}
+    {modifiedTime && (
+      <meta property="article:modified_time" content={modifiedTime} />
+    )}
+    {tags && tags.map(tag => (
+      <meta property="article:tag" content={tag} />
+    ))}
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={fullTitle} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={fullImage} />
+
+    <!-- RSS -->
+    <link rel="alternate" type="application/rss+xml" title={siteConfig.title} href="/rss.xml" />
+
+    <!-- 预加载关键资源 -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <!-- 图标库 -->
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" />
+    <!-- Material Icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round" />
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+    <!-- Remix Icon -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" />
+    <!-- KaTeX for LaTeX math rendering -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous" />
+    <!-- Ionicons -->
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+
+    <!-- 主题检测脚本 -->
+    <script is:inline>
+      // 在页面加载前检测主题，避免闪烁
+      // 默认使用深色模式
+      const theme = (() => {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+          return localStorage.getItem('theme');
+        }
+        // 默认深色模式，除非用户系统偏好浅色
+        if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+          return 'light';
+        }
+        return 'dark';
+      })();
+
+      if (theme === 'light') {
+        document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
+      }
+      window.__theme = theme;
+    </script>
+  </head>
+  <body class="min-h-screen">
+    <div id="app" class="flex flex-col min-h-screen">
+      <slot />
+    </div>
+
+    <!-- Mermaid 容器渲染 -->
+    <script src="/js/mermaid-container.js" is:inline></script>
+
+    <!-- Tabs 组件初始化 -->
+    <script src="/js/tabs-init.js" is:inline></script>
+
+    <!-- 全局脚本 -->
+    <script>
+      // 回到顶部功能
+      const backToTop = document.querySelector('.back-to-top');
+      if (backToTop) {
+        window.addEventListener('scroll', () => {
+          if (window.scrollY > 300) {
+            backToTop.classList.add('show');
+          } else {
+            backToTop.classList.remove('show');
+          }
+        });
+
+        backToTop.addEventListener('click', () => {
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+      }
+
+      // 平滑滚动锚点链接
+      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (this: HTMLAnchorElement, e: Event) {
+          e.preventDefault();
+          const href = this.getAttribute('href');
+          if (href) {
+            const target = document.querySelector(href);
+            if (target) {
+              target.scrollIntoView({ behavior: 'smooth' });
+            }
+          }
+        });
+      });
+
+      // 代码块增强功能
+      function enhanceCodeBlocks() {
+        const codeBlocks = document.querySelectorAll('pre:not([data-enhanced])');
+        const COLLAPSE_THRESHOLD = 15; // 超过15行才显示收缩功能
+
+        codeBlocks.forEach((pre) => {
+          // 标记为已处理
+          pre.setAttribute('data-enhanced', 'true');
+
+          // 获取语言信息
+          const code = pre.querySelector('code');
+          let lang = 'code';
+
+          // 跳过 mermaid 代码块
+          if (code?.classList.contains('language-mermaid') ||
+              pre.classList.contains('mermaid') ||
+              pre.closest('.mermaid-container')) {
+            return;
+          }
+
+          if (code) {
+            // 从 class 中获取语言
+            const classList = code.className.split(' ');
+            for (const cls of classList) {
+              if (cls.startsWith('language-')) {
+                lang = cls.replace('language-', '');
+                break;
+              }
+            }
+          }
+
+          // 从 data-language 属性获取（shiki 用这个）
+          const preEl = pre as HTMLPreElement;
+          if (preEl.dataset.language) {
+            lang = preEl.dataset.language;
+          }
+
+          // 计算代码行数
+          const codeText = code ? code.textContent : pre.textContent;
+          const lineCount = (codeText || '').split('\n').length;
+          const shouldCollapse = lineCount > COLLAPSE_THRESHOLD;
+
+          // 创建包装器
+          const wrapper = document.createElement('div');
+          wrapper.className = 'code-block-wrapper' + (shouldCollapse ? ' collapsed' : '');
+
+          // 创建头部
+          const header = document.createElement('div');
+          header.className = 'code-block-header';
+          header.innerHTML = `
+            <span class="code-block-lang">${lang}</span>
+            <div class="code-block-actions">
+              ${shouldCollapse ? `
+                <button class="code-block-btn collapse-btn" title="展开/收缩">
+                  <svg class="collapse-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                  </svg>
+                  <span class="collapse-text">展开</span>
+                </button>
+              ` : ''}
+              <button class="code-block-btn copy-btn" title="复制代码">
+                <svg class="copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                <span class="copy-text">复制</span>
+              </button>
+            </div>
+          `;
+
+          // 创建内容区
+          const content = document.createElement('div');
+          content.className = 'code-block-content';
+
+          // 插入DOM
+          if (!pre.parentNode) return;
+          pre.parentNode.insertBefore(wrapper, pre);
+          wrapper.appendChild(header);
+          wrapper.appendChild(content);
+          content.appendChild(pre);
+
+          // 如果需要收缩，添加展开按钮和底部收起按钮
+          if (shouldCollapse) {
+            // 展开按钮（收缩状态显示）
+            const expandOverlay = document.createElement('div');
+            expandOverlay.className = 'code-block-expand';
+            expandOverlay.innerHTML = `
+              <button class="expand-btn">
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+                <span>展开代码 (${lineCount} 行)</span>
+              </button>
+            `;
+            content.appendChild(expandOverlay);
+
+            // 底部收起按钮（展开状态显示）
+            const collapseOverlay = document.createElement('div');
+            collapseOverlay.className = 'code-block-collapse';
+            collapseOverlay.innerHTML = `
+              <button class="collapse-bottom-btn">
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                </svg>
+                <span>收起代码</span>
+              </button>
+            `;
+            content.appendChild(collapseOverlay);
+
+            // 展开按钮点击事件
+            const expandBtn = expandOverlay.querySelector('.expand-btn');
+            if (expandBtn) {
+              expandBtn.addEventListener('click', () => {
+                wrapper.classList.remove('collapsed');
+                const collapseText = header.querySelector('.collapse-text') as HTMLElement | null;
+                if (collapseText) collapseText.textContent = '收缩';
+              });
+            }
+
+            // 底部收起按钮点击事件
+            const collapseBottomBtn = collapseOverlay.querySelector('.collapse-bottom-btn');
+            if (collapseBottomBtn) {
+              collapseBottomBtn.addEventListener('click', () => {
+                wrapper.classList.add('collapsed');
+                const collapseText = header.querySelector('.collapse-text') as HTMLElement | null;
+                if (collapseText) collapseText.textContent = '展开';
+                // 滚动到代码块顶部
+                wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              });
+            }
+          }
+
+          // 复制按钮点击事件
+          const copyBtn = header.querySelector('.copy-btn') as HTMLElement | null;
+          if (copyBtn) {
+            copyBtn.addEventListener('click', async () => {
+              const textToCopy = code ? code.textContent : pre.textContent;
+              try {
+                await navigator.clipboard.writeText(textToCopy || '');
+                copyBtn.classList.add('copied');
+                const copyText = copyBtn.querySelector('.copy-text') as HTMLElement | null;
+                const copyIcon = copyBtn.querySelector('.copy-icon') as HTMLElement | null;
+                if (copyText) copyText.textContent = '已复制';
+                if (copyIcon) copyIcon.innerHTML = `
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                `;
+
+                setTimeout(() => {
+                  copyBtn.classList.remove('copied');
+                  if (copyText) copyText.textContent = '复制';
+                  if (copyIcon) copyIcon.innerHTML = `
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  `;
+                }, 2000);
+              } catch (err) {
+                console.error('复制失败:', err);
+              }
+            });
+          }
+
+          // 收缩按钮点击事件
+          const collapseBtn = header.querySelector('.collapse-btn') as HTMLElement | null;
+          if (collapseBtn) {
+            collapseBtn.addEventListener('click', () => {
+              const isCollapsed = wrapper.classList.toggle('collapsed');
+              const collapseText = collapseBtn.querySelector('.collapse-text') as HTMLElement | null;
+              if (collapseText) collapseText.textContent = isCollapsed ? '展开' : '收缩';
+            });
+          }
+        });
+      }
+
+      // 页面加载后执行
+      enhanceCodeBlocks();
+
+      // 监听DOM变化（处理动态加载的内容）
+      const observer = new MutationObserver((mutations) => {
+        let hasNewCodeBlocks = false;
+        mutations.forEach((mutation) => {
+          if (mutation.addedNodes.length) {
+            mutation.addedNodes.forEach((node) => {
+              if (node.nodeType === 1) {
+                const el = node as Element;
+                if (el.tagName === 'PRE' || el.querySelector?.('pre:not([data-enhanced])')) {
+                  hasNewCodeBlocks = true;
+                }
+              }
+            });
+          }
+        });
+        if (hasNewCodeBlocks) {
+          enhanceCodeBlocks();
+        }
+      });
+
+      observer.observe(document.body, { childList: true, subtree: true });
+    </script>
+
+  </body>
+</html>

package/src/layouts/PageLayout.astro

@@ -0,0 +1,217 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import Header from '../components/layout/Header.astro';
+import Footer from '../components/layout/Footer.astro';
+import Sidebar from '../components/layout/Sidebar.astro';
+import SidebarToggle from '../components/ui/SidebarToggle.vue';
+
+export interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  type?: 'website' | 'article';
+  publishedTime?: string;
+  modifiedTime?: string;
+  tags?: string[];
+  showSidebar?: boolean;
+  showToc?: boolean;
+}
+
+const {
+  title,
+  description,
+  image,
+  type,
+  publishedTime,
+  modifiedTime,
+  tags,
+  showSidebar = true,
+  showToc = false
+} = Astro.props;
+---
+
+<BaseLayout
+  title={title}
+  description={description}
+  image={image}
+  type={type}
+  publishedTime={publishedTime}
+  modifiedTime={modifiedTime}
+  tags={tags}
+>
+  <Header />
+
+  <main class="flex-1 flex">
+    <!-- 左侧边栏 - 桌面端 -->
+    {showSidebar && (
+      <aside class="hidden lg:block shrink-0 transition-all duration-300 relative" data-sidebar style="width: var(--sidebar-width, 256px);">
+        <div class="sticky top-20 h-[calc(100vh-5rem)] overflow-y-auto">
+          <Sidebar />
+        </div>
+        <!-- 拖拽调整宽度的手柄 -->
+        <div
+          class="absolute top-0 right-0 w-1 h-full cursor-col-resize group z-10"
+          data-sidebar-resizer
+        >
+          <div class="absolute top-0 right-0 w-4 h-full -mr-2 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+            <div class="w-1 h-16 bg-primary-400 dark:bg-primary-500 rounded-full"></div>
+          </div>
+        </div>
+      </aside>
+    )}
+
+    <!-- 移动端侧边栏遮罩 -->
+    {showSidebar && (
+      <div
+        class="lg:hidden fixed inset-0 bg-black/50 z-40 hidden"
+        data-sidebar-overlay
+        onclick="this.classList.add('hidden'); document.querySelector('[data-mobile-sidebar]').classList.add('-translate-x-full');"
+      ></div>
+    )}
+
+    <!-- 移动端侧边栏 -->
+    {showSidebar && (
+      <aside
+        class="lg:hidden fixed top-16 left-0 w-72 h-[calc(100vh-4rem)] bg-white dark:bg-slate-900 z-50 transform -translate-x-full transition-transform duration-300 shadow-xl overflow-y-auto"
+        data-mobile-sidebar
+      >
+        <div class="p-4">
+          <Sidebar />
+        </div>
+      </aside>
+    )}
+
+    <!-- 主内容区 -->
+    <div class={`flex-1 transition-all duration-300 ${showSidebar ? 'lg:px-8' : ''} ${showToc ? 'xl:pr-64' : ''} relative`} data-main-content>
+      <!-- 侧边栏切换按钮 - 桌面端固定位置 -->
+      {showSidebar && (
+        <div class="hidden lg:block fixed top-20 left-1 z-40 transition-all duration-300" data-sidebar-toggle>
+          <SidebarToggle client:load />
+        </div>
+      )}
+
+      <!-- 侧边栏切换按钮 - 移动端浮动按钮 -->
+      {showSidebar && (
+        <button
+          class="lg:hidden fixed bottom-20 left-4 z-40 p-3 bg-primary-500 hover:bg-primary-600 text-white rounded-full shadow-lg transition-colors"
+          data-mobile-sidebar-toggle
+          aria-label="打开侧边栏"
+          onclick="document.querySelector('[data-sidebar-overlay]').classList.remove('hidden'); document.querySelector('[data-mobile-sidebar]').classList.remove('-translate-x-full');"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+          </svg>
+        </button>
+      )}
+
+      <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <slot />
+      </div>
+    </div>
+
+    <!-- 右侧TOC -->
+    {showToc && (
+      <aside class="hidden xl:block w-64 shrink-0">
+        <div class="sticky top-20 h-[calc(100vh-5rem)] overflow-y-auto">
+          <slot name="toc" />
+        </div>
+      </aside>
+    )}
+  </main>
+
+  <Footer />
+
+  <!-- 回到顶部按钮 -->
+  <button class="back-to-top" aria-label="回到顶部">
+    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+    </svg>
+  </button>
+</BaseLayout>
+
+<script>
+  // 侧边栏拖拽调整宽度
+  function initSidebarResizer() {
+    const sidebar = document.querySelector('[data-sidebar]') as HTMLElement;
+    const resizer = document.querySelector('[data-sidebar-resizer]') as HTMLElement;
+
+    if (!sidebar || !resizer) return;
+
+    // 从 localStorage 恢复宽度
+    const savedWidth = localStorage.getItem('sidebar-width');
+    if (savedWidth) {
+      sidebar.style.setProperty('--sidebar-width', savedWidth);
+    }
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    const startResize = (e: MouseEvent) => {
+      isResizing = true;
+      startX = e.clientX;
+      startWidth = sidebar.offsetWidth;
+
+      // 禁用过渡效果以获得流畅拖拽
+      sidebar.style.transition = 'none';
+
+      // 添加全局样式防止选中文本
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+
+      document.addEventListener('mousemove', doResize);
+      document.addEventListener('mouseup', stopResize);
+    };
+
+    const doResize = (e: MouseEvent) => {
+      if (!isResizing) return;
+
+      const diff = e.clientX - startX;
+      const newWidth = Math.min(Math.max(startWidth + diff, 200), 500); // 最小200px，最大500px
+
+      sidebar.style.setProperty('--sidebar-width', `${newWidth}px`);
+    };
+
+    const stopResize = () => {
+      if (!isResizing) return;
+
+      isResizing = false;
+
+      // 恢复过渡效果
+      sidebar.style.transition = '';
+
+      // 恢复全局样式
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+
+      // 保存宽度到 localStorage
+      const currentWidth = getComputedStyle(sidebar).getPropertyValue('--sidebar-width');
+      if (currentWidth) {
+        localStorage.setItem('sidebar-width', currentWidth.trim());
+      }
+
+      document.removeEventListener('mousemove', doResize);
+      document.removeEventListener('mouseup', stopResize);
+    };
+
+    resizer.addEventListener('mousedown', startResize);
+  }
+
+  // DOM 加载完成后初始化
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSidebarResizer);
+  } else {
+    initSidebarResizer();
+  }
+</script>
+
+<style>
+  /* 拖拽时的视觉反馈 */
+  [data-sidebar-resizer]:hover {
+    background: linear-gradient(to right, transparent, rgba(var(--color-primary-500), 0.1), transparent);
+  }
+
+  [data-sidebar-resizer]:active {
+    background: linear-gradient(to right, transparent, rgba(var(--color-primary-500), 0.2), transparent);
+  }
+</style>