xfy
81a4196e43
新增系统管理入口页（数据库状态/服务器状态/SQL 控制台/导出/备份恢复）， 顶部 tab 切换（用 use_signal 不深链）。路由注册 + 导航加「系统」项。 tab 内容待后续 task 填充。
72 lines
2.8 KiB
Rust
72 lines
2.8 KiB
Rust
//! 后台系统管理页面（数据库 + 服务器状态 + 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 { "备份恢复（待实现）" } },
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|