add new

src/components/blogs/HomePage.vue

@@ -2,7 +2,7 @@
     <Simplebar @scroll="handleScroll">
         <div class="header">
             <!-- 头部导航菜单 -->
-            <NavigateMenu />
+            <NavigateMenu :updateCarouselVisibility="updateCarouselVisibility"/>
             <!-- 作者名字 -->
             <div class="author" v-if="show_author">{{ author }}</div>
             <!-- 轮播 -->
@@ -17,7 +17,6 @@
             </div>
         </div>
 
-
         <!-- 主要内容区域 -->
         <div class="mainContainer" :style="mainCss">
             <div class="leftBar">
@@ -119,7 +118,7 @@
     </Simplebar>
 </template>
 <script lang="ts" setup>
-import { reactive, ref, nextTick, toRefs } from 'vue';
+import { reactive, ref, nextTick, toRefs,h } from 'vue';
 import { DownCircleOutlined } from '@ant-design/icons-vue';
 import Typed from 'typed.js';
 import { onMounted, watch } from 'vue';
@@ -137,8 +136,12 @@ import StatisticCount from "./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';
 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({
@@ -172,20 +175,12 @@ const mainCss = reactive({
 //         title: '相册',
 //         children: [
 //             {
-//                 label: '相册1',
-//                 key: 'album1',
-//             },
-//             {
-//                 label: '相册2',
-//                 key: 'album2',
-//             },
-//             {
-//                 label: '相册3',
-//                 key: 'album3',
+//                 label: '个人',
+//                 key: 'personself',
 //             },
 //             {
-//                 label: '相册4',
-//                 key: 'album4',
+//                 label: '其他',
+//                 key: 'otherimg',
 //             },
 //         ],
 //     },
@@ -206,27 +201,27 @@ const mainCss = reactive({
 // const jumpMenu = ({ key }: { key: string }) => {
 //     router.push(`/${key}`)
 // };
-// const updateCarouselVisibility = (routeName: any) => {
-//     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, _, next) => {
-//     updateCarouselVisibility(to.name);
-//     next();
-// });
+const updateCarouselVisibility = (routeName: any) => {
+    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, _, next) => {
+    updateCarouselVisibility(to.name);
+    next();
+});
 // 查询功能
 // const articleTitle = ref<string>('');
 // const onSearch = (searchValue: string) => {
@@ -387,7 +382,7 @@ const downScroll = () => {
 // ])
 // 日历热力图
 const heat = ref(null);
-
+const current = ref<string[]>(['home']);
 function generateDates(numDays: number) {
     const dates = [];
     const currentDate = new Date();

src/components/blogs/header/NavigateMenu.vue

@@ -7,17 +7,24 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, h, toRefs,watch,onMounted } from 'vue';
-import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined } from '@ant-design/icons-vue';
-import type { MenuProps } from 'ant-design-vue';
+import { ref, toRefs,watch,h } from 'vue';
 import router from '@/router';
-import { useRouter } from 'vue-router';
-const route=useRouter()
 import { homePageStore } from '@/stores';
+import { useRoute } from 'vue-router';
+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 searchValue = ref("")
+const articleTitle = ref<string>('');
+const route = useRoute()
+const onSearch = (searchValue: string) => {
+    console.log('use value', searchValue);
+    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),
@@ -66,41 +73,13 @@ const items = ref<MenuProps['items']>([
         title: '关于sunfree',
     },
 ]);
-const searchValue = ref("")
-const articleTitle = ref<string>('');
-const onSearch = (searchValue: string) => {
-    console.log('use value', searchValue);
-    console.log('or use this.value', articleTitle.value);
-};
 const jumpMenu = ({ key }: { key: string }) => {
     router.push(`/${key}`)
 };
-const updateCarouselVisibility = (routeName: any) => {
-    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, _, next) => {
-    updateCarouselVisibility(to.name);
-    next();
-});
 watch(
     () => route.name,
     (newRouteName) => {
-        updateCarouselVisibility(newRouteName);
-
+        props.updateCarouselVisibility(newRouteName);
         if (newRouteName) {
             // 尝试从菜单项中找到与当前路由名称匹配的项
             const menuItem = items.value?.find((item: any) => {
@@ -126,10 +105,6 @@ watch(
     },
     { immediate: true }
 );
-const scrollbar = ref<Element | null>(null);
-onMounted(()=>{
-    scrollbar.value = document.querySelector('.simplebar-content-wrapper');
-})
 </script>
 
 <style scoped>

src/router/blog.ts

@@ -37,6 +37,11 @@ const blogRoute:Array<RouteRecordRaw>=[
           name:"personself",
           component:()=>import("@/views/blog/imagemanage/PersonSelfView.vue")
         },
+        {
+          path:"chart",
+          name:"chart",
+          component:()=>import("@/views/blog/AmountChartView.vue")
+        },
         {
           path:"otherimg",
           name:"otherimg",