Files
vmall/openspec/changes/archive/2026-09-17-pin-home-category-menu/proposal.md
T
james 44466e5e88 docs(openspec): archive pin-home-category-menu
Move the completed change to
openspec/changes/archive/2026-09-17-pin-home-category-menu/ and merge its
delta into openspec/specs/frontend-mall/spec.md.

Modified requirements:
- B2B2C mall-style PC storefront shell: the header stays fully visible
  while scrolling (no scroll-based auto-hide), and the category mega-menu
  is a hover dropdown on every page except home, where it is pinned in
  the hero row. Adds the "header persists while scrolling" and "hover
  categories on a non-home page" scenarios.
- Mock PC home page: the hero row is a pinned 240px category sidebar plus
  a carousel filling the remainder, both 450px tall, with the mega-menu
  overlaying the carousel and banners center-cropped. Adds the "sidebar
  stays while scrolling" and "expand a category" scenarios.
2026-09-17 14:23:18 +00:00

1.9 KiB
Raw Blame History

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).