邮轮穿舱件管理系统 - 前端技术文档

项目概述

邮轮穿舱件管理系统是一个基于Vue.js 2.x技术栈的后台管理系统，主要用于管理邮轮穿舱件的图片识别和相关业务数据。系统采用现代化的前端架构，集成了路由管理、状态管理、UI组件库等核心功能。

参考文件：

README.md

技术栈架构

核心技术栈

graph TD
    A[Vue.js 2.6.14] --> B[Vue Router 3.6.5]
    A --> C[Vuex 3.6.2]
    A --> D[Vuetify 2.6.0]
    A --> E[Axios 1.7.5]
    
    B --> F[路由守卫]
    C --> G[状态管理]
    D --> H[Material Design UI]
    E --> I[HTTP请求拦截]
    
    J[JWT认证] --> K[js-cookie]
    J --> L[jwt-decode]
    
    M[开发工具] --> N[Vue CLI 5.0.0]
    M --> O[Babel 7.12.16]
    M --> P[ESLint 7.32.0]

技术栈详情：

类别	技术/库	版本	用途
框架	Vue.js	2.6.14	核心框架
路由	Vue Router	3.6.5	单页应用路由管理
状态管理	Vuex	3.6.2	全局状态管理
UI框架	Vuetify	2.6.0	Material Design UI组件库
HTTP客户端	Axios	1.7.5	RESTful API调用
认证	js-cookie + jwt-decode	3.0.5 + 4.0.0	JWT令牌管理
工具库	moment	2.30.1	日期时间处理
Markdown	marked + markdown-it	15.0.7 + 14.1.0	Markdown渲染

参考文件：

package.json

系统架构设计

整体架构图

flowchart TD
    subgraph "前端应用层"
        A[App.vue] --> B[路由系统]
        A --> C[导航组件]
        A --> D[页脚组件]
    end
    
    subgraph "业务模块层"
        B --> E[首页模块]
        B --> F[工件管理]
        B --> G[图片管理]
        B --> H[调度系统]
        B --> I[审计管理]
        B --> J[用户管理]
    end
    
    subgraph "基础设施层"
        K[状态管理] --> L[Vuex Store]
        M[HTTP服务] --> N[Axios拦截器]
        O[工具函数] --> P[认证工具]
        O --> Q[Token管理]
    end
    
    E --> K
    F --> M
    G --> O

核心组件关系

classDiagram
    class App {
        +Vue实例根组件
        +导航栏状态管理
        +认证状态检查
        +change_drawer_state()
    }
    
    class Router {
        +路由配置管理
        +路由守卫逻辑
        +懒加载组件
        +beforeEach()
    }
    
    class Store {
        +navigator_drawer
        +authenticated
        +user_info
        +user_token
        +状态变更方法
    }
    
    class Utils {
        +checkAuthorizaion()
        +loadSessionToken()
        +getUserInfoFromToken()
        +logout()
    }
    
    class HTTP {
        +axios实例
        +请求拦截器
        +响应拦截器
        +token自动添加
    }
    
    App --> Router
    App --> Store
    Router --> Store
    Utils --> Store
    HTTP --> Utils

参考文件：

路由系统设计

路由架构图

flowchart TD
    A[根路径 /] --> B[首页 /home]
    
    B --> C[工件管理 /workpiece]
    B --> D[图片管理 /image]
    B --> E[调度系统 /dispatch]
    B --> F[审计管理 /audit]
    B --> G[用户管理 /user]
    B --> H[文章管理 /article]
    B --> I[搜索调试 /search]
    B --> J[系统调试 /debug]
    
    C --> K[工件编辑 /workpiece/edit/:id]
    E --> L[工单创建 /dispatch/ticket/create]
    E --> M[工单编辑 /dispatch/ticket/edit/:id]
    E --> N[工单查看 /dispatch/ticket/view/:id]
    
    O[认证相关] --> P[登录 /login]
    O --> Q[注册 /register]
    O --> R[登出 /logout]
    O --> S[关于 /about]
    
    T[404页面] --> U[未找到页面 *]

路由守卫逻辑

sequenceDiagram
    participant U as 用户
    participant R as 路由守卫
    participant S as Store状态
    participant L as 登录页面
    
    U->>R: 导航到受保护路由
    R->>S: 检查认证状态
    alt 已认证
        S-->>R: authenticated = true
        R->>U: 允许访问目标页面
    else 未认证
        S-->>R: authenticated = false
        R->>L: 重定向到登录页
        L->>U: 显示登录界面
    end

