1

client/src/pages/BlogDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <section id="blog-detail" class="page-section block animate-slide-down">
-    <div class="max-w-4xl mx-auto pt-32 px-6 pb-20">
+    <div class="max-w-4xl mx-auto pt-32 px-6 pb-20 relative">
       <!-- 返回按钮 -->
       <button
           @click="$router.push('/blog')"
@@ -27,7 +27,44 @@
       </div>
 
       <!-- Blog detail content -->
-      <div v-else class="space-y-12">
+      <div v-else class="space-y-12 relative">
+        <!-- 目录侧边栏 (仅在 XL 屏幕显示) -->
+        <aside class="hidden xl:block absolute left-full ml-12 top-0 h-full">
+          <div class="sticky top-32 w-64 p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:bg-white/10">
+            <h3 class="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
+              <i data-lucide="list" class="w-4 h-4 text-art-accent"></i>
+              目录导航
+            </h3>
+            <nav class="space-y-1 relative">
+              <!-- 激活状态的指示条 -->
+              <div
+                  class="absolute left-0 w-0.5 bg-art-accent transition-all duration-300 ease-out"
+                  :style="activeIndicatorStyle"
+                  v-if="toc.length > 0"
+              ></div>
+
+              <ul class="space-y-1 border-l border-white/10 ml-[1px]">
+                <li v-for="(item, index) in toc" :key="item.id">
+                  <a
+                      @click.prevent="scrollToHeading(item.id)"
+                      href="#"
+                      class="block text-xs py-1.5 transition-all duration-200 border-l-2 border-transparent pl-4 hover:text-white"
+                      :class="[
+                      activeId === item.id ? 'text-art-accent font-medium' : 'text-art-muted',
+                      item.level > 2 ? 'pl-8' : 'pl-4'
+                    ]"
+                  >
+                    {{ item.text }}
+                  </a>
+                </li>
+              </ul>
+              <div v-if="toc.length === 0" class="text-xs text-art-muted italic pl-4">
+                暂无目录
+              </div>
+            </nav>
+          </div>
+        </aside>
+
         <!-- 文章信息 -->
         <div class="border-b border-white/5 pb-10">
           <div class="flex items-center gap-4 mb-6">
@@ -51,7 +88,7 @@
         </div>
 
         <!-- 文章内容 - 使用 v-html 渲染 Markdown 解析后的 HTML -->
-        <!-- ref="articleRef" 用于后续绑定复制事件 -->
+        <!-- ref="articleRef" 用于后续绑定复制事件和提取目录 -->
         <article ref="articleRef" class="blog-content prose prose-invert prose-lg max-w-none text-art-muted leading-relaxed">
           <div v-html="renderedContent"></div>
         </article>
