wip

2025-12-05 23:52:11 +08:00
parent 0a8cd8182a
commit 6340c122a7
5 changed files with 1 additions and 361 deletions
--- a/迁移计划.md
+++ b/迁移计划.md
@@ -1,132 +0,0 @@
-# TypeWords Nuxt 4 迁移计划
-
-## 1. 需求文档
-
-### 1.1 项目概述
-
-TypeWords 是一个基于 Web 的打字练习应用，专注于语言学习（英语单词和文章）。它提供多种练习模式、词典管理和进度跟踪功能。目标是将现有的 Vue 3 SPA（单页应用）迁移到 **Nuxt 4** 应用，以充分利用最新的框架特性、提升性能、SEO 和开发体验。
-
-### 1.2 核心功能
-
-* **单词练习**:
-  * 学习模式：跟写、拼写、辨析、听音、听写。
-  * 间隔重复：新词、复习、拼写、乱序。
-  * 词典选择：CET-4、CET-6、雅思（IELTS）等。
-  * 统计数据：花费时间、学习/复习单词数。
-
-* **文章练习**:
-  * 打字练习：支持音频同步（LRC）。
-  * 阅读模式。
-  * 句子级练习。
-
-* **用户系统**:
-  * 登录/注册。
-  * VIP 会员状态。
-  * 用户设置同步。
-
-* **设置**:
-  * 快捷键自定义。
-  * 主题切换。
-  * 声音/音量控制。
-  * 翻译引擎选择。
-
-* **离线/本地能力**:
-  * PWA 支持（Service Worker）。
-  * 本地数据存储（IndexedDB）。
-
-### 1.3 非功能性需求
-
-* **性能**: 流畅的打字体验，无延迟。
-* **兼容性**: 支持现代浏览器。
-* **离线优先**: 支持离线使用已下载的词典。
-
-## 2. 技术规范
-
-### 2.1 技术栈
-
-| 组件 | 当前 (Vue 3) | 目标 (Nuxt 4) |
-| :--- | :--- | :--- |
-| **框架** | Vue 3.5 + Vite | **Nuxt 4.x** |
-| **语言** | TypeScript | TypeScript |
-| **状态管理** | Pinia | Pinia (Nuxt 模块) |
-| **路由** | Vue Router (配置式) | Nuxt 基于文件的路由 |
-| **UI/样式** | Sass, UnoCSS | Sass, UnoCSS (Nuxt 模块) |
-| **图标** | Iconify (unplugin) | Nuxt Icon / Iconify |
-| **HTTP** | Axios | $fetch / useFetch |
-| **存储** | IndexedDB (idb-keyval) | IndexedDB (idb-keyval) |
-| **工具库** | Lodash, Dayjs | Lodash, Dayjs |
-
-### 2.2 数据模型
-
-* **单词 (Word)**: JSON 结构，包含拼写、音标、翻译、例句、短语、同义词和词根。
-* **文章 (Article)**: JSON 结构，包含标题、正文、音频链接、LRC 时间轴和问题。
-* **词典 (Dictionary)**: 元数据 + 单词/文章列表。
-* **用户 (User)**: 个人资料、设置、进度数据。
-
-### 2.3 关键算法
-
-* **打字引擎**: 处理输入匹配、错误高亮和 WPM（每分钟字数）计算。
-* **间隔重复**: 决定哪些单词需要复习的逻辑。
-* **音频同步**: 使用 LRC 数据将音频播放时间映射到文本位置。
-
-## 3. 架构文档
-
-### 3.1 目录结构映射 (采用 Nuxt 4 推荐结构)
-
-Nuxt 4 推荐将源码主要放置在 `app/` 目录下，以保持根目录整洁（也可继续使用根目录模式，视具体配置而定）。以下以标准结构为例：
-
-```
-src/                  ->   app/ (或根目录)
-  apis/               ->   composables/api/ 或 utils/api/
-  assets/             ->   assets/
-  components/         ->   components/
-  config/             ->   app.config.ts / runtimeConfig
-  directives/         ->   plugins/directives.ts
-  hooks/              ->   composables/
-  libs/               ->   utils/ 或 server/ (如果需要 API 路由)
-  locales/            ->   i18n/
-  pages/              ->   pages/
-  stores/             ->   stores/
-  types/              ->   types/ (或 utils/types)
-  utils/              ->   utils/
-  App.vue             ->   app.vue
-  main.ts             ->   plugins/ (初始化逻辑)
-  router.ts           ->   pages/ (文件路由)
-public/               ->   public/
-```
-
-### 3.2 状态管理流
-
-* **全局状态**: 保留 Pinia store (`user`, `setting`, `runtime`, `practice`)。
-* **水合 (Hydration)**: Nuxt 处理状态水合。注意 `localStorage`/`IndexedDB` 的客户端仅有性（使用 `ClientOnly` 或 `onMounted`）。
-
-### 3.3 路由策略
-
-* **当前**: `router.ts` 定义显式路由。
-* **目标**: `pages/` 目录结构。
-  * `pages/words/index.vue`
-  * `pages/practice-words/[id].vue`
-  * `pages/articles/index.vue`
-  * `pages/user/login.vue`
-  * 等等。
-
-## 4. 实施步骤
-
-1. **初始化**: 创建一个新的 **Nuxt 4** 项目（使用 `nuxi init` 并选择最新版本）。
-2. **依赖安装**: 安装 Pinia, UnoCSS, Sass 和其他库的 Nuxt 兼容版本。
-3. **资源迁移**: 移动 `public/` 内容和 `assets/` 样式。
-4. **核心逻辑迁移**:
-   * 复制 `types/`。
-   * 将 `utils/` 和 `hooks/` 转换为 `composables/`。
-   * 设置 Pinia `stores/`。
-5. **组件迁移**:
-   * 移动 `components/`（利用自动导入）。
-   * 修复导入路径。
-6. **页面迁移**:
-   * 在 `pages/` 中重建路由结构。
-   * 移动页面组件，适配 Nuxt 页面元数据 (`definePageMeta`)。
-7. **插件/配置**:
-   * 注册自定义指令。
-   * 配置 UnoCSS。
-   * 处理 PWA/Service Worker（可能需要 `vite-pwa/nuxt`）。
-8. **验证**: 测试所有练习模式和数据加载。
--- a/系统架构文档.md
+++ b/系统架构文档.md
@@ -1,84 +0,0 @@
-# TypeWords 系统架构文档
-
-## 1. 架构概览
-
-本项目由 Vue 3 单页应用 (SPA) 迁移至 Nuxt 4 全栈框架。架构旨在提供高性能的客户端交互（打字体验）和优化的服务端渲染（SEO、首屏加载）。
-
-### 1.1 技术栈对比
-
-| 层级 | 原架构 (Vue 3) | 新架构 (Nuxt 4) | 说明 |
-| :--- | :--- | :--- | :--- |
-| **Runtime** | Browser Only | Node.js (Server) + Browser | 支持 SSR/SSG |
-| **Framework** | Vue 3.5 + Vite | Nuxt 4.x | 约定优于配置 |
-| **Language** | TypeScript | TypeScript | 强类型约束 |
-| **State** | Pinia | Pinia (Nuxt Module) | 状态管理 |
-| **Routing** | Vue Router (Manual) | Nuxt File System Routing | 自动路由生成 |
-| **UI Framework** | UnoCSS + SCSS | UnoCSS (Nuxt Module) | 原子化 CSS |
-| **HTTP Client** | Axios | $fetch / useFetch | Nuxt 内置 fetch |
-| **Storage** | IndexedDB (idb-keyval) | IndexedDB (Client Only) | 本地大容量存储 |
-
-## 2. 目录结构设计
-
-遵循 Nuxt 4 的最佳实践，采用 `app/` 目录结构以保持根目录整洁。
-
-```
-nuxt-tw/
-├── app/
-│   ├── assets/            # 静态资源 (CSS, Images)
-│   ├── components/        # Vue 组件 (自动导入)
-│   │   ├── base/          # 基础 UI 组件 (Button, Input)
-│   │   ├── business/      # 业务组件 (WordCard, TypingArea)
-│   │   └── layout/        # 布局组件 (Header, Footer)
-│   ├── composables/       # 组合式函数 (原 hooks + apis)
-│   │   ├── api/           # API 接口封装
-│   │   └── usePractice.ts # 练习逻辑封装
-│   ├── layouts/           # 页面布局模板
-│   ├── middleware/        # 路由中间件 (Auth 守卫)
-│   ├── pages/             # 页面路由
-│   ├── plugins/           # 插件 (Directives, 3rd-party libs)
-│   ├── stores/            # Pinia 状态仓库
-│   ├── types/             # TypeScript 类型定义
-│   ├── utils/             # 工具函数
-│   └── app.vue            # 应用入口
-├── public/                # 公共静态文件 (favicon, robots.txt)
-├── server/                # (可选) 服务端 API 路由
-├── nuxt.config.ts         # Nuxt 配置文件
-├── uno.config.ts          # UnoCSS 配置文件
-└── package.json
-```
-
-## 3. 核心模块架构
-
-### 3.1 状态管理 (State Management)
-使用 Pinia 管理全局状态，主要 Store 模块：
-*   **UserStore**: 用户认证信息、Token、个人资料。
-*   **SettingStore**: 应用配置（主题、快捷键、音效）。
-*   **RuntimeStore**: 运行时临时状态（当前路由、加载状态）。
-*   **PracticeStore**: 核心业务状态（当前单词列表、输入状态、统计数据）。
-
-### 3.2 数据持久化 (Data Persistence)
-*   **IndexedDB**: 用于存储大型数据，如：
-    *   下载的词典文件 (JSON)。
-    *   文章音频数据 (Blob)。
-*   **LocalStorage**: 用于存储轻量配置，如：
-    *   用户 Token。
-    *   用户偏好设置 (Settings)。
-*   **SSR 注意事项**: IndexedDB 和 LocalStorage 仅在客户端可用。在 Nuxt 中需使用 `<ClientOnly>` 组件或在 `onMounted` 生命周期中访问，避免水合不匹配 (Hydration Mismatch)。
-
-### 3.3 路由与导航 (Routing)
-利用 Nuxt 的文件系统路由自动生成路由表：
-*   `pages/words/index.vue` -> `/words` (单词列表)
-*   `pages/practice-words/[id].vue` -> `/practice-words/:id` (单词练习)
-*   `pages/articles/index.vue` -> `/articles` (文章列表)
-*   `pages/user/login.vue` -> `/user/login` (登录)
-
-### 3.4 网络请求 (Networking)
-封装 `useFetch` 或 `$fetch` 替代 Axios：
-*   统一处理请求拦截（添加 Token）。
-*   统一处理响应拦截（错误提示、Token 过期跳转）。
-*   支持 SSR 期间的服务端数据预取。
-
-## 4. 部署架构
-*   **构建**: `nuxt build` 生成生产环境包。
-*   **模式**: 推荐使用 **SSG (Static Site Generation)** 或 **Hybrid** 模式，因为主要内容（词典、练习）强依赖客户端交互，但首页和文章页可预渲染以提升 SEO。
-*   **服务器**: Node.js 服务器或静态托管 (Vercel/Netlify/Nginx)。
--- a/需求分析文档.md
+++ b/需求分析文档.md
@@ -1,102 +0,0 @@
-# TypeWords 需求分析文档
-
-## 1. 项目概述
-TypeWords 是一个专注于语言学习的 Web 打字练习应用。它结合了打字练习与英语/外语学习，提供单词记忆、文章阅读、听写练习等多种模式。核心理念是通过键盘输入强化记忆，同时提供丰富的词典资源和进度跟踪功能。
-
-## 2. 用户角色
-*   **游客**: 可以使用基础练习功能，但数据保存在本地，无法跨设备同步，部分高级功能（如VIP词典）受限。
-*   **注册用户**: 可以同步学习进度、设置和收藏夹。
-*   **VIP 用户**: 享有更多高级功能（如特定词典、无限发音等）。
-
-## 3. 功能模块详解
-
-### 3.1 单词练习 (Word Practice)
-*   **练习模式**:
-    *   **跟写 (FollowWrite)**: 屏幕显示单词，用户照着输入。
-    *   **拼写 (Spell)**: 隐藏单词拼写，仅显示释义/发音，用户需拼写出单词。
-    *   **辨析 (Identify)**: 给出单词，选择正确的释义（或是反过来）。
-    *   **听音 (Listen)**: 播放单词发音，用户输入单词。
-    *   **听写 (Dictation)**: 连续播放一组单词，用户依次输入。
-*   **练习范围**:
-    *   **新词学习**: 系统推荐的新单词。
-    *   **复习**: 基于间隔重复算法（Spaced Repetition）复习旧单词。
-    *   **乱序练习**: 随机抽取单词练习。
-    *   **错词重练**: 针对历史错误单词进行强化练习。
-*   **交互细节**:
-    *   支持快捷键（如 Ctrl+P 播放发音，Enter 收藏）。
-    *   打字错误实时高亮。
-    *   练习结束后显示统计数据（WPM、准确率、用时）。
-
-### 3.2 文章练习 (Article Practice)
-*   **阅读/打字模式**: 用户可以对整篇文章进行打字练习。
-*   **音频同步**: 支持 LRC 格式，实现音频播放与文本高亮同步。
-*   **句式练习**: 将文章拆分为句子进行练习。
-*   **辅助功能**:
-    *   点击单词查询释义。
-    *   句子翻译对照。
-    *   支持填空题和选择题（基于文章内容）。
-
-### 3.3 词典管理 (Dictionary Management)
-*   **词典库**: 内置多种词典（CET-4/6, 雅思, 托福, 考研, 专四/八等）。
-*   **自定义词典**: 支持用户导入词典数据。
-*   **特殊词本**:
-    *   **生词本 (Collect)**: 用户手动收藏的单词。
-    *   **错题本 (Wrong)**: 自动记录拼写错误的单词。
-    *   **熟词本 (Known)**: 用户标记为“已掌握”的单词，练习时会跳过。
-
-### 3.4 用户系统 (User System)
-*   **账号管理**: 注册、登录（支持验证码）、找回密码。
-*   **个人中心**: 查看学习天数、打卡记录、VIP 状态。
-*   **数据同步**: 学习进度、偏好设置云端同步。
-
-### 3.5 设置系统 (Settings)
-*   **界面偏好**: 主题切换（深色/浅色）、字体大小、界面布局。
-*   **声音设置**: 音量调节、音效开关（打字音、错误音）。
-*   **练习设置**: 每日学习量、每组单词数、自动发音设置。
-*   **快捷键**: 全局快捷键自定义。
-
-## 4. 数据实体 (Data Entities)
-
-### 4.1 单词 (Word)
-```typescript
-interface Word {
-  id: string;
-  word: string;        // 拼写
-  phonetic0: string;   // 英式音标
-  phonetic1: string;   // 美式音标
-  trans: { pos: string; cn: string }[]; // 释义列表
-  sentences: { c: string; cn: string }[]; // 例句
-  phrases: { c: string; cn: string }[];   // 短语
-  synos: { pos: string; ws: string[] }[]; // 同义词
-  relWords: { root: string; rels: ... }[]; // 词根/派生词
-  etymology: { t: string; d: string }[];   // 词源
-}
-```
-
-### 4.2 文章 (Article)
-```typescript
-interface Article {
-  title: string;
-  text: string;
-  audioSrc: string;    // 音频链接
-  lrcPosition: number[][]; // LRC 时间轴
-  questions: Question[]; // 配套习题
-}
-```
-
-### 4.3 词典 (Dict)
-```typescript
-interface Dict {
-  id: string;
-  name: string;
-  category: string;
-  words: Word[];
-  lastLearnIndex: number; // 学习进度
-}
-```
-
-## 5. 非功能性需求
-*   **性能**: 打字响应延迟需极低（<50ms），确保跟手感。
-*   **离线能力**: 已下载的词典应支持离线使用（PWA + IndexedDB）。
-*   **兼容性**: 适配主流桌面浏览器（Chrome, Edge, Firefox, Safari）。
-*   **SEO**: 首页和公共资源页需对搜索引擎友好（Nuxt SSR）。
--- a/docs/更新后的详细执行计划.md
+++ b/docs/更新后的详细执行计划.md
@@ -1,42 +0,0 @@
-遵照您的指示，我将在迁移代码之前，先梳理并输出详细的需求文档和架构文档。
-
-**更新后的详细执行计划:**
-
-### 第一阶段：文档编写 (Documentation)
-1.  **需求文档 (`documents/Requirement_Analysis.md`)**:
-    *   基于源码（`router.ts`, `types.ts` 等）深度解析现有功能。
-    *   详细列出功能模块：单词练习（多种模式）、文章练习（音频同步）、词典管理（本地/在线）、用户系统（VIP/同步）、快捷键系统等。
-    *   明确数据结构：Word, Article, Dict, User 等核心实体的定义。
-2.  **架构文档 (`documents/System_Architecture.md`)**:
-    *   **技术栈**: Vue 3 -> Nuxt 4, Pinia, UnoCSS, IndexedDB。
-    *   **目录结构**: 详细对比 `TypeWords` 和 `nuxt-tw` 的目录映射关系。
-    *   **数据流**: 描述前端与后端 (API)、本地存储 (IndexedDB) 的交互流程。
-    *   **路由设计**: 规划 Nuxt 的文件路由结构。
-
-### 第二阶段：基础设施与依赖 (Infrastructure & Dependencies)
-1.  **清理与配置**:
-    *   移除 `nuxt-tw` 中的临时文件和 `@nuxt/ui` 及其 Tailwind 依赖。
-    *   配置 `nuxt.config.ts`：移除 UI 模块，添加 `@unocss/nuxt`。
-    *   创建 `uno.config.ts`。
-2.  **依赖安装**:
-    *   安装核心依赖：`unocss`, `pinia`, `sass`, `idb-keyval`, `dayjs`, `lodash` 等。
-
-### 第三阶段：核心逻辑迁移 (Core Logic)
-1.  **类型与工具**: 迁移 `types` 和 `utils/libs`。
-2.  **状态管理**: 迁移 `stores` 到 Nuxt Pinia 模块。
-3.  **Composables**: 重构 `hooks` 和 `apis` 为 Nuxt Composables。
-
-### 第四阶段：资源与组件 (Assets & Components)
-1.  **静态资源**: 迁移 `assets` 和 `public`。
-2.  **组件迁移**: 迁移并适配所有 Vue 组件。
-
-### 第五阶段：页面与路由 (Pages & Routing)
-1.  **页面重构**: 将 Vue Router 配置转换为 `pages/` 目录结构。
-2.  **元数据适配**: 使用 `definePageMeta` 和 `useHead`。
-
-### 第六阶段：验证 (Verification)
-1.  **功能测试**: 验证核心业务流程（登录、练习、词典加载）。
-2.  **样式检查**: 确保 UnoCSS 样式正确应用。
-
-**确认执行？**
-如果同意，我将首先生成两份文档，供您查阅和存档。
--- a/public/dicts/en/article/NCE_1.json
+++ b/public/dicts/en/article/NCE_1.json
@@ -465,7 +465,7 @@
    "id": "wr-2ZE",
    "title": "The weekend",
    "titleTranslate": "周末",
