3.7 KiB
3.7 KiB
优艺家沙发翻新管理后台
基于 Vue 3 + Element Plus 的后台管理系统
技术栈
- 框架: Vue 3.4 + TypeScript 5.3
- UI 组件: Element Plus 2.5
- 状态管理: Pinia 2.1
- 路由: Vue Router 4.2
- HTTP 客户端: Axios 1.6
- 构建工具: Vite 5
- 日期处理: Day.js
功能模块
1. 数据概览
- 案例、服务、预约、用户总数统计
- 最新预约列表
- 快捷操作入口
2. 案例管理
- 案例列表查看（分页、搜索、筛选）
- 案例新增/编辑/删除
- 图片预览
- 状态管理
3. 服务管理
- 服务列表查看
- 服务新增/编辑/删除
- 状态开关切换
- 排序管理
4. 预约管理
- 预约列表查看
- 预约详情查看
- 状态更新（待确认/已确认/进行中/已完成/已取消）
- 多条件搜索
5. 用户管理
- 用户列表查看
- 用户信息编辑
- 角色管理（管理员/普通用户）
- 状态管理（启用/禁用）
开发指南
安装依赖
npm install
启动开发服务器
npm run dev
构建生产版本
npm run build
预览生产构建
npm run preview
配置说明
API 代理配置
开发环境下，所有 /api 请求会被代理到后端服务器 http://localhost:3000
配置文件：vite.config.ts
环境变量
可在项目根目录创建 .env.development 和 .env.production 文件配置不同环境的变量。
项目结构
管理后台/
├── src/
│ ├── api/ # API 接口定义
│ │ ├── auth.ts # 认证相关
│ │ ├── case.ts # 案例管理
│ │ ├── service.ts # 服务管理
│ │ ├── booking.ts # 预约管理
│ │ └── user.ts # 用户管理
│ ├── layout/ # 布局组件
│ │ └── index.vue # 主布局
│ ├── router/ # 路由配置
│ │ └── index.ts
│ ├── stores/ # Pinia 状态管理
│ │ └── user.ts # 用户状态
│ ├── styles/ # 全局样式
│ │ └── index.css
│ ├── utils/ # 工具函数
│ │ └── request.ts # Axios 封装
│ ├── views/ # 页面组件
│ │ ├── dashboard/ # 数据概览
│ │ ├── case/ # 案例管理
│ │ ├── service/ # 服务管理
│ │ ├── booking/ # 预约管理
│ │ ├── user/ # 用户管理
│ │ └── login/ # 登录页
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── index.html
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
└── package.json
默认账号
用户名：admin
密码：admin123
注意事项
- 后端服务: 确保后端服务已启动并运行在
http://localhost:3000 - 认证: 使用 JWT Token 进行身份认证，token 存储在 localStorage 中（key:
admin_token） - 权限: 所有管理接口需要 admin 角色权限
- 图片上传: 当前版本使用 URL 输入方式，后续可集成文件上传功能
界面特色
- ✨ 渐变设计，美观大方
- 🎨 品牌色 #d4a574（金棕色）贯穿全局
- 📱 响应式布局，适配不同屏幕
- 🎭 平滑动画过渡
- 🎯 清晰的操作提示和反馈
- 🔒 完善的权限控制
技术亮点
- 组合式 API (Composition API)
- TypeScript 类型安全
- 自动导入 Vue、Pinia、Router API
- Element Plus 按需引入
- 统一的 HTTP 请求封装和错误处理
- 路由守卫自动鉴权