PetServiceManagementSystemUI/work.md

开发任务计划

基于 uiDesign.md 分析当前项目状态，按优先级规划开发任务。

---

当前已实现功能

模块	内容
路由	userRoutes（首页/关于）+ adminRoutes（用户管理/其他）基础结构
布局	UserLayout（顶部导航） + AdminLayout（侧边栏+顶栏）
登录	LoginView（登录+注册 tab）
用户管理	UserView（CRUD + 搜索 + 分页 + 状态切换）
状态管理	useLoginUserStore + useMetaStore
API	auth-controller + user-controller
导航守卫	requiresAdmin 校验
类型	User / LoginUser

---

任务清单

阶段一：P0 — 核心业务（优先级最高）

任务 1.1：补充类型定义

• 文件: src/type/index.ts
• 内容: 补充 Pet、Package、BoardingRoom、RoomStatus、Appointment、Schedule 接口定义
• 参考: uiDesign.md §14.2

任务 1.2：扩展路由表

• 文件: src/router/index.ts
• 内容:
  • userRoutes 新增：预约（booking/boarding/grooming）、订单列表/详情、宠物 CRUD、个人中心
  • adminRoutes 新增：订单审核、房态管理、排班管理、套餐配置、用户详情
  • 补充各路由 meta.title / meta.icon

任务 1.3：新建 API 控制器

• 文件:
  • src/api/pet-controller.ts
  • src/api/appointment-controller.ts
  • src/api/boarding-room-controller.ts
  • src/api/package-controller.ts
  • src/api/schedule-controller.ts
  • 以及 admin 前缀的对应控制器
• 方式: 待后端就绪后运行 npm run api:gen 生成；或先行手动编写接口定义
• 参考: uiDesign.md §9.2

任务 1.4：公共组件开发

• 文件: src/components/
  • PaymentDialog.vue — 模拟支付弹窗
  • RoomCalendar.vue — 房态日历组件
  • PetSelector.vue — 宠物选择器
• 参考: uiDesign.md §8

任务 1.5：服务预约模块

• 文件: src/view/booking/
  • BookingView.vue — 选择服务类型（寄养/洗护）
  • BoardingBookingView.vue — 寄养预约（4 步 Stepper）
  • GroomingBookingView.vue — 洗护预约（4 步 Stepper）
• 参考: uiDesign.md §7.3

任务 1.6：订单管理模块（用户侧）

• 文件: src/view/order/
  • OrderListView.vue — 我的预约列表（卡片+状态筛选+分页）
  • OrderDetailView.vue — 订单详情（含条件按钮逻辑）
• 参考: uiDesign.md §7.4

任务 1.7：宠物档案模块

• 文件: src/view/pet/
  • PetListView.vue — 宠物列表
  • PetCreateView.vue — 新增宠物
  • PetDetailView.vue — 宠物详情（含疫苗/驱虫记录）
  • PetEditView.vue — 编辑宠物
• 参考: uiDesign.md §7.5

---

阶段二：P1 — 商家必备

任务 2.1：商家后台 — 订单审核

• 文件: src/view/admin/
  • AdminOrderListView.vue — 订单审核列表（表格+筛选+审核/处理取消对话框）
  • AdminOrderDetailView.vue — 订单审核详情
• 参考: uiDesign.md §7.7.1 ~ §7.7.2

任务 2.2：商家后台 — 房态管理

• 文件: src/view/admin/AdminRoomCalendarView.vue
• 内容: 房型选择 + 月份选择 + 日历视图（引用 RoomCalendar 组件）
• 参考: uiDesign.md §7.7.3

任务 2.3：商家后台 — 排班管理

• 文件: src/view/admin/AdminScheduleListView.vue
• 内容: 月份筛选 + 排班表格 + 新增弹窗 + 删除
• 参考: uiDesign.md §7.7.4

任务 2.4：商家后台 — 套餐配置

• 文件: src/view/admin/
  • AdminPackageListView.vue — 套餐列表
  • AdminPackageCreateView.vue — 新增套餐
  • AdminPackageEditView.vue — 编辑套餐
• 参考: uiDesign.md §7.7.5

---

阶段三：P2 — 用户信息

任务 3.1：个人中心模块

• 文件: src/view/profile/
  • ProfileView.vue — 个人信息展示
  • ProfileEditView.vue — 修改个人资料
  • PasswordEditView.vue — 修改密码
• 参考: uiDesign.md §7.6

任务 3.2：商家后台 — 用户详情

• 文件: src/view/admin/AdminUserDetailView.vue
• 内容: 用户信息 + 该用户的宠物档案列表
• 参考: uiDesign.md §7.7.7

---

阶段四：完善与优化

任务 4.1：布局完善

• 梳理 UserLayout 导航菜单项（添加订单/宠物/个人中心入口）
• 完善 AdminLayout 侧边栏菜单项
• 响应式适配

任务 4.2：导航守卫增强

• 添加普通页面登录校验（非 admin 页面也需登录才能访问预约/订单/宠物等功能）
• 参考: uiDesign.md §3.2

任务 4.3：主题色统一

• 将 #e34889 主题色应用到所有页面
• 统一按钮、输入框、卡片样式风格
• 参考: uiDesign.md §10

任务 4.4：新建 Store

• useAppointmentStore — 预约流程状态管理
• usePetStore — 宠物列表缓存
• 参考: uiDesign.md §5.3

---

执行顺序建议

阶段一 (P0) → 阶段二 (P1) → 阶段三 (P2) → 阶段四 (优化)

每个阶段内部按任务编号顺序执行，但同一阶段内的独立任务可并行开发。

---

后端设计变更（需知晓）

变更项	原名称	现名称	影响
Entity 类名	Package	ServicePackage	不影响 API 端点 /api/packages/**
DTO 包路径	dto/package/	dto/servicePackage/	Orval 生成的 schema 名称可能含 ServicePackage
VO 包路径	vo/package/	vo/servicePackage/	同上

以上变更不影响前端开发的 API 调用和类型定义。API 端点、请求/响应 JSON 结构均保持不变。