68 lines
3.5 KiB
Markdown
68 lines
3.5 KiB
Markdown
## 目标
|
||
- 全站视觉风格更圆润、现代、美观，统一色彩与控件样式
|
||
- 首次访问强制进入“创建管理员”引导页，完成后正常使用网站
|
||
|
||
## 视觉与交互设计
|
||
- 基调：浅色主题，品牌主色（如紫/蓝），高对比文本，柔和阴影
|
||
- 圆角：统一使用大圆角（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. 手动验证：首次访问重定向 → 管理员创建 → 登录 → 浏览发现/关注/发布/活动/后台
|
||
|
||
---
|
||
请确认是否按此方案执行，我将开始改造样式并实现首次访问管理员引导。 |