docnest 0.1.0

package/server/static/js/core/sidebar.js

@@ -0,0 +1,141 @@
+// 侧边栏功能
+(function() {
+  // 等待 DOM 加载完成
+  function initSidebarResizer() {
+    const sidebar = document.getElementById('sidebar');
+    const resizer = document.getElementById('sidebar-resizer');
+    const toggle = document.getElementById('sidebar-collapse-toggle');
+    
+    if (!sidebar || !resizer || !toggle) {
+      // 如果元素还没加载，延迟重试
+      setTimeout(initSidebarResizer, 100);
+      return;
+    }
+    
+    const COLLAPSE_KEY = 'sidebar-collapsed';
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    function getSidebarBounds() {
+      const styles = window.getComputedStyle(sidebar);
+      const minWidth = Number.parseFloat(styles.minWidth) || 240;
+      const viewportMaxWidth = Math.floor(window.innerWidth * 0.42);
+      const cssMaxWidth = Number.parseFloat(styles.maxWidth) || viewportMaxWidth;
+      const maxWidth = Math.max(minWidth, Math.min(cssMaxWidth, viewportMaxWidth));
+      return { minWidth, maxWidth };
+    }
+
+    function clampWidth(width) {
+      const { minWidth, maxWidth } = getSidebarBounds();
+      return Math.min(Math.max(width, minWidth), maxWidth);
+    }
+
+    function applySidebarWidth(width, shouldPersist) {
+      const nextWidth = clampWidth(width);
+      sidebar.style.width = nextWidth + 'px';
+      if (shouldPersist) {
+        localStorage.setItem('sidebar-width', String(Math.round(nextWidth)));
+      }
+    }
+
+    function setCollapsed(collapsed) {
+      document.body.classList.toggle('sidebar-collapsed', collapsed);
+      toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+      toggle.setAttribute('aria-label', collapsed ? '展开目录' : '收起目录');
+      toggle.setAttribute('title', collapsed ? '展开目录' : '收起目录');
+      toggle.querySelector('.sidebar-collapse-icon').textContent = collapsed ? '›' : '‹';
+      localStorage.setItem(COLLAPSE_KEY, collapsed ? '1' : '0');
+    }
+
+    // 从 localStorage 读取保存的宽度，读不到则使用当前计算宽度兜底
+    const savedWidth = Number.parseFloat(localStorage.getItem('sidebar-width') || '');
+    const initialWidth = Number.isFinite(savedWidth) ? savedWidth : sidebar.getBoundingClientRect().width;
+    applySidebarWidth(initialWidth, false);
+    setCollapsed(localStorage.getItem(COLLAPSE_KEY) === '1');
+    
+    resizer.addEventListener('mousedown', function(e) {
+      if (document.body.classList.contains('sidebar-collapsed')) return;
+      isResizing = true;
+      startX = e.clientX;
+      startWidth = sidebar.offsetWidth;
+      resizer.classList.add('dragging');
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    
+    document.addEventListener('mousemove', function(e) {
+      if (!isResizing) return;
+      
+      const diff = e.clientX - startX;
+      const newWidth = startWidth + diff;
+      applySidebarWidth(newWidth, false);
+      e.preventDefault();
+    });
+    
+    document.addEventListener('mouseup', function() {
+      if (isResizing) {
+        isResizing = false;
+        resizer.classList.remove('dragging');
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        
+        // 保存宽度到 localStorage
+        applySidebarWidth(sidebar.offsetWidth, true);
+      }
+    });
+
+    toggle.addEventListener('click', function() {
+      const willCollapse = !document.body.classList.contains('sidebar-collapsed');
+      setCollapsed(willCollapse);
+    });
+
+    window.addEventListener('resize', function() {
+      const currentWidth = Number.parseFloat(sidebar.style.width) || sidebar.getBoundingClientRect().width;
+      applySidebarWidth(currentWidth, false);
+    });
+  }
+  
+  // 页面加载完成后初始化
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSidebarResizer);
+  } else {
+    initSidebarResizer();
+  }
+})();
+
+// 目录折叠/展开功能（图标统一为 ▼，展开=朝下，折叠=CSS 旋转为朝右）
+function toggleDirectory(element) {
+  const children = element.nextElementSibling;
+  if (children) {
+    const directoryItem = element.parentElement;
+    const isCollapsed =
+      directoryItem.classList.contains('collapsed') ||
+      children.style.display === 'none';
+    children.style.display = isCollapsed ? 'block' : 'none';
+    directoryItem.classList.toggle('collapsed', !isCollapsed);
+    if (typeof window.saveTreeOpenState === 'function') window.saveTreeOpenState();
+  }
+}
+
+// 目录行点击：与普通目录一致，统一为切换展开/折叠（README 需点击文件链接进入）
+// 使用 body 委托，避免依赖 .tree-nav 加载时机
+(function() {
+  function onBodyClick(e) {
+    const dirToggle = e.target.closest('.tree-nav .dir-toggle');
+    if (!dirToggle) return;
+    toggleDirectory(dirToggle);
+  }
+  function bindDirReadmeClick() {
+    document.body.removeEventListener('click', onBodyClick);
+    document.body.addEventListener('click', onBodyClick);
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bindDirReadmeClick);
+  } else {
+    bindDirReadmeClick();
+  }
+  window.addEventListener('load', bindDirReadmeClick);
+})();

