# 餐厅管理系统 - 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 实现丰富的图表展示。
- **业务场景**: 用于营收趋势分析、消费数据统计、运营数据仪表盘等。
- **实时更新**: 支持动态数据绑定，实现数据的实时可视化更新。

### 🎨 现代化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

### 安装依赖

```bash
npm install
```

### 开发环境启动

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

### 生产构建

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 开发规范

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

## 浏览器支持

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

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

---

_最后更新: 2025年6月22日_