fix(mcp): 复制按钮添加就地反馈
Toast 渲染在页面顶部,配置区在页面最末,点击复制时 Toast 落在视口外看不到。 为每个 ConfigSnippet 复制按钮加本地 copied 信号:点击后按钮就地短暂变绿 提示「已复制」1.5s(经 sleep_ms),不依赖滚动位置。
This commit is contained in:
parent
1b772f4534
commit
070d06dacd
@ -522,22 +522,37 @@ fn ConfigCard() -> Element {
|
|||||||
fn ConfigSnippet(snippet: McpConfigSnippet) -> Element {
|
fn ConfigSnippet(snippet: McpConfigSnippet) -> Element {
|
||||||
let state: McpPageState = use_context();
|
let state: McpPageState = use_context();
|
||||||
let mut toast = state.toast;
|
let mut toast = state.toast;
|
||||||
|
let mut copied = use_signal(|| false);
|
||||||
let title = snippet.title.clone();
|
let title = snippet.title.clone();
|
||||||
|
// 反馈就在按钮本身:Toast 渲染在页面顶部(见 Mcp 组件树),配置区在页面最末,
|
||||||
|
// 点击「复制」时 Toast 落在视口之外,用户看不到。故按钮就地短暂变绿提示「已复制」。
|
||||||
|
let copied_now = copied();
|
||||||
|
let btn_class = if copied_now {
|
||||||
|
"inline-flex items-center justify-center px-4 py-1.5 text-sm font-medium \
|
||||||
|
text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-900/30 \
|
||||||
|
rounded-full transition-all cursor-default"
|
||||||
|
} else {
|
||||||
|
BTN_PRIMARY_SM
|
||||||
|
};
|
||||||
|
let btn_label = if copied_now { "已复制" } else { "复制" };
|
||||||
rsx! {
|
rsx! {
|
||||||
div { class: "flex flex-col gap-2",
|
div { class: "flex flex-col gap-2",
|
||||||
div { class: "flex items-center justify-between",
|
div { class: "flex items-center justify-between",
|
||||||
span { class: "text-sm font-medium text-[var(--color-paper-primary)]", "{snippet.title}" }
|
span { class: "text-sm font-medium text-[var(--color-paper-primary)]", "{snippet.title}" }
|
||||||
button {
|
button {
|
||||||
class: "{BTN_PRIMARY_SM}",
|
class: "{btn_class}",
|
||||||
onclick: move |_| {
|
onclick: move |_| {
|
||||||
let cc = snippet.content.clone();
|
let cc = snippet.content.clone();
|
||||||
let tt = title.clone();
|
let tt = title.clone();
|
||||||
|
copied.set(true);
|
||||||
spawn(async move {
|
spawn(async move {
|
||||||
copy_clipboard_wasm(&cc).await;
|
copy_clipboard_wasm(&cc).await;
|
||||||
toast.set(Some((format!("已复制:{tt}"), false)));
|
toast.set(Some((format!("已复制:{tt}"), false)));
|
||||||
|
crate::utils::time::sleep_ms(1500).await;
|
||||||
|
copied.set(false);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
"复制"
|
"{btn_label}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .md-content 是 highlight.css 的作用域钩子(.md-content pre code …);
|
// .md-content 是 highlight.css 的作用域钩子(.md-content pre code …);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user