更新日志 - 邮轮穿舱件管理系统前端页面

项目概述

邮轮穿舱件管理系统是一个基于Vue.js 2.x开发的后台管理页面（Dashboard），主要用于邮轮穿舱件的图片识别和管理功能。项目采用现代化的前端技术栈，包括Vue Router、Vuex、Vuetify等框架。

参考文件：

• README.md

版本历史

v0.1.0 - 初始版本

发布日期： 项目初始版本
技术栈：

• Vue.js 2.6.14
• Vue Router 3.6.5
• Vuex 3.6.2
• Vuetify 2.6.0

核心功能模块：

• 用户认证与授权系统
• 路由导航管理
• 状态管理（Vuex）
• 响应式UI组件

依赖包配置：

{
  "dependencies": {
    "axios": "^1.7.5",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2",
    "vuetify": "^2.6.0",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0"
  }
}

参考文件：

• package.json

系统架构分析

核心组件架构

flowchart TD
    A[App.vue] --> B[Router]
    A --> C[Store]
    A --> D[Navigator]
    A --> E[Footer]
    
    B --> F[HomeView]
    B --> G[WorkpieceView]
    B --> H[ImageView]
    B --> I[DebugView]
    B --> J[SearchView]
    
    C --> K[State Management]
    C --> L[Authentication]
    C --> M[User Info]

路由架构图

flowchart LR
    A[根路由 /] --> B[首页 /home]
    A --> C[工件管理 /workpiece]
    A --> D[图片管理 /image]
    A --> E[调试页面 /debug]
    A --> F[搜索页面 /search]
    A --> G[文章管理 /article]
    A --> H[审核页面 /audit]
    A --> I[派单管理 /dispatch]
    A --> J[用户管理 /user]
    A --> K[登录页面 /login]
    A --> L[关于页面 /about]
    A --> M[注册页面 /register]
    
    C --> N[工件编辑 /workpiece/edit/:id]
    I --> O[工单创建 /dispatch/ticket/create]
    I --> P[工单编辑 /dispatch/ticket/edit/:id]
    I --> Q[工单查看 /dispatch/ticket/view/:id]

参考文件：

• src/router/index.js

状态管理架构

Vuex Store 结构

classDiagram
    class VuexStore {
        +state: Object
        +mutations: Object
        +actions: Object
        +getters: Object
    }
    
    class State {
        +navigator_drawer: Boolean
        +authenticated: Boolean
        +user_info: Object
        +user_token: String
    }
    
    class Mutations {
        +set_user_info(value)
        +set_user_token(value)
        +set_navigator_drawer(value)
        +set_authenticated(value)
        +toggle_navigator_drawer()
    }
    
    class Actions {
        +set_user_info(value)
        +set_user_token(value)
        +set_navigator_drawer(value)
        +set_authenticated(value)
        +toggle_navigator_drawer()
    }
    
    class Getters {
        +get_navigator_drawer()
        +get_authenticated()
        +get_user_info()
        +get_user_token()
    }
    
    VuexStore --> State
    VuexStore --> Mutations
    VuexStore --> Actions
    VuexStore --> Getters

参考文件：

• src/store/index.js

认证授权系统

认证流程序列图

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->>UU: 检查Cookie中的token
    UU->>UU: 验证token有效性
    alt token有效
        UU->>S: set_authenticated(true)
        UU->>S: set_user_token(token)
        A->>R: 正常路由跳转
    else token无效/过期
        UU->>S: set_authenticated(false)
        A->>R: 重定向到登录页
    end

工具函数架构

flowchart TD
    A[Utils模块] --> B[checkAuthorizaion]
    A --> C[loadSessionToken]
    A --> D[logout]
    A --> E[getUserInfoFromToken]
    A --> F[getCurrentUserInfo]
    
    B --> G[Cookie检查]
    B --> H[JWT解码]
    B --> I[Token验证]
    
    E --> J[用户信息提取]
    F --> K[API调用获取完整信息]

参考文件：

• src/utils/index.js

组件依赖关系

主要组件导入关系

graph TB
    App[App.vue] --> Navigator[NavigatorPage.vue]
    App --> Footer[FooterPage.vue]
    App --> Utils[utils/index.js]
    App --> Store[store/index.js]
    
    Router[router/index.js] --> Store
    Router --> Views[所有视图组件]
    
    Store --> Vuex[Vuex]
    Router --> VueRouter[Vue Router]

功能模块详细说明

1. 导航管理模块

• 功能： 应用顶部导航栏和侧边栏管理
• 核心组件： NavigatorPage.vue
• 状态管理： 通过Vuex管理导航抽屉状态
• 交互方式： 点击应用栏图标切换抽屉状态

参考文件：

• src/App.vue

2. 路由守卫系统

• 功能： 页面访问权限控制
• 实现方式： Vue Router的全局前置守卫
• 认证逻辑： 检查用户认证状态，未认证用户重定向到登录页
• 调试模式： 开发环境下跳过认证检查

参考文件：

• src/router/index.js

3. 用户认证模块

• 认证方式： JWT Token + Cookie存储
• Token管理： Cookie持久化 + SessionStorage临时存储
• 信息提取： 从JWT Token中解码用户信息
• 安全机制： Token过期自动失效

技术实现特点

1. 错误处理机制

// 路由重复导航错误处理
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err
  })
}

参考文件：

• src/router/index.js

2. 状态管理模式

采用标准的Vuex模式，包含state、mutations、actions、getters四个核心部分，确保状态管理的可预测性和可维护性。

3. 组件懒加载

所有路由组件都使用动态导入，实现代码分割和按需加载：

component: () => import('@/views/HomeView.vue')

项目目录结构

src/
├── App.vue                 # 根组件
├── main.js                 # 入口文件
├── components/            # 公共组件
├── views/                 # 页面视图
│   ├── admin/            # 管理页面
│   ├── article/          # 文章管理
│   ├── audit/           # 审核功能
│   ├── debug/           # 调试页面
│   ├── dispatch/        # 派单管理
│   ├── image/           # 图片管理
│   ├── project/         # 项目管理
│   ├── search/          # 搜索功能
│   └── workpiece/       # 工件管理
├── router/              # 路由配置
├── store/               # 状态管理
├── utils/               # 工具函数
└── http/                # HTTP请求封装

索引

v0.1.0版本建立了完整的前端基础架构，包括：

• 现代化的Vue.js技术栈
• 完善的路由和状态管理
• 安全的用户认证系统
• 模块化的组件架构
• 响应式的UI设计

该版本为后续功能开发奠定了坚实的技术基础，具备良好的可扩展性和维护性。

主要参考文件汇总：

• README.md
• package.json
• src/App.vue
• src/router/index.js
• src/store/index.js
• src/utils/index.js