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/shop-admin/pages/orders/index.vue

@@ -13,13 +13,14 @@ const status = ref<"" | OrderStatus>("");
 const loading = ref(true);
 const error = ref("");
 
-function statusClass(value: OrderStatus): string {
+function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
   if (value === "completed") return "green";
   if (value === "cancelled") return "red";
   if (value === "pending_payment") return "orange";
   return "blue";
 }
 
+
 function formatDate(value: string): string {
   return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
 }
@@ -54,11 +55,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page">
-    <div class="page-head"><h1 class="page-title">{{ $t("shop.orderList") }}</h1></div>
-    <div class="row mb">
-      <label for="order-status">{{ $t("shop.filterOrderStatus") }}</label>
-      <select id="order-status" v-model="status" @change="filterChanged">
+  <VPage :title="$t('shop.orderList')">
+    <div class="mb-4 flex items-center gap-3">
+      <label for="order-status" class="text-sm font-medium">{{ $t("shop.filterOrderStatus") }}</label>
+      <select id="order-status" v-model="status" 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="filterChanged">
         <option value="">{{ $t("common.all") }}</option>
         <option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
         <option value="paid">{{ $t("order.status.paid") }}</option>
@@ -68,43 +68,35 @@ onMounted(() => {
         <option value="cancelled">{{ $t("order.status.cancelled") }}</option>
       </select>
     </div>
-    <div v-if="error" class="error-text" role="alert">{{ error }}</div>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <div v-else-if="!orders?.items.length" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
+    <p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
+    <VCard v-else-if="!orders?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
     <template v-else>
-      <div class="table-wrap">
-        <table class="table">
-          <thead>
-            <tr>
-              <th>{{ $t("shop.orderNo") }}</th>
-              <th>{{ $t("shop.created") }}</th>
-              <th>{{ $t("shop.items") }}</th>
-              <th>{{ $t("shop.total") }}</th>
-              <th>{{ $t("common.status") }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="order in orders.items" :key="order.id">
-              <td><NuxtLink :to="`/orders/${order.id}`">{{ order.order_no }}</NuxtLink></td>
-              <td>{{ formatDate(order.created_at) }}</td>
-              <td>{{ order.items.length }}</td>
-              <td>{{ fmt(order.total_minor, order.currency) }}</td>
-              <td><span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div v-if="orders.total > orders.per_page" class="row between mt">
-        <button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
-        <span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
-        <button class="btn sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+      <VTable>
+        <thead>
+          <tr>
+            <th>{{ $t("shop.orderNo") }}</th>
+            <th>{{ $t("shop.created") }}</th>
+            <th>{{ $t("shop.items") }}</th>
+            <th>{{ $t("shop.total") }}</th>
+            <th>{{ $t("common.status") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in orders.items" :key="order.id">
+            <td><NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{ order.order_no }}</NuxtLink></td>
+            <td>{{ formatDate(order.created_at) }}</td>
+            <td>{{ order.items.length }}</td>
+            <td>{{ fmt(order.total_minor, order.currency) }}</td>
+            <td><VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge></td>
+          </tr>
+        </tbody>
+      </VTable>
+      <div v-if="orders.total > orders.per_page" class="mt-4 flex items-center justify-between">
+        <VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
+        <span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
+        <VBtn size="sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
       </div>
     </template>
-  </div>
+  </VPage>
 </template>
-
-<style scoped>
-.table-wrap {
-  overflow-x: auto;
-}
-</style>