From 1de8d4b460941f5b25b2af681c1e92dc694aa1e4 Mon Sep 17 00:00:00 2001 From: panda <7934952@qq.com> Date: Thu, 25 Jul 2024 17:03:45 +0800 Subject: [PATCH] add new --- src/components/blogs/header/NavigateMenu.vue | 3 + src/components/blogs/leftsite/CataloGue.vue | 51 ++++-- src/stores/index.ts | 18 +-- src/views/blog/ContentDetail.vue | 160 ++++++++----------- 4 files changed, 120 insertions(+), 112 deletions(-) diff --git a/src/components/blogs/header/NavigateMenu.vue b/src/components/blogs/header/NavigateMenu.vue index 3ddf1b4..30ee10c 100644 --- a/src/components/blogs/header/NavigateMenu.vue +++ b/src/components/blogs/header/NavigateMenu.vue @@ -11,11 +11,13 @@ import { ref, toRefs, watch, h } from 'vue'; import router from '@/router'; import { homePageStore } from '@/stores/index'; 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'; const props = defineProps(["items", "updateCarouselVisibility"]) const { idShow } = homePageStore() const { show_menu } = toRefs(idShow) +const store = useContentStore(); const searchValue = ref("") const articleTitle = ref(''); const route = useRoute() @@ -75,6 +77,7 @@ const items = ref([ ]); const jumpMenu = ({ key }: { key: string }) => { router.push(`/${key}`) + store.setTitles([]); }; watch( () => route.name, diff --git a/src/components/blogs/leftsite/CataloGue.vue b/src/components/blogs/leftsite/CataloGue.vue index 8c7c3ac..46e92ca 100644 --- a/src/components/blogs/leftsite/CataloGue.vue +++ b/src/components/blogs/leftsite/CataloGue.vue @@ -1,11 +1,42 @@ - - - - \ No newline at end of file +
+ +
+ + + + + + \ No newline at end of file diff --git a/src/stores/index.ts b/src/stores/index.ts index ecff47d..cfdbf46 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -11,7 +11,7 @@ export const homePageStore = defineStore("homePage", () => { show_author: true, show_anchornDown: true }) - return {idShow} + return { idShow } }) export const blogStore = defineStore("blog", () => { @@ -22,19 +22,19 @@ export const blogStore = defineStore("blog", () => { return { delControl } }) -export const useBlogStore = defineStore('catalogue', () => { - const blogContent = ref(''); +export const useContentStore = defineStore('content', () => { + const content = ref({ text: "" }); const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]); - const setBlogContent = (content: string) => { - blogContent.value = content; - }; + function setContent(newContent: string) { + content.value.text = newContent; + } - const setTitles = (newTitles: { title: string; lineIndex: string; indent: number }[]) => { + function setTitles(newTitles: { title: string; lineIndex: string; indent: number }[]) { titles.value = newTitles; - }; + } - return { blogContent, titles, setBlogContent, setTitles }; + return { content,titles,setContent,setTitles }; }); export const diaryStore = defineStore("diary", () => { diff --git a/src/views/blog/ContentDetail.vue b/src/views/blog/ContentDetail.vue index 34d0955..fdaa1d1 100644 --- a/src/views/blog/ContentDetail.vue +++ b/src/views/blog/ContentDetail.vue @@ -1,100 +1,74 @@ - - - - - \ No newline at end of file + + const hTags = Array.from(new Set(titlesArray.map((title: any) => title.tagName))).sort(); + + store.setTitles(titlesArray.map((el: any) => ({ + title: el.innerText, + lineIndex: el.getAttribute('data-v-md-line') || '', + indent: hTags.indexOf(el.tagName), + }))); +}; + +// Lifecycle hook to fetch content and process headings +onMounted(async () => { + await fetchContent(); + await processHeadings(); +}); + + +