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.
This commit is contained in:
2026-09-17 14:23:18 +00:00
parent f24dfb6f4e
commit 44466e5e88
5 changed files with 19 additions and 3 deletions
@@ -0,0 +1,20 @@
# Tasks
## 1. CategoryMenu pinned mode
- [x] 1.1 Add a `pinned` boolean prop to `apps/mall/components/shell/CategoryMenu.vue`; when `pinned` is true, render `.catmenu` in-flow (`position: relative; top: auto; width: 240px`) instead of the absolute 960px dropdown, and keep the default (dropdown) rendering unchanged for the header use
- [x] 1.2 In pinned mode, keep the `.lvl1` sidebar at 240px wide and 450px tall, and reposition the `.sub` flyout as `position: absolute; left: 240px; top: 0; width: ~700px; height: 450px` so it overlays the carousel area to the right; keep existing hover state, links, and i18n untouched
## 2. Home hero row
- [x] 2.1 In `apps/mall/pages/index.vue`, change the `.hero` block to a flex row: `<ShellCategoryMenu pinned />` followed by `UiCarousel`; fix the row height at 450px so the sidebar and carousel align
- [x] 2.2 Ensure banner images center-crop horizontally at the new ~950px carousel width (fixed 450px height, `object-fit: cover` — verify `UiCarousel` already applies this, adjust if not); do not modify the mock SVG assets
## 3. Header cleanup
- [x] 3.1 In `apps/mall/components/shell/SiteHeader.vue`, remove the `collapsed` ref, the scroll listener, and the `v-show="!collapsed"` on `.hdr-top`; reduce `showMenu` to `menuOpen && !isHome` so the header mega-menu is hover-only and suppressed on the home page, where the category menu is pinned in the hero row instead (per `specs/frontend-mall/spec.md`; decision confirmed during apply)
## 4. Verification
- [x] 4.1 Run `pnpm --filter @vmall/mall build` and confirm it passes
- [x] 4.2 Start the mall dev server and verify in a real browser: home shows the pinned sidebar left of the cropped carousel with no hover; scrolling past 200px keeps both the header and sidebar visible; hovering a top-level category expands the panel over the carousel; a non-home page (e.g. `/search`) shows the hover dropdown and no pinned sidebar