餐厅管理系统 - Vue3 前端

项目概述

这是一个基于 Vue 3 + TypeScript + Vite 开发的现代化餐厅管理系统前端应用。系统采用模块化设计，支持多角色（管理员、商户、用户）管理，通过前后端分离的架构，为餐厅运营提供全方位的数字化解决方案。

✨ 技术栈

• 核心框架: Vue.js 3.5.13 + TypeScript ~5.8.0
• 构建工具: Vite 6.2.4
• UI 组件库: Element Plus 2.10.2
• 状态管理: Pinia 3.0.1
• 路由管理: Vue Router 4.5.0
• HTTP 客户端: Axios 1.10.0
• WebSocket 实时通信: SockJS 1.6.1 + @stomp/stompjs 7.0.0
• 图表可视化: ECharts 5.6.0
• 地图服务: 高德地图 API (@amap/amap-jsapi-loader, @vuemap/vue-amap, vue-amap, amap)
• 样式预处理: Sass (sass-embedded)
• 代码规范: Prettier 3.5.3
• 类型检查: vue-tsc 2.2.8
• 开发工具: Vite Plugin Vue Devtools 7.7.2
• 脚本工具: npm-run-all2 7.0.2

系统架构

三大用户角色模块

1. 管理员模块 (/admin)

• 分店管理: 连锁餐厅分店信息管理
• 菜品管理: 菜品信息、价格、库存管理
• 商户管理: 入驻商户的审核与管理
• 系统首页: 整体运营数据概览

2. 商户模块 (/merchant)

• 仪表盘: 店铺运营数据总览
• 财务管理:
  • 日营业额统计
  • 账户收款管理
  • 营收管理
  • 财务报表下载
• 订单管理:
  • 待处理订单
  • 退款申请处理
• 商品管理: 店铺商品上架、编辑、库存管理
• 评价管理:
  • 顾客评价查看
  • 评价回复管理
• 店铺管理: 店铺信息维护

3. 用户模块 (/user)

• 首页: 餐厅推荐、热门菜品展示
• 搜索: 智能搜索餐厅和菜品
• 购物车: 在线点餐功能
• 订单管理: 历史订单查看
• 地图定位: 基于地理位置的餐厅推荐
• 菜品分类: 按类型浏览菜品
• 餐厅详情: 详细餐厅信息展示
• 消费统计: 个人消费数据可视化
• 关于我们: 平台介绍
• 联系我们: 客服联系方式

核心功能特性

🔐 认证与授权

• Token 基于认证: 使用 JWT (Bearer Token) 进行用户认证。
• 全局 HTTP 拦截器:
  • 请求拦截: 自动在请求头中附加 Authorization 信息。
  • 响应拦截: 集中处理 401 (未授权)、403 (禁止访问)、500 (服务器错误) 等 HTTP 状态码，实现统一的错误处理和页面跳转逻辑。
• 路由守卫: 基于用户角色和登录状态进行精细化的页面访问控制。
• 持久化登录: 用户登录状态通过 localStorage 持久化，在应用启动时自动恢复。

🗺️ 地图集成

• 高德地图 API: 集成高德地图 JS API 2.0。
• 核心功能: 实现实时定位、餐厅地理位置展示、路径规划与导航。
• 组件化封装: 将地图功能封装在独立的 Vue 组件 (Map.vue) 中，便于复用和维护。

📊 数据可视化

• ECharts 集成: 基于 ECharts 5 实现丰富的图表展示。
• 业务场景: 用于营收趋势分析、消费数据统计、运营数据仪表盘等。
• 实时更新: 支持动态数据绑定，实现数据的实时可视化更新。

💬 智能聊天

• AI 生成回复: 集成 AI 模型，为用户提供智能回复建议，提升交互体验。
• 优化聊天界面: 重新设计聊天面板 (ChatPanel.vue)，提升用户体验和可读性。
• 加载与错误状态: 为 AI 回复增加加载中 (loading) 和错误 (error) 状态处理，优化异步交互的健壮性。

🎨 现代化UI设计

• Element Plus: 采用功能强大的企业级 UI 组件库。
• 响应式布局: 适配桌面、平板等不同设备。
• 国际化: 集成 zh-cn 中文语言包。
• 统一的设计语言: 提供一致、优雅的用户交互体验。

🔧 开发体验

• TypeScript: 全程类型支持，保障代码健壮性。
• Vite: 极速的冷启动和模块热更新 (HMR)。
• Vue Devtools: 集成 vite-plugin-vue-devtools，提供更强大的调试能力。
• 代码格式化: 使用 Prettier 统一代码风格。

项目结构

src/
├── api/              # API 请求模块 (e.g., auth.ts)
├── assets/           # 静态资源 (CSS, images)
├── components/       # 全局公共组件
├── router/           # 路由配置
│   ├── index.ts      # 主路由文件，组合各模块路由
│   ├── guards.ts     # 路由守卫 (权限控制)
│   ├── admin.ts      # 管理员模块路由
│   ├── merchant.ts   # 商户模块路由
│   ├── user.ts       # 用户模块路由
│   └── auth.ts       # 认证相关路由 (登录、注册)
├── stores/           # 全局 Pinia 状态管理 (e.g., authStore)
├── types/            # TypeScript 类型定义
├── userStores/       # 用户侧 Pinia 状态管理 (e.g., cartStore)
├── utils/            # 工具函数 (e.g., storage.ts)
└── views/            # 页面/视图组件
    ├── admin/        # 管理员页面
    ├── login/        # 登录/注册相关页面
    ├── merchant/     # 商户页面
    └── user/         # 用户页面

快速开始

环境要求

• Node.js 18+ (推荐 22+)
• npm 或 pnpm

安装依赖

npm install

开发环境启动

npm run dev

此命令将启动 Vite 开发服务器，并自动在浏览器中打开应用。

生产构建

npm run build

预览构建结果

npm run preview

开发规范

• 使用 TypeScript 进行类型检查 (npm run type-check)。
• 遵循 Vue 3 Composition API 开发模式。
• 统一使用 Prettier 进行代码格式化 (npm run format)。
• 组件采用单文件组件 (SFC) 格式。
• 路由按功能模块分离管理。

浏览器支持

支持所有现代浏览器，包括：

• Chrome (推荐)
• Firefox
• Safari
• Edge

---

最后更新: 2025年6月23日