校园卡挂失补办台 · Campus Card Loss Hub
Overview
一份单文件、断网可用的 HTML 生活管理台，帮用户在校园卡（水卡 / 饭卡 / 门禁卡 / 银行卡）丢失时把"快速挂失补办"真正落地。核心是把抽象的应急流程，变成每天可执行的五步闭环：
- 评估现状 — 盘点手头每张校园卡（类型 / 是否绑定线上 / 卡号是否备份 / 风险等级），一眼看出未备份、未绑定的风险缺口
- 学技巧 — 沉淀挂失渠道 / 补办流程 / 临时方案 / 防丢技巧的最佳实践 + 掌握度标记
- 小范围试用 — 从一次"模拟挂失演练"开始，记录预期 vs 实际效果，给出结论（继续 / 调整 / 停用）
- 观察效果 — 试用观察日志驱动复盘，看清哪步卡住、材料是否带齐
- 固定做法 — 把验证过的做法固化成个人 SOP（挂失清单 / 补办材料包 / 防丢固定动作）
内置能力（对照工作台搭建铁律）：
- 今天要处理置顶区：逾期项自动标红 + 一键处理，昨天没做完的顺延不丢失
- 总览页：SVG 进度环（完成率）+ 卡片保障完善度堆叠条（就绪 / 待完善 / 缺口），随时看全局
- 本地存储：localStorage 前缀 wb_cardloss_，刷新/关闭不丢
- 备份闭环：首屏「导出 JSON / 导入恢复」（导入不限条数）、「清空示例 / 清空全部（二次确认）」
- 全内联零外链：CSS/JS/SVG 图标与图表全部内联，不引任何外部框架/CDN/字体
- 双端适配：PC 顶部 Tab、手机底部 Tab，按钮 ≥44px、输入框 ≥16px、适配刘海安全区
- 预置示例：首次打开 4 条示例（含 1 条逾期的饭卡：未绑定+未备份+高风险），非空白页
When to use
- 用户说「帮我做个校园卡挂失补办台 / 丢卡应急工具 / 水卡饭卡管理工具」。
- 用户想给学生/新生/在校生，做一份可离线、可分发、可备份的丢卡应急生活管理台。
- 需要把"评估→技巧→试用→观察→固化"这类五步法，固化成一个持续使用的个人系统。
Resources
assets/campus-card-loss-hub.html— 已生成好的完整单文件应用（开箱即用，无需构建）。
Quick Start（交付步骤）
这是资产交付型技能：HTML 已生成完毕，直接分发给用户即可，无需编程。
# 1) 把成品 HTML 复制到用户工作区（或任意目录），双击即可在浏览器离线打开
cp assets/campus-card-loss-hub.html <目标目录>/
# 2) 想换标题/配色/校区规定文案时，用编辑器直接改 HTML 内：
# - <title> 与 .brand h1 改名称
# - :root 里的 --pri / --bg / --ink 改主题色
# - 各 <section> 的提示文案、select 选项（如"卡类型"枚举）按实际校情调整
常见个性化点：
- 挂失渠道文案：在"技巧学习库"里把本校真实的挂失电话、线上入口（校园 APP / 公众号）、补办点位置与工作时间写成技巧。
- 补办工本费 / 材料：在"我的固定做法"里固化本校一卡通中心的要求（身份证 / 学生证 / 工本费金额 / 旧卡余额转移时长）。
- 主题色：--pri 主色（默认信任蓝 #2f80ed）。
分发与安装
- 直接发文件：把
assets/campus-card-loss-hub.html发给对方——双击即在任意现代浏览器离线打开，零安装零联网。 - 部署成手机 APP：用 cloudstudio-deploy 或任意静态托管部署后，手机浏览器打开 → 分享 → 添加到主屏幕，即变成可日常使用的 APP。
- 打包成 skill 分发：把整个
campus-card-loss-hub/目录 zip 发给他人，对方解压到~/.workbuddy/skills/<name>/（用户级，全项目可用）即可安装；本技能即采用此方式分发。
注意事项
- 生成内容为单文件离线应用，无任何外部接口或资源依赖，符合隐私边界（数据只存本机浏览器）。
- 部署到公网后链接任何人可打开，但页面不预填真实隐私数据（卡号、余额等）；备份 JSON 含用户数据，注意私下传输。
- 数据仅存于本机 localStorage；建议定期用「导出 JSON」备份，避免清缓存丢失。
- 各校挂失补办规定不同，内置分类与示例为通用示范，使用前请按本校一卡通中心规定校准（补办点、工本费、所需材料）。
