feat(ui): adopt Tailwind v4 design system and archive change

- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
2026-09-22 18:22:50 +08:00
parent 4d2ee3b0bf
commit 0d0e10b97b
101 changed files with 2833 additions and 7207 deletions
@@ -0,0 +1,15 @@
+## ADDED Requirements
+
+### Requirement: Shared design system in the platform console
+The platform admin console SHALL use `@vmall/ui` primitives and `@vmall/shared` theme tokens for chrome (buttons, fields, cards, tables, page headers, nav). It MUST NOT depend on Element Plus or the removed `ui.css` stylesheet.
+
+#### Scenario: console chrome from the kit
+- **WHEN** an authenticated platform admin opens the dashboard
+- **THEN** primary actions and page chrome render through the shared kit with the current accent preset
+
+### Requirement: Accent preset switcher
+Platform admin SHALL expose the shared accent preset control (`red`, `blue`, `teal`, `violet`) in the authenticated shell header.
+
+#### Scenario: switcher visible
+- **WHEN** an authenticated platform admin opens the console
+- **THEN** they can select an accent preset without leaving the current page
@@ -0,0 +1,29 @@
+## MODIFIED Requirements
+
+### 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 the shared Tailwind theme and `@vmall/ui` primitives plus Nuxt-native semantic components, SHALL NOT depend on Element Plus, and SHALL NOT expose a theme-accent switcher.
+
+#### 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
+
+#### Scenario: mall has no accent switcher
+- **WHEN** a shopper inspects the mall shell
+- **THEN** there is no control to change brand accent and prices/active states remain `#ca151e`
+
+## ADDED Requirements
+
+### Requirement: Shared design system on the storefront
+Mall pages SHALL style layout with Tailwind utilities and shared primitives. Mall-only chrome (mega-menu, carousel crop, 1200px shell, product-card hover lift) MAY live in `apps/mall` components but MUST consume shared tokens, not a private global stylesheet.
+
+#### Scenario: storefront uses shared tokens
+- **WHEN** a shopper views the home page
+- **THEN** brand red, the 1200px grid, and the 450px hero height come from the shared theme keys rather than `mall.css`
@@ -0,0 +1,15 @@
+## ADDED Requirements
+
+### Requirement: Shared design system in the merchant console
+The shop-admin console SHALL use `@vmall/ui` primitives and `@vmall/shared` theme tokens for chrome (buttons, fields, cards, tables, page headers, nav). It MUST NOT depend on Element Plus or the removed `ui.css` stylesheet.
+
+#### Scenario: console chrome from the kit
+- **WHEN** an authenticated shop user opens shop-admin
+- **THEN** primary actions and page chrome render through the shared kit with the current accent preset
+
+### Requirement: Accent preset switcher
+Shop-admin SHALL expose the shared accent preset control (`red`, `blue`, `teal`, `violet`) in the authenticated shell header.
+
+#### Scenario: switcher visible
+- **WHEN** an authenticated shop user opens shop-admin
+- **THEN** they can select an accent preset without leaving the current page
@@ -0,0 +1,27 @@
+## ADDED Requirements
+
+### Requirement: Shared Tailwind design system
+The three Nuxt apps SHALL load one token stylesheet from `@vmall/shared` (`theme.css`) and SHALL compose repeating chrome from `@vmall/ui` primitives (`VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage`). They MUST NOT depend on Element Plus, MUST NOT keep `packages/shared/src/ui.css` or `apps/mall/assets/mall.css`, and MUST NOT use Vue `<style scoped>` for app chrome after the migration. Default brand/primary color SHALL be `#ca151e`.
+
+#### Scenario: apps share tokens
+- **WHEN** a developer opens mall, shop-admin, and platform admin with the default accent
+- **THEN** primary buttons, links, and active nav use `#ca151e` from the shared theme rather than per-app palettes
+
+#### Scenario: no legacy stylesheets
+- **WHEN** the migration is complete
+- **THEN** `@vmall/shared` exports `theme.css` (not `ui.css`) and the three apps have no remaining `<style scoped>` blocks for layout or chrome
+
+### Requirement: Console accent presets
+Shop-admin and platform admin SHALL let the signed-in operator pick an accent preset of `red`, `blue`, `teal`, or `violet`. The choice SHALL apply immediately to primary actions, links, and active navigation, SHALL persist in `localStorage` for that app origin, and SHALL restore on reload. An invalid stored value MUST fall back to `red`. The public mall MUST NOT expose this control and MUST remain on the red accent.
+
+#### Scenario: operator switches accent
+- **WHEN** a platform admin or shop user selects the blue preset in the console header
+- **THEN** primary buttons and active nav in that app render with the blue preset without a full page reload
+
+#### Scenario: accent survives reload
+- **WHEN** the operator reloads shop-admin or platform admin after choosing teal
+- **THEN** the console still uses the teal preset
+
+#### Scenario: mall stays red
+- **WHEN** a shopper uses the mall after an operator has changed a console accent
+- **THEN** the mall still uses `#ca151e` and shows no accent switcher