面向家庭监控场景的轻量 VMS 管理界面。项目直接消费现有云瞰 API，不包含演示摄像机、模拟事件或硬编码统计数据。
- 首次使用：选择语言 → 填写服务器地址 → 用户名与密码登录 → 服务端验证
- 五种完整界面语言：简体中文、English、繁體中文、日本語、Français
- 系统总览：真实相机快照、事件统计与趋势、录像/检测/服务健康、存储容量
- 实时快照墙、事件主从视图、录像时间线、设备、存储和系统状态页面
- 各数据模块独立 loading / error / empty 状态，一个接口失败不会拖垮整页
- 桌面优先并支持窄屏与移动端导航
npm install
npm run dev开发服务器仅监听 127.0.0.1，端口由 Vite 自动选择；默认端口被占用时会继续尝试下一个可用端口。UI 始终根据当前页面的 origin 定位代理，不依赖固定的 4173 或 5173。当所选 VMS 地址与页面跨源时，UI 会自动使用内置的同源开发代理转发 /healthz 和 /api/*，因此不需要修改旧 VMS 的 CORS 配置，也不会把 JWT 放入 URL。修改代理配置后需重启开发服务器。
生产构建与预览：
npm run build
npm run preview测试：
npm test- 登录：
POST /api/auth/login，请求体为{ username, password } - 当前账号：
GET /api/auth/me - 鉴权：
Authorization: Bearer <access_token> - 相机快照和事件图片通过带鉴权的
fetch获取 Blob，再创建浏览器 Object URL；令牌不会放入图片 URL - 服务器地址和界面语言保存在
localStorage - 默认情况下 Bearer 会话仅保存在
sessionStorage，密码不持久化 - 用户主动勾选“保持登录（记住密码）”后，用户名、密码和 Bearer 会话会保存在当前浏览器的
localStorage；仅建议在私人设备上启用 - 不发送全局
Accept-Language；后端业务错误消息保持原文 - 设备 URL 在展示前会移除用户名和密码
核心总览数据来自：
/api/cameras/api/events/stats?include_hourly=true/api/events/recent/api/detection/status/api/recordings/health/api/system/storage/api/storage/by-camera/api/system/status/api/system/services
UI 使用 Hash Router，可部署为静态资源。npm run dev 和 npm run preview 中的代理仅用于本机开发与验收，不会进入静态构建产物，也不应作为生产服务。生产环境需将 UI 与 VMS Web/API 统一入口同源部署，或由 Nginx/Caddy 将 /healthz 和 /api/* 反向代理到 VMS。当前旧 Web 入口对部分受保护路由的 CORS 预检会返回 401，因此生产环境也不要依赖跨源 Bearer 请求，更不要把 JWT 放入 query string。
服务端 Logo 从所选服务器的 /icons/icon-192-maskable.png 动态读取；不可用时使用内置的无品牌回退图标。