PetServiceManagementSystemUI/nextWork.md

下一步开发任务计划

基于 detailDesign.md 与当前项目完整实现状态的对比分析，按优先级规划开发任务。

---

当前已实现状态

模块	文件	状态
类型定义	src/type/index.ts	已完善 — Pet, Package, BoardingRoom, RoomStatus, Appointment, Schedule 完整
路由配置	src/router/index.ts	已完善 — 用户侧 13 条路由 + 管理侧 10 条路由，含导航守卫
布局组件	UserLayout.vue, AdminLayout.vue	已完善 — 导航菜单、用户下拉、侧边栏展开/收起
API 控制器	src/api/ (13 个文件)	已完善 — Orval 生成，覆盖全部端点
Pinia Store	4 个 store	已完善 — user, meta, pet, appointment
公共组件	RoomCalendar, PaymentDialog, PetSelector	已完善
用户页面	BookingView, BoardingBookingView, GroomingBookingView	已实现 — 4 步 Stepper, API 集成, 支付弹窗
用户订单	OrderListView, OrderDetailView	已实现 — Tab 筛选, 支付/取消功能
宠物档案	PetListView, PetCreateView, PetDetailView, PetEditView	已实现 — CRUD, 疫苗/驱虫记录管理
个人中心	ProfileView, ProfileEditView, PasswordEditView	已实现 — 资料展示, 昵称修改, 密码修改
后台订单	AdminOrderListView, AdminOrderDetailView	已实现 — 审核/取消弹窗
后台房态	AdminRoomCalendarView	已实现 — 房型切换 + 日历 + 状态切换
后台排班	AdminScheduleListView	已实现 — CRUD
后台套餐	AdminPackageListView, CreateView, EditView	已实现 — CRUD
后台用户	AdminUserDetailView	已实现 — 用户信息 + 宠物列表
登录页面	LoginView	已实现 — Tab 切换, 表单校验, 毛玻璃卡片
构建	npm run build	通过 — vue-tsc + vite build 无错误

---

待完成任务清单

阶段一：P0 — 缺陷修复（高优先级）

任务 1.1：RoomCalendar 月份切换功能实现

• 文件: src/components/RoomCalendar.vue
• 问题: prevMonth() / nextMonth() 为空实现（标记 TODO），无法切换月份
• 改动:
  • 将 currentYear, currentMonth 从 const 改为 computed（派生自 props.month）
  • prevMonth() / nextMonth() 中 emit('month-change', newMonth)
  • 父组件监听 month-change 重新请求房态数据
• 参考: detailDesign.md §5.1

任务 1.2：PaymentDialog visible 双向绑定修复

• 文件: src/components/PaymentDialog.vue
• 问题: visible prop 被复制到本地 ref( props.visible )，但不会随父组件更新而同步变化（v-model:visible 可能失效）
• 改动: 使用 computed getter/setter 或 watch 同步，移除本地 const visible = ref(props.visible)，直接使用 computed 绑定
• 参考: detailDesign.md §5.2

任务 1.3：OrderDetailView 取消原因弹窗

• 文件: src/view/order/OrderDetailView.vue
• 问题: handleCancel 中取消原因硬编码为 { reason: '用户申请取消' }，用户无法输入
• 改动: 使用 ElMessageBox.prompt 替代 ElMessageBox.confirm，收集用户输入的取消原因后提交 API
• 参考: detailDesign.md §6.4.2 & §9.3

任务 1.4：OrderListView 状态标签国际化

• 文件: src/view/order/OrderListView.vue
• 问题: 状态标签显示英文（PENDING, CONFIRMED 等），detailDesign 要求显示中文（待审核、已确认）
• 改动: 添加 statusLabel() 映射函数，el-tag 内显示中文 + 对应 type 颜色
• 参考: detailDesign.md §6.4.1

任务 1.5：AdminRoomCalendarView 术语修正

• 文件: src/view/admin/AdminRoomCalendarView.vue
• 问题: 模版中 h1 标题为「房态管理」，detailDesign 要求使用「宠物房间管理」术语
• 改动: 页面标题改为「宠物房间管理」，保持菜单项 meta.title 仍为「房态管理」
• 参考: detailDesign.md §6.7.2

阶段二：P1 — 表单校验增强（高优先级）

任务 2.1：PetCreateView / PetEditView 添加表单校验

• 文件: src/view/pet/PetCreateView.vue, src/view/pet/PetEditView.vue
• 问题: 两个表单均无 el-form 的 :rules 校验，用户可提交空数据
• 改动: 添加 FormRules，至少 name 为必填，weight > 0，提交前调用 formRef.validate()
• 参考: detailDesign.md §6.5.3

任务 2.2：ProfileEditView 添加表单校验

