cc
a185e56c22
起始页(StartPage) - 极简玻璃风导航页作未登录首页:时段问候、Bing 默认可切换搜索、10 个快捷位、右下齿轮进登录 - 昼夜背景自动切换(light/dark),按天气图标码 + 本地时间判断 - 天气动态效果(WeatherFx canvas):雨/雪/雷,克制风格,尊重 reduced-motion 天气与定位(前后端) - 后端 /api/web/weather:高德 IP 定位(城市+坐标) + 和风实时天气 - 和风用 JWT(EdDSA/Ed25519)认证,密钥走环境变量、仅后端持有 - 每日限流(高德 300、和风 900,北京 0 点归零) + 10 分钟按 IP 缓存 - 前端 useWeather + WeatherIcon(7 类极简 SVG) 导航与登录 - 浏览器返回键支持(History API);返回即登出 - 记住我:勾选存 localStorage、不勾存 sessionStorage,默认不勾 其他 - .gitignore 忽略 *.pem/*.env 等密钥 - 新增文档 docs/startpage-weather-location.md 及部署 spec/plan Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| dark.png | ||
| light.jpg | ||
| README.md | ||
Startpage 背景图
导航起始页（src/components/StartPage.tsx）的背景图放在这个目录里，
按昼夜自动切换：
- 白天 →
light.*（如light.jpg） - 夜晚 →
dark.*（如dark.png）
放好这两张文件即可生效，无需改代码。
工作方式
StartPage 用 Vite 的 import.meta.glob 索引本目录，按文件名精确取
light.* / dark.*，再按昼夜选用。
昼夜判断：优先用天气接口返回的图标码（晴/多云/阵雨类区分昼夜）， 图标码判断不了的天气（雨、雪、雾、阴等无昼夜之分）则用本地时间兜底 （18:00–06:00 视为夜晚）。
回退顺序：选中的那张缺失 → 用另一张 → 都缺则用目录里排序第一张 → 再无则用中性渐变（构建始终成功）。
命名与规格
- 必须命名为
light.*和dark.*（扩展名任意：.jpg/.jpeg/.png/.webp）。 其它名字（如dark33.png）不会被选用，只会白白打进包里，建议删掉。 - 格式：
webp（最小）>jpg>png - 横图、够大：≥ 1920×1080，最好 2560×1440+
- 图上还会叠一层暗色 scrim + 半透明黑遮罩（保证文字可读），所以偏暗、 低对比的图效果最好。
本地预览（仅 npm run dev）
不开后端也能预览昼夜与天气动效，加 URL 参数即可：
?bg=light/?bg=dark—— 强制白天/夜晚背景?fx=rain/?fx=snow/?fx=thunder/?fx=none—— 强制动态效果
例：http://localhost:5173/?bg=dark&fx=snow