diff --git a/src/components/ui.rs b/src/components/ui.rs index 04ac33b..b43ca5d 100644 --- a/src/components/ui.rs +++ b/src/components/ui.rs @@ -274,46 +274,3 @@ pub fn FilterTabs( } } } - -/// 页面级导航 Tab 组件。 -/// -/// 与 [`FilterTabs`] 的区别: -/// - [`FilterTabs`]:**列表筛选**语义,带平滑滑动底部指示条动画(靠 WASM 端测量 -/// `offsetLeft/offsetWidth`)。适合「全部 / 待审核 / 已通过」这类同质数据过滤。 -/// - `Tabs`:**页面导航**语义,选中态用按钮自身 `border-b-2` 下划线(无动画)。 -/// 适合「数据库状态 / 服务器状态 / SQL 控制台」这类切换到结构完全不同的面板。 -/// -/// 因 Dioxus 0.7 `#[component]` 宏不支持泛型类型参数,value 用 `String`(与 -/// `FilterTabs` 一致);调用方负责枚举 ↔ String 的桥接(见 `SystemTab::as_str`)。 -/// -/// Props: -/// - `items`:`(value, label)` 列表,`value` 是稳定字符串 key,`label` 是展示文案 -/// - `active_value`:当前选中项的 value -/// - `on_change`:切换时回调,传入新选中项的 value -#[component] -pub fn Tabs( - items: Vec<(&'static str, &'static str)>, - active_value: String, - on_change: EventHandler, -) -> Element { - rsx! { - div { class: "flex flex-wrap gap-1 border-b border-paper-border", - for (value, label) in items { - button { - key: "{value}", - class: "px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", - class: if active_value == *value { - "border-paper-accent text-paper-accent" - } else { - "border-transparent text-paper-secondary hover:text-paper-primary" - }, - onclick: { - let v = value.to_string(); - move |_| on_change.call(v.clone()) - }, - {label} - } - } - } - } -} diff --git a/src/pages/admin/system.rs b/src/pages/admin/system.rs index f16b8c1..4cd5f1f 100644 --- a/src/pages/admin/system.rs +++ b/src/pages/admin/system.rs @@ -5,7 +5,7 @@ use dioxus::prelude::*; -use crate::components::ui::Tabs; +use crate::components::ui::FilterTabs; /// 系统管理的 5 个功能 tab。 #[derive(Clone, Copy, PartialEq, Debug)] @@ -23,7 +23,7 @@ enum SystemTab { } impl SystemTab { - /// 变体 → 稳定字符串 key(用于与基于 String 的 `Tabs` 组件桥接)。 + /// 变体 → 稳定字符串 key(用于与基于 String 的 `FilterTabs` 组件桥接)。 /// 改这些 key 会破坏潜在的持久化/调试场景,见 `from_str` 的反向映射。 fn as_str(&self) -> &'static str { match self { @@ -60,8 +60,9 @@ pub fn System() -> Element { div { class: "space-y-6", h1 { class: "text-2xl font-bold text-paper-primary", "系统管理" } - // 顶部 tab 切换栏:用公共 Tabs 组件(String API,经 as_str/from_str 桥接枚举)。 - Tabs { + // 顶部 tab 切换栏:复用公共 FilterTabs 组件(String API,经 as_str/from_str 桥接枚举)。 + // 视觉与评论页一致:平滑滑动指示条 + 选中文字 text-paper-primary。 + FilterTabs { items: vec![ ("db_status", "数据库状态"), ("server_status", "服务器状态"),