james/vmall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): adopt Tailwind v4 design system and archive change

Browse Source 
- 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
2026-09-22 18:22:50 +08:00
parent 4d2ee3b0bf
commit 0d0e10b97b
101 changed files with 2833 additions and 7207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/shop-admin/app.vue
+41 -31
View File
@@ -2,10 +2,12 @@
const session = useSessionStore();
const { locale, locales, setLocale } = useI18n();
const route = useRoute();
onMounted(() => session.hydrate());
const { boot } = useAccent();
const isAuthPage = computed(() => route.path === "/login");
boot();
onMounted(() => session.hydrate());
watchEffect(() => {
if (import.meta.client && session.token === null && !isAuthPage.value && route.path !== "/") {
// pages opt into auth middleware; nothing global here
@@ -17,34 +19,42 @@ watchEffect(() => {
<div v-if="isAuthPage">
<NuxtPage />
</div>
<div v-else class="auth-layout">
<aside>
<div class="brand">{{ $t("common.appName") }} · Shop</div>
<NuxtLink to="/">{{ $t("nav.dashboard") }}</NuxtLink>
<NuxtLink to="/products">{{ $t("nav.products") }}</NuxtLink>
<NuxtLink to="/orders">{{ $t("nav.orders") }}</NuxtLink>
<NuxtLink to="/shipments">{{ $t("nav.shipments") }}</NuxtLink>
<NuxtLink to="/invoices">{{ $t("nav.invoices") }}</NuxtLink>
<NuxtLink to="/coupons">{{ $t("nav.coupons") }}</NuxtLink>
<NuxtLink to="/flash-sales">{{ $t("nav.flashSales") }}</NuxtLink>
<NuxtLink to="/group-buying">{{ $t("nav.groupBuying") }}</NuxtLink>
</aside>
<main>
<div class="main-head">
<select
:value="locale"
:aria-label="$t('common.language')"
@change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
>
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
</select>
<template v-if="session.isLoggedIn">
<span class="muted">{{ session.user?.display_name }}</span>
<button class="btn sm" @click="session.logout()">{{ $t("common.logout") }}</button>
</template>
<NuxtLink v-else to="/login" class="btn sm primary">{{ $t("common.login") }}</NuxtLink>
</div>
<NuxtPage />
</main>
<div v-else class="min-h-screen bg-bg font-sans text-text">
<div class="flex min-h-screen">
<aside class="w-60 shrink-0 border-r border-border bg-surface px-4 py-5">
<div class="mb-6 px-3 text-lg font-bold text-text">{{ $t("common.appName") }} · Shop</div>
<nav class="grid gap-1" :aria-label="$t('common.appName')">
<NuxtLink to="/" exact-active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.dashboard") }}</NuxtLink>
<NuxtLink to="/products" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.products") }}</NuxtLink>
<NuxtLink to="/orders" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.orders") }}</NuxtLink>
<NuxtLink to="/shipments" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.shipments") }}</NuxtLink>
<NuxtLink to="/invoices" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.invoices") }}</NuxtLink>
<NuxtLink to="/coupons" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.coupons") }}</NuxtLink>
<NuxtLink to="/flash-sales" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.flashSales") }}</NuxtLink>
<NuxtLink to="/group-buying" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.groupBuying") }}</NuxtLink>
</nav>
</aside>
<main class="min-w-0 flex-1">
<header class="flex min-h-16 items-center justify-end gap-4 border-b border-border bg-surface px-6">
<VAccentSwatch />
<select
:value="locale"
:aria-label="$t('common.language')"
class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
@change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
>
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
</select>
<template v-if="session.isLoggedIn">
<span class="text-sm text-muted">{{ session.user?.display_name }}</span>
<VBtn size="sm" @click="session.logout()">{{ $t("common.logout") }}</VBtn>
</template>
<NuxtLink v-else to="/login" class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-2.5 py-1 text-[13px] font-medium text-white hover:bg-primary-hover">{{ $t("common.login") }}</NuxtLink>
</header>
<div class="px-6">
<NuxtPage />
</div>
</main>
</div>
</div>
</template>