From f049cc7674d65ddfceb6c2a21f1e9c1f5a688a35 Mon Sep 17 00:00:00 2001
From: bob798 <xbb798@gmail.com>
Date: Thu, 21 May 2026 23:07:10 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(translate):=20DeepL=20=E9=A3=8E?=
 =?UTF-8?q?=E4=B8=89=E6=A0=8F=E5=B8=83=E5=B1=80=20+=20debounce=20+=20stale?=
 =?UTF-8?q?=20=E9=98=B2=E5=BE=A1=20(PR1/4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

翻译页 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>
---
 frontend/src/components/translate/TopBar.vue  | 144 ++++++
 .../components/translate/TranslateInput.vue   | 122 +++++
 .../components/translate/TranslateResult.vue  | 188 ++++++++
 .../components/translate/TranslateSidebar.vue |  66 +++
 frontend/src/views/Translate.vue              | 452 +++++++++++-------
 5 files changed, 806 insertions(+), 166 deletions(-)
 create mode 100644 frontend/src/components/translate/TopBar.vue
 create mode 100644 frontend/src/components/translate/TranslateInput.vue
 create mode 100644 frontend/src/components/translate/TranslateResult.vue
 create mode 100644 frontend/src/components/translate/TranslateSidebar.vue

diff --git a/frontend/src/components/translate/TopBar.vue b/frontend/src/components/translate/TopBar.vue
new file mode 100644
index 0000000..bb4cbe5
--- /dev/null
+++ b/frontend/src/components/translate/TopBar.vue
@@ -0,0 +1,144 @@
+<script setup>
+/**
+ * TopBar · 翻译页顶部栏
+ * - 返回链接 + 标题 + 方向切换标签 + swap 按钮 + sidebar 折叠按钮
+ */
+
+const props = defineProps({
+  direction: {
+    type: String,
+    required: true,
+  },
+  sidebarOpen: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['swap', 'toggle-sidebar'])
+</script>
+
+<template>
+  <header class="topbar">
+    <RouterLink class="back" to="/">← 返回</RouterLink>
+
+    <div class="center">
+      <span class="title">翻译</span>
+      <div class="direction-label">
+        <span :class="{ active: direction === 'zh2en' }">中文</span>
+        <button class="swap-btn" @click="emit('swap')" aria-label="切换翻译方向">⇄</button>
+        <span :class="{ active: direction === 'en2zh' }">English</span>
+      </div>
+    </div>
+
+    <button
+      class="sidebar-toggle"
+      :class="{ open: sidebarOpen }"
+      @click="emit('toggle-sidebar')"
+      :aria-label="sidebarOpen ? '折叠生词本' : '展开生词本'"
+      :title="sidebarOpen ? '折叠生词本' : '展开生词本'"
+    >
+      📖
+    </button>
+  </header>
+</template>
+
+<style scoped>
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  padding-top: calc(var(--safe-top) + var(--space-3));
+  background: var(--bg-overlay);
+  backdrop-filter: saturate(180%) blur(16px);
+  border-bottom: 1px solid var(--border);
+  gap: var(--space-3);
+}
+
+.back {
+  color: var(--text-2);
+  font-size: 14px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+}
+
+.title {
+  font-weight: 600;
+  color: var(--accent);
+  font-size: 15px;
+}
+
+.direction-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: 13px;
+  color: var(--text-3);
+}
+
+.direction-label span {
+  transition: color var(--duration) var(--ease);
+}
+
+.direction-label span.active {
+  color: var(--text-1);
+  font-weight: 500;
+}
+
+.swap-btn {
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  color: var(--text-2);
+  background: var(--bg-elevated);
+  transition: all var(--duration) var(--ease);
+  cursor: pointer;
+}
+
+.swap-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.swap-btn:active {
+  background: var(--accent-soft);
+  transform: scale(0.95);
+}
+
+.sidebar-toggle {
+  font-size: 18px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  color: var(--text-2);
+  background: transparent;
+  transition: all var(--duration) var(--ease);
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.sidebar-toggle.open {
+  opacity: 1;
+  background: var(--accent-soft);
+}
+
+.sidebar-toggle:hover {
+  opacity: 1;
+  background: var(--accent-soft);
+}
+
+@media (max-width: 1024px) {
+  .sidebar-toggle {
+    display: none;
+  }
+}
+</style>
diff --git a/frontend/src/components/translate/TranslateInput.vue b/frontend/src/components/translate/TranslateInput.vue
new file mode 100644
index 0000000..62d7ab8
--- /dev/null
+++ b/frontend/src/components/translate/TranslateInput.vue
@@ -0,0 +1,122 @@
+<script setup>
+/**
+ * TranslateInput · 左栏翻译输入区
+ * - textarea + 字符计数 + 方向标签 badge
+ */
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  direction: {
+    type: String,
+    required: true,
+  },
+  maxLen: {
+    type: Number,
+    default: 1000,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+function onInput(e) {
+  emit('update:modelValue', e.target.value)
+}
+</script>
+
+<template>
+  <div class="input-panel">
+    <div class="panel-header">
+      <span class="lang-badge">
+        {{ direction === 'zh2en' ? '中文' : 'English' }}
+      </span>
+    </div>
+
+    <textarea
+      :value="modelValue"
+      @input="onInput"
+      :placeholder="direction === 'zh2en' ? '输入中文…' : 'Enter English…'"
+      :maxlength="maxLen"
+      class="source-textarea"
+      aria-label="翻译输入框"
+    ></textarea>
+
+    <div class="footer">
+      <span class="counter" :class="{ warn: modelValue.length > maxLen * 0.9 }">
+        {{ modelValue.length }} / {{ maxLen }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.input-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  height: 100%;
+  min-height: 320px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.lang-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-2);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.source-textarea {
+  flex: 1;
+  width: 100%;
+  padding: var(--space-3);
+  border: none;
+  background: transparent;
+  font-size: 15px;
+  line-height: 1.7;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: var(--text-1);
+  min-height: 240px;
+}
+
+.source-textarea::placeholder {
+  color: var(--text-3);
+}
+
+.input-panel:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--space-2) var(--space-3);
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.counter {
+  font-size: 11px;
+  color: var(--text-3);
+}
+
+.counter.warn {
+  color: #e67e22;
+}
+</style>
diff --git a/frontend/src/components/translate/TranslateResult.vue b/frontend/src/components/translate/TranslateResult.vue
new file mode 100644
index 0000000..9bbbd03
--- /dev/null
+++ b/frontend/src/components/translate/TranslateResult.vue
@@ -0,0 +1,188 @@
+<script setup>
+/**
+ * TranslateResult · 右栏译文区
+ * - 译文展示 + loading 状态 + stale 提示 + toolbar placeholder + vocab 状态行
+ */
+
+defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  savedToVocab: {
+    type: Boolean,
+    default: false,
+  },
+  isAuthenticated: {
+    type: Boolean,
+    default: false,
+  },
+  stale: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+  direction: {
+    type: String,
+    default: 'zh2en',
+  },
+})
+</script>
+
+<template>
+  <div class="result-panel">
+    <div class="panel-header">
+      <span class="lang-badge">
+        {{ direction === 'zh2en' ? 'English' : '中文' }}
+      </span>
+      <!-- Toolbar placeholder: word interaction and TTS come in PR2/PR3 -->
+      <div class="toolbar-placeholder"></div>
+    </div>
+
+    <div class="result-body">
+      <!-- Loading state -->
+      <div v-if="loading" class="state-placeholder loading" aria-live="polite">
+        <span class="loading-dots">翻译中</span>
+      </div>
+
+      <!-- Error state -->
+      <div v-else-if="error" class="state-placeholder error">
+        {{ error }}
+      </div>
+
+      <!-- Stale indicator (direction was swapped) -->
+      <div v-else-if="stale && text" class="stale-banner" role="status">
+        已切换方向，结果仅供参考，请重新翻译
+      </div>
+
+      <!-- Result text -->
+      <div
+        v-if="text && !loading"
+        class="result-text"
+        :class="{ stale }"
+        aria-label="译文"
+      >{{ text }}</div>
+
+      <!-- Empty placeholder -->
+      <div v-if="!text && !loading && !error" class="state-placeholder empty">
+        译文会显示在这里
+      </div>
+    </div>
+
+    <!-- Footer: vocab status -->
+    <div v-if="text && !loading" class="footer">
+      <span v-if="savedToVocab" class="vocab-saved">⭐ 已自动加入生词本</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.result-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  height: 100%;
+  min-height: 320px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.lang-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-2);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.toolbar-placeholder {
+  height: 20px;
+}
+
+.result-body {
+  flex: 1;
+  padding: var(--space-3);
+  overflow-y: auto;
+  position: relative;
+}
+
+.result-text {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--text-1);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.result-text.stale {
+  opacity: 0.6;
+}
+
+.state-placeholder {
+  font-size: 14px;
+  color: var(--text-3);
+}
+
+.state-placeholder.empty {
+  font-style: italic;
+}
+
+.state-placeholder.loading {
+  font-style: italic;
+}
+
+.loading-dots::after {
+  content: '';
+  animation: dots 1.2s steps(3, end) infinite;
+}
+
+@keyframes dots {
+  0%   { content: ''; }
+  33%  { content: '.'; }
+  66%  { content: '..'; }
+  100% { content: '...'; }
+}
+
+.state-placeholder.error {
+  color: #c6463a;
+}
+
+.stale-banner {
+  font-size: 12px;
+  color: #e67e22;
+  background: color-mix(in srgb, #e67e22 10%, transparent);
+  border: 1px solid color-mix(in srgb, #e67e22 30%, transparent);
+  border-radius: var(--radius-sm);
+  padding: var(--space-1) var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.footer {
+  padding: var(--space-2) var(--space-3);
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+  min-height: 32px;
+}
+
+.vocab-saved {
+  font-size: 12px;
+  color: var(--accent);
+}
+</style>
diff --git a/frontend/src/components/translate/TranslateSidebar.vue b/frontend/src/components/translate/TranslateSidebar.vue
new file mode 100644
index 0000000..d87a9a5
--- /dev/null
+++ b/frontend/src/components/translate/TranslateSidebar.vue
@@ -0,0 +1,66 @@
+<script setup>
+/**
+ * TranslateSidebar · 右侧生词本侧边栏
+ * PR1 placeholder — 生词本 FSRS 功能在 PR3 中实现
+ */
+
+defineProps({
+  open: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<template>
+  <aside v-if="open" class="sidebar">
+    <div class="sidebar-header">
+      <span class="sidebar-title">📖 生词本</span>
+    </div>
+    <div class="sidebar-body">
+      <p class="placeholder-text">生词本功能将在后续版本中升级</p>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+  min-height: 320px;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.sidebar-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-1);
+}
+
+.sidebar-body {
+  flex: 1;
+  padding: var(--space-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-text {
+  font-size: 13px;
+  color: var(--text-3);
+  text-align: center;
+  line-height: 1.6;
+}
+</style>
diff --git a/frontend/src/views/Translate.vue b/frontend/src/views/Translate.vue
index 24e2d9f..a889312 100644
--- a/frontend/src/views/Translate.vue
+++ b/frontend/src/views/Translate.vue
@@ -1,67 +1,192 @@
 <script setup>
 /**
- * Translate · V0.9.4 重设计
+ * Translate · V0.11 DeepL 风格重设计 — PR1
  *
- * 修:
- *   - target_text → translated_text（字段名对齐后端 VocabularyCreate）
- *   - 移除内嵌生词本面板，生词本功能移至 /vocabulary 独立页
+ * PR1 覆盖：
+ *   - 三栏布局（左输入 / 右译文 / 右侧 sidebar）
+ *   - debounce 800ms + canonicalText + LRU cache + requestId stale 防御 + AbortController
+ *   - swap 改为纯方向切换，不动文本
+ *   - 方向自动检测（CJK 比例 ≥ 30% → zh2en）
+ *   - Cmd/Ctrl+Enter 手动触发翻译
+ *
+ * PR2 (TODO): 译文单词分词 + hover/click 词卡
+ * PR3 (TODO): sidebar 生词本接通 FSRS + 收藏闭环
+ * PR4 (TODO): 移动端 bottom-sheet
  */
-import { ref, computed } from 'vue'
+
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
 import { useAuthFetch, getErrorMessage } from '@/composables/useAuthFetch'
 import { API } from '@/config'
 
+import TopBar from '@/components/translate/TopBar.vue'
+import TranslateInput from '@/components/translate/TranslateInput.vue'
+import TranslateResult from '@/components/translate/TranslateResult.vue'
+import TranslateSidebar from '@/components/translate/TranslateSidebar.vue'
+
+const authStore = useAuthStore()
 const { authFetchJson } = useAuthFetch()
 
-// ═══ 翻译区 ═══
+// ═══ Layout state ═══
+const sidebarOpen = ref(true)
+
+// ═══ Translation state ═══
 const direction = ref('zh2en')
 const source = ref('')
 const translated = ref('')
 const translating = ref(false)
 const error = ref('')
+const savedToVocab = ref(false)
+/** stale=true when direction was swapped but source/translated not retranslated */
+const stale = ref(false)
 
 const MAX_LEN = 1000
 const canSubmit = computed(
   () => source.value.trim() && source.value.length <= MAX_LEN && !translating.value
 )
 
-async function onTranslate() {
-  if (!canSubmit.value) return
+// ═══ LRU cache (session-level, 100 entries) ═══
+const cache = new Map()
+const CACHE_MAX = 100
+
+// ═══ Debounce + concurrency control ═══
+let requestId = 0
+let abortCtrl = null
+let debounceTimer = null
+let lastCanonical = ''
+
+/**
+ * Detect language direction based on CJK character ratio.
+ * >= 30% CJK → zh2en (source is Chinese), else en2zh
+ * @param {string} text
+ * @returns {'zh2en' | 'en2zh'}
+ */
+function detectDirection(text) {
+  if (!text) return direction.value
+  const cjkCount = (text.match(/[\u4e00-\u9fff]/g) || []).length
+  return cjkCount / text.length >= 0.3 ? 'zh2en' : 'en2zh'
+}
+
+// Track last manual swap time to suppress auto-detect for 5 seconds
+let lastManualSwapAt = 0
+
+/**
+ * Core translate function with requestId stale defense.
+ * @param {string} canonicalText
+ * @param {string} dir
+ */
+function doTranslate(canonicalText, dir) {
+  const myId = ++requestId
+  abortCtrl?.abort()
+  abortCtrl = new AbortController()
+  const cacheKey = JSON.stringify([canonicalText, dir])
+
+  // Cache hit
+  if (cache.has(cacheKey)) {
+    if (myId === requestId) {
+      translated.value = cache.get(cacheKey)
+      savedToVocab.value = false
+      stale.value = false
+      error.value = ''
+    }
+    return
+  }
+
   translating.value = true
   error.value = ''
-  translated.value = ''
-  try {
-    const data = await authFetchJson(`${API.TRANSLATE}/text`, {
-      text: source.value,
-      direction: direction.value,
+
+  authFetchJson(
+    `${API.TRANSLATE}/text`,
+    { text: canonicalText, direction: dir },
+    { signal: abortCtrl.signal },
+  )
+    .then((data) => {
+      if (myId !== requestId) return
+      const result = data.translated_text || ''
+      cache.set(cacheKey, result)
+      if (cache.size > CACHE_MAX) {
+        cache.delete(cache.keys().next().value)
+      }
+      translated.value = result
+      savedToVocab.value = !!data.saved_to_vocab
+      stale.value = false
+    })
+    .catch((err) => {
+      if (err.name === 'AbortError' || myId !== requestId) return
+      error.value = getErrorMessage(err, '翻译失败')
+    })
+    .finally(() => {
+      if (myId === requestId) translating.value = false
     })
-    translated.value = data.translated_text || ''
-  } catch (err) {
-    error.value = getErrorMessage(err, '翻译失败')
-  } finally {
-    translating.value = false
-  }
 }
 
-async function onSave() {
-  if (!translated.value.trim()) return
-  try {
-    await authFetchJson(`${API.TRANSLATE}/vocabulary`, {
-      source_text: source.value,
-      translated_text: translated.value,
-      direction: direction.value,
-    })
-    _toast('⭐ 已加入生词本', 'success')
-  } catch (err) {
-    const msg = getErrorMessage(err)
-    error.value = msg
-    if (msg) _toast(msg, 'error')
+// ═══ Watch source for debounce auto-translate ═══
+watch(source, (val) => {
+  clearTimeout(debounceTimer)
+  const canonical = val.trim()
+
+  if (!canonical) {
+    translated.value = ''
+    savedToVocab.value = false
+    stale.value = false
+    error.value = ''
+    lastCanonical = ''
+    return
+  }
+
+  if (canonical.length > MAX_LEN) return
+
+  // Auto-detect direction if user hasn't manually swapped in last 5s
+  if (Date.now() - lastManualSwapAt > 5000) {
+    const detected = detectDirection(canonical)
+    if (detected !== direction.value) {
+      direction.value = detected
+    }
   }
+
+  // Skip if canonical text unchanged (only whitespace changed)
+  if (canonical === lastCanonical) return
+
+  debounceTimer = setTimeout(() => {
+    lastCanonical = canonical
+    doTranslate(canonical, direction.value)
+  }, 800)
+})
+
+// ═══ Watch direction change: retranslate if there's content ═══
+watch(direction, () => {
+  const canonical = source.value.trim()
+  if (canonical && canonical.length <= MAX_LEN) {
+    lastCanonical = canonical
+    doTranslate(canonical, direction.value)
+  }
+})
+
+// ═══ Manual translate (button + Cmd/Ctrl+Enter) ═══
+function onTranslate() {
+  if (!canSubmit.value) return
+  const canonical = source.value.trim()
+  clearTimeout(debounceTimer)
+  lastCanonical = canonical
+  doTranslate(canonical, direction.value)
 }
 
-function swapDirection() {
+// ═══ Swap direction (fix: only switch direction, do NOT move text) ═══
+function onSwap() {
+  lastManualSwapAt = Date.now()
   direction.value = direction.value === 'zh2en' ? 'en2zh' : 'zh2en'
-  source.value = translated.value
-  translated.value = ''
+  // Mark as stale — user sees translated text is now for the old direction
+  if (translated.value) {
+    stale.value = true
+  }
+}
+
+// ═══ Keyboard shortcut: Cmd/Ctrl+Enter ═══
+function onKeydown(e) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+    e.preventDefault()
+    onTranslate()
+  }
 }
 
 // ═══ Toast ═══
@@ -70,47 +195,65 @@ function _toast(text, type = 'info', duration = 1800) {
   toast.value = { show: true, text, type }
   setTimeout(() => (toast.value.show = false), duration)
 }
+
+// ═══ Cleanup ═══
+onUnmounted(() => {
+  clearTimeout(debounceTimer)
+  abortCtrl?.abort()
+})
 </script>
 
 <template>
-  <div class="translate-page">
-    <header class="topbar">
-      <RouterLink class="back" to="/">← 返回</RouterLink>
-      <div class="title">翻译</div>
-      <button class="swap" @click="swapDirection" aria-label="切换方向">
-        {{ direction === 'zh2en' ? '中→英' : '英→中' }} ⇄
-      </button>
-    </header>
-
-    <main class="body">
-      <!-- 翻译区 -->
-      <section class="pair">
-        <div class="col">
-          <textarea
-            v-model="source"
-            :placeholder="direction === 'zh2en' ? '输入中文' : 'Enter English'"
-            :maxlength="MAX_LEN"
-          ></textarea>
-          <div class="counter">{{ source.length }} / {{ MAX_LEN }}</div>
-        </div>
-        <div class="col">
-          <div class="result" :class="{ loading: translating }">
-            {{ translated || (translating ? '翻译中...' : '译文会显示在这里') }}
-          </div>
-          <button v-if="translated" class="save" @click="onSave">⭐ 收藏到生词本</button>
+  <div class="translate-page" @keydown="onKeydown">
+    <TopBar
+      :direction="direction"
+      :sidebar-open="sidebarOpen"
+      @swap="onSwap"
+      @toggle-sidebar="sidebarOpen = !sidebarOpen"
+    />
+
+    <main class="translate-body">
+      <div class="translate-layout" :class="{ 'no-sidebar': !sidebarOpen }">
+        <!-- Left: input -->
+        <TranslateInput
+          v-model="source"
+          :direction="direction"
+          :max-len="MAX_LEN"
+        />
+
+        <!-- Center-right: result -->
+        <div class="result-col">
+          <TranslateResult
+            :text="translated"
+            :loading="translating"
+            :saved-to-vocab="savedToVocab"
+            :is-authenticated="authStore.isAuthenticated"
+            :stale="stale"
+            :error="error"
+            :direction="direction"
+          />
+
+          <!-- Translate button -->
+          <button
+            class="translate-btn"
+            :disabled="!canSubmit"
+            @click="onTranslate"
+            title="翻译 (Cmd/Ctrl+Enter)"
+          >
+            {{ translating ? '翻译中…' : '翻译' }}
+          </button>
+
+          <!-- Vocab hint -->
+          <p class="vocab-hint">
+            收藏的译文可在
+            <RouterLink to="/vocabulary" class="vocab-link">生词本</RouterLink>
+            中查看与复习
+          </p>
         </div>
-      </section>
-
-      <button class="primary" :disabled="!canSubmit" @click="onTranslate">
-        {{ translating ? '...' : '翻译' }}
-      </button>
-      <p v-if="error" class="err">{{ error }}</p>
-
-      <p class="vocab-hint">
-        收藏的译文可在
-        <RouterLink to="/vocabulary" class="vocab-link">生词本</RouterLink>
-        中查看与复习
-      </p>
+
+        <!-- Right: sidebar -->
+        <TranslateSidebar :open="sidebarOpen" />
+      </div>
     </main>
 
     <Transition name="toast">
@@ -126,123 +269,91 @@ function _toast(text, type = 'info', duration = 1800) {
   min-height: var(--app-vh, 100dvh);
   background: var(--bg);
 }
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-3) var(--space-4);
-  padding-top: calc(var(--safe-top) + var(--space-3));
-  background: var(--bg-overlay);
-  backdrop-filter: saturate(180%) blur(16px);
-  border-bottom: 1px solid var(--border);
-}
-.title {
-  font-weight: 600;
-  color: var(--accent);
-}
-.back,
-.swap {
-  color: var(--text-2);
-  font-size: 14px;
+
+.translate-body {
+  flex: 1;
+  overflow: auto;
 }
-.body {
+
+/* Three-column grid layout */
+.translate-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr 320px;
+  gap: var(--space-4);
   padding: var(--space-4);
-  max-width: 900px;
-  width: 100%;
+  max-width: 1400px;
   margin: 0 auto;
-  flex: 1;
+  /* Allow full height use */
+  min-height: calc(100vh - 64px);
+  align-items: start;
 }
-.pair {
-  display: grid;
+
+.translate-layout.no-sidebar {
   grid-template-columns: 1fr 1fr;
-  gap: var(--space-3);
-  margin-bottom: var(--space-3);
 }
-.col {
-  position: relative;
+
+.result-col {
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
-}
-textarea,
-.result {
-  width: 100%;
-  min-height: 180px;
-  padding: var(--space-3);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg-elevated);
-  font-size: 15px;
-  line-height: 1.6;
-  outline: none;
-}
-textarea:focus {
-  border-color: var(--accent);
-}
-textarea {
-  resize: vertical;
-  font-family: inherit;
-}
-.result {
-  white-space: pre-wrap;
-  color: var(--text-1);
-}
-.result.loading {
-  color: var(--text-3);
-  font-style: italic;
-}
-.counter {
-  font-size: 11px;
-  color: var(--text-3);
-  text-align: right;
-}
-.save {
-  align-self: flex-start;
-  padding: 6px var(--space-3);
-  background: var(--accent-soft);
-  color: var(--accent);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-  font-weight: 500;
-  transition: all var(--duration) var(--ease);
-}
-.save:active {
-  background: var(--accent);
-  color: var(--text-inverse);
-  transform: scale(0.96);
+  gap: var(--space-3);
 }
-.primary {
+
+.translate-btn {
   width: 100%;
   padding: var(--space-3);
   background: var(--accent);
   color: var(--text-inverse);
   border-radius: var(--radius);
   font-weight: 500;
+  font-size: 15px;
   transition: background var(--duration) var(--ease);
 }
-.primary:active {
-  background: var(--accent-hover);
+
+.translate-btn:hover:not(:disabled) {
+  background: var(--accent-hover, color-mix(in srgb, var(--accent) 85%, black));
 }
-.primary:disabled {
-  opacity: 0.5;
+
+.translate-btn:active:not(:disabled) {
+  transform: scale(0.98);
 }
-.err {
-  color: #c6463a;
-  font-size: 13px;
-  margin-top: var(--space-2);
+
+.translate-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
 .vocab-hint {
-  margin-top: var(--space-4);
-  font-size: 13px;
+  font-size: 12px;
   color: var(--text-3);
   text-align: center;
 }
+
 .vocab-link {
   color: var(--accent);
   text-decoration: underline;
 }
 
+/* Tablet: two-column (sidebar hidden) */
+@media (max-width: 1024px) {
+  .translate-layout,
+  .translate-layout.no-sidebar {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  /* Hide sidebar via grid — TranslateSidebar won't show at this breakpoint anyway */
+}
+
+/* Mobile: single column */
+@media (max-width: 768px) {
+  .translate-layout,
+  .translate-layout.no-sidebar {
+    grid-template-columns: 1fr;
+    padding: var(--space-3);
+    gap: var(--space-3);
+  }
+}
+
+/* Toast */
 .toast {
   position: fixed;
   bottom: calc(var(--safe-bottom) + var(--space-5));
@@ -254,15 +365,24 @@ textarea {
   border-radius: var(--radius);
   font-size: 13px;
   z-index: var(--z-toast);
+  white-space: nowrap;
 }
-.toast.error { background: #c6463a; }
-.toast.success { background: var(--accent); }
+
+.toast.error {
+  background: #c6463a;
+}
+
+.toast.success {
+  background: var(--accent);
+}
+
 .toast-enter-active,
-.toast-leave-active { transition: opacity var(--duration) var(--ease); }
-.toast-enter-from,
-.toast-leave-to { opacity: 0; }
+.toast-leave-active {
+  transition: opacity var(--duration) var(--ease);
+}
 
-@media (max-width: 768px) {
-  .pair { grid-template-columns: 1fr; }
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
 }
 </style>

From 432ca887f24d5a38e83edd41cf4a8f851bcbc812 Mon Sep 17 00:00:00 2001
From: bob798 <xbb798@gmail.com>
Date: Thu, 21 May 2026 23:18:19 +0800
Subject: [PATCH 2/4] =?UTF-8?q?chore(vocab):=20source=5Ftype=20=E4=B8=8E?=
 =?UTF-8?q?=E8=A1=A8=E5=90=8D=E9=87=8D=E6=9E=84=E4=B8=BA=20article-*=20?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E8=AF=AD=E4=B9=89=20(#42)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .claude/Claude.md                            |  10 +-
 app/models/db.py                             |  19 ++--
 app/routers/articles.py                      |  19 ++--
 app/routers/bbc_eaw.py                       |  28 +++--
 app/routers/bbc_review.py                    |  13 ++-
 app/routers/vocab.py                         |   4 +-
 app/services/bbc_article_srs.py              |  12 +--
 app/services/bbc_eaw_seeder.py               |   8 +-
 app/services/bbc_question_gen.py             |  10 +-
 app/services/model_client.py                 |   1 +
 app/services/vocab_service.py                |  43 +++++++-
 frontend/src/components/ExplanationModal.vue |  12 ++-
 frontend/src/composables/usePractice.js      |   4 +-
 frontend/src/views/Articles.vue              |   6 +-
 frontend/src/views/BbcArticleReview.vue      |  14 +--
 frontend/src/views/Memory.vue                |   8 +-
 frontend/src/views/ReviewHome.vue            |   4 +-
 frontend/src/views/Vocabulary.vue            |  20 +++-
 frontend/vite.config.js                      |   4 +-
 scripts/migrate_article_refactor.py          | 106 +++++++++++++++++++
 tests/test_v010_bbc_srs.py                   |   8 +-
 tests/test_v010_vocab.py                     |  12 +--
 tests/test_v08_auto_save_vocab.py            |  13 +--
 tests/test_v08_explain_autosave.py           |   8 +-
 tests/test_v08_explain_request_schema.py     |  10 +-
 tests/test_v08_explain_stream_autosave.py    |   7 +-
 tests/test_v08_phonetic_autosave.py          |   6 +-
 tests/test_v08_vocab_list_by_source_type.py  |   6 +-
 tests/test_v08_vocab_router_source_type.py   |   6 +-
 tests/test_v08_vocab_update_explanation.py   |   4 +-
 30 files changed, 312 insertions(+), 113 deletions(-)
 create mode 100644 scripts/migrate_article_refactor.py

diff --git a/.claude/Claude.md b/.claude/Claude.md
index ed66e9b..0b2a6be 100644
--- a/.claude/Claude.md
+++ b/.claude/Claude.md
@@ -101,10 +101,10 @@ speakeasy/
 | user_facts | V0.3 | LLM 提取的跨会话事实记忆 |
 | pronunciation_cards | V0.4 | FSRS 管理的发音练习卡片 |
 | subtitle_sources | V0.4 | B站字幕缓存 |
-| vocabulary | V0.5 | 翻译生词本收藏（软删除，无 FSRS）（V0.8 起 explain 接口发起即自动入库，explanation_json 由解读完成回填） |
+| vocabulary | V0.5 | 翻译生词本收藏（软删除）（V0.8 起 explain 自动入库；source_type='article' + series 字段区分来源系列） |
 | ask_threads | V0.7 | 跨页面通用追问 thread（scope + ref_type/ref_id） |
 | ask_messages | V0.7 | 追问 thread 的消息列表 |
-| bbc_eaw_episodes | V0.7.x | BBC English at Work 67 集语料（共享，不绑 user_id），见 `docs/datasets/bbc_eaw.md` |
+| article_episodes | V0.7.x | 文章系列语料（共享，不绑 user_id），series 字段区分 bbc_eaw/voa 等（原 bbc_eaw_episodes，Issue #42 重命名） |
 
 ### API 接口清单
 
@@ -140,6 +140,12 @@ speakeasy/
 | `/articles/explain` | POST | V0.8 | 单次词/句解读，发起即自动写入 vocabulary |
 | `/articles/tts` | POST | V0.8 | 文章 TTS 语音合成 |
 | `/vocabulary` | GET | V0.8 | 生词本独立页（支持 source_type 过滤） |
+| `/articles/episodes` | GET | #42 | 文章系列列表（原 /bbc-eaw/episodes，支持 series 过滤） |
+| `/articles/episodes/{slug}` | GET | #42 | 单集详情（原 /bbc-eaw/episodes/{slug}） |
+| `/articles/episodes/{slug}/start` | POST | #42 | 开始学习（原 /bbc-eaw/{slug}/start） |
+| `/articles/episodes/{slug}/review` | GET | #42 | 文章复习题（原 /bbc-eaw/{slug}/review） |
+| `/articles/episodes/{slug}/rate` | POST | #42 | FSRS 评分（原 /bbc-eaw/{slug}/rate） |
+| `/articles/due` | GET | #42 | 到期文章列表（原 /bbc-eaw/due） |
 | `/ask/threads` | POST | V0.7 | 通用追问：新建 thread + 首轮问答 |
 | `/ask/threads/{id}/messages` | POST | V0.7 | 追问某 thread（带历史） |
 | `/ask/threads` | GET | V0.7 | 列出 thread（按 scope/ref_type/ref_id 过滤） |
diff --git a/app/models/db.py b/app/models/db.py
index 7679d4e..b850ef8 100644
--- a/app/models/db.py
+++ b/app/models/db.py
@@ -159,8 +159,9 @@ class Vocabulary(Base):
     status           = Column(String, nullable=False, default="active")  # active | deleted
     # ── V0.10 生词本 + FSRS（P1）──────────────────────────────
     item_type        = Column(String, nullable=False, default="sentence")  # word | phrase | sentence
-    source_type      = Column(String, nullable=False, default="translate") # translate | bbc_eaw | practice | chat
-    source_ref       = Column(String, nullable=True)                       # bbc slug / session_id / null
+    source_type      = Column(String, nullable=False, default="translate") # translate | article | practice | chat
+    source_ref       = Column(String, nullable=True)                       # episode slug / session_id / null
+    series           = Column(String, nullable=True)                       # bbc_eaw | voa | ... (when source_type='article')
     explanation_json = Column(String, nullable=True)                       # 复用 ExplanationCache 输出
     fsrs_card_data   = Column(String, nullable=False, default="")
     last_reviewed_at = Column(DateTime, nullable=True)
@@ -228,14 +229,15 @@ class AskMessage(Base):
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
-# ── 公共素材：BBC Learning English / English at Work ────────
-# 67 集，每集一行；不绑 user_id（全用户共享）
+# ── 公共素材：文章系列（BBC EAW / VOA / ...）────────
+# 每集一行；不绑 user_id（全用户共享）
 # 灌库脚本：scripts/bbc_eaw_seed.py（数据来源 data/bbc_eaw/parsed/）
 
-class BbcEawEpisode(Base):
-    __tablename__ = "bbc_eaw_episodes"
+class ArticleEpisode(Base):
+    __tablename__ = "article_episodes"
 
     id                 = Column(Integer, primary_key=True, autoincrement=True)
+    series             = Column(String, nullable=False, default="bbc_eaw")  # bbc_eaw | voa | ...
     slug               = Column(String, nullable=False, unique=True)   # 01-the-interview
     url                = Column(String, nullable=False)
     title              = Column(String, nullable=True)                 # The Interview
@@ -253,6 +255,9 @@ class BbcEawEpisode(Base):
     updated_at         = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
 
+BbcEawEpisode = ArticleEpisode  # 向后兼容别名
+
+
 # ── V0.10 BBC 文章级 SRS ──────────────────────────────────
 # 每个 (user, slug) 一张 FSRS 卡，文章作为复习单元
 # 题目按 slug 共享，懒加载首次复习时由 LLM 生成
@@ -262,7 +267,7 @@ class BbcArticleCard(Base):
 
     id               = Column(Integer, primary_key=True, autoincrement=True)
     user_id          = Column(String, nullable=False, index=True)
-    slug             = Column(String, nullable=False, index=True)         # 关联 BbcEawEpisode.slug
+    slug             = Column(String, nullable=False, index=True)         # 关联 ArticleEpisode.slug
     fsrs_card_data   = Column(String, nullable=False, default="")
     status           = Column(String, nullable=False, default="active")   # active | deleted
     first_studied_at = Column(DateTime, default=datetime.utcnow)
diff --git a/app/routers/articles.py b/app/routers/articles.py
index 69f473b..cc13164 100644
--- a/app/routers/articles.py
+++ b/app/routers/articles.py
@@ -81,8 +81,9 @@ class ExplainRequest(BaseModel):
     context: Optional[str] = ""              # word 模式下可提供所在句子
     refresh: bool = False                    # V0.11 #8 · 跳过缓存强制重新生成
     # V0.8 自动入库：可选，传了就在解读入口自动写 vocabulary
-    source_type: Optional[str] = None        # 'bbc_eaw' | 'translate' | ...
-    source_ref: Optional[str] = None         # 例: BBC episode slug
+    source_type: Optional[str] = None        # 'article' | 'translate' | ...
+    source_ref: Optional[str] = None         # 例: episode slug
+    series: Optional[str] = None             # bbc_eaw | voa | ... (when source_type='article')
     item_type: Optional[str] = None          # 'word' | 'phrase' | 'sentence'，缺省由 kind 推断
 
 
@@ -346,6 +347,7 @@ def _auto_save_vocab(
     source_type: Optional[str],
     source_ref: Optional[str],
     item_type: str,
+    series: Optional[str] = None,
 ) -> bool:
     """解读发起时占位写入 vocabulary（explanation_json=None）。
 
@@ -369,10 +371,11 @@ def _auto_save_vocab(
             source_type=source_type,
             source_ref=source_ref,
             explanation_json=None,
+            series=series,
         )
         logger.info(
-            "vocab_auto_save_attempt user_id=%s text=%s source_type=%s source_ref=%s item_type=%s",
-            user_id, text[:40], source_type, source_ref, item_type,
+            "vocab_auto_save_attempt user_id=%s text=%s source_type=%s series=%s source_ref=%s item_type=%s",
+            user_id, text[:40], source_type, series, source_ref, item_type,
         )
         return True
     except Exception as e:
@@ -395,7 +398,7 @@ async def practice_explain(
     _auto_save_vocab(
         user_id=user_id, text=req.text, context=req.context,
         source_type=req.source_type, source_ref=req.source_ref,
-        item_type=item_type,
+        item_type=item_type, series=req.series,
     )
 
     try:
@@ -433,6 +436,7 @@ class QuickPhoneticRequest(BaseModel):
     source_type: Optional[str] = None
     source_ref: Optional[str] = None
     item_type: Optional[str] = None         # 前端推断后传入，避免与后续 explain 不一致
+    series: Optional[str] = None            # bbc_eaw | voa | ...
 
 
 @router.post("/explain/phonetic")
@@ -449,7 +453,7 @@ async def practice_explain_phonetic(
         _auto_save_vocab(
             user_id=user_id, text=req.text, context=None,
             source_type=req.source_type, source_ref=req.source_ref,
-            item_type=item_type,
+            item_type=item_type, series=req.series,
         )
     return {"phonetic": quick_phonetic(req.text)}
 
@@ -461,6 +465,7 @@ class StreamExplainRequest(BaseModel):
     source_type: Optional[str] = None
     source_ref: Optional[str] = None
     item_type: Optional[str] = None
+    series: Optional[str] = None             # bbc_eaw | voa | ...
     context: Optional[str] = ""              # 句子级 context（如所在段落）
 
 
@@ -485,7 +490,7 @@ async def practice_explain_stream(
     _auto_save_vocab(
         user_id=user_id, text=req.text, context=req.context,
         source_type=req.source_type, source_ref=req.source_ref,
-        item_type=item_type,
+        item_type=item_type, series=req.series,
     )
 
     async def event_stream():
diff --git a/app/routers/bbc_eaw.py b/app/routers/bbc_eaw.py
index 1b596ff..32a7418 100644
--- a/app/routers/bbc_eaw.py
+++ b/app/routers/bbc_eaw.py
@@ -1,4 +1,7 @@
-"""BBC English at Work 公共语料 API · 共享只读，不绑 user_id"""
+"""文章系列公共语料 API · 共享只读，不绑 user_id
+
+路由前缀：/articles/episodes（由 main.py 注册）
+"""
 
 import json
 from typing import Optional
@@ -6,26 +9,30 @@
 from fastapi import APIRouter, HTTPException, Query
 from sqlalchemy.orm import Session as OrmSession
 
-from app.models.db import BbcEawEpisode, engine
+from app.models.db import ArticleEpisode, engine
 
 router = APIRouter()
 
 
-@router.get("/bbc-eaw/episodes")
+@router.get("/articles/episodes")
 async def list_episodes(
     limit: int = Query(100, ge=1, le=200),
     topic: Optional[str] = None,
+    series: Optional[str] = None,
 ):
-    """列出 EAW 集 · 公共数据，无需登录"""
+    """列出文章集 · 公共数据，无需登录"""
     with OrmSession(engine) as s:
-        q = s.query(BbcEawEpisode).order_by(BbcEawEpisode.id.asc())
+        q = s.query(ArticleEpisode).order_by(ArticleEpisode.id.asc())
         if topic:
-            q = q.filter(BbcEawEpisode.topic == topic)
+            q = q.filter(ArticleEpisode.topic == topic)
+        if series:
+            q = q.filter(ArticleEpisode.series == series)
         rows = q.limit(limit).all()
         return {
             "items": [
                 {
                     "slug": r.slug,
+                    "series": r.series,
                     "title": r.title,
                     "episode_id": r.episode_id,
                     "topic": r.topic,
@@ -39,19 +46,17 @@ async def list_episodes(
         }
 
 
-@router.get("/bbc-eaw/episodes/{slug}")
+@router.get("/articles/episodes/{slug}")
 async def get_episode(slug: str):
     """取单集详情 · 把 transcript 转成 PracticePlayer 期待的 segments 形态"""
     with OrmSession(engine) as s:
-        row = s.query(BbcEawEpisode).filter_by(slug=slug).first()
+        row = s.query(ArticleEpisode).filter_by(slug=slug).first()
         if not row:
             raise HTTPException(404, "episode not found")
 
         transcript = json.loads(row.transcript_json or "[]")
         phrases = json.loads(row.phrases_json or "[]")
 
-        # transcript: [{speaker, text}] → segments: [{content, speaker}]
-        # PracticePlayer 用 seg.content 做主键，无时间戳就用顺序 idx 做兜底
         segments = [
             {
                 "content": item.get("text", ""),
@@ -68,7 +73,8 @@ async def get_episode(slug: str):
             "title": row.title,
             "topic": row.topic,
             "description": row.description,
-            "source_type": "bbc_eaw",
+            "series": row.series,
+            "source_type": "article",
             "segments": segments,
             "phrases": phrases,
             "listening_question": row.listening_question,
diff --git a/app/routers/bbc_review.py b/app/routers/bbc_review.py
index bfcf896..0edea9a 100644
--- a/app/routers/bbc_review.py
+++ b/app/routers/bbc_review.py
@@ -1,4 +1,7 @@
-"""BBC 文章级 SRS 路由 — V0.10"""
+"""文章级 SRS 路由 — V0.10
+
+路由前缀：/articles/episodes（由 main.py 注册）
+"""
 from typing import List, Optional
 
 from fastapi import APIRouter, Depends, HTTPException
@@ -25,7 +28,7 @@ class RateRequest(BaseModel):
     wrong_segments: Optional[List[WrongSegment]] = None
 
 
-@router.post("/bbc-eaw/{slug}/start", status_code=201)
+@router.post("/articles/episodes/{slug}/start", status_code=201)
 async def start(slug: str, user_id: str = Depends(get_current_user_id)):
     try:
         return bbc_article_srs.start_studying(user_id, slug)
@@ -33,7 +36,7 @@ async def start(slug: str, user_id: str = Depends(get_current_user_id)):
         raise HTTPException(404, str(e))
 
 
-@router.get("/bbc-eaw/{slug}/review")
+@router.get("/articles/episodes/{slug}/review")
 async def review(slug: str, user_id: str = Depends(get_current_user_id)):
     """取该文章的复习题；未生成则懒加载首次生成。"""
     try:
@@ -45,7 +48,7 @@ async def review(slug: str, user_id: str = Depends(get_current_user_id)):
     return {"slug": slug, "questions": questions, "count": len(questions)}
 
 
-@router.post("/bbc-eaw/{slug}/rate")
+@router.post("/articles/episodes/{slug}/rate")
 async def rate(
     slug: str,
     req: RateRequest,
@@ -60,7 +63,7 @@ async def rate(
         raise HTTPException(404, str(e))
 
 
-@router.get("/bbc-eaw/due")
+@router.get("/articles/due")
 async def due(user_id: str = Depends(get_current_user_id)):
     items = bbc_article_srs.list_due_articles(user_id)
     return {"items": items, "count": len(items)}
diff --git a/app/routers/vocab.py b/app/routers/vocab.py
index d4af64f..42dcd7e 100644
--- a/app/routers/vocab.py
+++ b/app/routers/vocab.py
@@ -32,9 +32,10 @@ class VocabCreate(BaseModel):
     direction: str = "en2zh"
     context: Optional[str] = None
     item_type: str = "sentence"           # word | phrase | sentence
-    source_type: str = "translate"        # translate | bbc_eaw | practice | chat
+    source_type: str = "translate"        # translate | article | practice | chat
     source_ref: Optional[str] = None
     explanation_json: Optional[str] = None
+    series: Optional[str] = None          # bbc_eaw | voa | ... (when source_type='article')
 
 
 class VocabRate(BaseModel):
@@ -54,6 +55,7 @@ async def create_vocab(req: VocabCreate, user_id: str = Depends(get_current_user
             source_type=req.source_type,
             source_ref=req.source_ref,
             explanation_json=req.explanation_json,
+            series=req.series,
         )
     except ValueError as e:
         raise HTTPException(400, str(e))
diff --git a/app/services/bbc_article_srs.py b/app/services/bbc_article_srs.py
index fec5f97..da3784c 100644
--- a/app/services/bbc_article_srs.py
+++ b/app/services/bbc_article_srs.py
@@ -1,7 +1,7 @@
 """BBC 文章级 SRS 服务 — V0.10
 
 每个 (user_id, slug) 一张 FSRS 卡。题目按 slug 共享缓存。
-答错的句子会落入 Vocabulary（item_type=sentence、source=bbc_eaw）。
+答错的句子会落入 Vocabulary（item_type=sentence、source_type=article、series=bbc_eaw）。
 """
 import json
 from datetime import datetime
@@ -13,7 +13,7 @@
     engine,
     BbcArticleCard,
     BbcArticleQuestion,
-    BbcEawEpisode,
+    ArticleEpisode,
 )
 from app.services.fsrs_utils import (
     create_card,
@@ -28,7 +28,7 @@
 logger = get_logger("bbc_article_srs")
 
 
-def _card_to_dict(c: BbcArticleCard, episode: Optional[BbcEawEpisode] = None) -> Dict:
+def _card_to_dict(c: BbcArticleCard, episode: Optional[ArticleEpisode] = None) -> Dict:
     return {
         "id": c.id,
         "user_id": c.user_id,
@@ -59,7 +59,7 @@ def _question_to_dict(q: BbcArticleQuestion) -> Dict:
 def start_studying(user_id: str, slug: str) -> Dict:
     """首次学习 / 已有则返回当前卡。"""
     with OrmSession(engine) as s:
-        episode = s.query(BbcEawEpisode).filter_by(slug=slug).first()
+        episode = s.query(ArticleEpisode).filter_by(slug=slug).first()
         if not episode:
             raise LookupError(f"BBC episode not found: {slug}")
 
@@ -160,7 +160,7 @@ def rate_card(
         s.commit()
         s.refresh(card)
 
-        episode = s.query(BbcEawEpisode).filter_by(slug=slug).first()
+        episode = s.query(ArticleEpisode).filter_by(slug=slug).first()
         result = _card_to_dict(card, episode)
 
     # 答错联动：在事务外做（vocab_service 自管 session）
@@ -186,7 +186,7 @@ def list_due_articles(user_id: str) -> List[Dict]:
         slugs = {c.slug for c in cards}
         episodes = {
             e.slug: e
-            for e in s.query(BbcEawEpisode).filter(BbcEawEpisode.slug.in_(slugs)).all()
+            for e in s.query(ArticleEpisode).filter(ArticleEpisode.slug.in_(slugs)).all()
         }
         result = []
         for c in cards:
diff --git a/app/services/bbc_eaw_seeder.py b/app/services/bbc_eaw_seeder.py
index 2fa6fe2..dfcd60e 100644
--- a/app/services/bbc_eaw_seeder.py
+++ b/app/services/bbc_eaw_seeder.py
@@ -1,4 +1,4 @@
-"""Seed bbc_eaw_episodes from data/bbc_eaw/parsed/*.json.
+"""Seed article_episodes from data/bbc_eaw/parsed/*.json.
 
 Idempotent upsert by `slug`. Used by:
   - scripts/bbc_eaw_seed.py (CLI / one-shot)
@@ -14,7 +14,7 @@
 
 from sqlalchemy.orm import Session as OrmSession
 
-from app.models.db import BbcEawEpisode, engine
+from app.models.db import ArticleEpisode, engine
 
 log = logging.getLogger(__name__)
 
@@ -55,12 +55,12 @@ def seed(parsed_dir: Path = DEFAULT_PARSED_DIR,
         for f in files:
             parsed = json.loads(f.read_text(encoding="utf-8"))
             slug = parsed["slug"]
-            row = sess.query(BbcEawEpisode).filter_by(slug=slug).one_or_none()
+            row = sess.query(ArticleEpisode).filter_by(slug=slug).one_or_none()
             fields = _row_fields(parsed, Path(raw_dir))
             if row is None:
                 inserted += 1
                 if not dry_run:
-                    sess.add(BbcEawEpisode(**fields))
+                    sess.add(ArticleEpisode(**fields))
             else:
                 updated += 1
                 if not dry_run:
diff --git a/app/services/bbc_question_gen.py b/app/services/bbc_question_gen.py
index ce1a903..9a63e71 100644
--- a/app/services/bbc_question_gen.py
+++ b/app/services/bbc_question_gen.py
@@ -18,7 +18,7 @@
 
 from sqlalchemy.orm import Session as OrmSession
 
-from app.models.db import engine, BbcEawEpisode
+from app.models.db import engine, ArticleEpisode
 from app.prompts.bbc_questions import BBC_QUESTION_GEN_PROMPT
 from app.logger import get_logger
 
@@ -27,9 +27,9 @@
 VALID_QTYPES = {"cloze", "back_translate", "recall_prompt"}
 
 
-def _load_episode(slug: str) -> Optional[BbcEawEpisode]:
+def _load_episode(slug: str) -> Optional[ArticleEpisode]:
     with OrmSession(engine) as s:
-        return s.query(BbcEawEpisode).filter_by(slug=slug).first()
+        return s.query(ArticleEpisode).filter_by(slug=slug).first()
 
 
 def _build_cloze(transcript: List[Dict], phrases: List[str]) -> Optional[Dict]:
@@ -120,7 +120,7 @@ def _validate_question(q: Dict) -> Optional[Dict]:
     }
 
 
-async def _generate_via_llm(episode: BbcEawEpisode) -> List[Dict]:
+async def _generate_via_llm(episode: ArticleEpisode) -> List[Dict]:
     """LLM 出题；任何异常向上抛，由 generate_questions 捕获后回退。"""
     from app.services.model_client import get_client  # 延迟导入以便测试时无 LLM 也能用
 
@@ -158,7 +158,7 @@ async def _generate_via_llm(episode: BbcEawEpisode) -> List[Dict]:
     return validated[:6]
 
 
-def _generate_deterministic(episode: BbcEawEpisode) -> List[Dict]:
+def _generate_deterministic(episode: ArticleEpisode) -> List[Dict]:
     transcript = json.loads(episode.transcript_json or "[]")
     phrases = json.loads(episode.phrases_json or "[]")
     transcript = [t for t in transcript if (t.get("text") or "").strip()]
diff --git a/app/services/model_client.py b/app/services/model_client.py
index 0479982..9c7ecc5 100644
--- a/app/services/model_client.py
+++ b/app/services/model_client.py
@@ -1,3 +1,4 @@
+from __future__ import annotations
 import os
 import time
 from typing import AsyncGenerator
diff --git a/app/services/vocab_service.py b/app/services/vocab_service.py
index 81ac842..175f325 100644
--- a/app/services/vocab_service.py
+++ b/app/services/vocab_service.py
@@ -25,7 +25,7 @@
 logger = get_logger("vocab_service")
 
 VALID_ITEM_TYPES = {"word", "phrase", "sentence"}
-VALID_SOURCE_TYPES = {"translate", "bbc_eaw", "practice", "chat"}
+VALID_SOURCE_TYPES = {"translate", "article", "practice", "chat", "library"}
 
 
 def _to_dict(v: Vocabulary) -> Dict:
@@ -39,6 +39,7 @@ def _to_dict(v: Vocabulary) -> Dict:
         "item_type": v.item_type,
         "source_type": v.source_type,
         "source_ref": v.source_ref,
+        "series": v.series,
         "explanation_json": v.explanation_json,
         "status": v.status,
         "created_at": v.created_at.isoformat() if v.created_at else None,
@@ -58,6 +59,7 @@ def save_item(
     source_type: str = "translate",
     source_ref: Optional[str] = None,
     explanation_json: Optional[str] = None,
+    series: Optional[str] = None,
 ) -> Dict:
     """新增或返回已存在条目（去重键: user_id + source_text + source_ref）"""
     if not source_text or not source_text.strip():
@@ -91,6 +93,7 @@ def save_item(
             item_type=item_type,
             source_type=source_type,
             source_ref=source_ref,
+            series=series,
             explanation_json=explanation_json,
             fsrs_card_data=create_card(),
             status="active",
@@ -150,6 +153,41 @@ def update_explanation(
         return True
 
 
+def update_translated_text(
+    user_id: str,
+    source_text: str,
+    source_ref: Optional[str],
+    translated_text: str,
+    force: bool = True,
+) -> bool:
+    """回填 translated_text。
+
+    默认覆盖(force=True),保持「页面看到啥 = 生词本里是啥」。
+    找不到记录返回 False,不抛异常。
+    """
+    with OrmSession(engine) as s:
+        v = (
+            s.query(Vocabulary)
+            .filter_by(user_id=user_id, source_text=source_text, source_ref=source_ref)
+            .first()
+        )
+        if not v:
+            logger.warning(
+                "vocab_translated_text_backfill_miss user_id=%s source_text=%s source_ref=%s",
+                user_id, source_text, source_ref,
+            )
+            return False
+        if v.translated_text and not force:
+            return False
+        v.translated_text = translated_text
+        s.commit()
+        logger.info(
+            "vocab_translated_text_backfill user_id=%s id=%s force=%s",
+            user_id, v.id, force,
+        )
+        return True
+
+
 def list_items(
     user_id: str,
     item_type: Optional[str] = None,
@@ -225,8 +263,9 @@ def bulk_save_from_bbc(
             direction="en2zh",
             context=seg.get("context"),
             item_type="sentence",
-            source_type="bbc_eaw",
+            source_type="article",
             source_ref=slug,
+            series="bbc_eaw",
         )
         # 粗略判定：刚创建的 last_reviewed_at 必为 None
         if item.get("last_reviewed_at") is None:
diff --git a/frontend/src/components/ExplanationModal.vue b/frontend/src/components/ExplanationModal.vue
index 761d1b0..ee0795e 100644
--- a/frontend/src/components/ExplanationModal.vue
+++ b/frontend/src/components/ExplanationModal.vue
@@ -204,10 +204,11 @@ const _refStr = (v) => (v == null || v === '' ? null : String(v))
 function deriveVocabSource() {
   // 来源由父组件透传到 target.context；下面的 fallback 兼容老调用
   const ctx = props.target?.context || {}
-  let source_type, raw
+  let source_type, raw, series = null
   if (ctx.vocab_source_type) {
     source_type = ctx.vocab_source_type
     raw = ctx.vocab_source_ref
+    series = ctx.vocab_series || null
   } else if (ctx.source === 'chat') {
     source_type = 'chat'
     raw = ctx.session_id
@@ -219,7 +220,7 @@ function deriveVocabSource() {
     source_type = 'translate'
     raw = null
   }
-  return { source_type, source_ref: _refStr(raw) }
+  return { source_type, source_ref: _refStr(raw), series }
 }
 
 const data = ref({
@@ -272,7 +273,7 @@ function reset() {
 }
 
 async function fetchWord(refresh = false) {
-  const { source_type, source_ref } = deriveVocabSource()
+  const { source_type, source_ref, series } = deriveVocabSource()
   // 1. IPA 快拿（本地秒出 · 不阻塞主请求）
   try {
     const p = await authFetchJson(`${API.ARTICLES}/explain/phonetic`, {
@@ -280,6 +281,7 @@ async function fetchWord(refresh = false) {
       source_type: source_type || null,
       source_ref: source_ref || null,
       item_type: inferredItemType.value,
+      series: series || null,
     })
     data.value.phonetic = p.phonetic || ''
   } catch {
@@ -297,6 +299,7 @@ async function fetchWord(refresh = false) {
       source_type: source_type || null,
       source_ref: source_ref || null,
       item_type: inferredItemType.value,
+      series: series || null,
     })
     const exp = resp.explanation || {}
     Object.assign(data.value, {
@@ -339,7 +342,7 @@ function _scheduleUpdate(field, value) {
 
 async function fetchSentence(refresh = false) {
   loading.value = true
-  const { source_type, source_ref } = deriveVocabSource()
+  const { source_type, source_ref, series } = deriveVocabSource()
   try {
     await sseStream(
       `${API.ARTICLES}/explain/stream`,
@@ -349,6 +352,7 @@ async function fetchSentence(refresh = false) {
         source_type: source_type || null,
         source_ref: source_ref || null,
         item_type: inferredItemType.value,
+        series: series || null,
         context: props.target.sentence || '',
       },
       {
diff --git a/frontend/src/composables/usePractice.js b/frontend/src/composables/usePractice.js
index 901d83c..018d9ba 100644
--- a/frontend/src/composables/usePractice.js
+++ b/frontend/src/composables/usePractice.js
@@ -82,7 +82,7 @@ export function usePractice() {
    * BBC English at Work 公共语料 · 列表
    */
   async function listEawEpisodes(limit = 100) {
-    const resp = await authFetch(`/bbc-eaw/episodes?limit=${limit}`)
+    const resp = await authFetch(`/articles/episodes?limit=${limit}`)
     if (!resp.ok) throw new Error('加载 BBC EAW 失败')
     return resp.json()
   }
@@ -91,7 +91,7 @@ export function usePractice() {
    * BBC English at Work 单集 · 转 segments 与 user 字幕同形态
    */
   async function getEawEpisode(slug) {
-    const resp = await authFetch(`/bbc-eaw/episodes/${encodeURIComponent(slug)}`)
+    const resp = await authFetch(`/articles/episodes/${encodeURIComponent(slug)}`)
     if (!resp.ok) throw new Error('加载 EAW 单集失败')
     return resp.json()
   }
diff --git a/frontend/src/views/Articles.vue b/frontend/src/views/Articles.vue
index 6cc8a6f..6f08042 100644
--- a/frontend/src/views/Articles.vue
+++ b/frontend/src/views/Articles.vue
@@ -44,7 +44,7 @@ const hasSource = computed(
 )
 const isBbcSource = computed(() => {
   const s = store.currentSource
-  return !!s && (s.source_type === 'bbc_eaw' || s.type === 'bbc_eaw')
+  return !!s && (s.source_type === 'article' || s.series === 'bbc_eaw' || s.source_type === 'bbc_eaw' || s.type === 'bbc_eaw')
 })
 
 function showToast(text, type = 'info', duration = 2500) {
@@ -189,12 +189,12 @@ function onExplain(payload) {
     if (payload.sentence) target.sentence = payload.sentence
   }
   const src = store.currentSource || {}
-  const isBbc = src.source_type === 'bbc_eaw' || src.type === 'bbc_eaw'
+  const isBbc = src.source_type === 'article' || src.series === 'bbc_eaw' || src.source_type === 'bbc_eaw' || src.type === 'bbc_eaw'
   // SubtitleSource.id 是 Integer，必须强转 string 后再塞入；
   // 后端 source_ref: Optional[str]，数字会被 Pydantic 拒收。
   const refStr = (v) => (v == null || v === '' ? null : String(v))
   const vocabRef = isBbc
-    ? { vocab_source_type: 'bbc_eaw', vocab_source_ref: refStr(src.slug) || refStr(src.id) }
+    ? { vocab_source_type: 'article', vocab_source_ref: refStr(src.slug) || refStr(src.id), vocab_series: 'bbc_eaw' }
     : { vocab_source_type: 'practice', vocab_source_ref: refStr(src.id) || refStr(src.source_id) }
   target.context = {
     source: 'practice',
diff --git a/frontend/src/views/BbcArticleReview.vue b/frontend/src/views/BbcArticleReview.vue
index 1cb8d9e..34824a6 100644
--- a/frontend/src/views/BbcArticleReview.vue
+++ b/frontend/src/views/BbcArticleReview.vue
@@ -3,10 +3,10 @@
  * BBC 文章复习 · V0.10
  *
  * 流程：
- *   1. start (POST /bbc-eaw/:slug/start) 确保卡存在
- *   2. review (GET  /bbc-eaw/:slug/review) 取题
+ *   1. start (POST /articles/episodes/:slug/start) 确保卡存在
+ *   2. review (GET  /articles/episodes/:slug/review) 取题
  *   3. 用户做完所有题 → 评分弹窗（Again/Hard/Good/Easy）
- *   4. POST /bbc-eaw/:slug/rate · wrong_segments 联动入生词本
+ *   4. POST /articles/episodes/:slug/rate · wrong_segments 联动入生词本
  */
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -46,17 +46,17 @@ async function bootstrap() {
   loading.value = true
   error.value = ''
   try {
-    const articleResp = await authFetch(`${API.BASE}/bbc-eaw/episodes/${slug.value}`)
+    const articleResp = await authFetch(`${API.BASE}/articles/episodes/${slug.value}`)
     if (!articleResp.ok) throw new Error('加载文章失败')
     article.value = await articleResp.json()
 
     card.value = await authFetchJson(
-      `${API.BASE}/bbc-eaw/${slug.value}/start`,
+      `${API.BASE}/articles/episodes/${slug.value}/start`,
       {},
       { method: 'POST' },
     )
 
-    const reviewResp = await authFetch(`${API.BASE}/bbc-eaw/${slug.value}/review`)
+    const reviewResp = await authFetch(`${API.BASE}/articles/episodes/${slug.value}/review`)
     if (!reviewResp.ok) {
       const detail = (await reviewResp.json().catch(() => ({}))).detail
       throw new Error(detail || '题目加载失败')
@@ -124,7 +124,7 @@ function buildWrongPayload() {
 async function submitRating(rating) {
   submitting.value = true
   try {
-    const result = await authFetchJson(`${API.BASE}/bbc-eaw/${slug.value}/rate`, {
+    const result = await authFetchJson(`${API.BASE}/articles/episodes/${slug.value}/rate`, {
       rating,
       wrong_segments: buildWrongPayload(),
     })
diff --git a/frontend/src/views/Memory.vue b/frontend/src/views/Memory.vue
index 3f0b00f..09e603b 100644
--- a/frontend/src/views/Memory.vue
+++ b/frontend/src/views/Memory.vue
@@ -26,10 +26,14 @@ const vocabExpandedId = ref(null)
 
 const SOURCE_LABEL = {
   translate: '解读',
-  bbc_eaw: 'BBC',
+  article: '文章',
   practice: '练习',
   chat: '对话',
 }
+const SERIES_LABEL = {
+  bbc_eaw: 'BBC',
+  voa: 'VOA',
+}
 
 const TYPE_LABEL = { word: '词', phrase: '短语', sentence: '句' }
 
@@ -273,7 +277,7 @@ watch(vocabFilter, () => loadVocab())
             <div v-if="vocabExpandedId === v.id" class="v-detail">
               <div v-if="v.context" class="v-context">📍 {{ v.context }}</div>
               <div class="v-meta">
-                <span class="v-source">来源：{{ SOURCE_LABEL[v.source_type] || v.source_type }}</span>
+                <span class="v-source">来源：{{ v.series ? (SERIES_LABEL[v.series] || v.series) : (SOURCE_LABEL[v.source_type] || v.source_type) }}</span>
                 <span v-if="v.created_at">{{ v.created_at.slice(0, 10) }}</span>
               </div>
               <div class="rate-row">
diff --git a/frontend/src/views/ReviewHome.vue b/frontend/src/views/ReviewHome.vue
index 2c8d0cd..8485d8e 100644
--- a/frontend/src/views/ReviewHome.vue
+++ b/frontend/src/views/ReviewHome.vue
@@ -3,7 +3,7 @@
  * Review Dashboard · V0.10
  *
  * 「今日待复习」统一入口：
- *   - BBC 文章 (GET /bbc-eaw/due)
+ *   - BBC 文章 (GET /articles/due)
  *   - 生词条目 (GET /vocab?due=true)
  *
  * 文章 → /bbc-review/:slug
@@ -42,7 +42,7 @@ async function loadAll() {
   error.value = ''
   try {
     const [a, v, p] = await Promise.all([
-      authFetch(`${API.BASE}/bbc-eaw/due`).then((r) => (r.ok ? r.json() : { items: [] })),
+      authFetch(`${API.BASE}/articles/due`).then((r) => (r.ok ? r.json() : { items: [] })),
       authFetch(`${API.VOCAB}?due=true&limit=200`).then((r) => (r.ok ? r.json() : { items: [] })),
       authFetch(`${API.POLISH}/due`).then((r) => (r.ok ? r.json() : { items: [] })),
     ])
diff --git a/frontend/src/views/Vocabulary.vue b/frontend/src/views/Vocabulary.vue
index 07326bc..f18187e 100644
--- a/frontend/src/views/Vocabulary.vue
+++ b/frontend/src/views/Vocabulary.vue
@@ -22,7 +22,7 @@
       <li v-for="item in items" :key="item.id" class="vocab-item">
         <div class="vocab-head" @click="toggle(item.id)">
           <span class="vocab-text">{{ truncate(item.source_text, 80) }}</span>
-          <span :class="['vocab-tag', `tag-${item.source_type}`]">{{ tagLabel(item.source_type) }}</span>
+          <span :class="['vocab-tag', `tag-${item.source_type}`]">{{ tagLabel(item) }}</span>
         </div>
         <div class="vocab-translated">{{ item.translated_text || '—' }}</div>
         <div class="vocab-meta">
@@ -84,7 +84,7 @@ const { stream: sseStream } = useSSE()
 
 const tabs = [
   { value: '', label: '全部' },
-  { value: 'bbc_eaw', label: 'BBC' },
+  { value: 'article', label: 'BBC' },
   { value: 'translate', label: '翻译收藏' },
 ]
 
@@ -96,8 +96,16 @@ const offset = ref(0)
 const PAGE_SIZE = 20
 const hasMore = ref(false)
 
-function tagLabel(source_type) {
-  return tabs.find(t => t.value === source_type)?.label || source_type
+const SERIES_LABELS = {
+  bbc_eaw: 'BBC',
+  voa: 'VOA',
+}
+
+function tagLabel(item) {
+  if (item.source_type === 'article' && item.series) {
+    return SERIES_LABELS[item.series] || item.series
+  }
+  return tabs.find(t => t.value === item.source_type)?.label || item.source_type
 }
 
 function truncate(text, n) {
@@ -179,6 +187,7 @@ async function fetchPending(item) {
           source_type: item.source_type,
           source_ref: item.source_ref,
           item_type: 'sentence',
+          series: item.series || null,
           context: item.context || '',
         },
         {
@@ -198,6 +207,7 @@ async function fetchPending(item) {
         source_type: item.source_type,
         source_ref: item.source_ref,
         item_type: item.item_type,
+        series: item.series || null,
       })
       item.explanation_json = JSON.stringify(resp.explanation || {})
     }
@@ -223,7 +233,7 @@ onMounted(() => fetchList(true))
 .vocab-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
 .vocab-text { font-weight: 600; }
 .vocab-tag { font-size: 12px; padding: 2px 8px; border-radius: 8px; background: #eee; }
-.tag-bbc_eaw { background: #ffe9d6; }
+.tag-article { background: #ffe9d6; }
 .tag-translate { background: #d6f0ff; }
 .vocab-translated { color: #555; margin: 4px 0; }
 .vocab-meta { font-size: 12px; color: #888; }
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 208fa11..4caedca 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -18,7 +18,9 @@ const API_PREFIXES = [
   '/review',
   '/memory',
   '/practice',
+  '/articles',
   '/translate',
+  '/vocab',
   '/auth',
   '/ask',
   '/settings',
@@ -27,7 +29,7 @@ const API_PREFIXES = [
   '/static/audio_cache',
   '/static/tts_cache',
   '/legacy',
-  '/bbc-eaw',
+  // '/bbc-eaw' routes moved to /articles/episodes/* (already covered by /articles proxy)
   '/stats',
 ]
 
diff --git a/scripts/migrate_article_refactor.py b/scripts/migrate_article_refactor.py
new file mode 100644
index 0000000..5cc71ff
--- /dev/null
+++ b/scripts/migrate_article_refactor.py
@@ -0,0 +1,106 @@
+#!/usr/bin/env python3
+"""
+Issue #42 · source_type 与表名重构为 article-* 通用语义
+
+迁移内容：
+  1. bbc_eaw_episodes 表重命名为 article_episodes
+  2. article_episodes 新增 series 列（default 'bbc_eaw'）
+  3. vocabulary 新增 series 列
+  4. vocabulary 中 source_type='bbc_eaw' → 'article'，series 回填 'bbc_eaw'
+
+用法：
+  python3 scripts/migrate_article_refactor.py
+  SPEAKEASY_DB_PATH=./speakeasy.db python3 scripts/migrate_article_refactor.py
+
+幂等：每步操作前检查当前状态，已完成则跳过。
+"""
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parent.parent))
+
+from sqlalchemy import inspect, text
+from app.models.db import engine
+
+
+def _table_exists(name: str) -> bool:
+    return name in inspect(engine).get_table_names()
+
+
+def _column_exists(table: str, column: str) -> bool:
+    if not _table_exists(table):
+        return False
+    return column in {c["name"] for c in inspect(engine).get_columns(table)}
+
+
+def rename_episodes_table() -> str:
+    """bbc_eaw_episodes → article_episodes"""
+    if _table_exists("article_episodes"):
+        return "article_episodes 已存在，跳过"
+    if not _table_exists("bbc_eaw_episodes"):
+        return "bbc_eaw_episodes 不存在，跳过（可能是全新库）"
+    with engine.begin() as conn:
+        conn.execute(text("ALTER TABLE bbc_eaw_episodes RENAME TO article_episodes"))
+    return "bbc_eaw_episodes → article_episodes 完成"
+
+
+def add_episodes_series_column() -> str:
+    """article_episodes 新增 series 列"""
+    if not _table_exists("article_episodes"):
+        return "article_episodes 不存在，跳过"
+    if _column_exists("article_episodes", "series"):
+        return "article_episodes.series 已存在，跳过"
+    with engine.begin() as conn:
+        conn.execute(text(
+            "ALTER TABLE article_episodes ADD COLUMN series TEXT NOT NULL DEFAULT 'bbc_eaw'"
+        ))
+    return "article_episodes.series 列新增完成"
+
+
+def add_vocab_series_column() -> str:
+    """vocabulary 新增 series 列"""
+    if not _table_exists("vocabulary"):
+        return "vocabulary 不存在，跳过"
+    if _column_exists("vocabulary", "series"):
+        return "vocabulary.series 已存在，跳过"
+    with engine.begin() as conn:
+        conn.execute(text("ALTER TABLE vocabulary ADD COLUMN series TEXT"))
+    return "vocabulary.series 列新增完成"
+
+
+def migrate_vocab_source_type() -> str:
+    """vocabulary.source_type='bbc_eaw' → 'article' + series='bbc_eaw'"""
+    if not _table_exists("vocabulary"):
+        return "vocabulary 不存在，跳过"
+    with engine.begin() as conn:
+        result = conn.execute(text(
+            "UPDATE vocabulary SET source_type='article', series='bbc_eaw' "
+            "WHERE source_type='bbc_eaw'"
+        ))
+        count = result.rowcount
+    if count == 0:
+        return "无 source_type='bbc_eaw' 记录需迁移"
+    return f"已迁移 {count} 条 vocabulary 记录：bbc_eaw → article + series=bbc_eaw"
+
+
+def main() -> None:
+    print(f"🗄  数据库: {engine.url}")
+    print()
+
+    steps = [
+        ("1. 重命名 episodes 表", rename_episodes_table),
+        ("2. episodes 加 series 列", add_episodes_series_column),
+        ("3. vocabulary 加 series 列", add_vocab_series_column),
+        ("4. vocabulary source_type 迁移", migrate_vocab_source_type),
+    ]
+
+    for label, fn in steps:
+        result = fn()
+        print(f"  {label}: {result}")
+
+    print()
+    print("✅ 迁移完成")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/tests/test_v010_bbc_srs.py b/tests/test_v010_bbc_srs.py
index 53dc23f..2e977ea 100644
--- a/tests/test_v010_bbc_srs.py
+++ b/tests/test_v010_bbc_srs.py
@@ -14,7 +14,7 @@
 
 from app.models.db import (
     engine,
-    BbcEawEpisode,
+    ArticleEpisode,
     BbcArticleCard,
     BbcArticleQuestion,
     Vocabulary,
@@ -32,8 +32,8 @@ def _reset():
         s.query(BbcArticleCard).filter_by(user_id=USER).delete()
         s.query(BbcArticleQuestion).filter_by(slug=SLUG).delete()
         s.query(Vocabulary).filter_by(user_id=USER).delete()
-        s.query(BbcEawEpisode).filter_by(slug=SLUG).delete()
-        s.add(BbcEawEpisode(
+        s.query(ArticleEpisode).filter_by(slug=SLUG).delete()
+        s.add(ArticleEpisode(
             slug=SLUG,
             url="http://example.com",
             title="Test Episode",
@@ -183,7 +183,7 @@ def test_rate_with_wrong_segments_inserts_vocab():
     assert result["wrong_saved"] == 2
     items = vocab_service.list_items(user_id=USER, source_ref=SLUG)
     assert len(items) == 2
-    assert all(it["source_type"] == "bbc_eaw" for it in items)
+    assert all(it["source_type"] == "article" for it in items)
 
 
 def test_rate_invalid_rating():
diff --git a/tests/test_v010_vocab.py b/tests/test_v010_vocab.py
index a653ed9..aa72ed6 100644
--- a/tests/test_v010_vocab.py
+++ b/tests/test_v010_vocab.py
@@ -41,11 +41,11 @@ def test_save_item_creates_with_fsrs_card():
 def test_save_item_dedupes_by_user_text_ref():
     a = vocab_service.save_item(
         user_id=USER, source_text="dedupe", item_type="word",
-        source_type="bbc_eaw", source_ref="01-the-interview",
+        source_type="article", source_ref="01-the-interview", series="bbc_eaw",
     )
     b = vocab_service.save_item(
         user_id=USER, source_text="dedupe", item_type="word",
-        source_type="bbc_eaw", source_ref="01-the-interview",
+        source_type="article", source_ref="01-the-interview", series="bbc_eaw",
     )
     assert a["id"] == b["id"]
 
@@ -53,11 +53,11 @@ def test_save_item_dedupes_by_user_text_ref():
 def test_save_item_different_source_ref_creates_new():
     a = vocab_service.save_item(
         user_id=USER, source_text="ambiguous", source_ref="article-a",
-        source_type="bbc_eaw",
+        source_type="article", series="bbc_eaw",
     )
     b = vocab_service.save_item(
         user_id=USER, source_text="ambiguous", source_ref="article-b",
-        source_type="bbc_eaw",
+        source_type="article", series="bbc_eaw",
     )
     assert a["id"] != b["id"]
 
@@ -76,7 +76,7 @@ def test_list_filters_by_type_and_source():
     vocab_service.save_item(user_id=USER, source_text="phrase y z", item_type="phrase")
     vocab_service.save_item(
         user_id=USER, source_text="from bbc", item_type="sentence",
-        source_type="bbc_eaw", source_ref="ep-1",
+        source_type="article", source_ref="ep-1", series="bbc_eaw",
     )
 
     words = vocab_service.list_items(user_id=USER, item_type="word")
@@ -129,5 +129,5 @@ def test_bulk_save_from_bbc_creates_sentence_items():
     assert n == 2
     items = vocab_service.list_items(user_id=USER, source_ref="ep-99")
     assert len(items) == 2
-    assert all(it["source_type"] == "bbc_eaw" for it in items)
+    assert all(it["source_type"] == "article" for it in items)
     assert all(it["item_type"] == "sentence" for it in items)
diff --git a/tests/test_v08_auto_save_vocab.py b/tests/test_v08_auto_save_vocab.py
index c38b7c6..7496595 100644
--- a/tests/test_v08_auto_save_vocab.py
+++ b/tests/test_v08_auto_save_vocab.py
@@ -34,13 +34,14 @@ def test_resolve_item_type_word_kind_multi_token_becomes_phrase():
 def test_auto_save_writes_pending_record():
     ok = _auto_save_vocab(
         user_id=USER, text="office banter", context="Some context.",
-        source_type="bbc_eaw", source_ref="ep-12", item_type="phrase",
+        source_type="article", source_ref="ep-12", item_type="phrase",
+        series="bbc_eaw",
     )
     assert ok is True
     with OrmSession(engine) as s:
         v = s.query(Vocabulary).filter_by(user_id=USER, source_text="office banter").first()
         assert v is not None
-        assert v.source_type == "bbc_eaw"
+        assert v.source_type == "article"
         assert v.source_ref == "ep-12"
         assert v.item_type == "phrase"
         assert v.explanation_json is None
@@ -60,8 +61,8 @@ def test_auto_save_no_source_type_is_noop():
 def test_auto_save_no_user_id_is_noop():
     """匿名场景（phonetic 端点未登录）安全跳过。"""
     ok = _auto_save_vocab(
-        user_id=None, text="x", context="", source_type="bbc_eaw",
-        source_ref="ep-1", item_type="word",
+        user_id=None, text="x", context="", source_type="article",
+        source_ref="ep-1", item_type="word", series="bbc_eaw",
     )
     assert ok is False
 
@@ -75,7 +76,7 @@ def _raise(**kwargs):
 
     monkeypatch.setattr(vs, "save_item", _raise)
     ok = _auto_save_vocab(
-        user_id=USER, text="x", context="", source_type="bbc_eaw",
-        source_ref="ep-1", item_type="word",
+        user_id=USER, text="x", context="", source_type="article",
+        source_ref="ep-1", item_type="word", series="bbc_eaw",
     )
     assert ok is False  # 异常被吞，返回 False
diff --git a/tests/test_v08_explain_autosave.py b/tests/test_v08_explain_autosave.py
index dab8ae8..99dfac7 100644
--- a/tests/test_v08_explain_autosave.py
+++ b/tests/test_v08_explain_autosave.py
@@ -46,7 +46,8 @@ async def _fake(text, kind, user_id, context="", force=False):
 def test_explain_with_source_creates_pending_then_backfills(stub_explain):
     body = {
         "text": "office banter", "kind": "word",
-        "source_type": "bbc_eaw", "source_ref": "ep-12", "item_type": "phrase",
+        "source_type": "article", "source_ref": "ep-12", "item_type": "phrase",
+        "series": "bbc_eaw",
     }
     resp = client.post("/practice/explain", json=body)
     assert resp.status_code == 200
@@ -71,12 +72,13 @@ def test_explain_refresh_overwrites_existing_json(stub_explain):
     from app.services.vocab_service import save_item
     save_item(
         user_id=USER, source_text="重写测试", item_type="word",
-        source_type="bbc_eaw", source_ref="ep-1",
+        source_type="article", source_ref="ep-1", series="bbc_eaw",
         explanation_json='{"meaning": "旧值"}',
     )
     body = {
         "text": "重写测试", "kind": "word", "refresh": True,
-        "source_type": "bbc_eaw", "source_ref": "ep-1", "item_type": "word",
+        "source_type": "article", "source_ref": "ep-1", "item_type": "word",
+        "series": "bbc_eaw",
     }
     resp = client.post("/practice/explain", json=body)
     assert resp.status_code == 200
diff --git a/tests/test_v08_explain_request_schema.py b/tests/test_v08_explain_request_schema.py
index 0c9a22d..a0a3802 100644
--- a/tests/test_v08_explain_request_schema.py
+++ b/tests/test_v08_explain_request_schema.py
@@ -6,9 +6,10 @@ def test_explain_request_accepts_source_fields():
     from app.routers.articles import ExplainRequest
     req = ExplainRequest(
         text="Hello", kind="word", context="",
-        source_type="bbc_eaw", source_ref="ep-1", item_type="word",
+        source_type="article", source_ref="ep-1", item_type="word",
+        series="bbc_eaw",
     )
-    assert req.source_type == "bbc_eaw"
+    assert req.source_type == "article"
     assert req.source_ref == "ep-1"
     assert req.item_type == "word"
 
@@ -16,10 +17,11 @@ def test_explain_request_accepts_source_fields():
 def test_stream_request_accepts_source_fields():
     from app.routers.articles import StreamExplainRequest
     req = StreamExplainRequest(
-        text="Hello world.", source_type="bbc_eaw",
+        text="Hello world.", source_type="article",
         source_ref="ep-1", item_type="sentence", context="paragraph context",
+        series="bbc_eaw",
     )
-    assert req.source_type == "bbc_eaw"
+    assert req.source_type == "article"
     assert req.context == "paragraph context"
 
 
diff --git a/tests/test_v08_explain_stream_autosave.py b/tests/test_v08_explain_stream_autosave.py
index 29f4617..e935ddb 100644
--- a/tests/test_v08_explain_stream_autosave.py
+++ b/tests/test_v08_explain_stream_autosave.py
@@ -43,8 +43,9 @@ async def _fake(text, user_id, force=False):
 
 def test_stream_writes_pending_at_entry_and_backfills_on_done(stub_stream):
     body = {
-        "text": "office banter exists", "source_type": "bbc_eaw",
+        "text": "office banter exists", "source_type": "article",
         "source_ref": "ep-12", "item_type": "sentence", "context": "in the meeting",
+        "series": "bbc_eaw",
     }
     with client.stream("POST", "/practice/explain/stream", json=body) as resp:
         assert resp.status_code == 200
@@ -53,7 +54,7 @@ def test_stream_writes_pending_at_entry_and_backfills_on_done(stub_stream):
     with OrmSession(engine) as s:
         v = s.query(Vocabulary).filter_by(user_id=USER, source_text="office banter exists").first()
         assert v is not None
-        assert v.source_type == "bbc_eaw"
+        assert v.source_type == "article"
         assert v.item_type == "sentence"
         parsed = json.loads(v.explanation_json)
         assert parsed["meaning"] == "办公室闲聊"
@@ -71,7 +72,7 @@ async def _fake_cached(text, user_id, force=False):
     import app.routers.articles as pr
     monkeypatch.setattr(pr, "stream_sentence_explanation", _fake_cached)
 
-    body = {"text": "cached text", "source_type": "bbc_eaw", "source_ref": "ep-1", "item_type": "sentence"}
+    body = {"text": "cached text", "source_type": "article", "source_ref": "ep-1", "item_type": "sentence", "series": "bbc_eaw"}
     with client.stream("POST", "/practice/explain/stream", json=body) as resp:
         list(resp.iter_lines())
     with OrmSession(engine) as s:
diff --git a/tests/test_v08_phonetic_autosave.py b/tests/test_v08_phonetic_autosave.py
index 3259cc8..6c9c8c6 100644
--- a/tests/test_v08_phonetic_autosave.py
+++ b/tests/test_v08_phonetic_autosave.py
@@ -24,14 +24,14 @@ def _cleanup():
 def test_phonetic_logged_in_with_source_creates_pending():
     app.dependency_overrides[get_current_user_id_optional] = lambda: USER
     try:
-        body = {"text": "office", "source_type": "bbc_eaw", "source_ref": "ep-12", "item_type": "word"}
+        body = {"text": "office", "source_type": "article", "source_ref": "ep-12", "item_type": "word", "series": "bbc_eaw"}
         resp = client.post("/practice/explain/phonetic", json=body)
         assert resp.status_code == 200
         with OrmSession(engine) as s:
             v = s.query(Vocabulary).filter_by(user_id=USER, source_text="office").first()
             assert v is not None, "phonetic 端点应已写入 vocabulary 占位"
             assert v.explanation_json is None  # phonetic 不回填
-            assert v.source_type == "bbc_eaw"
+            assert v.source_type == "article"
             assert v.item_type == "word"
     finally:
         app.dependency_overrides.pop(get_current_user_id_optional, None)
@@ -40,7 +40,7 @@ def test_phonetic_logged_in_with_source_creates_pending():
 def test_phonetic_anonymous_still_returns_ipa_no_vocab():
     app.dependency_overrides[get_current_user_id_optional] = lambda: None
     try:
-        body = {"text": "office", "source_type": "bbc_eaw", "source_ref": "ep-12", "item_type": "word"}
+        body = {"text": "office", "source_type": "article", "source_ref": "ep-12", "item_type": "word", "series": "bbc_eaw"}
         resp = client.post("/practice/explain/phonetic", json=body)
         assert resp.status_code == 200
         with OrmSession(engine) as s:
diff --git a/tests/test_v08_vocab_list_by_source_type.py b/tests/test_v08_vocab_list_by_source_type.py
index a221b35..0ad83e6 100644
--- a/tests/test_v08_vocab_list_by_source_type.py
+++ b/tests/test_v08_vocab_list_by_source_type.py
@@ -20,17 +20,17 @@ def _cleanup():
 
 def test_filter_by_bbc_eaw_returns_only_bbc():
     save_item(user_id=USER, source_text="bbc word", item_type="word",
-              source_type="bbc_eaw", source_ref="ep-1")
+              source_type="article", source_ref="ep-1", series="bbc_eaw")
     save_item(user_id=USER, source_text="translate word", item_type="word",
               source_type="translate", source_ref=None)
-    items = list_items(user_id=USER, source_type="bbc_eaw")
+    items = list_items(user_id=USER, source_type="article")
     assert len(items) == 1
     assert items[0]["source_text"] == "bbc word"
 
 
 def test_no_filter_returns_all():
     save_item(user_id=USER, source_text="bbc word", item_type="word",
-              source_type="bbc_eaw", source_ref="ep-1")
+              source_type="article", source_ref="ep-1", series="bbc_eaw")
     save_item(user_id=USER, source_text="translate word", item_type="word",
               source_type="translate", source_ref=None)
     items = list_items(user_id=USER)
diff --git a/tests/test_v08_vocab_router_source_type.py b/tests/test_v08_vocab_router_source_type.py
index 79e50d2..b79c5c1 100644
--- a/tests/test_v08_vocab_router_source_type.py
+++ b/tests/test_v08_vocab_router_source_type.py
@@ -30,9 +30,9 @@ def _cleanup():
 
 
 def test_get_vocab_with_source_type_bbc():
-    save_item(user_id=USER, source_text="bbc", item_type="word", source_type="bbc_eaw", source_ref="ep-1")
+    save_item(user_id=USER, source_text="bbc", item_type="word", source_type="article", source_ref="ep-1", series="bbc_eaw")
     save_item(user_id=USER, source_text="trans", item_type="word", source_type="translate", source_ref=None)
-    resp = client.get("/vocab?source_type=bbc_eaw")
+    resp = client.get("/vocab?source_type=article")
     assert resp.status_code == 200
     body = resp.json()
     assert body["count"] == 1
@@ -40,7 +40,7 @@ def test_get_vocab_with_source_type_bbc():
 
 
 def test_get_vocab_no_source_type_returns_all():
-    save_item(user_id=USER, source_text="bbc", item_type="word", source_type="bbc_eaw", source_ref="ep-1")
+    save_item(user_id=USER, source_text="bbc", item_type="word", source_type="article", source_ref="ep-1", series="bbc_eaw")
     save_item(user_id=USER, source_text="trans", item_type="word", source_type="translate", source_ref=None)
     resp = client.get("/vocab")
     assert resp.status_code == 200
diff --git a/tests/test_v08_vocab_update_explanation.py b/tests/test_v08_vocab_update_explanation.py
index 02465b1..05c4a50 100644
--- a/tests/test_v08_vocab_update_explanation.py
+++ b/tests/test_v08_vocab_update_explanation.py
@@ -21,8 +21,8 @@ def _cleanup():
 def _seed(explanation_json=None, status="active"):
     item = save_item(
         user_id=USER, source_text="office banter",
-        item_type="phrase", source_type="bbc_eaw", source_ref="ep-12",
-        explanation_json=explanation_json,
+        item_type="phrase", source_type="article", source_ref="ep-12",
+        series="bbc_eaw", explanation_json=explanation_json,
     )
     if status == "deleted":
         with OrmSession(engine) as s:

From 2716dd2c133a523b507b980d093fdff9ec253475 Mon Sep 17 00:00:00 2001
From: bob798 <xbb798@gmail.com>
Date: Thu, 21 May 2026 23:19:49 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat(translate):=20Sidebar=20=E7=94=9F?=
 =?UTF-8?q?=E8=AF=8D=E6=9C=AC=20FSRS=20+=20=E6=94=B6=E8=97=8F=E9=97=AD?=
 =?UTF-8?q?=E7=8E=AF=20(PR3/4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../components/translate/TranslateSidebar.vue | 204 ++++++++++++++++--
 1 file changed, 183 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/translate/TranslateSidebar.vue b/frontend/src/components/translate/TranslateSidebar.vue
index d87a9a5..1c50aef 100644
--- a/frontend/src/components/translate/TranslateSidebar.vue
+++ b/frontend/src/components/translate/TranslateSidebar.vue
@@ -1,24 +1,112 @@
 <script setup>
 /**
- * TranslateSidebar · 右侧生词本侧边栏
- * PR1 placeholder — 生词本 FSRS 功能在 PR3 中实现
+ * TranslateSidebar · 右侧生词本侧边栏 — PR3: FSRS + 收藏闭环
+ *
+ * - 加载 GET /vocab?limit=500 + 本地过滤 source_type=translate
+ * - 4 档评分（again/hard/good/easy）→ POST /vocab/{id}/rate
+ * - item_type chip 过滤（全部/单词/句子）
+ * - due 倒计时
  */
+import { ref, computed, onMounted, watch } from 'vue'
+import { useAuthFetch, getErrorMessage } from '@/composables/useAuthFetch'
+import { API } from '@/config'
 
-defineProps({
-  open: {
-    type: Boolean,
-    default: true,
-  },
+const props = defineProps({
+  open: { type: Boolean, default: true },
 })
+
+const { authFetchJson, authFetch } = useAuthFetch()
+
+const items = ref([])
+const loading = ref(false)
+const filterType = ref('all') // 'all' | 'word' | 'sentence'
+
+const filtered = computed(() => {
+  let list = items.value.filter(v => v.source_type === 'translate' && v.status === 'active')
+  if (filterType.value !== 'all') {
+    list = list.filter(v => v.item_type === filterType.value)
+  }
+  return list
+})
+
+const dueCount = computed(() => filtered.value.filter(v => v.is_due).length)
+
+async function loadVocab() {
+  loading.value = true
+  try {
+    const resp = await authFetch(`${API.VOCAB}?limit=500`, { method: 'GET' })
+    if (resp.ok) {
+      const data = await resp.json()
+      items.value = data.items || []
+    }
+  } catch { /* ignore */ }
+  finally { loading.value = false }
+}
+
+async function rateItem(id, rating) {
+  try {
+    const data = await authFetchJson(`${API.VOCAB}/${id}/rate`, { rating })
+    // 用返回的 item 替换列表中的条目
+    if (data.item) {
+      const idx = items.value.findIndex(v => v.id === id)
+      if (idx !== -1) items.value[idx] = data.item
+    }
+  } catch { /* ignore */ }
+}
+
+function dueLabel(due) {
+  if (!due) return '待复习'
+  const diff = new Date(due) - Date.now()
+  if (diff <= 0) return '待复习'
+  const hours = Math.floor(diff / 3600000)
+  if (hours < 1) return `${Math.ceil(diff / 60000)}分钟后`
+  if (hours < 24) return `${hours}小时后`
+  return `${Math.floor(hours / 24)}天后`
+}
+
+onMounted(() => { if (props.open) loadVocab() })
+watch(() => props.open, (v) => { if (v) loadVocab() })
 </script>
 
 <template>
   <aside v-if="open" class="sidebar">
     <div class="sidebar-header">
       <span class="sidebar-title">📖 生词本</span>
+      <span v-if="dueCount > 0" class="due-badge">{{ dueCount }} 待复习</span>
+    </div>
+
+    <!-- Type filter chips -->
+    <div class="filter-bar">
+      <button
+        v-for="t in [{key:'all',label:'全部'},{key:'word',label:'单词'},{key:'sentence',label:'句子'}]"
+        :key="t.key"
+        class="chip"
+        :class="{ active: filterType === t.key }"
+        @click="filterType = t.key"
+      >{{ t.label }}</button>
     </div>
+
     <div class="sidebar-body">
-      <p class="placeholder-text">生词本功能将在后续版本中升级</p>
+      <div v-if="loading" class="placeholder-text">加载中...</div>
+      <div v-else-if="!filtered.length" class="placeholder-text">
+        翻译内容会自动出现在这里
+      </div>
+      <div v-else class="vocab-list">
+        <div v-for="item in filtered" :key="item.id" class="vocab-item" :class="{ due: item.is_due }">
+          <div class="item-text">{{ item.source_text }}</div>
+          <div v-if="item.translated_text" class="item-trans">{{ item.translated_text }}</div>
+          <div class="item-meta">
+            <span class="item-type">{{ item.item_type === 'word' ? '词' : '句' }}</span>
+            <span class="item-due">{{ dueLabel(item.due) }}</span>
+          </div>
+          <div v-if="item.is_due" class="rate-buttons">
+            <button class="rate again" @click="rateItem(item.id, 'again')">Again</button>
+            <button class="rate hard" @click="rateItem(item.id, 'hard')">Hard</button>
+            <button class="rate good" @click="rateItem(item.id, 'good')">Good</button>
+            <button class="rate easy" @click="rateItem(item.id, 'easy')">Easy</button>
+          </div>
+        </div>
+      </div>
     </div>
   </aside>
 </template>
@@ -34,33 +122,107 @@ defineProps({
   height: 100%;
   min-height: 320px;
 }
-
 .sidebar-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: var(--space-2) var(--space-3);
   border-bottom: 1px solid var(--border);
   background: var(--bg);
 }
-
-.sidebar-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-1);
+.sidebar-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
+.due-badge {
+  font-size: 11px;
+  background: var(--accent);
+  color: var(--text-inverse);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+.filter-bar {
+  display: flex;
+  gap: 4px;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border);
+}
+.chip {
+  font-size: 11px;
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg);
+  color: var(--text-2);
+  cursor: pointer;
+}
+.chip.active {
+  background: var(--accent);
+  color: var(--text-inverse);
+  border-color: var(--accent);
 }
-
 .sidebar-body {
   flex: 1;
-  padding: var(--space-4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  overflow-y: auto;
+  padding: var(--space-2);
 }
-
 .placeholder-text {
   font-size: 13px;
   color: var(--text-3);
   text-align: center;
-  line-height: 1.6;
+  padding: var(--space-4);
+}
+.vocab-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.vocab-item {
+  padding: var(--space-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+}
+.vocab-item.due {
+  border-left: 3px solid var(--accent);
+}
+.item-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-1);
+  margin-bottom: 2px;
+}
+.item-trans {
+  font-size: 12px;
+  color: var(--text-2);
+  margin-bottom: 4px;
+}
+.item-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--text-3);
+}
+.item-type {
+  background: var(--bg-elevated);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+.rate-buttons {
+  display: flex;
+  gap: 4px;
+  margin-top: var(--space-1);
+}
+.rate {
+  flex: 1;
+  font-size: 11px;
+  padding: 3px 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text-2);
+  cursor: pointer;
 }
+.rate:hover { background: var(--bg-elevated); }
+.rate.again:hover { color: #c6463a; border-color: #c6463a; }
+.rate.hard:hover { color: #e67e22; border-color: #e67e22; }
+.rate.good:hover { color: var(--accent); border-color: var(--accent); }
+.rate.easy:hover { color: #2ecc71; border-color: #2ecc71; }
 </style>

From 2a8b17c6462cdb893424fc87941aa321648ba8da Mon Sep 17 00:00:00 2001
From: bob798 <xbb798@gmail.com>
Date: Thu, 21 May 2026 23:21:37 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat(translate):=20=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=20FAB=20+=20bottom-sheet=20(PR4/4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/views/Translate.vue | 95 +++++++++++++++++++++++++++++++-
 1 file changed, 93 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Translate.vue b/frontend/src/views/Translate.vue
index a889312..c4666c5 100644
--- a/frontend/src/views/Translate.vue
+++ b/frontend/src/views/Translate.vue
@@ -29,6 +29,17 @@ const { authFetchJson } = useAuthFetch()
 
 // ═══ Layout state ═══
 const sidebarOpen = ref(true)
+const sheetOpen = ref(false)
+const isMobile = ref(false)
+
+function checkMobile() {
+  isMobile.value = window.innerWidth < 1024
+  if (isMobile.value) sidebarOpen.value = false
+}
+if (typeof window !== 'undefined') {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+}
 
 // ═══ Translation state ═══
 const direction = ref('zh2en')
@@ -200,6 +211,7 @@ function _toast(text, type = 'info', duration = 1800) {
 onUnmounted(() => {
   clearTimeout(debounceTimer)
   abortCtrl?.abort()
+  if (typeof window !== 'undefined') window.removeEventListener('resize', checkMobile)
 })
 </script>
 
@@ -251,11 +263,28 @@ onUnmounted(() => {
           </p>
         </div>
 
-        <!-- Right: sidebar -->
-        <TranslateSidebar :open="sidebarOpen" />
+        <!-- Right: sidebar (desktop) -->
+        <TranslateSidebar v-if="!isMobile" :open="sidebarOpen" />
       </div>
     </main>
 
+    <!-- Mobile FAB + bottom sheet -->
+    <button v-if="isMobile" class="fab" @click="sheetOpen = true" aria-label="打开生词本">
+      📖
+    </button>
+
+    <Teleport to="body">
+      <Transition name="sheet">
+        <div v-if="sheetOpen" class="sheet-overlay" @click.self="sheetOpen = false">
+          <div class="sheet-container" role="dialog" aria-label="生词本">
+            <div class="sheet-grip" />
+            <button class="sheet-close" @click="sheetOpen = false" aria-label="关闭">✕</button>
+            <TranslateSidebar :open="true" />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
     <Transition name="toast">
       <div v-if="toast.show" class="toast" :class="toast.type">{{ toast.text }}</div>
     </Transition>
@@ -385,4 +414,66 @@ onUnmounted(() => {
 .toast-leave-to {
   opacity: 0;
 }
+
+/* Mobile FAB */
+.fab {
+  position: fixed;
+  bottom: calc(var(--safe-bottom) + var(--space-4));
+  right: var(--space-4);
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--text-inverse);
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  z-index: 40;
+}
+.fab:active { transform: scale(0.92); }
+
+/* Bottom sheet overlay */
+.sheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: var(--z-modal, 200);
+  display: flex;
+  align-items: flex-end;
+}
+.sheet-container {
+  width: 100%;
+  max-height: min(60vh, calc(100vh - var(--safe-top, 0px) - 48px));
+  background: var(--bg);
+  border-radius: var(--radius) var(--radius) 0 0;
+  overflow-y: auto;
+  position: relative;
+  padding-bottom: var(--safe-bottom, 0px);
+}
+.sheet-grip {
+  width: 36px;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  margin: 8px auto;
+}
+.sheet-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-size: 18px;
+  color: var(--text-3);
+  z-index: 1;
+}
+.sheet-close:hover { color: var(--text-1); }
+
+/* Sheet transitions */
+.sheet-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.sheet-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
+.sheet-enter-from { opacity: 0; }
+.sheet-enter-from .sheet-container { transform: translateY(100%); }
+.sheet-leave-to { opacity: 0; }
+.sheet-leave-to .sheet-container { transform: translateY(100%); }
 </style>