Comic Reader 📚

一个轻量级、现代化的本地漫画阅读器，支持 ZIP 压缩包和文件夹导入，采用深色主题设计，提供流畅的阅读体验。

✨ 特性

• 🎨 现代化深色主题 - 采用紫粉色渐变的深色配色方案，护眼舒适
• 📱 响应式设计 - 完美适配桌面端、平板和移动端
• 🔍 实时搜索 - 支持漫画名称搜索，带防抖优化
• 📄 分页浏览 - 支持分页显示和快速跳页
• 📑 多种打开方式 - 左键当前页打开，右键/长按菜单支持新标签页打开
• 📖 竖向滚动阅读 - 统一的竖向滚动阅读体验，支持拖动条快速跳转
• 🖼️ 懒加载 - 图片懒加载，提升加载速度
• 📊 阅读进度 - 顶部进度条和可拖动滑块，实时显示阅读进度
• 💾 阅读记忆 - 自动保存滚动位置和阅读进度，下次打开自动恢复
• 💾 多种导入方式 - 支持 ZIP 压缩包和文件夹上传
• 🌐 Docker 部署 - 开箱即用的 Docker 支持
• 🔐 密码保护 - Basic Auth 访问控制

🚀 快速开始

方式一：Docker Compose（推荐）

# 1. 克隆项目
git clone https://github.com/ulquiola/comic-reader.git
cd comic-reader

# 2. 修改密码（可选）
编辑 docker-compose.yml，修改 PASSWORD 环境变量

# 3. 启动服务
docker-compose up -d

# 4. 访问应用
浏览器打开 http://localhost:8080

方式二：Docker 命令

# 1. 构建镜像
docker build -t comic-reader:latest .

# 2. 运行容器
docker run -d \
  --name comic-reader \
  -p 8080:8080 \
  -e PASSWORD=YourPassword \
  -v $(pwd)/data:/app/.data \
  comic-reader:latest

方式三：本地运行

# 1. 安装 Go 1.21+
# 访问 https://golang.org/dl/ 下载安装

# 2. 克隆项目
git clone https://github.com/ulquiola/comic-reader.git
cd comic-reader

# 3. 运行
go run main.go

# 4. 访问应用
浏览器打开 http://localhost:8080

📖 使用说明

访问密码

默认密码：Pass@word

首次访问时会弹出登录框，输入密码即可进入。

导入漫画

Web 界面上传

1. 登录后点击「导入」按钮
2. 选择「选择 ZIP」上传压缩包，或「选择文件夹」上传文件夹
3. 等待上传完成，漫画会自动出现在列表中

直接复制到数据目录

# 复制漫画文件夹到数据目录
cp -r /path/to/your/comic data/

# 重启服务（如使用 Docker）
docker-compose restart

阅读漫画

• 左键点击卡片：在当前页面内打开阅读器（竖向滚动模式）
• 右键点击卡片（桌面端）：弹出菜单，可选择：
  • 📑 新标签页打开
  • 📖 当前页打开
• 长按卡片（移动端）：长按 500ms 弹出菜单，可选择：
  • 📑 新标签页打开
  • 📖 当前页打开
  • 普通点击卡片：在当前页面内打开阅读器

阅读器操作

• 竖向滚动：上下滚动浏览所有图片
• 拖动条：拖动顶部进度条滑块快速跳转到指定位置（移动端和桌面端都支持）
• 进度条点击：点击进度条任意位置快速跳转
• 返回：点击左上角返回按钮或按 ESC 键
• 控制栏：鼠标移动或触摸时显示，2 秒后自动隐藏
• 阅读记忆：自动保存滚动位置到 localStorage，下次打开自动恢复到上次阅读位置
• 键盘快捷键：
  • ↑ / ↓：上下滚动 300px
  • PageUp / PageDown：上下滚动 90% 屏幕高度
  • Home / End：滚动到顶部/底部
  • 空格：向下滚动 80% 屏幕高度
  • ESC：返回列表

⚙️ 配置

环境变量

变量名	默认值	说明
PORT	8080	服务监听端口
PASSWORD	Pass@word	访问密码

修改密码

Docker Compose

编辑 docker-compose.yml：

environment:
  - PASSWORD=YourNewPassword

然后重启服务：

docker-compose up -d

本地运行

修改 main.go 中的 accessPassword 常量：

const accessPassword = "YourNewPassword"

然后重新运行：

go run main.go

📁 项目结构

comic-reader/
├── main.go              # Go 后端代码
├── static/              # 前端静态资源
│   ├── index.html       # 主页
│   ├── read.html        # 阅读页
│   ├── style.css        # 样式文件
│   ├── app.js           # JavaScript 逻辑
│   └── logo.svg         # Logo 图标
├── data/                # 漫画数据目录（运行时创建）
├── Dockerfile           # Docker 镜像构建文件
├── docker-compose.yml   # Docker Compose 配置
└── .dockerignore        # Docker 忽略文件

🔧 开发

本地开发

# 1. 克隆项目
git clone https://github.com/ulquiola/comic-reader.git
cd comic-reader

