PetServiceManagementSystemUI

宠物服务管理系统

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

功能特性

用户端功能

• 用户认证：登录/注册、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

安装依赖

npm install

启动开发服务器

npm run dev

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

构建生产版本

npm run build

预览生产构建

npm run preview

API 代码生成

本项目使用 Orval 根据后端 OpenAPI 规范自动生成 API 客户端代码：

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