3e32a11af5ad1cff7031c9c7060620c6ec8ea998
…
…
…
餐厅管理系统 - 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/stompjs7.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 实现丰富的图表展示。
- 业务场景: 用于营收趋势分析、消费数据统计、运营数据仪表盘等。
- 实时更新: 支持动态数据绑定,实现数据的实时可视化更新。
🎨 现代化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月22日
Description
Languages
Vue
90.8%
TypeScript
8.5%
CSS
0.6%
HTML
0.1%