路由配置详情：

路径	名称	组件	认证要求	功能描述
/	Index	重定向到/home	是	应用入口
/home	Home	HomeView.vue	是	系统首页
/workpiece	Workpiece	WorkpieceView.vue	是	工件管理
/image	Image	ImageView.vue	是	图片管理
/dispatch	DispatchData	DispatchDataView.vue	是	调度系统
/audit	Audit	AuditView.vue	是	审计管理
/user	User	UserAdmin.vue	是	用户管理
/login	Login	LoginView.vue	否	用户登录
/register	Register	RegisterView.vue	否	用户注册

参考文件：

src/router/index.js

状态管理系统

Vuex Store架构

stateDiagram-v2
    [*] --> 未认证状态
    未认证状态 --> 已认证状态 : 登录成功
    已认证状态 --> 未认证状态 : 登出或token过期
    
    state 未认证状态 {
        authenticated: false
        user_info: null
        user_token: null
    }
    
    state 已认证状态 {
        authenticated: true
        user_info: {...}
        user_token: "jwt_token"
    }

Store模块设计

classDiagram
    class StoreState {
        +Boolean navigator_drawer
        +Boolean authenticated
        +Object user_info
        +String user_token
    }
    
    class StoreMutations {
        +set_user_info(state, value)
        +set_user_token(state, value)
        +set_navigator_drawer(state, value)
        +set_authenticated(state, value)
        +toggle_navigator_drawer(state)
    }
    
    class StoreActions {
        +set_user_info({commit}, value)
        +set_user_token({commit}, value)
        +set_navigator_drawer({commit}, value)
        +set_authenticated({commit}, value)
        +toggle_navigator_drawer({commit})
    }
    
    class StoreGetters {
        +get_navigator_drawer(state)
        +get_authenticated(state)
        +get_user_info(state)
        +get_user_token(state)
    }
    
    StoreState --> StoreMutations
    StoreMutations --> StoreActions
    StoreState --> StoreGetters

参考文件：

src/store/index.js

认证授权系统

认证流程设计

sequenceDiagram
    participant U as 用户
    participant A as App.vue
    participant UTL as Utils工具
    participant C as Cookie存储
    participant S as Session存储
    participant ST as Store状态
    
    U->>A: 访问应用
    A->>UTL: 调用checkAuthorizaion()
    UTL->>C: 读取token Cookie
    alt token存在且有效
        C-->>UTL: 返回token
        UTL->>S: 存储到sessionStorage
        UTL-->>A: 返回true
        A->>ST: 设置authenticated=true
    else token无效或不存在
        UTL-->>A: 返回false
        A->>ST: 设置authenticated=false
    end

Token管理机制

flowchart TD
    A[用户登录] --> B[获取JWT Token]
    B --> C[存储到Cookie]
    C --> D[应用启动时检查]
    
    D --> E{Token有效?}
    E -->|是| F[设置认证状态]
    E -->|否| G[跳转到登录页]
    
    F --> H[访问受保护路由]
    H --> I[请求自动添加Token]
    
    J[Token过期] --> K[清除存储]
    K --> L[重置认证状态]

认证工具函数：

函数名	参数	返回值	功能描述
checkAuthorizaion	无	Boolean	检查用户认证状态
loadSessionToken	无	String/null	从sessionStorage加载token
logout	无	void	清除所有认证信息
getUserInfoFromToken	无	Object/null	从token解析用户信息

参考文件：

src/utils/index.js

HTTP服务架构

请求拦截流程

sequenceDiagram
    participant C as 组件
    participant I as 拦截器
    participant S as 服务器
    participant T as Token管理
    
    C->>I: 发起API请求
    I->>T: 获取token
    T-->>I: 返回token/null
    I->>I: 添加Authorization头
    I->>S: 发送请求
    S-->>I: 返回响应
    I-->>C: 返回数据

HTTP服务配置

// Axios实例配置
const service = axios.create({
    baseURL: process.env.VUE_APP_API || "",
    withCredentials: false
});

// 请求拦截器
service.interceptors.request.use(config => {
    const token = getTokenFromCookie('token');
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
});

参考文件：

src/http/index.js

组件架构设计

核心组件关系

graph TD
    A[App.vue] --> B[NavigatorPage.vue]
    A --> C[FooterPage.vue]
    A --> D[RouterView]
    
    B --> E[导航菜单项]
    E --> F[首页]
    E --> G[用户管理]
    E --> H[工件管理]
    E --> I[图片管理]
    E --> J[调度系统]
    
    D --> K[HomeView.vue]
    D --> L[各种业务视图]

