inkreach-official-website/plans/feature/product-center-figma-implementation.md

Product Center Figma Restoration Implementation Plan

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

Goal: Restore Figma node 1124:1633 in the Nuxt product center while preserving real API-backed filtering, search, and pagination.

Architecture: Keep useProductCenter as the query/state boundary and restyle the existing focused Vue components. Add a small default-filter resolver so Figma's initial state is derived from backend names rather than IDs, then compose desktop and mobile layouts in the existing page.

Tech Stack: Nuxt 4, Vue 3 Composition API, TypeScript, CSS, Vitest, Vue Test Utils, Playwright/browser QA.

---

Task 1: Add Website Test Infrastructure

Files:

• Modify: apps/website/package.json

• Create: apps/website/vitest.config.ts

• Create: apps/website/test/setup.ts

• Add Vitest, Vue Test Utils, happy-dom, and a scoped test script.

• Configure Nuxt aliases and the Vue plugin for component tests.

• Run pnpm --filter @inkreach/website test --run and confirm the empty suite exits successfully.

Task 2: Resolve the Figma Default Filter State

Files:

• Modify: apps/website/app/composables/useProductCenter.ts

• Create: apps/website/test/useProductCenter.test.ts

• Write failing tests for resolving 女式服装, T恤, 包邮, and 烫画 by display name while tolerating missing entries.

• Run the focused test and confirm it fails because the resolver does not exist.

• Implement and export a pure name-based resolver, then apply its result once after categories and tags load.

• Run the focused test and confirm it passes without hard-coded backend IDs.

Task 3: Restore Sidebar and Filter Controls

Files:

• Modify: apps/website/app/components/product/ProductSidebar.vue

• Modify: apps/website/app/components/product/ProductCountryFilter.vue

• Modify: apps/website/app/components/product/ProductTagFilter.vue

• Modify: apps/website/app/components/product/ProductFilterBar.vue

• Create: apps/website/test/product-filters.test.ts

• Write failing component tests for category selection, country selection, dropdown selection, tag removal, and enter/button search submission.

• Run the focused tests and verify the missing Figma interactions or markup cause failure.

• Implement the 240px category tree, country pills, filter pills, selected chips, and 220px search control using semantic buttons and inputs.

• Add mobile drawer-compatible props and events without duplicating sidebar content.

• Run focused tests and confirm all filter events pass.

Task 4: Restore Product Cards and Grid

Files:

• Modify: apps/website/app/components/product/ProductCard.vue

• Modify: apps/website/app/components/product/ProductCardSkeleton.vue

• Modify: apps/website/app/components/product/ProductGrid.vue

• Create: apps/website/test/product-grid.test.ts

• Write failing tests for image/name/tag/country/price rendering and loading/empty states.

• Run the focused tests and confirm Figma card structure expectations fail.

• Implement 270 x 382 desktop cards with 270px media, 18px title, grouped tag colors, and Figma price typography.

• Implement the four/three/two/one-column responsive grid and stable skeleton/empty layouts.

• Run focused tests and confirm all card and grid states pass.

Task 5: Restore Pagination

Files:

• Modify: apps/website/app/components/product/ProductPagination.vue

• Create: apps/website/test/product-pagination.test.ts

• Write failing tests for total text, visible page tokens, previous/next, page-size selection, and page jump.

• Run the focused test and verify the expected Figma pagination controls fail.

• Implement the compact 32px pagination controls with responsive wrapping and real emitted values.

• Run focused tests and confirm pagination behavior passes.

Task 6: Compose the Restored Page

Files:

• Modify: apps/website/app/pages/product-center.vue

• Modify: apps/website/app/components/AppHeader.vue

• Create: apps/website/test/product-center-page.test.ts

• Write a failing page-level test for Figma section order, default-state initialization, sidebar drawer trigger, and clearing filters.

• Run the focused test and confirm the current layout fails.

• Compose the 80px header, fixed-width desktop sidebar, 1200px content region, filter rows, four-column grid, ad capsule, and pagination.

• Add the mobile category drawer with backdrop, close button, escape handling, and body-scroll-safe layout.

• Run the page test and full website test suite.

Task 7: Documentation and Structural References

Files:

• Modify: docs/references/structs.md

• Create: docs/references/product-center.md

• Create: skills/inkreach-official-website/SKILL.md

• Document the product center route, real-data filters, default state, responsive behavior, and component responsibilities.

• Update the structure reference with all created and modified website modules.

• Add the agent-facing usage workflow and verification commands.

Task 8: Verification and Visual Comparison

Files:

• Modify only files required by issues found during verification.

• Run pnpm --filter @inkreach/website test --run and confirm zero failures.

• Run pnpm --filter @inkreach/website build and confirm a successful Nuxt production build.

• Start the website dev server on an available port.

• Capture /product-center at 1440px desktop, tablet, and mobile widths with browser automation.

• Compare desktop geometry against Figma node 1124:1633; correct visible spacing, sizing, overflow, and overlap defects.

• Re-run tests and build after visual corrections.