diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index f8e41be..6213ce0 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -2,7 +2,7 @@
     <Simplebar @scroll="handleScroll">
         <div class="header">
             <!-- 头部导航菜单 -->
-            <NavigateMenu :updateCarouselVisibility="updateCarouselVisibility"/>
+            <NavigateMenu :updateCarouselVisibility="updateCarouselVisibility" />
             <!-- 作者名字 -->
             <div class="author" v-if="show_author">{{ author }}</div>
             <!-- 轮播 -->
@@ -17,190 +17,58 @@
             </div>
         </div>
 
-        <!-- 主要内容区域 -->
+        <!-- 主要内容区域（包括左侧栏、main部分、右侧栏） -->
         <div class="mainContainer" :style="mainCss">
+
+            <!-- 左侧栏部分 -->
             <div class="leftBar">
                 <LeftSiteInfo />
                 <ComLink />
+                <CataloGue/>
             </div>
-            <RouterView />
-            <div class="rightBar">
-                <StatisticCount />
-                <a-card hoverable>
-                    <template #cover>
-                        <div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);">
-                            <div ref="heat" style="height: 100%;"></div>
-                        </div>
-                    </template>
-                </a-card>
-
-                <a-card hoverable>
-                    <template #cover>
-                        <div id="aplayer"></div>
-                    </template>
-                </a-card>
-                <a-card title="随机文章" :bordered="false" hoverable>
-                    <div v-for="article in homepagelist">
-                        <div v-if="article.blogtitle">
-                            <div class="article-text">
-                                <span>{{ article.blogtitle }}</span>
-                                <span>{{ article.create_at }}</span>
-                            </div>
-                            <a-image :preview="false" :width="300" :src="article.imglink" />
-                        </div>
-                        <div v-if="article.diarytitle">
-                            <div class="article-text">
-                                <span>{{ article.diarytitle }}</span>
-                                <span>{{ article.create_at }}</span>
-                            </div>
-                            <a-image :preview="false" :width="300" :src="article.imglink" />
-                        </div>
-                    </div>
 
+            <!-- main部分，导航路由跳转部分 -->
+            <RouterView/>
 
-                </a-card>
-
-                <a-card title="标签云" :bordered="false" hoverable>
-                    <a-tag :color=randomColor() v-for="label in labellist">{{ label.labelname }}</a-tag>
-                </a-card>
+            <!-- 右侧栏部分 -->
+            <div class="rightBar">
+                <StatisticCount />
+                <HeatMap />
+                <AplayerComponent />
+                <RandomArticle />
+                <TagCloud />
             </div>
         </div>
 
+        <!-- 底部部分 -->
         <div class="footer">
-            <div class="miit">
-                <a-space wrap>
-                    <a-text type="link">
-                        <component :is=iconComponents.BanQuanLined />
-                        <span class="miit-style">Copyright © 2024</span>
-                    </a-text>
-                    <a-button type="link" href="/home">
-                        <component :is=iconComponents.TitleOutLined />
-                        <span>SunFree</span>
-                    </a-button>
-                    <a-button type="link" href="https://beian.miit.gov.cn/" target="_blank">
-                        <component :is=iconComponents.IcpLined />
-                        <span>苏ICP备2024067473号-1</span>
-                    </a-button>
-
-                    <a-button type="link" href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">
-                        <component :is=iconComponents.GongAnLined />
-                        <span>苏公网安备32021402003003号</span>
-                    </a-button>
-                </a-space>
-            </div>
-            <div class="badge">
-                <a-space wrap>
-                    <a-button type="link" class="badge-button" href="https://cn.vuejs.org/" target="_blank">
-                        <span class="tag-nav">front-end</span>
-                        <span class="tag-main-first">Vue.js</span>
-                    </a-button>
-                    <a-button type="link" class="badge-button" href="https://fastapi.tiangolo.com/zh/" target="_blank">
-                        <span class="tag-nav">back-end</span>
-                        <span class="tag-main-second">FastAPI</span>
-                    </a-button>
-                    <a-button type="link" class="badge-button" href="https://www.antdv.com/docs/vue/introduce-cn/"
-                        target="_blank">
-                        <span class="tag-nav">UI</span>
-                        <span class="tag-main-third">Ant Design Vue</span>
-                    </a-button>
-                    <a-button type="link" class="badge-button" href="https://cloud.tencent.com/" target="_blank">
-                        <span class="tag-nav">VPS</span>
-                        <span class="tag-main-fourth">tencent cloud</span>
-                    </a-button>
-                </a-space>
-            </div>
-            <div>
-
-
-            </div>
-            <div></div>
+            <FooterContent />
         </div>
     </Simplebar>
 </template>
 <script lang="ts" setup>
-import { reactive, ref, nextTick, toRefs,h } from 'vue';
+import { reactive, ref, nextTick, toRefs,onMounted} from 'vue';
 import { DownCircleOutlined } from '@ant-design/icons-vue';
 import Typed from 'typed.js';
-import { onMounted, watch } from 'vue';
 import 'APlayer/dist/APlayer.min.css';
