fix: 切换文章后将滚动条置顶(#67)

blossom-editor/src/renderer/src/views/article/ArticleIndex.vue

@@ -148,7 +148,7 @@
 
 <script setup lang="ts">
 // vue
-import { ref, computed, provide, onMounted, onBeforeUnmount, onActivated, onDeactivated, defineAsyncComponent, watch } from 'vue'
+import { ref, computed, provide, onMounted, onBeforeUnmount, onActivated, onDeactivated, defineAsyncComponent, watch, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { UploadProps, UploadRawFile } from 'element-plus'
 import { useUserStore } from '@renderer/stores/user'
@@ -430,6 +430,9 @@ const clickCurDoc = async (tree: DocTree) => {
         editorLoading.value = false
         articleChanged = false
       })
+    nextTick(() => {
+      scrollTopReset()
+    })
   }
 }
 /**
@@ -603,7 +606,6 @@ const setNewState = (md: string): void => {
     )
   )
   parse()
-  // scrollTopReset()
 }
 
 //#endregion
@@ -725,6 +727,12 @@ const scroll = (event: Event | string, source?: string, lineno?: number, colno?:
   scrollWrapper.sycnScroll(event, source, lineno, colno, error)
 }
 
+const scrollTopReset = () => {
+  if (scrollWrapper) {
+    scrollWrapper.scrollTopReset()
+  }
+}
+
 const scrollTopLast = () => {
   if (scrollWrapper) {
     scrollWrapper.scrollTopLast()

blossom-web/src/views/article/Articles.vue

@@ -90,7 +90,7 @@
         </el-menu>
       </div>
 
-      <div class="article">
+      <div class="article" ref="PreviewRef">
         <div class="bl-preview" v-html="article.html"></div>
       </div>
 
@@ -125,7 +125,7 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
-import { ref, onUnmounted } from 'vue'
+import { ref, onUnmounted, nextTick } from 'vue'
 import { ArrowDownBold, ArrowRightBold } from '@element-plus/icons-vue'
 import { articleInfoOpenApi, articleInfoApi, docTreeOpenApi, docTreeApi } from '@/api/blossom'
 import { useUserStore } from '@/stores/user'
@@ -149,10 +149,6 @@ useLifecycle(
   }
 )
 
-// onMounted(() => {})
-
-// onActivated(() => {})
-
 onUnmounted(() => {
   window.removeEventListener('resize', onresize)
 })
@@ -191,6 +187,7 @@ const article = ref<DocInfo>({
 })
 const tocList = ref<any>([])
 const defaultOpeneds = ref<string[]>([])
+const PreviewRef = ref()
 
 /**
  * 获取文档树状列表
@@ -225,6 +222,9 @@ const clickCurDoc = async (tree: DocTree) => {
   if (tree.ty == 3) {
     await getCurEditArticle(tree.i)
     window.history.replaceState('', '', '#/articles?articleId=' + tree.i)
+    nextTick(() => {
+      PreviewRef.value.scrollTo({ top: 0 })
+    })
   }
 }
 
@@ -679,37 +679,6 @@ const onresize = () => {
           color: #989898;
         }
 
-        // 有序列表
-        // :deep(ol) {
-        //   padding-left: 20px;
-        // }
-
-        // 无序列表
-        // :deep(ul) {
-        //   padding-left: 15px;
-
-        //   ul {
-        //     padding-left: 15px;
-        //   }
-        // }
-
-        // checkbox
-        // :deep(ul:has(input)) {
-        //   padding-left: 0px;
-
-        //   input {
-        //     margin: 0;
-        //   }
-
-        //   ul {
-        //     padding-left: 15px;
-        //   }
-
-        //   li::marker {
-        //     content: none;
-        //   }
-        // }
-
         /* 有序列表 */
         :deep(ol) {
           padding-left: 2em;