153 lines
3.7 KiB
Markdown
153 lines
3.7 KiB
Markdown
# 优艺家沙发翻新管理后台
|
||
|
||
基于 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. 用户管理
|
||
- 用户列表查看
|
||
- 用户信息编辑
|
||
- 角色管理（管理员/普通用户）
|
||
- 状态管理（启用/禁用）
|
||
|
||
## 开发指南
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问地址：http://localhost:5173
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产构建
|
||
|
||
```bash
|
||
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
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **后端服务**: 确保后端服务已启动并运行在 `http://localhost:3000`
|
||
2. **认证**: 使用 JWT Token 进行身份认证，token 存储在 localStorage 中（key: `admin_token`）
|
||
3. **权限**: 所有管理接口需要 admin 角色权限
|
||
4. **图片上传**: 当前版本使用 URL 输入方式，后续可集成文件上传功能
|
||
|
||
## 界面特色
|
||
|
||
- ✨ 渐变设计，美观大方
|
||
- 🎨 品牌色 #d4a574（金棕色）贯穿全局
|
||
- 📱 响应式布局，适配不同屏幕
|
||
- 🎭 平滑动画过渡
|
||
- 🎯 清晰的操作提示和反馈
|
||
- 🔒 完善的权限控制
|
||
|
||
## 技术亮点
|
||
|
||
- 组合式 API (Composition API)
|
||
- TypeScript 类型安全
|
||
- 自动导入 Vue、Pinia、Router API
|
||
- Element Plus 按需引入
|
||
- 统一的 HTTP 请求封装和错误处理
|
||
- 路由守卫自动鉴权
|