feat(console): 复制反馈改为 toast 提示#10
Merged
Merged
Conversation
原先复制 API key 后以内嵌 Alert 提示条反馈,会挤占页面布局且停留过久, 体验不合理。另有请求详情、渠道导出配置两处复制完全没有反馈。 - 新增自包含 toast 组件(外部 store + portal,无新增依赖), 支持 success/error/default 三种样式,右下角堆叠、自动消失、可手动关闭 - Toaster 全局挂载于 main.tsx - keys-page 移除内嵌 Alert 反馈条,复制成功/失败改用 toast - detail-view、providers-page 原本静默的复制现在也给出 toast 反馈 - 新增 common.copied / common.copyFailed 中英文案 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
复制 API key 后,控制台原先以内嵌的
<Alert>提示条反馈——它挤占页面布局、把内容顶下去,而且作为静态块停留较久,体验不合理。此外「请求详情 JSON 复制」「渠道导出配置复制」两处复制完全没有任何反馈。改动
console/ai-proxy-dashboard/src/components/ui/toast.tsx@radix-ui/react-toast,采用「外部 store(useSyncExternalStore)+createPortal」自实现,不新增任何依赖,样式沿用 shadcn/主题 token。toast()/toast.success()/toast.error(),右下角堆叠、3s 自动消失、可手动关闭、带滑入动画,明暗主题自适应。<Toaster />于main.tsx。toast.success,失败 →toast.error;其余成功提示(重命名、模型、额度)也统一走 toast。common.copied/common.copyFailed中英文案。验证
tsc --noEmit通过;pre-commitvite build通过。备注
api-docs-page.tsx的代码块复制按钮已用内嵌图标反馈(Copy→Check),在该场景下是合适的模式,故保持不变。🤖 Generated with Claude Code