-    "text": "MRS. JOHNSON:Hello. Where you at the butcher's?\n\nMRS. WILLIAMS:Yes. I was.\n\nWere you at butcher's too?\n\nMRS. JOHNSON:No, I wasn't\n\nI was at the greengrocer's.\n\nHow's Jimmy today?\n\nMRS. WILLIAMS:He's very well, thank you.\n\nMRS. JOHNSON:Was he absent from school last week?\n\nMRS. WILLIAMS:Yes, he was.\n\nHe was absent on Monday,Tuesday,Wednesday and Tuesday.\n\nHow are you all keeping?\n\nMRS. JOHNSON:Very well, thank you.\n\nWe're going to spend three days in the country.\n\nWe're going to stay at my mother's for the weekend.\n\nMRS. WILLIAMS:Friday, Saturday and Sunday in the country!\n\nAren't you lucky!",
+    "text": "MRS. JOHNSON:Hello. Where you at the butcher's?\n\nMRS. WILLIAMS:Yes. I was.\n\nWere you at butcher's too?\n\nMRS. JOHNSON:No, I wasn't\n\nI was at the greengrocer's.\n\nHow's Jimmy today?\n\nMRS. WILLIAMS:He's very well, thank you.\n\nMRS. JOHNSON:Was he absent from school last week?\n\nMRS. WILLIAMS:Yes, he was.\n\nHe was absent on Monday,Tuesday,Wednesday and Thursday.\n\nHow are you all keeping?\n\nMRS. JOHNSON:Very well, thank you.\n\nWe're going to spend three days in the country.\n\nWe're going to stay at my mother's for the weekend.\n\nMRS. WILLIAMS:Friday, Saturday and Sunday in the country!\n\nAren't you lucky!",
    "textTranslate": "约翰逊夫人：您好。刚才您在肉店里吗？ \n\n威廉斯夫人：是的，我在肉店里。 \n\n您也在肉店里吗？ \n\n约翰逊夫人：不， 我不是。 \n\n我在蔬菜水果店里。 \n\n吉米今天怎么样？ \n\n威廉斯夫人：他很好，谢谢您。 \n\n约翰逊夫人：上星期他没上学吧？ \n\n威廉斯夫人：是的，他没上学。 \n\n他星期一、 星期二、星期三和星期四没 去上学。 \n\n你们身体都好吗？ \n\n约翰逊夫人：很好，谢谢您。 \n\n我们打算到乡下去三天， \n\n在我母亲家度周末。 \n\n威廉斯夫人：星期五、星期六和星期日在乡下 过！ \n\n你们真幸运啊！",
    "newWords": [],
    "audioSrc": "/sound/article/nce1/067&068－The Weekend.mp3",