优化目录效果

docutranslate/template/markdown.html

@@ -29,21 +29,22 @@
         /* 目录按钮 */
         #toc-btn {
             position: fixed;
-            left: 10px;
+            left: 0;
             top: 10px;
-            width: 32px;
-            height: 32px;
+            width: 20px;
+            height: 24px;
             background: #fff;
             border: 1px solid #ddd;
-            border-radius: 4px;
+            border-left: none;
+            border-radius: 0 4px 4px 0;
             cursor: pointer;
             z-index: 10000;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 14px;
+            font-size: 12px;
             color: #666;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
         }
         #toc-btn:hover { background: #f5f5f5; }
 
@@ -52,12 +53,12 @@
             position: fixed;
             left: 0;
             top: 0;
-            width: 240px;
+            width: 220px;
             height: 100vh;
             background: #fff;
             border-right: 1px solid #ddd;
             z-index: 9999;
-            padding: 50px 15px 20px;
+            padding: 40px 12px 20px;
             box-sizing: border-box;
             overflow-y: auto;
             transform: translateX(-100%);
@@ -140,20 +141,30 @@
             li.className = 'toc-item';
             li.dataset.level = item.level;
 
-            let html = `<a class="toc-link" href="#${item.id}">
-                <span class="toc-text">${item.text}</span>`;
+            const div = document.createElement('div');
+            div.className = 'toc-link';
+            div.innerHTML = `<span class="toc-text">${item.text}</span>`;
+
             if (item.children.length) {
-                html += `<span class="toc-expander" onclick="event.stopPropagation(); toggle(this)">+</span>`;
+                const expander = document.createElement('span');
+                expander.className = 'toc-expander';
+                expander.textContent = '+';
+                expander.onclick = function(e) { e.stopPropagation(); toggle(this); };
+                div.appendChild(expander);
             }
-            html += `</a>`;
-            li.innerHTML = html;
+
+            div.onclick = function() { scrollTo(item.id); };
+            li.appendChild(div);
 
             if (item.children.length) {
                 const ul = document.createElement('ul');
                 ul.className = 'toc-children';
                 render(item.children, ul);
                 li.appendChild(ul);
-                if (item.level === 1) { ul.classList.add('expanded'); li.querySelector('.toc-expander').textContent = '-'; }
+                if (item.level === 1) {
+                    ul.classList.add('expanded');
+                    expander.textContent = '-';
+                }
             }
             parent.appendChild(li);
         });
@@ -165,15 +176,12 @@
         btn.textContent = ul.classList.contains('expanded') ? '-' : '+';
     }
 
-    window.toggleToc = function() { panel.classList.toggle('show'); };
+    function scrollTo(id) {
+        const el = document.getElementById(id);
+        if (el) el.scrollIntoView({ behavior: 'smooth' });
+    }
 
-    document.querySelectorAll('.toc-link').forEach(link => {
-        link.addEventListener('click', function(e) {
-            e.preventDefault();
-            const id = this.getAttribute('href').slice(1);
-            document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
-        });
-    });
+    window.toggleToc = function() { panel.classList.toggle('show'); };
 
     init();
 })();