166 lines
3.8 KiB
Markdown
166 lines
3.8 KiB
Markdown
# 餐厅管理系统 - 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
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 开发环境启动
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### 生产构建
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### 预览构建结果
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
## 开发规范
|
|
|
|
- 使用 TypeScript 进行类型检查
|
|
- 遵循 Vue 3 Composition API 开发模式
|
|
- 统一使用 Prettier 进行代码格式化
|
|
- 组件采用单文件组件 (SFC) 格式
|
|
- 路由按功能模块分离管理
|
|
|
|
## 浏览器支持
|
|
|
|
支持所有现代浏览器，包括：
|
|
|
|
- Chrome (推荐)
|
|
- Firefox
|
|
- Safari
|
|
- Edge
|
|
|
|
---
|
|
|
|
_最后更新: 2025年6月20日_
|