技能介绍

它要解决什么问题

市面上的个人仪表盘要么要求后端和数据库，要么把你绑在某个平台的生态里。很多人真正想要的只是：一个能离线打开、数据自己攥在手里、丢到任意静态托管就能访问的页面。这个技能把「个人工作台」收敛成一个 index.html——内联 CSS、原生 JS、零依赖、零构建，数据全部存在浏览器 localStorage 里，不需要写一行服务端代码。

它如何工作

实现骨架相当具体：

单文件 + 移动端优先：<style> 放在 <head>，IIFE 脚本放底部，外层 max-width:860px 居中容器，用 env(safe-area-inset-*) 处理刘海屏安全区。布局是左侧 .sidebar 导航 + 右侧 .content，导航项由 JS 里的 MODULES 数组生成，selectMod(key) 一次只渲染一个模块。
状态与持久化：全局状态 S 从 localStorage 加载并按 key 补默认值，存储键做命名空间前缀（如 bytw_mood）。模块数据分两种形态：按日期索引的对象（S.mood[TD]）和普通数组（S.ledger）。事件委托只挂两个监听：一个 document 级 click 按 data-act 分发操作，一个 change 监听按 data-save="store.field" 自动保存输入。
容忍断网的外部 API：所有 fetch 都带 .catch() 和降级方案。天气用 open-meteo（免 key），农历和热搜用 vvhan，健身跟练直接嵌入 Bilibili 播放器（预置一组已验证的 bvid），并内置 SVG 火柴人动画作为离线 fallback，也支持粘贴任意 B 站链接解析 bvid。3 天预报在同一次请求里用 forecast_days=3&timezone=auto 拿到，渲染成三张卡片。
确定性离线内容：宜忌、菜谱这类内容用 hashStr(日期) 从内容池取值，同一天永远得到同样结果，断网也不空白。顶部进度条由 dailyProgress() 对约 6 项日常习惯打分生成。
部署与验证：把 index.html 拖进 Netlify Drop 即得到 HTTPS 地址；沙箱通常没有外网，需用 WebFetch 验证线上页面，拖拽部署本身留给用户操作。
数据安全：设置里提供 JSON 导出/导入（Blob 下载 + FileReader 恢复），因为 localStorage 与设备绑定，清缓存即丢失。