Skip to content

feat(ui): first-login onboarding tour — 4-step spotlight highlight, skip/prev/next/finish, replay from settings (v1.20 A) - #63

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

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

Conversation

@argszero

Copy link
Copy Markdown
Owner

Summary

UI/UE 5th-round deepening — item A: first-login onboarding tour (rant 2026-08-17T20:46:57, v1.20).

On first login (no localStorage atp-tour-done), a lightweight 4-step tour guides the new user, spotlight-highlighting each area in order:

  1. 仪表盘 (#dash-stats) — balance / trends
  2. 模型市场 (#view-marketplace) — browse / use models
  3. 共享管理 (#view-sharing) — list idle keys to earn points
  4. 钱包 / 设置 (#endpoint-card) — top-up, API Key, endpoint Base URLs

Implementation — non-modal floating layer:

  • #tour-overlay: semi-dim backdrop (click = close)
  • #tour-ring: accent outline highlight ring positioned via getBoundingClientRect, tour-pulse breathing animation (static under prefers-reduced-motion)
  • #tour-pop: tooltip card — top-right 「跳过」, bottom 「上一步 / 下一步 / 完成」(becomes 完成 on last step), step counter n / 4 (data-tour-action delegation)
  • Steps auto-switch views (switchView(view, {sync:false}) — no history pollution); popup clamped to viewport
  • Esc / outside click / skip / finish all close, and closing writes atp-tour-done=1 (never shown again)
  • Settings page gets a 「重新查看引导」 replay button (#tour-replay-btnstartTour())

Esc priority: tour open → Esc closes tour first (before help panel / inline forms).

Docs: docs/user-stories.md v1.20 + ui/README.md「首次引导 tour 约定」. Verified by DOM-stub smoke test (27 assertions: trigger on first login, step content/counter, view auto-switch, ring positioning, finish→done, no re-trigger, skip/outside/Esc close + mark, prev boundary, replay button, CSS incl. reduced-motion), cargo test, cargo fmt --check.

Rant (verbatim)

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

A. 新用户首次引导(onboarding tour)

  • 首次登录(localStorage 标记 atp_tour_done,无则触发)显示轻量引导浮层:4-5 步依次高亮
    ① 仪表盘(看余额/趋势)→ ② 模型市场(浏览/使用模型)→ ③ 共享管理(上架 key 赚点数)→ ④ 钱包/设置(充值、API Key、接入端点)
  • 实现:非 modal 浮层 + 目标元素 accent 描边高亮(outline 动画),右上角「跳过」、底部「上一步/下一步/完成」
  • Esc 或点浮层外可关闭;关闭后标记 done,不再出现(设置页可加「重新查看引导」入口)

Related

  • Rant timestamp: 2026-08-17T20:46:57.465428 (project aitokenpool, status in_progress; items B–G to follow)
  • Branch: feat/ui-ue-round5-onboarding (per rant: 分支 feat/ui-ue-round5)

Tests

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

…kip/prev/next/finish, replay from settings (v1.20 A)
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