admincjy
/
CJYDocs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CJYDocs</title>
    <link rel="stylesheet" href="/css/style.css">
    <!-- Marked.js - Markdown 解析 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.0/marked.min.js"></script>
    <!-- Highlight.js - 代码高亮 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github.min.css">
    <script src="https://cdn.jsdelivr.net/npm/highlight.js"></script>
</head>
<body>
    <div class="reader-container">
        <!-- 左侧导航 -->
        <aside class="sidebar left-sidebar" id="left-sidebar">
            <div class="sidebar-header">
                <h2 id="category-title">
                    <span class="category-name">文档目录</span>
                    <div class="header-icons">
                        <a href="/" class="home-icon icon-btn" title="返回首页">🏠</a>
                        <button id="search-toggle-btn" class="icon-btn" title="搜索">🔍</button>
                    </div>
                </h2>
            </div>
            <nav id="doc-nav" class="doc-nav">
                <!-- 动态加载文档列表 -->
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="content-area" id="content-area">
            <!-- 搜索框 -->
            <div class="search-container" id="search-container">
                <div class="search-box">
                    <input type="text" id="search-input" placeholder="搜索文档内容..." autocomplete="off">
                    <button id="search-btn" class="search-icon-btn">🔍</button>
                    <button id="close-search-box" class="close-search-box-btn" title="关闭搜索">×</button>
                </div>
            </div>

            <!-- 搜索结果浮层 -->
            <div id="search-results" class="search-results" style="display: none;">
                <div class="search-results-header">
                    <span class="search-results-title">搜索结果</span>
                </div>
                <div class="search-results-content">
                    <!-- 当前文档结果 -->
                    <div id="current-doc-results" class="results-section">
                        <h3 class="results-section-title">当前文档</h3>
                        <div class="results-list"></div>
                    </div>
                    <!-- 其他文档结果 -->
                    <div id="other-docs-results" class="results-section">
                        <h3 class="results-section-title">其他文档</h3>
                        <div class="results-list"></div>
                    </div>
                </div>
            </div>

            <div id="loading" class="loading">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
            <article id="markdown-content" class="markdown-body">
                <!-- Markdown 内容将在这里渲染 -->
            </article>

            <!-- 回到顶部按钮 -->
            <button id="back-to-top" class="back-to-top" title="回到顶部">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 19V5M12 5L5 12M12 5L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </main>

        <!-- 右侧 TOC -->
        <aside class="sidebar right-sidebar" id="right-sidebar">
            <nav id="toc" class="toc">
                <!-- 动态生成 TOC -->
            </nav>
        </aside>

        <!-- 移动端侧边栏切换按钮 -->
        <button class="toggle-sidebar-btn" id="toggle-left" title="切换文档目录">
            <span>☰</span>
        </button>
        <button class="toggle-sidebar-btn" id="toggle-right" title="切换标题目录">
            <span>≡</span>
        </button>
    </div>

    <script src="/js/reader.js"></script>
</body>
</html>