一个基于Vue3和Tailwind CSS开发的现代化EPUB阅读器，支持本地文件存储和沉浸式阅读体验。
🎯 立即体验: https://mikasaakerman.github.io/deepreader
💡 提示: 由于浏览器安全限制，某些功能（如File System Access API）需要在HTTPS环境下使用。
- 📚 EPUB格式支持 - 完整支持EPUB电子书格式
- 🎨 沉浸式阅读 - 专注阅读体验，支持多种主题
- 📱 响应式设计 - 完美适配桌面和移动设备
- 💾 本地存储 - 使用File System Access API，数据完全本地化
- ⚙️ 个性化设置 - 字体大小、行间距、主题等可调节
- 🔄 阅读进度 - 自动保存和恢复阅读进度
- 🎯 无服务端 - 纯前端应用，可部署到GitHub Pages
- EPUB文件解析 - 支持EPUB格式文件的解析和章节提取
- 文件上传 - 支持拖拽上传和File System Access API
- 书籍管理 - 书籍列表显示、删除功能
- 阅读器界面 - 沉浸式阅读界面设计
- 阅读进度 - 自动保存和恢复阅读进度
- 章节导航 - 上一章/下一章切换
- 真实内容显示 - 从EPUB文件中解析并显示真实章节内容
- 封面显示 - 在书架中显示书籍封面，支持多种封面提取方式
- 字体大小调节 - 12px-32px范围可调
- 行间距调节 - 1.2-2.5倍行间距
- 主题切换 - 日间、夜间、护眼三种主题
- 字体选择 - 系统默认、衬线、无衬线、等宽字体
- 键盘操作 - 方向键翻页，ESC返回
- 鼠标操作 - 点击区域翻页，工具栏切换
- 响应式设计 - 桌面和移动设备适配
- 本地存储 - 使用localStorage保存设置和进度
- GitHub Pages部署 - 自动部署配置
- 无服务端架构 - 纯前端应用
- 真实EPUB内容显示 - 已实现从EPUB文件中解析和显示真实章节内容
- 目录导航 - 显示书籍目录，支持跳转到指定章节
- 书签功能 - 添加、删除、管理书签
- 搜索功能 - 全文搜索，高亮搜索结果
- 笔记功能 - 添加、编辑、管理阅读笔记
- 阅读统计 - 阅读时长、阅读速度统计
- 导出功能 - 导出阅读进度、笔记、书签
- 多语言支持 - 界面国际化
- 快捷键配置 - 自定义快捷键
- 阅读模式 - 滚动模式、翻页模式切换
- 字体导入 - 支持自定义字体文件
- 背景图片 - 自定义阅读背景
- 朗读功能 - 文本转语音朗读
- 分享功能 - 分享阅读进度和笔记
- 云同步 - 多设备数据同步（需要后端支持）
- 性能优化 - 大文件加载优化
- 错误处理 - 完善错误提示和处理
- 单元测试 - 添加测试用例
- PWA支持 - 离线阅读支持
- TypeScript类型完善 - 完善类型定义
立即体验: https://mikasaakerman.github.io/deepreader
- 克隆项目
git clone https://github.com/MikasaAkerman/deepreader.git
cd deepreader- 安装依赖
npm install- 启动开发服务器
npm run dev- 打开浏览器访问
http://localhost:5173
# 构建生产版本
npm run build
# 预览构建结果
npm run preview
# 部署到GitHub Pages
npm run deploy- 访问 在线体验地址
- 点击"选择EPUB文件"上传你的EPUB电子书
- 开始沉浸式阅读体验！
- 点击"选择EPUB文件"按钮
- 选择本地EPUB文件或拖拽文件到上传区域
- 系统会自动解析并添加到书架
- 字体大小: 点击设置面板中的 +/- 按钮调节
- 行间距: 调整文本行间距，提升阅读体验
- 主题切换: 支持日间、夜间、护眼三种主题
- 字体选择: 可选择系统默认、衬线、无衬线、等宽字体
- 翻页: 点击屏幕左右区域或使用方向键
- 工具栏: 点击屏幕中央区域切换工具栏显示
- 返回: 点击左上角返回按钮或按ESC键
- 前端框架: Vue 3 + TypeScript
- 样式框架: Tailwind CSS v4
- 状态管理: Pinia
- 路由: Vue Router 4
- EPUB解析: JSZip + DOMParser
- 文件系统: File System Access API
- 构建工具: Vite
- 部署: GitHub Pages
deepreader/
├── src/
│ ├── components/ # 组件
│ │ ├── FileUploader.vue # 文件上传组件
│ │ ├── Reader.vue # 阅读器组件
│ │ └── BookLibrary.vue # 书籍库组件
│ ├── stores/ # 状态管理
│ │ └── bookStore.ts # 书籍状态
│ ├── utils/ # 工具函数
│ │ └── epubParser.ts # EPUB解析器
│ ├── views/ # 页面
│ │ ├── HomeView.vue # 首页
│ │ └── ReaderView.vue # 阅读页
│ ├── types/ # 类型声明
│ │ └── global.d.ts # 全局类型
│ └── router/ # 路由配置
├── public/ # 静态资源
└── .github/workflows/ # GitHub Actions
- 在
src/components/中创建新组件 - 在
src/stores/中添加状态管理 - 在
src/views/中创建新页面 - 更新路由配置
项目使用Tailwind CSS v4，支持：
- 响应式设计
- 深色模式
- 自定义主题
- 组件样式隔离
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
MIT License
欢迎提交Issue和Pull Request！
如有问题，请提交Issue或联系开发者。