feat:"完成页面接口的对接"

2026-01-29 17:58:19 +08:00
parent 2774a539bf
commit 2b69da3c15
98 changed files with 9504 additions and 592 deletions
--- a/管理后台/README.md
+++ b/管理后台/README.md
@@ -0,0 +1,152 @@
+# 优艺家沙发翻新管理后台
+
+基于 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 请求封装和错误处理
+- 路由守卫自动鉴权