luntan/.trae/documents/UI圆润美化与首次访问管理员引导实施计划.md

目标

• 全站视觉风格更圆润、现代、美观，统一色彩与控件样式
• 首次访问强制进入“创建管理员”引导页，完成后正常使用网站

视觉与交互设计

• 基调：浅色主题，品牌主色（如紫/蓝），高对比文本，柔和阴影
• 圆角：统一使用大圆角（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. 手动验证：首次访问重定向 → 管理员创建 → 登录 → 浏览发现/关注/发布/活动/后台

---

请确认是否按此方案执行，我将开始改造样式并实现首次访问管理员引导。