diff --git a/src/assets/images/wechat.jpg b/src/assets/images/wechat.png
similarity index 100%
rename from src/assets/images/wechat.jpg
rename to src/assets/images/wechat.png
diff --git a/src/assets/images/头像.jpg b/src/assets/images/头像.jpg
new file mode 100644
index 0000000..6c443e8
Binary files /dev/null and b/src/assets/images/头像.jpg differ
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 200703e..6e518ca 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -12,45 +12,28 @@ function createIconComponent(iconType: string) {
     },
   });
 }
-const TitleOutLined = createIconComponent('icon-xiongmaochizhuye');
-const BlogOutLined = createIconComponent('icon-blog');
-const SystemOutLined = createIconComponent('icon-system');
-const PhotoOutLined = createIconComponent('icon-photo');
-const FileOutLined = createIconComponent('icon-file');
-const DiaryOutLined = createIconComponent('icon-diary');
-const CommentOutLined = createIconComponent('icon-comment');
-const TypeOutLined = createIconComponent('icon-type');
-const MusicLined = createIconComponent('icon-musicfill');
-const EmailLined = createIconComponent('icon-youxiang');
-const GitHubLined = createIconComponent('icon-github');
-const QQLined = createIconComponent('icon-QQ');
-const WechatLined = createIconComponent('icon-wechat-fill');
-const GravatarLined = createIconComponent('icon-brand-gravatar');
-const RiLiLined = createIconComponent('icon-rili');
-const YueDuLined = createIconComponent('icon-yuedu');
-const YanJingLined = createIconComponent('icon-yanjing');
-const XieZiLined = createIconComponent('icon-xiezi');
-const CravatarLined = createIconComponent('icon-cravatar');
+const iconComponents = {
+  TitleOutLined: createIconComponent('icon-xiongmaochizhuye'),
+  BlogOutLined: createIconComponent('icon-blog'),
+  SystemOutLined: createIconComponent('icon-system'),
+  PhotoOutLined: createIconComponent('icon-photo'),
+  FileOutLined: createIconComponent('icon-file'),
+  DiaryOutLined: createIconComponent('icon-diary'),
+  CommentOutLined: createIconComponent('icon-comment'),
+  TypeOutLined: createIconComponent('icon-type'),
+  MusicLined: createIconComponent('icon-musicfill'),
+  EmailLined: createIconComponent('icon-youxiang'),
+  GitHubLined: createIconComponent('icon-github'),
+  QQLined: createIconComponent('icon-QQ'),
+  WechatLined: createIconComponent('icon-wechat-fill'),
+  GravatarLined: createIconComponent('icon-brand-gravatar'),
+  RiLiLined: createIconComponent('icon-rili'),
+  YueDuLined: createIconComponent('icon-yuedu'),
+  YanJingLined: createIconComponent('icon-yanjing'),
+  XieZiLined: createIconComponent('icon-xiezi'),
+  CravatarLined: createIconComponent('icon-cravatar'),
+}
+
 
 
-export {
-  TitleOutLined,
-  BlogOutLined,
-  SystemOutLined,
-  PhotoOutLined,
-  FileOutLined,
-  DiaryOutLined,
-  CommentOutLined,
-  TypeOutLined,
-  MusicLined,
-  EmailLined,
-  GitHubLined,
-  QQLined,
-  WechatLined,
-  GravatarLined,
-  RiLiLined,
-  YueDuLined,
-  YanJingLined,
-  XieZiLined,
-  CravatarLined
-}
\ No newline at end of file
+export default iconComponents
\ No newline at end of file
diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index fff60d7..bff6fbe 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -2,8 +2,7 @@
     <Simplebar @scroll="handleScroll">
         <!-- 头部导航菜单 -->
         <div class="headerMenu" v-if="show_menu">
-            <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;"
-                @click="menuClick" />
+            <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;" />
             <a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" />
         </div>
         <div class="author" v-if="show_author"></div>
