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

apps/admin/app.vue

@@ -2,43 +2,64 @@
 const session = useSessionStore();
 const { locale, locales, setLocale } = useI18n();
 const route = useRoute();
+const { boot } = useAccent();
 
-onMounted(() => session.hydrate());
+onMounted(() => {
+  session.hydrate();
+  boot();
+});
 
 const isAuthPage = computed(() => route.path === "/login");
+const navItems = [
+  { to: "/", label: "nav.dashboard" },
+  { to: "/users", label: "nav.users" },
+  { to: "/shops", label: "nav.shops" },
+  { to: "/orders", label: "nav.orders" },
+  { to: "/currencies", label: "nav.currencies" },
+  { to: "/points-products", label: "nav.pointsProducts" },
+  { to: "/points-orders", label: "nav.pointsOrders" },
+];
 </script>
 
 <template>
-  <div v-if="isAuthPage">
+  <div v-if="isAuthPage" class="min-h-screen bg-bg font-sans text-text">
     <NuxtPage />
   </div>
-  <div v-else class="auth-layout">
-    <aside>
-      <div class="brand">{{ $t("common.appName") }} · Admin</div>
-      <NuxtLink to="/">{{ $t("nav.dashboard") }}</NuxtLink>
-      <NuxtLink to="/users">{{ $t("nav.users") }}</NuxtLink>
-      <NuxtLink to="/shops">{{ $t("nav.shops") }}</NuxtLink>
-      <NuxtLink to="/orders">{{ $t("nav.orders") }}</NuxtLink>
-      <NuxtLink to="/currencies">{{ $t("nav.currencies") }}</NuxtLink>
-      <NuxtLink to="/points-products">{{ $t("nav.pointsProducts") }}</NuxtLink>
-      <NuxtLink to="/points-orders">{{ $t("nav.pointsOrders") }}</NuxtLink>
+  <div v-else class="min-h-screen bg-bg font-sans text-text md:flex">
+    <aside class="w-full shrink-0 border-b border-border bg-surface p-4 md:min-h-screen md:w-60 md:border-b-0 md:border-r">
+      <div class="mb-6 text-lg font-bold text-primary">{{ $t("common.appName") }} · Admin</div>
+      <nav class="grid gap-1" aria-label="Admin navigation">
+        <NuxtLink
+          v-for="item in navItems"
+          :key="item.to"
+          :to="item.to"
+          class="rounded-md px-3 py-2 text-sm font-medium text-muted transition-colors hover:bg-primary-soft hover:text-primary"
+          :class="route.path === item.to ? 'bg-primary-soft text-primary' : ''"
+        >
+          {{ $t(item.label) }}
+        </NuxtLink>
+      </nav>
     </aside>
-    <main>
-      <div class="main-head">
+    <main class="min-w-0 flex-1">
+      <header class="flex flex-wrap items-center justify-end gap-3 border-b border-border bg-surface px-4 py-3 md:px-6">
         <select
           :value="locale"
+          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"
           :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>
+        <VAccentSwatch />
         <template v-if="session.isLoggedIn">
-          <span class="muted">{{ session.user?.display_name }}</span>
-          <button class="btn sm" @click="session.logout()">{{ $t("common.logout") }}</button>
+          <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="btn sm primary">{{ $t("common.login") }}</NuxtLink>
+        <VBtn v-else size="sm" variant="primary" @click="navigateTo('/login')">{{ $t("common.login") }}</VBtn>
+      </header>
+      <div class="mx-auto w-full max-w-7xl px-4 md:px-6">
+        <NuxtPage />
       </div>
-      <NuxtPage />
     </main>
   </div>
 </template>