From b75433cdbd89a09f71afeded58c4c372db34283c Mon Sep 17 00:00:00 2001
From: lsy <lsy22@vip.qq.com>
Date: Fri, 10 Jan 2025 21:10:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/navbar.rs | 80 ++++++++++++++++++---------------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/client/src/components/navbar.rs b/client/src/components/navbar.rs
index edc9469..a8bfd34 100644
--- a/client/src/components/navbar.rs
+++ b/client/src/components/navbar.rs
@@ -1,5 +1,4 @@
 use super::Toggle;
-use crate::utils::dom::{add_element_class, get_document, remove_element_class};
 use crate::Route;
 use dioxus::{logger::tracing, prelude::*};
 use wasm_bindgen::{prelude::Closure, JsCast};
@@ -9,37 +8,36 @@ pub fn Navbar() -> Element {
     let mut progress_signal = use_signal(|| 0);
     let mut progress_hover = use_signal(|| false);
 
+    // 监听滚动事件
+
     use_effect(move || {
         let window = web_sys::window().unwrap();
-        let document = get_document().unwrap();
+        let document = window.document().unwrap();
         let document_element = document.document_element().unwrap();
-        let closure: Closure<dyn FnMut(_)> = Closure::wrap(Box::new(move |_: web_sys::Event| {
-            if progress_hover() {
-                return;
-            }
-            let screen_height = document_element.scroll_height() as f64;
-            let inner_height = window.inner_height().unwrap().as_f64().unwrap();
-            let scrool_height = window.scroll_y().unwrap();
-            let max_scroll_height = screen_height - inner_height;
+        
+        let closure: Closure<dyn FnMut(_)> = {
+            Closure::wrap(Box::new(move |_: web_sys::Event| {
+                let screen_height = document_element.scroll_height() as f64;
+                let inner_height = window.inner_height().unwrap().as_f64().unwrap();
+                let scrool_height = window.scroll_y().unwrap();
+                let max_scroll_height = screen_height - inner_height;
 
-            let percent = if max_scroll_height > 0.0 {
-                scrool_height / max_scroll_height
-            } else {
-                0.0
-            };
-            let percent = (percent.clamp(0.0, 1.0) * 100.0) as i32;
-            if percent > 0 {
-                let _ = remove_element_class("nav .progress", "hidden");
-            } else {
-                let _ = add_element_class("nav .progress", "hidden");
-            }
-            progress_signal.set(percent);
-        }) as Box<dyn FnMut(_)>);
+                let percent = if max_scroll_height > 0.0 {
+                    scrool_height / max_scroll_height
+                } else {
+                    0.0
+                };
+                let percent = (percent.clamp(0.0, 1.0) * 100.0) as i32;
+                progress_signal.set(percent);
+            }) as Box<dyn FnMut(_)>)
+        };
+        
         document
             .add_event_listener_with_callback("scroll", closure.as_ref().unchecked_ref())
             .unwrap();
         closure.forget();
     });
+
     rsx! {
         nav {
             class: "border-red-500 bg-slate-400 text-xl fixed top-0 left-0 right-0",
@@ -75,29 +73,37 @@ pub fn Navbar() -> Element {
                         width: 30
                     }
                     div {
-                        class:"progress bg-accent h-7 p-2 rounded-full text-xs flex items-center justify-center min-w-7 transition-all duration-300 hidden",
-                        onmouseenter:move|_|{
+                        class: "progress bg-accent h-7 rounded-full text-xs flex items-center justify-center transition-all duration-300 overflow-hidden",
+                        style: if progress_signal() > 0 { 
+                            format!("opacity: 1; transform: translateX(0); width: {}px;", if progress_signal()==100 { "70" } else { "28" })
+                        } else { 
+                            "opacity: 0; transform: translateX(100%); width: 0px".to_string() 
+                        },
+                        onmouseenter: move |_| {
                             progress_hover.set(true);
                         },
-                        onmouseleave:move|_|{
+                        onmouseleave: move |_| {
                             progress_hover.set(false);
                         },
-                        onclick:move|_|{
+                        onclick: move |_| {
                             progress_hover.set(false);
                             let window = web_sys::window().unwrap();
                             window.scroll_to_with_x_and_y(0.0, 0.0);
-
                         },
-                        {
-                            if progress_hover(){
-                                "↑".to_string()
-                            }
-                            else{
-                                if progress_signal()==100{
-                                    "返回顶部".to_string()
+                        div {
+                            class: "px-2 whitespace-nowrap transition-opacity duration-150",
+                            style: "opacity: 1",
+                            {
+                                if progress_hover() {
+                                    "↑".to_string()
                                 }
-                                else {
-                                    progress_signal().to_string()
+                                else{
+                                    if progress_signal()==100 {
+                                        "返回顶部".to_string()
+                                    }
+                                    else {
+                                        progress_signal().to_string()
+                                    }
                                 }
                             }
                         }