mirror of
https://gitcode.com/JianFeeeee/HomeAgent.git
synced 2026-09-22 09:58:06 +00:00
fab27a1194
## 深浅双主题 跟随系统偏好，导航栏按钮可手动切换（存 localStorage）。首绘前在 <head> 里 定好 data-theme，无闪白（实测 reload 首绘即正确背景色）。 语义色全部令牌化，:root[data-theme="light"] 只覆盖取值；品牌三色两主题共用 （对应三层记忆，换主题不该换语义）。 ## 动效层（1 → 11 个 keyframes） 极光漂移 + 细网格背景、粒子网络（近邻连线，密度按面积自适应、上限 72）、 三色滚动进度条、标题渐变流动、分块上错落入场、卡片聚光 + 3D 微倾、 三层记忆色条自上而下灌注、架构图流光带 + 节点脉冲、数字滚动到位、 分节标题下划线展开。 三条硬约束（都吃过亏）： 1. **内容默认可读** —— 初始隐藏只在 .js-fx 下生效，而 .js-fx 仅当 JS 真跑起来才加。 实测 JS 禁用时 30/30 元素可见（旧版把 opacity:0 写默认样式里 → 26/30 永久不可见）。 2. **尊重 prefers-reduced-motion** —— 不启粒子、不画进度条、元素直接可见。 3. **装饰不得产生滚动条** —— canvas 改用 documentElement.clientWidth （window.innerWidth 含滚动条，实测多出 15px 撑出横向滚动），body 加 overflow-x: clip 兜底。 ## 移除立绘（用户要求） 删掉 HTML/CSS/JS/资源/令牌全部痕迹，Hero 改单栏。README 记下为什么最终不放图： 原图是不透明 WebP（mode=RGB 实测），白底与角色白裙子同色，flood-fill 会渗进轮廓 让约 42% 身体透明 —— 这类素材要么出透明图，要么就别放。 ## 顺带修掉 3 个真 bug（都是主题化后暴露/复核出来的） 1. **代码块换行全丢** —— .code 缺 white-space: pre，实测整段命令挤成一行。 （这个 bug 在我这次改动之前就存在） 2. **浅色下导航看不清** —— header 背景硬编码 rgba(11,16,32,.78)，改用 --nav-bg。 3. **浅色下立绘处有灰块** —— .mascot::after 硬编码深色，改用 --mascot-fade （该规则已随立绘一并删除）。 另把 .badge / .btn-ghost:hover / 按钮光泽里 3 处 rgba(255,255,255,…) 令牌化为 --hover / --sheen，否则浅色下是白压白。 ## 验证（共享 Chromium 实跑） 深/浅首屏 + 记忆段 + 架构段截图逐张看过；console 错误 0；坏图 0； JS 禁用 30/30 可见；reduce 全可见且粒子/进度条已停；主题切换 → 刷新后保持； 390/768/1440 三档横向溢出均为 0；CSS 花括号平衡、8 个 keyframes 无孤儿。
