docnest 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docnest",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "可复用的本地 Markdown 文档中心",
   "repository": {
     "type": "git",

package/server/static/css/doc-reading-view.css

@@ -0,0 +1,29 @@
+.doc-reading-toggle {
+  position: absolute;
+  top: 4px;
+  right: var(--doc-reading-button-right, 40px);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  border: 1px solid var(--linear-border);
+  border-radius: 4px;
+  background: var(--linear-bg);
+  color: var(--linear-text);
+  cursor: pointer;
+}
+.doc-reading-toggle:hover { color: var(--linear-accent); }
+.doc-reading-toggle:focus-visible { outline: 2px solid var(--linear-accent); outline-offset: 2px; }
+.doc-reading-toggle svg { width: 20px; height: 20px; }
+body.doc-reading-expanded .sidebar,
+body.doc-reading-expanded .sidebar-chrome,
+body.doc-reading-expanded .doc-toc { display: none !important; }
+body.doc-reading-expanded .main-content {
+  padding-left: var(--doc-reading-left-margin) !important;
+  padding-right: var(--doc-reading-right-margin) !important;
+}
+body.doc-reading-expanded .doc-layout { width: 100% !important; max-width: none; }
+@media print { .doc-reading-toggle { display: none; } }

package/server/static/css/styles.css

@@ -51,6 +51,42 @@ body {
   gap: 1rem;
 }
 
+/* Equal side columns keep search centered in the entire header. */
+.header-content-with-search {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+.header-content-with-search > .doc-search-trigger {
+  justify-self: center;
+}
+
+.header-content-with-search > .header-meta {
+  justify-self: end;
+  max-width: 100%;
+}
+
+@media (max-width: 1200px) {
+  .header-content-with-search {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .header-content-with-search > .header-title-group {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .header-content-with-search > .header-meta {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .header-content-with-search > .doc-search-trigger {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
 .header h1 {
   font-size: 1.25rem;
   font-weight: 600;
@@ -1918,6 +1954,21 @@ body[data-theme="dark"] .diagram-viewer-content {
     gap: 0.5rem;
   }
 
+  .header-content-with-search {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .header-content-with-search > .header-title-group,
+  .header-content-with-search > .header-meta,
+  .header-content-with-search > .doc-search-trigger {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .header-content-with-search > .doc-search-trigger .header-action-text {
+    display: inline;
+  }
+
   .header-meta {
     width: 100%;
     align-items: flex-start;

package/server/static/js/core/doc-reading-view.js

@@ -0,0 +1,42 @@
+(function () {
+  const layout = document.querySelector('.doc-layout');
+  const main = document.querySelector('.main-content');
+  const article = layout?.querySelector('.markdown-body');
+  if (!layout || !main || !article) return;
+
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'doc-reading-toggle';
+  button.setAttribute('aria-controls', 'sidebar doc-toc');
+  function updateButton() {
+    const expanded = document.body.classList.contains('doc-reading-expanded');
+    const iconPath = expanded
+      ? 'M3 8h5V3M8 8 2 2M21 8h-5V3M16 8l6-6M3 16h5v5M8 16l-6 6M21 16h-5v5M16 16l6 6'
+      : 'M8 3H3v5M3 3l6 6M16 3h5v5M21 3l-6 6M3 16v5h5M3 21l6-6M21 16v5h-5M21 21l-6-6';
+    button.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${iconPath}"/></svg>`;
+    button.setAttribute('aria-label', expanded ? '缩小正文，恢复目录' : '放大正文，隐藏目录');
+    button.setAttribute('aria-pressed', String(expanded));
+    button.title = expanded ? '恢复默认阅读布局' : '扩大正文阅读区域';
+  }
+  function positionButton() {
+    const right = main.getBoundingClientRect().left + main.clientWidth - article.getBoundingClientRect().right;
+    main.style.setProperty('--doc-reading-button-right', `${Math.max(0, right)}px`);
+  }
+  window.addEventListener('resize', positionButton);
+  button.addEventListener('click', function () {
+    if (!document.body.classList.contains('doc-reading-expanded')) {
+      const mainBounds = main.getBoundingClientRect();
+      const articleRight = article.getBoundingClientRect().right;
+      const rightPadding = mainBounds.left + main.clientWidth - articleRight;
+      const outerMargin = document.documentElement.clientWidth - articleRight;
+      main.style.setProperty('--doc-reading-left-margin', `${Math.max(0, outerMargin)}px`);
+      main.style.setProperty('--doc-reading-right-margin', `${Math.max(0, rightPadding)}px`);
+    }
+    document.body.classList.toggle('doc-reading-expanded');
+    updateButton();
+    positionButton();
+  });
+  updateButton();
+  main.appendChild(button);
+  positionButton();
+})();

package/server/views/doc.ejs

@@ -9,6 +9,8 @@
   <link rel="stylesheet" href="/static/css/styles.css?v=<%= assetVersion %>">
   <link rel="stylesheet" href="/static/css/highlight.css?v=<%= assetVersion %>">
   <link rel="stylesheet" href="/static/css/themes.css?v=<%= assetVersion %>">
+  <link rel="stylesheet" href="/static/css/doc-reading-view.css?v=<%= assetVersion %>">
+  <script defer src="/static/js/core/doc-reading-view.js?v=<%= assetVersion %>"></script>
   <script src="/mermaid/mermaid.min.js?v=<%= assetVersion %>"></script>
   <%- include('partials/appearance-head') %>
   <!-- 基础功能模块 -->

package/server/views/partials/header.ejs

@@ -1,5 +1,5 @@
 <header class="header">
-  <div class="header-content">
+  <div class="header-content<%= !docsRestrictedMode ? ' header-content-with-search' : '' %>">
     <div class="header-title-group">
       <h1>
         <% if (docsLogo) { %><img class="brand-logo" src="<%= docsLogo %>" alt=""><% } else { %><span class="brand-fallback" aria-hidden="true"><span class="brand-fallback-emoji">📚</span><span class="brand-fallback-shape"></span></span><% } %>
@@ -11,8 +11,6 @@
         <p class="subtitle"><%= docsSubtitle %></p>
       <% } %>
     </div>
-    <div class="header-meta">
-      <div class="header-actions">
         <% if (!docsRestrictedMode) { %>
           <button type="button" id="doc-search-trigger" class="header-action-btn doc-search-trigger" aria-haspopup="dialog" aria-controls="doc-search-modal" title="搜索文档（⌘K / Ctrl K）">
             <span class="doc-search-icon" aria-hidden="true">⌕</span>
@@ -20,6 +18,8 @@
             <kbd class="doc-search-shortcut" aria-label="打开搜索快捷键">⌘ K</kbd>
           </button>
         <% } %>
+    <div class="header-meta">
+      <div class="header-actions">
         <% if (typeof showPrintButton !== 'undefined' && showPrintButton && !docsRestrictedMode) { %>
           <button type="button" id="print-doc-btn" class="header-action-btn print-btn" title="打印当前文章">
             <span class="print-icon">🖨️</span>