@@ -30,25 +29,14 @@
             <div class="leftBar">
                 <a-card hoverable>
                     <template #cover>
-                        <img alt="example" :src="img" />
+                        <img alt="example" src="/src/assets/images/头像.jpg" />
                     </template>
                     <h1>sunfree</h1>
                     <div class="cardText"></div>
                     <div class="button-group">
-                        <a-button shape="circle" size="large" @click="cravatarClick" >
-                            <CravatarLined style="color: red;"/>
-                        </a-button>
-                        <a-button shape="circle" size="large" @click="qqClick">
-                            <QQLined />
-                        </a-button>
-                        <a-button shape="circle" size="large" @click="wechatClick">
-                            <WechatLined />
-                        </a-button>
-                        <a-button shape="circle" size="large" @click="musicClick">
-                            <MusicLined />
-                        </a-button>
-                        <a-button shape="circle" size="large" @click="githubClick">
-                            <GitHubLined />
+                        <a-button v-for="(button, index) in buttons" :key="index" shape="circle" size="large"
+                            @click="handleClick(button.url)">
+                            <component :is="button.icon" />
                         </a-button>
                     </div>
                     <div class="fold-panel">
@@ -56,32 +44,18 @@
                             <template #expandIcon="{ isActive }">
                                 <caret-right-outlined :rotate="isActive ? 90 : 0" />
                             </template>
-                            <a-collapse-panel key="1" header="内容1" :style="customStyle">
-                                <p>{{ text }}</p>
-                            </a-collapse-panel>
-                            <a-collapse-panel key="2" header="内容2" :style="customStyle">
-                                <p>{{ text }}</p>
-                            </a-collapse-panel>
-                            <a-collapse-panel key="3" header="内容3" :style="customStyle">
-                                <p>{{ text }}</p>
+                            <a-collapse-panel v-for="panel in panels" :key=panel.num :header=panel.header
+                                :style="customStyle">
+                                <p>{{ panel.text }}</p>
                             </a-collapse-panel>
                         </a-collapse>
                     </div>
                 </a-card>
                 <a-card hoverable title="常用链接">
                     <div class="button-group">
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
-                        <a-button type="dashed">Link</a-button>
+                        <a-button type="dashed" v-for="linkbutton in linkbuttons" :key="linkbutton.id">{{
+                            linkbutton.linktext
+                        }}</a-button>
                     </div>
                 </a-card>
             </div>
@@ -90,14 +64,8 @@
                 <a-card hoverable>
                     <div class="statistic">
                         <a-row>
-                            <a-col :span="8">
-                                <a-statistic title="DAYS" :value="112893" />
-                            </a-col>
-                            <a-col :span="8">
-                                <a-statistic title="DIARYS" :value="112893" />
-                            </a-col>
-                            <a-col :span="8">
-                                <a-statistic title="BLOGS" :value="112893" />
+                            <a-col :span="8" v-for="statistic in statistics" :key="statistic.id">
+                                <a-statistic :title=statistic.title :value=statistic.counts />
                             </a-col>
                         </a-row>
                     </div>
@@ -119,7 +87,7 @@
                     <div v-for="article in 3">
                         <a-image :preview="false" :width="300"
                             src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
-                        
+
                         <div class="article-text">
                             <span>2021-02-01</span>
                             <span>操作系统</span>
@@ -138,9 +106,8 @@
 </template>
 <script lang="ts" setup>
 import { h, reactive, ref, nextTick } from 'vue';
-import { MenuProps } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
 import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined, DownCircleOutlined } from '@ant-design/icons-vue';
-import { MusicLined, EmailLined, QQLined, WechatLined, GravatarLined, GitHubLined,CravatarLined } from "@/assets"
 import Typed from 'typed.js';
 import { onMounted, watch } from 'vue';
 import type { CSSProperties } from 'vue';
