web_src/js/index.js

@@ -89,47 +89,75 @@ const commentMDEditors = {};
 // Silence fomantic's error logging when tabs are used without a target content element
 $.fn.tab.settings.silent = true;
 
-$(document).ready(function(){
-  if ($('.file-view.markdown').length && $('.file-view.markdown').length>0) { 
-    setTimeout(()=>{
-      const eleList =document.querySelectorAll('div.anchor-wrap .anchor')
+(function() {
+  function isInviewPort(element){
+    const viewWidth = window.innerWidth || document.documentElement.clientWidth || ''
+    const viewHeight = window.innerHeight || document.documentElement.clientHeight || ''
+    const {top,right,bottom,left} = element.getBoundingClientRect()
+    return (top>=0 && left>=0 && right<viewWidth && bottom<=viewHeight)
+  }  
+  function clickHandler() {
+    if(!this.parentElement.classList.contains('hidden')) {
+      this.parentElement.classList.add('hidden')
+      this.firstChild.classList.replace('ri-arrow-drop-left-line','ri-arrow-drop-right-line')
+    } else {
+      this.parentElement.classList.remove('hidden')
+      this.firstChild.classList.replace('ri-arrow-drop-right-line','ri-arrow-drop-left-line')
+    }
+  }
+
+  let timeout = null;
+  function scrollHandler() {
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(function(){
+      let flag = false
+      const eleList = document.querySelectorAll('div.anchor-wrap .anchor')
       const navList = document.querySelectorAll('.markdown_toc .catalog-li')
-      const toggleIcon = document.getElementsByClassName('toggle-container')
-      toggleIcon[0].addEventListener('click',function(){
-      if(!this.parentElement.classList.contains('hidden')){
-        this.parentElement.classList.add('hidden')
-        this.firstChild.classList.replace('ri-arrow-drop-left-line','ri-arrow-drop-right-line')
-      }else{
-        this.parentElement.classList.remove('hidden')
-        this.firstChild.classList.replace('ri-arrow-drop-right-line','ri-arrow-drop-left-line')
+      eleList.forEach((k,index)=>{
+        if(isInviewPort(k) && !flag){
+          flag = true
+          navList.forEach((ele)=>{
+            ele.classList.remove('active')
+          })
+          navList[index].classList.add('active')
         }
       })
-      navList[0].classList.add('active')
-      let timeout = null;
-        $(window).on('scroll', () => {
-        if(timeout !== null) clearTimeout(timeout);
-        timeout = setTimeout(function(){
-          let flag = false
-          eleList.forEach((k,index)=>{
-            if(isInviewPort(k) && !flag){
-              flag = true
-              navList.forEach((ele)=>{
-                ele.classList.remove('active')
-              })
-              navList[index].classList.add('active')
-            }
-          })
-        },50)
+    }, 50)
+  }
+  window.initMarkdownCatalog = function() {
+    if ($('.file-view.markdown').length && $('.file-view.markdown').length > 0) {     
+      const navList = document.querySelectorAll('.markdown_toc .catalog-li')
+      const toggleIcon = document.getElementsByClassName('toggle-container')
+      toggleIcon[0].removeEventListener('click', clickHandler)
+      toggleIcon[0].addEventListener('click', clickHandler)
+      navList.forEach((ele)=>{
+        ele.classList.remove('active')
       })
-    },0)
+      navList[0].classList.add('active')
+      $(window).off('scroll', scrollHandler)
+      $(window).on('scroll', scrollHandler)
+      // Set anchor.
+      $(".markdown").each(function () {
+        $(this).find("h1, h2, h3, h4, h5, h6").each(function () {
+          let node = $(this);
+          if (!node.closest('.anchor-wrap').length) {
+            node = node.wrap('<div class="anchor-wrap"></div>');
+            node.append(
+              `<a class="anchor" href="#${encodeURIComponent(
+                node.attr("id")
+              )}">${svg("octicon-link", 16)}</a>`
+            );
+          }
+        });
+      });
+    }
   }
-})
-function isInviewPort(element){
-	const viewWidth = window.innerWidth || document.documentElement.clientWidth || ''
-	const viewHeight = window.innerHeight || document.documentElement.clientHeight || ''
-	const {top,right,bottom,left} = element.getBoundingClientRect()
-	return (top>=0 && left>=0 && right<viewWidth && bottom<=viewHeight)
-}
+  $(document).ready(function() {
+    setTimeout(() => {
+      window.initMarkdownCatalog && window.initMarkdownCatalog();
+    });
+  });
+})();
 
 function initCommentPreviewTab($form) {
   const $tabMenu = $form.find(".tabular.menu");
@@ -2887,12 +2915,14 @@ $(document).ready(async () => {
       .find("h1, h2, h3, h4, h5, h6")
       .each(function () {
         let node = $(this);
-        node = node.wrap('<div class="anchor-wrap"></div>');
-        node.append(
-          `<a class="anchor" href="#${encodeURIComponent(
-            node.attr("id")
-          )}">${svg("octicon-link", 16)}</a>`
-        );
+        if (!node.closest('.anchor-wrap').length) {
+          node = node.wrap('<div class="anchor-wrap"></div>');
+          node.append(
+            `<a class="anchor" href="#${encodeURIComponent(
+              node.attr("id")
+            )}">${svg("octicon-link", 16)}</a>`
+          );
+        }
       });
   });
 

web_src/vuepages/pages/modelmanage/intro/index.vue

@@ -4,7 +4,8 @@
       <NotFound></NotFound>
     </div>
     <div v-else>
-      <ModelHeader :tab="'intro'" :repoOwnerName="repoOwnerName" :repoName="repoName" :modelName="modelName" :model="modelData">
+      <ModelHeader :tab="'intro'" :repoOwnerName="repoOwnerName" :repoName="repoName" :modelName="modelName"
+        :model="modelData">
       </ModelHeader>
       <div class="ui container content">
         <div class="content-l" v-loading="loading">
@@ -83,7 +84,7 @@
             <span class="label" v-for="(item, index) in labels" :key="index">{{ item }}</span>
             <span class="label add-btn" v-if="canEdit" @click="addLabel">{{ $t('modelManage.addLabels') }}</span>
           </div>
-          <div class="summary">           
+          <div class="summary">
             <div class="row">
               <div class="label">{{ $t('modelManage.modelEngine') }}：</div>
               <div class="value">{{ modelData.engineName }}</div>
@@ -204,9 +205,15 @@ export default {
             lockScroll: false,
           }).then(() => {
             this.editing = false;
+            this.$nextTick(() => {
+              window.initMarkdownCatalog && window.initMarkdownCatalog();
+            });
           }).catch(() => { });
         } else {
           this.editing = false;
+          this.$nextTick(() => {
+            window.initMarkdownCatalog && window.initMarkdownCatalog();
+          });
         }
       }
     },
@@ -248,6 +255,11 @@ export default {
             this.htmlContent = data.htmlcontent;
           }
           this.introFileName = data.fileName;
+          window.setTimeout(() => {
+            this.$nextTick(() => {
+              window.initMarkdownCatalog && window.initMarkdownCatalog();
+            });
+          }, 200);
         }
         this.loading = false;
       }).catch(err => {
@@ -280,7 +292,6 @@ export default {
           });
           this.submitLoading = false;
         }
-        console.log(data);
       }).catch(err => {
         console.log(err);
         this.$message({
@@ -353,6 +364,7 @@ export default {
 
   .content-l {
     flex: 11;
+    width: 0;
 
     .read-mode {
       .head {