# 前端

**Repository Path**: marketing_1/frontend

## Basic Information

- **Project Name**: 前端
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 营销型点餐系统 - 管理后台前端

## 项目简介

营销型点餐系统管理后台，基于 Vue 2 + Element UI 构建，提供门店管理、产品管理、订单管理、营销活动、排队叫号等全方位餐饮运营管理功能。

## 核心特性

- **多门店管理** — 支持多门店独立运营，统一管控
- **产品管理** — 分类管理、规格管理、产品上下架
- **订单管理** — 实时订单监控、订单详情、订单统计
- **营销体系** — 优惠券发放、Banner 运营位管理
- **排队叫号** — 小/中/大桌队列配置，智能叫号
- **平台管理** — 多平台接入，独立账号体系
- **数据看板** — 首页数据概览，ECharts 可视化图表
- **权限控制** — 基于角色的菜单与接口权限管理

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 2.6.14 | 前端框架 |
| Vue Router | 3.0.2 | 路由管理 |
| Vuex | 3.1.0 | 状态管理 |
| Element UI | 2.15.8 | UI 组件库 |
| Axios | 0.21.1 | HTTP 请求 |
| ECharts | 4.2.1 | 数据可视化 |
| Sass | 1.32.13 | CSS 预处理器 |
| Webpack | 4.46.0 | 构建工具（Vue CLI 3） |

### 其他关键依赖

| 依赖 | 说明 |
|------|------|
| ali-oss | 阿里云 OSS 直传 |
| @amap/amap-jsapi-loader | 高德地图 |
| @wangeditor/editor | 富文本编辑器 |
| xlsx / file-saver | Excel 导入导出 |
| jsencrypt | RSA 加密 |
| vue-canvas-poster | 海报生成 |
| js-cookie | Cookie 管理 |
| dayjs | 日期处理 |
| vuedraggable | 拖拽排序 |
| fuse.js | 模糊搜索 |

## 目录结构

```
src/
├── api/                  # API 接口模块
│   ├── data.js           # 通用数据请求
│   ├── home.js           # 首页统计
│   ├── login.js          # 登录认证
│   ├── activity/         # 活动相关（Banner 等）
│   ├── platform/         # 平台管理
│   ├── shop/             # 门店管理
│   └── ...               # 其他业务模块
├── assets/               # 静态资源
│   ├── icons/            # SVG 图标
│   ├── images/           # 图片
│   └── styles/           # 全局样式
├── components/           # 公共组件
│   ├── Crud/             # 通用 CRUD 组件
│   ├── Editor/           # 富文本编辑器
│   ├── FileUpload/       # 文件上传
│   ├── ImageUpload/      # 图片上传
│   ├── IconSelect/       # 图标选择器
│   ├── Pagination/       # 分页组件
│   └── ...               # 其他通用组件
├── layout/               # 布局组件
├── mixins/               # 混入
├── router/               # 路由配置
│   ├── index.js          # 路由入口
│   └── routers.js        # 静态路由定义
├── store/                # Vuex 状态管理
│   ├── modules/          # Store 模块
│   └── index.js          # Store 入口
├── utils/                # 工具函数
│   ├── request.js        # Axios 封装
│   ├── auth.js           # 认证工具
│   ├── oss.js            # OSS 上传
│   ├── rsa.js            # RSA 加密
│   └── ...               # 其他工具
├── views/                # 页面视图
│   ├── dashboard/        # 首页看板
│   ├── activity/         # 活动管理（Banner 等）
│   ├── platform/         # 平台管理
│   ├── shop/             # 门店管理
│   └── ...               # 其他业务页面
├── App.vue               # 根组件
├── main.js               # 应用入口
└── settings.js           # 全局设置
```

## 快速开始

### 环境要求

- Node.js >= 8.9
- npm >= 3.0.0

### 安装

```bash
# 克隆项目
git clone https://github.com/elunez/eladmin-web.git

# 进入目录
cd frontend

# 安装依赖
npm install
```

### 开发运行

```bash
npm run dev
```

启动后访问 http://localhost:8013，将自动打开浏览器。

### 构建部署

```bash
# 生产环境构建
npm run build

# 测试环境构建
npm run build:test

# 预发布环境构建
npm run build:stage
```

构建产物输出到 `dist/` 目录。

## 环境变量

| 变量 | 开发环境 | 生产环境 | 说明 |
|------|---------|---------|------|
| `VUE_APP_BASE_API` | `http://127.0.0.1:8000` | `https://api.tenverse.top/` | 后端 API 地址 |
| `VUE_APP_WS_API` | `wss://api.tenverse.top/` | `wss://api.tenverse.top/` | WebSocket 地址 |
| `VUE_APP_IMAGE_DOMAIN` | `http://127.0.0.1:8000/storage/` | `https://api.tenverse.top/storage/` | 图片域名 |
| `GD_KEY` | `749c0b93...` | `749c0b93...` | 高德地图 Key |

## API 接口约定

- 接口基础路径：`/api/v3/`（管理后台端）
- 认证方式：JWT Token，通过 Header `Authorization: Bearer {token}` 传递
- Token 存储：Cookie（有效期 1 天）
- 文件上传：支持直传阿里云 OSS
- 图片展示：`VUE_APP_IMAGE_DOMAIN` + 相对路径

## 页面模块说明

| 模块 | 路径 | 说明 |
|------|------|------|
| 首页看板 | `views/dashboard/` | 数据概览、图表统计 |
| 平台管理 | `views/platform/` | 平台增删改查、账号管理 |
| 门店管理 | `views/shop/` | 门店信息、账号管理 |
| 活动管理 | `views/activity/` | Banner 运营位管理 |
| 排队管理 | `views/queue/` | 队列配置、叫号记录 |

> 路由由后台菜单系统动态加载，新增页面需在后台菜单管理中配置菜单项，组件路径对应 `views/` 下的目录路径。

## 构建优化

- **Gzip 压缩** — 生产构建自动生成 `.gz` 文件
- **代码分包** — Element UI、node_modules、公共组件独立打包
- **SVG 雪碧图** — 自动合并 `src/assets/icons/` 下的 SVG 图标
- **Source Map** — 生产环境关闭 Source Map
- **Runtime 内联** — 将 webpack runtime 内联到 HTML 减少请求

## 代码规范

- ESLint + Vue 官方规则
- Git Hooks：husky + lint-staged，提交前自动检查
- 可使用 `npm run new` 通过 Plop 生成标准代码模板