fix: 目录滚动优化

frontend/components/ArticlesContent/End/TagList.vue

@@ -12,17 +12,18 @@ defineProps({
 <template>
   <div class="tag-list-box">
     <div v-if="type" class="tag-list">
-      <div class="tag-list-title">
-        分类：
-      </div>
-      <a href="/frontend" target="_blank" rel="" class="item category-item"><span class="tag-title">{{ type.alias }}</span></a>
+      <div class="tag-list-title">分类：</div>
+      <NuxtLink :href="`/${type.type}`" target="_blank" rel="" class="item category-item"
+        ><span class="tag-title">{{ type.alias }}</span></NuxtLink
+      >
     </div>
     <div v-if="tag.length !== 0" class="tag-list">
-      <div class="tag-list-title">
-        标签：
-      </div>
+      <div class="tag-list-title">标签：</div>
       <div class="tag-list-container">
-        <a v-for="(item, index) in tag" :key="index" href="#" target="_blank" rel="" class="item tag-item"><span class="tag-title">{{ item.alias }}</span></a>
+        <!-- :href="`/tag/${item.alias}`" -->
+        <NuxtLink v-for="(item, index) in tag" :key="index" href="" rel="" class="item tag-item"
+          ><span class="tag-title">{{ item.alias }}</span></NuxtLink
+        >
       </div>
     </div>
   </div>

frontend/components/ArticlesContent/SideBar/Left/index.vue

@@ -44,7 +44,7 @@ const { immerseState, immerseToggle } = useImmerse()
       <svg class="sprite-icon icon-report"><use xlink:href="#icon-report" /></svg>
     </div>
     <span class="tooltip">
-      <span class="tooltiptext">沉浸阅读</span>
+      <span class="tooltiptext">{{ !immerseState ? '沉浸阅读' : '退出阅读' }}</span>
       <span class="byte-tooltip__wrapper"><div class="panel-btn block" :class="immerseState ? 'active ' : ''" @click="immerseToggle">
         <svg class="sprite-icon icon-immerse"><use xlink:href="#icon-immerse" /></svg></div></span>
     </span>

frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Ref } from 'vue'
 import type { ICatalogue } from '@/types/IArticleItem'
 const props = defineProps<{
   catalogueList: ICatalogue[]
@@ -34,15 +35,13 @@ const navRef = ref()
 const liRef = ref<HTMLElement[]>([])
 const navMid = ref(0)
 const headerHeight = ref(0)
-const originTop = ref(0)
-const firtstCatalogueTop = ref(0)
+const catalogueEleTop = ref(0)
 const currentScrollTop = ref(0)
 
 const getInitByScroll = () => {
   navMid.value = navRef.value.clientHeight / 2
   headerHeight.value = document.querySelector('.main-header')!.clientHeight
-  originTop.value = (document.querySelector('.sticky-block-box') as HTMLElement).offsetTop
-  firtstCatalogueTop.value = originTop.value
+  catalogueEleTop.value = (document.querySelector('.sticky-block-box') as HTMLElement).offsetTop
   itemOffsetTop.value = []
   props.catalogueList.forEach((val, i) => {
     const firstHead = document.querySelector(`#heading-${i}`) as HTMLElement
@@ -79,37 +78,38 @@ const onScroll = () => {
 /**
  * @description: 目录固定
  */
-const isNavShown = inject('isNavShown') as Boolean
-const { immerseState, immerseToggle } = useImmerse()
+const isNavShown = inject('isNavShown') as Ref<Boolean>
+const { immerseState } = useImmerse()
 
-const catalogueEle = ref<HTMLElement | null>(null)
 let sideBar: HTMLElement | null = null
 const getInitByScrollFixedCatalogue = () => {
   const sideBarEle = document.querySelector('.sidebar')
   sideBar = sideBarEle as HTMLElement
-  catalogueEle.value = document.querySelector('.sticky-block-box')
 }
 
 const scrollFixedCatalogue = () => {
-  if (currentScrollTop.value - headerHeight.value > catalogueEle.value!.offsetTop)
+  if (currentScrollTop.value - headerHeight.value > catalogueEleTop.value)
     sideBar!.classList.add('sticky')
 
-  if (currentScrollTop.value <= firtstCatalogueTop.value && !immerseState.value)
+  if (currentScrollTop.value - 20 <= catalogueEleTop.value && !immerseState.value && isNavShown.value)
+    sideBar!.classList.remove('sticky')
+
+  if (currentScrollTop.value - headerHeight.value <= catalogueEleTop.value && !immerseState.value && !isNavShown.value)
     sideBar!.classList.remove('sticky')
 }
 
 watch(isNavShown, (val) => {
-  val ? (catalogueEle.value!.style.top = `${catalogueEle.value!.offsetTop + headerHeight!.value}px`) : (catalogueEle.value!.style.top = '1.767rem')
+  if (val)
+    sideBar?.classList.remove('top')
+  else
+    sideBar?.classList.add('top')
 })
+
 watch(immerseState, (val) => {
-  if (val) {
+  if (val)
     sideBar!.classList.add('sticky')
-    onScroll()
-  }
-  else {
-    firtstCatalogueTop.value = originTop.value
+  else
     scrollFixedCatalogue()
-  }
 })
 
 onMounted(() => {
@@ -148,7 +148,9 @@ onUnmounted(() => {
         <ul class="catalog-list" style="margin-top: 0px">
           <li v-for="(item, index) in catalogueList" ref="liRef" :key="index" :class="[{ active: index === isActive }, catalogueClass(item.level)]" @click="activeSelect(index)">
             <div class="a-container">
-              <a :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-jj-container-hover-normal"> {{ item.text }} </a>
+              <NuxtLink :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-jj-container-hover-normal">
+                {{ item.text }}
+              </NuxtLink>
             </div>
           </li>
         </ul>

frontend/components/ArticlesContent/SideBar/Right/Column.vue

@@ -1,30 +1,29 @@
-<script setup>
-const props = defineProps({
-  column: Object,
-})
-
+<script setup lang="ts">
+import type { IColumn, IColumnArticleItem } from '@/types/IArticle'
+const props = defineProps<{ column?: IColumn }>()
 const route = useRoute()
 const currentId = ref(route.params.id)
-const nextArticle = ref({})
+const nextArticle = ref<IColumnArticleItem>()
 
-let allColumnList
+let allColumnList: IColumnArticleItem[] = []
 const getNextArticle = () => {
   const currentIndex = allColumnList.findIndex(item => item.id === currentId.value)
-  const allColumnListlength = allColumnList.length
+  const allColumnListlength: number = allColumnList.length
   nextArticle.value = allColumnList[(currentIndex + 1) % allColumnListlength]
 }
-allColumnList = props.column.articles.data
-getNextArticle()
+if (props?.column) {
+  allColumnList = props.column?.articles.data
+  getNextArticle()
+}
 
 const isActive = ref(false)
 const handleClick = () => {
   isActive.value = !isActive.value
 }
-const { immerseState, immerseToggle } = useImmerse()
 </script>
 
 <template>
-  <nav v-show="!immerseState" class="next-article">
+  <nav class="next-article">
     <div class="next-article-header">
       <div class="next-article-title">
         下一篇
@@ -39,11 +38,11 @@ const { immerseState, immerseToggle } = useImmerse()
     </div>
     <hr class="next-article-hr">
     <div class="article-content">
-      <a :href="`/article/${nextArticle.id}`" target="_blank" :title="nextArticle.title" class="article"> {{ nextArticle.title }} </a>
+      <a :href="`/article/${nextArticle?.id}`" target="_blank" :title="nextArticle?.title" class="article"> {{ nextArticle?.title }} </a>
     </div>
     <nav v-if="isActive" class="article-list next-article-list">
       <div class="list-title">
-        {{ props.column.column }}
+        {{ props.column?.column }}
       </div>
       <div class="list-body">
         <ul class="list-ul">
@@ -120,6 +119,6 @@ const { immerseState, immerseToggle } = useImmerse()
 }
 .active {
   /* color: rgb(0, 127, 255); */
-  @apply text-jj-link-normal
+  @apply text-jj-link-normal;
 }
 </style>

frontend/components/ArticlesContent/SideBar/Right/index.vue

@@ -2,13 +2,11 @@
 import { getProcessor } from 'bytemd'
 import { visit } from 'unist-util-visit'
 import type { ICatalogue } from '@/types/IArticleItem'
-const props = defineProps({
-  article: {
-    type: Object,
-    required: true,
-  },
-})
-const catalogueList = ref<ICatalogue []>([]) // 目录
+import type { IArticle } from '@/types/IArticle'
+const props = defineProps<{
+  article: IArticle
+}>()
+const catalogueList = ref<ICatalogue[]>([]) // 目录
 const stringifyHeading = (e: any) => {
   let result = ''
   visit(e, (node) => {
@@ -23,7 +21,7 @@ getProcessor({
       rehype: p =>
         p.use(() => (tree: any) => {
           if (tree && tree.children.length) {
-            const items: { level: number;text: string } [] = []
+            const items: { level: number; text: string }[] = []
             tree.children
               .filter((v: any) => v.type === 'element')
               .forEach((node: any) => {
@@ -45,6 +43,7 @@ getProcessor({
     },
   ],
 }).processSync(props.article.content)
+
 const { immerseState } = useImmerse()
 </script>
 
@@ -54,7 +53,7 @@ const { immerseState } = useImmerse()
     <ArticlesContentSideBarRightRelatedArticles v-if="!immerseState" class="sidebar-block" :author="article!.authorId" :tags="article!.tagIds" />
     <div class="sticky-block-box">
       <ArticlesContentSideBarRightCatalogue v-if="catalogueList.length !== 0" class="sidebar-block" :catalogue-list="catalogueList" />
-      <ArticlesContentSideBarRightColumn v-if="article!.columId.data[0]" :key="article!.columId.data[0].column" :column="article!.columId.data[0]" />
+      <ArticlesContentSideBarRightColumn v-show="!immerseState" v-if="article?.columId.data[0]" :column="article?.columId.data[0]" />
     </div>
   </div>
 </template>
@@ -79,4 +78,7 @@ const { immerseState } = useImmerse()
   width: inherit;
   transition: top 0.2s;
 }
+.sidebar.sticky.top .sticky-block-box {
+    top: 1.767rem;
+}
 </style>

frontend/pages/article/[id].vue

@@ -36,7 +36,7 @@ onMounted(() => {
           <ArticlesContent :article="articleDataList" />
           <div class="article-end">
             <ArticlesContentEndTagList :type="articleDataList?.typeId" :tag="articleDataList?.tagIds.data" />
-            <ArticlesContentEndColumnContainer v-if="Object.keys(articleDataList!.columId).length !== 0" :column="articleDataList?.columId.data" />
+            <ArticlesContentEndColumnContainer v-if="articleDataList?.columId.data.length !== 0" :column="articleDataList?.columId.data" />
           </div>
         </div>
         <ArticlesContentSideBarRight :article="articleDataList" />

frontend/types/IArticle.ts

@@ -48,4 +48,5 @@ interface IArticle {
 export {
   IArticle,
   IColumn,
+  IColumnArticleItem,
 }