# 宠物服务管理系统

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.5+-brightgreen.svg" alt="Vue">
  <img src="https://img.shields.io/badge/Vite-6.3+-blue.svg" alt="Vite">
  <img src="https://img.shields.io/badge/TypeScript-5.8+-blue.svg" alt="TypeScript">
  <img src="https://img.shields.io/badge/ElementPlus-2.13+-409eff.svg" alt="Element Plus">
</p>

一个功能完善的宠物服务管理前端应用，支持寄养、洗护服务预约，订单管理，宠物档案维护等功能。包含用户端和商家后台两套界面。

## 功能特性

### 用户端功能

- 用户认证：登录/注册、JWT Token 认证
- 服务预约：寄养预约、洗护预约（支持分步表单）
- 订单管理：订单列表、订单详情、状态追踪
- 宠物档案：宠物列表、新增/编辑/查看宠物信息、疫苗和驱虫记录
- 个人中心：个人信息查看与编辑、密码修改

### 商家后台功能

- 订单审核：预约订单审核、取消处理
- 房态管理：日历视图查看房间占用情况
- 排班管理：员工排班设置与查看
- 套餐配置：服务套餐的增删改查
- 用户管理：用户列表、用户详情、状态管理

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue | ^3.5.13 | 前端框架（Composition API + `<script setup>`） |
| Vite | ^6.3.5 | 构建工具 |
| TypeScript | ~5.8.3 | 类型安全 |
| Element Plus | ^2.13.6 | UI 组件库 |
| Pinia | ^3.0.4 | 状态管理 |
| Pinia Persistedstate | ^4.7.1 | Store 持久化 |
| Vue Router | ^4.6.4 | 路由管理 |
| Axios | ^1.15.2 | HTTP 请求 |
| Orval | 7.0 | OpenAPI → API 代码生成 |

## 项目结构

```
src/
├── api/                    # Orval 生成的 API 客户端
│   ├── auth-controller.ts
│   ├── user-controller.ts
│   ├── pet-controller.ts
│   ├── appointment-controller.ts
│   ├── boarding-room-controller.ts
│   ├── admin-*.ts          # 商家后台相关 API
│   └── models/             # TypeScript 类型定义
│
├── store/                  # Pinia 状态管理
│   ├── user.ts             # 用户登录状态
│   ├── meta.ts             # 全局元数据
│   ├── pet.ts              # 宠物数据缓存
│   └── appointment.ts      # 预约流程状态
│
├── router/
│   └── index.ts            # 路由配置 + 导航守卫
│
├── layout/
│   ├── UserLayout.vue      # 用户端布局（顶部导航）
│   └── AdminLayout.vue     # 商家后台布局（侧边栏+顶栏）
│
├── view/                   # 页面组件
│   ├── LoginView.vue
│   ├── booking/            # 服务预约模块
│   ├── order/              # 订单管理模块
│   ├── pet/                # 宠物档案模块
│   ├── profile/            # 个人中心模块
│   └── admin/              # 商家后台模块
│
├── components/             # 公共组件
│   ├── PaymentDialog.vue   # 模拟支付弹窗
│   ├── RoomCalendar.vue    # 房态日历组件
│   └── PetSelector.vue     # 宠物选择器
│
├── util/
│   └── axios-instance.ts   # Axios 配置（拦截器、Token 注入）
│
└── type/
    └── index.ts            # 自定义类型定义
```

## 快速开始

### 环境要求

- Node.js 18+
- 后端服务运行在 `http://localhost:8080`

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

应用将在 `http://localhost:5173` 启动，API 请求通过 Vite 代理转发到后端 `http://localhost:8080`。

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## API 代码生成

本项目使用 [Orval](https://orval.dev/) 根据后端 OpenAPI 规范自动生成 API 客户端代码：

```bash
npm run api:gen
```

> 运行前请确保后端服务已启动在 `http://localhost:8080`

Orval 配置在 `orval.config.ts` 中，生成规则：
- 按标签拆分文件
- 使用自定义 Axios 实例
- 生成 TypeScript 类型定义到 `src/api/models/`
- 生成后自动使用 Prettier 格式化

## 主要特性

### 路由守卫

- 登录校验：部分页面需要登录才能访问
- 权限控制：商家后台需要 `admin` 角色
- 未授权自动跳转登录页

### 状态持久化

使用 `pinia-plugin-persistedstate` 实现登录状态持久化，刷新页面后保持登录。

### 响应式设计

- 适配桌面端和移动端
- Element Plus 响应式布局
- 自定义媒体查询优化移动端体验

### 主题色

主色调：`#e34889`（粉色系），统一应用于按钮、输入框、卡片等组件。

## 路由说明

### 用户端路由

| 路径 | 说明 | 需登录 |
|------|------|--------|
| `/login` | 登录/注册 | 否 |
| `/booking` | 服务预约首页 | 否 |
| `/booking/boarding` | 寄养预约 | 是 |
| `/booking/grooming` | 洗护预约 | 是 |
| `/orders` | 我的订单 | 是 |
| `/orders/:id` | 订单详情 | 是 |
| `/pets` | 宠物档案 | 是 |
| `/pets/new` | 新增宠物 | 是 |
| `/pets/:id` | 宠物详情 | 是 |
| `/pets/:id/edit` | 编辑宠物 | 是 |
| `/profile` | 个人中心 | 是 |

### 商家后台路由

| 路径 | 说明 |
|------|------|
| `/admin/orders` | 订单审核列表 |
| `/admin/orders/:id` | 订单审核详情 |
| `/admin/rooms` | 房态日历管理 |
| `/admin/schedules` | 排班管理 |
| `/admin/packages` | 套餐配置列表 |
| `/admin/packages/new` | 新增套餐 |
| `/admin/packages/:id/edit` | 编辑套餐 |
| `/admin/users` | 用户管理 |
| `/admin/users/:id` | 用户详情 |

## 开发规范

- 使用 `<script setup>` 语法
- 使用 `@/` 路径别名导入模块
- 优先使用 Orval 生成的 API，避免手写 Axios 请求
- 启用 TypeScript `strict` 模式
- 代码格式化使用 Prettier

## 浏览器支持

- Chrome 90+
- Firefox 90+
- Safari 14+
- Edge 90+

## 许可证

[MIT](LICENSE)