# comic-reader

**Repository Path**: ulquiola/comic-reader

## Basic Information

- **Project Name**: comic-reader
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-25
- **Last Updated**: 2025-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Comic Reader 📚

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

![Version](https://img.shields.io/badge/version-1.2.0-blue)
![Go](https://img.shields.io/badge/Go-1.21+-00ADD8)
![License](https://img.shields.io/badge/license-MIT-green)

## ✨ 特性

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

## 🚀 快速开始

### 方式一：Docker Compose（推荐）

```bash
# 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 命令

```bash
# 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
```

### 方式三：本地运行

```bash
# 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. 等待上传完成，漫画会自动出现在列表中

#### 直接复制到数据目录

```bash
# 复制漫画文件夹到数据目录
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`：

```yaml
environment:
  - PASSWORD=YourNewPassword
```

然后重启服务：

```bash
docker-compose up -d
```

#### 本地运行

修改 `main.go` 中的 `accessPassword` 常量：

```go
const accessPassword = "YourNewPassword"
```

然后重新运行：

```bash
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 忽略文件
```

## 🔧 开发

### 本地开发

```bash
# 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`，修改后需要重新运行：

```bash
# 使用 go run
go run main.go

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

## 🐳 Docker 命令

### 常用命令

```bash
# 查看日志
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
```

### 数据备份

```bash
# 备份数据目录
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 反向代理示例

```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. 检查容器是否运行：
```bash
docker ps
```

2. 查看日志：
```bash
docker-compose logs
```

3. 检查端口是否被占用：
```bash
# Windows
netstat -ano | findstr 8080

# Linux/Mac
lsof -i :8080
```

### 漫画不显示

1. 检查数据目录权限：
```bash
ls -la data/
```

2. 查看容器日志：
```bash
docker-compose logs comic-reader
```

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

### 图片加载失败

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

## 📈 性能优化

### 增加内存限制

编辑 `docker-compose.yml`：

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

### 调整分页大小

编辑 `static/app.js`：

```javascript
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](LICENSE) 文件

## 🙏 致谢

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

## 📮 联系方式

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

---

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