# 餐厅管理系统 - 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日_