james
ee2f421709
Home hero becomes a 450px flex row with a pinned 240x450 category rail (ShellCategoryMenu `pinned` mode) left of the 960px center-cropped carousel; hovering a top-level category expands the mega-menu over the carousel. The header no longer collapses on scroll, and its category dropdown is now hover-only on non-home pages. OpenSpec change: openspec/changes/pin-home-category-menu BREAKING CHANGE: the header logo/search/cart bar no longer auto-hides past 200px of scroll, and the home page no longer shows the header category dropdown (it is pinned in the hero row instead).
2.9 KiB
Spec Delta
MODIFIED Requirements
Requirement: Mock PC home page
The mall home page SHALL render a hero row composed of a pinned 240px category sidebar on the left and a hero carousel filling the remainder of the 1200px grid, both 450px tall and occupying layout space (not overlaid). The sidebar SHALL list all top-level categories with up to three child links each; hovering a top-level category SHALL expand the mega-menu panel to the right over the carousel. Banner images SHALL render at fixed 450px height, center-cropped horizontally to the narrower carousel width. Below the hero, the page SHALL render a six-item quick-link strip with promotion tiles and bilingual product floors with a left advert and product-card grid.
Scenario: shopper lands on home
- WHEN
/loads in mock mode - THEN the category sidebar is visible to the left of the carousel without any hover or click, the carousel renders center-cropped banners at 450px height, and the quick links, promotions and every non-empty product floor render fixed mock content
Scenario: sidebar stays while scrolling
- WHEN a shopper scrolls the home page beyond 200px
- THEN the category sidebar remains rendered in the hero row and does not auto-hide
Scenario: expand a category
- WHEN a shopper hovers a top-level category in the pinned sidebar
- THEN the mega-menu panel expands to the right, overlaying the carousel with that category's child and grandchild links
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 Nuxt-native semantic components and SHALL NOT depend on Element Plus.
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