HSNPhira v1 前端
HSNPhira v1 前端由纯 HTML + CSS + JavaScript 构建，采用毛玻璃（Glassmorphism）和 3D 卡片交互的暗色主题设计。所有页面通过共享的后端 API 提供数据。
页面列表
| 页面 | 说明 | 访问权限 |
|---|---|---|
index.html | 首页 / 登录注册 | 公开 |
rooms.html | 房间列表 | 公开 |
account.html | 账号管理 | 需登录 |
admin.html | 管理员控制台（服务器控制 + 用户管理） | 需管理员权限 |
privacy.html | 用户协议 / 隐私政策 | 公开 |
1. 首页 (index.html)
项目首屏，用于展示服务器概览和引导用户。
内容
- 导航栏 — Logo + 页面链接（主页、房间列表）
- 主视觉 — 全屏背景图（渐入动画），标题"HyperSynapse Network Phira多人游戏服务器"
- 用户数统计 — 通过
fetch("/usertotal")获取已注册用户总数并展示 - QQ 群引导 — 展示 QQ 群号（1049578201），支持一键复制
交互
- 页面滚动时各 section 通过 IntersectionObserver 触发渐入动画
- 用户头像下拉菜单（登录后显示）
2. 房间列表 (rooms.html)
实时显示 Phira 多人游戏的房间状态。
功能
- 服务器状态指示 — 通过
HEAD /roomsjson检查服务器在线状态 - 房间列表表格 — 显示房间名、房主、人数、循环状态、谱面、曲绘、下载、人员
| 列 | 说明 |
|---|---|
| 房间名 | 房间名称 |
| 房主 | 房主名称（链接到 Phira 用户页） |
| 人数 | 当前房间内用户数 |
| 循环 | 循环模式是否开启 |
| 谱面 | 当前选择的谱面名称（链接到 Phira 谱面页） |
| 曲绘 | 谱面封面缩略图（点击放大预览） |
| 下载 | 谱面文件下载按钮 |
| 人员 | 查看房间内用户列表 |
数据获取
GET /roomsjson— 获取房间列表 JSONGET https://phira.5wyxi.com/chart/{id}— 获取谱面元数据（名称、曲绘、文件）
交互细节
- 3D 倾斜跟随效果 — 鼠标移动时表格产生旋转视差
- 曲绘点击放大（Lightbox）
- 房间用户列表弹出窗口（房主高亮显示）
- 强制横屏适配（手游设备）
- 登录/注册弹窗（与
account.html共享）
3. 账号管理 (account.html)
用户查看和修改自己的账户信息。
功能
- 用户信息展示 — 头像、用户名、ID、Phira ID、RKS、注册日期、权限徽章
- 修改用户名 — 输入新用户名 + 当前密码确认
- 修改密码 — 当前密码 → 新密码 → 确认新密码（最少 6 位）
- 权限信息 — 显示管理员/开发者状态（只读）
信息卡片
| 区域 | 内容 |
|---|---|
| 头像区 | 大尺寸头像 + 名字 + ID |
| 统计区 | RKS 值、注册日期、在线状态 |
| 信息网格 | 用户名、Phira 用户名、账户状态、最后登录时间 |
| 权限网格 | 管理员状态、开发者权限 |
API 交互
POST /usermgr/login— 登录POST /usermgr/register— 注册POST /usermgr/update_account— 更新用户名/密码
4. 管理员控制台 (admin.html)
服务器运维管理界面，包含两个标签页。
4.1 服务器控制
| 功能 | 说明 |
|---|---|
| 服务器状态 | 通过 /execute 调用 check.sh 检测运行状态 |
| API 状态 | 通过 GET /roomsjson 检测 API 是否在线 |
| 服务控制 | 启动/重启/关闭（对应 start.sh、stop.sh） |
| 自定义命令 | 输入任意 shell 命令执行 |
4.2 用户管理
| 功能 | 说明 |
|---|---|
| 用户列表 | 表格展示所有用户（ID、用户名、头像、Phira ID、RKS、权限） |
| 搜索过滤 | 按用户名/Phira ID 搜索，按管理员/开发者状态筛选 |
| 批量操作 | 批量设置/取消管理员或开发者权限 |
| 编辑用户 | 修改用户名、密码、Phira ID、管理员/开发者状态 |
安全
- 需登录且具有管理员权限（
admin === "yes"） - 修改敏感字段（admin、dev、password）需要超级管理员密码
- 操作前弹出管理员密码验证弹窗
API 交互
POST /admin/users— 获取用户列表POST /admin/update— 更新单个用户POST /admin/batch-update— 批量更新用户POST /postadmin/execute— 执行服务器命令（需要三层密码验证）
5. 用户协议 (privacy.html)
法律文档页面，包含用户协议和隐私政策。
设计风格
- 主题 — 暗色（
background: #000），全屏背景图 - UI 风格 — 毛玻璃效果（
backdrop-filter: blur()），半透明边框 - 交互 — 3D 卡片倾斜跟随、hover 放大/发光、渐入动画
- 品牌色 — 冰蓝色（
#a1e5ef）
通用组件
- 导航栏 — 各页面顶部共享，含 Logo + 导航链接 + 用户状态
- 登录/注册弹窗 — 复用组件，支持登录/注册模式切换
- 用户下拉菜单 — 显示用户名、头像、Phira 链接、账号管理入口、退出登录
- 消息提示 — 成功/错误消息条，5 秒自动隐藏
技术栈
- 纯 HTML5 + CSS3（无前端框架）
- 原生 JavaScript（ES6+，
async/await、fetch） - 本地存储（
localStorage）保存登录状态 - IntersectionObserver 实现滚动动画