@@ -61,7 +98,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, nextTick, onBeforeUnmount } from 'vue'
+import { ref, onMounted, computed, nextTick, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { fetchPost, Post } from '../services/api'
 import { useScrollAnimation } from '../composables/useScrollAnimation'
@@ -77,6 +114,16 @@ const router = useRouter()
 const postId = route.params.id as string
 const articleRef = ref<HTMLElement | null>(null)
 
+// 目录相关状态
+interface TocItem {
+  id: string
+  text: string
+  level: number
+}
+const toc = ref<TocItem[]>([])
+const activeId = ref<string>('')
+const observer = ref<IntersectionObserver | null>(null)
+
 const post = ref<Post>({
   id: postId,
   title: '',
@@ -98,6 +145,19 @@ const md = new MarkdownIt({
   typographer: true, // 优化排版
 })
 
+// 自定义 heading 渲染规则：自动添加 ID
+md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
+  const token = tokens[idx]
+  const contentToken = tokens[idx + 1]
+  const title = contentToken ? contentToken.content : ''
+
+  // 生成简单的 slug ID (移除特殊字符，转小写)
+  // 注意：这只是一个简单的处理，实际生产中可能需要更严谨的 slugify 库
+  const slug = 'heading-' + title.toLowerCase().replace(/[^\w\u4e00-\u9fa5]+/g, '-') + '-' + idx
+
+  return `<${token.tag} id="${slug}">`
+}
+
 // 自定义 fence 渲染规则以实现 iOS 风格代码块 + 行号 + 复制功能
 md.renderer.rules.fence = function (tokens, idx, options, env, self) {
   const token = tokens[idx]
@@ -121,15 +181,10 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
   }
 
   // 2. 生成行号
-  // 移除末尾多余的换行符以计算准确行数
   const lines = token.content.trimEnd().split('\n')
   const lineNumbers = lines.map((_, i) => i + 1).join('\n')
 
   // 3. 构建 iOS 风格 HTML 结构
-  // - copy-btn: 复制按钮，通过 JS 绑定事件
-  // - code-content-wrapper: Flex 容器，包含行号和代码
-  // - line-numbers-wrapper: 行号区域，右对齐，不可选中
-  // - code-block-wrapper: 代码区域
   return `
     <div class="ios-code-container my-10 rounded-xl overflow-hidden shadow-2xl bg-[#1e1e1e] border border-white/5 relative group/code">
       <!-- Window Header -->
@@ -172,6 +227,88 @@ const renderedContent = computed(() => {
   return md.render(post.value.content)
 })
 
+// 生成目录结构
+const generateToc = () => {
+  if (!articleRef.value) return
+
+  // 查找所有 h2, h3 标签
+  const headers = articleRef.value.querySelectorAll('h2, h3')
+  const newToc: TocItem[] = []
+
+  headers.forEach((header) => {
+    if (header.id && header.textContent) {
+      newToc.push({
+        id: header.id,
+        text: header.textContent,
+        level: parseInt(header.tagName.substring(1))
+      })
+    }
+  })
+
+  toc.value = newToc
+}
+
+// 滚动监听逻辑
+const initScrollSpy = () => {
+  if (!articleRef.value) return
+
+  const headers = articleRef.value.querySelectorAll('h2, h3')
+  if (headers.length === 0) return
+
+  // 断开旧的观察者
+  if (observer.value) observer.value.disconnect()
+
+  // 创建新的观察者
+  // rootMargin: '-10% 0px -80% 0px' 意味着当标题进入视口顶部 10% 到 20% 的区域时触发
+  observer.value = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        activeId.value = entry.target.id
+      }
+    })
+  }, { rootMargin: '-80px 0px -80% 0px' })
+
+  headers.forEach(header => {
+    observer.value?.observe(header)
+  })
+}
+
+// 点击滚动到标题
+const scrollToHeading = (id: string) => {
+  const element = document.getElementById(id)
+  if (element) {
+    // 减去顶部导航栏的高度偏移 (比如 100px)
+    const offset = 100
+    const bodyRect = document.body.getBoundingClientRect().top
+    const elementRect = element.getBoundingClientRect().top
+    const elementPosition = elementRect - bodyRect
+    const offsetPosition = elementPosition - offset
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: 'smooth'
+    })
+
+    // 手动更新 activeId，防止滚动动画期间观察者跳动
+    activeId.value = id
+  }
+}
+
+// 计算指示条样式
+const activeIndicatorStyle = computed(() => {
+  const index = toc.value.findIndex(item => item.id === activeId.value)
+  if (index === -1) return { top: '0', opacity: 0 }
+
+  // 假设每个目录项高度大约是 28px (text-xs + py-1.5 + gap)
+  // 这里可以根据实际 DOM 计算更精确，简单起见用固定高度估算
+  const itemHeight = 28
+  return {
+    top: `${index * itemHeight}px`,
+    height: `${itemHeight}px`,
+    opacity: 1
+  }
+})
+
 // 处理复制功能的逻辑
 const addCopyListeners = () => {
   if (!articleRef.value) return
@@ -179,22 +316,18 @@ const addCopyListeners = () => {
   const buttons = articleRef.value.querySelectorAll('.copy-btn')
 
   buttons.forEach(btn => {
-    // 移除旧的监听器（防止重复绑定，尽管这里每次都是新渲染的DOM）
     const newBtn = btn.cloneNode(true) as HTMLElement
     btn.parentNode?.replaceChild(newBtn, btn)
 
     newBtn.addEventListener('click', async () => {
-      // 找到对应的代码块容器
       const container = newBtn.closest('.ios-code-container')
       const codeElement = container?.querySelector('code')
 
       if (codeElement) {
         try {
-          // 获取纯文本内容
           const text = codeElement.innerText
           await navigator.clipboard.writeText(text)
 
-          // 更新按钮状态反馈
           const originalContent = newBtn.innerHTML
           newBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-400"><polyline points="20 6 9 17 4 12"/></svg><span class="text-green-400 text-xs font-medium">已复制</span>`
 
@@ -216,13 +349,13 @@ const fetchBlogDetail = async () => {
     const postData = await fetchPost(postId)
     if (postData) {
       post.value = postData
-      // 初始化动画和事件监听 - 在数据加载完成后
-      // 使用 nextTick 确保 v-html 已经渲染到 DOM
+      // 初始化动画、事件监听和目录 - 在数据加载完成后
       nextTick(() => {
         setTimeout(() => {
           initObserver()
-          addCopyListeners() // 绑定复制按钮事件
-          // 如果使用了 lucide 图标，重新扫描
+          addCopyListeners()
+          generateToc() // 生成目录
+          initScrollSpy() // 启动滚动监听
           if (window.lucide) window.lucide.createIcons()
         }, 100)
       })
@@ -241,9 +374,10 @@ onMounted(() => {
   fetchBlogDetail()
 })
 
-// 组件卸载时清理（虽然这里主要是DOM事件，组件销毁会自动清理DOM，但为了好习惯）
 onBeforeUnmount(() => {
-  // 可以在这里移除特定的全局监听器，如果是局部绑定的DOM事件通常不需要手动移除
+  if (observer.value) {
+    observer.value.disconnect()
+  }
 })
 </script>
 
@@ -260,12 +394,12 @@ onBeforeUnmount(() => {
   border: none !important;
 }
 
-/* 代码字体栈 - 优先使用 SF Mono 等 Mac 字体 */
+/* 代码字体栈 */
 :deep(.prose code) {
   font-family: 'SF Mono', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-/* 行内代码样式优化 (非代码块中的代码) */
+/* 行内代码样式优化 */
 :deep(.prose :not(pre) > code) {
   color: #d4b383;
   background-color: rgba(212, 179, 131, 0.1);
@@ -274,13 +408,14 @@ onBeforeUnmount(() => {
   font-weight: 500;
 }
 
-/* 标题样式 */
+/* 标题样式 - 增加 scroll-margin-top 以防止锚点跳转被顶部遮挡 */
 :deep(.prose h1), :deep(.prose h2), :deep(.prose h3) {
   color: #fff;
   font-family: serif;
   margin-top: 2em;
   margin-bottom: 0.8em;
   line-height: 1.3;
+  scroll-margin-top: 120px; /* 关键：确保点击目录跳转时有足够顶部留白 */
 }
 
 :deep(.prose h2) {
@@ -321,9 +456,9 @@ onBeforeUnmount(() => {
   color: #d4b383;
 }
 
-/* 自定义滚动条 - 针对代码块区域 */
+/* 自定义滚动条 */
 :deep(.code-block-wrapper::-webkit-scrollbar) {
-  height: 8px; /* 横向滚动条高度 */
+  height: 8px;
   background-color: transparent;
 }
 
@@ -340,7 +475,6 @@ onBeforeUnmount(() => {
   background-color: transparent;
 }
 
-/* 强制覆盖 highlight.js 可能的背景色 */
 :deep(.hljs) {
   background: transparent !important;
 }