Chengdong Zhang
21e99bb52b
- Mock adapter implementing @vmall/shared ApiClient (localStorage-persisted cart/orders/invoices), runtime switch via mockApi flag (default on) - Fixed bilingual mock catalog: 3-level categories, 24 products w/ SKUs, stores, brands, banners, floors, seckill/collective/integral, comments, coupons, addresses, seeded orders/shipments/invoices - B2B2C mall shell: top bar, logo/search/cart header, dark nav + category mega-menu, value-prop footer, back-to-top; 1200px grid, #ca151e theme - UI primitives replacing element-plus: carousel, pagination, breadcrumb, qty stepper, rating stars, modal, tabs, step bar, product card - Pages: home floors, search (filters/sort/paging), goods detail (SKU picker, store rail, review tabs), cart -> checkout -> pay -> success, auth pages, user center (dashboard/orders/addresses/favorites/coupons/ invoices), stores, seckill, collective, integral - i18n split into per-domain locale modules (en+zh) - OpenSpec change mall-pc-storefront-replica archived; all specs green
28 lines
2.9 KiB
Markdown
28 lines
2.9 KiB
Markdown
# 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).
|