国标视频云平台管理后台前端 — 架构说明

Openskeye
2 阅读4分钟

SkeyeVSS 管理后台前端 — 架构说明

本文档将描述 skeyevss_backend 前端的整体架构：技术选型、目录职责、请求与路由、状态与构建部署。后端接口由独立服务提供 go-vss。

项目地址 github.com/openskeye/s…

1. 项目定位

本仓库是 视频监控类业务 的管理后台：提供设备与通道管理、配置中心、日志与告警、视频调阅、录像、电子地图等能力。当前为开发/演示版本；完整商业版包含更多能力（见 go-vss）。

2. 技术栈概览

层级技术
运行时React 18、TypeScript
构建与开发服务器Vite 7、@vitejs/plugin-react
路由react-router-dom 5.x + react-router-config（集中式路由表 + renderRoutes）
UIAnt Design 5、Sass、animate.css
全局状态Recoil（RecoilRoot 包裹应用根）
HTTPAxios（封装为 service + 拦截器）
可视化与富内容ECharts、Leaflet、Markdown/Quill 编辑器等
视频播放public 下 Jessibuca / LivePlayer 等脚本；业务侧通过组件封装

3. 逻辑架构（分层）

浏览器
  └── React 应用 (Vite 打包)
        ├── 路由层 (#routers) — 登录 / 布局 / 各业务页
        ├── 页面层 (#pages/*) — 按域划分，通常含 index + api + model
        ├── 组件层 (#components/*) — 布局、表格、表单、视频等复用 UI
        ├── 数据与协议 (#repositories) — API 封装、类型、缓存、Recoil 模型
        └── 基础设施 (#utils, #constants, #types) — Axios、Token、工具函数、全局变量
              ↓ HTTP(S) / EventSource / WebSocket（按功能）
        后端 go-vss（及媒体/VSS 相关能力）
  • 展示与交互：页面与通用组件。
  • 领域数据访问：repositories/apis 中的函数通过统一 Axios 实例访问后端；部分实时能力使用 Server-Sent Events (EventSource)（如文件下载进度、VSS 状态、SIP 日志等），与 REST 并列存在。
  • 配置与权限：启动后从后端拉取 setting、conf 等，写入 Recoil 与全局变量（如 variables.showcase、权限树），菜单与按钮随权限变化。

4. 目录结构（约定）

路径职责
src/index.tsx入口：BrowserRouter、RecoilRoot、renderRoutes、全局样式与 polyfill 提示
src/routers/index.tsx 顶层路由；sites.tsx 业务子路由；constants.ts 路径枚举与菜单树；anchor.ts 锚点相关
src/pages/按业务域分子目录（如 devices/、configs/、logs/、system/），常见文件：index.tsx（页面）、api.ts、model.ts
src/components/layout（布局与子路由渲染）、table、form、video 等
src/repositories/apis/后端 API 封装
src/repositories/types/请求/响应与领域类型
src/repositories/models/Recoil atom 与状态类
src/repositories/cache/本地缓存抽象
src/utils/axios.tsx（拦截器、proxy、route）、token.ts、ws.ts、store.ts 等
src/constants/全局常量与运行时 variables（主题、弹窗等）
public/静态资源；视频解码与播放器脚本体积较大，独立存放

路径别名与 vite.config.js、tsconfig.json 中一致：@、# 指向 src，并有 #pages、#components、#repositories 等细粒度别名。

5. 路由设计

  • 顶层：/login 独立登录页；/ 由 Layout 承载，内部再 renderRoutes(sites)。
  • 业务路由：集中在 routers/sites.tsx，路径与标题来源于 routers/constants.ts 中的树形 routes 及 Path 枚举，便于菜单、面包屑与权限 uniqueId 对齐。
  • 列表类页面：常使用 pathParams（/:page?/:limit?/:sort?/:filter?/:anchor?）统一分页、排序、筛选与锚点。

6. 网络层与后端对接

6.1 REST（Axios）

  • 单例 service：baseURL 为空，实际 URL 由 proxy(route.backend | route.external, path) 拼出前缀：
    • route.backend → /${VITE_BACKEND_PROXY}/...
    • route.external → /${VITE_EXTERNAL_PROXY}/...
  • 开发环境下，Vite dev server 根据 VITE_BACKEND_PROXY、VITE_BACKEND_API_URL（及可选 external 代理）做 反向代理，避免跨域。
  • 请求拦截：附加 Authorization、Version、Language、XProtocol；可选 NProgress；支持 disabledLoading。
  • 响应拦截：统一错误提示、token 续期、强制改密跳转、许可证/通道数等全局标志写入 variables。

6.2 实时与推送

  • EventSource：用于服务端推送类场景（下载进度、服务状态、SIP 日志等），URL 常指向带 type=... 的 events 端点。
  • WebSocket：封装在 utils/ws.ts（如云台、流相关信令，按页面需要使用）。

6.3 与媒体/VSS 的协作

repositories/apis/base.ts 中大量 /internal/vss/...、/internal/ms/... 接口体现前后端分工：管理端负责配置与列表，取流、回放控制、设备控制、ONVIF、预置位 等由后端统一调度媒体服务。

7. 状态管理

  • Recoil：用户身份（Profile）、主题（Theme）、系统设置与权限映射、字典/部门缓存、视频相关会话状态等，集中在 repositories/models/recoil-state.ts 及关联类中。
  • 本地持久化：通过 utils/store 与 repositories/cache/ls 等与 Token、主题、最后访问路由等配合。
  • 非全局状态：各页 model.ts 可与 Recoil 并存，用于页面级表格、表单状态。

8. 构建与部署

  • 开发：yarn start → vite --host 0.0.0.0，读取 .env / .env.* 中的 PORT、代理与 VITE_* 变量。
  • 生产构建：vite build --mode production，产物默认输出到 build/（非默认的 dist），并配置了分包（React、Ant Design 按子模块、ECharts、xlsx 等）与 gzip 相关选项。
  • 环境变量：需配置与后端一致的代理路径与 API 基地址；标题等使用 import.meta.env.VITE_TITLE 等。

9. 安全与认证

  • Token 存取与刷新逻辑在 utils/token.ts，与 Axios 响应联动。
  • 需登录路由依赖 Layout 与权限数据；未授权时由拦截器或路由守卫（取决于具体页面实现）引导登录或提示。

10. 扩展与维护建议

  • 新业务：优先在 pages 下新增域目录，在 routers/sites.tsx 与 constants.ts 中登记路径与菜单 uniqueId，API 放入 repositories/apis 或按域拆文件。
  • 类型：与后端契约放在 repositories/types，避免在页面中散落字符串。
  • 大体积依赖：已通过 manualChunks 拆分；新增重量级库时可继续调整 Vite rollupOptions 以控制首包体积。
avatar
文章
阅读
粉丝