一、改动原因
之前的前端界面，背景为纯色浅底，色彩为橙色 + 灰白，并且图标大量使用 Emoji（🦁🌳📚 等），字体也是微软雅黑，缺少设计，难以给用户视觉交互的美感，与“面向家庭的暖色绘本工坊”目标存在差距。因此，我尝试下载Frontend Design，进行前端美化。

下载Frontend Design后，与AI沟通，让它在原本前端的基础上进行美化，并给它“风格要温暖手工「暖色、柔和、像绘本/故事感」，「面向家长，故事感、温暖、有想象力，主色偏暖，字体要有童话感但不要幼稚」”、“温暖、可信、童趣但不幼稚、像一本实体绘本封面”、“面向家长”等提示词，经过多次尝试和微调，最终确定出下面的前端设计。

二、视觉设计体系

2.1 色彩变量

css

--terracotta: #c4704a     （主色 · 陶土橙 ）

--amber: #e8a855           （点缀 · 琥珀）

--rose: #c9897a            （ 辅助 · 玫瑰 ）

--sage: #8ba888            （ 辅助 · 鼠尾草绿 ）

--cream: #fbf6ee          （ 页面底色 ）

--paper: #fffcf7           （ 卡片纸色 ）

--ink: #3d2e26             （ 主文字 ）

同时旧变量名保留别名，确保渐进兼容。

2.2 字体层级

- Display（标题）：“Noto Serif SC” — 衬线，偏书籍/杂志感

- Body（正文）：“LXGW WenKai” — 楷体风格，贴近儿童读物

- UI（按钮/标签）：“Noto Serif SC” — 与标题统一

2.3 圆角与阴影

- 圆角改动12px → 36px

- 阴影使用暖色调 “rgba(61, 46, 38, …)”，避免冷灰投影

2.4 背景质感

- “.bg-soft”：三层径向渐变（琥珀/玫瑰/鼠尾草）+ SVG fractalNoise 纸纹

- “.bg-reader”：阅读页专用浅暖底色，降低干扰

2.5 按钮体系

- Primary：陶土橙渐变 + 底部 4px 立体描边（提示词：「按下去」的绘本按钮感）

- Ghost：纸色底 + 暖边框，hover 时边框变玫瑰色

- 尺寸分级：“btn-sm” / 默认 / “btn-lg” / “btn-xl”

2.6 入场动画

- “fade-up”：元素自下而上淡入

- “gentle-float”：首页插画卡片轻微上下浮动（6s 循环）

更改后效果图如下。

三、手绘图标系统

原本的图标虽然能够形象的表示文字，但是大量采用emoji图标，产生的是“网络聊天感”而没有“绘本感”。因此我决定用手绘图像替换原本的emoji图标，这样更符合“童话绘本”的主题。在多个网站搜寻素材后，最终使用Doodle Icons（https://icons8.com/icons/doodle）的素材作为参考，让Python 脚本批量生成 Doodle 风格（提示词：手绘描边、柔和填色、圆角造型）的SVG。

最终新增 27 个独立 SVG 图标，覆盖场景、角色、功能等：

分类	图标
场景	forest 、space 、castle 、ocean
角色	lion 、rabbit 、robot 、dragon
兴趣标签	treasure 、friends 、adventure 、learn 、music
功能	book 、book-empty 、mic 、share 、pdf 、print 、lock 、moon 、sparkle 、wand …
品牌	brand

替换后效果如下。

四、首页轮播功能

在首页增加“自动轮播”功能（4.5s 间隔，底部圆点指示器），目前放的是 3 张来自 Pixabay 的童话风格示例图：森林中小读者与精装绘本、小红帽场景、魔法森林光影。之后会改为用生成的童话绘本资源进行轮播。

五、主要改动页面

5.1 首页

上方导航新增家长中心入口

5.2 完成页

（1）改版前：

存在“封面 + 操作卡片/家长设置/解锁区混杂”、“家长控制中心嵌入完成页”等问题。

（2）改版后：

- 结构简化为：完成徽章 → 封面展示 → 参数摘要 → 主操作栏 → 底部导航

- 主操作三按钮：开始阅读 / 分享作品 / 下载 PDF

- 封面 .book-cover 增加渐变书脊与纸纹质感

- 标题使用渐变文字 + 分阶段 “fade-up” 动画

- 家长设置 迁移至独立 “parent.html”

- 底部改为“去绘本库 / 再写一个故事”

5.3 绘本库

- 顶栏 Logo改为“book.svg”

- 导航增加家长中心链接

- 书架筛选器样式统一为“.switcher-multi”分段控件

5.4 新增页面：家长中心（parent.html）

独立的家庭安全与偏好管理页，包含三块卡片式设置区：

1. 使用时长 — 孩子每日分钟上限（moon.svg）

2. 内容过滤 — 严格 / 标准 / 宽松（learn.svg）

3. 分享与隐私 — 公开分享开关、匿名统计开关（share.svg）

六、数据库和登录界面更新

1.数据库更新

在前端做到家长中心时，突然意识到数据库还没有相应的表和字段，于是，我在app.db新增 “users” 表，字段包括：“user_id”、“username”、“password_hash”、“role”、“display_name”、“status”、“parent_user_id”、时间戳等。

我把原 “editor” 角色更名为 “child”，并通过 “ROLE_ALIASES” 兼容旧 token，并完善角色权限。

家长（parent） 新增权限：家庭设置读写、孩子账号管理、孩子绘本查看/删除/清空历史、改密等

孩子（child） 权限收窄：不可访问家长设置；保留创作/阅读/导出/分享（受家长约束）

管理员（admin） 拥有所有权限，可进行用户管理与运营统计

2.对孩子每日分钟数的限制

job_sqlite.py：新增 “count_jobs_today(owner_username)” 统计当日使用数。

jobs.py：孩子使用前调用 “assert_child_job_create_allowed”，按家长设置的“每日使用分钟数”换算每日最大使用数（约每 15 分钟 1 次）

3.登陆界面更新

做好权限划分后，顺便实现了不同角色的登录功能，如下：