@@ -148,201 +115,15 @@ import { CaretRightOutlined } from '@ant-design/icons-vue';
 import 'APlayer/dist/APlayer.min.css';
 import APlayer from 'APlayer';
 import { createEcharts } from "@/hooks/intex"
-import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
-import { RiLiLined, YueDuLined, YanJingLined, XieZiLined } from '@/assets';
 import { useRouter, useRoute } from 'vue-router';
-const random = ref();
+import iconComponents from "@/assets/index"
 const router = useRouter()
 const route = useRoute()
-const heat = ref(null);
-const activeKey = ref(['']);
-const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
-const customStyle =
-    'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
-const scrollbar = ref<Element | null>(null);
-onMounted(() => {
-    // 定义home页的博客标题名
-    nextTick(() => {
-        const authorElement = document.querySelector('.author');
-        if (authorElement) {
-            new Typed('.author', {
-                strings: ['SunFree.'],
-                typeSpeed: 200,
-                backSpeed: 150,
-                loop: true,
-                loopCount: Infinity,
-                showCursor: false
-            });
-        };
-        const cardTextElement = document.querySelector('.cardText');
-        if (cardTextElement) {
-            // 定义个人座右铭
-            new Typed('.cardText', {
-                strings: ['做三流测试，品瀚霖人生！'],
-                typeSpeed: 200,
-                backSpeed: 150,
-                loop: true, // 开启循环
-                loopCount: Infinity, // 无限循环
-                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'
-                    }
-                ]
-            });
-        }
-    });
-
-
-
-    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], blogCount: 0 }
-            ); // 包含日期和评论数
-        }
-        return dates;
-    }
-
-    // 初始化60天的数据
-    const data = generateDates(60);
-    console.log(`output->`, data)
-    data[3].blogCount = 5;
-    data[15].blogCount = 10;
-    data[25].blogCount = 3;
-
-    // 重新排列数据
-    const newData = [];
-    for (let i = 0; i < 60; i += 15) {
-        // 取出每个15天的数据，并反转顺序
-        const chunk = data.slice(i, i + 15).reverse();
-        newData.push(...chunk);
-    }
-
-    const formattedData = newData.map((value, index) => [index % 15, Math.floor(index / 15), value.blogCount]);
-    const heatMapData = {
-        tooltip: {
-            position: 'top',
-            formatter: function (params: any) {
-                const item = newData[params.dataIndex];
-                if (item.blogCount > 0) {
-                    return `${item.date}<br/>COMMENTS: ${item.blogCount}`;
-                } 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: 10,
-            calculable: true,
-            orient: 'horizontal',
-            left: 'center',
-            bottom: '15%',
-            show: false,
-            inRange: {
-                color: ['rgba(182,181,178,0.01)', 'rgb(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
-            }
-        },
-        series: [{
-            type: 'heatmap',
-            data: formattedData,
-            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 // 鼠标悬停时的边框宽度
-                }
-            }
-        }]
-    };
-    createEcharts(heat, heatMapData);
-    scrollbar.value = document.querySelector('.simplebar-content-wrapper');
-    // console.log(current.value)
-    // const storedShowMenu = localStorage.getItem('show_menu');
-    // const storedShowCarousel = localStorage.getItem('show_carousel');
-    // const storedScrollPosition = localStorage.getItem('scrollPosition');
-    // const storedMainCssMarginTop = localStorage.getItem('mainCss_marginTop');
-    // if (storedShowMenu !== null) {
-    //     show_menu.value = storedShowMenu === 'true';
-    // }
-    // if (storedShowCarousel !== null) {
-    //     show_carousel.value = storedShowCarousel === 'true';
-    // }
-    // if (storedScrollPosition !== null && scrollbar.value) {
-    //     scrollbar.value.scrollTop = parseInt(storedScrollPosition, 10);
-    // }
-    // if (storedMainCssMarginTop !== null) {
-    //     mainCss.marginTop = storedMainCssMarginTop;
-    // }
 
-})
 
