# Proposal: mall-pc-storefront-replica

## Why
The current mall is a bare API-wired storefront (plain grid, minimal chrome). We want a real PC mall experience modeled on a classic open-source B2B2C buyer mall (Vue2 + element-plus, outdated): its layout, components and visual language — but rebuilt in our Nuxt 3 stack. The backend assortment/marketing/user-center endpoints for this experience do not exist yet, so the MVP serves everything from fixed mock data behind a mock API adapter, keeping the `$api` call shape so pages can later switch back to the live API without rewrites.

## What changes
- `apps/mall` is rebuilt as a full PC storefront replicating a classic B2B2C buyer mall: fixed top bar + header (logo/search/cart badge) + dark nav with category mega-menu + footer; 1200px container, `#ca151e` brand red, card/floor visual language (see `design-reference.md`).
- Mock layer: `apps/mall/mock/` provides (a) a `createMockApi()` adapter implementing the existing `@vmall/shared` API client surface with fixed data, selected via `runtimeConfig.public.mockApi` (default `true`), and (b) a mall-local mock content module for surfaces the real API has no counterpart for (banners, home floors, brands, seckill sessions, collectives, stores, comments, coupons, addresses, user dashboard stats).
- Pages (all mock-backed):
  - Home `/`: hero carousel, quick-link/promo strip, category product floors.
  - Goods list `/search`: breadcrumb, category/brand/sort filter block, 5-col product cards, pagination.
  - Goods detail `/goods/[id]`: gallery + zoom, SKU/attr picker, quantity, price/market price, coupons/activity strip, store card + sales rail, tabs (detail/comments/after-sale).
  - Cart `/cart`, checkout flow `/checkout` → `/checkout/pay` → `/checkout/success` with 4-step bar, address selection, mock payment.
  - Auth: `/login`, `/register`, `/forgot-password` (right-floating white panel over banner background).
  - User center `/user/**`: 234px left menu shell; dashboard, orders list/detail, addresses, favorites, coupons, invoices.
  - Stores: `/stores` directory, `/stores/[id]` store home.
  - Marketing: `/seckill` (timed sessions + countdown), `/collective`, `/integral` (points mall home).
- Element Plus widgets are NOT ported; plain Nuxt equivalents are built (carousel, pagination, tabs, checkbox, dialog, empty state, back-to-top, rating stars).
- All UI copy stays `$t()`-driven (en/zh via `locales-extra.ts`); mock content fields keep the `{"en","zh"}` JSONB shape; money stays integer minor units through `formatMoney`.

## Non-goals
- No backend changes; no changes to `@vmall/shared` contract, shop-admin, or admin apps.
- No SEO/SSR tuning, no real payment, no chat/customer-service, no distribution/cash/integral-order subsystems beyond display mocks.
- No element-plus or Tailwind introduction; styling is scoped CSS in the mall app.

## Capabilities
- `frontend-mall`: rebuilt PC storefront experience (mock-backed MVP).