From 6c545aa6be03e8890e5cdbb79805a9b68b8c410f Mon Sep 17 00:00:00 2001
From: PeterAlbus <wuhongdb@163.com>
Date: Sat, 18 Nov 2023 16:48:33 +0800
Subject: [PATCH] Fix bug in About.vue

---
 src/views/blog/About.vue | 37 ++++++++++++++++++++-----------------
 src/views/blog/Blog.vue  |  5 ++---
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/views/blog/About.vue b/src/views/blog/About.vue
index 985e78f..9735dd4 100644
--- a/src/views/blog/About.vue
+++ b/src/views/blog/About.vue
@@ -8,7 +8,11 @@
           <p style="padding: 0 5px 5px 5px"><i class="fa fa-user"></i> {{blog.blogAuthor}}&emsp;<i class="fa fa-calendar"></i> 发布于{{blog.blogTime}} <i class="fa fa-eye"></i> {{blog.blogViews}}次访问</p>
         </div>
         <div class="blog-content">
-          <v-md-preview :text="blog.blogContent" ref="mdRef"></v-md-preview>
+          <mavon-editor v-model="blog.blogContent" ref="mdRef"
+                        :boxShadow="false" :subfield="false"
+                        defaultOpen="preview" :editable="false"
+                        codeStyle="xcode" :toolbarsFlag="false"
+          />
         </div>
       </el-col>
       <el-col :lg="{span:6}" :sm="9">
@@ -19,7 +23,7 @@
             <div class="content" style="padding: 10px">
               <el-scrollbar max-height="30vh">
                 <div
-                    v-for="anchor in titleList" :key="anchor.lineIndex"
+                    v-for="anchor in titleList" :key="anchor.id"
                     :style="{ padding: `2px 20px 2px ${anchor.indent * 20 + 20}px` }"
                     class="anchor"
                     @click="handleAnchorClick(anchor)"
@@ -58,11 +62,10 @@ import {onMounted, ref ,nextTick} from "vue";
 import {ArrowRight,Notebook,Share as shareIcon} from "@element-plus/icons-vue";
 import PersonalInfo from '@/components/PersonalInfo.vue'
 import Comment from '@/components/Comment.vue'
-import type {vMdEditor} from "@kangc/v-md-editor"
 import Banner from "@/components/Banner.vue";
 import { fetchBlogById, getIpAddress, visitBlog } from "@/services/blogApi";
 
-const mdRef=ref<InstanceType<typeof vMdEditor>>()
+const mdRef=ref<any>()
 const titleList:any=ref([])
 
 const hideCatalogue=ref(true)
@@ -110,28 +113,28 @@ const getTitles=()=>{
     titleList.value = [];
     return;
   }
-
   const hTags = Array.from(new Set(titles.map((title:any) => title.tagName))).sort();
-
   titleList.value = titles.map((el:any) => ({
     title: el.innerText,
-    lineIndex: el.getAttribute('data-v-md-line'),
+    id: el.querySelectorAll('a')[0].id,
     indent: hTags.indexOf(el.tagName),
   }));
+  titleList.value = titleList.value.slice(titleList.value.length / 2)
 }
 
 const handleAnchorClick=(anchor:any)=>{
-  const { lineIndex } = anchor;
-
-  const heading = mdRef.value?.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);
-
-  if (heading) {
-    mdRef.value?.scrollToTarget({
-      target: heading,
-      scrollContainer: window,
-      top: 60,
-    });
+  const target:HTMLElement|null = document.getElementById(anchor.id)
+  if(!target) return
+  let offsetTop:number = target.offsetTop || 0;
+  let parentElement:HTMLElement|null = target.offsetParent as HTMLElement;
+  while (parentElement) {
+    offsetTop += parentElement.offsetTop;
+    parentElement = parentElement.offsetParent as HTMLElement;
   }
+  window.scrollTo({
+    top: offsetTop - 60,
+    behavior: 'smooth'
+  })
 }
 
 onMounted(()=>{
diff --git a/src/views/blog/Blog.vue b/src/views/blog/Blog.vue
index 8623fb9..887534b 100644
--- a/src/views/blog/Blog.vue
+++ b/src/views/blog/Blog.vue
@@ -23,7 +23,7 @@
             <div class="content" style="padding: 10px">
               <el-scrollbar max-height="30vh">
                 <div
-                    v-for="anchor in titleList" :key="anchor.lineIndex"
+                    v-for="anchor in titleList" :key="anchor.id"
                     :style="{ padding: `2px 20px 2px ${anchor.indent * 20 + 20}px` }"
                     class="anchor"
                     @click="handleAnchorClick(anchor)"
@@ -58,14 +58,13 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref ,nextTick} from "vue";
+import { onMounted, ref ,nextTick } from "vue";
 import {useRoute} from "vue-router";
 import {ArrowRight,Notebook,Share as shareIcon} from "@element-plus/icons-vue";
 import PersonalInfo from '@/components/PersonalInfo.vue'
 import Comment from '@/components/Comment.vue'
 import Banner from "@/components/Banner.vue";
 import { fetchBlogById, getIpAddress, visitBlog } from "@/services/blogApi";
-import { ElMessage } from "element-plus";
 
 
 const route=useRoute()