# Backend Management System

**Repository Path**: huziven/backend-management-system

## Basic Information

- **Project Name**: Backend Management System
- **Description**: 商城后台管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 电商运营后台管理系统

## 项目介绍

本项目是一个基于 Vue 3 + TypeScript + Vite 开发的电商运营后台管理系统，旨在为电商平台提供高效、直观的运营管理功能。系统包含登录、工作台、商品管理、订单管理和用户管理等核心模块，支持数据可视化展示、完整的权限控制和状态持久化。

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **开发语言**: TypeScript
- **构建工具**: Vite 7.x
- **UI 框架**: Element Plus 2.x
- **状态管理**: Pinia 2.x
- **路由管理**: Vue Router 4.x
- **网络请求**: Axios
- **数据可视化**: ECharts 5.x
- **代码规范**: ESLint + Prettier
- **代码压缩**: Terser

## 功能特性

### 核心功能

#### 1. 登录模块
- 表单验证（用户名、密码、验证码）
- 记住密码功能
- Token 存储与管理
- 登录状态持久化

#### 2. 工作台 (Dashboard)
- 欢迎卡片（显示当前用户、今日订单、今日销售额）
- 数据统计卡片（总销售额、总订单数、总用户数、总商品数）
- 数据趋势展示（增长/下降百分比）
- **ECharts 图表**:
  - 销售趋势柱状图
  - 订单状态分布饼图
  - 商品分类销量横向柱状图
  - 用户增长趋势折线图
- 最近订单列表
- 热销商品排行榜

#### 3. 商品管理
- 商品列表展示（支持分页）
- 商品搜索（名称、分类、状态）
- 商品添加/编辑（表单验证）
- 商品删除（支持批量删除）
- 图片上传预览
- 库存预警显示
- 商品状态切换（在售/下架）

#### 4. 订单管理
- 订单列表展示（支持分页）
- 订单搜索（订单号、用户、状态）
- 订单详情查看
- 订单状态管理（待支付、待发货、待收货、已完成）
- 发货功能
- 订单导出
- 订单金额统计

#### 5. 用户管理
- 用户列表展示（支持分页）
- 用户搜索（用户名、角色、状态）
- 用户添加/编辑
- 用户状态切换（启用/禁用）
- 重置密码功能
- 角色管理（管理员/普通用户）
- 用户详情展示（头像、联系方式等）

### 系统特性

#### 权限控制
- 基于角色的权限管理（管理员/普通用户）
- 自定义权限指令 `v-permission`
- 路由守卫控制访问权限

#### 状态管理
- Pinia 状态管理
- 状态持久化（刷新页面不丢失登录状态）
- 用户信息、Token 自动同步到 localStorage

#### UI/UX 优化
- 路由切换进度条 (NProgress)
- 页面切换动画
- 面包屑导航
- 全屏切换功能
- 消息通知中心
- 响应式布局设计
- Element Plus 中文语言包

#### 工程化配置
- **ESLint**: 代码规范检查
- **Prettier**: 代码格式化
- **TypeScript**: 类型安全
- **组件自动导入**: `unplugin-vue-components`
- **API 自动导入**: `unplugin-auto-import`
- **代码分包**: 按需加载，优化性能
- **Gzip 压缩**: 减小构建体积

#### 错误处理
- 全局错误处理
- API 请求拦截器
- 统一的错误提示
- 404 页面

#### 安全措施
- 内容安全策略 (CSP)
- XSS 防护
- 输入验证
- Token 安全管理

#### 用户体验
- 全局加载状态
- 响应式设计优化
- 移动端适配

## 项目结构

