reader.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>CJYDocs</title>
  7. <link rel="stylesheet" href="/css/style.css">
  8. <!-- Marked.js - Markdown 解析 -->
  9. <script src="/js/marked.min.js"></script>
  10. <!-- Highlight.js - 代码高亮 -->
  11. <link rel="stylesheet" href="/css/github.min.css">
  12. <script src="/js/highlight.js"></script>
  13. </head>
  14. <body>
  15. <div class="reader-container">
  16. <!-- 左侧导航 -->
  17. <aside class="sidebar left-sidebar" id="left-sidebar">
  18. <div class="sidebar-header">
  19. <h2 id="category-title">
  20. <span class="category-name">文档目录</span>
  21. <div class="header-icons">
  22. <a href="/" class="home-icon icon-btn" title="返回首页">🏠</a>
  23. <button id="search-toggle-btn" class="icon-btn" title="搜索">🔍</button>
  24. </div>
  25. </h2>
  26. </div>
  27. <nav id="doc-nav" class="doc-nav">
  28. <!-- 动态加载文档列表 -->
  29. </nav>
  30. </aside>
  31. <!-- 主内容区 -->
  32. <main class="content-area" id="content-area">
  33. <!-- 搜索框 -->
  34. <div class="search-container" id="search-container">
  35. <div class="search-box">
  36. <input type="text" id="search-input" placeholder="搜索文档内容..." autocomplete="off">
  37. <button id="search-btn" class="search-icon-btn">🔍</button>
  38. <button id="close-search-box" class="close-search-box-btn" title="关闭搜索">×</button>
  39. </div>
  40. </div>
  41. <!-- 搜索结果浮层 -->
  42. <div id="search-results" class="search-results" style="display: none;">
  43. <div class="search-results-header">
  44. <span class="search-results-title">搜索结果</span>
  45. </div>
  46. <div class="search-results-content">
  47. <!-- 当前文档结果 -->
  48. <div id="current-doc-results" class="results-section">
  49. <h3 class="results-section-title">当前文档</h3>
  50. <div class="results-list"></div>
  51. </div>
  52. <!-- 其他文档结果 -->
  53. <div id="other-docs-results" class="results-section">
  54. <h3 class="results-section-title">其他文档</h3>
  55. <div class="results-list"></div>
  56. </div>
  57. </div>
  58. </div>
  59. <div id="loading" class="loading">
  60. <div class="spinner"></div>
  61. <p>加载中...</p>
  62. </div>
  63. <article id="markdown-content" class="markdown-body">
  64. <!-- Markdown 内容将在这里渲染 -->
  65. </article>
  66. <!-- 页面导航 -->
  67. <footer id="doc-navigation" class="doc-navigation">
  68. <div class="nav-prev" id="nav-prev" style="display: none;">
  69. <span class="nav-label">上一页</span>
  70. <div class="nav-doc-name"></div>
  71. </div>
  72. <div class="nav-next" id="nav-next" style="display: none;">
  73. <span class="nav-label">下一页</span>
  74. <div class="nav-doc-name"></div>
  75. </div>
  76. </footer>
  77. <!-- 编辑按钮 -->
  78. <button id="edit-btn" class="floating-action-btn edit-btn" title="编辑文档">
  79. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  80. <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  81. <path d="M18.5 2.50001C18.8978 2.10219 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10219 21.5 2.50001C21.8978 2.89784 22.1213 3.43741 22.1213 4.00001C22.1213 4.56262 21.8978 5.10219 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  82. </svg>
  83. </button>
  84. <!-- 回到顶部按钮 -->
  85. <button id="back-to-top" class="floating-action-btn back-to-top" title="回到顶部">
  86. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  87. <path d="M12 19V5M12 5L5 12M12 5L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  88. </svg>
  89. </button>
  90. <!-- 编辑器容器 -->
  91. <div id="editor-container" class="editor-container" style="display: none;">
  92. <div class="editor-header">
  93. <h3>编辑文档:<span id="editor-doc-name"></span></h3>
  94. <div class="editor-actions">
  95. <button id="save-btn" class="editor-action-btn save-btn">保存</button>
  96. <button id="cancel-edit-btn" class="editor-action-btn cancel-btn">取消</button>
  97. </div>
  98. </div>
  99. <textarea id="markdown-editor" class="markdown-editor" spellcheck="false"></textarea>
  100. </div>
  101. </main>
  102. <!-- 右侧 TOC -->
  103. <aside class="sidebar right-sidebar" id="right-sidebar">
  104. <nav id="toc" class="toc">
  105. <!-- 动态生成 TOC -->
  106. </nav>
  107. </aside>
  108. <!-- 移动端侧边栏切换按钮 -->
  109. <button class="toggle-sidebar-btn" id="toggle-left" title="切换文档目录">
  110. <span>☰</span>
  111. </button>
  112. <button class="toggle-sidebar-btn" id="toggle-right" title="切换标题目录">
  113. <span>≡</span>
  114. </button>
  115. </div>
  116. <script src="/js/reader.js"></script>
  117. </body>
  118. </html>