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/mall/pages/user.vue

@@ -30,132 +30,34 @@ function isActive(to: string): boolean {
 </script>
 
 <template>
-  <div class="user-page">
-    <div class="w1200 user-layout">
-      <aside class="user-sidebar">
-        <div class="profile">
-          <img src="/mock/avatar.svg" :alt="t('user.title')" />
-          <div class="profile-copy">
+  <div class="min-h-screen bg-bg py-8 pb-16 font-sans text-text">
+    <div class="mx-auto grid w-full max-w-mall gap-5 px-4 lg:grid-cols-[234px_minmax(0,1fr)] lg:items-start">
+      <VCard :padded="false" class="min-h-[560px] pb-5">
+        <div class="flex items-center gap-3 border-b border-border px-4 py-5">
+          <img class="h-[54px] w-[54px] rounded-full object-cover" src="/mock/avatar.svg" :alt="t('user.title')" />
+          <div class="min-w-0">
             <!-- Session lives in localStorage, so the name is unknown at SSR time. -->
-            <ClientOnly><strong>{{ session.user?.display_name }}</strong></ClientOnly>
-            <NuxtLink to="/user">{{ t("user.editProfile") }}</NuxtLink>
+            <ClientOnly><strong class="block truncate text-sm text-text">{{ session.user?.display_name }}</strong></ClientOnly>
+            <NuxtLink class="mt-2 inline-block text-xs text-muted no-underline hover:text-primary" to="/user">{{ t("user.editProfile") }}</NuxtLink>
           </div>
         </div>
-        <nav v-for="group in menuGroups" :key="group.title" class="menu-group">
-          <h2>{{ group.title }}</h2>
+        <nav v-for="group in menuGroups" :key="group.title" class="pt-[18px]">
+          <h2 class="mb-2 px-5 text-[13px] font-semibold text-muted">{{ group.title }}</h2>
           <NuxtLink
             v-for="item in group.items"
             :key="item.to"
             :to="item.to"
-            class="menu-item"
-            :class="{ active: isActive(item.to) }"
+            class="block border-l-[3px] border-transparent px-5 py-2.5 text-[13px] text-text no-underline hover:bg-primary-soft hover:text-primary"
+            :class="isActive(item.to) ? 'border-primary bg-primary-soft text-primary' : ''"
           >
             {{ item.label }}
           </NuxtLink>
         </nav>
-      </aside>
-      <main class="user-content">
+      </VCard>
+      <main class="mx-auto min-w-0 max-w-mall">
         <NuxtPage />
       </main>
     </div>
   </div>
 </template>
 
-<style scoped>
-.user-page {
-  min-height: 680px;
-  padding: 30px 0 60px;
-  background: var(--mall-bg);
-}
-.user-layout {
-  display: grid;
-  grid-template-columns: 234px minmax(0, 1fr);
-  gap: 20px;
-  align-items: start;
-}
-.user-sidebar {
-  background: #fff;
-  min-height: 560px;
-  padding-bottom: 18px;
-}
-.profile {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 22px 16px;
-  border-bottom: 1px solid var(--mall-line);
-}
-.profile img {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-.profile-copy {
-  min-width: 0;
-}
-.profile strong {
-  display: block;
-  overflow: hidden;
-  color: var(--mall-ink);
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.profile a {
-  display: inline-block;
-  margin-top: 8px;
-  color: var(--mall-faint);
-  font-size: 12px;
-  text-decoration: none;
-}
-.profile a:hover {
-  color: var(--mall-red);
-}
-.menu-group {
-  padding: 18px 0 0;
-}
-.menu-group h2 {
-  margin: 0;
-  padding: 0 20px 8px;
-  color: var(--mall-muted);
-  font-size: 13px;
-  font-weight: 600;
-}
-.menu-item {
-  display: block;
-  padding: 10px 20px;
-  border-left: 3px solid transparent;
-  color: var(--mall-ink);
-  font-size: 13px;
-  text-decoration: none;
-}
-.menu-item:hover,
-.menu-item.active {
-  background: #fff5f5;
-  border-left-color: var(--mall-red);
-  color: var(--mall-red);
-}
-.user-content {
-  min-width: 0;
-}
-@media (max-width: 1240px) {
-  .user-layout {
-    width: calc(100% - 40px);
-  }
-}
-@media (max-width: 760px) {
-  .user-layout {
-    display: block;
-  }
-  .user-sidebar {
-    min-height: 0;
-    margin-bottom: 20px;
-  }
-  .menu-group {
-    display: inline-block;
-    width: 49%;
-    vertical-align: top;
-  }
-}
-</style>