zhangdocs 1.1.29 → 1.1.34

package/theme/handbook/layout.ejs

@@ -53,7 +53,7 @@
   </div>
 
   <!-- 滚动到底部按钮 -->
-  <button class="scroll-to-bottom" id="scroll-to-bottom" aria-label="滚动到底部" title="滚动到底部">
+  <button class="scroll-to-bottom" id="scroll-to-bottom" aria-label="滚动到底部" title="滚动到底部" onclick="(function(){var container=document.querySelector('.markdown-body')||document.querySelector('.warpper')||document.documentElement;container.scrollTop=container.scrollHeight;window.scrollTo(0,document.documentElement.scrollHeight);return false;})();">
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M6 9l6 6 6-6"></path>
     </svg>
@@ -103,6 +103,104 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           
           // 标记为已初始化
           isInitialized = true;
+
+          function getDirectLink(li) {
+            if (!li || !li.children) {
+              return null;
+            }
+            for (var i = 0; i < li.children.length; i++) {
+              if (li.children[i].tagName === 'A') {
+                return li.children[i];
+              }
+            }
+            return li.querySelector('a');
+          }
+
+          function getDecodedTail(input) {
+            var tail = '';
+            try {
+              var parsed = new URL(input, window.location.origin);
+              tail = (parsed.pathname || '').split('/').pop() || '';
+            } catch (e) {
+              tail = String(input || '')
+                .split('#')[0]
+                .split('?')[0]
+                .split('/')
+                .pop() || '';
+            }
+            try {
+              return decodeURIComponent(tail);
+            } catch (e2) {
+              return tail;
+            }
+          }
+
+          function stripExt(name) {
+            return String(name || '').replace(/\.(html|md)$/i, '');
+          }
+
+          // 打开菜单时定位到当前页面，并高亮其父级目录路径
+          function locateCurrentMenuItem() {
+            var menuContent = menuPopup.querySelector('.menu-popup-content');
+            if (!menuContent) {
+              return;
+            }
+
+            var previousMarks = menuContent.querySelectorAll(
+              '.menu-current-item, .menu-current-link, .menu-ancestor-item'
+            );
+            previousMarks.forEach(function(node) {
+              node.classList.remove('menu-current-item');
+              node.classList.remove('menu-current-link');
+              node.classList.remove('menu-ancestor-item');
+            });
+
+            var currentLi = menuContent.querySelector('li.active');
+            if (!currentLi) {
+              // 回退：按当前 URL 匹配菜单项（兼容中文路径编码）
+              var currentTail = getDecodedTail(window.location.href);
+              var currentBase = stripExt(currentTail);
+              if (currentTail) {
+                var links = menuContent.querySelectorAll('a[href]');
+                for (var i = 0; i < links.length; i++) {
+                  var linkTail = getDecodedTail(links[i].getAttribute('href'));
+                  var linkBase = stripExt(linkTail);
+                  if (linkTail === currentTail || linkBase === currentBase) {
+                    currentLi = links[i].closest('li');
+                    break;
+                  }
+                }
+              }
+            }
+
+            if (!currentLi) {
+              return;
+            }
+
+            currentLi.classList.add('menu-current-item');
+            var currentLink = getDirectLink(currentLi);
+            if (currentLink) {
+              currentLink.classList.add('menu-current-link');
+            }
+
+            var parent = currentLi.parentElement;
+            while (parent && parent !== menuPopup) {
+              if (parent.tagName === 'LI') {
+                parent.classList.add('menu-ancestor-item');
+              }
+              parent = parent.parentElement;
+            }
+
+            try {
+              currentLi.scrollIntoView({
+                block: 'center',
+                inline: 'nearest'
+              });
+            } catch (e) {
+              // 兼容旧浏览器
+              currentLi.scrollIntoView();
+            }
+          }
           
           // 打开菜单
           function openMenu() {
@@ -110,6 +208,7 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
             menuPopup.classList.add('menu-popup-show');
             menuOverlay.classList.add('menu-overlay-show');
             document.body.style.overflow = 'hidden'; // 防止背景滚动
+            setTimeout(locateCurrentMenuItem, 50);
           }
           
           // 关闭菜单
