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
2.9 KiB
2.9 KiB
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/mallis 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,#ca151ebrand red, card/floor visual language (seedesign-reference.md).- Mock layer:
apps/mall/mock/provides (a) acreateMockApi()adapter implementing the existing@vmall/sharedAPI client surface with fixed data, selected viaruntimeConfig.public.mockApi(defaulttrue), 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/successwith 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:
/storesdirectory,/stores/[id]store home. - Marketing:
/seckill(timed sessions + countdown),/collective,/integral(points mall home).
- 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 vialocales-extra.ts); mock content fields keep the{"en","zh"}JSONB shape; money stays integer minor units throughformatMoney.
Non-goals
- No backend changes; no changes to
@vmall/sharedcontract, 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).