```
├── .vscode/              # VS Code 配置文件
├── dist/                 # 构建输出目录
├── public/               # 静态资源
├── src/                  # 源代码
│   ├── assets/           # 资源文件
│   ├── directives/       # 自定义指令
│   │   ├── index.ts      # 指令注册
│   │   └── permission.ts # 权限指令
│   ├── mock/             # 模拟数据
│   │   └── index.ts      # Mock 数据
│   ├── router/           # 路由配置
│   │   └── index.ts      # 路由定义
│   ├── stores/           # Pinia 状态管理
│   │   ├── user.ts       # 用户状态
│   │   └── app.ts        # 应用状态
│   ├── utils/            # 工具函数
│   │   ├── api.ts        # API 请求封装
│   │   ├── errorHandler.ts # 错误处理
│   │   └── security.ts   # 安全工具
│   ├── views/            # 页面视图
│   │   ├── Dashboard.vue # 工作台
│   │   ├── Login.vue     # 登录页
│   │   ├── Main.vue      # 主布局
│   │   ├── NotFound.vue  # 404 页面
│   │   ├── Orders.vue    # 订单管理
│   │   ├── Products.vue  # 商品管理
│   │   └── Users.vue     # 用户管理
│   ├── App.vue           # 根组件
│   ├── main.ts           # 入口文件
│   └── style.css         # 全局样式
├── .editorconfig         # 编辑器配置
├── .eslintrc.cjs         # ESLint 配置
├── .gitignore            # Git 忽略文件
├── .prettierrc           # Prettier 配置
├── env.d.ts              # 环境类型声明
├── index.html            # HTML 模板
├── package.json          # 项目配置和依赖
├── pnpm-lock.yaml        # pnpm 依赖锁文件
├── README.md             # 项目说明
├── tsconfig.app.json     # TypeScript 应用配置
├── tsconfig.json         # TypeScript 配置
├── tsconfig.node.json    # TypeScript Node 配置
└── vite.config.ts        # Vite 配置
```

## 安装和运行

### 环境要求
- Node.js 16.0+
- pnpm 7.0+

### 安装依赖

```bash
pnpm install
```

### 开发环境运行

```bash
pnpm dev
```

### 代码检查

```bash
# ESLint 检查并修复
pnpm run lint

# Prettier 格式化
pnpm run format
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产构建

```bash
pnpm preview
```

## 默认账号

系统预设了两个测试账号：

| 账号 | 密码 | 角色 |
|------|------|------|
| admin | 123456 | 管理员 |
| user | 123456 | 普通用户 |

## 开发规范

### 代码风格
- 使用 TypeScript 严格模式
- 组件使用 Composition API
- 使用 `setup` 语法糖
- 类型定义使用接口 (interface)

### 命名规范
- 组件名：PascalCase（如 `UserList.vue`）
- 文件名：camelCase（如 `userStore.ts`）
- 变量名：camelCase
- 常量名：UPPER_SNAKE_CASE

### Git 提交规范
- feat: 新功能
- fix: 修复问题
- docs: 文档修改
- style: 代码格式修改
- refactor: 代码重构
- perf: 性能优化
- test: 测试用例修改
- chore: 其他修改

## 浏览器支持

- Chrome >= 80
- Firefox >= 75
- Safari >= 13
- Edge >= 80

## 项目亮点

1. **完整的功能模块**: 涵盖电商后台的核心业务功能
2. **优秀的用户体验**: 流畅的动画、友好的交互、响应式设计
3. **严格的类型安全**: TypeScript 全项目覆盖
4. **工程化最佳实践**: ESLint + Prettier + 自动化导入
5. **性能优化**: 代码分包、懒加载、Gzip 压缩
6. **权限管理**: 基于角色的细粒度权限控制
7. **状态持久化**: 刷新页面不丢失用户状态
8. **安全措施**: 内容安全策略、XSS 防护、输入验证
9. **错误监控**: 全局错误捕获和统一错误处理
10. **生产环境优化**: 代码压缩、构建配置优化

## 后续优化方向

- [ ] 接入真实后端 API
- [ ] 添加更多数据可视化图表
- [ ] 实现数据导出功能（Excel、PDF）
- [ ] 添加系统日志模块
- [ ] 实现主题切换（暗黑模式）
- [ ] 添加更多动画效果
- [ ] 优化移动端体验
- [ ] 添加单元测试和 E2E 测试


---

如果这个项目对你有帮助，欢迎 Star ⭐️