# 下一步开发任务计划

基于 `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 双端表现