add new

src/components/blogs/header/NavigateMenu.vue

@@ -77,6 +77,7 @@ const items = ref<MenuProps['items']>([
 ]);
 const jumpMenu = ({ key }: { key: string }) => {
     router.push(`/${key}`)
+    store.getTitle=""
     store.setTitles([]);
 };
 watch(

src/components/blogs/leftsite/CataloGue.vue

@@ -1,42 +1,54 @@
 <template>
-    <div>
-      <div class="catalogue" v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }"
-        @click="handleAnchorClick(anchor)" :key="anchor.lineIndex">
-        <a style="cursor: pointer">{{ anchor.title }}</a>
-      </div>
+  <a-card title="目录列表" 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">
+      <a class="link">{{ anchor.title }}</a>
     </div>
-  </template>
+  </a-card>
+</template>
 
-  <script setup lang="ts">
-  import { computed } from 'vue';
-  import { useContentStore } from '@/stores/index';
+<script setup lang="ts">
+import { computed,ref } from 'vue';
+import { useContentStore } from '@/stores/index';
 
-  const store = useContentStore();
+const store = useContentStore();
+const titles = computed(() => store.titles);
 
-  const titles = computed(() => store.titles);
+const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => {
+  const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
 
-  const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => {
-    const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
+  if (heading) {
+    heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  } else {
+    const observer = new MutationObserver((mutations, obs) => {
+      const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
+      if (heading) {
+        heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        obs.disconnect();
+      }
+    });
+    const container = document.querySelector('#content-container') as HTMLElement;
+    observer.observe(container, { childList: true, subtree: true });
+  }
+};
+const handleMouseOver = (event: any) => {
+  const target = event.currentTarget as HTMLElement;
+  target.style.backgroundColor = '#f0f0f0';
+  target.style.color = '#bd5b5b';
+}
 
-    if (heading) {
-      heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    } else {
-      const observer = new MutationObserver((mutations, obs) => {
-        const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
-        if (heading) {
-          heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
-          obs.disconnect();
-        }
-      });
-      const container = document.querySelector('#content-container') as HTMLElement;
-      observer.observe(container, { childList: true, subtree: true });
-    }
-  };
-  </script>
+const handleMouseLeave = (event: any) => {
+  const target = event.currentTarget as HTMLElement;
+  target.style.backgroundColor = ''
+}
+</script>
 
-  <style scoped>
-  .catalogue {
-    cursor: pointer;
-  }
-  </style>
+<style scoped>
 
+.link{
+  cursor: pointer;
+  color: rgb(115, 78, 34);
+  /* background-color: #bd5b5b; */
+}
+</style>

src/stores/index.ts

@@ -24,8 +24,8 @@ export const blogStore = defineStore("blog", () => {
 })
 export const useContentStore = defineStore('content', () => {
   const content = ref({ text: "" });
+  const getTitle=ref("")
   const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
-
   function setContent(newContent: string) {
     content.value.text = newContent;
   }
@@ -34,7 +34,7 @@ export const useContentStore = defineStore('content', () => {
     titles.value = newTitles;
   }
  
-  return { content,titles,setContent,setTitles };
+  return { content,titles,setContent,setTitles,getTitle};
 });
 
 export const diaryStore = defineStore("diary", () => {

src/views/blog/ContentDetail.vue

@@ -16,7 +16,6 @@ import { useContentStore } from '@/stores';
 
 const route = useRoute();
 const store = useContentStore();
-
 const props = defineProps<{
   apiUrl: string;
   contentField: string;

src/views/blog/blogcontent/BlogListView.vue

@@ -64,10 +64,12 @@
 <script setup lang='ts'>
 import { onMounted, ref } from 'vue';
 import iconComponents from '@/assets';
+import {useContentStore} from "@/stores"
 import dayjs from 'dayjs';
 import type { blogInterface } from '@/api/admin';
 import { get } from "@/tools/request"
 import router from '@/router';
+const store=useContentStore()
 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)];

src/views/blog/diarycontent/DiaryListView.vue

@@ -62,8 +62,9 @@ import iconComponents from '@/assets';
 import dayjs from 'dayjs';
 import type { diaryInterface } from '@/api/admin';
 import { get } from "@/tools/request"
+import {useContentStore} from "@/stores"
 import router from '@/router';
-
+const store =useContentStore()
 const dataLoaded = ref(false);
 // 分页
 const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);