餐厅管理系统 - Vue3 前端

项目概述

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

技术栈

• 前端框架: Vue 3.5.13 + TypeScript
• 构建工具: Vite 6.2.4
• UI 组件库: Element Plus 2.10.2
• 状态管理: Pinia 3.0.1
• 路由管理: Vue Router 4.5.0
• 地图服务: 高德地图 API (@amap/amap-jsapi-loader, @vuemap/vue-amap)
• 图表可视化: ECharts 5.6.0
• HTTP 客户端: Axios 1.10.0
• 样式预处理: Sass

系统架构

三大用户角色模块

1. 管理员模块 (/admin)

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

2. 商户模块 (/merchant)

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

3. 用户模块 (/user)

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

核心功能特性

🗺️ 地图集成

• 集成高德地图 API
• 实时定位功能
• 餐厅地理位置展示
• 路径规划与导航

📊 数据可视化

• 基于 ECharts 的丰富图表
• 营收趋势分析
• 消费数据统计
• 实时数据更新

🎨 现代化UI设计

• 基于 Element Plus 组件库
• 响应式设计，支持多设备
• 优雅的用户交互体验
• 统一的设计语言

🔧 开发体验

• TypeScript 类型安全
• Vite 快速热重载
• 模块化路由管理
• 组件化开发模式

项目结构

src/
├── assets/          # 静态资源
├── cart/           # 购物车逻辑
├── components/     # 公共组件
│   ├── Aside.vue      # 侧边栏
│   ├── Breadcrumb.vue # 面包屑导航
│   ├── ChatPanel.vue  # 聊天面板
│   ├── Footer.vue     # 页脚
│   ├── Header.vue     # 页头
│   └── Map.vue        # 地图组件
├── router/         # 路由配置
│   ├── admin.ts       # 管理员路由
│   ├── merchant.ts    # 商户路由
│   └── user.ts        # 用户路由
├── stores/         # 状态管理
├── user/           # 用户相关逻辑
└── views/          # 页面组件
    ├── admin/         # 管理员页面
    ├── merchant/      # 商户页面
    └── user/          # 用户页面

快速开始

环境要求

• Node.js 18+
• npm 或 yarn

安装依赖

npm install

开发环境启动

npm run dev

生产构建

npm run build

预览构建结果

npm run preview

开发规范

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

浏览器支持

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

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

---

最后更新: 2025年6月20日