huangting/th-hotel-simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
038fdc3c8d4c51beb4cc7559e5f81ed04e1964c8
th-hotel-simple/docs/superpowers/plans/2026-07-19-m002-v4-catalog-admin-frontend-cp1.md
andy f40f90553f 实现V4目录管理后台前端
2026-07-20 00:09:58 +07:00

5.2 KiB
Raw Blame History

M002 V4 Catalog Admin Frontend CP1 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Implement the Reservation V4 catalog management frontend page under System Settings for Account, Room Type, and Rate Code catalogs.

Architecture: Extend the existing system admin module with typed admin catalog service functions, a guarded /system/reservation-catalogs route, and a single focused Vue page that switches between the three catalog types. The page follows existing system admin list/form/pagination patterns and never bypasses backend permission, hotel, or catalog validation.

Tech Stack: Vue 3.5, TypeScript, Vue Router, Pinia auth store, Vue I18n, Vitest, existing httpClient and system admin CSS.

Global Constraints

  • API calls must stay in client/src/services/systemAdminService.ts.
  • Types must stay in client/src/types/systemAdmin.ts.
  • Route and tab entry require RESERVATION_CATALOG_MANAGE.
  • Account create uses default market_code=LEISURE and source_code=TRAVEL_AGENT.
  • List filters are hotel_id, keyword, status, page_num, page_size.
  • No backend changes, no PMS / OPERA / OHIP integration, no V4 task card behavior changes.
  • Do not submit secrets, demo keys, build artifacts, IDE files, or unrelated working tree changes.

Task 1: Service And Route Contract

Files:

  • Modify: client/src/types/auth.ts
  • Modify: client/src/types/systemAdmin.ts
  • Modify: client/src/services/systemAdminService.ts
  • Modify: client/src/router/index.ts
  • Test: client/src/tests/systemAdminService.spec.ts
  • Test: client/src/tests/reservationRouter.spec.ts

Interfaces:

  • Produces: fetchAdminReservationCatalogAccounts, createAdminReservationCatalogAccount, updateAdminReservationCatalogAccountStatus.

  • Produces: fetchAdminReservationCatalogRoomTypes, createAdminReservationCatalogRoomType, updateAdminReservationCatalogRoomTypeStatus.

  • Produces: fetchAdminReservationCatalogRateCodes, createAdminReservationCatalogRateCode, updateAdminReservationCatalogRateCodeStatus.

  • Step 1: Write failing service tests

await fetchAdminReservationCatalogAccounts({ hotel_id: 'HOTEL-TEST', keyword: 'qbd', status: 'ACTIVE', page_num: 2, page_size: 10 })
await createAdminReservationCatalogAccount({ hotel_id: 'HOTEL-TEST', account_code: 'ACME', account_name: 'Acme', market_code: 'LEISURE', source_code: 'TRAVEL_AGENT' })
await updateAdminReservationCatalogAccountStatus('10001', { status: 'DISABLED' })
  • Step 2: Write failing router tests
expect(router.resolve('/system/reservation-catalogs').name).toBe('system-reservation-catalogs')
expect(router.resolve('/system/reservation-catalogs').meta.permission).toBe('RESERVATION_CATALOG_MANAGE')
  • Step 3: Implement types, services, and route

Add the catalog request/response interfaces and route metadata, using only backend paths documented in M002-v4-real-catalog-lookup-api-design.md.

  • Step 4: Verify task tests

Run: CI=true pnpm --dir client test -- systemAdminService.spec.ts reservationRouter.spec.ts

Task 2: Catalog Management Page

Files:

  • Create: client/src/views/system/SystemReservationCatalogsView.vue
  • Modify: client/src/views/system/SystemAdminLayoutView.vue
  • Modify: client/src/i18n/locales/zh-CN.ts
  • Modify: client/src/i18n/locales/en-US.ts
  • Modify: client/src/i18n/locales/th-TH.ts
  • Test: client/src/tests/systemReservationCatalogsView.spec.ts

Interfaces:

  • Consumes service functions from Task 1.

  • Produces a page that lists, creates, enables, and disables Account, Room Type, and Rate Code records.

  • Step 1: Write failing page tests

expect(wrapper.text()).toContain('Reservation V4 目录管理')
expect(fetchAdminReservationCatalogAccounts).toHaveBeenCalledWith(expect.objectContaining({ hotel_id: 'HOTEL-TEST' }))
await wrapper.find('form').trigger('submit.prevent')
expect(createAdminReservationCatalogAccount).toHaveBeenCalledWith(expect.objectContaining({ market_code: 'LEISURE', source_code: 'TRAVEL_AGENT' }))
  • Step 2: Implement page UI

Use existing system admin sections: filters, create form, catalog table, pagination, and row status action buttons.

  • Step 3: Add i18n keys

Add nav.systemReservationCatalogs and systemAdmin.catalogs.* to zh-CN, en-US, and th-TH.

  • Step 4: Verify page tests

Run: CI=true pnpm --dir client test -- systemReservationCatalogsView.spec.ts

Task 3: Verification, Review, And Commit

Files:

  • Review all changed frontend files.

  • Commit only files related to this frontend CP1.

  • Step 1: Run checks

Run:

CI=true pnpm --dir client lint
CI=true pnpm --dir client typecheck
CI=true pnpm --dir client test
CI=true pnpm --dir client build
  • Step 2: Code review

Review for endpoint paths, permission gates, hotel filter behavior, idempotent status actions, stale/disabled catalog explanation, and accidental staging of unrelated files.

  • Step 3: Commit
git add <only M002 V4 catalog admin frontend files>
git commit -m "实现V4目录管理后台前端"