-import APlayer from 'APlayer';
-import { get } from "@/tools/request"
-import { createEcharts } from "@/hooks/intex"
-import { useRouter, useRoute } from 'vue-router';
-import iconComponents from "@/assets/index";
-import type { classticInterface, labelInterface } from '@/api/admin';
-import type { homePageInterface } from '@/api';
-import ComLink from './ComLink.vue';
-import LeftSiteInfo from "./LeftSiteInfo.vue"
-import StatisticCount from "./StatisticCount.vue"
+import { useRouter } from 'vue-router';
+import ComLink from './leftsite/ComLink.vue';
+import LeftSiteInfo from "./leftsite/LeftSiteInfo.vue"
+import StatisticCount from "./rightsite/StatisticCount.vue"
 import NavigateMenu from './header/NavigateMenu.vue';
 import { homePageStore } from '@/stores';
 import CarouselImg from './header/CarouselImg.vue';
-import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined } from '@ant-design/icons-vue';
-import type { MenuProps } from 'ant-design-vue';
+import HeatMap from './rightsite/HeatMap.vue';
+import RandomArticle from './rightsite/RandomArticle.vue';
+import TagCloud from './rightsite/TagCloud.vue';
+import AplayerComponent from './rightsite/AplayerComponent.vue';
+import FooterContent from './footer/FooterContent.vue';
+import CataloGue from './leftsite/CataloGue.vue';
+const router = useRouter()
+
 const author = ref("SunFree.")
 const { idShow } = homePageStore()
-const route=useRoute()
-const router=useRouter()
 const { show_menu, show_carousel, show_author, show_anchornDown } = toRefs(idShow)
