inkreachhub/inkreach-official-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1ef82c4c1458cff05268bc39152818b9107347f1
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

111 lines
5.8 KiB
Markdown
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