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
2.4 KiB
2.4 KiB
1. Tooling and tokens
- 1.1 Add Tailwind v4 and
@tailwindcss/viteto mall, shop-admin, and platform admin; wire the Vite plugin in eachnuxt.config.ts - 1.2 Add
packages/shared/src/theme.csswith@themekeys (primary#ca151e, hover, soft, radius, type,max-w-mall1200px,h-hero450px) andhtml[data-accent]maps forred|blue|teal|violet - 1.3 Export
./theme.cssfrom@vmall/shared; load it in all three apps while still loadingui.css/mall.css
2. @vmall/ui kit
- 2.1 Scaffold
packages/ui(@vmall/ui) in the pnpm workspace with Vue peer deps and exports - 2.2 Implement
VBtn,VBadge,VField/VInput,VCard/VPanel,VTable,VPageon shared tokens - 2.3 Implement
useAccent()(read/writelocalStorage, setdocument.documentElement.dataset.accent, invalid →red) and an accent swatch control - 2.4 Add the kit as a dependency of the three Nuxt apps and transpile it if needed
3. Platform admin
- 3.1 Convert
apps/adminshell and pages to kit + Tailwind utilities; add the accent swatch to the authenticated header - 3.2 Remove admin
<style scoped>blocks - 3.3
pnpm --filter @vmall/admin buildgreen; browser-check accent switch + reload persistence
4. Shop-admin
- 4.1 Convert
apps/shop-adminshell and pages the same way; add the accent swatch - 4.2 Remove shop-admin
<style scoped>blocks - 4.3
pnpm --filter @vmall/shop-admin buildgreen; browser-check accent switch + reload persistence
5. Mall storefront
- 5.1 Lock mall to
data-accent="red"at boot; do not render the swatch - 5.2 Convert mall shell (utility bar, header, dark nav, mega-menu, 1200px grid, footer) to tokens/utilities/kit
- 5.3 Convert mall pages (home hero/sidebar/carousel last-but-one;
goods/[id], integral, store last) - 5.4 Remove all mall
<style scoped>and stop loadingmall.css
6. Cut over and docs
- 6.1 Delete
packages/shared/src/ui.cssand the./ui.cssexport; pointAGENTS.md/ OpenSpec config attheme.cssand@vmall/ui - 6.2 Confirm no
<style scoped>remains underapps/mall,apps/shop-admin,apps/admin - 6.3
pnpm --filter @vmall/mall buildplus admin and shop-admin builds all green - 6.4 Browser pass: mall shell, home hero/sidebar, search grid, product detail, cart/checkout chrome; both consoles on default red and after a preset change