Skip to content

feat(translate): DeepL 风重设计 — 三栏布局/分词词卡/FSRS 侧栏/移动端#55

Merged
bob798 merged 5 commits into
mainfrom
feat/translate-deepl-pr1
May 21, 2026
Merged

feat(translate): DeepL 风重设计 — 三栏布局/分词词卡/FSRS 侧栏/移动端#55
bob798 merged 5 commits into
mainfrom
feat/translate-deepl-pr1

Conversation

@bob798

@bob798 bob798 commented May 21, 2026

Copy link
Copy Markdown
Owner

Summary

翻译页 V0.11 完整重设计,包含原计划 4 个 PR 的全部内容:

PR1 · 结构 + 翻译主流程

  • 拆分为 TopBar / TranslateInput / TranslateResult / TranslateSidebar 四个子组件
  • 三栏 CSS grid 布局(左输入 / 右译文 / 右 sidebar),sidebar 可折叠
  • 800ms debounce 自动翻译 + 100 条 LRU 前端缓存 + requestId stale 防御
  • swap 只切方向不动文本(修复原 bug),标记 stale

PR2 · 单词交互

  • tokenize() 按 Unicode script 分词(CJK 逐字,英文按词)
  • hover 100ms → /articles/explain/phonetic IPA 浮层(sticky 区)
  • click/Enter/Space → /articles/explain 完整词卡
  • session 级双缓存(ipaCache + explainCache)

PR3 · Sidebar FSRS + 收藏闭环

  • GET /vocab?limit=500 + source_type=translate 本地过滤
  • item_type chip 过滤(全部/单词/句子)
  • 4 档评分 → POST /vocab/{id}/rate
  • due 倒计时

PR4 · 移动端

  • <1024px 时 sidebar → FAB + bottom-sheet
  • Teleport 弹层 + 滑入动画 + safe-area

Test plan

  • npm run build 构建通过(全部 4 个阶段)
  • 桌面端: 输入 → 800ms 自动翻译 → hover 词看 IPA → click 看词卡
  • 桌面端: sidebar 显示生词本 + 4 档评分
  • 移动端: FAB 打开 bottom-sheet
  • swap 只切方向不动文本

🤖 Generated with Claude Code

bob798 and others added 4 commits May 21, 2026 23:07
翻译页 V0.11 重设计第一阶段:
- 拆分为 4 个子组件 (TopBar/TranslateInput/TranslateResult/TranslateSidebar)
- 三栏 CSS grid 布局 (1fr 1fr 320px),sidebar 可折叠
- 800ms debounce 自动翻译 + 100 条 LRU 前端缓存
- requestId + AbortController stale response 防御
- swap 只切方向不动文本,标记 stale
- CJK 比例 ≥30% 自动检测方向,手动 swap 后 5s 内不重判
- Cmd/Ctrl+Enter 手动触发
- 响应式:1024px 双栏、768px 单栏

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- vocabulary.source_type: bbc_eaw → article + 新增 series 字段(bbc_eaw/voa/...)
- bbc_eaw_episodes 表重命名为 article_episodes + 新增 series 列
- /bbc-eaw/* 路由迁移到 /articles/episodes/*
- 新增迁移脚本 scripts/migrate_article_refactor.py
- 前端 tag chip 由 series 字段派生,去除 source_type 硬编码 mapping
- 保留 BbcEawEpisode 别名确保向后兼容
- 跳过 /practice/* alias 移除(距 V0.8 上线不足 14 天)
- fix(model_client): 添加 from __future__ import annotations 修复 Python 3.9 兼容性

Refs #42

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
DeepL 重设计第三阶段:
- GET /vocab?limit=500 加载 + source_type=translate 本地过滤
- item_type chip 过滤(全部/单词/句子)
- 4 档评分(again/hard/good/easy)→ POST /vocab/{id}/rate
- due 倒计时(分钟/小时/天)
- 评分后用返回 item 原地替换条目

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

# Conflicts:
#	frontend/src/components/translate/TranslateSidebar.vue
DeepL 重设计第四阶段:
- <1024px 时 sidebar 隐藏,显示右下角 FAB 按钮
- FAB 点击打开 bottom-sheet(Teleport + overlay)
- sheet 含 grip handle + 关闭按钮 + TranslateSidebar
- sheet 动画(translateY 滑入/滑出)
- safe-area 处理(safe-bottom padding)
- resize 事件动态切换 mobile/desktop 模式

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@bob798 bob798 changed the title feat(translate): DeepL 风三栏布局 + debounce + stale 防御 (PR1/4) feat(translate): DeepL 风重设计 — 三栏布局/分词词卡/FSRS 侧栏/移动端 May 21, 2026
# Conflicts:
#	frontend/src/views/Translate.vue
@bob798 bob798 merged commit 9656fe9 into main May 21, 2026
2 checks passed
@bob798 bob798 deleted the feat/translate-deepl-pr1 branch May 21, 2026 15:26
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