# WBRVideoPortotype

**Repository Path**: work_project_item/wbrvideo-portotype

## Basic Information

- **Project Name**: WBRVideoPortotype
- **Description**: 未必然监控卫士原型设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-25
- **Last Updated**: 2025-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WBR Video Prototype

基于 Vue 3 + TypeScript + Vite + Element Plus 的监控卫士视频管理系统。

## 项目简介

WBR Video Prototype 是一个现代化的视频监控管理系统，提供视频预览、回放、设备管理等功能。系统采用最新的前端技术栈，确保良好的用户体验和系统性能。

### 核心功能

- 🎥 视频实时预览：支持多路视频流同时预览
- 📺 历史视频回放：支持时间轴回放和录像下载
- 📱 设备管理：设备状态监控、配置管理
- 👥 用户权限管理：基于角色的访问控制
- ⚙️ 系统设置：系统参数配置、日志管理
- 📱 二维码生成：设备快速配置

## 技术栈

- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - 类型安全的 JavaScript 超集
- Vite - 下一代前端构建工具
- Pinia - Vue 3 状态管理库
- Vue Router - Vue.js 官方路由管理器
- Element Plus - 基于 Vue 3 的组件库
- QRCode.vue - 二维码生成组件

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装

```bash
# 克隆项目
git clone [项目地址]

# 进入项目目录
cd WBRVideoProtype

# 安装依赖
npm install
```

### 开发

```bash
# 启动开发服务器
npm run dev

# 类型检查
npm run type-check
```

### 构建

```bash
# 构建生产环境
npm run build

# 预览生产环境构建
npm run preview
```

## 项目结构

```
src/
├── assets/        # 静态资源（图片、字体等）
├── components/    # 公共组件
│   ├── common/    # 通用组件
│   ├── layout/    # 布局组件
│   └── business/  # 业务组件
├── router/        # 路由配置
├── stores/        # Pinia 状态管理
├── views/         # 页面组件
├── utils/         # 工具函数
├── types/         # TypeScript 类型定义
├── mock/          # 模拟数据
├── config/        # 配置文件
├── data/          # 静态数据
├── App.vue        # 根组件
└── main.ts        # 入口文件
```

## 路由结构

系统采用 Vue Router 进行路由管理，主要路由结构如下：

```
/                           # 根路由，重定向到登录页
├── /login                  # 登录页面
├── /authorization          # 授权页面
├── /realtime-monitor       # 实时监控页面
└── /home                   # 主页面（需要登录）
    ├── /dashboard         # 仪表盘
    ├── /video-example     # 视频示例
    ├── /big-screen        # 大屏展示
    ├── /alarm-center      # 告警中心
    │   ├── /realtime     # 实时告警
    │   ├── /handle       # 告警处理
    │   └── /history      # 告警历史
    └── /settings         # 系统设置
        ├── /algorithm    # 算法设置
        ├── /camera       # 摄像头设置
        ├── /user         # 用户管理
        │   ├── /camera-assignment    # 摄像头分配
        │   ├── /user-management      # 用户管理
        │   ├── /role-management      # 角色管理
        │   ├── /permission-management # 权限管理
        │   └── /department-management # 部门管理
        └── /system       # 系统管理
            ├── /admin-settings       # 管理员设置
            ├── /purchased-algorithms # 已购算法
            ├── /authorization        # 系统授权
            └── /about               # 关于系统
```

### 路由说明

1. **认证相关路由**
   - `/login`: 用户登录页面
   - `/authorization`: 系统授权页面

2. **监控相关路由**
   - `/realtime-monitor`: 实时监控页面
   - `/home/video-example`: 视频示例页面
   - `/home/big-screen`: 大屏展示页面

3. **告警中心路由**
   - `/home/alarm-center/realtime`: 实时告警监控
   - `/home/alarm-center/handle`: 告警处理
   - `/home/alarm-center/history`: 告警历史记录

4. **系统设置路由**
   - `/home/settings/algorithm`: 算法配置管理
   - `/home/settings/camera`: 摄像头设备管理
   - `/home/settings/user`: 用户权限管理
   - `/home/settings/system`: 系统管理

### 路由特性

- 所有路由都配置了路由守卫，未登录用户会被重定向到登录页
- 使用路由懒加载优化性能
- 支持路由元信息（meta）配置
- 采用嵌套路由实现复杂的页面结构

## 开发规范

### 代码规范
- 使用 TypeScript 进行开发，确保类型安全
- 遵循 Vue 3 组合式 API 规范
- 使用 ESLint 和 Prettier 进行代码格式化
- 组件命名使用 PascalCase
- 变量和函数命名使用 camelCase

### 组件开发规范
- 单个组件文件不超过 200 行
- 复杂逻辑必须添加注释
- 组件必须包含类型定义
- 使用 Element Plus 组件库
- 表单组件必须包含验证
- 列表组件必须支持分页和排序

### 状态管理规范
- 使用 Pinia 进行状态管理
- 状态模块化，按功能划分
- 避免直接修改状态，使用 actions

### 路由规范
- 路由配置模块化
- 使用懒加载提升性能
- 路由守卫统一管理

### 样式规范
- 使用 Element Plus 默认主题
- 组件样式使用 scoped
- 全局样式统一管理

## 错误处理
- 统一使用 Element Plus 的 Message 组件
- 网络请求错误统一处理
- 表单验证错误提示
- 列表加载状态处理

## 性能优化
- 路由懒加载
- 组件按需加载
- 图片资源优化
- 代码分割

## 浏览器支持
- Chrome 最新版
- Firefox 最新版
- Safari 最新版
- Edge 最新版

## 常见问题

### 开发环境问题
1. 如果遇到依赖安装失败，请尝试：
   ```bash
   npm cache clean --force
   rm -rf node_modules
   npm install
   ```

2. 如果遇到类型检查错误，请确保：
   - TypeScript 版本正确
   - tsconfig.json 配置正确
   - 所有依赖都已正确安装

### 生产环境问题
1. 构建失败：
   - 检查 node_modules 是否完整
   - 检查是否有类型错误
   - 检查是否有语法错误

2. 运行错误：
   - 检查浏览器控制台错误信息
   - 检查网络请求是否正常
   - 检查环境变量配置

## 贡献指南
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 版本历史
- v0.1.0 - 初始版本
  - 基础框架搭建
  - 核心功能实现
  - 基础UI组件

## 许可证
MIT License

## 联系方式
- 项目维护者：[维护者姓名]
- 邮箱：[邮箱地址]
- 项目地址：[项目地址]