TXT Reader

一个简洁、优雅的纯前端 .txt 文件阅读器。针对 iPhone Safari 优化，可添加至主屏幕作为 PWA 使用。

功能

• 选择本地 .txt 文件并阅读
• 实时追踪阅读进度（滚动百分比）
• 自动记住每个文件的阅读位置，重新打开时恢复
• 调整字体大小（14px–24px）
• 浅色 / 深色模式
• 关键词搜索 + 高亮显示
• 上一处 / 下一处匹配跳转
• 一键回到顶部
• 清除阅读记录
• 最近阅读文件列表
• PWA 支持（可离线使用、添加到主屏幕）

本地运行

npm install
npm run dev

浏览器打开 http://localhost:5173 即可使用。

如需在 iPhone 上测试，确保手机和电脑在同一局域网，然后访问 http://<你的电脑IP>:5173。

构建

npm run build

构建产物在 dist/ 目录中。

部署到 GitHub Pages

方式一：手动部署

1. 构建项目：npm run build
2. 将 dist/ 目录内容推送到 GitHub 仓库的 gh-pages 分支
3. 在仓库 Settings → Pages 中设置 Source 为 gh-pages 分支

方式二：使用 gh-pages 工具

npm install -D gh-pages

在 package.json 中添加：

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

然后运行：

npm run deploy

方式三：GitHub Actions

创建 .github/workflows/deploy.yml：

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

添加到 iPhone 主屏幕（PWA）

1. 在 iPhone Safari 中打开部署后的网址
2. 点击底部工具栏的「分享」按钮（方框+箭头图标）
3. 向下滑动，找到「添加到主屏幕」
4. 确认名称后点击「添加」

之后即可像原生 App 一样从主屏幕打开，享有独立的窗口和离线阅读能力。

隐私说明

所有 .txt 文件仅在您的本地浏览器中读取，不会上传到任何服务器。

• 文件内容通过浏览器 FileReader API 在本地读取
• 阅读进度、历史记录、主题偏好仅存储在浏览器 localStorage 中
• 此项目为纯前端应用，GitHub Pages 仅托管静态资源（HTML / CSS / JS）
• 没有任何数据被发送到第三方

技术栈

• React 18
• Vite 6
• TypeScript
• 原生 CSS（CSS 变量实现主题切换）
• 无后端、无 UI 框架