在工作时间隐蔽阅读小说的完美解决方案
一款基于 Vue 3 的现代化小说阅读器，支持完美伪装、紧急隐藏、智能缓存等功能。
将小说内容嵌入 URL 地址栏，外观如同正在浏览技术文档。
Tip
点击下方功能了解详细信息
- 多模式阅读 - 支持按句、按段、按页三种阅读模式
- 智能导航 - 键盘、鼠标、滚轮多种控制方式
- 自动滚动 - 可配置速度的自动阅读模式
- 精确定位 - 支持跳转到任意阅读位置
- 进度保存 - LocalStorage 自动缓存阅读进度
- 完美伪装 - 小说内容显示在 URL 地址栏，主页面显示伪装网页
- 紧急隐藏 (Z+C) - 一键切换乱码/原文，启用/禁用伪装页面交互
- 多种伪装网站 - 预设常用网站 + 自定义 URL
- 智能检测 - 自动检测伪装页面加载失败（CSP/X-Frame-Options），提供替代方案
- 无伪装模式 - 支持纯净阅读，无需伪装
- 本地文件支持 - 直接读取 TXT 小说文件
- 在线文件支持 - 支持加载远程 URL 文件
- 刷新恢复 - 页面刷新后自动恢复到上次阅读位置
- 双模式切换 - 句/段模式与字符模式无缝切换
首先，请确保您的设备满足以下需求：
- Node.js 16.x 及以上版本
- npm 或 yarn 包管理器
1. 安装依赖
npm install2. 启动开发服务器
npm run dev访问 http://localhost:5173 查看应用。
3. 生产构建
npm run build构建产物将输出到 dist/ 目录。
4. 预览生产构建
npm run preview在浏览器地址栏访问：
https://example.com/#/reader?n=choose&d=baidu
其中 n=choose 将弹出文件选择器，d=baidu 表示使用百度作为伪装页面。
| 参数 | 说明 | 示例值 |
|---|---|---|
n |
小说文件路径（必需） | choose（弹出选择器）file:///F:/novel.txt（本地文件）https://example.com/novel.txt（在线文件） |
t |
当前文本内容（自动生成） | 系统自动更新为当前阅读内容 + 进度 |
d |
伪装网站 | wiki（维基百科）w3（W3Schools）baidu（百度）csdn（CSDN博客）blank（无伪装）或自定义完整URL |
m |
显示模式 | s（按句，默认）p（按段）g（按页） |
ps |
显示字符数 | 25（默认）50、100 等 |
sp |
滚动速度（毫秒） | 1500（默认）1000、2000 等 |
i |
起始位置索引 | 0（默认）任意数字 |
| 网站 | 缩写 | URL |
|---|---|---|
| 维基百科 | wiki |
https://zh.wikipedia.org |
| W3Schools | w3 |
https://www.w3schools.com |
| 百度 | baidu |
https://www.baidu.com |
| CSDN博客 | csdn |
https://blog.csdn.net |
| 无伪装 | blank |
纯净阅读模式 |
| 自定义 | 完整URL | 输入任意网址 |
| 按键 | 功能 |
|---|---|
| W / ↑ | 上一句/段/页 |
| S / ↓ | 下一句/段/页 |
| A / ← | 后退小步（按ps字数） |
| D / → | 前进小步（按ps字数） |
| Q | 后退一字 |
| E | 前进一字 |
| Space | 自动滚动 开/关 |
| Z+C | 紧急隐藏/恢复 ⚡ |
| H | 显示帮助 |
| G | 跳转位置 |
| X/M | 切换模式 |
Important
💡 紧急隐藏功能说明（Z+C）：
- 隐藏时：显示乱码，启用 iframe 交互，可正常浏览伪装网站
- 隐藏时如果点击了伪装网页，只能刷新网页恢复阅读，滚动不受影响
- 恢复时：显示原文，禁用 iframe 交互，恢复键盘控制
# 选择本地文件（推荐）
https://example.com/#/reader?n=choose&d=baidu&m=s
# 使用本地小说文件
https://example.com/#/reader?n=file:///F:/novel.txt&d=baidu
# 按段阅读，每页500字
https://example.com/#/reader?n=choose&m=p&ps=500
# 无伪装快速阅读
https://example.com/#/reader?n=choose&d=blank&sp=1000src/
├── components/ # 可复用组件
│ ├── AppTopBar.vue # 顶部导航栏
│ ├── AppFooter.vue # 页脚
│ └── reader/ # 阅读器相关组件
│ ├── FileChooserDialog.vue # 文件选择对话框
│ ├── HelpDialog.vue # 帮助信息对话框
│ ├── JumpDialog.vue # 位置跳转对话框
│ └── DisguiseFrame.vue # 伪装页面 iframe
├── composables/ # 组合式函数
│ ├── useNovelReader.js # 阅读器核心逻辑
│ └── useKeyboardControls.js # 键盘控制
├── views/ # 页面视图
│ ├── HomeView.vue # 首页
│ └── ReaderView.vue # 阅读器页面
├── router/ # 路由配置
│ └── index.js
├── plugins/ # 插件配置
│ └── vuetify.js
├── styles/ # 全局样式
│ └── main.css
├── App.vue # 根组件
└── main.js # 入口文件
- Vue 3 - 渐进式 JavaScript 框架（Composition API）
- Vite - 下一代前端构建工具
- Vuetify 3 - Material Design 组件库
- Vue Router - 官方路由管理器（Hash 模式）
- Pinia - 轻量级状态管理
- LocalStorage - 本地缓存阅读进度
编辑 src/plugins/vuetify.js：
theme: {
themes: {
light: {
colors: {
primary: '#667eea', // 修改主色调
secondary: '#764ba2'
}
}
}
}- 在
src/composables/中创建新的 composable - 在
src/components/中创建新组件 - 在相应视图中使用
构建后的 dist/ 目录可以直接部署到：
- GitHub Pages
- Netlify
- Vercel
- 任何静态文件服务器
如果部署到子目录，修改 vite.config.js：
export default defineConfig({
base: '/your-subdirectory/'
})欢迎提交 Issue 和 Pull Request！
如果您有任何建议或发现了 Bug，请：
本项目基于 MIT License 获得许可。