-
-const mainCss = reactive({
-    marginTop: "0px"
-})
-// const current = ref<string[]>(['home']);
-// const items = ref<MenuProps['items']>([
-//     {
-//         key: 'home',
-//         icon: () => h(HomeOutlined),
-//         label: '首页',
-//         title: '首页',
-
-//     },
-//     {
-//         key: 'blog',
-//         icon: () => h(HighlightOutlined),
-//         label: '博客',
-//         title: '博客',
-//     },
-//     {
-//         key: 'diary',
-//         icon: () => h(ProfileOutlined),
-//         label: '日记',
-//         title: '日记',
-//     },
-//     {
-//         key: 'album',
-//         icon: () => h(CameraOutlined),
-//         label: '相册',
-//         title: '相册',
-//         children: [
-//             {
-//                 label: '个人',
-//                 key: 'personself',
-//             },
-//             {
-//                 label: '其他',
-//                 key: 'otherimg',
-//             },
-//         ],
-//     },
-//     {
-//         key: 'chart',
-//         icon: () => h(UsergroupDeleteOutlined),
-//         label: '收支图',
-//         title: '收支图',
-//     },
-//     {
-//         key: 'aboutme',
-//         icon: () => h(UsergroupDeleteOutlined),
-//         label: '关于sunfree',
-//         title: '关于sunfree',
-//     },
-// ]);
-// const searchValue = ref("")
-// const jumpMenu = ({ key }: { key: string }) => {
-//     router.push(`/${key}`)
-// };
 const updateCarouselVisibility = (routeName: any) => {
     handleScrollEnabled.value = false;
     if (scrollbar.value) {
@@ -218,16 +86,13 @@ const updateCarouselVisibility = (routeName: any) => {
         mainCss.marginTop = '48px';
     }
 };
+const mainCss = reactive({
+    marginTop: "0px"
+})
 router.beforeEach((to, _, next) => {
     updateCarouselVisibility(to.name);
     next();
 });
-// 查询功能
-// const articleTitle = ref<string>('');
-// const onSearch = (searchValue: string) => {
-//     console.log('use value', searchValue);
-//     console.log('or use this.value', articleTitle.value);
-// };
 
 /**
  * 滚动条操作
@@ -255,285 +120,10 @@ const downScroll = () => {
     }
 };
 
-/**
- * 左侧栏
- */
-// 折叠面板
-// const classticlist = ref<classticInterface[]>([])
-// const classticList = async () => {
-//     try {
-//         await get("/classtics/list").then(response => {
-//             if (response) {
-//                 classticlist.value = response.data.data.map((item: any, index: any) => ({
-//                     key: (index + 1).toString(),
-//                     header: item.header,
-//                     text: item.text,
-//                     descr: item.descr
-//                 }));
-//             } else {
-//                 console.log("the interface request data does not exist!")
-//             }
-//         })
-//     } catch (error) {
-//         console.error("Failed to fetch data", error);
-//     }
-// }
-// const comLinkClick = (url: string) => {
-//     if (url.startsWith('http://') || url.startsWith('https://')) {
-//         window.open(url, "_blank");  // 使用 window.location.href 打开外部链接
-//     } else {
-//         router.push(url);  // 否则使用 Vue Router 的 push 方法导航
-//     }
-// }
-// const comlinklist = ref<comLinkInterface[]>([])
-// const comLinkList = async () => {
-//     try {
-//         await get("/comlinks/list").then(response => {
-//             if (response) {
-//                 comlinklist.value = response.data.data.map((item: any, index: any) => ({
-//                     key: (index + 1).toString(),
-//                     id: item.id,
-//                     linktext: item.linktext,
-//                     linkurl: item.linkurl,
-//                     descr: item.descr
-//                 }));
-//             } else {
-//                 console.log("the interface request data does not exist!")
-//             }
-//         })
-//     } catch (error) {
-//         console.error("Failed to fetch data", error);
-//     }
-// }
-// const activeKey = ref(['']);
-// const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
-
-// const buttons = ref([
-//     { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
-//     { icon: iconComponents.QQLined, url: '/qqcode' },
-//     { icon: iconComponents.WechatLined, url: '/wechatcode' },
-//     { icon: iconComponents.MusicLined, url: 'https://music.163.com/#/playlist?id=160266689' },
-//     { icon: iconComponents.GitHubLined, url: 'https://gitee.com/c_panda' },
-// ]);
-// const handleClick = (url: string) => {
-//     window.open(url)
-// }
-
-/**
- * 右侧栏
- */
-// 统计
-// const createData = new Date('2024-07-12');
-// const currentDate = ref(new Date());
-// const getDateOnly = (date: Date) => {
-//     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-// };
-
-// // 计算相差的天数
-// const daysDifference = computed(() => {
-//     const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
-//     const diffTime = Math.abs(getDateOnly(currentDate.value).getTime() - getDateOnly(createData).getTime());
-//     return Math.floor(diffTime / oneDay); // 使用Math.floor确保是整天数
-// });
-// const diaryTotal = ref();
-// const blogTotal = ref();
-// const diaryList = async () => {
-//     try {
-//         const response = await get('/diarys/list');
-//         diaryTotal.value = response.data.data.total; // 更新总数
-//     } catch (error) {
-//         console.error('Failed to fetch data', error);
-//     }
-// };
-// const blogList = async () => {
-//     try {
-//         const response = await get("/blogs/list");
-//         if (response) {
-//             blogTotal.value = response.data.data.total;
-//         } else {
-//             console.log("bloglist is not exits")
-//         }
-//     } catch (error) {
-//         console.log("bloglist is error")
-//     }
-
-// }
-
-// // 更新当前时间
-// const updateCurrentDate = () => {
-//     currentDate.value = new Date();
-// };
-// const statistics = reactive([
-//     {
-//         id: "1",
-//         title: "DAYS",
-//         counts: daysDifference
-//     },
-//     {
-//         id: "2",
-//         title: "DIARYS",
-//         counts: diaryTotal
-//     },
-//     {
-//         id: "3",
-//         title: "BLOGS",
-//         counts: blogTotal
-//     },
-// ])
-// 日历热力图
-const heat = ref(null);
-const current = ref<string[]>(['home']);
-function generateDates(numDays: number) {
-    const dates = [];
-    const currentDate = new Date();
-    for (let i = 0; i < numDays; i++) {
-        const date = new Date(currentDate);
-        date.setDate(currentDate.getDate() - i);
-        dates.push(
-            { date: date.toISOString().split('T')[0], writCount: 0 }
-        ); // 包含日期和评论数
-    }
-    return dates;
-}
-// 初始化60天的数据
-const data = generateDates(60);
-// 重新排列数据
-const rawData = ref<any[]>([]);
-const statisticList = async () => {
-    await get("/statistics/list").then(response => {
-        rawData.value = response.data.data
-        rawData.value.forEach(newDataItem => {
-            const item = newData.find((d: any) => d.date === newDataItem.date);
-            if (item) {
-                item.writCount = newDataItem.writCount;
-            }
-        });
-        let formattedData = newData.map((item: any, index: number) => {
-            return [index % 15, Math.floor(index / 15), item.writCount]
-        });
-        formattedList(formattedData)
-        createEcharts(heat, heatMapData);
-    })
-}
-const formattedList = (val: any) => {
-    heatMapData.series[0].data = val
-}
-const newData = <any>[];
-for (let i = 0; i < 60; i += 15) {
-    // 取出每个15天的数据，并反转顺序
-    const chunk = data.slice(i, i + 15).reverse();
-    newData.push(...chunk);
-}
-
-
-const heatMapData = reactive(
-    {
-        tooltip: {
-            position: 'top',
-            formatter: function (params: any) {
-                const item = newData[params.dataIndex];
-                if (item.writCount > 0) {
-                    return `${item.date}<br/>COMMENTS: ${item.writCount}`;
-                } else {
-                    return `${item.date}`;
-                }
-            }
-        },
-        grid: {
-            left: '0',     // 左边距
-            right: '0',    // 右边距
-            top: '0',      // 上边距
-            bottom: '0',
-        },
-        xAxis: {
-            type: 'category',
-            data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
-            splitArea: {
-                show: true
-            },
-            show: false
-        },
-        yAxis: {
-            type: 'category',
-            data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
-            splitArea: {
-                show: false
-            },
-            show: false
-        },
-        visualMap: {
-            min: 0,
-            max: 20,
-            calculable: true,
-            orient: 'horizontal',
-            left: 'center',
-            bottom: '15%',
-            show: false,
-            inRange: {
-                color: ['rgba(182,181,178,0.01)', 'rgba(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
-            }
-        },
-        series: [{
-            type: 'heatmap',
-            data: [],
-            itemStyle: {
-                borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
-                borderWidth: 0.5, // 设置边框宽度
-
-            },
-            label: {
-                show: false,
-            },
-            emphasis: {
-                itemStyle: {
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)',
-                    borderColor: '#fff', // 鼠标悬停时的边框颜色
-                    borderWidth: 2 // 鼠标悬停时的边框宽度
-                }
-            }
-        }]
-    }
-)
 // 音乐组件
 const random = ref();
-const homepagelist = ref<homePageInterface[]>([])
-// 随机文章
-const homePageList = async () => {
-    await get(
-        "/statistics/homepage"
-    ).then(response => {
-        homepagelist.value = response.data.data.sort(() => 0.5 - Math.random()).slice(0, 3);
-    })
-}
-
-const labellist = ref<labelInterface[]>([])
-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)];
-}
-const labelList = async () => {
-    try {
-        await get("/labels/list").then(response => {
-            if (response) {
-                labellist.value = response.data.data;
-            }
-        })
-    } catch (error) {
 
-    }
-}
 onMounted(() => {
-    // classticList()
-    // blogList()
-    labelList()
-    // diaryList()
-    // comLinkList()
-    statisticList()
-    // updateCurrentDate();
-    homePageList()
-    // setInterval(updateCurrentDate, 24 * 60 * 60 * 1000);
-    createEcharts(heat, heatMapData);
     nextTick(() => {
         const authorElement = document.querySelector('.author');
         if (authorElement) {
@@ -558,79 +148,12 @@ onMounted(() => {
                 showCursor: false // 取消光标
             });
         };
-        const aplayerContainer = document.getElementById('aplayer');
-        if (aplayerContainer) {
-            new APlayer({
-                container: aplayerContainer,
-                mini: false,
-                autoplay: false,
-                theme: '#FADFA3',
-                loop: 'all',
-                order: 'random',
-                preload: 'auto',
-                volume: 0.7,
-                mutex: true,
-                listFolded: true,
-                listMaxHeight: 90,
-                lrcType: 3,
-                audio: [
-                    // {
-                    //     name: 'name1',
-                    //     artist: 'artist1',
-                    //     url: 'url1.mp3',
-                    //     cover: 'cover1.jpg',
-                    //     lrc: 'lrc1.lrc',
-                    //     theme: '#ebd0c2'
-                    // },
-                    // {
-                    //     name: 'name2',
-                    //     artist: 'artist2',
-                    //     url: 'url2.mp3',
-                    //     cover: 'cover2.jpg',
-                    //     lrc: 'lrc2.lrc',
-                    //     theme: '#46718b'
-                    // }
-                ]
-            });
-        }
     });
     scrollbar.value = document.querySelector('.simplebar-content-wrapper');
 })
 
