You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
3.9 KiB
174 lines
3.9 KiB
2 weeks ago
|
# 后台管理系统
|
||
|
|
|
||
|
|
一个基于 Vue 3 + TypeScript + Vite 的现代化后台管理系统框架。
|
||
|
|
|
||
|
|
## 🎨 特性
|
||
|
|
|
||
|
|
- ✨ **暗黑主题设计** - 黑白双色优雅设计，舒适的深色主题
|
||
|
|
- 🔐 **认证系统** - 完整的登录/登出功能
|
||
|
|
- 📊 **仪表板** - 数据统计和概览
|
||
|
|
- 👥 **用户管理** - CRUD 操作示例
|
||
|
|
- 📦 **产品管理** - 完整的产品管理模块
|
||
|
|
- 📋 **订单管理** - 订单管理系统
|
||
|
|
- ⚙️ **系统设置** - 系统配置管理
|
||
|
|
- 🎯 **响应式布局** - 完美适配各种屏幕尺寸
|
||
|
|
|
||
|
|
## 🚀 快速开始
|
||
|
|
|
||
|
|
### 安装依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### 开发模式
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
访问 `http://localhost:5173` 查看应用
|
||
|
|
|
||
|
|
### 生产构建
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build
|
||
|
|
```
|
||
|
|
|
||
|
|
### 类型检查
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run type-check
|
||
|
|
```
|
||
|
|
|
||
|
|
### 预览构建结果
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run preview
|
||
|
|
```
|
||
|
|
|
||
|
|
## 📁 项目结构
|
||
|
|
|
||
|
|
```
|
||
|
|
src/
|
||
|
|
├── assets/ # 静态资源和样式
|
||
|
|
├── components/ # 可复用组件
|
||
|
|
│ ├── Header.vue # 顶部导航栏
|
||
|
|
│ └── Sidebar.vue # 侧边栏菜单
|
||
|
|
├── router/ # 路由配置
|
||
|
|
├── stores/ # Pinia 状态管理
|
||
|
|
│ ├── auth.ts # 认证状态
|
||
|
|
│ └── counter.ts # 计数器示例
|
||
|
|
├── views/ # 页面组件
|
||
|
|
│ ├── LoginView.vue # 登录页面
|
||
|
|
│ ├── AdminLayout.vue # 后台布局
|
||
|
|
│ └── admin/ # 后台管理页面
|
||
|
|
│ ├── DashboardView.vue # 仪表板
|
||
|
|
│ ├── UsersView.vue # 用户管理
|
||
|
|
│ ├── ProductsView.vue # 产品管理
|
||
|
|
│ ├── OrdersView.vue # 订单管理
|
||
|
|
│ └── SettingsView.vue # 系统设置
|
||
|
|
└── main.ts # 应用入口
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🔑 认证信息
|
||
|
|
|
||
|
|
### 测试账号
|
||
|
|
|
||
|
|
- **用户名**: `admin`
|
||
|
|
- **密码**: `123456`
|
||
|
|
|
||
|
|
> 注：当前使用本地模拟认证，实际项目需要连接真实 API 服务器
|
||
|
|
|
||
|
|
## 🎯 功能模块
|
||
|
|
|
||
|
|
### 仪表板 (Dashboard)
|
||
|
|
- 数据统计卡片
|
||
|
|
- 最近订单表格
|
||
|
|
- 统计数据可视化
|
||
|
|
|
||
|
|
### 用户管理
|
||
|
|
- 用户列表展示
|
||
|
|
- 搜索功能
|
||
|
|
- 新增用户
|
||
|
|
- 编辑用户信息
|
||
|
|
- 删除用户
|
||
|
|
- 状态管理（启用/禁用）
|
||
|
|
|
||
|
|
### 产品管理
|
||
|
|
- 产品列表管理
|
||
|
|
- 产品搜索和过滤
|
||
|
|
- 新增产品
|
||
|
|
- 编辑产品
|
||
|
|
- 删除产品
|
||
|
|
- 库存管理
|
||
|
|
- 产品分类
|
||
|
|
|
||
|
|
### 订单管理
|
||
|
|
- 订单列表展示
|
||
|
|
- 订单搜索和过滤
|
||
|
|
- 订单状态管理
|
||
|
|
- 新增/编辑/删除订单
|
||
|
|
- 支付方式记录
|
||
|
|
|
||
|
|
### 系统设置
|
||
|
|
- 基本设置
|
||
|
|
- 安全设置
|
||
|
|
- 备份配置
|
||
|
|
- 文件上传设置
|
||
|
|
|
||
|
|
## 🎨 主题配置
|
||
|
|
|
||
|
|
系统使用黑白双色暗黑主题：
|
||
|
|
|
||
|
|
- **主色调**: `#667eea` (紫蓝色)
|
||
|
|
- **背景色**: `#0a0e27` (深蓝黑)
|
||
|
|
- **卡片色**: `#1f2937` (深灰)
|
||
|
|
- **文字色**: `#e5e7eb` (浅灰)
|
||
|
|
|
||
|
|
## 📦 技术栈
|
||
|
|
|
||
|
|
- **Vue 3** - 渐进式 JavaScript 框架
|
||
|
|
- **TypeScript** - JavaScript 超集
|
||
|
|
- **Vite** - 下一代前端构建工具
|
||
|
|
- **Vue Router** - 官方路由库
|
||
|
|
- **Pinia** - Vue 3 状态管理
|
||
|
|
- **Element Plus** - UI 组件库
|
||
|
|
- **Axios** - HTTP 客户端库
|
||
|
|
|
||
|
|
## 🔒 路由保护
|
||
|
|
|
||
|
|
系统包含路由导航守卫，确保：
|
||
|
|
- 未登录用户无法访问后台页面
|
||
|
|
- 已登录用户不能重复进入登录页
|
||
|
|
- 自动重定向到登录页
|
||
|
|
|
||
|
|
## 💾 数据持久化
|
||
|
|
|
||
|
|
认证信息保存在 `localStorage` 中：
|
||
|
|
- `auth_token` - 用户令牌
|
||
|
|
- `user` - 用户信息
|
||
|
|
|
||
|
|
## 🛠 开发建议
|
||
|
|
|
||
|
|
1. **状态管理**: 使用 Pinia store 管理全局状态
|
||
|
|
2. **API 集成**: 将模拟数据替换为真实 API 调用
|
||
|
|
3. **表单验证**: 为表单添加完善的验证规则
|
||
|
|
4. **错误处理**: 添加全局错误处理和日志记录
|
||
|
|
5. **权限管理**: 根据用户角色实现权限控制
|
||
|
|
|
||
|
|
## 📝 注意事项
|
||
|
|
|
||
|
|
- 当前使用本地状态管理，实际项目需要后端 API 支持
|
||
|
|
- 表单数据为演示用途，需要根据实际需求修改
|
||
|
|
- 样式可根据公司品牌进行定制
|
||
|
|
- 建议在生产环境中启用权限检查和数据验证
|
||
|
|
|
||
|
|
## 🤝 贡献
|
||
|
|
|
||
|
|
欢迎提交 Issue 和 Pull Request
|
||
|
|
|
||
|
|
## 📄 许可证
|
||
|
|
|
||
|
|
MIT
|