Skip to content

feat(translate): 单词交互 — hover IPA + click WordCard (PR2/4)#57

Open
bob798 wants to merge 1 commit into
mainfrom
feat/translate-deepl-pr2
Open

feat(translate): 单词交互 — hover IPA + click WordCard (PR2/4)#57
bob798 wants to merge 1 commit into
mainfrom
feat/translate-deepl-pr2

Conversation

@bob798
Copy link
Copy Markdown
Owner

@bob798 bob798 commented May 21, 2026

Summary

  • TranslateResult 接入 tokenize() 分词渲染,译文中每个英文单词/CJK字符可交互
  • Hover 100ms → IPA 浮层(sticky,移到浮层不消失)
  • Click/Enter/Space → 展开 WordCard(调 /articles/explain,显示释义+例句)
  • Event delegation 模式(父容器单 listener,data-token-idx 路由)
  • ipaCache + explainCache 会话级缓存,避免重复请求
  • a11y: interactive tokens 为 role=button tabindex=0focus-visible 高亮,Esc 关闭
  • 触屏设备 @media (hover:none) 禁用 hover 高亮
  • 修复 usePractice.spec.js 路径从 /bbc-eaw/episodes/articles/episodes

Refs #43

Test plan

  • 前端构建成功(375 KiB gzip)
  • 73 个前端测试全部通过
  • 手动验证:输入中文 → 翻译 → hover 英文单词 → IPA 浮层
  • 手动验证:click 单词 → WordCard 展开 → 释义+例句
  • 手动验证:Tab 导航 → Enter 打开 → Esc 关闭
  • 手动验证:移动端 tap 触发 click(无 hover)

🤖 Generated with Claude Code

- TranslateResult 接入 tokenize 分词渲染(event delegation)
- Hover 100ms → IPA 浮层(sticky,pointer-events:auto)
- Click/Enter/Space → 展开 WordCard(调 /articles/explain)
- ipaCache + explainCache 会话级缓存
- a11y: interactive tokens 有 tabindex+role=button,focus-visible 高亮
- 触屏设备禁用 hover(@media hover:none)
- 修复 usePractice 前端测试 bbc-eaw → articles/episodes 路径

Refs #43

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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