邮轮穿舱件管理系统 - 前端项目概述
项目简介
邮轮穿舱件管理系统是一个专门为邮轮制造业设计的后台管理系统，主要用于管理邮轮穿舱件的图片识别、工件管理、调度系统等核心业务功能。该项目采用现代化的前端技术栈，为管理员提供直观、高效的操作界面。
参考文件：
技术架构
技术栈组成
| 技术类别 | 技术选型 | 版本 | 主要用途 |
|---|---|---|---|
| 前端框架 | Vue.js | 2.6.14 | 核心MVVM框架 |
| UI组件库 | Vuetify | 2.6.0 | Material Design风格UI组件 |
| 状态管理 | Vuex | 3.6.2 | 全局状态管理 |
| 路由管理 | Vue Router | 3.6.5 | 单页面应用路由控制 |
| HTTP客户端 | Axios | 1.7.5 | RESTful API调用 |
| 构建工具 | Vue CLI | 5.0.0 | 项目构建和开发工具链 |
参考文件：
架构模式
本项目采用**单页面应用（SPA）**架构模式，具有以下特点：
- 客户端渲染：所有页面在浏览器端动态渲染
- 路由控制：基于Vue Router的前端路由管理
- 状态集中管理：使用Vuex进行全局状态管理
- 组件化开发：基于Vue组件的模块化开发模式
graph TD
A[入口文件 main.js] --> B[根组件 App.vue]
B --> C[路由系统 Router]
B --> D[状态管理 Store]
B --> E[UI框架 Vuetify]
C --> F[页面组件 Views]
D --> G[状态管理逻辑]
E --> H[UI组件库]
参考文件：
系统定位与目标用户
系统定位
该系统定位为邮轮制造业的专业后台管理系统，专注于：
- 穿舱件图片识别管理
- 工件生命周期管理
- 生产调度系统
- 质量审计管理
目标用户群体
- 系统管理员：负责用户管理、系统配置
- 生产管理人员：负责工件管理和调度
- 质量审计人员：负责质量控制和审计
- 技术支持人员：负责系统调试和维护
核心功能模块
1. 用户认证与权限管理
sequenceDiagram
participant U as 用户
participant A as App.vue
participant UU as Utils
participant S as Store
participant R as Router
U->>A: 访问应用
A->>UU: checkAuthorizaion()
UU->>S: 验证token有效性
S->>R: 设置认证状态
R->>U: 根据权限路由跳转
功能特性：
- JWT Token认证机制
- 基于Cookie和SessionStorage的token存储
- 路由守卫权限控制
- 用户信息自动加载
参考文件：
2. 导航与布局系统
classDiagram
class App {
+v-app-bar
+Navigator组件
+router-view
+Footer组件
+change_drawer_state()
}
class Navigator {
+v-navigation-drawer
+导航菜单项
+linkto()
+drawBack()
}
class Store {
+navigator_drawer
+authenticated
+user_info
+user_token
+mutations
+actions
+getters
}
App --> Navigator : 包含
App --> Store : 依赖
Navigator --> Store : 依赖
参考文件：
3. 业务功能模块
| 模块名称 | 路由路径 | 功能描述 | 主要组件 |
|---|---|---|---|
| 首页 | /home | 系统概览和仪表板 | HomeView.vue |
| 工件管理 | /workpiece | 穿舱件工件管理 | WorkpieceView.vue |
| 图片管理 | /image | 图片识别和管理 | ImageView.vue |
| 调度系统 | /dispatch | 生产调度管理 | DispatchDataView.vue |
| 审计管理 | /audit | 质量审计管理 | AuditView.vue |
| 用户管理 | /user | 用户信息管理 | UserAdmin.vue |
flowchart TD
A[首页] --> B[工件管理]
A --> C[图片管理]
A --> D[调度系统]
A --> E[审计管理]
A --> F[用户管理]
B --> G[工件编辑]
D --> H[工单创建]
D --> I[工单编辑]
D --> J[工单查看]
参考文件：
项目结构分析
目录架构
src/
├── components/ # 公共组件
│ ├── FooterPage.vue
│ ├── NavigatorPage.vue
│ └── TitlePage.vue
├── views/ # 页面组件
│ ├── admin/ # 管理功能
│ ├── article/ # 文章管理
│ ├── audit/ # 审计管理
│ ├── dispatch/ # 调度系统
│ ├── image/ # 图片管理
│ ├── workpiece/ # 工件管理
│ └── 基础页面组件
├── router/ # 路由配置
├── store/ # 状态管理
├── utils/ # 工具函数
└── http/ # HTTP请求封装
依赖关系图
graph TD
A[main.js] --> B[App.vue]
A --> C[router/index.js]
A --> D[store/index.js]
A --> E[plugins/vuetify.js]
B --> F[components/NavigatorPage.vue]
B --> G[components/FooterPage.vue]
C --> H[views/HomeView.vue]
C --> I[views/workpiece/WorkpieceView.vue]
C --> J[views/image/ImageView.vue]
D --> K[utils/index.js]
开发与构建配置
构建配置
// vue.config.js
module.exports = defineConfig({
transpileDependencies: [
'vuetify' // 确保Vuetify组件正确转译
]
})
开发工具链
- Babel：ES6+语法转译
- ESLint：代码规范检查
- Sass：CSS预处理器
- Vuetify Loader：组件按需加载
参考文件：
索引
邮轮穿舱件管理系统前端项目采用现代化的Vue.js技术栈，构建了一个功能完善、用户体验优良的后台管理系统。项目具有良好的模块化结构和清晰的代码组织，为邮轮制造业提供了专业的管理工具。
核心优势：
- 技术先进：采用最新的Vue.js生态技术
- 架构清晰：SPA架构配合组件化开发
- 功能完善：覆盖邮轮制造业核心业务需求
- 可维护性强：规范的代码结构和配置管理
该项目为后续功能扩展和维护奠定了坚实的技术基础。