用AI来开发一个相册程序
根据以下完整需求,用 ThinkPHP8 和 Tailwind CSS(前端可使用 Vue3 或纯 Alpine.js)生成一个类似 QQ 相册的程序。包含:
- 用户系统(注册/登录)
- 多存储驱动(本地/S3/LskyPro/URL上传)
- 动态分组上传(一次上传多张图片作为一个朋友圈动态,支持文字)
- 相册分类、加密相册、不公开相册
- 时间轴模式(按动态分组排列,九宫格展示)
- 评论记录 IP
- 新增需求:点赞功能(防重复)、相册设置封面、后台管理删除图片、首页大屏滚动模式(上传按钮居中 + 随机图片 + 最新图片 + 相册封面板块)、点击图片灯箱详情(支持点赞评论转发)、点击相册封面进入相册内图片列表。请一并生成数据库迁移文件、API 路由、后端控制器、前端页面组件(使用 Tailwind CSS 布局)。
请用 ThinkPHP8 开发一个类似 QQ 相册的图片社区程序,后端使用 PHP 8.2+,前端使用 Tailwind CSS + Vue 3(或纯 Alpine.js),要求响应式、现代风格。
一、用户系统
- 注册、登录(JWT 或 Session 认证)
- 用户表字段:id, username, password, email, avatar, is_admin, created_at, last_login_ip
- 普通用户只能管理自己的相册和图片;管理员拥有全局删除权限。
二、相册功能
- 每个用户可以创建多个相册,字段:id, user_id, name, description, cover_image_id, category(默认/加密/不公开), password(加密时存储bcrypt), visibility(public/private), created_at
- 可以设置相册封面(从相册内图片中选择)
- 加密相册需要输入密码才能查看内容(后端校验并通过 session/jwt 记录临时权限)
- 不公开相册仅作者可见
三、动态/图片分组(类似朋友圈的一条动态)
- 一次上传多张图片(最多9张)构成一个“动态组”(image_groups),支持配文字。
- 表 image_groups:id, user_id, album_id, text_content, created_at
- 表 images:id, group_id, user_id, album_id, original_url, thumbnail_url, width, height, storage_type(local/s3/lsky/url), sort_order, created_at
- 前端展示时以动态组为单位倒序时间轴,图片按九宫格(CSS Grid)展示。
四、图片存储驱动(可配置)
- 支持四种存储方式,通过配置文件或 .env 切换:本地存储(public/uploads)生成缩略图(干预图片)S3 兼容存储(MinIO / AWS S3 / 阿里云OSS 等)LskyPro 上传(调用 LskyPro 的 API,返回图片 URL)直接 URL 上传(前端提供 URL,后端下载并存储到当前默认驱动中)
- 所有图片自动生成缩略图(如 320x320),缩略图存储在同一驱动下。
- 上传时支持多图同时上传、预览、删除待上传图片。
五、外部 API 上传(支持 ShareX 等工具)
- 提供一个 API 上传端点:POST /api/upload,支持 multipart/form-data 或 application/json(比如 ShareX 可以发 base64)。
- 要求:请求需携带用户 Token(Authorization: Bearer <jwt>)进行身份验证。参数:file(图片文件)或 url(图片链接),album_id(可选,默认相册),text(可选文字)。如果一次上传多张,可以传递 files[] 数组,服务端为每张图片创建同一个 group_id(新 dynamic 组)。返回 JSON:{"code":0, "data":{"group_id":123, "image_ids":[45,46]}}
- 这样用户就可以用 ShareX 配置自定义 API 上传截图到相册。
六、时间轴与首页(大屏滚动、懒加载、分页)
- 首页布局(垂直顺序):导航栏:Logo、搜索、用户菜单(个人中心 / 我的相册 / 后台管理 / 退出)中央大上传按钮:点击弹出模态框,支持三种上传方式(本地上传 / URL批量 / LskyPro token上传),同时选择相册、输入文字、设置可见性。随机图片板块:标题“发现精彩”,展示 12 张随机图片(滚动到底部懒加载更多),每张图片下方显示点赞数。最新上传图片板块:全站最近上传的图片(分页、滚动懒加载)。最新相册板块:展示最近 6 个相册封面(含作者、照片数量),点击封面进入相册详情。页脚:Powered by ThinkPHP8
- 所有图片列表接口必须支持分页参数(page, limit)和懒加载(前端监听滚动,自动请求下一页)。
- 随机图片板块的“加载更多”应随机抽取,避免重复(可使用 RAND() 配合已加载的 ID 排除)。
七、图片详情与交互
- 点击任意图片打开灯箱(PhotoSwipe 或自写 Modal),支持左右切换该动态组内的所有图片。
- 详情页显示:动态文本内容、发布时间、相册名称点赞按钮 + 数量(未登录时可点赞,记录 IP + 生成匿名标识)评论列表(显示评论者 IP 后两段或“游客”,内容,时间),支持登录用户评论,评论记录 IP。转发按钮(生成一条新的动态,引用原动态,可附加自己的文字)删除自己图片/动态的按钮(仅作者或管理员)
- 点赞表 likes:id, user_id(可为空), anonymous_id(未登录时存储 UUID 或 IP hash), group_id, created_at。保证同用户/匿名ID对同一动态只能点赞一次。
八、相册详情页
- 点击相册封面进入相册内图片列表(按动态组分开展示,仍然是时间轴风格)
- 相册内支持:修改名称/描述/可见性,设置封面(从相册内图片中选择),删除相册(级联删除内部图片及动态组)。
- 相册内的图片也支持单张删除、设为封面。
九、后台管理(仅管理员)
- 路径 /admin,简单的管理面板:图片管理:列表展示所有图片(含所属用户、存储方式、上传时间),支持按用户/时间筛选,每个图片有删除按钮。删除时同时
默认分类 2026-04-27 18:18:32 通过 网页 浏览(127)
共有0条评论!