Chengdong Zhang
0d0e10b97b
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
2.3 KiB
MODIFIED Requirements
Requirement: B2B2C mall-style PC storefront shell
The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The header SHALL remain fully visible while scrolling; no part of the shell SHALL auto-hide based on scroll position. The category mega-menu SHALL appear as a hover dropdown under the navigation "All Categories" entry on every page except the home page, where it is instead pinned in the hero row. The visual language SHALL use #ca151e for brand/price/active states, #f5f5f5 section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use the shared Tailwind theme and @vmall/ui primitives plus Nuxt-native semantic components, SHALL NOT depend on Element Plus, and SHALL NOT expose a theme-accent switcher.
Scenario: shopper opens any mall page
- WHEN a shopper navigates to a buyer-facing route
- THEN the shared desktop shell wraps the route content and its nav/search/cart controls are usable
Scenario: header persists while scrolling
- WHEN a shopper scrolls any mall page
- THEN the logo/search/cart header bar remains visible and is never collapsed or hidden by scroll position
Scenario: hover categories on a non-home page
- WHEN a shopper hovers "All Categories" in the navigation on a page other than
/ - THEN the category mega-menu dropdown appears below the navigation and hides again on mouse leave
Scenario: mall has no accent switcher
- WHEN a shopper inspects the mall shell
- THEN there is no control to change brand accent and prices/active states remain
#ca151e
ADDED Requirements
Requirement: Shared design system on the storefront
Mall pages SHALL style layout with Tailwind utilities and shared primitives. Mall-only chrome (mega-menu, carousel crop, 1200px shell, product-card hover lift) MAY live in apps/mall components but MUST consume shared tokens, not a private global stylesheet.
Scenario: storefront uses shared tokens
- WHEN a shopper views the home page
- THEN brand red, the 1200px grid, and the 450px hero height come from the shared theme keys rather than
mall.css