inkreachhub/inkreach-official-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
08201f18a4a04c366485b579a2b86171ffc4b38a
inkreach-official-website/plans/feature/product-center-figma-implementation.md
T
yeuimu 6c61a4e871 feat(deploy): production deployment setup and fixes 
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma
  binaryTargets for openssl 3.0
- nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal
  cron, http->https redirect
- prisma: add origin_goods.delisted migration, sync missing schema
  (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz
- api: CORS wildcard reflection, helmet CORP cross-origin, price
  backfill in persistProductDetail, categoryIcon ancestor fallback,
  mediaByColor per-color gallery in public goods detail
- admin: /admin base path (vite + router)
- import-data.mjs: udt_name casting, serial sequence advance fix
2026-08-26 14:23:09 +08:00

5.8 KiB
Raw Blame History

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.

Reference in New Issue View Git Blame Copy Permalink