# easy-english **Repository Path**: dev_why/easy-english ## Basic Information - **Project Name**: easy-english - **Description**: 一个可以训练中翻英能力的网页。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-23 - **Last Updated**: 2026-01-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Excel 翻译练习与校验应用 一个纯前端的 Vue 3 + Composition API 实现的 Excel 翻译练习工具，支持大数据量、分页显示、实时校验、快捷键导航。 ## 📋 项目特性 - **纯前端实现**：无需后端服务，所有处理在浏览器端完成 - **Excel灵活加载**：只需一个Excel文件，自由选择任意两列作为源内容和答案 - **智能列识别**：自动识别"中文"和"英文"列，也可手动选择 - **分页显示**：每页50条数据，支持大数据量（1000+行无压力） - **实时校验**：用户输入时自动校验，显示正确/错误/未填写状态 - **快捷键导航**：Ctrl/Cmd+Enter 下一行，Shift+Enter 上一行，快速批量输入 - **大小写敏感选项**：用户可选择严格或宽松验证模式 - **Monaco Editor集成**：VS Code 原生编辑器体验，专业级输入框 - **按行查看答案**：行级状态隔离，用户可逐行选择查看正确答案 - **深色科技风主题**：类似 VS Code 的暗黑主题设计，护眼且高端 - **响应式设计**：完美适配桌面、平板和手机设备 - **友好提示**：文件加载、重复值、缺失数据都有清晰提示 ## 🚀 快速开始 ### 前置要求 - Node.js 16.0 或更高版本 - npm 或 yarn ### 安装依赖 ```bash cd excel-translator npm install ``` ### 运行开发服务器 ```bash npm run dev ``` 服务器将启动在 `http://localhost:5173`（具体端口见终端输出） ### 构建生产版本 ```bash npm run build ``` 构建产物在 `dist` 目录下，可以直接部署到任何静态服务器。 ## 📁 项目结构 ``` excel-translator/ ├── src/ │ ├── components/ │ │ └── TranslationRow.vue # 翻译行组件（核心交互） │ ├── App.vue # 主应用组件（数据管理和分页） │ ├── main.js # 入口文件 │ └── style.css # 全局样式 ├── public/ │ ├── practice.xlsx # 默认Excel文件（必需） │ └── README.md # Excel 文件使用说明 ├── scripts/ │ └── generateMockExcel.js # 测试数据生成脚本 ├── package.json ├── vite.config.js └── index.html ``` ## 📊 工作原理 ### 数据流 ``` 用户放入 practice.xlsx ↓ 页面加载时自动读取 → 解析 Excel ↓ 获取所有列名 → 智能识别"中文"和"英文"列 ↓ 用户选择源列和答案列 ↓ 分页加载数据（每页50条） ↓ 用户输入翻译 → 实时校验 → 显示结果 ``` ### 数据结构 每一行的数据结构如下： ```javascript { id: 'row-1704946800000-0', // 唯一标识（时间戳+索引） chinese: '你好', // 源内容（来自Excel源列） userInput: 'hello', // 用户输入的翻译 correctAnswer: 'hello', // 正确答案（来自Excel答案列） showAnswer: false, // 是否显示答案（行级状态） validationStatus: 'correct' // 校验状态：'correct'|'incorrect'|''|'no-answer' } ``` ## 📖 使用指南 ### 🎯 第一次使用（快速入门） 1. **准备Excel文件** - 创建一个Excel文件，包含两列数据 - 第一列：源内容（比如中文） - 第二列：答案（比如英文） 2. **放入项目** ```bash # 将你的Excel文件复制到public文件夹，重命名为practice.xlsx cp ~/你的文件.xlsx /路径/excel-translator/public/practice.xlsx ``` 3. **启动应用** ```bash npm run dev # 打开 http://localhost:5173 ``` 4. **开始练习** - 应用会自动加载并识别列 - 在输入框中输入翻译 - 系统实时校验并显示结果 ### 📝 Excel文件格式 **必需条件：** - 格式：`.xlsx` 或 `.xls` - 行数：无上限（1行到10000+行都支持） - 列数：至少2列（源内容列 + 答案列） - 首行：第一行是表头（列名），从第二行开始是数据 **推荐格式：** | 中文 | 英文 | |------|------| | 你好 | hello | | 早上好 | good morning | | 谢谢 | thank you | | 再见 | goodbye | **也支持其他列名：** | 源语言 | 目标语言 | |--------|---------| | Apple | 苹果 | | Banana | 香蕉 | > 系统会自动识别列名包含"中文"或"英文"的列，也可以手动在页面选择。 ### ⚠️ 重要注意事项 1. **列名要清晰** - 避免列名中文符号或特殊字符过多 - 建议：`中文`、`英文` 或 `Source`、`Target` 2. **数据完整性** - 确保没有空行（系统会自动过滤） - 源列和答案列都要有数据 3. **文件名固定** - 必须命名为 `practice.xlsx` - 放在 `public` 文件夹中 4. **更新文件流程** ```bash # 1. 替换 public/practice.xlsx 为新文件 cp 新文件.xlsx public/practice.xlsx # 2. 浏览器硬刷新（清除缓存） # Mac: Cmd + Shift + R # Windows/Linux: Ctrl + Shift + R # 不需要重启服务器！ ``` ### 🎮 用户功能 #### 1️⃣ 列选择 - 页面上方有两个下拉菜单 - "要翻译的列"：选择源内容（通常是中文） - "答案列"：选择正确答案（通常是英文） - 修改选择后自动重新加载数据 #### 2️⃣ 大小写敏感 - 页面上方的开关可选择： - **启用（默认）**："Apple" 和 "apple" 都视为正确 - **禁用**："Apple" 和 "apple" 视为不同 - 选择会自动保存到浏览器本地存储 #### 3️⃣ 实时校验 - 用户输入后自动校验 - 显示三种状态： - ✅ **正确**（绿色） - ❌ **错误**（红色） - （空白）**未填写** #### 4️⃣ 查看答案 - 每行都有"查看答案"按钮 - 点击后显示该行的正确答案 - 其他行的答案保持隐藏 #### 5️⃣ 快捷键导航 - **Ctrl+Enter / Cmd+Enter**：跳转到下一行 - **Shift+Enter**：回退到上一行 - 在输入框中按这些快捷键，焦点自动移动到相邻行 #### 6️⃣ 统一校验 - 点击"开始校验"按钮，一次校验所有行 - 用于检查有哪些行还没有填写 #### 7️⃣ 分页 - 页面显示一页50条数据 - 点击"上一页"/"下一页"切换 - 显示当前页数和数据范围 #### 8️⃣ 统计信息 - 总计：Excel中所有数据行数 - 已校验：用户已输入的行数 - 正确：校验通过的行数 - 错误：校验失败的行数 ## 🔧 系统架构 ### 核心组件 #### App.vue（主应用组件） **职责**：数据管理、分页逻辑、状态协调 **关键变量**： - `rows`：所有行数据的数组 - `excelData`：原始Excel数据（用于切换列选择时恢复） - `currentPage`：当前页码 - `pageSize`：每页条数（固定50） - `sourceColumn`、`answerColumn`：用户选择的列 **关键方法**： - `loadExcel(url, filename)`：从URL加载Excel文件 - `processData()`：根据选定的列生成行数据 - `validateRow(row)`：校验单行 - `handleRowUpdate(payload)`：处理行更新事件 - `nextPage()`、`prevPage()`：分页导航 - `handleNextRow()`、`handlePrevRow()`：快捷键导航 **计算属性**： - `paginatedRows`：当前页应显示的数据 - `totalPages`：总页数 - `validatedCount`、`correctCount`、`incorrectCount`：统计信息 #### TranslationRow.vue（翻译行组件） **职责**：单行编辑和交互 **关键变量**： - `row`：行数据对象（从父组件传入） - `localInput`：本地输入框值（用于防抖） - `debounceTimer`：防抖计时器 **关键方法**： - `emitUpdate()`：发送行更新事件（300ms防抖） - `toggleAnswer()`：显示/隐藏答案 - `handleKeyDown(event)`：处理快捷键 - `focusEditor()`：获取焦点（供父组件调用） **props**： - `row`：行数据 - `index`：行索引 **emits**： - `update`：行数据变化 - `next-row`：快捷键切换到下一行 - `prev-row`：快捷键切换到上一行 ### 数据流向 ``` User Input ↓ TranslationRow.vue (300ms防抖) ↓ emit('update') → App.vue ↓ handleRowUpdate() → 更新rows数据 ↓ validateRow() → 校验 ↓ Vue响应式更新 → 视图重新渲染 ``` ### 状态管理方式 采用 **Vue 3 Composition API + ref** 的方式，没有使用 Pinia/Vuex： **优点**： - 简单直接，无需额外学习 - 数据流清晰 - 小型应用足够 **缺点**： - 复杂逻辑时可能需要refactor 如果未来数据规模增长，可以考虑迁移到 Pinia。 ## 🛠 开发和维护指南 ### 修改Excel文件 ```bash # 生成测试数据 node scripts/generateMockExcel.js 1000 # 生成1000行 # 或手动放入文件 cp 你的文件.xlsx public/practice.xlsx # 硬刷新浏览器 # Mac: Cmd+Shift+R # Windows: Ctrl+Shift+R ``` ### 修改分页大小 编辑 `src/App.vue`，修改第165行： ```javascript const pageSize = ref(50); // 改为你想要的数字 ``` ### 修改校验规则 编辑 `src/App.vue` 的 `validateRow()` 函数（约第325行）： ```javascript function validateRow(row) { // 修改这里的校验逻辑 // 例如：允许部分匹配、忽略标点符号等 let userAnswer = row.userInput.trim() let correctAnswer = row.correctAnswer.trim() if (caseInsensitive.value) { userAnswer = userAnswer.toLowerCase() correctAnswer = correctAnswer.toLowerCase() } // 可以在这里添加自定义规则 row.validationStatus = userAnswer === correctAnswer ? 'correct' : 'incorrect' } ``` ### 修改防抖延迟 编辑 `src/components/TranslationRow.vue`，修改防抖延迟（约第80行）： ```javascript debounceTimer = setTimeout(() => { emit('update', { rowId: props.row.id, userInput: localInput.value }); }, 300); // 改为你想要的毫秒数 ``` ### 修改样式 所有样式都在对应组件的 `