御猫音乐馆 - 个人音乐收藏播放站

一个基于 APlayer 的个人音乐收藏与在线播放网站，支持 WebDAV 音乐源、多设备配置同步、管理员后台等丰富功能。

功能特点

• 在线音乐播放 — 基于 APlayer，支持顺序/随机/单曲循环三种播放模式
• 播放历史 — 记录播放过的歌曲，支持清空
• WebDAV 音乐源 — 直接从 WebDAV 加载音乐文件，支持缓存加速
• 多设备配置同步 — 通过 GitHub API 将配置写入仓库，所有设备共享
• 管理员后台 — 在线修改网站标题、副标题、图标、主题色等
• 夜间模式 — 明暗主题切换
• 响应式设计 — 深色磨砂玻璃 UI，适配桌面和移动端

快速开始

本地运行

node server.js

访问 http://localhost:3000。

服务端会：

• 提供静态文件（index.html、script.js、style.css 等）
• 从 WebDAV 代理歌曲文件（绕过 CORS）
• 提供 /api/songs 接口返回歌曲列表
• 提供管理员后台保存配置接口

部署到 GitHub Pages

1. Fork/Clone 本仓库，设置 GitHub Pages 为 main 分支根目录
2. 网站完全静态运行，无需后端服务器
3. 通过管理员后台的账户标签页配置 GitHub Token 和仓库名，实现多设备配置同步（见下方说明）

管理员后台

登录

点击页面右上角的齿轮图标，输入默认密码 admin123 即可进入管理员后台。可在账户标签页修改密码。

配置项

站点设置 — 网站图标、标题、副标题、页脚版权信息

音乐来源 — WebDAV 地址、用户名、密码（用于从 WebDAV 加载音乐）

样式设置 — 默认封面图、播放器主题色

账户 — 修改管理员密码、配置 GitHub 同步

配置同步方案

本项目的核心特色：部署在 GitHub Pages（纯静态托管）上仍能通过浏览器后台修改样式并同步到所有设备。

同步机制（三层兜底）

层级	来源	说明
静态配置	site-config.js	随代码部署，所有设备共享初始配置
实时配置	_live-config.json	由 GitHub API 写入仓库，所有设备拉取
本地缓存	localStorage	每台设备的浏览器本地缓存

加载优先级：_live-config.json > site-config.js > localStorage（本地未登录时）

配置 GitHub 同步

1. 在 GitHub Token 设置 创建一个 Fine-grained token（或 classic token），权限勾选 Contents: Read and write，限制到本仓库
2. 在管理员后台 → 账户标签页，填入 Token 和仓库名（格式：用户名/仓库名）
3. 点击保存设置，配置会实时写入仓库的 _live-config.json
4. 所有设备刷新后自动拉取最新配置

Token 仅存储在管理员浏览器的 localStorage 中，不会提交到代码仓库。

目录结构

/
├── index.html          # 主页面
├── style.css           # 样式表
├── script.js           # 前端逻辑
├── server.js           # 本地开发服务端
├── site-config.js      # 静态配置文件（随代码部署）
├── _live-config.json   # 运行时配置（由 GitHub API 写入）
├── manifest.json       # PWA 清单
├── sw.js               # Service Worker
├── music.json          # 歌曲列表数据
├── music/              # 音乐文件目录
├── scripts/
│   ├── generate-music-json.js  # 生成歌曲列表
│   └── decrypt-config.js       # 配置解密工具
└── .github/workflows/         # GitHub Actions

技术栈

• APlayer — HTML5 音乐播放器
• 原生 JavaScript — 无框架依赖
• CSS 自定义属性 — 主题切换
• GitHub Contents API — 配置持久化
• WebDAV — 音乐文件存储

许可证

MIT