# 优艺家沙发翻新管理后台 基于 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 请求封装和错误处理 - 路由守卫自动鉴权