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
39 lines
2.4 KiB
Markdown
39 lines
2.4 KiB
Markdown
## 1. Tooling and tokens
|
|
|
|
- [x] 1.1 Add Tailwind v4 and `@tailwindcss/vite` to mall, shop-admin, and platform admin; wire the Vite plugin in each `nuxt.config.ts`
|
|
- [x] 1.2 Add `packages/shared/src/theme.css` with `@theme` keys (primary `#ca151e`, hover, soft, radius, type, `max-w-mall` 1200px, `h-hero` 450px) and `html[data-accent]` maps for `red|blue|teal|violet`
|
|
- [x] 1.3 Export `./theme.css` from `@vmall/shared`; load it in all three apps while still loading `ui.css` / `mall.css`
|
|
|
|
## 2. `@vmall/ui` kit
|
|
|
|
- [x] 2.1 Scaffold `packages/ui` (`@vmall/ui`) in the pnpm workspace with Vue peer deps and exports
|
|
- [x] 2.2 Implement `VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage` on shared tokens
|
|
- [x] 2.3 Implement `useAccent()` (read/write `localStorage`, set `document.documentElement.dataset.accent`, invalid → `red`) and an accent swatch control
|
|
- [x] 2.4 Add the kit as a dependency of the three Nuxt apps and transpile it if needed
|
|
|
|
## 3. Platform admin
|
|
|
|
- [x] 3.1 Convert `apps/admin` shell and pages to kit + Tailwind utilities; add the accent swatch to the authenticated header
|
|
- [x] 3.2 Remove admin `<style scoped>` blocks
|
|
- [x] 3.3 `pnpm --filter @vmall/admin build` green; browser-check accent switch + reload persistence
|
|
|
|
## 4. Shop-admin
|
|
|
|
- [x] 4.1 Convert `apps/shop-admin` shell and pages the same way; add the accent swatch
|
|
- [x] 4.2 Remove shop-admin `<style scoped>` blocks
|
|
- [x] 4.3 `pnpm --filter @vmall/shop-admin build` green; browser-check accent switch + reload persistence
|
|
|
|
## 5. Mall storefront
|
|
|
|
- [x] 5.1 Lock mall to `data-accent="red"` at boot; do not render the swatch
|
|
- [x] 5.2 Convert mall shell (utility bar, header, dark nav, mega-menu, 1200px grid, footer) to tokens/utilities/kit
|
|
- [x] 5.3 Convert mall pages (home hero/sidebar/carousel last-but-one; `goods/[id]`, integral, store last)
|
|
- [x] 5.4 Remove all mall `<style scoped>` and stop loading `mall.css`
|
|
|
|
## 6. Cut over and docs
|
|
|
|
- [x] 6.1 Delete `packages/shared/src/ui.css` and the `./ui.css` export; point `AGENTS.md` / OpenSpec config at `theme.css` and `@vmall/ui`
|
|
- [x] 6.2 Confirm no `<style scoped>` remains under `apps/mall`, `apps/shop-admin`, `apps/admin`
|
|
- [x] 6.3 `pnpm --filter @vmall/mall build` plus admin and shop-admin builds all green
|
|
- [x] 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
|