# pd-admin-web

**Repository Path**: oneonly/pd-admin-web

## Basic Information

- **Project Name**: pd-admin-web
- **Description**: pd-admin-web 是 拼豆门店管理系统 的 PC 后台进销存管理端，基于 Vue 3 + Element Plus 构建。面向门店老板和店员，提供店铺配置、商品库存、会员管理、订单收银、桌台监控、团购核销、数据报表等一站式管理功能。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-27
- **Last Updated**: 2026-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 拼豆店 PC 后台管理端

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.4-4FC08D?logo=vue.js" alt="Vue 3.4" />
  <img src="https://img.shields.io/badge/Vite-5.4-646CFF?logo=vite" alt="Vite 5.4" />
  <img src="https://img.shields.io/badge/Element_Plus-2.7-409EFF?logo=element" alt="Element Plus 2.7" />
  <img src="https://img.shields.io/badge/Pinia-2.1-FFD859" alt="Pinia 2.1" />
  <img src="https://img.shields.io/badge/Vue_Router-4.3-4FC08D" alt="Vue Router 4.3" />
  <img src="https://img.shields.io/badge/license-MIT-green" alt="MIT" />
</p>

> 🖥️ 拼豆手工体验馆 PC 后台管理系统，支持门店全流程数字化管理。

---

## 📖 项目简介

