feat: 初始版本,圆角主题与首次管理员引导
This commit is contained in:
68
.trae/documents/UI圆润美化与首次访问管理员引导实施计划.md
Normal file
68
.trae/documents/UI圆润美化与首次访问管理员引导实施计划.md
Normal file
@@ -0,0 +1,68 @@
|
||||
## 目标
|
||||
- 全站视觉风格更圆润、现代、美观,统一色彩与控件样式
|
||||
- 首次访问强制进入“创建管理员”引导页,完成后正常使用网站
|
||||
|
||||
## 视觉与交互设计
|
||||
- 基调:浅色主题,品牌主色(如紫/蓝),高对比文本,柔和阴影
|
||||
- 圆角:统一使用大圆角(8–16px)用于卡片、输入框、按钮、图片
|
||||
- 卡片化:发现/关注/活动列表与作品详情采用卡片布局,留白更舒适
|
||||
- 图片网格:统一比例裁切(aspect-ratio 4/3),`object-fit: cover`,悬浮轻阴影
|
||||
- 导航与页脚:更紧凑的导航条、醒目按钮、移动端更友好
|
||||
- 表单:更大输入框、内边距与圆角、清晰错误提示
|
||||
- 细节:头像圆形、标签(EXIF)胶囊样式、按钮主次分明
|
||||
|
||||
## 模板改造(Jinja)
|
||||
- `app/templates/base.html`:
|
||||
- 增加主题样式引入 `static/theme.css`
|
||||
- 优化导航条结构与按钮样式,增加圆角、阴影
|
||||
- 统一面包屑与主容器间距
|
||||
- `feed/discover.html` 与 `feed/following.html`:
|
||||
- 使用卡片网格展示作品标题与缩略图
|
||||
- 悬停动效与点击进入详情
|
||||
- `posts/detail.html`:
|
||||
- 大图展示 + 侧边信息(作者、可见性、发布时间)
|
||||
- EXIF 信息用胶囊标签行内展示
|
||||
- 评论区采用圆角气泡样式
|
||||
- `posts/create.html`:
|
||||
- 分组表单卡片,更清晰的可见性说明与提示
|
||||
- `activities/*.html` 与 `admin/*.html`:
|
||||
- 统一卡片表格样式,按钮圆角与颜色体系
|
||||
|
||||
## 样式资源
|
||||
- 新增 `app/static/theme.css`:
|
||||
- 定义 CSS 变量:主色、辅色、阴影、圆角、间距
|
||||
- 重置 Bootstrap 部分组件圆角与阴影(按钮、输入框、卡片、徽章)
|
||||
- 网格卡片与图片缩略通用类:`.card-grid`, `.photo-thumb`
|
||||
- 可选:Web 字体(如 Noto Sans SC),若需本地部署后再切换至本地字体
|
||||
|
||||
## 首次访问管理员引导
|
||||
- 新增蓝图 `setup`:
|
||||
- `GET/POST /setup/admin`:展示与处理管理员创建表单(email、username、password、确认密码)
|
||||
- 强密码校验(长度/复杂度)、唯一性校验、CSRF
|
||||
- 全局守卫:
|
||||
- 在应用工厂注册 `before_request` 钩子,若数据库中不存在 `role='admin'` 的用户且请求路径不是 `/setup/admin`,则重定向至引导页
|
||||
- 引导成功后跳转至首页
|
||||
- 移除默认 CLI 管理员创建说明,README 改为首次访问引导
|
||||
|
||||
## 安全与验证
|
||||
- 表单:CSRF、服务端校验(邮箱格式、用户名长度、密码强度)
|
||||
- 异常:重复管理员创建拦截(只有首次可创建)
|
||||
- 体验:错误信息以卡片内 alert 圆角提示
|
||||
|
||||
## 变更清单(文件级)
|
||||
- 新增:`app/blueprints/setup.py`(管理员引导页)
|
||||
- 修改:`app/__init__.py`(注册蓝图与首次访问守卫)
|
||||
- 修改:`app/templates/base.html`(引入 `theme.css` 与导航优化)
|
||||
- 修改:`app/templates/*`(发现、关注、发布、详情、活动、后台均套用卡片与网格样式)
|
||||
- 新增:`app/static/theme.css`(全站主题与圆角风格)
|
||||
- 修改:`README.md`(管理员创建流程说明)
|
||||
|
||||
## 实施顺序
|
||||
1. 添加 `theme.css`,在 `base.html` 引入并替换核心页面为卡片/网格布局
|
||||
2. 创建 `setup` 蓝图与管理员表单模板、校验逻辑
|
||||
3. 在应用工厂加入首次访问守卫逻辑与蓝图注册
|
||||
4. 更新 README,移除默认 CLI 管理员创建指令
|
||||
5. 手动验证:首次访问重定向 → 管理员创建 → 登录 → 浏览发现/关注/发布/活动/后台
|
||||
|
||||
---
|
||||
请确认是否按此方案执行,我将开始改造样式并实现首次访问管理员引导。
|
||||
125
.trae/documents/泸州高中摄影社论坛(Flask)实现计划.md
Normal file
125
.trae/documents/泸州高中摄影社论坛(Flask)实现计划.md
Normal file
@@ -0,0 +1,125 @@
|
||||
## 项目概述
|
||||
- 框架:Python Flask + Jinja2 服务端渲染,REST API 供前端交互
|
||||
- 角色:`未审核用户`、`普通用户`、`管理员`
|
||||
- 审核点:注册身份审核、公开作品审核、活动投稿审核
|
||||
|
||||
## 技术栈与依赖
|
||||
- 后端:`Flask`、`Flask-Login`、`Flask-WTF`、`Flask-SQLAlchemy`、`Flask-Migrate`
|
||||
- 图片处理:`Pillow`
|
||||
- 表单与校验:`WTForms`
|
||||
- UI:`Bootstrap`(Jinja2 模板)
|
||||
- 数据库:开发用 `SQLite`,部署用 `PostgreSQL`
|
||||
- 可选:`Flask-Admin`(或自定义后台)、`Flask-Mail`(邮件通知)
|
||||
|
||||
## 数据库设计(核心表)
|
||||
- `users`:id,email,username,password_hash,role,status(pending/approved/rejected),identity_photo_path,created_at
|
||||
- `profiles`:id,user_id,avatar_path,bio,grade,class_name,links,updated_at
|
||||
- `posts`:id,user_id,title,description,visibility(public/followers/private),status(pending/approved/rejected),created_at,published_at
|
||||
- `post_images`:id,post_id,original_path,web_path,thumb_path,exif_json,order_index
|
||||
- `comments`:id,post_id,user_id,body,status(active/removed),created_at
|
||||
- `follows`:follower_id,followee_id,created_at(唯一索引: follower_id+followee_id)
|
||||
- `activities`:id,title,theme,description,start_at,end_at,status(draft/published/closed),created_at
|
||||
- `activity_submissions`:id,activity_id,user_id,status(pending/approved/rejected),created_at
|
||||
- `submission_images`:id,submission_id,original_path,web_path,thumb_path,exif_json,order_index
|
||||
- `likes`(可选):id,post_id,user_id,created_at
|
||||
- `notifications`:id,user_id,type,payload_json,read_at,created_at
|
||||
- `review_logs`:id,target_type(user/post/submission),target_id,admin_id,action(approve/reject),reason,created_at
|
||||
|
||||
## 目录结构
|
||||
- `app/`:应用工厂(`create_app`)、配置、扩展注册
|
||||
- `app/blueprints/`:`auth`、`users`、`posts`、`comments`、`follows`、`feed`、`activities`、`admin`
|
||||
- `app/models/`:SQLAlchemy 模型
|
||||
- `app/services/`:图片处理、审核服务、通知服务
|
||||
- `app/templates/`:Jinja2 模板(含后台)
|
||||
- `app/static/`:CSS/JS/图片
|
||||
- `uploads/`:`identity/`、`posts/`、`activities/`
|
||||
- `migrations/`:数据库迁移
|
||||
|
||||
## 权限与审核流程
|
||||
- 注册:用户提交基础信息 + 学生身份照片 → `status=pending` → 管理员审核通过后 `approved`,可登录和发帖
|
||||
- 发帖:用户创建作品(多图)→ 若设置 `public`,则 `status=pending`,管理员审核通过后公开;`followers/private` 直接可见(仍可被管理员撤回)
|
||||
- 活动投稿:在活动期内提交→管理员审核→通过后在活动展示页公开
|
||||
- 管理员操作记录进入 `review_logs`
|
||||
|
||||
## 业务模块与页面
|
||||
- 认证:注册、登录、退出、找回密码(可选邮件)
|
||||
- 主页:个人资料、TA的作品、关注/粉丝、活动投稿
|
||||
- 作品:创建/编辑/删除、多图上传、EXIF展示、评论区
|
||||
- 发现:全站公开作品流(按热度/最新),可筛选主题、活动
|
||||
- 关注:显示所关注用户的最新作品(含非公开中 `followers` 可见)
|
||||
- 活动:活动列表、详情、投稿入口、获奖/精选展示
|
||||
- 管理后台:注册审核队列、公开作品审核、活动创建与审核、用户管理、审核日志
|
||||
|
||||
## API 路由草案
|
||||
- `POST /api/auth/register`(multipart,含身份照)
|
||||
- `POST /api/auth/login`,`GET /api/auth/logout`
|
||||
- `GET /api/users/<id>`,`PUT /api/users/<id>`(资料)
|
||||
- `POST /api/posts`,`PUT /api/posts/<id>`,`DELETE /api/posts/<id>`,`GET /api/posts/<id>`
|
||||
- `POST /api/posts/<id>/images`(追加图片),`DELETE /api/posts/<id>/images/<img_id>`
|
||||
- `POST /api/posts/<id>/comments`,`GET /api/posts/<id>/comments`,`DELETE /api/comments/<id>`
|
||||
- `POST /api/users/<id>/follow`,`DELETE /api/users/<id>/follow`
|
||||
- `GET /api/feed/discover`,`GET /api/feed/following`
|
||||
- `GET /api/activities`,`GET /api/activities/<id>`
|
||||
- `POST /api/activities/<id>/submit`(multipart,多图)
|
||||
- 管理员:
|
||||
- `GET /admin/reviews/users`,`POST /admin/reviews/users/<id>/approve|reject`
|
||||
- `GET /admin/reviews/posts`,`POST /admin/reviews/posts/<id>/approve|reject`
|
||||
- `POST /admin/activities`,`PUT /admin/activities/<id>`,`POST /admin/activities/<id>/publish|close`
|
||||
- `GET /admin/reviews/submissions`,`POST /admin/reviews/submissions/<id>/approve|reject`
|
||||
|
||||
## 图片上传与处理
|
||||
- 校验:文件类型(JPEG/PNG)、大小限制、内容解码(用 Pillow 防伪造)
|
||||
- 生成:`thumb`(方形或短边)、`web`(最大边约 1600px)、保留原图
|
||||
- 提取:EXIF(相机、镜头、快门、光圈、ISO、焦距)
|
||||
- 存储:磁盘分目录;文件名 `uuid`;数据库保存路径与元数据
|
||||
- 访问:统一 `send_from_directory` 或静态映射;考虑防盗链与权限检查(非公开资源鉴权)
|
||||
|
||||
## 活动模块设计
|
||||
- 活动生命周期:`draft → published → closed`
|
||||
- 字段:主题、时间窗、规则、允许每人投稿数量、是否匿名展示
|
||||
- 审核:投稿队列、通过后进入活动展示;支持精选/获奖标记
|
||||
|
||||
## 关注与发现
|
||||
- 发现流:`approved & public` 的作品,按 `score = w1*likes + w2*comments + w3*recency`
|
||||
- 关注流:所关注用户的最新作品,按时间倒序;含 `followers` 可见内容
|
||||
- 索引与缓存:热门榜单每日重算(可用简单缓存或定时任务)
|
||||
|
||||
## 通知与消息
|
||||
- 事件:审核结果、评论提醒、关注提醒、活动邀请/通过结果
|
||||
- 拉取:通知列表页与角标;邮件可选
|
||||
|
||||
## 管理后台
|
||||
- 仪表盘:待审核计数、近期活动、违规内容处理
|
||||
- 队列:注册、公开作品、活动投稿
|
||||
- 用户管理:封禁/解除、角色变更、作品/评论移除
|
||||
- 审核日志:可检索与导出
|
||||
|
||||
## 安全与合规
|
||||
- 密码:`werkzeug.security` 哈希(PBKDF2),强密码政策
|
||||
- 会话:`Flask-Login`,保护关键路由;CSRF 防护(`Flask-WTF`)
|
||||
- 上传:限制大小与类型,文件名随机化,路径隔离,权限控制
|
||||
- 敏感信息:`SECRET_KEY`、数据库连接通过环境变量;不记录敏感日志
|
||||
- 速率限制(可选):注册/登录/评论防刷
|
||||
|
||||
## 测试与验证
|
||||
- 单元测试:模型、服务(图片处理、审核)
|
||||
- 集成测试:注册→审核→发帖→公开→评论→关注→活动投稿全链路
|
||||
- 工具:`pytest`,`Flask-Testing`(可选),`Flask-Migrate` 迁移验证
|
||||
|
||||
## 部署与环境
|
||||
- 开发:`SQLite` + 内置服务器
|
||||
- 生产:`Gunicorn + Nginx`(Linux)或 `Waitress`(Windows);`PostgreSQL`
|
||||
- 静态与上传:Nginx 映射,非公开资源走鉴权路由
|
||||
- 初始脚本:创建管理员、迁移数据库、配置环境变量
|
||||
|
||||
## 里程碑与实施顺序
|
||||
1. 项目骨架与配置、模型与迁移
|
||||
2. 认证与注册审核链路
|
||||
3. 作品与多图上传、EXIF、可见性
|
||||
4. 评论与关注、发现与关注流
|
||||
5. 活动模块与投稿审核
|
||||
6. 管理后台与审核日志
|
||||
7. 通知与优化、测试覆盖与部署
|
||||
|
||||
---
|
||||
请确认是否按此方案开始实现,或指出需要调整的部分。
|
||||
Reference in New Issue
Block a user