# 支付管理平台_web

**Repository Path**: lps2128/payment-management-platformceb

## Basic Information

- **Project Name**: 支付管理平台_web
- **Description**: 前端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-29
- **Last Updated**: 2026-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 支付管理平台 - 前端

> 基于 Vue 3 + TypeScript 的支付管理后台系统

[![Vue Version](https://img.shields.io/badge/Vue-3.3-green.svg)](https://vuejs.org)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.2-blue.svg)](https://typescriptlang.org)
[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.4-blue.svg)](https://element-plus.org)

---

## 📸 页面预览

### 登录页

![登录页](assets/login.png)

### 数据看板

![数据看板](assets/dashboard.png)

### 商户管理

![商户管理](assets/merchant.png)

---

## 📖 项目简介

支付管理平台前端是一个现代化的支付管理后台系统，提供商户管理、支付订单管理、退款管理、结算管理、对账管理等全方位功能。

### 核心功能

- **用户认证** - JWT 登录、权限验证
- **商户管理** - 商户入驻、审核、渠道配置
- **支付管理** - 创建支付、订单查询、订单关闭
- **退款管理** - 退款申请、退款处理、退款查询
- **结算管理** - 结算单生成、结算打款、结算统计
- **对账管理** - 账单下载、自动对账、差异处理
- **系统设置** - 平台配置、支付配置、安全配置
- **数据看板** - 交易统计、趋势分析、实时数据

---

## 🚀 快速开始

### 环境要求

- Node.js 16+
- npm 或 yarn

### 安装依赖

```bash
npm install
# 或使用国内镜像
npm install --registry https://registry.npmmirror.com
```

### 启动开发服务器

```bash
npm run dev
```

启动成功后访问：http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

---

## 📁 项目结构

```
payment-frontend/
├── public/                     # 静态资源
├── src/
│   ├── api/                    # API 接口
│   │   ├── auth.ts            # 认证接口
│   │   ├── merchant.ts        # 商户接口
│   │   ├── payment.ts         # 支付接口
│   │   ├── order.ts           # 订单接口
│   │   ├── refund.ts          # 退款接口
│   │   ├── settlement.ts      # 结算接口
│   │   ├── reconciliation.ts  # 对账接口
│   │   └── ...
│   ├── layout/                 # 布局组件
│   │   └── index.vue          # 主布局
│   ├── router/                 # 路由配置
│   │   └── index.ts
│   ├── stores/                 # Pinia 状态管理
│   │   └── user.ts
│   ├── utils/                  # 工具函数
│   │   ├── permission.ts      # 权限工具
│   │   └── ...
│   ├── views/                  # 页面组件
│   │   ├── Login.vue          # 登录页
│   │   ├── dashboard/         # 数据看板
│   │   ├── merchant/          # 商户管理
│   │   ├── payment/           # 支付管理
│   │   ├── order/             # 订单管理
│   │   ├── refund/            # 退款管理
│   │   ├── settlement/        # 结算管理
│   │   ├── reconciliation/    # 对账管理
│   │   └── system/            # 系统设置
│   ├── App.vue               # 根组件
│   └── main.ts               # 入口文件
├── .env.development           # 开发环境配置
├── .env.production            # 生产环境配置
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
```

---

## 🔧 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.3+ | 前端框架 |
| TypeScript | 5.2+ | 类型系统 |
| Vite | 5.0+ | 构建工具 |
| Element Plus | 2.4+ | UI 组件库 |
| Pinia | 2.1+ | 状态管理 |
| Vue Router | 4.2+ | 路由管理 |
| Axios | 1.5+ | HTTP 客户端 |
| ECharts | 5.4+ | 数据可视化 |
| @vueuse/core | 10.0+ | Vue 工具集 |

---

## 📡 API 配置

### 开发环境

编辑 `.env.development`:

```env
VITE_API_BASE_URL=http://localhost:8080/api/v1
VITE_APP_TITLE=支付管理平台
```

### 生产环境

编辑 `.env.production`:

```env
VITE_API_BASE_URL=https://your-api-domain.com/api/v1
VITE_APP_TITLE=支付管理平台
```

---

## 🔐 默认账号

| 用户名 | 密码 | 角色 |
|--------|------|------|
| admin | Admin@123 | 超级管理员 |

**⚠️ 安全提示**: 首次登录后请立即修改默认密码！

---

## 📦 构建输出

生产构建后，`dist/` 目录包含所有静态文件，可部署到任意静态服务器：

```bash
# 使用本地服务器预览
npm run preview

# 或使用 Nginx/Apache 部署
# 将 dist/ 目录内容复制到服务器根目录
```

### Nginx 配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

---

## 🎨 代码规范

### 项目使用 ESLint + Prettier

```bash
# 检查代码
npm run lint

# 自动修复
npm run lint -- --fix
```

---

## 🌐 访问地址

| 服务 | 地址 | 说明 |
|------|------|------|
| 前端 | http://localhost:3000 | 管理后台 |
| 后端 API | http://localhost:8080 | API 接口 |
| Swagger 文档 | http://localhost:8080/swagger | API 文档 |

---

## ❓ 常见问题

### 依赖安装失败

**错误**: `npm install` 超时或失败

**解决**:
```bash
# 使用国内镜像
npm config set registry https://registry.npmmirror.com
npm install
```

### 跨域问题

**现象**: 浏览器控制台报 CORS 错误

**解决**:
1. 确保后端已启动
2. 检查 `.env.development` 中的 API 地址
3. 清除浏览器缓存

### 端口被占用

**错误**: 端口 3000 被占用

**解决**:
```bash
# 修改 vite.config.ts 中的端口配置
server: {
  port: 3001  // 改为其他端口
}
```

---

## 📝 更新日志

### v1.0.0 (2026-03-21)
- ✨ 初始版本发布
- ✨ 商户管理功能
- ✨ 支付订单管理
- ✨ 退款管理功能
- ✨ 结算管理功能
- ✨ 对账管理功能
- ✨ 系统设置功能
- ✨ 数据看板

---

## 📄 开源协议

MIT License

---

## 🔗 相关链接

- [后端仓库](https://gitee.com/lps2128/payment-management-platform)
- [Vue.js 官方文档](https://vuejs.org)
- [Element Plus 官方文档](https://element-plus.org)
- [TypeScript 官方文档](https://typescriptlang.org)

---

<div align="center">

**支付管理平台 - 前端** © 2026

Made with ❤️ by Payment Platform Team

</div>