fix(mcp): 复制按钮添加就地反馈

Toast 渲染在页面顶部,配置区在页面最末,点击复制时 Toast 落在视口外看不到。
为每个 ConfigSnippet 复制按钮加本地 copied 信号:点击后按钮就地短暂变绿
提示「已复制」1.5s(经 sleep_ms),不依赖滚动位置。
This commit is contained in:
xfy 2026-07-28 16:05:09 +08:00
parent 1b772f4534
commit 070d06dacd

View File

@ -522,22 +522,37 @@ fn ConfigCard() -> Element {
fn ConfigSnippet(snippet: McpConfigSnippet) -> Element {
let state: McpPageState = use_context();
let mut toast = state.toast;
let mut copied = use_signal(|| false);
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! {
div { class: "flex flex-col gap-2",
div { class: "flex items-center justify-between",
span { class: "text-sm font-medium text-[var(--color-paper-primary)]", "{snippet.title}" }
button {
class: "{BTN_PRIMARY_SM}",
class: "{btn_class}",
onclick: move |_| {
let cc = snippet.content.clone();
let tt = title.clone();
copied.set(true);
spawn(async move {
copy_clipboard_wasm(&cc).await;
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 …);