# 牛只运输管理系统架构文档

## 1. 系统概述

牛只运输管理系统是一个基于 Vue 3 + TypeScript 开发的现代化前端项目，旨在提供完整的牛只运输管理解决方案。系统集成了运输管理、检疫隔离、设备监控、预警系统等多个功能模块，为牛只运输过程提供全方位的管理和监控支持。

## 2. 技术架构

### 2.1 前端技术栈

- **核心框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **状态管理**: Pinia
- **路由管理**: Vue Router
- **UI 组件库**: Element Plus
- **HTTP 客户端**: Axios
- **地图集成**: 百度地图（vue-baidu-map-3x）
- **图表库**: ECharts
- **富文本编辑器**: WangEditor
- **其他工具**:
  - 视频播放: @liveqing/liveplayer-v3
  - 文件处理: file-saver
  - 二维码生成: qrcode
  - 打印功能: vue3-print-nb

### 2.2 架构模式

- 前后端分离架构
- 单页应用（SPA）
- 模块化开发
- 组件化设计

### 2.3 设计模式

- 组合式 API（Vue 3 Composition API）
- 状态管理使用 Pinia（模块化 Store）
- 路由懒加载（Vue Router）
- 自定义指令（权限控制、复制文本等）

## 3. 项目结构

```
src/
├── api/                # API 接口定义
│   ├── common/        # 通用 API
│   ├── abroad.js      # 出境管理
│   ├── device.js      # 设备管理
│   ├── hardware.js    # 硬件相关
│   ├── isolationQuarantine.js # 隔离检疫
│   ├── killRecord.js  # 屠宰记录
│   ├── quarantine.js  # 检疫管理
│   ├── shipping.js    # 运输管理
│   ├── sys.js         # 系统管理
│   └── userManage.js  # 用户管理
├── assets/            # 静态资源
├── components/        # 公共组件
├── directive/         # 自定义指令
├── plugins/           # 插件配置
├── router/            # 路由配置
├── store/             # Pinia 状态管理
├── styles/            # 全局样式
├── utils/             # 工具函数
└── views/             # 页面组件
    ├── earlywarning/  # 预警系统
    ├── entry/         # 数据录入
    ├── hardware/      # 硬件管理
    ├── shipping/      # 运输管理
    ├── system/        # 系统设置
    └── userManage/    # 用户管理
```

## 4. 核心组件交互

### 4.1 页面组件（views）

页面组件通过路由加载，每个功能模块都有对应的页面组件，负责展示该模块的用户界面和处理用户交互。

### 4.2 公共组件（components）

公共组件被多个页面共享使用，包括布局组件、表单组件、表格组件等。

### 4.3 状态管理（store）

使用 Pinia 进行全局状态管理，包括用户信息、权限信息、路由信息等。

### 4.4 API 接口调用

统一通过 [src/api](src/api) 目录下的接口函数调用后端服务，使用 Axios 进行 HTTP 请求。

### 4.5 自定义指令

通过自定义指令处理 DOM 操作和权限控制等功能。

## 5. 路由架构

系统采用 Vue Router 进行路由管理，分为静态路由和动态路由：

- **静态路由**: 包含登录页、首页等基础页面
- **动态路由**: 根据用户权限从后端获取并动态添加的路由

## 6. 状态管理架构

使用 Pinia 进行状态管理，包含以下 Store 模块：

- **user**: 管理用户登录信息和身份认证
- **permission**: 管理用户权限和路由信息

## 7. 权限控制架构

系统通过自定义指令和路由守卫实现权限控制：

- **路由级权限**: 通过动态路由控制用户可访问的页面
- **按钮级权限**: 通过自定义指令控制用户可操作的按钮

## 8. 数据流架构

```
View(UI) -> Store(State) -> API(Service) -> Backend
    ^                                           |
    |                                           v
    |                                       Database
    |                                           |
    --------------------------------------------
```

## 9. 构建和部署架构

- 使用 Vite 进行项目构建
- 支持开发环境和生产环境构建
- 构建产物可部署到任意 Web 服务器