xuqiuyun/cattleTransportation

Fork 0

Files

xuqiuyun 361d5ab1ae 添加新的需求

2025-10-20 17:32:09 +08:00

4.2 KiB

Raw Blame History

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

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 目录下的接口函数调用后端服务，使用 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 服务器

4.2 KiB Raw Blame History Unescape Escape