feat(mall): pin home category menu beside hero carousel
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).
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
# Proposal
|
||||
|
||||
## Why
|
||||
|
||||
The mall home page shows the category menu as a hover dropdown that auto-hides once the shopper scrolls 200px, and the hero carousel spans the full 1200px grid. Referencing tigshop's B2B2C storefront, the category tree should be a permanent left rail beside the banner so shoppers always see the catalog structure without hovering or scrolling back up. Additionally, the header's scroll-collapse hides the logo/search/cart bar on scroll, which hurts usability.
|
||||
|
||||
## What Changes
|
||||
|
||||
- Home page hero becomes a flex row: a pinned 240px category sidebar (reusing `ShellCategoryMenu`) left of the carousel; both are 450px tall and in-flow, not overlaid.
|
||||
- Carousel narrows from 1200px to ~950px; banner images (1200×450) are center-cropped left/right at fixed 450px height.
|
||||
- Hovering a top-level category in the pinned sidebar expands the white mega-menu panel to the right, overlaying the carousel (same content as today's flyout).
|
||||
- Non-home pages keep the hover dropdown under the nav "全部商品分类" entry, unchanged.
|
||||
- **BREAKING** (visual): the header no longer auto-hides on scroll — the `collapsed`/`scrollY > 200` logic is removed entirely, so the logo/search/cart bar and category menu never auto-hide.
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
|
||||
(none)
|
||||
|
||||
### Modified Capabilities
|
||||
|
||||
- `frontend-mall`: the "Mock PC home page" requirement gains a pinned category sidebar beside the cropped carousel; the "B2B2C mall-style PC storefront shell" requirement changes the category mega-menu to hover-only on non-home pages and removes scroll-based header auto-hide.
|
||||
|
||||
## Non-goals
|
||||
|
||||
- No changes to mock category data, banner assets, or the search/category filtering logic.
|
||||
- No changes to apps/shop-admin, apps/admin, the shared package, or the backend.
|
||||
- No right-side user rail, no extra promo tiles in the hero (options B/C/D from the visual proposal were rejected; see `docs/visual-proposal/home-hero-options.html`).
|
||||
Reference in New Issue
Block a user