package/server/static/js/core/theme.js

@@ -0,0 +1,138 @@
+// 主题切换功能（支持系统自动跟随）
+(function() {
+  // 检测系统主题
+  function getSystemTheme() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  
+  // 从 localStorage 读取主题偏好，默认为 'auto'（跟随系统）
+  const savedTheme = localStorage.getItem('markdown-theme') || 'auto';
+  
+  // 相对路径，由 resolveThemeCss 统一加上 base 或前导 /
+  const themes = {
+    light: {
+      css: 'vendor/github-markdown-css/github-markdown-light.css',
+      icon: '☀️',
+      text: '浅色模式'
+    },
+    dark: {
+      css: 'vendor/github-markdown-css/github-markdown-dark.css',
+      icon: '🌙',
+      text: '深色模式'
+    },
+    auto: {
+      css: '',
+      icon: '💻',
+      text: '跟随系统'
+    }
+  };
+
+  function resolveThemeCss(path) {
+    if (!path) return '';
+    var base = document.querySelector('base');
+    if (base && base.getAttribute('href')) {
+      var baseHref = base.getAttribute('href').replace(/\/?$/, '/');
+      return baseHref + path.replace(/^\//, '');
+    }
+    return path.charAt(0) === '/' ? path : '/' + path;
+  }
+  
+  // 获取实际要应用的主题（如果是 auto，则使用系统主题）
+  function getEffectiveTheme(theme) {
+    return theme === 'auto' ? getSystemTheme() : theme;
+  }
+  
+  // 三种形态循环顺序：auto → light → dark → auto
+  const themeCycle = ['auto', 'light', 'dark'];
+
+  // 等待 DOM 加载完成
+  function initTheme() {
+    const themeToggle = document.getElementById('theme-toggle');
+    const themeLink = document.getElementById('markdown-theme');
+    const themeIcon = themeToggle?.querySelector('.theme-icon');
+    const themeText = themeToggle?.querySelector('.theme-text');
+
+    if (!themeToggle || !themeLink || !themeIcon) {
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initTheme);
+        return;
+      }
+      console.warn('主题切换元素未找到，可能 DOM 尚未加载完成');
+      return;
+    }
+
+    // 更新按钮显示（图标 + 文案）
+    function updateButtonDisplay(theme) {
+      const themeConfig = themes[theme];
+      if (themeIcon) themeIcon.textContent = themeConfig.icon;
+      if (themeText) themeText.textContent = themeConfig.text;
+    }
+
+    // 应用主题
+    function applyTheme(theme, skipSave) {
+      const effectiveTheme = getEffectiveTheme(theme);
+      const themeConfig = themes[theme];
+      const effectiveConfig = themes[effectiveTheme];
+
+      themeLink.href = resolveThemeCss(effectiveConfig.css);
+      document.body.setAttribute('data-theme', effectiveTheme);
+      document.body.setAttribute('data-theme-mode', theme);
+
+      updateButtonDisplay(theme);
+
+      if (!skipSave) {
+        localStorage.setItem('markdown-theme', theme);
+      }
+
+      if (typeof mermaid !== 'undefined') {
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: effectiveTheme === 'dark' ? 'dark' : 'default',
+          securityLevel: 'loose',
+          flowchart: {
+            useMaxWidth: true,
+            htmlLabels: true
+          }
+        });
+        mermaid.run().then(() => {
+          if (typeof setupDiagramViewer === 'function') {
+            setupDiagramViewer();
+          }
+        });
+      }
+    }
+
+    // 一键循环到下一形态
+    function cycleTheme() {
+      const current = document.body.getAttribute('data-theme-mode') || savedTheme;
+      const idx = themeCycle.indexOf(current);
+      const nextIdx = idx >= 0 ? (idx + 1) % themeCycle.length : 0;
+      applyTheme(themeCycle[nextIdx]);
+    }
+
+    if (window.matchMedia && !window._themeMediaQueryBound) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      mediaQuery.addEventListener('change', function() {
+        const currentMode = document.body.getAttribute('data-theme-mode') || savedTheme;
+        if (currentMode === 'auto') {
+          applyTheme('auto', true);
+        }
+      });
+      window._themeMediaQueryBound = true;
+    }
+
+    applyTheme(savedTheme);
+
+    themeToggle.addEventListener('click', function(e) {
+      e.stopPropagation();
+      cycleTheme();
+    });
+  }
+  
+  // 如果 DOM 已经加载完成，立即执行；否则等待 DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+  } else {
+    initTheme();
+  }
+})();

