From acf8d99d6a3c8ecf29c39c129c5ef277bb04cba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AF=E6=99=AE?= <18691763612@163.com>
Date: Fri, 10 Apr 2026 14:45:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=85=B1=E6=80=A7?=
 =?UTF-8?q?=E9=9C=80=E6=B1=82=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=9A=84=E7=9B=AE=E5=BD=95=E8=81=94=E5=8A=A8=E5=92=8C?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=A1=86=E7=BA=BF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为标题补充锚点id解决marked新版不自动生成id导致目录跳转失效
- 向iframe注入表格框线及排版样式
- 添加滚动监听实现目录高亮联动

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 md-viewer.html | 46 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/md-viewer.html b/md-viewer.html
index 762829a..d3584ea 100644
--- a/md-viewer.html
+++ b/md-viewer.html
@@ -78,25 +78,59 @@ if (filePath) {
       /* 检测是否为自带 HTML 结构的文件（如共性需求说明.md） */
       const isRawHtml = /^\s*<(?:style|div|!doctype|html)/i.test(md);
       if (isRawHtml) {
-        /* 文件混合了 HTML 结构和 Markdown 内容，需先解析 Markdown 再渲染 */
+        /* 为标题生成锚点 id（marked 新版不再自动生成） */
+        function addHeadingIds(html) {
+          return html.replace(/<h([1-6])>([\s\S]*?)<\/h\1>/g, function(_, lvl, inner) {
+            var plain = inner.replace(/<[^>]*>/g, '');
+            var id = plain.toLowerCase().replace(/[^\p{L}\p{N}\s-]/gu, '').trim().replace(/\s+/g, '-');
+            return '<h' + lvl + ' id="' + id + '">' + inner + '</h' + lvl + '>';
+          });
+        }
         let processed = md;
         if (typeof marked !== 'undefined') {
-          /* 保留 <style>/<div> 等 HTML 标签，只对标签外的 Markdown 文本做解析 */
           processed = md.replace(/(^[\s\S]*?<div id="main-content">)([\s\S]*?)(<\/div>\s*$)/i, function(_, before, mdBody, after) {
-            return before + marked.parse(mdBody) + after;
+            return before + addHeadingIds(marked.parse(mdBody)) + after;
           });
-          /* 同时解析 toc-container 内的 Markdown 列表 */
           processed = processed.replace(/(<div id="toc-container">)([\s\S]*?)(<\/div>)/, function(_, before, tocBody, after) {
             return before + marked.parse(tocBody) + after;
           });
         }
-        /* 用 iframe 隔离渲染，避免宿主页样式冲突 */
+        /* iframe 内注入：表格框线 + 排版样式 */
+        const extraCss = '<style>'
+          + 'html{scroll-behavior:smooth}'
+          + 'body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Segoe UI",sans-serif}'
+          + '#main-content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}'
+          + '#main-content th{background:#fafafa;font-weight:600;text-align:left;padding:8px 12px;border:1px solid #e8ecf1}'
+          + '#main-content td{padding:8px 12px;border:1px solid #e8ecf1}'
+          + '#main-content h1{font-size:24px;font-weight:800;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid #e8ecf1}'
+          + '#main-content h2{font-size:20px;font-weight:700;margin:32px 0 12px;padding-bottom:8px;border-bottom:1px solid #e8ecf1}'
+          + '#main-content h3{font-size:17px;font-weight:600;margin:24px 0 8px}'
+          + '#main-content h4{font-size:15px;font-weight:600;margin:20px 0 6px}'
+          + '#main-content p{font-size:14px;line-height:1.8;margin:8px 0}'
+          + '#main-content ul,#main-content ol{padding-left:20px;margin:8px 0;font-size:14px;line-height:1.8}'
+          + '#main-content code{background:#f5f5f5;padding:2px 6px;border-radius:4px;font-size:13px}'
+          + '#main-content blockquote{border-left:4px solid #1677FF;padding:8px 16px;margin:12px 0;background:#E6F7FF;border-radius:0 4px 4px 0}'
+          + '#toc-container a.active{color:#1677FF;font-weight:600}'
+          + '</style>';
+        /* iframe 内注入：滚动时高亮当前目录项 */
+        const tocScript = '<script>'
+          + 'document.addEventListener("DOMContentLoaded",function(){'
+          + 'var links=document.querySelectorAll("#toc-container a[href^=\\"#\\"]");'
+          + 'var items=[];'
+          + 'links.forEach(function(a){var id=decodeURIComponent(a.getAttribute("href").slice(1));var el=document.getElementById(id);if(el)items.push({el:el,link:a})});'
+          + 'if(!items.length)return;'
+          + 'function update(){var sy=window.scrollY||document.documentElement.scrollTop;var cur=items[0];'
+          + 'for(var i=0;i<items.length;i++){if(items[i].el.offsetTop<=sy+80)cur=items[i]}'
+          + 'links.forEach(function(a){a.classList.remove("active")});if(cur)cur.link.classList.add("active")}'
+          + 'window.addEventListener("scroll",update);update()});'
+          + '<\/script>';
+        /* 用 iframe 隔离渲染 */
         document.querySelector('.topbar').style.display = 'none';
         const wrap = document.getElementById('content');
         wrap.style.cssText = 'max-width:none;margin:0;padding:0;min-height:100vh';
         const iframe = document.createElement('iframe');
         iframe.style.cssText = 'width:100%;height:100vh;border:none';
-        iframe.srcdoc = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + processed + '</body></html>';
+        iframe.srcdoc = '<!DOCTYPE html><html><head><meta charset="UTF-8">' + extraCss + '</head><body>' + processed + tocScript + '</body></html>';
         wrap.innerHTML = '';
         wrap.appendChild(iframe);
       } else {