Files

T

Chengdong Zhang 0d0e10b97b 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

2.3 KiB

Raw Blame History

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.

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

2.3 KiB Raw Blame History