导航组件结构

classDiagram
    class NavigatorPage {
        +Array items
        +Boolean drawerSwitch
        +linkto(link)
        +drawBack()
        +computed drawerSwitch
    }
    
    class NavigationItem {
        +String title
        +String link
        +String icon
        +String color
    }
    
    NavigatorPage --> NavigationItem

导航菜单项配置：

标题	路径	图标	颜色	功能描述
首页	/home	mdi-home	primary	系统首页
用户管理	/user	mdi-account-group	primary	用户管理功能
工件管理	/workpiece	mdi-box	success	工件数据管理
图片管理	/image	mdi-image	info	图片资源管理
调度系统	/dispatch	mdi-calculator	warning	任务调度管理
审计管理	/audit	mdi-magnify	red	系统审计功能

参考文件：

src/components/NavigatorPage.vue

首页模块设计

首页功能架构

flowchart TD
    A[HomeView.vue] --> B[认证状态显示]
    A --> C[统计信息展示]
    A --> D[快速导航菜单]
    
    B --> E[未登录警告]
    B --> F[已登录信息]
    
    C --> G[用户数量统计]
    C --> H[任务数量统计]
    C --> I[图片数量统计]
    C --> J[日志数量统计]
    
    D --> K[用户管理入口]
    D --> L[工件管理入口]
    D --> M[图片管理入口]
    D --> N[调度系统入口]

数据流设计

sequenceDiagram
    participant H as HomeView
    participant HTTP as HTTP服务
    participant API as 后端API
    participant S as Store状态
    
    H->>HTTP: GET /stat/countInfo
    HTTP->>API: 请求统计信息
    API-->>HTTP: 返回统计数据
    HTTP-->>H: 更新界面数据
    
    H->>S: 读取认证状态
    S-->>H: 返回authenticated状态
    alt 已认证
        H->>H: 显示用户信息
    else 未认证
        H->>H: 显示登录提示
    end

参考文件：

src/views/HomeView.vue

开发与构建配置

开发环境配置

graph TD
    A[Vue CLI 5.0.0] --> B[开发服务器]
    A --> C[热重载]
    A --> D[ESLint检查]
    
    B --> E[本地开发]
    C --> F[实时预览]
    D --> G[代码质量]
    
    H[Babel 7.12.16] --> I[ES6+转换]
    J[Vuetify Loader] --> K[组件按需加载]

构建配置

项目使用Vue CLI进行构建，主要配置包括：

Babel转译配置
ESLint代码规范检查
Vuetify组件库集成
环境变量管理

参考文件：

package.json

部署与运行

Docker部署配置

项目提供Dockerfile用于容器化部署，支持快速的环境搭建和部署。

环境变量配置

系统支持通过环境变量配置API地址：

VUE_APP_API=http://api.example.com

索引

邮轮穿舱件管理系统前端采用现代化的Vue.js技术栈，具备完整的路由管理、状态管理、认证授权和UI组件体系。系统架构清晰，组件设计合理，为邮轮穿舱件管理业务提供了稳定可靠的前端解决方案。

核心优势：

基于Vue.js生态的成熟技术栈
完整的认证授权机制
响应式UI设计
模块化的组件架构
完善的开发工具链

该系统为后续功能扩展和维护提供了良好的基础架构支持。

项目概述​

技术栈架构​

核心技术栈​

系统架构设计​

整体架构图​

核心组件关系​

路由系统设计​

路由架构图​

路由守卫逻辑​

状态管理系统​

Vuex Store架构​

Store模块设计​

认证授权系统​

认证流程设计​

Token管理机制​

HTTP服务架构​

请求拦截流程​

HTTP服务配置​

组件架构设计​

核心组件关系​

导航组件结构​

首页模块设计​

首页功能架构​

数据流设计​

开发与构建配置​

开发环境配置​

构建配置​

部署与运行​

Docker部署配置​

环境变量配置​

索引​

项目概述

技术栈架构

核心技术栈

系统架构设计

整体架构图

核心组件关系

路由系统设计

路由架构图

路由守卫逻辑

状态管理系统

Vuex Store架构

Store模块设计

认证授权系统

认证流程设计

Token管理机制

HTTP服务架构

请求拦截流程

HTTP服务配置

组件架构设计

核心组件关系

导航组件结构

首页模块设计

首页功能架构

数据流设计

开发与构建配置

开发环境配置

构建配置

部署与运行

Docker部署配置

环境变量配置

索引