@@ -177,20 +276,19 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
             // 菜单图标显示后，初始化菜单功能
             setTimeout(initMenuPopup, 50);
           }
-          // 初始化滚动到底部按钮
+          // 初始化滚动到底部按钮 - 直接添加 show 类
           if (scrollToBottomBtn) {
-            setTimeout(function() {
+            function addShowClass() {
               scrollToBottomBtn.style.display = 'flex';
-              // 检查是否需要显示按钮
-              setTimeout(function() {
-                var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                var scrollHeight = document.documentElement.scrollHeight;
-                var clientHeight = document.documentElement.clientHeight;
-                if (scrollHeight - scrollTop - clientHeight > 5) {
-                  scrollToBottomBtn.classList.add('show');
-                }
-              }, 200);
-            }, 100);
+              scrollToBottomBtn.classList.add('show');
+              // 强制设置内联样式，确保显示
+              scrollToBottomBtn.style.opacity = '1';
+              scrollToBottomBtn.style.visibility = 'visible';
+            }
+            addShowClass();
+            setTimeout(addShowClass, 0);
+            setTimeout(addShowClass, 100);
+            setTimeout(addShowClass, 300);
           }
         }
       })();
@@ -242,22 +340,43 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           // 菜单图标显示后，初始化菜单功能
           setTimeout(initMenuPopup, 50);
         }
-        // 显示内容后，初始化滚动到底部按钮
-        setTimeout(function() {
+        // 显示内容后，直接显示滚动到底部按钮 - 强制添加 show 类并设置内联样式
+        function addShowClass() {
           var scrollToBottomBtn = document.getElementById('scroll-to-bottom');
           if (scrollToBottomBtn) {
             scrollToBottomBtn.style.display = 'flex';
-            // 检查是否需要显示按钮
-            setTimeout(function() {
-              var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-              var scrollHeight = document.documentElement.scrollHeight;
-              var clientHeight = document.documentElement.clientHeight;
-              if (scrollHeight - scrollTop - clientHeight > 5) {
-                scrollToBottomBtn.classList.add('show');
-              }
-            }, 100);
+            scrollToBottomBtn.classList.add('show');
+            // 强制设置内联样式，确保显示
+            scrollToBottomBtn.style.opacity = '1';
+            scrollToBottomBtn.style.visibility = 'visible';
+            // 确保点击事件已绑定 - 使用多种方式
+            if (!scrollToBottomBtn.hasAttribute('data-click-bound')) {
+              var clickHandler = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                var markdownBody = document.querySelector('.markdown-body');
+                var warpper = document.querySelector('.warpper');
+                var container = markdownBody || warpper || document.documentElement;
+                if (container) {
+                  container.scrollTop = container.scrollHeight;
+                }
+                window.scrollTo(0, document.documentElement.scrollHeight);
+                return false;
+              };
+              scrollToBottomBtn.addEventListener('click', clickHandler, true); // 捕获阶段
+              scrollToBottomBtn.onclick = clickHandler; // 直接赋值
+              scrollToBottomBtn.setAttribute('data-click-bound', 'true');
+            }
           }
-        }, 100);
+        }
+        // 立即执行
+        addShowClass();
+        // 多次执行，确保添加成功
+        setTimeout(addShowClass, 0);
+        setTimeout(addShowClass, 50);
+        setTimeout(addShowClass, 100);
+        setTimeout(addShowClass, 200);
+        setTimeout(addShowClass, 500);
       }
 
       // 隐藏内容
@@ -384,9 +503,277 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
     setTimeout(initMenuPopup, 500);
     setTimeout(initMenuPopup, 1000);
     
