From 17b6a5d7e025627d48f4b100bd763c388277296d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=AD=96?= <1055104544@qq.com>
Date: Thu, 26 Mar 2026 17:47:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=8B=E6=9C=BA=E7=AB=AF=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=9B=AE=E5=BD=95=E6=8C=89=E9=92=AE=EF=BC=8C=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=BC=B9=E5=87=BA=E7=AB=A0=E8=8A=82=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 alacarte-novel-website/reader.html | 163 +++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)

diff --git a/alacarte-novel-website/reader.html b/alacarte-novel-website/reader.html
index d5ab3b8..d3cf1d5 100644
--- a/alacarte-novel-website/reader.html
+++ b/alacarte-novel-website/reader.html
@@ -207,6 +207,98 @@
             flex-direction: column;
         }
         
+        /* 移动端目录弹窗 */
+        .toc-modal {
+            display: none;
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0,0,0,0.8);
+            z-index: 2000;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        .toc-modal.active { display: flex; }
+        
+        .toc-content {
+            background: var(--bg-primary);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 100%;
+            max-width: 400px;
+            max-height: 80vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        
+        .toc-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .toc-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        
+        .toc-close {
+            width: 32px; height: 32px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .toc-close:hover { background: var(--btn-hover); }
+        
+        .toc-list {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+        }
+        
+        .toc-item {
+            display: block;
+            padding: 12px 0;
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 14px;
+            border-bottom: 1px solid var(--border-color);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .toc-item:hover { color: #667eea; }
+        .toc-item.current { color: #667eea; font-weight: 600; }
+        
+        /* 目录按钮（仅手机端显示） */
+        .toc-btn {
+            display: none;
+            padding: 12px 20px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .toc-btn:hover { background: var(--btn-hover); }
+        
         .sidebar-title {
             font-size: 14px;
             color: var(--text-secondary);
@@ -262,6 +354,11 @@
         
         @media (max-width: 1200px) { .sidebar { display: none; } }
         
+        @media (max-width: 768px) {
+            .toc-btn { display: block; }
+            .sidebar { display: none; }
+        }
+        
         @media (max-width: 600px) {
             .chapter-title { font-size: 24px; }
             .chapter-content { font-size: 16px; }
@@ -293,11 +390,23 @@
     <nav class="fixed-nav">
         <div class="fixed-nav-content">
             <a href="#" class="nav-btn" id="prevBtn">上一章</a>
+            <button class="toc-btn" id="tocBtn">目录</button>
             <a href="chapters.html" class="nav-btn">目录</a>
             <a href="#" class="nav-btn" id="nextBtn">下一章</a>
         </div>
     </nav>
     
+    <!-- 移动端目录弹窗 -->
+    <div class="toc-modal" id="tocModal">
+        <div class="toc-content">
+            <div class="toc-header">
+                <span class="toc-title">章节导航</span>
+                <button class="toc-close" id="tocClose">×</button>
+            </div>
+            <div class="toc-list" id="tocList"></div>
+        </div>
+    </div>
+    
     <!-- 右侧滚动按钮 -->
     <div class="scroll-buttons">
         <button class="scroll-btn" id="scrollTop">顶</button>
@@ -356,6 +465,8 @@
                 
                 // 更新侧边栏高亮
                 updateSidebarHighlight();
+                // 更新移动端目录高亮
+                updateMobileTOCHighlight();
                 
                 // 记录阅读进度
                 let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
@@ -451,12 +562,64 @@
             window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
         });
         
+        // 渲染移动端目录
+        function renderMobileTOC() {
+            const data = window.chaptersData || chaptersData;
+            const tocList = document.getElementById('tocList');
+            
+            let html = '';
+            data.forEach(ch => {
+                const isCurrent = ch.id === currentChapter ? 'current' : '';
+                html += `<a href="?id=${ch.id}" class="toc-item ${isCurrent}" data-id="${ch.id}">第${ch.id}章：${ch.title}</a>`;
+            });
+            tocList.innerHTML = html;
+        }
+        
+        // 更新移动端目录高亮
+        function updateMobileTOCHighlight() {
+            document.querySelectorAll('.toc-item').forEach(item => {
+                item.classList.remove('current');
+                if (parseInt(item.dataset.id) === currentChapter) {
+                    item.classList.add('current');
+                }
+            });
+        }
+        
+        // 目录弹窗控制
+        const tocModal = document.getElementById('tocModal');
+        const tocBtn = document.getElementById('tocBtn');
+        const tocClose = document.getElementById('tocClose');
+        
+        tocBtn.addEventListener('click', () => {
+            renderMobileTOC();
+            tocModal.classList.add('active');
+        });
+        
+        tocClose.addEventListener('click', () => {
+            tocModal.classList.remove('active');
+        });
+        
+        tocModal.addEventListener('click', (e) => {
+            if (e.target === tocModal) {
+                tocModal.classList.remove('active');
+            }
+        });
+        
+        // 点击目录项后关闭弹窗
+        document.getElementById('tocList').addEventListener('click', (e) => {
+            if (e.target.classList.contains('toc-item')) {
+                tocModal.classList.remove('active');
+            }
+        });
+        
         // 初始化 - 等待app.js加载章节数据
         document.addEventListener('DOMContentLoaded', async function() {
             // 等待章节数据加载完成
             await loadChaptersData();
             // 渲染侧边栏
             renderReaderSidebar();
+            // 渲染移动端目录
+            renderMobileTOC();
             // 加载当前章节
             loadChapterContent(currentChapter);
         });