# 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.