PicHub - 专业图床服务平台

在线演示 · 问题反馈

后端技术

前端技术

存储支持

核心特性

项目简介

PicHub 是一个专业的图片托管和管理服务平台，为个人用户和开发者提供快速、稳定的图片存储和 CDN 分发服务。

核心特性

多格式支持 - JPG、PNG、GIF、WebP、SVG 等主流图片格式
智能处理 - 自动压缩、格式转换、缩略图生成
相册管理 - 完整的相册系统，支持公开/私有权限控制
多存储引擎 - 支持本地存储和多家云存储服务商
RESTful API - 完整的 API 接口，支持第三方集成
双重认证 - 系统 API 密钥 + 用户 Sanctum 令牌
响应式设计 - 完美适配桌面端和移动端
多语言界面 - 内置四种语言，自动语言检测
深色模式 - 完整的深色主题支持
性能优化 - Gzip/Brotli 压缩，81% 资源减少

核心功能

图片管理

多格式上传 - 支持 JPEG、PNG、WebP、GIF 等主流图片格式，自动识别文件类型
批量上传 - 拖拽上传、粘贴上传、批量处理，支持并发上传控制
图片处理 - 基于 Intervention Image 的图片压缩、格式转换、缩略图生成
图片广场 - 公开图片展示、瀑布流布局、无限滚动加载
隐私控制 - 用户可自主选择图片是否在广场公开展示
图片详情 - 完整的图片信息展示、点赞收藏、社交分享（Open Graph、Twitter Cards）

相册系统

相册创建 - 创建、编辑、删除相册，自定义封面
图片组织 - 批量添加/移除图片、拖拽排序
权限控制 - 公开/私有相册，访问权限管理
相册分享 - 公开相册链接、SEO 优化（动态标题、描述）
用户相册 - 查看其他用户的公开相册
批量管理 - 批量删除相册、批量操作图片

存储引擎

本地存储 - 默认本地文件系统存储，适合小规模部署
阿里云 OSS - 支持阿里云对象存储服务
腾讯云 COS - 支持腾讯云对象存储服务
七牛云 - 支持七牛云存储服务
灵活配置 - 后台管理面板配置存储提供商
存储统计 - 存储空间使用统计、流量监控

用户系统

用户认证 - 注册、登录、邮箱验证、密码重置
社交登录 - 支持第三方社交账号登录（Laravel Socialite）
个人资料 - 头像上传、个人信息编辑、账号设置
用户主页 - 公开的用户主页，展示用户图片和相册
点赞收藏 - 图片点赞功能、收藏列表管理
浏览历史 - 图片浏览历史记录
存储配额 - 实时存储使用统计，游客和注册用户差异化配额
API 密钥 - 生成和管理 API 访问令牌

订阅系统

套餐管理 - 多种订阅套餐（免费、基础、专业、企业）
优惠券 - 优惠券创建、验证、使用
支付集成 - 支付网关集成、订单管理
配额控制 - 存储空间、流量、上传次数限制
订阅历史 - 订阅记录、续费管理、取消订阅
定价页面 - 动态定价展示、套餐对比

API 接口

RESTful API - 完整的图片上传、管理、删除接口
API 文档 - 内置 API 文档页面 /api-docs，详细的接口说明和示例
Token 认证 - 基于 Laravel Sanctum 的 API 认证
批量操作 - 支持批量上传、批量删除等操作
Webhook - Webhook 管理、事件通知

后台管理

Filament 面板 - 基于 Filament 3.2 的强大后台管理系统
用户管理 - 用户列表、权限管理、账号状态控制
图片管理 - 图片审核、批量操作、存储统计
相册管理 - 相册审核、权限设置
订单管理 - 订单查看、支付状态跟踪
套餐管理 - 套餐配置、价格设置
优惠券管理 - 优惠券创建、使用统计
支付网关 - 支付方式配置、支付记录
存储配置 - 存储提供商配置、存储统计
API 密钥 - API 密钥管理、权限控制

用户体验

多语言 - 内置中文、英文、法语、俄语四种语言，自动语言检测
深色模式 - 完整的深色主题支持，自动适配系统偏好
响应式设计 - 完美适配桌面端和移动端，统一的交互体验
SEO 优化 - 动态 Meta 标签、Open Graph、Twitter Cards、JSON-LD
仪表盘 - 用户数据统计、图片统计、存储使用情况可视化

技术架构

后端架构

Laravel 11.x
├── Controllers        # 控制器层
├── Services          # 业务逻辑层
│   ├── ImageProcessingService    # 图片处理
│   ├── FileValidationService     # 文件验证
│   └── TurnstileService          # 验证码服务
├── Models            # 数据模型层
├── Middleware        # 中间件
│   └── UnifiedApiAuth            # 双重 API 认证
└── Filament          # 后台管理