-
-// watch(
-//     () => route.name,
-//     (newRouteName) => {
-//         updateCarouselVisibility(newRouteName);
-
-//         if (newRouteName) {
-//             // 尝试从菜单项中找到与当前路由名称匹配的项
-//             const menuItem = items.value?.find((item: any) => {
-//                 // 这里可以根据实际情况来匹配路由名称或路径
-//                 // 例如，可以根据 route.name 或 route.path 来匹配
-//                 if (newRouteName === 'blogdetail') {
-//                     return item.key === 'blog'; // 匹配博客详情页，选中博客菜单
-//                 } else if (newRouteName === 'diarydetail') {
-//                     return item.key === 'diary'; // 匹配日记详情页，选中日记菜单
-//                 } else {
-//                     return item.key === newRouteName; // 默认匹配路由名称
-//                 }
-//             });
-
-//             if (menuItem) {
-//                 current.value = [menuItem.key as string];
-//             } else {
-//                 current.value = ['home']; // 找不到对应的菜单项，默认选中 'home'
-//             }
-//         } else {
-//             current.value = ['home']; // 如果 route.name 不存在，默认选中 'home'
-//         }
-//     },
-//     { immediate: true }
-// );
 </script>
 <style scoped>
-
 /* 作者名称 */
 .author {
     position: absolute;
@@ -684,101 +207,19 @@ onMounted(() => {
     background-color: rgba(5, 5, 5, 0.08);
 }
 
-.leftBar {
-    width: 15%;
-}
-
-.leftBar img {
-    /* 图片自适应容器并保持宽高比例 */
-    aspect-ratio: 1/1;
-}
-
-.leftBar>* {
-    margin-bottom: 24px;
-}
-
-.leftBar h1 {
-    text-align: center;
-    font-family: Georgia, 'Times New Roman', Times, serif;
-}
-
-.leftBar .cardText {
-    min-height: 60px;
-    text-align: center;
-}
-
-.leftBar>:first-child .button-group {
-    display: flex;
-    margin: 0 12px 24px 12px;
-    justify-content: space-between;
-}
-
+.leftBar,
 .rightBar {
     width: 15%;
 }
 
+.leftBar>*,
 .rightBar>* {
     margin-bottom: 24px;
 }
 
-.rightBar .article-text {
-    margin: 12px 0;
-}
-
-.rightBar .article-text span {
-    margin-right: 12px;
-    font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif";
-}
-
-#aplayer {
-    margin: 0;
-}
-
-
 .footer {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-
-.footer a {
-    color: #6e5555;
-}
-
-.footer .miit {
-    margin: 48px 0 0 0;
-}
-
-.footer .badge {
-    margin: 48px 0;
-}
-
-.footer .badge .tag-nav {
-    background-color: #505050;
-}
-
-.footer .miit-style {
-    padding: 0 0 0 6px;
-}
-
-.footer .badge span {
-    padding: 0 6px;
-    color: white;
-}
-
-.footer .badge .tag-main-first {
-    background-color: rgb(3, 3, 250);
-}
-
-.footer .badge .tag-main-second {
-    background-color: rgb(235, 15, 228);
-}
-
-.footer .badge .tag-main-third {
-    background-color: rgb(10, 207, 39);
-}
-
-.footer .badge .tag-main-fourth {
-    background-color: rgb(229, 131, 12);
-}
 </style>
\ No newline at end of file
diff --git a/src/components/blogs/footer/FooterContent.vue b/src/components/blogs/footer/FooterContent.vue
new file mode 100644
index 0000000..12d9eb7
--- /dev/null
+++ b/src/components/blogs/footer/FooterContent.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="miit">
+        <a-space wrap>
+            <a-text type="link">
+                <component :is=iconComponents.BanQuanLined />
+                <span class="miit-style">Copyright © 2024</span>
+            </a-text>
+            <a-button type="link" href="/home">
+                <component :is=iconComponents.TitleOutLined />
+                <span>SunFree</span>
+            </a-button>
+            <a-button type="link" href="https://beian.miit.gov.cn/" target="_blank">
+                <component :is=iconComponents.IcpLined />
+                <span>苏ICP备2024067473号-1</span>
+            </a-button>
+
+            <a-button type="link" href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">
+                <component :is=iconComponents.GongAnLined />
+                <span>苏公网安备32021402003003号</span>
+            </a-button>
+        </a-space>
+    </div>
+    <div class="badge">
+        <a-space wrap>
+            <a-button type="link" class="badge-button" href="https://cn.vuejs.org/" target="_blank">
+                <span class="tag-nav">front-end</span>
+                <span class="tag-main-first">Vue.js</span>
+            </a-button>
+            <a-button type="link" class="badge-button" href="https://fastapi.tiangolo.com/zh/" target="_blank">
+                <span class="tag-nav">back-end</span>
+                <span class="tag-main-second">FastAPI</span>
+            </a-button>
+            <a-button type="link" class="badge-button" href="https://www.antdv.com/docs/vue/introduce-cn/"
+                target="_blank">
+                <span class="tag-nav">UI</span>
+                <span class="tag-main-third">Ant Design Vue</span>
+            </a-button>
+            <a-button type="link" class="badge-button" href="https://cloud.tencent.com/" target="_blank">
+                <span class="tag-nav">VPS</span>
+                <span class="tag-main-fourth">tencent cloud</span>
+            </a-button>
+        </a-space>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import iconComponents from "@/assets/index";
+</script>
+
+<style scoped>
+a {
+    color: #6e5555;
+}
+
+.miit {
+    margin: 48px 0 0 0;
+}
+
+.badge {
+    margin: 48px 0;
+}
+
+.badge .tag-nav {
+    background-color: #505050;
+}
+
+.miit-style {
+    padding: 0 0 0 6px;
+}
+
+.badge span {
+    padding: 0 6px;
+    color: white;
+}
+
+.badge .tag-main-first {
+    background-color: rgb(3, 3, 250);
+}
+
+.badge .tag-main-second {
+    background-color: rgb(235, 15, 228);
+}
+
+.badge .tag-main-third {
+    background-color: rgb(10, 207, 39);
+}
+
+.badge .tag-main-fourth {
+    background-color: rgb(229, 131, 12);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/blogs/header/NavigateMenu.vue b/src/components/blogs/header/NavigateMenu.vue
index b6f0426..3ddf1b4 100644
--- a/src/components/blogs/header/NavigateMenu.vue
+++ b/src/components/blogs/header/NavigateMenu.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, toRefs,watch,h } from 'vue';
+import { ref, toRefs, watch, h } from 'vue';
 import router from '@/router';
-import { homePageStore } from '@/stores';
+import { homePageStore } from '@/stores/index';
 import { useRoute } from 'vue-router';
 import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined } from '@ant-design/icons-vue';
 import type { MenuProps } from 'ant-design-vue';
@@ -24,7 +24,7 @@ const onSearch = (searchValue: string) => {
     console.log('or use this.value', articleTitle.value);
 };
 const current = ref<string[]>(['home']);
-    const items = ref<MenuProps['items']>([
+const items = ref<MenuProps['items']>([
     {
         key: 'home',
         icon: () => h(HomeOutlined),
@@ -81,26 +81,28 @@ watch(
     (newRouteName) => {
         props.updateCarouselVisibility(newRouteName);
         if (newRouteName) {
-            // 尝试从菜单项中找到与当前路由名称匹配的项
-            const menuItem = items.value?.find((item: any) => {
-                // 这里可以根据实际情况来匹配路由名称或路径
-                // 例如，可以根据 route.name 或 route.path 来匹配
-                if (newRouteName === 'blogdetail') {
-                    return item.key === 'blog'; // 匹配博客详情页，选中博客菜单
-                } else if (newRouteName === 'diarydetail') {
-                    return item.key === 'diary'; // 匹配日记详情页，选中日记菜单
-                } else {
-                    return item.key === newRouteName; // 默认匹配路由名称
+            const findMenuItem = (items: any): any => {
+                if (!items) return null;
+                for (const item of items) {
+                    if (item.key === newRouteName) {
+                        return item;
+                    }
+                    if (item.children) {
+                        const found = findMenuItem(item.children);
+                        if (found) return found;
+                    }
                 }
-            });
+                return null;
+            };
 
+            const menuItem = findMenuItem(items.value);
             if (menuItem) {
                 current.value = [menuItem.key as string];
             } else {
-                current.value = ['home']; // 找不到对应的菜单项，默认选中 'home'
+                current.value = ['home'];
             }
         } else {
-            current.value = ['home']; // 如果 route.name 不存在，默认选中 'home'
+            current.value = ['home'];
         }
     },
     { immediate: true }
diff --git a/src/components/blogs/leftsite/CataloGue.vue b/src/components/blogs/leftsite/CataloGue.vue
new file mode 100644
index 0000000..8c7c3ac
--- /dev/null
+++ b/src/components/blogs/leftsite/CataloGue.vue
@@ -0,0 +1,11 @@
+<template>
+    
+</template>
+    
+<script setup lang='ts'>
+    
+</script>
+    
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/src/components/blogs/ComLink.vue b/src/components/blogs/leftsite/ComLink.vue
similarity index 100%
rename from src/components/blogs/ComLink.vue
rename to src/components/blogs/leftsite/ComLink.vue
diff --git a/src/components/blogs/LeftSiteInfo.vue b/src/components/blogs/leftsite/LeftSiteInfo.vue
similarity index 100%
rename from src/components/blogs/LeftSiteInfo.vue
rename to src/components/blogs/leftsite/LeftSiteInfo.vue
diff --git a/src/components/blogs/QQCode.vue b/src/components/blogs/leftsite/QQCode.vue
similarity index 100%
rename from src/components/blogs/QQCode.vue
rename to src/components/blogs/leftsite/QQCode.vue
diff --git a/src/components/blogs/WechatCode.vue b/src/components/blogs/leftsite/WechatCode.vue
similarity index 100%
rename from src/components/blogs/WechatCode.vue
rename to src/components/blogs/leftsite/WechatCode.vue
diff --git a/src/components/blogs/rightsite/AplayerComponent.vue b/src/components/blogs/rightsite/AplayerComponent.vue
new file mode 100644
index 0000000..3f91dae
--- /dev/null
+++ b/src/components/blogs/rightsite/AplayerComponent.vue
@@ -0,0 +1,58 @@
+<template>
+    <a-card hoverable>
+        <template #cover>
+            <div id="aplayer"></div>
+        </template>
+    </a-card>
+</template>
+
+<script setup lang='ts'>
+import 'APlayer/dist/APlayer.min.css';
+import APlayer from 'APlayer';
+import { nextTick, onMounted } from 'vue';
+onMounted(() => {
+    nextTick(() => {
+        const aplayerContainer = document.getElementById('aplayer');
+        if (aplayerContainer) {
+            new APlayer({
+                container: aplayerContainer,
+                mini: false,
+                autoplay: false,
+                theme: '#FADFA3',
+                loop: 'all',
+                order: 'random',
+                preload: 'auto',
+                volume: 0.7,
+                mutex: true,
+                listFolded: true,
+                listMaxHeight: 90,
+                lrcType: 3,
+                audio: [
+                    // {
+                    //     name: 'name1',
+                    //     artist: 'artist1',
+                    //     url: 'url1.mp3',
+                    //     cover: 'cover1.jpg',
+                    //     lrc: 'lrc1.lrc',
+                    //     theme: '#ebd0c2'
+                    // },
+                    // {
+                    //     name: 'name2',
+                    //     artist: 'artist2',
+                    //     url: 'url2.mp3',
+                    //     cover: 'cover2.jpg',
+                    //     lrc: 'lrc2.lrc',
+                    //     theme: '#46718b'
+                    // }
+                ]
+            });
+        }
+    })
+})
+</script>
+
+<style scoped>
+#aplayer {
+    margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/blogs/rightsite/HeatMap.vue b/src/components/blogs/rightsite/HeatMap.vue
new file mode 100644
index 0000000..f9be240
--- /dev/null
+++ b/src/components/blogs/rightsite/HeatMap.vue
@@ -0,0 +1,134 @@
+<template>
+    <a-card hoverable>
+        <template #cover>
+            <div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);">
+                <div ref="heat" style="height: 100%;"></div>
+            </div>
+        </template>
+    </a-card>
+</template>
+
+<script setup lang='ts'>
+import { get } from '@/tools/request';
+import { ref, reactive, onMounted } from 'vue';
+import { createEcharts } from "@/hooks/intex"
+const heat = ref(null);
+function generateDates(numDays: number) {
+    const dates = [];
+    const currentDate = new Date();
+    for (let i = 0; i < numDays; i++) {
+        const date = new Date(currentDate);
+        date.setDate(currentDate.getDate() - i);
+        dates.push(
+            { date: date.toISOString().split('T')[0], writCount: 0 }
+        ); // 包含日期和评论数
+    }
+    return dates;
+}
+// 初始化60天的数据
+const data = generateDates(60);
+// 重新排列数据
+const rawData = ref<any[]>([]);
+const statisticList = async () => {
+    await get("/statistics/list").then(response => {
+        rawData.value = response.data.data
+        rawData.value.forEach(newDataItem => {
+            const item = newData.find((d: any) => d.date === newDataItem.date);
+            if (item) {
+                item.writCount = newDataItem.writCount;
+            }
+        });
+        let formattedData = newData.map((item: any, index: number) => {
+            return [index % 15, Math.floor(index / 15), item.writCount]
+        });
+        formattedList(formattedData)
+        createEcharts(heat, heatMapData);
+    })
+}
+const formattedList = (val: any) => {
+    heatMapData.series[0].data = val
+}
+const newData = <any>[];
+for (let i = 0; i < 60; i += 15) {
+    // 取出每个15天的数据，并反转顺序
+    const chunk = data.slice(i, i + 15).reverse();
+    newData.push(...chunk);
+}
+
+
+const heatMapData = reactive(
+    {
+        tooltip: {
+            position: 'top',
+            formatter: function (params: any) {
+                const item = newData[params.dataIndex];
+                if (item.writCount > 0) {
+                    return `${item.date}<br/>COMMENTS: ${item.writCount}`;
+                } else {
+                    return `${item.date}`;
+                }
+            }
+        },
+        grid: {
+            left: '0',     // 左边距
+            right: '0',    // 右边距
+            top: '0',      // 上边距
+            bottom: '0',
+        },
+        xAxis: {
+            type: 'category',
+            data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
+            splitArea: {
+                show: true
+            },
+            show: false
+        },
+        yAxis: {
+            type: 'category',
+            data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
+            splitArea: {
+                show: false
+            },
+            show: false
+        },
+        visualMap: {
+            min: 0,
+            max: 20,
+            calculable: true,
+            orient: 'horizontal',
+            left: 'center',
+            bottom: '15%',
+            show: false,
+            inRange: {
+                color: ['rgba(182,181,178,0.01)', 'rgba(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
+            }
+        },
+        series: [{
+            type: 'heatmap',
+            data: [],
+            itemStyle: {
+                borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色
+                borderWidth: 0.5, // 设置边框宽度
+
+            },
+            label: {
+                show: false,
+            },
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    borderColor: '#fff', // 鼠标悬停时的边框颜色
+                    borderWidth: 2 // 鼠标悬停时的边框宽度
+                }
+            }
+        }]
+    }
+)
+onMounted(() => {
+    statisticList()
+    createEcharts(heat, heatMapData);
+})
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/blogs/rightsite/RandomArticle.vue b/src/components/blogs/rightsite/RandomArticle.vue
new file mode 100644
index 0000000..1f3f0d5
--- /dev/null
+++ b/src/components/blogs/rightsite/RandomArticle.vue
@@ -0,0 +1,49 @@
+<template>
+    <a-card title="随机文章" :bordered="false" hoverable>
+        <div v-for="article in homepagelist">
+            <div v-if="article.blogtitle">
+                <div class="article-text">
+                    <span>{{ article.blogtitle }}</span>
+                    <span>{{ article.create_at }}</span>
+                </div>
+                <a-image :preview="false" :width="300" :src="article.imglink" />
+            </div>
+            <div v-if="article.diarytitle">
+                <div class="article-text">
+                    <span>{{ article.diarytitle }}</span>
+                    <span>{{ article.create_at }}</span>
+                </div>
+                <a-image :preview="false" :width="300" :src="article.imglink" />
+            </div>
+        </div>
+    </a-card>
+</template>
+
+<script setup lang='ts'>
+import { get } from '@/tools/request';
+import { onMounted, ref } from 'vue';
+import type { homePageInterface } from '@/api';
+const homepagelist = ref<homePageInterface[]>([])
+// 随机文章
+const homePageList = async () => {
+    await get(
+        "/statistics/homepage"
+    ).then(response => {
+        homepagelist.value = response.data.data.sort(() => 0.5 - Math.random()).slice(0, 3);
+    })
+}
+onMounted(()=>{
+    homePageList()
+})
+</script>
+
+<style scoped>
+.article-text {
+    margin: 12px 0;
+}
+
+.article-text span {
+    margin-right: 12px;
+    font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif";
+}
+</style>
\ No newline at end of file
diff --git a/src/components/blogs/StatisticCount.vue b/src/components/blogs/rightsite/StatisticCount.vue
similarity index 100%
rename from src/components/blogs/StatisticCount.vue
rename to src/components/blogs/rightsite/StatisticCount.vue
diff --git a/src/components/blogs/rightsite/TagCloud.vue b/src/components/blogs/rightsite/TagCloud.vue
new file mode 100644
index 0000000..ba794b6
--- /dev/null
+++ b/src/components/blogs/rightsite/TagCloud.vue
@@ -0,0 +1,33 @@
+<template>
+    <a-card title="标签云" :bordered="false" hoverable>
+        <a-tag :color=randomColor() v-for="label in labellist">{{ label.labelname }}</a-tag>
+    </a-card>
+</template>
+
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue';
+import type { labelInterface } from '@/api/admin';
+import { get } from '@/tools/request';
+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)];
+}
+const labellist = ref<labelInterface[]>([])
+
+const labelList = async () => {
+    try {
+        await get("/labels/list").then(response => {
+            if (response) {
+                labellist.value = response.data.data;
+            }
+        })
+    } catch (error) {
+
+    }
+}
+onMounted(()=>{
+    labelList()
+})
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/src/router/blog.ts b/src/router/blog.ts
index 133b93f..dc5a095 100644
--- a/src/router/blog.ts
+++ b/src/router/blog.ts
@@ -62,12 +62,12 @@ const blogRoute:Array<RouteRecordRaw>=[
     {
       path:"/qqcode",
       name:"qqcode",
-      component:()=>import("@/components/blogs/QQCode.vue"),
+      component:()=>import("@/components/blogs/leftsite/QQCode.vue"),
     },
     {
       path:"/wechatcode",
       name:"wechatcode",
-      component:()=>import("@/components/blogs/WechatCode.vue"),
+      component:()=>import("@/components/blogs/leftsite/WechatCode.vue"),
     },
 ]
 export default blogRoute
diff --git a/src/stores/index.ts b/src/stores/index.ts
index b7974b4..ecff47d 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -22,6 +22,21 @@ export const blogStore = defineStore("blog", () => {
 
   return { delControl }
 })
+export const useBlogStore = defineStore('catalogue', () => {
+  const blogContent = ref('');
+  const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
+
+  const setBlogContent = (content: string) => {
+    blogContent.value = content;
+  };
+
+  const setTitles = (newTitles: { title: string; lineIndex: string; indent: number }[]) => {
+    titles.value = newTitles;
+  };
+
+  return { blogContent, titles, setBlogContent, setTitles };
+});
+
 export const diaryStore = defineStore("diary", () => {
   const delControl = reactive({
     open: false,
diff --git a/src/views/admin/ClassticManageView.vue b/src/views/admin/ClassticManageView.vue
index 2157623..dba1a01 100644
--- a/src/views/admin/ClassticManageView.vue
+++ b/src/views/admin/ClassticManageView.vue
@@ -19,7 +19,7 @@
                     <a-form-item label="语录内容" name="text" :rules="[{ required: true, message: '请输入语录内容!' }]">
                         <a-input v-model:value="addList.text" />
                     </a-form-item>
-                    <a-form-item label="备注" name="descr" :rules="[{ required: true, message: '请输入备注!' }]">
+                    <a-form-item label="备注" name="descr">
                         <a-input v-model:value="addList.descr" />
                     </a-form-item>
                 </a-form>
@@ -36,7 +36,7 @@
                     <a-form-item label="语录内容" name="text" :rules="[{ required: true, message: '请修改语录内容!' }]">
                         <a-input v-model:value="editList.text" />
                     </a-form-item>
-                    <a-form-item label="备注" name="descr" :rules="[{ required: true, message: '请修改备注!' }]">
+                    <a-form-item label="备注" name="descr">
                         <a-input v-model:value="editList.descr" />
                     </a-form-item>
                 </a-form>
diff --git a/src/views/blog/blogcontent/BlogDetailView.vue b/src/views/blog/blogcontent/BlogDetailView.vue
index a0c9600..76cc1db 100644
--- a/src/views/blog/blogcontent/BlogDetailView.vue
+++ b/src/views/blog/blogcontent/BlogDetailView.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="blogDetail">
-    <!-- <div v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }"
+    <div 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> -->
+    </div>
     <a-card>
       <v-md-preview v-if="text.blogcontent" :text="text.blogcontent" v-bind="previewProps" />
     </a-card>
diff --git a/tsconfig.json b/tsconfig.json
index 66b5e57..8a69ef7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,5 +7,6 @@
     {
       "path": "./tsconfig.app.json"
     }
-  ]
+  ],
+  
 }