GitHub Reader

一个将 txt 小说伪装成官网文档风格的 React 阅读器。上传文本后，内容会以产品页、代码块、Tab 面板、终端输出等形式展示，看起来像在工作浏览技术文档，而非阅读小说。

功能特性

• 官网风格界面 — 参考 Claude 官网设计，奶油色画布、珊瑚色 CTA、深色产品卡片
• 内容伪装展示 — 小说段落随机渲染为 Feature Card、Code Window、Tab、Model 对比、终端等多种 UI 块
• 章节解析 — 自动识别 第X章、Chapter X 等章节标题；无章节时按段落自动分段
• 分页阅读 — 章节内容过长时自动分页（约 600 字 / 8 段一页）
• 跨章翻页 — 到达本章最后一页点「下一页」自动进入下一章；第一章第一页点「上一页」自动回到上一章末页
• 章节目录 — 弹窗选择任意章节跳转
• 阅读进度 — 按书名将章节与页码保存到 localStorage，再次上传同名书籍时自动恢复
• 编码兼容 — 自动识别 UTF-8 / GBK（Windows ANSI）编码，解决中文 txt 乱码

快速开始

环境要求

• Node.js 18+
• npm

安装与运行

npm install
npm run dev

浏览器访问 http://localhost:9898

构建

npm run build
npm run preview

使用说明

1. 打开页面，将 .txt 文件拖入上传区或点击选择文件
2. 系统自动解析章节并进入阅读界面
3. 使用顶部或底部的 Previous / Next 翻页，Prev Section / Next Section 切换章节
4. 点击 Table of Contents 打开目录，快速跳转
5. 点击 Import another file 或顶部 Import Document 重新上传

章节标题格式

支持以下常见格式（行首匹配）：

第一章 开端
第12章 转折
Chapter 1 Introduction
CHAPTER 2
卷一 初入江湖
1. 序章

编码说明

编码	说明
UTF-8	默认支持，含 BOM 时自动识别
GBK / ANSI	Windows 记事本默认保存格式，自动检测解码
UTF-16	含 BOM 时自动识别

项目结构

src/
├── components/
│   ├── TopNav.tsx          # 顶部导航
│   ├── Footer.tsx          # 页脚
│   ├── FileUpload.tsx      # 文件上传
│   ├── NovelReader.tsx     # 阅读器主界面
│   ├── ChapterNav.tsx      # 章节/分页导航
│   ├── ChapterPicker.tsx   # 目录弹窗
│   └── ContentBlock.tsx    # 伪装内容块渲染
├── utils/
│   ├── parseNovel.ts       # 章节解析
│   ├── pagination.ts       # 分页逻辑
│   ├── disguiseText.ts     # 内容伪装
│   ├── decodeText.ts       # 编码检测与解码
│   └── readingProgress.ts  # 阅读进度持久化
└── styles/
    ├── design-tokens.css   # 设计令牌
    └── global.css          # 全局样式

技术栈

• React 19 + TypeScript
• Vite 6
• gbk.js（GBK 编码兜底）

配置

开发服务器端口在 vite.config.ts 中配置，默认为 9898：

server: {
  port: 9898,
}

分页参数可在 src/utils/pagination.ts 中调整：

export const CHARS_PER_PAGE = 600;  // 每页最大字符数
export const PARAS_PER_PAGE = 8;    // 每页最大行数

License

MIT