网站待完成表单

浏览器缓存处理方法：localStorage.clear() & Ctrl+F5

网站开启随机音乐 （已完成✅）

1.目标 刷新页面保持上次那首，用户只有点“播放”才随机换歌。

2.关键流程
① 页面加载先拉最新歌单 → ② 用 localStorage 里的下标恢复歌曲 → ③ 用户点播放时再随机一次并落盘。

3.核心代码（仅两处）
- 恢复时：

current = savedTrack ? parseInt(savedTrack) : 0;
- 播放时：

current = Math.floor(Math.random() * tracks.length); 4.必做清理
- 首次测试先 localStorage.clear() 一次，避免旧下标干扰。
- 确认 /api/music/list 返回正常，tracks.length > 0。

5.清空缓存 → 刷新 → 停在上次那首 → 点播放 → 歌名变化 → 随机生效。

网页可切换黑色背景(中间动画过渡) （已完成✅）

1. 变量：:root 放白天色，[data-theme="dark"] 放黑夜色。
2. 按钮：导航栏右侧加 <button id="theme-toggle">☀️🌙</button>，CSS 用 .sun-icon/.moon-icon 控制显隐。
3. 记忆：点击时 document.documentElement.setAttribute('data-theme', 'dark') 并 localStorage.setItem('theme', 'dark')；页面加载先读 localStorage 或系统偏好，防止闪白。

核心代码：

btn.onclick = () => { html.setAttribute('data-theme', html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');      localStorage.setItem('theme', html.getAttribute('data-theme')); };

留言板，可留言，可回复文本和表情，输入方式使用markdown，记录评论时间，通过输入QQ邮箱获取QQ头像，输入昵称固定名字，评论需要验证码，要审核，防止恶意评论（已实现，使用开源项目Artalk✅）

✅ 1. 输入验证与内容过滤（防XSS、SQL注入）
- 对用户输入进行白名单验证，只允许合法字符（如中文、字母、数字等），禁止HTML标签和脚本代码 。
- 输出时进行HTML编码，将 <, >, & 等特殊字符转义，防止浏览器将其解析为脚本 。
- 使用参数化查询（如 prepared statements）防止SQL注入 。

✅ 2. 添加验证码机制（防机器人刷留言）
- 使用图形验证码、滑动验证或行为验证等方式，阻止自动化脚本批量提交留言 。
- 验证码必须在服务器端验证，客户端JS验证可被绕过 。

✅ 3. 限制提交频率与IP访问（防刷、防DoS）
- 设置同一IP在1分钟内只能提交1次留言，超过频率则封禁或要求再次验证 。
- 可结合Session或Token机制防止重复提交。

✅ 4. 开启内容审核机制（防垃圾/违法内容）
- 留言默认设置为“待审核”状态，后台人工审核后再显示，避免恶意内容直接曝光 。
- 可加入关键词过滤系统，自动屏蔽敏感词或广告内容。

部署网站

• 已经完成，等待域名备案