-// 导航菜单
+/** 
+* 导航菜单
+*/
 const show_menu = ref(false);
 const show_carousel = ref(true);
 const show_author = ref(true)
@@ -350,28 +131,26 @@ const show_anchornDown = ref(true)
 const mainCss = reactive({
     marginTop: "0px"
 })
-
+const current = ref<string[]>(['home']);
 const items = ref<MenuProps['items']>([
     {
         key: 'home',
         icon: () => h(HomeOutlined),
-        label: '首页',
+        label: h('a', { href: '/' }, '首页'),
         title: '首页',
-        url: '/'
+
     },
     {
         key: 'blog',
         icon: () => h(HighlightOutlined),
-        label: '博客',
+        label: h('a', { href: "/blog" }, '博客'),
         title: '博客',
-        url: "/blog"
     },
     {
         key: 'diary',
         icon: () => h(ProfileOutlined),
-        label: '日记',
+        label: h('a', { href: "/diary" }, '日记'),
         title: '日记',
-        url: '/diary'
     },
     {
         key: 'album',
@@ -382,7 +161,7 @@ const items = ref<MenuProps['items']>([
             {
                 label: '相册1',
                 key: 'album1',
-                url: "album1"
+                // url: "album1"
             },
             {
                 label: '相册2',
@@ -401,16 +180,49 @@ const items = ref<MenuProps['items']>([
     {
         key: 'chart',
         icon: () => h(UsergroupDeleteOutlined),
-        label: '收支图',
+        label: h('a', { href: "/chart" }, '收支图'),
         title: '收支图',
     },
     {
         key: 'aboutme',
         icon: () => h(UsergroupDeleteOutlined),
-        label: '关于sunfree',
+        label: h('a', { href: "/aboutme" }, '关于sunfree'),
         title: '关于sunfree',
     },
 ]);
+const updateCarouselVisibility = (routeName) => {
+    handleScrollEnabled.value = false;
+    if (scrollbar.value) {
+        scrollbar.value.scrollTop = 0;
+    }
+    if (routeName === 'home') {
+        handleScrollEnabled.value = true;
+        show_carousel.value = true;
+        show_menu.value = false
+    } else {
+        show_menu.value = true;
+        show_author.value = false;
+        show_carousel.value = false;
+        show_anchornDown.value = false;
+        mainCss.marginTop = '48px';
+    }
+};
+router.beforeEach((to, from, 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);
+};
+
+
+/**
+ * 滚动条操作
+ */
+const scrollbar = ref<Element | null>(null);
 const handleScrollEnabled = ref(true);
 // 定义滚动条滚到一半显示导航菜单
 const handleScroll = () => {
@@ -421,77 +233,259 @@ const handleScroll = () => {
         show_menu.value = scrollOffset > halfViewportHeight;
     }
 };
-const current = ref<string[]>(['home']);
-
-const menuClick = ({ item }: { item: any }) => {
-    router.push(item.url);
-}
-
-
-
-// 点击按钮，实现滚动到视窗高度距离，如果已经滚动，只需要滚动视窗高度-已经滚动的距离
+// 点击按钮，实现滚动到视窗高度距离
 const downScroll = () => {
     if (scrollbar.value) {
         const scrollTop = scrollbar.value.scrollTop;
         const viewportHeight = scrollbar.value.clientHeight;
         const scrollDistance = viewportHeight - scrollTop - 48;
-
         setTimeout(() => {
             scrollbar.value!.scrollBy({ top: scrollDistance, behavior: 'smooth' });
         }, 300);
     }
 };
 
-// 定义文章
-// const articles=reactive({
-//     img:"",
-
-// })
-
+/**
+ * 左侧栏
+ */
+// 折叠面板
+const activeKey = ref(['']);
+const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
+const panels = reactive([
+    {
+        num: "1",
+        header: "内容1",
+        text: "内容1"
+    },
+    {
+        num: "2",
+        header: "内容2",
+        text: "内容2"
+    },
+    {
+        num: "3",
+        header: "内容3",
+        text: "内容3"
+    }
+]
+)
+// 社交按钮
+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 linkbuttons = reactive([
+    {
+        id: "1",
+        linktext: "测试"
+    },
+    {
+        id: "2",
+        linktext: "开发"
+    },
+    {
+        id: "3",
+        linktext: "运营"
+    },
+    {
+        id: "4",
+        linktext: "实施"
+    }
+])
 
+/**
+ * 右侧栏
+ */
+// 统计
+const statistics = reactive([
+    {
+        id: "1",
+        title: "DAYS",
+        counts: "111"
+    },
+    {
+        id: "2",
+        title: "DIARYS",
+        counts: "111"
+    },
+    {
+        id: "3",
+        title: "BLOGS",
+        counts: "111"
+    },
+])
+// 日历热力图
+const heat = ref(null);
+const newData = <any>[];
+// 初始化60天的数据
+const data = generateDates(60);
+console.log(data)
+// 重新排列数据
+for (let i = 0; i < 60; i += 15) {
+    // 取出每个15天的数据，并反转顺序
+    const chunk = data.slice(i, i + 15).reverse();
+    newData.push(...chunk);
+}
 
-const value = ref<string>('');
-const onSearch = (searchValue: string) => {
-    console.log('use value', searchValue);
-    console.log('or use this.value', value.value);
+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;
+}
+const writList=[5,4,3,2,1,0]
+writList.forEach((item,index)=>{
+    data[index].writCount = item;
+})
+const formattedData = newData.map((value, index) => [index % 15, Math.floor(index / 15), value.writCount]);
+const heatMapData = {
+    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: 10,
+        calculable: true,
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '15%',
+        show: false,
+        inRange: {
+            color: ['rgba(182,181,178,0.01)', 'rgb(157,156,153,1)'] // 0评论是白色, 非0评论是黑色
+        }
+    },
+    series: [{
+        type: 'heatmap',
+        data: formattedData,
+        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 img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
 
-const cravatarClick = () => {
-    window.open("https://cravatar.cn/")
-}
-const qqClick=()=>{
-    window.open("/qqcode",'_blank')
-}
-const wechatClick=()=>{
-    window.open("/wechatcode",'_blank')
-}
-const musicClick=()=>{
-    window.open("https://music.163.com/#/playlist?id=160266689")
-}
-const githubClick=()=>{
-    window.open("https://gitee.com/c_panda")
-}
-const updateCarouselVisibility = (routeName) => {
-    handleScrollEnabled.value = false;
-    if (scrollbar.value) {
-        scrollbar.value.scrollTop = 0;
-    }
-    if (routeName === 'home') {
-        handleScrollEnabled.value = true;
-        show_carousel.value = true;
-        show_menu.value = false
-    } else {
-        show_menu.value = true;
-        show_author.value = false;
-        show_carousel.value = false;
-        show_anchornDown.value = false;
-        mainCss.marginTop = '48px';
-    }
-};
 
-// 监控路由变化
+onMounted(() => {
+    nextTick(() => {
+        const authorElement = document.querySelector('.author');
+        if (authorElement) {
+            new Typed('.author', {
+                strings: ['SunFree.'],
+                typeSpeed: 200,
+                backSpeed: 150,
+                loop: true,
+                loopCount: Infinity,
+                showCursor: false
+            });
+        };
+        const cardTextElement = document.querySelector('.cardText');
+        if (cardTextElement) {
+            // 定义个人座右铭
+            new Typed('.cardText', {
+                strings: ['做三流测试，品瀚霖人生！'],
+                typeSpeed: 200,
+                backSpeed: 150,
+                loop: true, // 开启循环
+                loopCount: Infinity, // 无限循环
+                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'
+                    }
+                ]
+            });
+        }
+    });
+    createEcharts(heat, heatMapData);
+    scrollbar.value = document.querySelector('.simplebar-content-wrapper');
+})
 watch(
     () => route.name,
     (newRouteName) => {
@@ -509,12 +503,6 @@ watch(
     },
     { immediate: true }
 );
-
-
-router.beforeEach((to, from, next) => {
-    updateCarouselVisibility(to.name);
-    next();
-});
 </script>
 <style scoped>
 .headerMenu {
@@ -641,7 +629,8 @@ router.beforeEach((to, from, next) => {
     position: relative;
     margin-bottom: 24px;
 }
-.rightBar>:nth-child(4) div .article-text{
+
+.rightBar>:nth-child(4) div .article-text {
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -649,6 +638,7 @@ router.beforeEach((to, from, next) => {
     left: 10%;
     color: rgb(187, 185, 187);
 }
+
 #aplayer {
     margin: 0;
 }
diff --git a/src/components/blogs/QQCode.vue b/src/components/blogs/QQCode.vue
index a799b41..2840e31 100644
--- a/src/components/blogs/QQCode.vue
+++ b/src/components/blogs/QQCode.vue
@@ -1,9 +1,52 @@
 <template>
-    <a-image :preview="false" :width="500" :height="500" src="/src/assets/images/qq.png"/>
+    <div class="qq-poster">
+        <div>
+            <h1>QQ二维码</h1>
+            <p>欢迎扫描二维码，与我共同探讨测试开发的学习和实践。</p>
+            <div class="qr-code-container">
+                <img src="/src/assets/images/qq.png" alt="QR Code" class="qr-code" />
+            </div>
+            <p>扫码添加了解更多信息。</p>
+        </div>
+    </div>
 </template>
 
-<script setup lang='ts'>
+<script lang="ts" setup >
 
 </script>
 
-<style></style>
\ No newline at end of file
+<style scoped>
+.qq-poster {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+p {
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+.qr-code-container {
+    margin: 20px 0;
+    padding: 10px;
+    border: 2px solid #ccc;
+    display: inline-block;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code {
+    width: 200px;
+    height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/blogs/WechatCode.vue b/src/components/blogs/WechatCode.vue
index e84276a..6881eb9 100644
--- a/src/components/blogs/WechatCode.vue
+++ b/src/components/blogs/WechatCode.vue
@@ -1,9 +1,52 @@
 <template>
-    <a-qrcode error-level="H" value="https://www.antdv.com" icon="https://www.antdv.com/assets/logo.1ef800a8.svg" />
+    <div class="qq-poster">
+        <div>
+            <h1>微信二维码</h1>
+            <p>欢迎扫描二维码，与我共同探讨测试开发的学习和实践。</p>
+            <div class="qr-code-container">
+                <img src="/src/assets/images/wechat.png" alt="QR Code" class="qr-code" />
+            </div>
+            <p>扫码添加了解更多信息。</p>
+        </div>
+    </div>
 </template>
 
-<script setup lang='ts'>
+<script lang="ts" setup>
 
 </script>
 
-<style></style>
\ No newline at end of file
+<style scoped>
+.qq-poster {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+p {
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+.qr-code-container {
+    margin: 20px 0;
+    padding: 10px;
+    border: 2px solid #ccc;
+    display: inline-block;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code {
+    width: 200px;
+    height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/blog.ts b/src/router/blog.ts
index 8e39131..e74a88e 100644
--- a/src/router/blog.ts
+++ b/src/router/blog.ts
@@ -7,6 +7,11 @@ const blogRoute:Array<RouteRecordRaw>=[
       name: "home",
       component: () => import("@/components/blogs/HomePage.vue"),
       children:[
+        {
+          path:"/home",
+          name:"home",
+          component:()=>import("@/views/blog/HomePageView.vue")
+        },
         {
           path:"/blog",
           name:"blog",
@@ -18,27 +23,31 @@ const blogRoute:Array<RouteRecordRaw>=[
           component:()=>import("@/views/blog/DiaryContentView.vue")
         },
         {
-          path:"/home",
-          name:"home",
-          component:()=>import("@/views/blog/HomePageView.vue")
+          path:"/chart",
+          name:"chart",
+          component:()=>import("@/views/blog/AmountChartView.vue")
+        },
+        {
+          path:"/aboutme",
+          name:"aboutme",
+          component:()=>import("@/views/blog/AboutMe.vue"),
         },
-        
       ]
     },
     {
       path:"/ceshi",
       name:"ceshi",
-      component:()=>import("@/components/blogs/ceshi.vue")
+      component:()=>import("@/components/blogs/ceshi.vue"),
     },
     {
       path:"/qqcode",
       name:"qqcode",
-      component:()=>import("@/components/blogs/QQCode.vue")
+      component:()=>import("@/components/blogs/QqCode.vue"),
     },
     {
       path:"/wechatcode",
       name:"wechatcode",
-      component:()=>import("@/components/blogs/WechatCode.vue")
+      component:()=>import("@/components/blogs/WeChatCode.vue"),
     },
 ]
 export default blogRoute
diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts
index ad1afd9..1ead44b 100644
--- a/src/types/custom.d.ts
+++ b/src/types/custom.d.ts
@@ -1,4 +1,4 @@
-declare module 'ant-design-vue';
-declare module 'echarts';
-declare module 'ant-design-vue/es/menu'
-declare module 'animejs/lib/anime.es.js'
+// declare module 'ant-design-vue';
+// declare module 'echarts';
+// declare module 'ant-design-vue/es/menu'
+// declare module 'animejs/lib/anime.es.js'
diff --git a/src/views/admin/DashBoardView.vue b/src/views/admin/DashBoardView.vue
index 50323f9..07004c4 100644
--- a/src/views/admin/DashBoardView.vue
+++ b/src/views/admin/DashBoardView.vue
@@ -89,7 +89,6 @@
   </template>
   
   <script setup lang='ts'>
-  import { BlogOutLined, PhotoOutLined, FileOutLined, DiaryOutLined, CommentOutLined } from "@/assets";
   import { reactive, ref, onMounted } from 'vue';
   import type { Ref } from 'vue';
   import { createEcharts } from '@/hooks/intex'
diff --git a/src/views/blog/AboutMe.vue b/src/views/blog/AboutMe.vue
new file mode 100644
index 0000000..d19752e
--- /dev/null
+++ b/src/views/blog/AboutMe.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>这是关于我的内容</div>
+</template>
+    
+<script setup lang='ts'>
+    
+</script>
+    
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/src/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue
index 434cd27..0e8713f 100644
--- a/src/views/blog/AmountChartView.vue
+++ b/src/views/blog/AmountChartView.vue
@@ -1,11 +1,82 @@
 <template>
-    <div>测试</div>
-</template>
+    <div>
+        <div ref="staticLine" style="height: 300px;width: 1000px;"></div>
+        <div ref="staticLine" style="height: 300px;width: 1000px;"></div>
+        
+    </div>
     
+</template>
+
 <script setup lang='ts'>
-    
+import { createEcharts } from '@/hooks/intex'
+import { onMounted, ref } from 'vue';
+const staticLine = ref(null)
+
+onMounted(() => {
+    const staticLineData = {
+    title: {
+        text: 'Stacked Line'
+    },
+    tooltip: {
+        trigger: 'axis'
+    },
+    legend: {
+        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    toolbox: {
+        feature: {
+            saveAsImage: {}
+        }
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+    },
+    series: [
+        {
+            name: 'Email',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name: 'Union Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name: 'Video Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+            name: 'Direct',
+            type: 'line',
+            stack: 'Total',
+            data: [320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            name: 'Search Engine',
+            type: 'line',
+            stack: 'Total',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+        }
+    ]
+};
+    createEcharts(staticLine, staticLineData)
+})
 </script>
-    
-<style>
-    
-</style>
\ No newline at end of file
+
+<style></style>
\ No newline at end of file