feat:移植工程

src/layout/blog/components/Sidebar/BlogSummary.vue

@@ -0,0 +1,73 @@
+<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>