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
This commit is contained in:
Chengdong Zhang
@@ -2,9 +2,7 @@
|
||||
|
||||
## Purpose
|
||||
The platform console for managing users, shops and currencies.
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement: Platform user and shop management
|
||||
Platform admins SHALL assign user roles (with shop scope), create shops, and suspend/activate shops. Suspended shops' products MUST NOT be purchasable (enforced by API, reflected in UI).
|
||||
|
||||
@@ -29,3 +27,18 @@ Platform admins SHALL manage points products and inspect and fulfill redemption
|
||||
#### Scenario: points mall appears in admin navigation
|
||||
- **WHEN** an authenticated platform admin opens the admin console
|
||||
- **THEN** points-product and redemption-order management are reachable from the console nav
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
## Purpose
|
||||
The buyer-facing storefront: shell, home page, discovery, shopping and transaction flows, and the buyer center.
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement: Localized storefront
|
||||
The mall SHALL render every UI string and all catalog/store/marketing mock content in en or zh from one switcher, defaulting to en. Switching locale SHALL update the desktop shell and current page without a full reload.
|
||||
|
||||
@@ -31,7 +29,7 @@ A shopper SHALL be able to browse, view detail, add to cart, checkout with a shi
|
||||
- **THEN** they are sent to sign in and, once signed in, returned to that product page
|
||||
|
||||
### 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 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 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
|
||||
@@ -45,6 +43,10 @@ The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC
|
||||
- **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`
|
||||
|
||||
### Requirement: Mock API adapter
|
||||
The mall SHALL select its API adapter per domain, so one domain can be served by the live backend while the others stay on fixed data. The mall SHALL still ship a fixed-data adapter implementing the whole `@vmall/shared` API client surface, and the live/fixed choice SHALL be configurable per domain without changing page call sites. The fixed-data adapter SHALL remain able to serve every domain when the live backend is unavailable.
|
||||
|
||||
@@ -230,3 +232,11 @@ The mall SHALL use the shared selected API adapter for product and shop favorite
|
||||
#### Scenario: fixed adapter remains functional
|
||||
- **WHEN** the favorites domain is configured to fixed data
|
||||
- **THEN** detail controls and buyer-center favorite flows behave deterministically through the same shared client methods
|
||||
|
||||
### 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`
|
||||
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
## Purpose
|
||||
The merchant console for managing a shop's products and fulfilling its orders.
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement: Merchant product management
|
||||
Shop users SHALL manage only their own shop's products: create/edit bilingual content, manage SKUs, publish/unpublish with immediate effect on the storefront.
|
||||
|
||||
@@ -51,3 +49,18 @@ Shop users SHALL manage only their shop's group-buying activities in shop-admin,
|
||||
#### Scenario: group buying appears in shop navigation
|
||||
- **WHEN** an authenticated shop user opens shop-admin
|
||||
- **THEN** a group-buying management entry is reachable without leaving the shop-scoped console
|
||||
|
||||
### 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,31 @@
|
||||
# frontend-ui Specification
|
||||
|
||||
## Purpose
|
||||
Shared Tailwind v4 design system for the three Nuxt apps: one token stylesheet (`@vmall/shared/theme.css`, default brand `#ca151e`), the `@vmall/ui` Vue primitive kit, and persisted accent presets (`red | blue | teal | violet`) for the shop-admin and platform-admin consoles. The public mall stays locked to the red accent.
|
||||
## 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
|
||||
|
||||
Reference in New Issue
Block a user