74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<div class="blog-summary">
|
|
<div v-if="blogSummaryInfo.isBlogDetail" class="blog-summary-tab">
|
|
<span @click="changeTabClick('Catalog', $event)" class="tab-active">
|
|
文章目录
|
|
</span>
|
|
|
|
<span @click="changeTabClick('Summary', $event)">
|
|
站点概览
|
|
</span>
|
|
</div>
|
|
|
|
<blog-site-brief v-if="blogSummaryInfo.activePanelName === 'Summary'
|
|
|| !blogSummaryInfo.isBlogDetail"/>
|
|
<MdCatalog v-if="blogSummaryInfo.activePanelName === 'Catalog'
|
|
&& blogSummaryInfo.isBlogDetail"
|
|
editorId="blog-id" :scrollElement="scrollElement"/>
|
|
|
|
<div class="scroll-container" @click="back2topClick()">
|
|
<i class="fa fa-arrow-up"></i>
|
|
<span>{{ blogStore.progressValue }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import BlogSiteBrief from '@/layout/blog/components/Sidebar/BlogSiteBrief.vue'
|
|
import { MdCatalog } from 'md-editor-v3'
|
|
import { setActiveClass } from '@/utils'
|
|
import { useBlogStore } from '@/store/blog.ts'
|
|
import { reactive, watch } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const blogStore = useBlogStore()
|
|
const router = useRouter()
|
|
|
|
const scrollElement = document.documentElement
|
|
|
|
const blogSummaryInfo = reactive({
|
|
activePanelName: 'Catalog',
|
|
isBlogDetail: false
|
|
})
|
|
|
|
/**
|
|
* 监听路由变化 如果当前是查看博客 则需要显示博客目录
|
|
*/
|
|
watch(() => router.currentRoute.value.path, (path) => {
|
|
blogSummaryInfo.isBlogDetail = path.includes('/blog/detail')
|
|
if (blogSummaryInfo.isBlogDetail) {
|
|
blogSummaryInfo.activePanelName = 'Catalog'
|
|
}
|
|
}, {
|
|
immediate: true
|
|
})
|
|
|
|
/**
|
|
* 切换tab标签
|
|
* @param panelName panel名称
|
|
* @param e 点击事件
|
|
*/
|
|
const changeTabClick = (panelName: string, e: Event) => {
|
|
blogSummaryInfo.activePanelName = panelName
|
|
const element = e.target as Element
|
|
setActiveClass('blog-summary-tab', 'span', element, 'tab-active')
|
|
}
|
|
|
|
/**
|
|
* 点击返回顶部按钮
|
|
*/
|
|
const back2topClick = () => {
|
|
document.body.scrollTop = document.documentElement.scrollTop = 0
|
|
}
|
|
</script>
|