Chengdong Zhang
0d0e10b97b
- 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
32 lines
2.3 KiB
Markdown
32 lines
2.3 KiB
Markdown
# 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
|
|
|