• 文件: src/view/profile/ProfileEditView.vue
• 问题: 昵称输入无必填校验，可提交空值
• 改动: 添加 :rules 必填校验 + 最小长度 2
• 参考: detailDesign.md §6.6

任务 2.3：PasswordEditView 添加表单校验规则

• 文件: src/view/profile/PasswordEditView.vue
• 问题: 使用手动 if 判断密码一致性而非表单校验规则，缺少密码长度校验
• 改动: 添加 FormRules（原密码必填、新密码 min:4、确认密码自定义校验器）
• 参考: detailDesign.md §6.6

阶段三：P2 — 响应式适配（中优先级）

任务 3.1：布局组件响应式

• 文件: src/layout/UserLayout.vue, src/layout/AdminLayout.vue
• 问题: 当前无移动端媒体查询，小屏设备导航/侧边栏溢出
• 改动:
  • UserLayout: < 768px 时 TopNav 折叠为汉堡菜单
  • AdminLayout: < 768px 时侧边栏自动收起，菜单变为 Drawer
• 参考: AGENTS.md 响应式设计要求

任务 3.2：主要业务页面响应式

• 文件: 所有 view 文件（BookingView, OrderListView, PetListView, AdminOrderListView 等）
• 问题: 大多使用固定 max-width 和 flex 布局，小屏无适配
• 改动: 为每个页面添加 @media (max-width: 768px) 样式覆盖：
  • 表格在小屏切换为卡片布局
  • 多列 grid/flex 变为单列
  • el-steps 在小屏调整字号/间距

阶段四：P3 — 主题色统一（中优先级）

任务 4.1：LoginView 颜色主题化

• 文件: src/view/LoginView.vue
• 问题: 大量硬编码粉色色值（#db2777, #be185d, #831843），与 var(--el-color-primary) 不一致
• 改动: 将颜色引用替换为 CSS 变量 var(--el-color-primary) / var(--el-color-primary-light-*) / var(--el-color-primary-dark-2)
• 参考: detailDesign.md §1 主题色 #e34889

任务 4.2：style.css 按钮样式使用 CSS 变量

• 文件: src/style.css
• 问题: .el-button--primary 中硬编码了渐变颜色 linear-gradient(135deg, #db2777, #be185d)
• 改动: 使用 var(--el-color-primary) 和 var(--el-color-primary-dark-2) 构建渐变

阶段五：P4 — UI 完善与 Code Quality（低优先级）

任务 5.1：HomeView 品牌首页改造

• 文件: src/view/HomeView.vue
• 问题: 当前仅占位文字，detailDesign 要求品牌展示 + 服务入口卡片
• 改动: 实现完整品牌首页（logo + 品牌标语 + 寄养/洗护服务卡片 + 平台优势介绍区）
• 参考: detailDesign.md §6.2

任务 5.2：Axios 配置补充 withCredentials

• 文件: src/util/axios-instance.ts
• 问题: 缺少 withCredentials: true（detailDesign 要求自动携带 Cookie/JSESSIONID）
• 改动: 在 axios.create 配置中添加 withCredentials: true
• 参考: detailDesign.md §8.1

任务 5.3：BoardingBookingView 代码复用提取

• 文件: src/view/booking/BoardingBookingView.vue
• 问题: API 响应到内部类型的 map 逻辑（list4 / listRooms / list）分散在各视图重复
• 改动: 将重复的 map 逻辑抽象为工具函数或 composable
• 参考: 代码整洁性

任务 5.4：OrderListView 添加 CANCEL_REQUESTED Tab

• 文件: src/view/order/OrderListView.vue
• 问题: 设计文档订单状态包含 CANCEL_REQUESTED，但 Tab 中缺少该筛选
• 改动: 新增「取消申请」Tab

任务 5.5：chunk 体积优化

• 文件: vite.config.ts（需修改）
• 问题: 构建产物 index.js 1.15MB > 500KB 阈值
• 改动: 配置 build.rollupOptions.output.manualChunks 将 Element Plus / 三方库拆分

---

执行顺序建议

阶段一 (P0 缺陷修复) → 阶段二 (P1 表单校验) → 阶段三 (P2 响应式) → 阶段四 (P3 主题色) → 阶段五 (P4 完善)

并行开发建议

批次	任务	说明
第一批	1.1 + 1.2 + 1.3	互不影响，可同步进行
第二批	1.4 + 1.5 + 2.1 + 2.2 + 2.3	全部为独立文件修改
第三批	3.1 + 3.2	布局 + 多页面响应式
第四批	4.1 + 4.2 + 5.1	主题色 + 首页改造
第五批	5.2 + 5.3 + 5.4 + 5.5	工具函数 + 构建优化

---

每个阶段的提交建议

• 每个批次完成后运行 npm run build 确保无 TypeScript / 构建错误
• 每个任务粒度在 1-3 个文件改动，便于 Code Review
• 所有 CSS 改动后检查 PC / Mobile 双端表现