add new

src/components/blogs/HomePage.vue

@@ -51,7 +51,7 @@ import { reactive, ref, nextTick, toRefs, onMounted } from 'vue';
 import { DownCircleOutlined } from '@ant-design/icons-vue';
 import Typed from 'typed.js';
 import 'APlayer/dist/APlayer.min.css';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import ComLink from './leftsite/ComLink.vue';
 import LeftSiteInfo from "./leftsite/LeftSiteInfo.vue"
 import StatisticCount from "./rightsite/StatisticCount.vue"
@@ -67,6 +67,13 @@ import FooterContent from './footer/FooterContent.vue';
 import CataloGue from './leftsite/CataloGue.vue';
 const router = useRouter()
 
+// onMounted(() => {
+//   // 页面加载时绑定事件
+// //   window.addEventListener('beforeunload', handleRefresh);
+// handleRefresh()
+// });
+ 
+
 const author = ref("SunFree.")
 const { idShow } = homePageStore()
 const { show_menu, show_carousel, show_author, show_anchornDown } = toRefs(idShow)
@@ -90,9 +97,9 @@ const updateCarouselVisibility = (routeName: any) => {
 const mainCss = reactive({
     marginTop: "0px"
 })
+const store = useContentStore();
 router.beforeEach((to, _, next) => {
     updateCarouselVisibility(to.name);
-    const store = useContentStore();
     if (to.name === 'diarydetail' || to.name === 'blogdetail') {
         store.showCatalogue=true;
     } else {
@@ -101,6 +108,16 @@ router.beforeEach((to, _, next) => {
     next();
 });
 
+const handleRefresh = () => {
+    const route=useRoute()
+    if (route.name === 'diarydetail' || route.name === 'blogdetail') {
+        store.showCatalogue=true;
+    } else {
+        store.showCatalogue=false;
+    }
+}
+
+
 /**
  * 滚动条操作
  */
@@ -157,6 +174,7 @@ onMounted(() => {
         };
     });
     scrollbar.value = document.querySelector('.simplebar-content-wrapper');
+    handleRefresh()
 })
 
 </script>

src/components/blogs/leftsite/CataloGue.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card title="目录列表" v-if="store.showCatalogue" hoverable :bordered="false">
+  <a-card title="目录列表" v-if="isShowCata" hoverable :bordered="false">
     <div class="catalogue" v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }"
       @click="handleAnchorClick(anchor)" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave"
       :key="anchor.lineIndex">
@@ -9,12 +9,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed,ref } from 'vue';
+import { computed } from 'vue';
 import { useContentStore } from '@/stores/index';
 
 const store = useContentStore();
 const titles = computed(() => store.titles);
-
 const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => {
   const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
 
@@ -42,6 +41,9 @@ const handleMouseLeave = (event: any) => {
   const target = event.currentTarget as HTMLElement;
   target.style.backgroundColor = ''
 }
+
+const isShowCata = computed(() => store.showCatalogue);
+
 </script>
 
 <style scoped>

src/main.ts

@@ -17,6 +17,7 @@ import '@kangc/v-md-editor/lib/style/preview.css';
 // 表情插件
 import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
 import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
+
 // highlightjs
 import hljs from 'highlight.js';
 

src/stores/index.ts

@@ -78,7 +78,7 @@ export const blogStore = defineStore("blog", () => {
 export const useContentStore = defineStore('content', () => {
   const content = ref({ text: "" });
   const getTitle = ref("")
-  const showCatalogue = ref(false)
+  const showCatalogue = ref()
   const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
   function setContent(newContent: string) {
     content.value.text = newContent;

src/views/blog/HomePageView.vue

@@ -161,20 +161,10 @@ const loadMore = () => {
 
 };
 
-// const homePageList = async () => {
-//     await get(
-//         "/statistics/homepage"
-//     ).then(response => {
-//         homepagelist.value = response.data.data
-//         showNextBatch();
-//     })
-// }
 onMounted(() => {
-    // homePageList()
     homepageStore.fetchHomePageList();
 })
 watch(() => homepageStore.homepagelist, () => {
-    // 当 homepagelist 更新时，重新显示第一页数据
     currentIndex = 0;
     showNextBatch();
 },);