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/favorites.vue

@@ -95,41 +95,41 @@ async function removeStoreFavorite(storeId: string): Promise<void> {
 </script>
 
 <template>
-  <section class="mpanel favorites-panel">
-    <h1 class="mpanel-title">{{ t("user.favoritesTitle") }}</h1>
-    <p v-if="error" class="muted">{{ error }}</p>
+  <VCard class="min-h-[560px]">
+    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.favoritesTitle") }}</h1>
+    <p v-if="error" class="mb-4 text-sm text-muted">{{ error }}</p>
     <UiTabs v-model="activeTab" :tabs="tabs">
       <template #default>
-        <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+        <div v-if="loading" class="py-5 text-muted">{{ t("common.loading") }}</div>
         <div v-else-if="activeTab === 'product'">
           <UiEmptyState v-if="productRows.length === 0" :text="t('user.noFavorites')" />
-          <div v-else class="product-grid">
-            <article v-for="item in productRows" :key="item.id" class="product-card hover-lift">
-              <NuxtLink :to="`/goods/${item.product.slug}`" class="cover">
-                <img :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
+          <div v-else class="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
+            <VCard v-for="item in productRows" :key="item.id" :padded="false" class="overflow-hidden transition-shadow hover:shadow-md">
+              <NuxtLink :to="`/goods/${item.product.slug}`" class="block border-b border-border">
+                <img class="block h-[150px] w-full object-contain" :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
               </NuxtLink>
-              <div class="content">
-                <NuxtLink :to="`/goods/${item.product.slug}`" class="name">{{ pick(item.product.name, locale) }}</NuxtLink>
-                <PriceText v-if="item.product.price_minor !== null && item.product.currency" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
-                <button class="mbtn" type="button" :disabled="removingId === item.product.id" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</button>
+              <div class="p-2.5">
+                <NuxtLink :to="`/goods/${item.product.slug}`" class="mb-2 block h-9 overflow-hidden text-[13px] leading-5 text-text no-underline hover:text-primary">{{ pick(item.product.name, locale) }}</NuxtLink>
+                <PriceText v-if="item.product.price_minor !== null && item.product.currency" class="mb-2.5 block text-primary" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
+                <VBtn size="sm" type="button" :disabled="removingId === item.product.id" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</VBtn>
               </div>
-            </article>
+            </VCard>
           </div>
         </div>
 
         <div v-else>
           <UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
-          <div v-else class="store-list">
-            <article v-for="item in storeRows" :key="item.id" class="store-row">
-              <img v-if="item.shop.logo" :src="item.shop.logo" :alt="pick(item.shop.name, locale)" />
-              <span v-else class="store-logo-placeholder">{{ pick(item.shop.name, locale).slice(0, 1) }}</span>
-              <div class="store-main">
-                <strong>{{ pick(item.shop.name, locale) }}</strong>
-                <span>{{ item.shop.company }}</span>
+          <div v-else class="space-y-2.5">
+            <article v-for="item in storeRows" :key="item.id" class="flex items-center gap-3.5 border border-border p-3 max-sm:flex-col max-sm:items-start">
+              <img v-if="item.shop.logo" class="h-14 w-14 rounded-sm border border-border object-cover" :src="item.shop.logo" :alt="pick(item.shop.name, locale)" />
+              <span v-else class="flex h-14 w-14 items-center justify-center rounded-sm border border-border bg-bg text-lg text-muted">{{ pick(item.shop.name, locale).slice(0, 1) }}</span>
+              <div class="flex min-w-0 flex-1 flex-col gap-1">
+                <strong class="text-sm text-text">{{ pick(item.shop.name, locale) }}</strong>
+                <span class="text-xs text-muted">{{ item.shop.company }}</span>
               </div>
-              <div class="store-actions">
-                <NuxtLink class="mbtn" :to="`/stores/${item.shop.slug}`">{{ t("user.enterStore") }}</NuxtLink>
-                <button class="mbtn" type="button" :disabled="removingId === item.shop.id" @click="removeStoreFavorite(item.shop.id)">{{ t("user.removeFavorite") }}</button>
+              <div class="flex gap-2 max-sm:w-full">
+                <NuxtLink class="inline-flex items-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text no-underline" :to="`/stores/${item.shop.slug}`">{{ t("user.enterStore") }}</NuxtLink>
+                <VBtn size="sm" type="button" :disabled="removingId === item.shop.id" @click="removeStoreFavorite(item.shop.id)">{{ t("user.removeFavorite") }}</VBtn>
               </div>
             </article>
           </div>
@@ -143,108 +143,6 @@ async function removeStoreFavorite(storeId: string): Promise<void> {
         />
       </template>
     </UiTabs>
-  </section>
+  </VCard>
 </template>
 
-<style scoped>
-.favorites-panel {
-  min-height: 560px;
-}
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-.product-card {
-  border: 1px solid var(--mall-line);
-  background: #fff;
-}
-.cover {
-  display: block;
-  border-bottom: 1px solid var(--mall-line);
-}
-.cover img {
-  display: block;
-  width: 100%;
-  height: 150px;
-  object-fit: contain;
-}
-.content {
-  padding: 10px;
-}
-.name {
-  display: block;
-  margin-bottom: 8px;
-  color: var(--mall-ink);
-  text-decoration: none;
-  font-size: 13px;
-  line-height: 1.4;
-  height: 36px;
-  overflow: hidden;
-}
-.name:hover {
-  color: var(--mall-red);
-}
-.content :deep(.price) {
-  display: block;
-  margin-bottom: 10px;
-  color: var(--mall-red);
-  font-size: 16px;
-  font-weight: 600;
-}
-.store-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 12px;
-  border: 1px solid var(--mall-line);
-  margin-bottom: 10px;
-}
-.store-row:last-child {
-  margin-bottom: 0;
-}
-.store-row img,
-.store-logo-placeholder {
-  width: 56px;
-  height: 56px;
-  border: 1px solid var(--mall-line);
-  border-radius: 4px;
-  object-fit: cover;
-}
-.store-logo-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fafafa;
-  color: var(--mall-muted);
-  font-size: 18px;
-}
-.store-main {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-.store-main strong {
-  color: var(--mall-ink);
-  font-size: 14px;
-}
-.store-main span {
-  color: var(--mall-faint);
-  font-size: 12px;
-}
-.store-actions {
-  display: flex;
-  gap: 8px;
-}
-@media (max-width: 760px) {
-  .product-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .store-row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-}
-</style>