refactor(mcp): 统一输入框为 FormInput 组件

- FormInput 的 disabled/onkeydown 加 #[props(default)],简化简单场景调用
- /admin/mcp 两处裸 input(名称、令牌明文)迁移到 FormInput
- 移除 mcp.rs 对 INPUT_CLASS 常量的直接依赖
This commit is contained in:
xfy 2026-07-28 17:08:16 +08:00
parent a24107ab33
commit 1cb92a8046
2 changed files with 10 additions and 10 deletions

View File

@ -314,7 +314,7 @@ pub fn FormSelect<T: Clone + PartialEq + 'static>(
/// - `r#type`input 类型(如 `"text"`、`"email"`、`"password"` /// - `r#type`input 类型(如 `"text"`、`"email"`、`"password"`
/// - `placeholder`:占位提示文本 /// - `placeholder`:占位提示文本
/// - `value`:当前值 /// - `value`:当前值
/// - `disabled`:是否禁用 /// - `disabled`:是否禁用(可选,缺省 `false`
/// - `oninput`:输入事件回调,返回新的字符串值 /// - `oninput`:输入事件回调,返回新的字符串值
/// - `onkeydown`:可选的键盘事件回调 /// - `onkeydown`:可选的键盘事件回调
#[component] #[component]
@ -323,8 +323,10 @@ pub fn FormInput(
r#type: &'static str, r#type: &'static str,
placeholder: &'static str, placeholder: &'static str,
value: String, value: String,
#[props(default)]
disabled: bool, disabled: bool,
oninput: EventHandler<String>, oninput: EventHandler<String>,
#[props(default)]
onkeydown: Option<EventHandler<KeyboardEvent>>, onkeydown: Option<EventHandler<KeyboardEvent>>,
) -> Element { ) -> Element {
let disabled_class = if disabled { let disabled_class = if disabled {

View File

@ -21,7 +21,7 @@ use crate::api::mcp_tokens::{
McpClientConfigs, McpConfigSnippet, TokenLifetime, McpClientConfigs, McpConfigSnippet, TokenLifetime,
}; };
#[cfg(target_arch = "wasm32")] #[cfg(target_arch = "wasm32")]
use crate::components::forms::{FormSelect, INPUT_CLASS}; use crate::components::forms::{FormInput, FormSelect};
#[cfg(target_arch = "wasm32")] #[cfg(target_arch = "wasm32")]
use crate::components::skeletons::atoms::SkeletonBox; use crate::components::skeletons::atoms::SkeletonBox;
#[cfg(target_arch = "wasm32")] #[cfg(target_arch = "wasm32")]
@ -427,12 +427,11 @@ fn CreateTokenCard() -> Element {
// 名称 // 名称
div { class: "flex flex-col gap-2", div { class: "flex flex-col gap-2",
label { class: "text-sm font-medium text-[var(--color-paper-secondary)]", "名称" } label { class: "text-sm font-medium text-[var(--color-paper-secondary)]", "名称" }
input { FormInput {
class: "{INPUT_CLASS}",
r#type: "text", r#type: "text",
placeholder: "如 claude-code-macbook", placeholder: "如 claude-code-macbook",
value: "{name()}", value: name(),
oninput: move |e| name.set(e.value()), oninput: move |v: String| name.set(v),
} }
} }
// 作用域 // 作用域
@ -542,12 +541,11 @@ fn ConfigCard() -> Element {
div { class: "flex flex-col gap-2", div { class: "flex flex-col gap-2",
label { class: "text-sm font-medium text-[var(--color-paper-secondary)]", "令牌明文" } label { class: "text-sm font-medium text-[var(--color-paper-secondary)]", "令牌明文" }
input { FormInput {
class: "{INPUT_CLASS}",
r#type: "text", r#type: "text",
placeholder: "ygg_...", placeholder: "ygg_...",
value: "{manual_token()}", value: manual_token(),
oninput: move |e| on_manual_input(e.value()), oninput: move |v: String| on_manual_input(v),
} }
} }