# safe_web

**Repository Path**: lianggan13/safe_web

## Basic Information

- **Project Name**: safe_web
- **Description**: 安全防护 web 前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-06
- **Last Updated**: 2025-10-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 安全防护系统WEB

## 开发环境

开发工具：[VSCode 1.100.2+](https://code.visualstudio.com/)

JS运行时：[Node.js 20.18.0]((https://nodejs.org/en))

语言基础：HTML5、CSS3、JavaScript(ES6)

开发语言：[TypeScript 5.5.4](https://www.typescriptlang.org/)

构建工具：[Vite 5.4.10](https://vitejs.cn/vite3-cn/guide/)

前端框架：[Vue 3.5.12 Composition API](https://cn.vuejs.org/)

UI 框架：[Element Plus 2.9.7](https://element-plus.org/zh-CN/)

## 依赖包

| 包名               | 描述                                                         | 版本   |
| ------------------ | ------------------------------------------------------------ | ------ |
| @microsoft/signalr | 适用于 ASP.NET Core 和 Azure SignalR 服务的 SignalR 的 JavaScript 和 TypeScript 客户端 | 8.0.7  |
| @vueuse/core       | Vue组合式工具集                                              | 11.1.0 |
| @vueuse/components | Vue组合式工具集-组件包                                       | 12.7.0 |
| axios              | 基于 promise 的网络请求库，可以用于浏览器和 node.js          | 1.7.7  |
| echarts            | JavaScript 图表库，支持 20 多种图表和十几种组件，以及数据分析、可视化设计、无障碍访问等功能 | 5.5.1  |
| element-plus       | Vue 3 UI框架                                                 | 2.9.7  |
| mitt               | 消息发布/订阅、事件总线                                      | 3.0.1  |
| pinia              | 组合式API的Vue状态管理库                                     | 2.2.4  |
| uuid               | 用于创建 RFC9562（正式RFC4122）UUID                          | 10.0.0 |
| vue                | Vue框架                                                      | 3.5.12 |
| vue-router         | Vue 官方的客户端路由解决方案                                 | 4.4.5  |
| vue-grid-layout-v3 | Vue自适应网格布局系统                                        | 3.1.2  |

## 开发IDE设置

[VSCode](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

##### 建议使用VSCode扩展
[vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

[Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)

[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

[Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans)

[Vitest](https://marketplace.visualstudio.com/items?itemName=vitest.explorer)

### 通过使用TS语言对 `.vue`提供类型支持

TypeScript 默认不能处理`.vue`导入的类型信息，通过把`tsc`CLI替换为`vue-tsc`实现类型检查，在编辑器中，需要通过[Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)来确保TypeScript语言服务能够解析`。vue`类型

### Vite自定义配置

查看 [Vite Configuration Reference](https://vite.dev/config/).

## 脚本执行命令

### 项目依赖安装

```sh
npm install
```

### 开发阶段的编译和热重载

```sh
npm run dev
```

### 发布阶段的类型检查，编译和缩小

```sh
npm run build
```
> 注意:发布后需要将 module 文件夹复制到dist目录(大华WebSDK)
>

### 通过 [Vitest](https://vitest.dev/) 进行单元测试

```sh
npm run test:unit
```

### 通过 [ESLint](https://eslint.org/) 语法检查与格式化

```sh
npm run lint
```

## 目录结构

| 目录/文件                 | 描述                                                         |
| ------------------------- | ------------------------------------------------------------ |
| .vscode                   | VSCode配置文件                                               |
| dist                      | build命令发布打包后的文件目录                                |
| module                    | 大华WebSDK                                                   |
| node_modules              | Node包管理工具npm加载的项目依赖模块                          |
| public                    | 公共静态资源目录                                             |
| public/favicon.ico        | 网站图标                                                     |
| src                       | 开发文件目录                                                 |
| src/assets                | 静态资源目录，Vite打包压缩                                   |
| src/components            | 通用组件                                                     |
| src/components/icons      | 通用图标组件                                                 |
| src/lib                   | 通用类库、方法                                               |
| src/router                | 路由配置文件                                                 |
| src/stores                | 状态管理                                                     |
| src/views                 | 页面视图组件目录                                             |
| src/views/config          | 系统配置组件目录                                             |
| src/views/dashboard       | 主应用首页     |
| src/views/visualization   | 场站图、列位、操作终端、库区显示屏、电子占线板等可视化页面     |
| src/views/record          | 报警、实时报警、授权、设备、进出、故障、实时故障、车号记录模块相关页面 |
| src/views/work_approval   | 请销点模块相关页面                                           |
| src/views/work_quality    | 作业质量、巡检模块相关页面                                   |
| src/views/work_task       | 工单、授权状态模块相关页面                                   |
| src/views/App.vue         | Vue项目主组件、页面入口文件                                  |
| src/views/main.ts         | Vue应用入口文件                                              |
| .gitignore                | git版本控制忽略文件                                          |
| index.html                | 应用程序主HTML文件                                           |
| package.json              | Node项目配置文件                                             |
| README.md                 | markdown格式的项目说明文档                                   |
| safe_web.code-workspace   | VSCode工作区                                                 |
| tsconfig.json             | TypeScript项目配置文件                                       |
| vite.config.ts            | Vite打包构建工具配置文件                                     |
| vite.config.ts.timestamp* | Vite打包构建工具配置文件备份                                 |

### 组件模板示例

```vue
<script setup lang="ts">
    import { ref, reactive, type Ref } from 'vue';
    
    const title:Ref<string> = ref('')
</script>
<template>
	<div class="container">
        {{title}}
    </div>
</template>
<style scoped>
    .container{
        ..css code
    }
</style>
```

### 分支管理

| 分支           | 项目       |
| -------------- | ---------- |
| main           | 主分支     |
| 合肥8          | 合肥8      |
| 新乡           | 新乡 |
| 柳南           | 柳南       |
| 深16（未签出） | 深16       |
| 温州S1         | 温州S1       |