# 重庆机场安检分级质控系统 - 前端 ## 项目概述 重庆机场安检分级质控系统管理端,基于若依(RuoYi)框架二次开发。系统涵盖考勤管理、查获物品、巡检管理、考试培训、大屏展示、绩效管理等核心业务模块。 - **项目名**: airport-web - **版本**: 3.9.0 - **技术栈**: Vue 3 + Vite 6 + Element Plus + Pinia + Vue Router ## 开发环境 ```bash # 安装依赖 npm install # 启动开发服务器(端口 8111) npm run dev # 生产构建 npm run build:prod # 预发构建 npm run build:stage ``` ## 技术栈 | 技术 | 版本 | 用途 | |------|------|------| | Vue 3 | 3.5.16 | 核心框架 | | Vite | 6.3.5 | 构建工具 | | Element Plus | 2.9.9 | UI 组件库 | | Pinia | 3.0.2 | 状态管理 | | Vue Router | 4.5.1 | 路由管理 | | Axios | 1.9.0 | HTTP 请求 | | ECharts | 5.6.0 | 图表可视化 | | js-cookie | 3.0.5 | Cookie 管理 | | jsencrypt | 3.3.2 | RSA 加密(密码登录) | | nprogress | 0.2.0 | 页面加载进度条 | | vuedraggable | 4.1.0 | 拖拽排序 | | vue-cropper | 1.1.1 | 图片裁剪 | | html2canvas / jspdf | - | 导出 PDF | | docx | 9.5.1 | 导出 Word | | codemirror | - | SQL 编辑器 | | moment | - | 日期处理 | ## 目录结构 ``` src/ ├── api/ # 接口请求层(按业务模块分类) │ ├── system/ # 系统管理接口 │ ├── attendance/ # 考勤接口 │ ├── check/ # 巡检接口 │ ├── item/ # 查获物品接口 │ ├── examManage/ # 考试管理接口 │ ├── largeScreen/ # 大屏接口 │ ├── performance/ # 绩效接口 │ └── monitor/ # 监控接口 ├── assets/ # 静态资源(图片、SVG图标、样式) ├── components/ # 公共组件 │ ├── FileUpload/ # 文件上传 │ ├── ImageUpload/ # 图片上传 │ ├── Editor/ # 富文本编辑器(Quill) │ ├── Pagination/ # 分页组件 │ ├── DictTag/ # 字典标签 │ ├── UserSelect/ # 用户选择器 │ └── sqlEdit/ # SQL 编辑器 ├── directive/ # 自定义指令(权限、防重复点击等) ├── hooks/ # 组合式函数 ├── layout/ # 布局组件(侧边栏、顶栏、标签页) ├── plugins/ # Vue 插件注册 ├── router/ # 路由配置(含动态路由) ├── store/ # Pinia 状态管理 │ └── modules/ # 各模块 store(user、app、permission、settings等) ├── utils/ # 工具函数(request、auth、dict 等) └── views/ # 页面视图 ├── system/ # 系统管理(用户、角色、菜单、部门、字典等) ├── attendance/ # 考勤管理 ├── check/ # 巡检管理 ├── item/ # 查获物品管理 ├── examManage/ # 考试培训管理 ├── dataBigScreen/ # 数据大屏 │ ├── dashboard/ # 综合大屏 │ ├── attendance/ # 考勤大屏 │ ├── abilityPortrait/ # 能力画像大屏 │ └── examQuestionStatistics/ # 考题统计大屏 ├── performanceManage/# 绩效管理 ├── monitor/ # 系统监控 └── tool/ # 开发工具 ``` ## 环境配置 | 环境 | 配置文件 | API 前缀 | |------|----------|----------| | 开发 | `.env.development` | `/dev-api` | | 预发 | `.env.staging` | - | | 生产 | `.env.production` | - | 开发环境代理(`vite.config.js`): - `/dev-api` → `http://airport.samsundot.com:9024/prod-api`(生产后端,可改为本地) - 本地后端地址:`http://192.168.3.221:8088`(注释中有配置) 切换本地后端:在 `vite.config.js` 中将 `baseUrl` 改为 `http://127.0.0.1:8088` ## 开发约定 ### API 接口 - 所有接口统一通过 `src/utils/request.js` 封装的 axios 实例调用 - 请求头携带 `Authorization: Bearer ` - 统一返回结构:`{ code, msg, data }`,code=200 为成功 ### 权限控制 - 使用 `v-hasPermi` 指令控制按钮级别权限 - 使用 `v-hasRole` 指令控制角色级别权限 - 动态路由从后端接口加载,存储在 Pinia `permission` store 中 ### 字典使用 - 字典数据通过 `useDict()` hook 获取 - 字典值展示使用 `` 组件 ### 组件规范 - 页面组件放在 `views/` 对应业务目录下 - 公共组件放在 `components/` 目录下 - 采用 `