Add lucide icons and TOC toggle

views/page.html

@@ -28,15 +28,17 @@
     </aside>
     <main class="content">
       <div class="content-toolbar">
-        <div class="toolbar-breadcrumb" id="toolbarBreadcrumb" aria-label="当前文档路径">
-          <span class="toolbar-kicker">Docs</span>
+        <div class="toolbar-breadcrumb-group">
+          <button class="btn-icon btn-sidebar-toggle btn-sidebar-toggle-toolbar" id="btnToggleSidebarToolbar" title="显示侧边栏" aria-label="显示侧边栏"></button>
+          <div class="toolbar-breadcrumb" id="toolbarBreadcrumb" aria-label="当前文档路径">
+            <span class="toolbar-kicker">Docs</span>
+          </div>
         </div>
         <div class="toolbar-actions">
           <label class="theme-select-wrap" for="themeSelect" title="切换主题包">
             <span class="theme-select-label">主题</span>
             <select class="theme-select" id="themeSelect" aria-label="选择主题"></select>
           </label>
-          <button class="btn-icon" id="btnToggleSidebar" title="切换侧边栏">☰</button>
           <button class="btn-icon" id="btnToggleTheme" title="切换明暗模式">🌙</button>
         </div>
       </div>
@@ -49,22 +51,22 @@
           </div>
         </div>
         <article class="markdown-body" id="markdownContent" style="display:none;">
-          <header class="article-header" id="articleHeader">
-            <h1 class="article-title" id="articleTitle"></h1>
-          </header>
           <div class="article-layout">
-            <div class="article-body" id="articleBody"></div>
+            <div class="article-main">
+              <header class="article-header" id="articleHeader">
+                <h1 class="article-title" id="articleTitle"></h1>
+              </header>
+              <div class="article-body" id="articleBody"></div>
+              <footer class="article-meta-footer" id="articleMeta"></footer>
+            </div>
             <aside class="toc-panel" id="tocPanel" aria-label="页面信息与目录">
-              
               <div class="toc-card">
-                <div class="toc-title">目录</div>
+                <div class="toc-card-header">
+                  <div class="toc-title">目录</div>
+                  <button class="btn-icon toc-toggle-btn" id="btnToggleToc" type="button" title="收起目录" aria-label="收起目录"></button>
+                </div>
                 <nav class="toc-nav" id="tocNav"></nav>
               </div>
-              <div class="toc-card meta-card">
-                <div class="toc-title">信息</div>
-                <div class="article-meta article-meta-side" id="articleMeta"></div>
-              </div>
-              
             </aside>
           </div>
         </article>
@@ -72,10 +74,11 @@
     </main>
   </div>
   <div class="loading-bar" id="loadingBar"></div>
-  <div class="mobile-nav-btn" id="mobileNavBtn">☰</div>
+  <button class="mobile-nav-btn" id="mobileNavBtn" aria-label="打开侧边栏"></button>
   <script>
     window.__WEBOOK__ = {{WEBOOK_DATA}};
   </script>
+  <script src="/_vendor/lucide/lucide.min.js"></script>
   <script src="/_webook/app.js"></script>
   <script src="/_webook/live-reload.js"></script>
 </body>