package/server/static/js/diagram/diagram-controls.js

@@ -0,0 +1,90 @@
+// 全屏模式下控制栏自动隐藏功能
+let controlsAutoHideTimer = null;
+let controlsMouseMoveTimer = null;
+
+function setupControlsAutoHide() {
+  const viewer = document.getElementById('diagram-viewer');
+  const controls = document.querySelector('.diagram-viewer-controls');
+  if (!viewer || !controls) return;
+  
+  // 初始状态：全屏模式下隐藏控制栏
+  if (isFullscreen) {
+    controls.classList.add('controls-hidden');
+  }
+  
+  // 鼠标移动事件处理
+  const mouseMoveHandler = function(e) {
+    if (!isFullscreen) return;
+    
+    const viewerRect = viewer.getBoundingClientRect();
+    const mouseY = e.clientY - viewerRect.top;
+    const viewerHeight = viewerRect.height;
+    const threshold = 100; // 距离底部100px时显示控制栏
+    
+    // 清除之前的定时器
+    if (controlsAutoHideTimer) {
+      clearTimeout(controlsAutoHideTimer);
+    }
+    if (controlsMouseMoveTimer) {
+      clearTimeout(controlsMouseMoveTimer);
+    }
+    
+    // 如果鼠标在底部区域，显示控制栏
+    if (mouseY > viewerHeight - threshold) {
+      controls.classList.remove('controls-hidden');
+      
+      // 鼠标静止后隐藏控制栏
+      controlsMouseMoveTimer = setTimeout(() => {
+        controls.classList.add('controls-hidden');
+      }, 2000); // 2秒后隐藏
+    } else {
+      // 鼠标不在底部区域，立即隐藏
+      controls.classList.add('controls-hidden');
+    }
+  };
+  
+  // 鼠标离开查看器时隐藏控制栏
+  const mouseLeaveHandler = function() {
+    if (!isFullscreen) return;
+    const controls = document.querySelector('.diagram-viewer-controls');
+    if (controls) {
+      controls.classList.add('controls-hidden');
+    }
+  };
+  
+  viewer.addEventListener('mousemove', mouseMoveHandler);
+  viewer.addEventListener('mouseleave', mouseLeaveHandler);
+  
+  // 保存处理器以便后续移除
+  viewer._controlsMouseMoveHandler = mouseMoveHandler;
+  viewer._controlsMouseLeaveHandler = mouseLeaveHandler;
+}
+
+function removeControlsAutoHide() {
+  const viewer = document.getElementById('diagram-viewer');
+  if (!viewer) return;
+  
+  if (controlsAutoHideTimer) {
+    clearTimeout(controlsAutoHideTimer);
+    controlsAutoHideTimer = null;
+  }
+  if (controlsMouseMoveTimer) {
+    clearTimeout(controlsMouseMoveTimer);
+    controlsMouseMoveTimer = null;
+  }
+  
+  if (viewer._controlsMouseMoveHandler) {
+    viewer.removeEventListener('mousemove', viewer._controlsMouseMoveHandler);
+    viewer._controlsMouseMoveHandler = null;
+  }
+  if (viewer._controlsMouseLeaveHandler) {
+    viewer.removeEventListener('mouseleave', viewer._controlsMouseLeaveHandler);
+    viewer._controlsMouseLeaveHandler = null;
+  }
+  
+  // 移除隐藏状态
+  const controls = document.querySelector('.diagram-viewer-controls');
+  if (controls) {
+    controls.classList.remove('controls-hidden');
+  }
+}