# 后台管理系统

一个基于 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