Compare commits
3 Commits
5426458f4a
...
23b0256e47
| Author | SHA1 | Date | |
|---|---|---|---|
| 23b0256e47 | |||
| 90734446b5 | |||
| 26d37f7271 |
@ -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<String>,
|
|
||||||
) -> 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}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
use crate::components::ui::Tabs;
|
use crate::components::ui::FilterTabs;
|
||||||
|
|
||||||
/// 系统管理的 5 个功能 tab。
|
/// 系统管理的 5 个功能 tab。
|
||||||
#[derive(Clone, Copy, PartialEq, Debug)]
|
#[derive(Clone, Copy, PartialEq, Debug)]
|
||||||
@ -23,7 +23,7 @@ enum SystemTab {
|
|||||||
}
|
}
|
||||||
|
|
||||||
impl SystemTab {
|
impl SystemTab {
|
||||||
/// 变体 → 稳定字符串 key(用于与基于 String 的 `Tabs` 组件桥接)。
|
/// 变体 → 稳定字符串 key(用于与基于 String 的 `FilterTabs` 组件桥接)。
|
||||||
/// 改这些 key 会破坏潜在的持久化/调试场景,见 `from_str` 的反向映射。
|
/// 改这些 key 会破坏潜在的持久化/调试场景,见 `from_str` 的反向映射。
|
||||||
fn as_str(&self) -> &'static str {
|
fn as_str(&self) -> &'static str {
|
||||||
match self {
|
match self {
|
||||||
@ -60,8 +60,9 @@ pub fn System() -> Element {
|
|||||||
div { class: "space-y-6",
|
div { class: "space-y-6",
|
||||||
h1 { class: "text-2xl font-bold text-paper-primary", "系统管理" }
|
h1 { class: "text-2xl font-bold text-paper-primary", "系统管理" }
|
||||||
|
|
||||||
// 顶部 tab 切换栏:用公共 Tabs 组件(String API,经 as_str/from_str 桥接枚举)。
|
// 顶部 tab 切换栏:复用公共 FilterTabs 组件(String API,经 as_str/from_str 桥接枚举)。
|
||||||
Tabs {
|
// 视觉与评论页一致:平滑滑动指示条 + 选中文字 text-paper-primary。
|
||||||
|
FilterTabs {
|
||||||
items: vec![
|
items: vec![
|
||||||
("db_status", "数据库状态"),
|
("db_status", "数据库状态"),
|
||||||
("server_status", "服务器状态"),
|
("server_status", "服务器状态"),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user