feat(admin): add /admin/system route shell with 5 tabs

新增系统管理入口页(数据库状态/服务器状态/SQL 控制台/导出/备份恢复),
顶部 tab 切换(用 use_signal 不深链)。路由注册 + 导航加「系统」项。
tab 内容待后续 task 填充。
This commit is contained in:
xfy 2026-06-29 18:26:24 +08:00
parent c74e59485d
commit 81a4196e43
4 changed files with 85 additions and 1 deletions

View File

@ -72,6 +72,11 @@ pub fn AdminLayout() -> Element {
label: "回收站",
is_active: matches!(route, Route::Trash {}) || matches!(route, Route::TrashPage { .. }),
},
NavItemConfig {
route: Route::System {},
label: "系统",
is_active: matches!(route, Route::System {}),
},
];
// 右侧操作区:主题切换 + 登出按钮

View File

@ -8,6 +8,8 @@ pub mod comments;
pub mod dashboard;
/// 文章管理列表页面模块。
pub mod posts;
/// 系统管理页面模块(数据库 + 服务器状态 + SQL 控制台 + 导出 + 备份)。
pub mod system;
/// 回收站管理页面模块。
pub mod trash;
/// 文章编辑器页面模块(基于 Tiptap 富文本编辑器)。
@ -19,6 +21,8 @@ pub use comments::{AdminComments, AdminCommentsPage};
pub use dashboard::Admin;
/// 文章管理列表组件(带默认分页)。
pub use posts::{Posts, PostsPage};
/// 系统管理入口组件。
pub use system::System;
/// 回收站管理组件(带默认分页)。
pub use trash::{Trash, TrashPage};
/// 文章编辑器组件(新建与编辑模式)。

71
src/pages/admin/system.rs Normal file
View File

@ -0,0 +1,71 @@
//! 后台系统管理页面(数据库 + 服务器状态 + SQL 控制台 + 导出 + 备份)。
//!
//! 用顶部 tab 切换 5 个功能tab 状态用 `use_signal`(不深链 / 不走分页路由)。
//! 各 tab 的实际内容由后续 task 填充,本文件先搭好骨架与 tab 切换。
use dioxus::prelude::*;
/// 系统管理的 5 个功能 tab。
#[derive(Clone, Copy, PartialEq, Debug)]
enum SystemTab {
/// 数据库运行状态(表/连接/死元组/迁移版本)。
DbStatus,
/// 服务器状态(应用内 + 主机层 CPU/内存/磁盘)。
ServerStatus,
/// SQL 控制台(全读写 + 护栏)。
SqlConsole,
/// 数据导出SQL/CSV 流式下载)。
Export,
/// 备份恢复pg_dump + 任务进度)。
Backup,
}
/// 系统管理入口组件。
#[component]
pub fn System() -> Element {
// tab 状态:默认进第一个 tab数据库状态。用 signal 而非 URL query——
// tab 切换无需深链/书签,避免新增路由变体。
let mut active_tab = use_signal(|| SystemTab::DbStatus);
let tabs = [
("数据库状态", SystemTab::DbStatus),
("服务器状态", SystemTab::ServerStatus),
("SQL 控制台", SystemTab::SqlConsole),
("数据导出", SystemTab::Export),
("备份恢复", SystemTab::Backup),
];
rsx! {
div { class: "space-y-6",
h1 { class: "text-2xl font-bold text-paper-primary", "系统管理" }
// 顶部 tab 切换栏
div { class: "flex flex-wrap gap-1 border-b border-paper-border",
for (label, tab) in tabs {
button {
key: "{tab:?}",
class: "px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
class: if active_tab() == tab {
"border-paper-accent text-paper-accent"
} else {
"border-transparent text-paper-secondary hover:text-paper-primary"
},
onclick: move |_| active_tab.set(tab),
{label}
}
}
}
// tab 内容(后续 task 填充)
div {
match active_tab() {
SystemTab::DbStatus => rsx! { div { "数据库状态(待实现)" } },
SystemTab::ServerStatus => rsx! { div { "服务器状态(待实现)" } },
SystemTab::SqlConsole => rsx! { div { "SQL 控制台(待实现)" } },
SystemTab::Export => rsx! { div { "数据导出(待实现)" } },
SystemTab::Backup => rsx! { div { "备份恢复(待实现)" } },
}
}
}
}
}

View File

@ -12,7 +12,8 @@ use crate::components::frontend_layout::FrontendLayout;
use crate::context::UserContext;
use crate::pages::about::About;
use crate::pages::admin::{
Admin, AdminComments, AdminCommentsPage, Posts, PostsPage, Trash, TrashPage, Write, WriteEdit,
Admin, AdminComments, AdminCommentsPage, Posts, PostsPage, System, Trash, TrashPage, Write,
WriteEdit,
};
use crate::pages::archives::Archives;
use crate::pages::home::{Home, HomePage};
@ -90,6 +91,9 @@ pub enum Route {
/// 回收站分页
#[route("/trash/:page")]
TrashPage { page: i32 },
/// 系统管理(数据库 + 服务器状态 + SQL 控制台 + 导出 + 备份)
#[route("/system")]
System {},
#[end_layout]
#[end_nest]