forked from qq1244/vue-beta
更新 README.md，完善项目概述和技术栈，增加认证与授权、地图集成、数据可视化等核心功能特性描述，调整项目结构和快速开始部分，更新最后修改日期。
This commit is contained in:
118
README.md
118
README.md
@@ -2,19 +2,21 @@
|
|||||||
|
|
||||||
## 项目概述
|
## 项目概述
|
||||||
|
|
||||||
这是一个基于 Vue 3 + TypeScript + Vite 开发的现代化餐厅管理系统前端应用。系统采用模块化设计，支持多角色用户管理，为餐厅运营提供全方位的数字化解决方案。
|
这是一个基于 Vue 3 + TypeScript + Vite 开发的现代化餐厅管理系统前端应用。系统采用模块化设计，支持多角色（管理员、商户、用户）管理，通过前后端分离的架构，为餐厅运营提供全方位的数字化解决方案。
|
||||||
|
|
||||||
## 技术栈
|
## ✨ 技术栈
|
||||||
|
|
||||||
- **前端框架**: Vue 3.5.13 + TypeScript
|
- **核心框架**: Vue.js `3.5.13` + TypeScript `~5.8.0`
|
||||||
- **构建工具**: Vite 6.2.4
|
- **构建工具**: Vite `6.2.4`
|
||||||
- **UI 组件库**: Element Plus 2.10.2
|
- **UI 组件库**: Element Plus `2.10.2`
|
||||||
- **状态管理**: Pinia 3.0.1
|
- **状态管理**: Pinia `3.0.1`
|
||||||
- **路由管理**: Vue Router 4.5.0
|
- **路由管理**: Vue Router `4.5.0`
|
||||||
- **地图服务**: 高德地图 API (@amap/amap-jsapi-loader, @vuemap/vue-amap)
|
- **HTTP 客户端**: Axios `1.10.0`
|
||||||
- **图表可视化**: ECharts 5.6.0
|
- **图表可视化**: ECharts `5.6.0`
|
||||||
- **HTTP 客户端**: Axios 1.10.0
|
- **地图服务**: 高德地图 API (`@amap/amap-jsapi-loader`, `@vuemap/vue-amap`)
|
||||||
- **样式预处理**: Sass
|
- **样式预处理**: Sass (`sass-embedded`)
|
||||||
|
- **代码规范**: Prettier `3.5.3`
|
||||||
|
- **开发工具**: Vite Plugin Vue Devtools `7.7.2`
|
||||||
|
|
||||||
## 系统架构
|
## 系统架构
|
||||||
|
|
||||||
@@ -59,65 +61,72 @@
|
|||||||
|
|
||||||
## 核心功能特性
|
## 核心功能特性
|
||||||
|
|
||||||
|
### 🔐 认证与授权
|
||||||
|
|
||||||
|
- **Token 기반 인증**: 使用 JWT (Bearer Token) 进行用户认证。
|
||||||
|
- **全局 HTTP 拦截器**:
|
||||||
|
- **请求拦截**: 自动在请求头中附加 `Authorization` 信息。
|
||||||
|
- **响应拦截**: 集中处理 `401` (未授权)、`403` (禁止访问)、`500` (服务器错误) 等 HTTP 状态码，实现统一的错误处理和页面跳转逻辑。
|
||||||
|
- **路由守卫**: 基于用户角色和登录状态进行精细化的页面访问控制。
|
||||||
|
- **持久化登录**: 用户登录状态通过 `localStorage` 持久化，在应用启动时自动恢复。
|
||||||
|
|
||||||
### 🗺️ 地图集成
|
### 🗺️ 地图集成
|
||||||
|
|
||||||
- 集成高德地图 API
|
- **高德地图 API**: 集成高德地图 JS API 2.0。
|
||||||
- 实时定位功能
|
- **核心功能**: 实现实时定位、餐厅地理位置展示、路径规划与导航。
|
||||||
- 餐厅地理位置展示
|
- **组件化封装**: 将地图功能封装在独立的 Vue 组件 (`Map.vue`) 中，便于复用和维护。
|
||||||
- 路径规划与导航
|
|
||||||
|
|
||||||
### 📊 数据可视化
|
### 📊 数据可视化
|
||||||
|
|
||||||
- 基于 ECharts 的丰富图表
|
- **ECharts 集成**: 基于 ECharts 5 实现丰富的图表展示。
|
||||||
- 营收趋势分析
|
- **业务场景**: 用于营收趋势分析、消费数据统计、运营数据仪表盘等。
|
||||||
- 消费数据统计
|
- **实时更新**: 支持动态数据绑定，实现数据的实时可视化更新。
|
||||||
- 实时数据更新
|
|
||||||
|
|
||||||
### 🎨 现代化UI设计
|
### 🎨 现代化UI设计
|
||||||
|
|
||||||
- 基于 Element Plus 组件库
|
- **Element Plus**: 采用功能强大的企业级 UI 组件库。
|
||||||
- 响应式设计，支持多设备
|
- **响应式布局**: 适配桌面、平板等不同设备。
|
||||||
- 优雅的用户交互体验
|
- **国际化**: 集成 `zh-cn` 中文语言包。
|
||||||
- 统一的设计语言
|
- **统一的设计语言**: 提供一致、优雅的用户交互体验。
|
||||||
|
|
||||||
### 🔧 开发体验
|
### 🔧 开发体验
|
||||||
|
|
||||||
- TypeScript 类型安全
|
- **TypeScript**: 全程类型支持，保障代码健壮性。
|
||||||
- Vite 快速热重载
|
- **Vite**: 极速的冷启动和模块热更新 (HMR)。
|
||||||
- 模块化路由管理
|
- **Vue Devtools**: 集成 `vite-plugin-vue-devtools`，提供更强大的调试能力。
|
||||||
- 组件化开发模式
|
- **代码格式化**: 使用 Prettier 统一代码风格。
|
||||||
|
|
||||||
## 项目结构
|
## 项目结构
|
||||||
|
|
||||||
```
|
```
|
||||||
src/
|
src/
|
||||||
├── assets/ # 静态资源
|
├── api/ # API 请求模块 (e.g., auth.ts)
|
||||||
├── cart/ # 购物车逻辑
|
├── assets/ # 静态资源 (CSS, images)
|
||||||
├── components/ # 公共组件
|
├── components/ # 全局公共组件
|
||||||
│ ├── Aside.vue # 侧边栏
|
├── router/ # 路由配置
|
||||||
│ ├── Breadcrumb.vue # 面包屑导航
|
│ ├── index.ts # 主路由文件，组合各模块路由
|
||||||
│ ├── ChatPanel.vue # 聊天面板
|
│ ├── guards.ts # 路由守卫 (权限控制)
|
||||||
│ ├── Footer.vue # 页脚
|
│ ├── admin.ts # 管理员模块路由
|
||||||
│ ├── Header.vue # 页头
|
│ ├── merchant.ts # 商户模块路由
|
||||||
│ └── Map.vue # 地图组件
|
│ ├── user.ts # 用户模块路由
|
||||||
├── router/ # 路由配置
|
│ └── auth.ts # 认证相关路由 (登录、注册)
|
||||||
│ ├── admin.ts # 管理员路由
|
├── stores/ # 全局 Pinia 状态管理 (e.g., authStore)
|
||||||
│ ├── merchant.ts # 商户路由
|
├── types/ # TypeScript 类型定义
|
||||||
│ └── user.ts # 用户路由
|
├── userStores/ # 用户侧 Pinia 状态管理 (e.g., cartStore)
|
||||||
├── stores/ # 状态管理
|
├── utils/ # 工具函数 (e.g., storage.ts)
|
||||||
├── user/ # 用户相关逻辑
|
└── views/ # 页面/视图组件
|
||||||
└── views/ # 页面组件
|
├── admin/ # 管理员页面
|
||||||
├── admin/ # 管理员页面
|
├── login/ # 登录/注册相关页面
|
||||||
├── merchant/ # 商户页面
|
├── merchant/ # 商户页面
|
||||||
└── user/ # 用户页面
|
└── user/ # 用户页面
|
||||||
```
|
```
|
||||||
|
|
||||||
## 快速开始
|
## 快速开始
|
||||||
|
|
||||||
### 环境要求
|
### 环境要求
|
||||||
|
|
||||||
- Node.js 18+
|
- Node.js `18+` (推荐 `22+`)
|
||||||
- npm 或 yarn
|
- npm 或 pnpm
|
||||||
|
|
||||||
### 安装依赖
|
### 安装依赖
|
||||||
|
|
||||||
@@ -130,6 +139,7 @@ npm install
|
|||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
此命令将启动 Vite 开发服务器，并自动在浏览器中打开应用。
|
||||||
|
|
||||||
### 生产构建
|
### 生产构建
|
||||||
|
|
||||||
@@ -145,11 +155,11 @@ npm run preview
|
|||||||
|
|
||||||
## 开发规范
|
## 开发规范
|
||||||
|
|
||||||
- 使用 TypeScript 进行类型检查
|
- 使用 TypeScript 进行类型检查 (`npm run type-check`)。
|
||||||
- 遵循 Vue 3 Composition API 开发模式
|
- 遵循 Vue 3 Composition API 开发模式。
|
||||||
- 统一使用 Prettier 进行代码格式化
|
- 统一使用 Prettier 进行代码格式化 (`npm run format`)。
|
||||||
- 组件采用单文件组件 (SFC) 格式
|
- 组件采用单文件组件 (SFC) 格式。
|
||||||
- 路由按功能模块分离管理
|
- 路由按功能模块分离管理。
|
||||||
|
|
||||||
## 浏览器支持
|
## 浏览器支持
|
||||||
|
|
||||||
@@ -162,4 +172,4 @@ npm run preview
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
_最后更新: 2025年6月20日_
|
_最后更新: 2025年6月22日_
|
||||||
|
|||||||
Reference in New Issue
Block a user