CORNER BOOK - 英语精读教学辅助工具

CORNER BOOK 是一款专为英语老师设计的课堂精读教学辅助工具。它通过优雅的视觉设计和交互体验，帮助老师在课堂上更生动地展示文章、讲解词汇。

核心特性

• 高级感设计：采用 Luxury / Editorial 设计风格，米色背景，衬线字体，营造沉浸式阅读氛围。
• 全库语料联动：自动扫描全书库，将所有包含关键词的真实句子提取为词条例句，实现跨文章的语境打通。
• 多图卡片支持：段落和词汇支持上传多张配图，系统自动创建轮播展示，增强视觉教学效果。
• 鱼眼放大特效：鼠标悬停单词时产生动态缩放效果，聚焦教学重点，提升课堂注意力。
• 词组高亮支持：识别并整体高亮/缩放多词词组（如 "drawn to"），并物理性地“推开”周围文字，保持阅读呼吸感。
• 动态语境跳转：从单词本一键跳转至库内任意出现该词的段落，并自动定位展开词卡。
• 个性化视觉标记：支持为词汇设置专属色系（金、绿、红、蓝、橙），划线效果与词卡颜色全局同步。
• 数据救灾系统：内置自动迁移工具，支持从多个历史版本的本地数据库中“打捞”数据，确保用户在更新网址后数据不丢失。
• 本地化与私密性：基于 IndexedDB，所有数据均存储在用户浏览器本地，支持完全离线使用。

快速开始

环境要求

• Node.js 18.x 或更高版本
• 现代浏览器（Chrome, Edge, Safari）

安装步骤

1. 克隆仓库

git clone https://github.com/your-username/corner-book.git
cd corner-book

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

使用指南

1. 管理课程：在首页点击 + New Entry 创建新文章。
2. 编辑内容：
   • 在左侧输入或粘贴段落文字。
   • 点击段落激活，在右侧添加词汇。系统会自动搜索库内其他文章中的相同词语并展示为“备选语境”。
   • 勾选需要的语境，它们将作为正式例句显示在展示模式中。
3. 展示讲解：
   • 点击 Enter Exhibition 进入展示模式。
   • 鼠标悬停单词体验 Fisheye 缩放，点击高亮单词弹出多维度词卡。
4. 单词复习：点击顶栏 单词本。支持关键词搜索，并能通过“语境跳转”快速回到原文。

技术栈

• 框架: React 18 + Vite
• 样式: Tailwind CSS
• 动画: Framer Motion
• 数据库: Dexie.js (IndexedDB)
• 状态管理: Zustand
• 图标: Lucide React

开源协议

本项目采用 MIT License 协议。

💡 常见问题 (FAQ)

1. 换了网址或更换电脑后，之前的文章找不到了？

数据存储在您的浏览器本地 (IndexedDB)。

• 旧版迁移：系统会自动扫描旧库名（如 EnglishReadingDB_v3/v5/v6 等）并自动迁移到当前版本。
• 备份建议：使用“导出文章”功能保存 .json 文件。在另一台设备上点击“导入文章”即可完美还原所有内容、进度及配图。

2. 刷新页面出现 404？

本项目为单页面应用 (SPA)，如果您在 Vercel 或 Netlify 部署，系统已内置 vercel.json 和 _redirects 配置文件以解决路由重定向问题。

---

更新日志

v1.3.0 - 2026-02-24

• [重磅] 多图卡片系统：段落和词汇图片字段升级为多图模式，支持同时上传多张配图（URL 或本地文件），展示时自动创建轮播效果，兼容旧版单图数据。
• [新增] 响应式底部工具栏：将字体选择器和分页导航合并为统一的底部通栏，彻底解决小屏幕和中屏幕下控件遮挡阅读内容的问题。
• [优化] 阅读区自适应：调整图片区域、内边距在不同屏幕尺寸下的响应式布局，优化移动端和平板端的阅读体验。
• [优化] 词汇卡片宽度：小屏幕下词汇卡片自动占满全屏，中屏占 85%，大屏保持固定 450px，提升内容可读性。
• [修复] 图片管理逻辑：完善多图删除、添加和排序功能，支持混合 URL 与本地文件的灵活组合。

v1.2.0 - 2026-01-27

• [重磅] 全库语料联动系统：在编辑词条时，系统会自动“跨书”检索库内所有包含该词的句子，支持一键勾选为语境例句。
• [新增] 跨文章动态跳转：单词本新增实时语境扫描，点击任意例句可直接跳转回对应的文章段落并自动展开词卡。
• [新增] 数据救灾迁移工具：支持对 v1 至 v6 版本数据库的深度打捞与同步，解决用户因域名更换导致的数据“丢失”痛点。
• [优化] 阅读字号提升：调大了单词本内词条释义与例句的字号，改善在平板或投影设备上的阅读体验。
• [优化] 表单逻辑重构：优化了词条编辑表单的顺序（基础 -> 例句 -> 语境池 -> 配图），操作更符合直觉。
• [修复] 部署稳定性：配置了全平台 SPA 路由重写规则，彻底解决非根路径刷新 404 的问题。

v1.1.0 - 2026-01-27

• [新增] 文章导入导出：支持 .json 格式的一键备份、异地读取，并具备智能重名冲突处理逻辑。
• [新增] 词条自动保存：编辑模式下支持词条修改实时同步至数据库，无需手动保存。
• [新增] 词组高亮识别：完美支持多词短语的连续划线与整体缩放。
• [新增] 多色彩标记系统：提供五种专业配色，支持划线、文字和词卡的全局视觉联动。
• [优化] 交互排版：单词放大时会自动推开相邻文字和空格，解决文字堆叠局促感。
• [优化] 视觉细节：主页封面去繁就简，取消 Issue No. 显示。

v1.0.0 - 2026-01-20

• 核心架构搭建完成。
• 实现 Fisheye 鱼眼放大交互引擎。
• 实现本地化存储与单词本基础功能。
• 内置示例课程。