Adjust reader TOC and chapter navigation

Author: Lling0000

assets/site.js

@@ -282,7 +282,7 @@ const copy = {
     brandLine: "AI Coding 工程工作流手册",
     plannerMode: "学习清单",
     scheduleMode: "学习计划",
-    readerMode: "章节阅读",
+    readerMode: "全文阅读",
     navKicker: "Feynman Loop",
     navTitle: "19 章 · 36 天费曼间隔练习",
     navCopy: "每天一个新章，到期旧章按 2-3-5-7 间隔短复述。",
@@ -393,7 +393,7 @@ const copy = {
     brandLine: "AI coding engineering workflow",
     plannerMode: "Checklist",
     scheduleMode: "Plan",
-    readerMode: "Chapter Reader",
+    readerMode: "Reader",
     navKicker: "Feynman Loop",
     navTitle: "19 Chapters · 36-Day Feynman Spacing",
     navCopy: "One new chapter per day; due reviews return on a 2-3-5-7 cadence.",
@@ -1048,12 +1048,16 @@ function focusedChapterSection() {
 }
 
 function readerVisibleHeadings() {
-  const headings = state.headings.filter((heading) => heading.depth === 2 || heading.depth === 3);
-  const section = focusedChapterSection();
-  if (!section) return headings;
+  return state.headings.filter((heading) => heading.depth === 2 || heading.depth === 3);
+}
 
-  const nodes = new Set(section.nodes);
-  return headings.filter((heading) => nodes.has(heading.element));
+function headingChapterIndex(heading) {
+  const section = state.chapterSections.find((candidate) => candidate.nodes.includes(heading.element));
+  return section?.chapterIndex || null;
+}
+
+function headingById(id) {
+  return state.headings.find((heading) => heading.id === id) || null;
 }
 
 function chapterPageText(index) {
@@ -2230,6 +2234,11 @@ function renderToc() {
       const link = document.createElement("a");
       link.href = `#${heading.id}`;
       link.className = `depth-${heading.depth}`;
+      link.dataset.tocTarget = heading.id;
+      const chapterIndex = headingChapterIndex(heading);
+      if (chapterIndex) {
+        link.dataset.tocChapter = String(chapterIndex);
+      }
       link.textContent = heading.text;
 
       if (query && !heading.text.toLowerCase().includes(query)) {
@@ -2243,7 +2252,7 @@ function renderToc() {
 
 function observeHeadings() {
   state.observer?.disconnect();
-  const links = new Map([...els.toc.querySelectorAll("a")].map((link) => [link.hash.slice(1), link]));
+  const links = new Map([...els.toc.querySelectorAll("a")].map((link) => [link.dataset.tocTarget || link.hash.slice(1), link]));
 
   state.observer = new IntersectionObserver(
     (entries) => {
@@ -2287,6 +2296,25 @@ async function openChapter(chapterIndex) {
   }, 40);
 }
 
+async function openTocTarget(id) {
+  if (state.guidePromise) {
+    await state.guidePromise.catch(() => {});
+  }
+
+  const heading = headingById(id);
+  if (!heading) return;
+
+  const chapterIndex = headingChapterIndex(heading);
+  if (chapterIndex) {
+    setReaderFocus(chapterIndex);
+  }
+  setMode("reader");
+
+  window.setTimeout(() => {
+    heading.element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, 40);
+}
+
 function showError(error) {
   console.error(error);
   const text = copy[state.lang];
@@ -2364,6 +2392,13 @@ document.addEventListener("click", (event) => {
     return;
   }
 
+  const tocLink = event.target.closest("#toc-list a[href^='#']");
+  if (tocLink) {
+    event.preventDefault();
+    openTocTarget(tocLink.dataset.tocTarget || tocLink.hash.slice(1));
+    return;
+  }
+
   const link = event.target.closest("a[href]");
   if (!link) return;
   const href = link.getAttribute("href");

assets/styles.css

@@ -1186,17 +1186,12 @@ button:disabled {
 }
 
 .chapter-pager {
-  position: sticky;
-  top: calc(var(--topbar-offset) + var(--sidebar-offset) + 0.6rem);
-  z-index: 30;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.75rem;
-  margin: 1rem 0 0;
-  padding: 0.65rem 0;
-  border-bottom: 1px solid var(--line);
-  background: rgb(246 250 248 / 92%);
-  backdrop-filter: blur(14px);
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--line);
 }
 
 .chapter-page-button {

index.html

@@ -19,12 +19,12 @@
     <meta name="twitter:card" content="summary" />
     <link rel="canonical" href="https://lling0000.github.io/Vibe_coding_guide/" />
     <title>Vibe Coding Guide | AI Coding 工程工作流手册</title>
-    <link rel="stylesheet" href="./assets/styles.css?v=20260617-schedule-pdf" />
+    <link rel="stylesheet" href="./assets/styles.css?v=20260617-reader-bottom-nav" />
     <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/lucide@0.475.0/dist/umd/lucide.min.js"></script>
-    <script defer src="./assets/site.js?v=20260617-schedule-pdf"></script>
+    <script defer src="./assets/site.js?v=20260617-reader-bottom-nav"></script>
   </head>
   <body data-mode="planner">
     <div class="site-progress" aria-hidden="true">
@@ -52,7 +52,7 @@
           </button>
           <button type="button" class="segmented-button" data-mode="reader" aria-pressed="false">
             <i data-lucide="book-open-text" aria-hidden="true"></i>
-            <span id="reader-mode-label">章节阅读</span>
+            <span id="reader-mode-label">全文阅读</span>
           </button>
         </div>
 
@@ -252,6 +252,8 @@ <h1 id="reader-title">把 AI Coding 变成可复用的工程工作流。</h1>
 
           <div class="reader-shell">
             <div class="reader-column">
+              <article id="guide-content" class="prose" aria-live="polite"></article>
+
               <nav class="chapter-pager" id="chapter-pager" aria-label="Chapter navigation">
                 <button type="button" class="chapter-page-button" id="prev-chapter-button">
                   <i data-lucide="chevron-left" aria-hidden="true"></i>
@@ -268,8 +270,6 @@ <h1 id="reader-title">把 AI Coding 变成可复用的工程工作流。</h1>
                   <i data-lucide="chevron-right" aria-hidden="true"></i>
                 </button>
               </nav>
-
-              <article id="guide-content" class="prose" aria-live="polite"></article>
             </div>
 
             <aside class="annotation-panel" id="annotation-panel" aria-labelledby="annotation-title">