# 2. 运行开发服务器
go run main.go

# 3. 访问 http://localhost:8080

修改静态资源

编辑 static/ 目录下的文件，修改后刷新浏览器即可看到效果。

修改后端逻辑

编辑 main.go，修改后需要重新运行：

# 使用 go run
go run main.go

# 或先编译再运行
go build -o comic-reader
./comic-reader

🐳 Docker 命令

常用命令

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose stop

# 重启服务
docker-compose restart

# 删除容器
docker-compose down

# 删除容器和数据卷
docker-compose down -v

# 进入容器
docker exec -it comic-reader sh

# 更新应用
git pull
docker-compose up -d --build

数据备份

# 备份数据目录
tar -czf comic-data-backup-$(date +%Y%m%d).tar.gz data/

# 恢复数据
tar -xzf comic-data-backup-20231225.tar.gz

📦 支持的图片格式

• JPEG / JPG
• PNG
• GIF
• WebP
• BMP
• SVG
• AVIF
• TIFF / TIF
• ICO

🛠️ 技术栈

后端

• Go - 高性能后端语言
• embed.FS - 嵌入静态资源
• net/http - HTTP 服务器

前端

• 原生 JavaScript - 无框架依赖
• CSS3 - 现代化样式
• Intersection Observer API - 懒加载

部署

• Docker - 容器化部署
• Docker Compose - 多容器编排

🔒 安全建议

1. 修改默认密码：务必修改 PASSWORD 环境变量
2. 使用反向代理：建议使用 Nginx 或 Traefik 配置 HTTPS
3. 限制访问：通过防火墙或 VPN 限制访问来源
4. 定期更新：及时更新镜像以获取安全补丁
5. 备份数据：定期备份 data/ 目录

Nginx 反向代理示例

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

🐛 故障排查

无法访问

1. 检查容器是否运行：

docker ps

2. 查看日志：

docker-compose logs

3. 检查端口是否被占用：

# Windows
netstat -ano | findstr 8080

# Linux/Mac
lsof -i :8080

漫画不显示

1. 检查数据目录权限：

ls -la data/

2. 查看容器日志：

docker-compose logs comic-reader

3. 检查图片格式是否支持

图片加载失败

1. 检查后端日志是否有错误
2. 确认图片路径正确
3. 检查浏览器控制台是否有错误信息

📈 性能优化

增加内存限制

编辑 docker-compose.yml：

services:
  comic-reader:
    deploy:
      resources:
        limits:
          memory: 512M
        reservations:
          memory: 256M

调整分页大小

编辑 static/app.js：

const PAGE_SIZE = 20; // 修改每页显示数量

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📝 更新日志

v1.2.0 (2025-12-26)

• ✨ 重阅读器架构 - 从横向翻页改为竖向滚动阅读
• ✨ 统一阅读器样式 - 新标签页和当前页打开使用相同的竖向滚动阅读器
• 📱 增强移动端体验：
  • 新增移动端长按菜单功能（长按 500ms 弹出菜单）
  • 新增可拖动进度条滑块，支持快速跳转
  • 移动端拖动滑块始终可见（24px），便于触摸操作
• 📖 优化阅读进度功能：
  • 自动保存滚动位置到 localStorage
  • 下次打开自动恢复到上次阅读位置
  • 恢复时显示提示信息（已恢复到 XX% 位置）
• 🎯 键盘快捷键增强：
  • 新增 PageUp/PageDown 快速滚动
  • 新增 Home/End 快速跳转
  • 优化空格键滚动行为
• 🔧 技术优化：
  • 使用 IntersectionObserver 实现图片懒加载
  • 进度条拖动支持桌面端和移动端
  • 防抖保存滚动位置，避免频繁写入 storage
• 🐛 修复问题：
  • 移除移动端下滑返回功能，避免误操作
  • 修复长按菜单和点击事件的冲突
  • 优化移动端触摸体验

v1.1.0 (2025-12-26)

• ✨ 新增移动端长按菜单功能（长按卡片 500ms 弹出菜单）
• ✨ 新增移动端拖动条功能，支持快速跳转页面
• 🎨 统一阅读器样式，新标签页和当前页打开使用相同的交互方式
• 📱 优化移动端阅读体验，拖动滑块在移动端始终可见
• 📖 增强阅读记忆功能，支持滚动位置和页面索引的保存与恢复
• 🐛 修复移动端下滑返回功能（已移除，避免误操作）

v1.0.0 (2024-12-25)

• ✨ 首次发布
• 🎨 现代化深色主题设计
• 🔍 实时搜索功能
• 📄 分页浏览和快速跳页
• 📑 右键菜单支持新标签页打开
• 🐳 Docker 部署支持
• 📱 响应式设计
• 🖼️ 图片懒加载
• 📊 阅读进度条
• 🔐 Basic Auth 访问控制

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

🙏 致谢

• 感谢所有贡献者
• 感谢 Go 社区的优秀工具和库

📮 联系方式

• 作者：ulquiola
• 邮箱：ulquiola@163.com
• 项目地址：https://github.com/ulquiola/comic-reader

---

⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！