fix:优化目录生成规则

src/App.vue

@@ -325,6 +325,7 @@ export default {
         text: this.text,
         html: this.html
       });
+      this.addTocClickToBody();
     }, 0);
   },
   watch: {
@@ -488,22 +489,13 @@ export default {
       tocEls.forEach(el => {
         el.innerHTML = `<ul class="md_toc_list">${dirTags
           .map(tag => {
-            return `<li class="md_toc_item" data-type="${tag.tag}" data-id="${tag.id}">${tag.text}</li>`;
+            return `<li class="md_toc_item type_${tag.tag}" href="${tag.id}">${tag.text}</li>`;
           })
           .join("")}</ul>`;
       });
 
       this.html = vDom.innerHTML;
       // console.log(document.querySelectorAll(".md_toc_list"));
-      document.querySelector("body").addEventListener("click", function(e) {
-        if (!e.target?.className.includes("md_toc_item")) return;
-        console.log(e.target.dataset.id);
-        const targetEl = document.getElementById(e.target?.dataset?.id);
-        if (!targetEl) return;
-        targetEl.scrollIntoView({
-          behavior: "smooth"
-        });
-      });
     },
     renderLinksHtml({ vDom, links }) {
       // 缓存里没有的链接，就发送请求获取信息
@@ -549,10 +541,21 @@ export default {
             const title = getLinkTitle(linkEl, item);
             linkEl.innerHTML = renderLinkCard(title, item);
           });
-
           this.html = vDom.innerHTML;
         }
       });
+    },
+    addTocClickToBody() {
+      document.querySelector("body").addEventListener("click", function(e) {
+        if (!e.target?.className.includes("md_toc_item")) return;
+        const targetEl = document.getElementById(
+          e.target?.getAttribute("href")
+        );
+        if (!targetEl) return;
+        targetEl.scrollIntoView({
+          behavior: "smooth"
+        });
+      });
     }
   }
 };

src/assets/style/global.less

@@ -88,35 +88,35 @@ textarea {
 
 .md_toc_list {
   li.md_toc_item {
-    list-style-type: none;
+    list-style: disc;
+    // list-style-type: none;
     cursor: pointer;
     color: var(--md-editor-border-color-active);
     position: relative;
-    margin: 12px 8px;
-    &::before {
-      content: "\·";
-      font-size: 20px;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-    &[data-type="h1"] {
+    // &::before {
+    //   content: "\·";
+    //   font-size: 20px;
+    //   position: absolute;
+    //   left: 0;
+    //   top: 50%;
+    //   transform: translateY(-50%);
+    // }
+    &.type_h1 {
       padding-left: 20px;
     }
-    &[data-type="h2"] {
+    &.type_h2 {
       padding-left: 30px;
     }
-    &[data-type="h3"] {
+    &.type_h3 {
       padding-left: 40px;
     }
-    &[data-type="h4"] {
+    &.type_h4 {
       padding-left: 50px;
     }
-    &[data-type="h5"] {
+    &.type_h5 {
       padding-left: 60px;
     }
-    &[data-type="h6"] {
+    &.type_h6 {
       padding-left: 70px;
     }
   }

src/components/content/components/help-doc.vue

@@ -60,6 +60,11 @@ export default {
           doc: "[链接标题](url)",
           icon: "lianjie"
         },
+        {
+          title: "目录",
+          doc: "[toc](目录)",
+          icon: "dir"
+        },
         {
           title: "图片",
           doc: "![alt](url)",

src/components/content/components/toc-doc.vue

@@ -72,10 +72,24 @@ export default {
     scrollToTitle(item) {
       const targetEl = document.getElementById(item.id);
       if (!targetEl) return;
-      const targetOffsetTop = targetEl.offsetTop;
-      document.querySelector(
+      const scrollEl = document.querySelector(
         ".md_preview .md_preview_scroll_container"
-      ).scrollTop = targetOffsetTop;
+      );
+      if (
+        scrollEl.scrollHeight > scrollEl.clientHeight ||
+        scrollEl.offsetHeight > scrollEl.clientHeight
+      ) {
+        const targetOffsetTop = targetEl.offsetTop;
+        scrollEl.scrollTop = targetOffsetTop;
+      } else {
+        targetEl.scrollIntoView({
+          behavior: "smooth"
+        });
+      }
+      // const targetOffsetTop = targetEl.offsetTop;
+      // document.querySelector(
+      //   ".md_preview .md_preview_scroll_container"
+      // ).scrollTop = targetOffsetTop;
     },
     dirItemActive(item) {
       const itemScrollTop = document.getElementById(item.id)?.offsetTop;

src/components/content/mixins/render-mixins.js

@@ -81,8 +81,6 @@ export default {
                   src="${href}"
                    ></video></p>`;
           }
-          console.log("imgimgimg");
-
           // ![img](...)渲染图片
           let out =
             '<p class="md_img_container"><img src="' +
@@ -144,7 +142,6 @@ export default {
           return "<h" + level + ">" + text + "</h" + level + ">\n";
         },
         link(href, title, text) {
-          console.log("linklink");
           if (text?.toLowerCase() === "toc") {
             return `
             <h1 class="toc_title">${href}</h1>
@@ -194,7 +191,7 @@ export default {
               return `<span style="display:inline-block;text-indent:2em;">${val}</span>`;
             })
             .replace(
-              /\[TOC\]/i,
+              /@?\[TOC\]/i,
               `<h1 class="toc_title">目录</h1><div class="tocEl"></div>`
             );
 

src/components/header/md-header.vue

@@ -197,7 +197,7 @@ export default {
         {
           name: "call",
           icon: "aite",
-          tip: "@好友",
+          tip: "@关注的人",
           startStr: "@",
           endStr: ""
         },

webpack.config.js

@@ -8,6 +8,8 @@ module.exports = {
   },
   devServer: {
     contentBase: path.resolve(__dirname, "dist"),
+    host: "0.0.0.0",
+    https: true,
     open: true
   },
   resolve: {