xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark mode toggle button to admin layout

Browse Source
This commit is contained in:
xfy 2026-06-05 10:33:34 +08:00
parent a8704e199f
commit 7866c53e36
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/admin_layout.rs
View File

@ -8,6 +8,7 @@ use crate::components::write_skeleton::WriteSkeleton;
use crate::context::UserContext; use crate::context::UserContext;
use crate::hooks::delayed_loading::use_delayed_loading; use crate::hooks::delayed_loading::use_delayed_loading;
use crate::router::Route; use crate::router::Route;
use crate::theme::ThemeToggle;
#[component] #[component]
pub fn AdminLayout() -> Element { pub fn AdminLayout() -> Element {
@ -60,7 +61,9 @@ pub fn AdminLayout() -> Element {
}, },
]; ];
let logout_button = rsx! { let right_content = rsx! {
div { class: "flex items-center gap-3",
ThemeToggle {}
button { button {
class: "text-sm text-gray-600 dark:text-[#9b9c9d] hover:text-gray-900 dark:hover:text-[#dadadb] transition-colors", class: "text-sm text-gray-600 dark:text-[#9b9c9d] hover:text-gray-900 dark:hover:text-[#dadadb] transition-colors",
onclick: move |_| { onclick: move |_| {
@ -71,13 +74,14 @@ pub fn AdminLayout() -> Element {
}, },
"登出" "登出"
} }
}
}; };
match ((ctx.checked)(), (ctx.user)()) { match ((ctx.checked)(), (ctx.user)()) {
(true, Some(_)) => { (true, Some(_)) => {
rsx! { rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]", div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]",
Header { nav_items: admin_nav_items, right_content: logout_button } Header { nav_items: admin_nav_items, right_content: right_content }
main { class: "flex-1 w-full max-w-5xl mx-auto px-6 py-8", main { class: "flex-1 w-full max-w-5xl mx-auto px-6 py-8",
Outlet::<Route> {} Outlet::<Route> {}
} }
@ -96,7 +100,7 @@ pub fn AdminLayout() -> Element {
// 使用与真实布局完全相同的结构包裹内容骨架，避免 checked 变化时的布局闪烁 // 使用与真实布局完全相同的结构包裹内容骨架，避免 checked 变化时的布局闪烁
rsx! { rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]", div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]",
Header { nav_items: admin_nav_items, right_content: logout_button } Header { nav_items: admin_nav_items, right_content: right_content }
main { class: "flex-1 w-full max-w-5xl mx-auto px-6 py-8", main { class: "flex-1 w-full max-w-5xl mx-auto px-6 py-8",
div { class: if show_skeleton() { "" } else { "opacity-0" }, div { class: if show_skeleton() { "" } else { "opacity-0" },
{match route { {match route {