医疗陪诊系统 - 项目说明

Gitee: https://gitee.com/Youngmmm/medical-accompaniment-xi-tong

医疗陪诊系统 - 项目框架说明

项目概述

这是一个基于 Vue 3 + Vite 的医疗陪诊后台管理系统，实现了完整的权限管理、动态路由等功能。

技术架构

医疗陪诊系统
├── 前端框架：Vue 3 (Composition API)
├── 构建工具：Vite 5.3.1
├── UI框架：Element Plus 2.7.6
├── 路由管理：Vue Router 4.4.0
├── 状态管理：Vuex 4.0.2 + vuex-persistedstate
├── HTTP请求：Axios 1.7.2
├── 数据可视化：ECharts 5.5.1
└── 样式预处理：Less 4.2.0

项目结构

src/
├── api/              # API接口封装
├── assets/           # 静态资源
├── components/       # 公共组件
│   ├── aside.vue         # 侧边栏菜单
│   ├── navHeader.vue     # 顶部导航栏（Tab标签页）
│   ├── treeMenu.vue      # 递归菜单组件 
│   └── panelHead.vue     # 页面头部组件
├── router/           # 路由配置
│   └── index.js          # 路由定义（支持动态路由）
├── store/            # 状态管理
│   ├── index.js          # Vuex主入口（状态持久化）
│   └── menu.js           # 菜单状态管理（动态路由
├── utils/            # 工具函数
│   └── request.js        # Axios封装（拦截器）
├── views/            # 页面组件
│   ├── login/            # 登录/注册页面
│   ├── dashboard/        # 数据看板（ECharts）
│   ├── auth/             # 权限管理
│   └── vppz/             # 业务模块（订单、陪护师）
└── main.js           # 应用入口（路由守卫）

核心亮点（已在代码中标注）

1. 路由持久化 + 动态路由恢复

位置： src/main.js:12-22

• 应用启动时从localStorage恢复路由配置
• 刷新页面后路由不丢失
• 支持多级路由的动态添加

2. 路由守卫 - 权限控制

位置： src/main.js:24-43

• 全局路由守卫实现登录验证
• 未登录自动跳转登录页
• 已登录访问登录页自动跳转首页

3. 状态持久化初始化

位置： src/store/menu.js:2-10

• 从localStorage恢复菜单状态
• 刷新后状态保持

4. Tab标签页管理

位置： src/store/menu.js:17-26

• 点击菜单自动添加到标签页
• 避免重复添加相同页面
• 类似浏览器标签页的多页面管理

5. 动态路由加载 + 组件懒加载

位置： src/store/menu.js:36-62

• 使用 import.meta.glob 实现组件批量懒加载
• 递归处理多级路由结构
• 根据后端权限数据动态生成路由
• 真正的按需加载，减少打包体积

6. Axios封装 - 统一请求配置

位置： src/utils/request.js:4-13

• 统一管理API基础配置
• 集中配置baseURL和超时时间

7. 请求拦截器 - Token自动注入

位置： src/utils/request.js:15-35

• 自动从localStorage获取token
• 白名单机制：登录接口不需要token
• 统一请求头管理

8. 响应拦截器 - 统一错误处理

位置： src/utils/request.js:37-55

• 统一处理业务错误码
• 统一处理网络错误
• 友好的错误提示

9. 递归组件 - 无限层级菜单

位置： src/components/treeMenu.vue:29-35

• 组件自身调用自身
• 支持任意深度的菜单嵌套
• 无需硬编码层级

10. 菜单点击联动

位置： src/components/treeMenu.vue:45-58

• 菜单、标签页、路由三者联动
• 点击菜单同时完成多个操作

11. 智能Tab关闭逻辑

位置： src/components/navHeader.vu:48-81

• 关闭非当前标签：仅删除，不跳转
• 关闭当前标签：跳转到相邻标签
• 关闭最后一个标签：跳转到首页
• 保证用户始终有页面可访问

12. ECharts数据可视化 + 响应式布局

位置： src/views/dashboard/index.vue:76-156

• 订单数据可视化
• 自定义tooltip格式化
• 响应式图表适配

13. ResizeObserver实现图表自适应

位置： src/views/dashboard/index.vue:144-155

• 使用ResizeObserver API监听容器尺寸
• 自动调整图表大小
• 比window.resize更精确

14. 登录后动态路由加载流程

位置： src/views/login/index.vue:95-141

• 完整的权限路由加载流程
• 基于权限的动态路由系统
• 登录后自动生成路由表

15. 验证码倒计时功能

位置： src/views/login/index.vue:148-192

• 防重复点击机制
• 手机号格式验证
• 60秒倒计时
• 提升用户体验和安全性

16. Vuex状态持久化

位置： src/store/index.js:5-22

• 使用vuex-persistedstate插件
• 自动保存/恢复状态
• 刷新后状态不丢失

面试重点讲解

1. 动态路由系统（核心亮点）

• 问题： 如何实现基于权限的动态路由？
• 回答：
  1. 登录后获取用户菜单权限数据
  2. 使用 import.meta.glob 批量导入组件
  3. 递归处理路由结构，动态绑定组件
  4. 使用 router.addRoute 动态添加路由
  5. 路由配置持久化到localStorage

2. 递归组件设计

• 问题： 如何实现无限层级的菜单？
• 回答：
  1. 组件自身调用自身（treeMenu组件）
  2. 通过props传递子菜单数据
  3. 递归渲染，支持任意深度

3. 状态持久化方案

• 问题： 如何实现刷新后状态保持？
• 回答：
  1. 使用vuex-persistedstate插件
  2. 自动同步Vuex状态到localStorage
  3. 应用启动时恢复状态

4. 请求拦截器设计

• 问题： 如何统一管理token和错误处理？
• 回答：
  1. 请求拦截器：自动注入token，白名单机制
  2. 响应拦截器：统一错误处理，友好提示
  3. 减少业务代码中的重复逻辑

5. 响应式图表实现

• 问题： 如何实现图表的自适应？
• 回答：
  1. 使用ResizeObserver监听容器尺寸
  2. 比window.resize更精确
  3. 自动调用echarts.resize()

📊 项目功能模块

1. 用户认证模块

   • 登录/注册
   • Token管理
   • 权限验证

2. 权限管理模块

   • 账号管理
   • 菜单权限管理
   • 动态路由生成

3. 业务管理模块

   • 订单管理（查询、状态更新）
   • 陪护师管理（CRUD操作）
   • 数据统计（ECharts可视化）

4. 系统功能

   • Tab标签页管理
   • 侧边栏折叠
   • 路由守卫
   • 状态持久化

启动项目

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build