前端技术

CSS 框架: Tailwind CSS 3.x
JavaScript: Alpine.js 3.x (轻量级响应式框架)
构建工具: Vite 6.x
模板引擎: Blade
图标库: Heroicons

存储架构

抽象层: Laravel Filesystem
本地存储: Local Driver
云存储: 阿里云 OSS、腾讯云 COS、七牛云、AWS S3
CDN 加速: 腾讯云 EdgeOne CDN
缓存策略: 多层缓存（浏览器 → EdgeOne CDN → Nginx → Laravel）

性能优化

前端压缩: Gzip/Brotli (81% 资源减少)
Critical CSS: 4.8KB 首屏内联样式
懒加载: IntersectionObserver 图片懒加载
代码分割: 按需加载非关键功能
数据库优化: 10+ 索引，Eager Loading
缓存系统: Redis / File Cache
性能评分: 100/100

快速开始

环境要求

PHP >= 8.3
Composer
Node.js >= 18.x
MySQL >= 8.0 或 SQLite
Redis（可选，推荐用于缓存）

安装步骤

# 1. 克隆项目
git clone https://github.com/truman-world/PicHub.git
cd PicHub

# 2. 安装后端依赖
composer install

# 3. 安装前端依赖
npm install

# 4. 环境配置
cp .env.example .env
php artisan key:generate

# 5. 配置数据库（编辑 .env 文件）
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=pichub
DB_USERNAME=root
DB_PASSWORD=your_password

# 6. 运行数据库迁移
php artisan migrate --seed

# 7. 创建存储软链接
php artisan storage:link

# 8. 构建前端资源
npm run build

# 9. 启动服务
php artisan serve

访问 http://localhost:8000 开始使用！

开发模式

# 并发启动所有服务（推荐）
composer dev

# 或分别启动
php artisan serve         # 开发服务器
php artisan queue:work    # 队列处理
npm run dev               # 前端热重载

Docker 部署

# 使用 Docker Compose 部署
docker-compose up -d

# 运行数据库迁移
docker-compose exec app php artisan migrate --seed

开发命令

缓存管理

# 清除缓存（Blade 修改后必须执行）
php artisan view:clear      # 清除视图缓存
php artisan cache:clear     # 清除应用缓存
php artisan config:clear    # 清除配置缓存
php artisan route:clear     # 清除路由缓存

# 生产环境优化
php artisan optimize        # 一键优化（缓存 config + routes + views）

数据库操作

php artisan migrate                    # 运行迁移
php artisan migrate:fresh --seed      # 重置数据库并填充
php artisan db:seed                    # 运行种子

测试

php artisan test                                          # 所有测试
php artisan test tests/Feature/ImageUploadTest.php       # 单个文件
php artisan test --filter test_user_can_upload_image     # 单个方法

性能测试

# 运行性能基准测试
php artisan performance:benchmark

# 查看测试报告
cat storage/logs/performance_benchmark_*.json

配置说明

存储配置

在后台管理面板（Filament）配置存储提供商：

本地存储: 默认配置，存储在 storage/app/public/
阿里云 OSS: 配置 Access Key、Secret Key、Bucket、Endpoint
腾讯云 COS: 配置 App ID、Secret ID、Secret Key、Region、Bucket
七牛云: 配置 Access Key、Secret Key、Bucket、Domain
AWS S3: 配置 Access Key、Secret Key、Region、Bucket

邮件配置

编辑 .env 文件配置 SMTP：

MAIL_MAILER=smtp
MAIL_HOST=smtp.example.com
MAIL_PORT=587
MAIL_USERNAME=your-email@example.com
MAIL_PASSWORD=your-password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=noreply@pichub.app
MAIL_FROM_NAME="PicHub"

Cloudflare Turnstile

TURNSTILE_SITE_KEY=your-site-key
TURNSTILE_SECRET_KEY=your-secret-key

API 文档

PicHub 提供完整的 RESTful API 接口。

API 认证

支持两种认证方式：

系统 API 密钥 - 格式：pk_xxxxx
用户 API 令牌 - Laravel Sanctum Token

API 端点示例

# 上传图片
POST /api/v1/images/upload
Authorization: Bearer {token}

# 获取图片列表
GET /api/v1/images
Authorization: Bearer {token}

# 删除图片
DELETE /api/v1/images/{id}
Authorization: Bearer {token}

完整 API 文档：https://pichub.app/api-docs

项目结构

