From 8c8d567d33b00f083618961ddc70d90fb22fe891 Mon Sep 17 00:00:00 2001 From: qq1244 <1244154570@qq.com> Date: Sun, 22 Jun 2025 23:02:46 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20README.md=EF=BC=8C?= =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A1=B9=E7=9B=AE=E6=A6=82=E8=BF=B0=E5=92=8C?= =?UTF-8?q?=E6=8A=80=E6=9C=AF=E6=A0=88=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=AE=A4?= =?UTF-8?q?=E8=AF=81=E4=B8=8E=E6=8E=88=E6=9D=83=E3=80=81=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E9=9B=86=E6=88=90=E3=80=81=E6=95=B0=E6=8D=AE=E5=8F=AF=E8=A7=86?= =?UTF-8?q?=E5=8C=96=E7=AD=89=E6=A0=B8=E5=BF=83=E5=8A=9F=E8=83=BD=E7=89=B9?= =?UTF-8?q?=E6=80=A7=E6=8F=8F=E8=BF=B0=EF=BC=8C=E8=B0=83=E6=95=B4=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=BB=93=E6=9E=84=E5=92=8C=E5=BF=AB=E9=80=9F=E5=BC=80?= =?UTF-8?q?=E5=A7=8B=E9=83=A8=E5=88=86=EF=BC=8C=E6=9B=B4=E6=96=B0=E6=9C=80?= =?UTF-8?q?=E5=90=8E=E4=BF=AE=E6=94=B9=E6=97=A5=E6=9C=9F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 118 +++++++++++++++++++++++++++++------------------------- 1 file changed, 64 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 2f5e25b..e56894b 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,21 @@ ## 项目概述 -这是一个基于 Vue 3 + TypeScript + Vite 开发的现代化餐厅管理系统前端应用。系统采用模块化设计，支持多角色用户管理，为餐厅运营提供全方位的数字化解决方案。 +这是一个基于 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 +- **核心框架**: 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` +- **图表可视化**: ECharts `5.6.0` +- **地图服务**: 高德地图 API (`@amap/amap-jsapi-loader`, `@vuemap/vue-amap`) +- **样式预处理**: 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设计 -- 基于 Element Plus 组件库 -- 响应式设计，支持多设备 -- 优雅的用户交互体验 -- 统一的设计语言 +- **Element Plus**: 采用功能强大的企业级 UI 组件库。 +- **响应式布局**: 适配桌面、平板等不同设备。 +- **国际化**: 集成 `zh-cn` 中文语言包。 +- **统一的设计语言**: 提供一致、优雅的用户交互体验。 ### 🔧 开发体验 -- TypeScript 类型安全 -- Vite 快速热重载 -- 模块化路由管理 -- 组件化开发模式 +- **TypeScript**: 全程类型支持，保障代码健壮性。 +- **Vite**: 极速的冷启动和模块热更新 (HMR)。 +- **Vue Devtools**: 集成 `vite-plugin-vue-devtools`，提供更强大的调试能力。 +- **代码格式化**: 使用 Prettier 统一代码风格。 ## 项目结构 ``` 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/ # 用户页面 +├── 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+ -- npm 或 yarn +- Node.js `18+` (推荐 `22+`) +- npm 或 pnpm ### 安装依赖 @@ -130,6 +139,7 @@ npm install ```bash npm run dev ``` +此命令将启动 Vite 开发服务器，并自动在浏览器中打开应用。 ### 生产构建 @@ -145,11 +155,11 @@ npm run preview ## 开发规范 -- 使用 TypeScript 进行类型检查 -- 遵循 Vue 3 Composition API 开发模式 -- 统一使用 Prettier 进行代码格式化 -- 组件采用单文件组件 (SFC) 格式 -- 路由按功能模块分离管理 +- 使用 TypeScript 进行类型检查 (`npm run type-check`)。 +- 遵循 Vue 3 Composition API 开发模式。 +- 统一使用 Prettier 进行代码格式化 (`npm run format`)。 +- 组件采用单文件组件 (SFC) 格式。 +- 路由按功能模块分离管理。 ## 浏览器支持 @@ -162,4 +172,4 @@ npm run preview --- -_最后更新: 2025年6月20日_ +_最后更新: 2025年6月22日_