Skip to content

feat(console): 复制反馈改为 toast 提示#10

Merged
GoJam11 merged 1 commit into
mainfrom
feat/copy-toast-feedback
Jul 13, 2026
Merged

feat(console): 复制反馈改为 toast 提示#10
GoJam11 merged 1 commit into
mainfrom
feat/copy-toast-feedback

Conversation

@GoJam11

@GoJam11 GoJam11 commented Jul 13, 2026

Copy link
Copy Markdown
Owner

背景

复制 API key 后,控制台原先以内嵌的 <Alert> 提示条反馈——它挤占页面布局、把内容顶下去,而且作为静态块停留较久,体验不合理。此外「请求详情 JSON 复制」「渠道导出配置复制」两处复制完全没有任何反馈。

改动

  • 新增自包含 toast 组件 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
  • keys-page:移除内嵌 Alert 反馈条,复制成功 → toast.success,失败 → toast.error;其余成功提示(重命名、模型、额度)也统一走 toast。
  • detail-view / providers-page:原本静默的复制现在给出成功/失败 toast。
  • i18n:新增 common.copied / common.copyFailed 中英文案。

验证

  • tsc --noEmit 通过;pre-commit vite build 通过。
  • 本地起 dashboard + gateway,触发三种样式:右下角正确渲染(teal ✓ / red ✕ / info),带关闭按钮,无 console 报错。

备注

api-docs-page.tsx 的代码块复制按钮已用内嵌图标反馈(Copy→Check),在该场景下是合适的模式,故保持不变。

🤖 Generated with Claude Code

原先复制 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>
@GoJam11
GoJam11 merged commit 19ef840 into main Jul 13, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant