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.
3.9 KiB
3.9 KiB
后台管理系统
一个基于 Vue 3 + TypeScript + Vite 的现代化后台管理系统框架。
🎨 特性
- ✨ 暗黑主题设计 - 黑白双色优雅设计，舒适的深色主题
- 🔐 认证系统 - 完整的登录/登出功能
- 📊 仪表板 - 数据统计和概览
- 👥 用户管理 - CRUD 操作示例
- 📦 产品管理 - 完整的产品管理模块
- 📋 订单管理 - 订单管理系统
- ⚙️ 系统设置 - 系统配置管理
- 🎯 响应式布局 - 完美适配各种屏幕尺寸
🚀 快速开始
安装依赖
npm install
开发模式
npm run dev
访问 http://localhost:5173 查看应用
生产构建
npm run build
类型检查
npm run type-check
预览构建结果
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- 用户信息
🛠 开发建议
- 状态管理: 使用 Pinia store 管理全局状态
- API 集成: 将模拟数据替换为真实 API 调用
- 表单验证: 为表单添加完善的验证规则
- 错误处理: 添加全局错误处理和日志记录
- 权限管理: 根据用户角色实现权限控制
📝 注意事项
- 当前使用本地状态管理，实际项目需要后端 API 支持
- 表单数据为演示用途，需要根据实际需求修改
- 样式可根据公司品牌进行定制
- 建议在生产环境中启用权限检查和数据验证
🤝 贡献
欢迎提交 Issue 和 Pull Request
📄 许可证
MIT