开始构建导航栏

client/assets/styling/global.css

@@ -16,7 +16,14 @@ html.light{
   background-color:white;
 }
 
+@font-face {
+  font-family: 'AlimamaTi';
+  src: url('/assets/fonts/AlimamaFangYuanTiVF.ttf') format('truetype');
+  font-display: swap;
+  font-weight: 900;
+}
 
 html {
   overflow-x:hidden;
+  font-family: 'AlimamaTi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }

client/assets/styling/tailwind.css

@@ -582,6 +582,15 @@ video {
   margin: 0.5rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -598,14 +607,30 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
+.grid {
+  display: grid;
+}
+
 .h-1 {
   height: 0.25rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .w-\[20rem\] {
   width: 20rem;
 }
 
+.w-\[80\%\] {
+  width: 80%;
+}
+
 .w-full {
   width: 100%;
 }
@@ -650,14 +675,34 @@ video {
   animation: slide-out 0.3s ease-out;
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
 
+.gap-10 {
+  gap: 2.5rem;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -738,6 +783,11 @@ video {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
 
+.bg-slate-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -748,6 +798,10 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -758,6 +812,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));

client/src/components/navbar.rs

@@ -5,18 +5,45 @@ use dioxus::prelude::*;
 #[component]
 pub fn Navbar() -> Element {
     rsx! {
+        nav { 
+            class: "border-red-500 bg-slate-400 mb-5",
+            div { 
+                class: "grid grid-cols-3 items-center text-center w-[80%] mx-auto h-12",
+                div {
+                    class:"justify-self-start text-xl",
+                    Link {
+                        to: Route::Home {},
+                        "echoer"
+                    }
+                }
+                div {
+                    class:"text-xl flex gap-10 justify-center",
+                    Link {
+                        to: Route::Home {},
+                        "首页"
+                    }
+                    Link {
+                        to: Route::Home {},
+                        "首页"
+                    }
+                    Link {
+                        to: Route::Home {},
+                        "首页"
+                    }
+                }
                 
-        div {
-            id: "navbar",
-            Link {
-                to: Route::Home {},
-                "home"
+                div {
+                    class:"justify-self-end",
+                    Toggle {
+                        height: 35,
+                        width: 35
+                    }
+                }
             }
-
-            Toggle{}
-
         }
-
-        Outlet::<Route> {}
+        div {
+            class:"w-[80%] mx-auto",
+            Outlet::<Route> {}
+        }
     }
 }

client/src/components/theme_toggle.rs

@@ -16,8 +16,8 @@ pub struct ToggleProps {
     pub height: u32,
     #[props(default = 20)]
     pub width: u32,
-    #[props(default = "currentColor".to_string())]
-    pub fill: String,
+    #[props(default = "currentColor")]
+    pub fill: &'static str,
 }
 
 #[component]
@@ -26,6 +26,8 @@ pub fn Toggle(props: ToggleProps) -> Element {
 
     rsx! {
         div {
+            style: "height: {props.height}px;width: {props.width}px;",
+            class:"inline-flex items-center justify-center",
             onclick: move |_|
             {
                 let system_theme=get_media_theme().unwrap_or_else(|_|"".to_string());
@@ -53,8 +55,8 @@ pub fn Toggle(props: ToggleProps) -> Element {
                 "dark"=>{
                     rsx!(
                         Icon{
-                            width:props.width,
-                            height:props.height,
+                            height:props.height/3*2,
+                            width:props.width/3*2,
                             fill:props.fill,
                             icon:BsMoonStars,
                         }
@@ -63,8 +65,8 @@ pub fn Toggle(props: ToggleProps) -> Element {
                 _=>{
                     rsx!{
                         Icon{
-                            width:props.width,
-                            height:props.height,
+                            height:props.height/3*2,
+                            width:props.width/3*2,
                             fill:props.fill,
                             icon:BsSun,
                         }

server/src/db.rs

@@ -7,7 +7,7 @@ pub struct Database {
 }
 
 impl Database {
-    pub async fn new() -> CustomResult<Self> {
+    pub async fn link() -> CustomResult<Self> {
         let client = connect("ws://172.30.113.67:5000").await?;
 
         // 使用root账户进行认证
@@ -19,7 +19,7 @@ impl Database {
             .await?;
 
         // 选择命名空间和数据库
-        client.use_ns("test").use_db("test").await?;
+        client.use_ns("echoer").await?;
 
         Ok(Self { client })
     }

server/src/main.rs

@@ -26,7 +26,7 @@ pub struct AppState {
 async fn main() -> CustomResult<()> {
     let rocket_build = rocket::build();
 
-    let db = Database::new().await?;
+    let db = Database::link().await?;
 
     let rocket = rocket_build
         .mount("/", routes![index, get_theme])