From 6aa00c365b6f2e6a8ad8ba33bad9b57f88dbb65d Mon Sep 17 00:00:00 2001
From: sunfree <17315650350@163.com>
Date: Sat, 15 Jun 2024 17:47:40 +0800
Subject: [PATCH] add news

---
 src/components/blogs/HomePage.vue | 81 +++++++++++++++++++++----------
 1 file changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index 9c008db..2e60e34 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" @select="menuSelect" />
             <a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" />
         </div>
         <div class="author" v-if="show_author"></div>
@@ -121,12 +121,12 @@
     </Simplebar>
 </template>
 <script lang="ts" setup>
-import { h, reactive, ref,nextTick  } from 'vue';
+import { h, reactive, ref, nextTick } from 'vue';
 import { MenuProps } from 'ant-design-vue/es/menu';
 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';
-import { onMounted,watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import type { CSSProperties } from 'vue';
 import { CaretRightOutlined } from '@ant-design/icons-vue';
 import 'APlayer/dist/APlayer.min.css';
@@ -143,7 +143,7 @@ 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);
+const scrollbar = ref<Element | null>(null);
 onMounted(() => {
     // 定义home页的博客标题名
     new Typed('.author', {
@@ -316,8 +316,8 @@ onMounted(() => {
 const show_menu = ref(false);
 const show_carousel = ref(true);
 const show_author = ref(true)
-const mainCss=reactive({
-    marginTop:"0px"
+const mainCss = reactive({
+    marginTop: "0px"
 })
 
 const items = ref<MenuProps['items']>([
@@ -376,7 +376,7 @@ const items = ref<MenuProps['items']>([
 const handleScrollEnabled = ref(true);
 // 定义滚动条滚到一半显示导航菜单
 const handleScroll = () => {
-    if (!handleScrollEnabled.value) return; 
+    if (!handleScrollEnabled.value) return;
     if (scrollbar.value) {
         const scrollOffset = scrollbar.value.scrollTop;
         const halfViewportHeight = scrollbar.value.clientHeight / 2;
@@ -385,23 +385,21 @@ const handleScroll = () => {
 };
 
 const menuClick = ({ item }: { item: any }) => {
-    handleScrollEnabled.value=false
-    if (scrollbar.value) {
-  }
-    if (item.url=="/" || item.url=="/home") {
-        handleScrollEnabled.value=true
-        show_carousel.value=true
-    }else{
-        show_menu.value=true
-        show_carousel.value=false
-        scrollbar.value!.scrollTop=0
-        mainCss.marginTop="48px"
-        // localStorage.setItem('show_menu', 'true');
-        // localStorage.setItem('show_carousel', 'false');
-        // localStorage.setItem('scrollPosition', '0');
-        // localStorage.setItem('mainCss_marginTop', '48px');
-    }
-    router.push(item.url)
+    // 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']);
 
@@ -411,13 +409,14 @@ const downScroll = () => {
     if (scrollbar.value) {
         const scrollTop = scrollbar.value.scrollTop;
         const viewportHeight = scrollbar.value.clientHeight;
-        const scrollDistance = viewportHeight - scrollTop -48;
+        const scrollDistance = viewportHeight - scrollTop - 48;
 
         setTimeout(() => {
             scrollbar.value!.scrollBy({ top: scrollDistance, behavior: 'smooth' });
         }, 300);
     }
 };
+
 // 定义文章
 // const articles=reactive({
 //     img:"",
@@ -437,6 +436,35 @@ const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
 const gravatarClick = () => {
     window.open("https://www.baidu.com")
 }
+
+const updateCarouselVisibility = (routeName) => {
+    handleScrollEnabled.value = false;
+    if (scrollbar.value) {
+        scrollbar.value.scrollTop = 0;
+    }
+    if (routeName === 'home') {
+        handleScrollEnabled.value = true;
+        show_carousel.value = true;
+    } else {
+        show_menu.value = true;
+        show_carousel.value = false;
+        mainCss.marginTop = '48px'; 
+    }
+};
+
+// 监控路由变化
+watch(
+    () => route.name,
+    (newRouteName) => {
+        updateCarouselVisibility(newRouteName);
+    },
+    { immediate: true }
+);
+
+router.beforeEach((to, from, next) => {
+    updateCarouselVisibility(to.name);
+    next();
+});
 </script>
 <style scoped>
 .headerMenu {
@@ -488,10 +516,11 @@ const gravatarClick = () => {
     }
 }
 
-.carousel img{
+.carousel img {
     height: 100vh;
     width: 100vw;
 }
+
 .anchorDown {
     position: absolute;
     bottom: 100px;