主题
学习小玩具：安全的摸鱼区
这一页没有新知识点，只有四个纯客户端的小工具——写代码写累了可以来玩两把。 它们同时也是一个现成的"安全样本"：读完下面「为什么这些小玩具不可能被 XSS」， 你就明白 stage2 里讲的
textContent与innerHTML的区别到底意味着什么。
看到状态码，3 秒内说出含义——这是读抓包的基本功。
战绩：0 对 · 连对 0 · 历史最佳 0
400
为什么这些小玩具是安全的
这一页从头到尾只有一个 HTML 文件和一段 JS，没有后端、没有数据库、没有网络请求：
- 所有动态文字都走 Vue 插值（
）。插值在框架内部等价于textContent， 你在 URL 编码翻译机里输入<script>alert(1)</script>，它只会被当成一串普通字符 显示出来，永远不会变成真的标签。这正是ui-custom一课讲的：能用textContent就绝不碰innerHTML。 - 没有
eval/new Function。进制转换用parseInt，颜色换算是手写的数学， 状态码答案比对是普通的===。 - 没有存储敏感信息。唯一的 localStorage 记录是状态码答题战绩，你在 DevTools → Application 面板里能亲眼看到它、随手清掉它。
- 没有输入进 URL。所有工具都不把你的输入拼进地址栏或发给任何服务器—— 想看"输入进 URL 会发生什么"，去 Network 面板观察搜索引擎的请求更直观。
自己动手改造
试着给状态码卡牌加一组新题（改 ToysPanel.vue 里的 CODES 数组），或者给颜色 实验室加一个 HSL 滑杆。改完push上来，这一页就会随部署自动更新——顺便你就把 "改组件 → 构建 → 部署"整条链路走通了。
彩蛋都在哪
| 彩蛋 | 触发方式 | 效果 |
|---|---|---|
| 🎵 Miku 模式 | 依次按 ↑ ↑ ↓ ↓ ← → ← → B A | 全站品牌色变薄荷蓝 + 音符飘落 |
| ✨ 蔚蓝模式 | 连点 5 下左上角站名 | 品牌色变蓝白光晕感 |
| 👀 标题撒娇 | 切到别的标签页再回来 | 看一眼标签页标题 |
这套"科乐美秘技"是浏览器游戏时代的通用暗号，键序本身就是个值得记住的文化梗。 实现思路（GlobalFun.vue）：监听 keydown，维护一个"已按序列"缓冲，每当缓冲是 目标序列的前缀就继续等，匹配完整串就触发——这个"前缀匹配"思路在写搜索联想、 命令行快捷键时都会用到。