技术栈

33 次浏览 2026年 6月 2日下午4:16

在正式启动项目之前，需求分析与技术选型往往决定了架构的长期稳健性。当前企业级应用普遍采用前后端分离模式，前端通过 API 与后端服务解耦交互。由于涉及大量复杂且专业的 UI 场景，选择一套成熟的中台组件体系至关重要。这里我们推荐使用 Ant Design 6、Semi Design 或 shadcn/ui 来构建统一且高效的管理界面。结合 React 19 带来的并发渲染优化、React Router 的声明式路由管理，以及 Vite 8 提供的极速开发与构建体验，这套技术栈能为你的安全管理平台打下既现代又稳固的地基。

### 一、 核心框架与工程化：为什么是 React + Vite？

在企业级监控场景中，状态复杂、交互密集（多路视频、实时告警、云台控制），技术选型必须兼顾**响应速度**与**大规模状态管理**能力。

-   **React 19 (Concurrent Mode)**
    -   **选型理由**：监控平台的左侧设备树、右侧视频墙、底部告警流，其实是典型的“重交互”场景。React 18 的并发特性可以保证在多路视频解码渲染时，UI 的交互（如点击云台、展开菜单）依然流畅，不会因为解码负载而卡顿。
    -   **状态管理**：建议配套使用 **Zustand** 而非 Redux Toolkit。监控设备的连接状态、PTZ 控制状态需要高频更新，Zustand 基于订阅的极简 API 可以避免样板代码，且性能极佳，这对配合我们插件处理高帧率 RTSP 流非常关键。

-   **Vite 7+**
    -   **选型理由**：你厌倦了 Webpack 的缓慢启动。Vite 的原生 ESM 服务能让一个包含几百个监控页面的巨型项目“秒开”。更关键的是，我们的 Electron 插件本质上是原生 Node 模块，Vite 处理 C++ 依赖和原生 `.node` 文件的机制比 CRA 更灵活。只需在 `vite.config.ts` 中简单配置 `externals`，即可完美隔离 Electron 主进程与渲染进程的依赖。

### 二、 UI 组件库的重度选型：从“美观”到“实用”

你提到了三个优秀的库：Ant Design、Semi Design 和 shadcn/ui。在企业监控平台这个特定语境下，我给出直白的建议：

-   **首推：Ant Design 6**
    -   **理由**：监控行业的老牌事实标准。它的 **ProComponents** 布局组件能让你用极少代码生成标准的“增删改查”与列表，这对设备管理（NVR、IPC 管理）、录像回查界面尤其重要。且其图标库对安防行业覆盖极全（锁定、解锁、红外、对讲、录像）。
-   **进阶/差异化之选：Semi Design**
    -   **理由**：如果客户对 UI 的“科技感”要求极高（如烟草的数字孪生大屏、石油的炫酷态势感知），Semi Design 的 3000+ Design Token 体系允许你在代码编译层无缝切换深色/科技蓝主题，且其交互反馈细节比 Ant Design 更现代。它的 **Form 组件**性能在超多表单联动的预案配置页中优于 Ant Design。
-   **架构级之选：shadcn/ui**
    -   **理由**：如果你需要一个“完全不捆绑”的未来架构，shadcn/ui 是最好的选择。它不是组件库，是代码分发工具。这意味着你拥有组件的完全控制权。当需要在视频画面上叠加复杂的、高度自定义的电子围栏、跟踪框时，直接修改 shadcn/ui 的 Radix 源码，比去 Hack Ant Design 的深层样式要干净得多。

**建议方案**：以 **Ant Design 6** 作为主框架搭建后台管理壳（效率最高），在核心的**监控预览页和电视墙页**使用 **shadcn/ui** 构建完全去样式冲突的自定义视频叠加层。

### 三、 路由与网络通信：React Router 与 Axios 的最佳实践

-   **React Router**
    -   **架构建议**：将路由分为两层。外层负责“登录/鉴权/平台选择”，内层负责“实时监控/录像回放/配置管理”。利用 Layout Route 特性，让监控预览页保持存活，退出菜单再返回时，视频流保持连接而不断流（插件内部的连接管理配合路由的 Keep-alive）。
-   **Axios 实例的工业化封装**
    -   你提到用 API 调用后端服务。在安防项目中，设备列表、组织结构等数据经常重复请求。**Axios** 能自动处理缓存、去重和后台刷新。

## 最终选型
- Vite 8
- React 19
- Ant Design 6

文档

技术栈