Skip to content

feat(ui): interactive copy-toast with endpoint CTA — jump to settings, flash endpoint card (v1.20 B) - #65

Merged
argszero merged 1 commit into
mainfrom
feat/ui-ue-round5-copy-next
Aug 17, 2026
Merged

argszero merged 1 commit into
mainfrom
feat/ui-ue-round5-copy-next

Conversation

@argszero

Copy link
Copy Markdown
Owner

Summary

UI/UE 5th-round deepening — item B: copy-key next-step guidance (rant 2026-08-17T20:46:57, v1.20).

After copying an API Key successfully, the toast becomes interactive — text + an embedded 「配置接入端点 →」 button:

  • toast(msg, type, opts) extended with opts.action = { label, onClick }:
    • Renders an inline .toast-action button (accent pill, hover inverse)
    • Extends display time from 2.6s to 6s (TOAST_ACTION_MS) so users have time to click
    • No-action toasts keep the textContent path — zero regression (39 existing call sites untouched)
  • copyKey success path (both clipboard API and execCommand fallback) shows the CTA
  • Clicking it calls gotoEndpointCard(): switchView("settings") (idempotent — already on settings just stays) → #endpoint-card gets .ep-flash (accent ring pulse 0.8s ×2, replayed via remove→reflow→add) → scrollIntoView({behavior:"smooth", block:"center"})
  • Forms the complete "copy key → configure endpoint" loop with the 20:44:18 endpoints card

Docs: docs/user-stories.md v1.20 + ui/README.md「可交互 toast / 复制后引导约定」. Verified by DOM-stub smoke test (15 assertions: CTA button on copy success, success grading kept, onClick bound → view switch + flash + scroll, idempotent re-copy on settings, longer display-time constant, plain toast regression, CSS), cargo test, cargo fmt --check.

Rant (verbatim)

Rant: UI/UE 第五轮多角度深化 — 首次引导、复制后续引导、密度切换、最近使用、CSV 导出、表格键盘导航、品牌氛围(宿主 2026-08-17 第五轮指示:继续从多角度美化 UI、优化 UE)

B. 复制 Key 后的下一步引导

  • 复制 API Key 成功后,toast 变为可交互:文案 + 「配置接入端点 →」按钮;点击切到设置页并滚动到接入端点卡片、高亮闪烁
  • 已在设置页时直接高亮端点卡片;简单实现:toast 内嵌按钮,点击调 switchView('settings') + 卡片闪一下

Related

Tests

  • DOM-stub smoke test — 15/15 assertions pass
  • node --check ui/js/app.js
  • cargo test — 1 passed
  • cargo fmt --check

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