From 20c5854392638ffaa6e2a6c2109cc05fa515cd9e Mon Sep 17 00:00:00 2001
From: sunfree <17315650350@163.com>
Date: Sun, 16 Jun 2024 22:27:07 +0800
Subject: [PATCH] add new

---
 src/components/blogs/HomePage.vue  | 105 ++++++++++++++++-------------
 src/components/blogs/ceshi.vue     |   4 +-
 src/views/blog/BlogContentView.vue |   2 +-
 3 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index 2e60e34..7eed302 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -3,7 +3,7 @@
         <!-- 头部导航菜单 -->
         <div class="headerMenu" v-if="show_menu">
             <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;"
-                @click="menuClick" @select="menuSelect" />
+                @click="menuClick" />
             <a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" />
         </div>
         <div class="author" v-if="show_author"></div>
@@ -87,32 +87,41 @@
             </div>
             <RouterView />
             <div class="rightBar">
-                <a-card hoverable style="width: 400px;">
+                <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>
+                        </a-row>
+                    </div>
+                </a-card>
+                <a-card hoverable>
+                    <template #cover>
+                    <div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);">
+                        <div ref="heat" style="height: 100%;width: 100%;"></div>
+                    </div>
+                </template>
+                </a-card>
+
+                <a-card hoverable>
                     <template #cover>
-                        <div id="aplayer" style="width: 400px;"></div>
-                        <div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);">
-                            <div ref="heat" style="height: 100%;"></div>
-                        </div>
-                        <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>
-                            </a-row>
-                        </div>
+                        <div style="width: 100%;">
+                        <div id="aplayer" style="width: 25%;"></div>
+                    </div>
                     </template>
                 </a-card>
-                <a-card title="随机文章" :bordered="false" hoverable style="width: 400px;margin: 12px 0;">
+                <a-card title="随机文章" :bordered="false" hoverable>
                     sces
                 </a-card>
 
-                <a-card title="标签云" :bordered="false" hoverable style="width: 400px;margin: 12px 0;">
+                <a-card title="标签云" :bordered="false" hoverable>
                     sces
                 </a-card>
             </div>
@@ -122,7 +131,7 @@
 </template>
 <script lang="ts" setup>
 import { h, reactive, ref, nextTick } from 'vue';
-import { MenuProps } from 'ant-design-vue/es/menu';
+import { MenuProps } from 'ant-design-vue';
 import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined, DownCircleOutlined } from '@ant-design/icons-vue';
 import { MusicLined, EmailLined, QQLined, WechatLined, GravatarLined, GitHubLined } from "@/assets"
 import Typed from 'typed.js';
@@ -293,6 +302,7 @@ onMounted(() => {
     };
     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');
@@ -351,6 +361,7 @@ const items = ref<MenuProps['items']>([
             {
                 label: '相册1',
                 key: 'album1',
+                url: "album1"
             },
             {
                 label: '相册2',
@@ -366,6 +377,12 @@ const items = ref<MenuProps['items']>([
             },
         ],
     },
+    {
+        key: 'chart',
+        icon: () => h(UsergroupDeleteOutlined),
+        label: '收支图',
+        title: '收支图',
+    },
     {
         key: 'aboutme',
         icon: () => h(UsergroupDeleteOutlined),
@@ -383,25 +400,12 @@ const handleScroll = () => {
         show_menu.value = scrollOffset > halfViewportHeight;
     }
 };
+const current = ref<string[]>(['home']);
 
 const menuClick = ({ item }: { item: any }) => {
-    // handleScrollEnabled.value = false;
-    // if (scrollbar.value) {
-    //     scrollbar.value.scrollTop = 0;
-    // }
-
-    // if (item.url === '/' || item.url === '/home') {
-    //     handleScrollEnabled.value = true;
-    //     show_carousel.value = true;
-    // } else {
-    //     show_menu.value = true;
-    //     show_carousel.value = false;
-    //     mainCss.marginTop = '48px';
-    // }
-
     router.push(item.url);
 }
-const current = ref<string[]>(['mail']);
+
 
 
 // 点击按钮，实现滚动到视窗高度距离，如果已经滚动，只需要滚动视窗高度-已经滚动的距离
@@ -445,10 +449,12 @@ const updateCarouselVisibility = (routeName) => {
     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;
-        mainCss.marginTop = '48px'; 
+        mainCss.marginTop = '48px';
     }
 };
 
@@ -457,10 +463,21 @@ watch(
     () => route.name,
     (newRouteName) => {
         updateCarouselVisibility(newRouteName);
+        if (newRouteName) {
+            const menuItem = items.value.find(item => item.key === newRouteName);
+            if (menuItem) {
+                current.value = [menuItem.key];
+            } else {
+                current.value = ['home']; // 如果找不到对应的菜单项，默认选中 'home'
+            }
+        } else {
+            current.value = ['home']; // 如果 route.name 不存在，默认选中 'home'
+        }
     },
     { immediate: true }
 );
 
+
 router.beforeEach((to, from, next) => {
     updateCarouselVisibility(to.name);
     next();
@@ -581,19 +598,13 @@ router.beforeEach((to, from, next) => {
     width: 20%;
 }
 
-.aplayer {
-    margin: 0 0 24px 0;
-}
-
-.heatmap {
-    margin: 24px 0;
+.rightBar>* {
+    margin-bottom: 24px;
 }
 
 .statistic {
     text-align: center;
 }
 
-.sitebar {
-    width: 400px;
-}
+
 </style>
\ No newline at end of file
diff --git a/src/components/blogs/ceshi.vue b/src/components/blogs/ceshi.vue
index 0247c72..e0ef29d 100644
--- a/src/components/blogs/ceshi.vue
+++ b/src/components/blogs/ceshi.vue
@@ -5,7 +5,7 @@
 import { h, ref } from 'vue';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
 import { MenuProps } from 'ant-design-vue';
-const current = ref<string[]>(['mail']);
+const current = ref<string[]>(['app']);
 const items = ref<MenuProps['items']>([
   {
     key: 'mail',
@@ -57,7 +57,7 @@ const items = ref<MenuProps['items']>([
   },
   {
     key: 'alipay',
-    label: h('a', { href: 'https://antdv.com' }, 'Navigation Four - Link'),
+    label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
     title: 'Navigation Four - Link',
   },
 ]);
diff --git a/src/views/blog/BlogContentView.vue b/src/views/blog/BlogContentView.vue
index e5e118c..61bf6db 100644
--- a/src/views/blog/BlogContentView.vue
+++ b/src/views/blog/BlogContentView.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="main">
-        <div class="mainContent" v-for="article in 2">
+        <div class="mainContent" v-for="article in 5">
             <a-badge-ribbon text="Hippies" color="black">
                 <a-card hoverable>
                     <h2>操作系统的安装</h2>