add new

src/components/blogs/HomePage.vue

@@ -24,11 +24,11 @@
             <div class="leftBar">
                 <LeftSiteInfo />
                 <ComLink />
-                <CataloGue/>
+                <CataloGue />
             </div>
 
             <!-- main部分，导航路由跳转部分 -->
-            <RouterView/>
+            <RouterView />
 
             <!-- 右侧栏部分 -->
             <div class="rightBar">
@@ -47,7 +47,7 @@
     </Simplebar>
 </template>
 <script lang="ts" setup>
-import { reactive, ref, nextTick, toRefs,onMounted} from 'vue';
+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';
@@ -57,6 +57,7 @@ import LeftSiteInfo from "./leftsite/LeftSiteInfo.vue"
 import StatisticCount from "./rightsite/StatisticCount.vue"
 import NavigateMenu from './header/NavigateMenu.vue';
 import { homePageStore } from '@/stores';
+import { useContentStore } from '@/stores';
 import CarouselImg from './header/CarouselImg.vue';
 import HeatMap from './rightsite/HeatMap.vue';
 import RandomArticle from './rightsite/RandomArticle.vue';
@@ -91,6 +92,12 @@ const mainCss = reactive({
 })
 router.beforeEach((to, _, next) => {
     updateCarouselVisibility(to.name);
+    const store = useContentStore();
+    if (to.name === 'diarydetail' || to.name === 'blogdetail') {
+        store.showCatalogue=true;
+    } else {
+        store.showCatalogue=false;
+    }
     next();
 });
 

src/components/blogs/header/NavigateMenu.vue

@@ -14,16 +14,16 @@ import { useRoute } from 'vue-router';
 import { useContentStore } from '@/stores';
 import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined } from '@ant-design/icons-vue';
 import type { MenuProps } from 'ant-design-vue';
+import { get } from '@/tools/request';
 const props = defineProps(["items", "updateCarouselVisibility"])
-const { idShow } = homePageStore()
+const { idShow,fetchHomePageList } = homePageStore()
 const { show_menu } = toRefs(idShow)
 const store = useContentStore();
 const searchValue = ref("")
 const articleTitle = ref<string>('');
 const route = useRoute()
-const onSearch = (searchValue: string) => {
-    console.log('use value', searchValue);
-    console.log('or use this.value', articleTitle.value);
+const onSearch =async (searchValue: string) => {
+    await fetchHomePageList(searchValue);
 };
 const current = ref<string[]>(['home']);
 const items = ref<MenuProps['items']>([
@@ -111,6 +111,7 @@ watch(
     },
     { immediate: true }
 );
+
 </script>
 
 <style scoped>

src/components/blogs/leftsite/CataloGue.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card title="目录列表" hoverable :bordered="false">
+  <a-card title="目录列表" v-if="store.showCatalogue" 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">

src/stores/index.ts

@@ -1,6 +1,7 @@
 import { reactive, ref } from 'vue'
 import { defineStore } from 'pinia'
-
+import type { homePageInterface } from '@/api'
+import { get } from '@/tools/request'
 export const mainWrapperStore = defineStore("mainWrapper", () => {
 
 })
@@ -11,7 +12,12 @@ export const homePageStore = defineStore("homePage", () => {
     show_author: true,
     show_anchornDown: true
   })
-  return { idShow }
+  const homepagelist = ref<homePageInterface[]>([]);
+  const fetchHomePageList  = async (query: string="") => {
+    const response = await get(`/statistics/homepage?title=${query}`);
+    homepagelist.value = response.data.data;
+  };
+  return { idShow, homepagelist,fetchHomePageList }
 })
 
 export const blogStore = defineStore("blog", () => {
@@ -24,7 +30,8 @@ export const blogStore = defineStore("blog", () => {
 })
 export const useContentStore = defineStore('content', () => {
   const content = ref({ text: "" });
-  const getTitle=ref("")
+  const getTitle = ref("")
+  const showCatalogue = ref(false)
   const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
   function setContent(newContent: string) {
     content.value.text = newContent;
@@ -33,8 +40,8 @@ export const useContentStore = defineStore('content', () => {
   function setTitles(newTitles: { title: string; lineIndex: string; indent: number }[]) {
     titles.value = newTitles;
   }
- 
-  return { content,titles,setContent,setTitles,getTitle};
+
+  return { content, titles, setContent, setTitles, getTitle, showCatalogue };
 });
 
 export const diaryStore = defineStore("diary", () => {

src/views/blog/HomePageView.vue

@@ -103,11 +103,13 @@
 </template>
 
 <script setup lang='ts'>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref,watch } from 'vue';
 import type { homePageInterface } from '@/api';
 import iconComponents from "@/assets/index"
 import { get } from '@/tools/request';
 import router from '@/router';
+import { homePageStore } from '@/stores';
+const homepageStore = homePageStore();
 const randomColor = () => {
     const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"])
     return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
@@ -119,17 +121,17 @@ const readMoreBlog = (id: any) => {
 const readMoreDiary = (id: any) => {
     router.push(`/diary/${id}`)
 }
-const homepagelist = ref<homePageInterface[]>([])
+// const homepagelist = ref<homePageInterface[]>([])
 const displayedData = ref<any[]>([]); // 存储当前显示的部分数据
 const itemsPerPage = 10; // 每次加载的条目数
 let currentIndex = 0; // 当前显示数据的索引位置
 const showNextBatch = () => {
     const end = currentIndex + itemsPerPage;
-    displayedData.value = homepagelist.value.slice(0, end);
+    displayedData.value = homepageStore.homepagelist.slice(0, end);
     currentIndex = end;
 
     // 控制加载更多按钮的显示与隐藏
-    showLoadMoreButton.value = currentIndex < homepagelist.value.length;
+    showLoadMoreButton.value = currentIndex < homepageStore.homepagelist.length;
 };
 
 // 加载更多按钮的显示与隐藏
@@ -146,17 +148,23 @@ const loadMore = () => {
     
 };
 
-const homePageList = async () => {
-    await get(
-        "/statistics/homepage"
-    ).then(response => {
-        homepagelist.value = response.data.data
-        showNextBatch();
-    })
-}
+// const homePageList = async () => {
+//     await get(
+//         "/statistics/homepage"
+//     ).then(response => {
+//         homepagelist.value = response.data.data
+//         showNextBatch();
+//     })
+// }
 onMounted(() => {
-    homePageList()
+    // homePageList()
+    homepageStore.fetchHomePageList();
 })
+watch(() => homepageStore.homepagelist, () => {
+  // 当 homepagelist 更新时，重新显示第一页数据
+  currentIndex = 0;
+  showNextBatch();
+});
 </script>
 
 <style scoped>