From 44466e5e88cf4e7bc2c7b297c6d24299b1fa2489 Mon Sep 17 00:00:00 2001 From: Zhang Chengdong Date: Thu, 17 Sep 2026 14:23:18 +0000 Subject: [PATCH] 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. --- .../.openspec.yaml | 0 .../proposal.md | 0 .../specs/frontend-mall/spec.md | 0 .../tasks.md | 0 openspec/specs/frontend-mall/spec.md | 22 ++++++++++++++++--- 5 files changed, 19 insertions(+), 3 deletions(-) rename openspec/changes/{pin-home-category-menu => archive/2026-09-17-pin-home-category-menu}/.openspec.yaml (100%) rename openspec/changes/{pin-home-category-menu => archive/2026-09-17-pin-home-category-menu}/proposal.md (100%) rename openspec/changes/{pin-home-category-menu => archive/2026-09-17-pin-home-category-menu}/specs/frontend-mall/spec.md (100%) rename openspec/changes/{pin-home-category-menu => archive/2026-09-17-pin-home-category-menu}/tasks.md (100%) diff --git a/openspec/changes/pin-home-category-menu/.openspec.yaml b/openspec/changes/archive/2026-09-17-pin-home-category-menu/.openspec.yaml similarity index 100% rename from openspec/changes/pin-home-category-menu/.openspec.yaml rename to openspec/changes/archive/2026-09-17-pin-home-category-menu/.openspec.yaml diff --git a/openspec/changes/pin-home-category-menu/proposal.md b/openspec/changes/archive/2026-09-17-pin-home-category-menu/proposal.md similarity index 100% rename from openspec/changes/pin-home-category-menu/proposal.md rename to openspec/changes/archive/2026-09-17-pin-home-category-menu/proposal.md diff --git a/openspec/changes/pin-home-category-menu/specs/frontend-mall/spec.md b/openspec/changes/archive/2026-09-17-pin-home-category-menu/specs/frontend-mall/spec.md similarity index 100% rename from openspec/changes/pin-home-category-menu/specs/frontend-mall/spec.md rename to openspec/changes/archive/2026-09-17-pin-home-category-menu/specs/frontend-mall/spec.md diff --git a/openspec/changes/pin-home-category-menu/tasks.md b/openspec/changes/archive/2026-09-17-pin-home-category-menu/tasks.md similarity index 100% rename from openspec/changes/pin-home-category-menu/tasks.md rename to openspec/changes/archive/2026-09-17-pin-home-category-menu/tasks.md diff --git a/openspec/specs/frontend-mall/spec.md b/openspec/specs/frontend-mall/spec.md index 9cd657a..6f0e61e 100644 --- a/openspec/specs/frontend-mall/spec.md +++ b/openspec/specs/frontend-mall/spec.md @@ -25,12 +25,20 @@ A shopper SHALL be able to browse, view detail, add to cart, checkout with a shi - **THEN** the resulting order appears in the buyer center and the cart is empty ### 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 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. +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 + ### Requirement: Mock API adapter The mall SHALL default to a fixed-data mock adapter that implements the existing `@vmall/shared` API client surface. The adapter SHALL support auth, catalog, currency conversion, cart mutation, checkout, order/payment/shipment state, and invoices without a backend. A runtime configuration switch SHALL select the live API client later without changing page call sites. @@ -39,11 +47,19 @@ The mall SHALL default to a fixed-data mock adapter that implements the existing - **THEN** browsing, cart, checkout, payment, orders and invoice pages return deterministic mock data and remain functional ### Requirement: Mock PC home page -The mall home page SHALL render a hero carousel, a six-item quick-link strip with promotion tiles, and bilingual product floors with a left advert and product-card grid. +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 carousel, quick links, promotions and every non-empty product floor render fixed mock content +- **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: Product discovery pages The mall SHALL provide `/search` with breadcrumb, category, brand and sort controls, a five-column desktop product grid, pagination and an empty state. It SHALL provide `/goods/[id]` with image gallery/zoom, bilingual name/subtitle, integer-minor-unit prices, attribute and SKU selection, stock-aware quantity, coupons/activity summary, store card, sales rail, and detail/comments/after-sale tabs.