Files
inkreach-official-website/plans/feature/product-center-backend-integration-feature.md
yeuimu 79fabd85f7 feat(product-center): implement Figma-designed UI, upload module, and website tests
- Redesign website homepage & product-center per Figma (fonts, logos, hero/footer/customer cases)
- Add API upload module (multer) with static serving for uploads/public assets
- Add OriginGood.delisted flag and SDS request retry logic
- Add admin ImageUpload component and goods import/upload flows
- Add vitest suite for website components and composables (32 tests)
- Add skills, docs, plans and PRODUCT.md
2026-08-20 14:32:03 +08:00

1.7 KiB

Product Center Backend Integration Implementation Plan

Goal: Make product-center countries, categories, tag filters, and their icons fully driven by backend configuration while matching the Figma assets.

Architecture: Store Figma-derived icons as versioned API static assets and update existing database records through an idempotent Prisma script. The website resolves backend-relative asset URLs against backendUrl and builds filter controls from backend tag-group membership rather than sort-order guesses or tag-name allowlists.

Tech Stack: NestJS, Prisma, PostgreSQL, Nuxt 4, Vue 3, Vitest, Jest.


Task 1: Backend Icon Assets and Configuration Script

  • Export country and top-level category icons from Figma into apps/api/public/product-center.
  • Serve committed API assets under /assets/.
  • Add an idempotent Prisma script that updates matching country/category icon fields.
  • Run the script against the configured database and verify public API values.

Task 2: Website Backend Asset Resolution

  • Add failing tests for absolute, data, and backend-relative icon URLs.
  • Implement URL resolution in the product-center data mapper.
  • Verify country and category components render API-provided icons.

Task 3: Backend-Driven Tag Groups

  • Add failing component tests using backend group IDs/names.
  • Pass tag groups into ProductTagFilter and derive logistics/process groups from backend metadata.
  • Remove sort-order and tag-name allowlist assumptions.

Task 4: End-to-End Verification

  • Run website and API tests/builds.
  • Verify public endpoints contain durable icon URLs.
  • Browser-test icons and filters on /product-center.