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,18 +1,18 @@
 <template>
-    <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)" :key="anchor.lineIndex">
-        <a style="cursor: pointer">{{ anchor.title }}</a>
-      </div>
+      @click="handleAnchorClick(anchor)" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave"
+      :key="anchor.lineIndex">
+      <a class="link">{{ anchor.title }}</a>
     </div>
+  </a-card>
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+import { computed,ref } from 'vue';
 import { useContentStore } from '@/stores/index';
 
 const store = useContentStore();
-  
 const titles = computed(() => store.titles);
 
 const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => {
@@ -32,11 +32,23 @@
     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';
+}
+
+const handleMouseLeave = (event: any) => {
+  const target = event.currentTarget as HTMLElement;
+  target.style.backgroundColor = ''
+}
 </script>
 
 <style scoped>
-  .catalogue {
+
+.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']);