`pd-admin-web` 是 [拼豆门店管理系统](https://gitee.com/yourname/pd-shop-root) 的 PC 后台管理端，基于 Vue 3 + Element Plus 构建。面向门店老板和店员，提供店铺配置、商品库存、会员管理、订单收银、桌台监控、团购核销、数据报表等一站式管理功能。

---

## ✨ 功能特性

| 模块 | 功能 | 说明 |
|------|------|------|
| 📊 数据看板 | 首页仪表盘 | 今日营收、实时桌台状态、库存预警、热销商品排名 |
| 🏪 店铺设置 | 店铺配置 | 店铺基础信息、营业时间、联系方式 |
| 💰 计费规则 | 计价方案 | 按时/按次/包段多种计费模式配置 |
| 👥 店员权限 | 权限管理 | 角色管理（老板/店员）、菜单权限分配 |
| 👤 会员管理 | 会员列表 + 详情 | 会员查询、充值记录、优惠券发放、消费明细 |
| 🪑 桌台管理 | 桌台可视化 | 桌台状态监控、开台记录、进行中订单管理 |
| 📦 商品管理 | 分类 + 色号 + 商品 | 拼豆商品分类、色号维护、商品上下架 |
| 🏭 库存管理 | 采购 + 盘点 + 预警 | 采购入库、库存盘点、低库存预警、耗材报表 |
| 🧾 订单管理 | 订单列表 | 全量订单查询、退款处理、订单详情 |
| 🎫 团购核销 | 券码核销 | 扫码/手动核销、核销记录查询 |
| 📈 数据报表 | 报表中心 | 营收/销量/耗材统计，支持 Excel 导出 |

---

## 🎨 界面预览

```
┌──────────────────────────────────────────────────┐
│  🧩 拼豆店                          👤 管理员 ▼  │
├──────────┬───────────────────────────────────────┤
│ 📊 看板   │  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ 🏪 店铺   │  │¥1280 │ │ 32单 │ │ ¥85  │ │ 75%  │ │
│ 💰 计费   │  │今日营收│ │订单数 │ │客单价 │ │使用率 │ │
│ 👥 权限   │  └──────┘ └──────┘ └──────┘ └──────┘ │
│ 👤 会员   │                                       │
│ 🪑 桌台   │  🟢 A01  🟢 A02  🔴 A03  🟡 A04    │
│ 📦 商品   │  🟢 B01  🔴 B02  🔒 B03  🟢 B04    │
│ 🏭 库存   │  🟡 C01  🟢 C02  🔴 C03  🟢 C04    │
│ 🧾 订单   │                                       │
│ 🎫 核销   │  ⚠️ 库存预警：拼豆-浅粉 仅剩 2 颗     │
│ 📈 报表   │  🔥 热销：拼豆-白色 今日售出 156 颗   │
└──────────┴───────────────────────────────────────┘
```

---

## 🛠 技术栈

| 类别 | 技术 | 版本 | 说明 |
|------|------|------|------|
| 框架 | Vue 3 | 3.4.x | Composition API + `<script setup>` |
| 构建 | Vite | 5.4.x | 极速 HMR 开发体验 |
| UI 组件库 | Element Plus | 2.7.x | 企业级桌面端组件库 |
| 状态管理 | Pinia | 2.1.x | Vue 3 官方推荐 |
| 路由 | Vue Router | 4.3.x | SPA 路由管理 |
| HTTP | Axios | 1.7.x | 请求封装，JWT 鉴权 |
| 表格导出 | XLSX | 0.18.x | Excel 导入导出 |
| 二维码 | QRCode | 1.5.x | 桌台二维码生成 |
| 自动导入 | unplugin | 0.26.x | 组件/API 按需自动导入 |

---

## 📁 项目结构

```
pd-admin-web/
├── index.html                          # 入口 HTML
├── package.json                        # 依赖管理
├── vite.config.js                      # Vite 配置（代理、别名、自动导入）
├── src/
│   ├── main.js                         # 应用入口
│   ├── App.vue                         # 根组件
│   ├── router/
│   │   └── index.js                    # 路由配置（17条路由 + 鉴权守卫）
│   ├── store/
│   │   └── user.js                     # 用户登录状态 + 角色判断
│   ├── layout/
│   │   └── MainLayout.vue              # 主布局（侧边栏 + 顶栏 + 内容区）
│   ├── api/
│   │   ├── request.js                  # Axios 封装（拦截器、Token）
│   │   ├── auth.js                     # 登录 API
│   │   ├── shop.js                     # 店铺配置 API
│   │   ├── pricing.js                  # 计费规则 API
│   │   ├── staff.js                    # 店员权限 API
│   │   ├── member.js                   # 会员管理 API
│   │   ├── table.js                    # 桌台管理 API
│   │   ├── product.js                  # 商品管理 API
│   │   ├── stock.js                    # 库存管理 API
│   │   ├── purchase.js                 # 采购入库 API
│   │   ├── order.js                    # 订单管理 API
│   │   ├── voucher.js                  # 团购核销 API
│   │   └── coupon.js                   # 优惠券 API
│   └── views/
│       ├── login/index.vue             # 登录页
│       ├── dashboard/index.vue         # 首页看板
│       ├── system/
│       │   ├── ShopConfig.vue          # 店铺配置
│       │   ├── PricingRules.vue        # 计费规则
│       │   └── StaffPermission.vue     # 店员权限
│       ├── member/
│       │   ├── MemberList.vue          # 会员列表
│       │   └── MemberDetail.vue        # 会员详情
│       ├── table/
│       │   └── TableManage.vue         # 桌台管理
│       ├── inventory/
│       │   ├── ProductCategory.vue     # 商品分类
│       │   ├── ColorManage.vue         # 色号维护
│       │   ├── ProductList.vue         # 商品管理
│       │   ├── PurchaseOrder.vue       # 采购入库
│       │   ├── StockTake.vue           # 库存盘点
│       │   ├── StockWarning.vue        # 库存预警
│       │   └── MaterialReport.vue      # 耗材报表
│       ├── order/
│       │   └── OrderList.vue           # 订单管理
│       ├── voucher/
│       │   └── VoucherVerify.vue       # 团购核销
│       └── report/
│           └── ReportCenter.vue        # 报表中心
```

---

## 🚀 快速开始

### 环境要求

- Node.js 20+
- npm 或 pnpm

### 安装与运行

```bash
# 克隆项目
git clone https://gitee.com/yourname/pd-shop-root.git
cd pd-shop-root/code/pd-admin-web

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 浏览器访问
# http://localhost:5173
```

### 构建部署

```bash
# 构建生产版本
npm run build

# 产物输出到 dist/ 目录
```

### 接口代理

开发环境默认代理到 `http://localhost:8080`，可在 `vite.config.js` 中修改：

```js
server: {
  port: 5173,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}
```

---

## 🔌 后端 API 对接

| 模块 | 端点示例 | 说明 |
|------|----------|------|
| 登录 | `POST /common/login` | 店员登录 |
| 看板 | `GET /dashboard/summary` | 首页数据汇总 |
| 店铺 | `GET /shop/config` | 店铺配置 |
| 计费 | `GET /pricing/list` | 计费规则列表 |
| 权限 | `GET /staff/list` | 店员列表 |
| 会员 | `GET /member/list` | 会员列表 |
| 桌台 | `GET /table/list` | 桌台列表 |
| 商品 | `GET /product/list` | 商品列表 |
| 库存 | `GET /stock/warning` | 库存预警 |
| 采购 | `POST /purchase/create` | 采购入库 |
| 订单 | `GET /order/list` | 订单列表 |
| 核销 | `POST /voucher/verify` | 券码核销 |
| 报表 | `GET /report/summary` | 报表汇总 |

---

## 📐 设计规范

- **布局**：经典侧边栏 + 顶栏 + 内容区三栏布局
- **分辨率**：最小支持 1366×768，推荐 1920×1080
- **颜色体系**：Element Plus 默认蓝色主题 `#409EFF`
- **圆角规范**：卡片 8px，按钮 4px
- **间距规范**：基于 Element Plus 的 8px 倍数栅格体系
- **侧边栏**：深色背景 `#304156`，可折叠

---

## 🗺️ 路线图

- [x] 登录与权限管理
- [x] 首页数据看板
- [x] 店铺配置与计费规则
- [x] 会员管理（列表/详情/充值）
- [x] 桌台可视化管理
- [x] 商品分类与色号维护
- [x] 库存管理（采购/盘点/预警）
- [x] 订单管理
- [x] 团购券核销
- [x] 数据报表与 Excel 导出
- [ ] 暗黑模式支持
- [ ] 操作日志审计
- [ ] 多门店切换

---

## 🤝 贡献指南

1. Fork 本仓库
2. 创建功能分支 `git checkout -b feature/AmazingFeature`
3. 提交代码 `git commit -m 'feat: add some amazing feature'`
4. 推送分支 `git push origin feature/AmazingFeature`
5. 创建 Pull Request

---

## 📄 许可证

MIT License © 2024 拼豆手工体验馆

---

## 🔗 相关项目

| 项目 | 说明 | 地址 |
|------|------|------|
| 拼豆门店管理系统 | 完整项目仓库 | [Gitee](https://gitee.com/yourname/pd-shop-root) |
| pd-admin-h5 | 商家移动端 H5 | `code/pd-admin-h5` |
| pd-admin-mini-program | 顾客微信小程序 | `code/pd-admin-mini-program` |

---

<p align="center">
  ⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！
</p>