PicHub/
├── app/
│   ├── Console/Commands/          # Artisan 命令
│   │   └── PerformanceBenchmark.php
│   ├── Filament/                  # Filament 后台
│   │   ├── Admin/Pages/
│   │   └── Resources/
│   ├── Http/
│   │   ├── Controllers/           # 控制器
│   │   ├── Middleware/            # 中间件
│   │   │   └── UnifiedApiAuth.php # 双重 API 认证
│   │   └── Requests/              # 表单验证
│   ├── Models/                    # Eloquent 模型
│   ├── Services/                  # 业务逻辑服务
│   │   ├── ImageProcessingService.php
│   │   ├── FileValidationService.php
│   │   └── TurnstileService.php
│   └── helpers.php                # 全局辅助函数
│
├── resources/
│   ├── views/
│   │   ├── components/            # Blade 组件
│   │   ├── layouts/               # 布局模板
│   │   └── pages/                 # 页面视图
│   ├── js/
│   │   ├── app.js                 # 主入口
│   │   ├── app-state.js           # Alpine.js 全局状态
│   │   └── api-docs-data.js       # API 文档数据
│   ├── css/
│   │   └── app.css                # Tailwind CSS
│   └── lang/                      # 国际化语言包
│       ├── zh_CN/
│       ├── en/
│       ├── fr/
│       └── ru/
│
├── database/
│   ├── migrations/                # 数据库迁移
│   ├── seeders/                   # 数据填充
│   └── factories/                 # 模型工厂
│
├── routes/
│   ├── web.php                    # Web 路由
│   ├── api.php                    # API 路由
│   └── console.php                # 命令行路由
│
├── public/
│   ├── build/                     # 编译后的前端资源
│   │   └── assets/
│   │       ├── js/*.js.gz         # Gzip 压缩文件
│   │       └── css/*.css.gz       # Gzip 压缩文件
│   └── uploads/                   # 游客上传目录
│
└── storage/
    ├── app/public/                # 用户存储（需 storage:link）
    └── logs/                      # 日志文件

多语言支持

PicHub 内置四种语言：

🇨🇳 简体中文 (zh_CN)
🇺🇸 English (en)
🇫🇷 Français (fr)
🇷🇺 Русский (ru)

语言文件位于 resources/lang/ 目录。

安全建议

生产环境检查清单

文件权限

# 设置正确的文件权限
chmod -R 755 storage bootstrap/cache
chown -R www-data:www-data storage bootstrap/cache

# 保护敏感文件
chmod 644 .env

故障排查

常见问题

1. 首页报错 "Permission denied"

# storage/framework/cache 权限问题
chown -R www-data:www-data storage bootstrap/cache
chmod -R 775 storage bootstrap/cache
php artisan cache:clear

2. Blade 修改不生效

php artisan view:clear
# 或强制删除编译文件
rm -rf storage/framework/views/*.php

3. 图片上传失败

检查文件大小限制（后台设置）
验证文件类型（后台 allowed_file_types）
检查存储提供商配置
SVG：确保通过 XSS 验证

4. API 认证失败（401）

检查令牌格式（完整字符串，包含 |）
验证用户 is_active 字段
检查令牌是否过期/撤销
查看日志：storage/logs/laravel.log

性能数据

数据库性能

连接时间: 0.091ms
分页查询: 0.96ms
缓存读取: 0.02ms
缓存写入: 0.13ms
总体评分: 100/100

前端优化

Gzip 压缩: 81% 资源减少（340KB 节省）
- JavaScript: 124KB → 42KB
- CSS: 297KB → 39KB
Critical CSS: 4.8KB 内联首屏样式
懒加载: IntersectionObserver

许可证

本项目采用 MIT 许可证。

这意味着您可以自由地：

✅ 商业使用
✅ 修改代码
✅ 分发代码
✅ 私有使用

贡献指南

我们欢迎所有形式的贡献！

如何贡献

Fork 本项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

开发规范

遵循 PSR-12 编码标准
编写清晰的提交信息
添加必要的测试
更新相关文档

联系方式

项目主页: https://pichub.app
GitHub: https://github.com/truman-world/PicHub
问题反馈: https://github.com/truman-world/PicHub/issues

致谢

感谢以下开源项目：

Laravel - 优雅的 PHP 框架
Filament - 强大的后台管理面板
Tailwind CSS - 实用优先的 CSS 框架
Alpine.js - 轻量级 JavaScript 框架
Intervention Image - 图片处理库

Made with ❤️ by Truman World

官网 · API 文档 · 问题反馈

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
public/images		public/images
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

License

truman-world/PicHub

Folders and files

Latest commit

History

Repository files navigation