-    // 图片预览功能初始化
+    // 图片/mermaid 预览功能初始化
     (function() {
       var imageViewer = null;
+      var imageViewerObserver = null;
+      var viewerRefreshTimer = null;
+      var mermaidPreviewModal = null;
+      var mermaidPreviewScale = 1;
+      var mermaidPreviewOffsetX = 0;
+      var mermaidPreviewOffsetY = 0;
+
+      function applyMermaidPreviewTransform(container) {
+        if (!container) {
+          return;
+        }
+        container.style.transform =
+          'translate(' + mermaidPreviewOffsetX + 'px, ' + mermaidPreviewOffsetY + 'px) scale(' + mermaidPreviewScale + ')';
+      }
+
+      function scheduleInitImageViewer(delay) {
+        if (viewerRefreshTimer) {
+          clearTimeout(viewerRefreshTimer);
+        }
+        viewerRefreshTimer = setTimeout(function() {
+          initImageViewer();
+        }, typeof delay === 'number' ? delay : 80);
+      }
+
+      function ensureMermaidPreviewModal() {
+        if (mermaidPreviewModal) {
+          return mermaidPreviewModal;
+        }
+        var modal = document.createElement('div');
+        modal.id = 'mermaid-preview-modal';
+        modal.style.cssText = [
+          'position:fixed',
+          'inset:0',
+          'display:none',
+          'z-index:100010',
+          'background:rgba(12,16,22,0.82)',
+          'align-items:center',
+          'justify-content:center',
+          'padding:24px'
+        ].join(';');
+
+        var container = document.createElement('div');
+        container.className = 'mermaid-preview-container';
+        container.style.cssText = [
+          'position:relative',
+          'max-width:96vw',
+          'max-height:92vh',
+          'overflow:hidden',
+          'background:#fff',
+          'border-radius:10px',
+          'padding:14px',
+          'box-shadow:0 12px 36px rgba(0,0,0,0.35)',
+          'transform-origin:center center',
+          'transition:transform 0.08s linear'
+        ].join(';');
+
+        var closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.innerHTML = '&times;';
+        closeBtn.setAttribute('aria-label', '关闭Mermaid预览');
+        closeBtn.style.cssText = [
+          'position:absolute',
+          'right:10px',
+          'top:6px',
+          'width:28px',
+          'height:28px',
+          'border:none',
+          'border-radius:50%',
+          'background:rgba(0,0,0,0.08)',
+          'cursor:pointer',
+          'font-size:20px',
+          'line-height:1'
+        ].join(';');
+
+        var content = document.createElement('div');
+        content.className = 'mermaid-preview-content';
+        content.style.cssText = [
+          'min-width:320px',
+          'min-height:160px',
+          'width:90vw',
+          'height:82vh',
+          'display:flex',
+          'align-items:center',
+          'justify-content:center',
+          'overflow:hidden',
+          'cursor:default'
+        ].join(';');
+
+        closeBtn.addEventListener('click', function() {
+          modal.style.display = 'none';
+          document.body.style.overflow = '';
+          mermaidPreviewScale = 1;
+          mermaidPreviewOffsetX = 0;
+          mermaidPreviewOffsetY = 0;
+          applyMermaidPreviewTransform(container);
+        });
+        modal.addEventListener('click', function(e) {
+          if (e.target === modal) {
+            modal.style.display = 'none';
+            document.body.style.overflow = '';
+            mermaidPreviewScale = 1;
+            mermaidPreviewOffsetX = 0;
+            mermaidPreviewOffsetY = 0;
+            applyMermaidPreviewTransform(container);
+          }
+        });
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape' && modal.style.display !== 'none') {
+            modal.style.display = 'none';
+            document.body.style.overflow = '';
+            mermaidPreviewScale = 1;
+            mermaidPreviewOffsetX = 0;
+            mermaidPreviewOffsetY = 0;
+            applyMermaidPreviewTransform(container);
+          }
+        });
+
+        container.appendChild(closeBtn);
+        container.appendChild(content);
+        modal.appendChild(container);
+        document.body.appendChild(modal);
+        mermaidPreviewModal = modal;
+        return mermaidPreviewModal;
+      }
+
+      function bindMermaidPreview(markdownBody) {
+        var mermaidSvgs = markdownBody.querySelectorAll('.mermaid svg');
+        mermaidSvgs.forEach(function(svg) {
+          if (svg.getAttribute('data-mermaid-preview-bound') === 'true') {
+            return;
+          }
+          svg.setAttribute('data-mermaid-preview-bound', 'true');
+          svg.style.cursor = 'zoom-in';
+          svg.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            var modal = ensureMermaidPreviewModal();
+            var content = modal.querySelector('.mermaid-preview-content');
+            var container = modal.querySelector('.mermaid-preview-container');
+            if (!content || !container) {
+              return;
+            }
+            content.innerHTML = '';
+
+            var clone = svg.cloneNode(true);
+            var vb = clone.getAttribute('viewBox');
+            var vbWidth = 0;
+            var vbHeight = 0;
+            if (vb) {
+              var parts = vb.trim().split(/\s+/);
+              if (parts.length === 4) {
+                vbWidth = parseFloat(parts[2]) || 0;
+                vbHeight = parseFloat(parts[3]) || 0;
+              }
+            }
+            if (!vbWidth || !vbHeight) {
+              var rect = svg.getBoundingClientRect();
+              vbWidth = rect.width || 800;
+              vbHeight = rect.height || 500;
+            }
+
+            var maxWidth = Math.floor(window.innerWidth * 0.9);
+            var maxHeight = Math.floor(window.innerHeight * 0.82);
+            var fitScale = Math.min(maxWidth / vbWidth, maxHeight / vbHeight);
+            if (!isFinite(fitScale) || fitScale <= 0) {
+              fitScale = 1;
+            }
+            // 预览默认尽量放大显示，但保留比例，避免文字过小
+            var defaultScale = Math.max(fitScale, 1.25);
+            var renderWidth = Math.round(vbWidth * defaultScale);
+            var renderHeight = Math.round(vbHeight * defaultScale);
+            if (renderWidth > maxWidth || renderHeight > maxHeight) {
+              var clampScale = Math.min(maxWidth / vbWidth, maxHeight / vbHeight);
+              renderWidth = Math.round(vbWidth * clampScale);
+              renderHeight = Math.round(vbHeight * clampScale);
+            }
+
+            clone.removeAttribute('width');
+            clone.removeAttribute('height');
+            clone.style.width = Math.max(320, renderWidth) + 'px';
+            clone.style.height = 'auto';
+            clone.style.maxWidth = '100%';
+            clone.style.maxHeight = '100%';
+            clone.style.display = 'block';
+            clone.style.cursor = 'grab';
+            clone.style.userSelect = 'none';
+            content.appendChild(clone);
+
+            // 改为缩放整个预览容器，不出现滚动条
+            if (content.__wheelZoomHandler) {
+              content.removeEventListener('wheel', content.__wheelZoomHandler, false);
+            }
+            var wheelZoomHandler = function(evt) {
+              evt.preventDefault();
+              var zoomStep = evt.deltaY < 0 ? 1.08 : 0.92;
+              mermaidPreviewScale = Math.max(0.8, Math.min(2.2, mermaidPreviewScale * zoomStep));
+              applyMermaidPreviewTransform(container);
+            };
+            content.addEventListener('wheel', wheelZoomHandler, { passive: false });
+            content.__wheelZoomHandler = wheelZoomHandler;
+
+            // 支持按住左键拖动（小手光标）
+            content.style.cursor = 'grab';
+            var isDragging = false;
+            var dragStartX = 0;
+            var dragStartY = 0;
+            var dragBaseX = 0;
+            var dragBaseY = 0;
+
+            if (content.__dragMouseDownHandler) {
+              content.removeEventListener('mousedown', content.__dragMouseDownHandler, false);
+            }
+            if (content.__dragMouseMoveHandler) {
+              window.removeEventListener('mousemove', content.__dragMouseMoveHandler, false);
+            }
+            if (content.__dragMouseUpHandler) {
+              window.removeEventListener('mouseup', content.__dragMouseUpHandler, false);
+            }
+
+            var dragMouseDownHandler = function(evt) {
+              if (evt.button !== 0) {
+                return;
+              }
+              isDragging = true;
+              dragStartX = evt.clientX;
+              dragStartY = evt.clientY;
+              dragBaseX = mermaidPreviewOffsetX;
+              dragBaseY = mermaidPreviewOffsetY;
+              content.style.cursor = 'grabbing';
+              clone.style.cursor = 'grabbing';
+              container.style.transition = 'none';
+              evt.preventDefault();
+            };
+            var dragMouseMoveHandler = function(evt) {
+              if (!isDragging) {
+                return;
+              }
+              mermaidPreviewOffsetX = dragBaseX + (evt.clientX - dragStartX);
+              mermaidPreviewOffsetY = dragBaseY + (evt.clientY - dragStartY);
+              applyMermaidPreviewTransform(container);
+            };
+            var dragMouseUpHandler = function() {
+              if (!isDragging) {
+                return;
+              }
+              isDragging = false;
+              content.style.cursor = 'grab';
+              clone.style.cursor = 'grab';
+              container.style.transition = 'transform 0.08s linear';
+            };
+
+            content.addEventListener('mousedown', dragMouseDownHandler, false);
+            window.addEventListener('mousemove', dragMouseMoveHandler, false);
+            window.addEventListener('mouseup', dragMouseUpHandler, false);
+            content.__dragMouseDownHandler = dragMouseDownHandler;
+            content.__dragMouseMoveHandler = dragMouseMoveHandler;
+            content.__dragMouseUpHandler = dragMouseUpHandler;
+
+            modal.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+            mermaidPreviewScale = 1;
+            mermaidPreviewOffsetX = 0;
+            mermaidPreviewOffsetY = 0;
+            applyMermaidPreviewTransform(container);
+          });
+        });
+      }
       
       function initImageViewer() {
         // 查找markdown-body容器
@@ -394,6 +781,20 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
         if (!markdownBody) {
           return;
         }
+
+        // 监听内容变化：mermaid 常常是异步渲染 SVG
+        if (!imageViewerObserver) {
+          imageViewerObserver = new MutationObserver(function() {
+            scheduleInitImageViewer(80);
+          });
+          imageViewerObserver.observe(markdownBody, {
+            childList: true,
+            subtree: true
+          });
+        }
+
+        // Mermaid 保持原始 SVG 渲染，点击时弹出预览（避免转图片导致文字裁切）
+        bindMermaidPreview(markdownBody);
         
         // 查找所有图片
         var images = markdownBody.querySelectorAll('img');
@@ -413,7 +814,7 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
         // 为图片添加样式和点击事件
         images.forEach(function(img) {
           // 跳过已经是链接内的图片
-          if (img.parentElement.tagName === 'A') {
+          if (img.parentElement && img.parentElement.tagName === 'A') {
             return;
           }
           
@@ -426,11 +827,41 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
         try {
           imageViewer = new Viewer(markdownBody, {
             inline: false,
-            viewed: function() {
-              // 查看图片时的回调
-            },
-            hidden: function() {
-              // 关闭查看器时的回调
+            viewed: function(event) {
+              // 仅对 Mermaid 图应用更大的默认缩放和白底，提升文字可读性
+              try {
+                var originalImage = event && event.detail && event.detail.originalImage;
+                var isMermaidImage = !!(
+                  originalImage &&
+                  originalImage.classList &&
+                  originalImage.classList.contains('mermaid-preview-image')
+                );
+                if (!isMermaidImage || !imageViewer) {
+                  return;
+                }
+
+                var imageData = imageViewer.imageData;
+                var viewerData = imageViewer.viewerData;
+                if (!imageData || !viewerData || !imageData.naturalWidth || !imageData.naturalHeight) {
+                  return;
+                }
+
+                var fitRatio = Math.min(
+                  viewerData.width / imageData.naturalWidth,
+                  viewerData.height / imageData.naturalHeight
+                );
+                var targetRatio = Math.max(fitRatio * 1.2, 1.25);
+                imageViewer.zoomTo(targetRatio);
+
+                if (imageViewer.image) {
+                  imageViewer.image.style.backgroundColor = '#ffffff';
+                  imageViewer.image.style.padding = '14px';
+                  imageViewer.image.style.borderRadius = '8px';
+                  imageViewer.image.style.boxShadow = '0 6px 24px rgba(0, 0, 0, 0.25)';
+                }
+              } catch (e) {
+                console.error('Mermaid 预览缩放初始化失败:', e);
+              }
             },
             toolbar: {
               zoomIn: true,
@@ -464,6 +895,8 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       // 延迟初始化（处理动态显示的情况）
       setTimeout(initImageViewer, 500);
       setTimeout(initImageViewer, 1000);
+      setTimeout(initImageViewer, 2000);
+      setTimeout(initImageViewer, 3500);
     })();
     
     // 上一节/下一节导航功能
@@ -491,54 +924,122 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
     
     // 滚动到底部功能
     (function() {
+      var scrollToBottomBtn = null;
+      var mainContainer = null;
+      var isInitialized = false;
+      
+      // 检查是否在页面底部
+      function isAtBottom() {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        var scrollHeight = document.documentElement.scrollHeight;
+        var clientHeight = document.documentElement.clientHeight;
+        // 允许5px的误差
+        return scrollHeight - scrollTop - clientHeight <= 5;
+      }
+      
+        // 显示/隐藏按钮
+        function toggleButton() {
+          if (!scrollToBottomBtn) {
+            return;
+          }
+          
+          // 确保按钮可见（如果内容已显示）
+          if (mainContainer && mainContainer.style.display !== 'none') {
+            scrollToBottomBtn.style.display = 'flex';
+            
+            // 直接添加 show 类，让按钮显示
+            // 只有在页面底部时才移除 show 类
+            if (isAtBottom()) {
+              scrollToBottomBtn.classList.remove('show');
+            } else {
+              scrollToBottomBtn.classList.add('show');
+            }
+          } else {
+            // 如果内容未显示，确保按钮有 show 类（当内容显示时会自动显示）
+            scrollToBottomBtn.classList.add('show');
+          }
+        }
+      
+      // 初始化函数
       function initScrollToBottom() {
-        var scrollToBottomBtn = document.getElementById('scroll-to-bottom');
+        if (isInitialized) {
+          // 如果已初始化，只更新按钮状态
+          toggleButton();
+          // 即使已初始化，也确保点击事件已绑定
+          if (scrollToBottomBtn) {
+            scrollToBottomBtn.onclick = function(e) {
+              if (e) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+              console.log('按钮被点击了！');
+              var markdownBody = document.querySelector('.markdown-body');
+              var warpper = document.querySelector('.warpper');
+              var container = markdownBody || warpper || document.documentElement;
+              if (container && container.scrollTo) {
+            container.scrollTop = container.scrollHeight;
+              }
+              window.scrollTo(0, document.documentElement.scrollHeight);
+              return false;
+            };
+          }
+          return;
+        }
+        
+        scrollToBottomBtn = document.getElementById('scroll-to-bottom');
+        mainContainer = document.getElementById('main-container');
+        
         if (!scrollToBottomBtn) {
           return;
         }
         
-        // 确保按钮可见（如果内容已显示）
-        var mainContainer = document.getElementById('main-container');
+        isInitialized = true;
+        
+        // 立即添加 show 类，确保按钮显示
         if (mainContainer && mainContainer.style.display !== 'none') {
           scrollToBottomBtn.style.display = 'flex';
+          scrollToBottomBtn.classList.add('show');
         }
         
-        // 检查是否在页面底部
-        function isAtBottom() {
-          var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-          var scrollHeight = document.documentElement.scrollHeight;
-          var clientHeight = document.documentElement.clientHeight;
-          // 允许5px的误差
-          return scrollHeight - scrollTop - clientHeight <= 5;
+        // 滚动到底部 - 找到正确的滚动容器
+        function scrollToBottom() {
+          // 尝试找到滚动容器
+          var markdownBody = document.querySelector('.markdown-body');
+          var warpper = document.querySelector('.warpper');
+          var container = markdownBody || warpper || document.documentElement;
+          
+          // 滚动容器
+          if (container) {
+            container.scrollTop = container.scrollHeight;
+          }
+          // 同时滚动 window（以防万一）
+          window.scrollTo(0, document.documentElement.scrollHeight);
         }
         
-        // 显示/隐藏按钮
-        function toggleButton() {
-          // 确保按钮可见
-          if (mainContainer && mainContainer.style.display !== 'none') {
-            scrollToBottomBtn.style.display = 'flex';
+        // 绑定点击事件 - 使用多种方式确保事件能触发
+        var clickHandler = function(e) {
+          if (e) {
+            e.preventDefault();
+            e.stopPropagation();
           }
+          // 找到滚动容器并滚动
+          var markdownBody = document.querySelector('.markdown-body');
+          var warpper = document.querySelector('.warpper');
+          var container = markdownBody || warpper || document.documentElement;
           
-          if (isAtBottom()) {
-            scrollToBottomBtn.classList.remove('show');
-          } else {
-            scrollToBottomBtn.classList.add('show');
+          if (container) {
+            container.scrollTop = container.scrollHeight;
           }
-        }
-        
-        // 滚动到底部
-        function scrollToBottom() {
-          window.scrollTo({
-            top: document.documentElement.scrollHeight,
-            behavior: 'smooth'
-          });
-        }
-        
-        // 绑定点击事件
-        scrollToBottomBtn.addEventListener('click', function(e) {
-          e.preventDefault();
-          scrollToBottom();
-        });
+          // 同时滚动 window
+          window.scrollTo(0, document.documentElement.scrollHeight);
+          return false;
+        };
+        // 先移除可能存在的旧监听器
+        scrollToBottomBtn.removeEventListener('click', clickHandler);
+        // 添加新的监听器 - 使用捕获阶段
+        scrollToBottomBtn.addEventListener('click', clickHandler, true);
+        // 同时使用 onclick 属性作为备用
+        scrollToBottomBtn.onclick = clickHandler;
         
         // 监听滚动事件
         var scrollTimer = null;
@@ -550,8 +1051,17 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           scrollTimer = setTimeout(toggleButton, 100);
         }, { passive: true });
         
-        // 初始检查
+        // 初始检查（多次检查，确保页面渲染完成）
+        // 直接添加 show 类，确保按钮显示
+        if (mainContainer && mainContainer.style.display !== 'none') {
+          scrollToBottomBtn.style.display = 'flex';
+          scrollToBottomBtn.classList.add('show');
+        }
+        toggleButton();
+        setTimeout(toggleButton, 100);
         setTimeout(toggleButton, 300);
+        setTimeout(toggleButton, 500);
+        setTimeout(toggleButton, 1000);
         
         // 监听内容变化（处理动态加载的内容）
         var observer = new MutationObserver(function() {
@@ -577,6 +1087,65 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       // 延迟初始化（处理动态显示的情况）
       setTimeout(initScrollToBottom, 500);
       setTimeout(initScrollToBottom, 1000);
+      setTimeout(initScrollToBottom, 2000);
+      
+      // 强制添加 show 类 - 不依赖任何条件
+      function forceShowButton() {
+        var btn = document.getElementById('scroll-to-bottom');
+        var container = document.getElementById('main-container');
+        if (btn && container && container.style.display !== 'none') {
+          btn.style.display = 'flex';
+          btn.classList.add('show');
+          // 确保点击事件已绑定
+          if (!btn.hasAttribute('data-click-bound')) {
+            btn.addEventListener('click', function(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              var markdownBody = document.querySelector('.markdown-body');
+              var warpper = document.querySelector('.warpper');
+              var container = markdownBody || warpper || document.documentElement;
+              if (container && container.scrollTo) {
+            container.scrollTop = container.scrollHeight;
+              }
+              window.scrollTo(0, document.documentElement.scrollHeight);
+            });
+            btn.setAttribute('data-click-bound', 'true');
+          }
+        }
+      }
+      
+      // 在多个时机强制添加 show 类
+      forceShowButton();
+      setTimeout(forceShowButton, 100);
+      setTimeout(forceShowButton, 200);
+      setTimeout(forceShowButton, 500);
+      setTimeout(forceShowButton, 1000);
+      setTimeout(forceShowButton, 2000);
+      
+      // 监听内容显示事件
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', forceShowButton);
+      }
+      
+      // 使用 MutationObserver 监听 main-container 的显示状态
+      var containerObserver = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+            var container = document.getElementById('main-container');
+            if (container && container.style.display !== 'none') {
+              forceShowButton();
+            }
+          }
+        });
+      });
+      
+      var mainContainer = document.getElementById('main-container');
+      if (mainContainer) {
+        containerObserver.observe(mainContainer, {
+          attributes: true,
+          attributeFilter: ['style']
+        });
+      }
     })();
   </script>
   <% include footer.ejs %>