feat(mall): classic B2B2C PC storefront with fixed mock API layer

- Mock adapter implementing @vmall/shared ApiClient (localStorage-persisted
  cart/orders/invoices), runtime switch via mockApi flag (default on)
- Fixed bilingual mock catalog: 3-level categories, 24 products w/ SKUs,
  stores, brands, banners, floors, seckill/collective/integral, comments,
  coupons, addresses, seeded orders/shipments/invoices
- B2B2C mall shell: top bar, logo/search/cart header, dark nav + category
  mega-menu, value-prop footer, back-to-top; 1200px grid, #ca151e theme
- UI primitives replacing element-plus: carousel, pagination, breadcrumb,
  qty stepper, rating stars, modal, tabs, step bar, product card
- Pages: home floors, search (filters/sort/paging), goods detail (SKU
  picker, store rail, review tabs), cart -> checkout -> pay -> success,
  auth pages, user center (dashboard/orders/addresses/favorites/coupons/
  invoices), stores, seckill, collective, integral
- i18n split into per-domain locale modules (en+zh)
- OpenSpec change mall-pc-storefront-replica archived; all specs green

apps/mall/pages/index.vue

@@ -1,144 +1,144 @@
 <script setup lang="ts">
-import type { Category, Product, Paged, Sku } from "@vmall/shared";
-import { t as localized } from "@vmall/shared";
+import { t as pick } from "@vmall/shared";
+import { MOCK_BANNERS, MOCK_PROMOS, MOCK_QUICK_LINKS, homeFloors } from "~/mock/data";
 
-const { $api } = useNuxtApp();
-const { locale } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const categories = ref<Category[]>([]);
-const result = ref<Paged<Product> | null>(null);
-const search = ref(typeof route.query.q === "string" ? route.query.q : "");
-const categoryId = ref(typeof route.query.category_id === "string" ? route.query.category_id : "");
-const page = ref(Number(route.query.page) > 0 ? Number(route.query.page) : 1);
-const loading = ref(false);
-const error = ref("");
-
-function errorMessage(value: unknown): string {
-  return value instanceof Error ? value.message : $t("mall.loadFailed");
-}
-
-function lowestSku(product: Product): Sku | null {
-  const active = (product.skus ?? []).filter((sku) => sku.active && sku.stock > 0);
-  return active.reduce<Sku | null>((lowest, sku) => {
-    if (!lowest || sku.price_minor < lowest.price_minor) return sku;
-    return lowest;
-  }, null) ?? (product.skus ?? []).find((sku) => sku.active) ?? null;
-}
-
-async function loadCategories(): Promise<void> {
-  try {
-    categories.value = await $api.listCategories();
-  } catch (value) {
-    error.value = errorMessage(value);
-  }
-}
-
-async function loadProducts(): Promise<void> {
-  loading.value = true;
-  error.value = "";
-  try {
-    result.value = await $api.listProducts({
-      page: page.value,
-      per_page: 12,
-      category_id: categoryId.value || undefined,
-      q: search.value.trim() || undefined,
-    });
-  } catch (value) {
-    error.value = errorMessage(value);
-    result.value = null;
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function applyFilters(): Promise<void> {
-  page.value = 1;
-  await router.replace({ query: {
-    ...(search.value.trim() ? { q: search.value.trim() } : {}),
-    ...(categoryId.value ? { category_id: categoryId.value } : {}),
-    page: "1",
-  } });
-  await loadProducts();
-}
-
-async function changePage(nextPage: number): Promise<void> {
-  const pages = Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 12)));
-  if (nextPage < 1 || nextPage > pages) return;
-  page.value = nextPage;
-  await router.replace({ query: { ...route.query, page: String(nextPage) } });
-  await loadProducts();
-}
-
-onMounted(async () => {
-  await Promise.all([loadCategories(), loadProducts()]);
-});
-
-const totalPages = computed(() => Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 12))));
+const { locale, t } = useI18n();
+const floors = computed(() => homeFloors().filter((f) => f.products.length > 0));
 </script>
 
 <template>
-  <section>
-    <div class="page-head">
-      <h1 class="page-title">{{ $t("mall.catalogTitle") }}</h1>
+  <div>
+    <div class="w1200 hero">
+      <UiCarousel :images="MOCK_BANNERS" :height="450" />
     </div>
 
-    <form class="card filters" @submit.prevent="applyFilters">
-      <div class="field search-field">
-        <label for="product-search">{{ $t("common.search") }}</label>
-        <input id="product-search" v-model="search" type="search" :placeholder="$t('mall.searchPlaceholder')">
-      </div>
-      <div class="field category-field">
-        <label for="product-category">{{ $t("mall.filter") }}</label>
-        <select id="product-category" v-model="categoryId">
-          <option value="">{{ $t("mall.allCategories") }}</option>
-          <option v-for="category in categories" :key="category.id" :value="category.id">
-            {{ localized(category.name, locale) }}
-          </option>
-        </select>
-      </div>
-      <button class="btn primary filter-button" type="submit">{{ $t("common.search") }}</button>
-    </form>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <p v-if="loading" class="muted" aria-live="polite">{{ $t("common.loading") }}</p>
-    <div v-else-if="result && result.items.length === 0" class="card empty-state">{{ $t("common.empty") }}</div>
-    <div v-else-if="result" class="grid products">
-      <article v-for="product in result.items" :key="product.id" class="card product-card">
-        <NuxtLink :to="`/products/${product.id}`">
-          <img v-if="product.images[0]" :src="product.images[0]" :alt="localized(product.name, locale)">
-          <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
+    <div class="w1200 strip">
+      <ul class="quick">
+        <li v-for="q in MOCK_QUICK_LINKS" :key="q.url + pick(q.label, 'en')">
+          <NuxtLink :to="q.url">
+            <svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor"><path :d="q.glyph" /></svg>
+            <span>{{ pick(q.label, locale) }}</span>
+          </NuxtLink>
+        </li>
+      </ul>
+      <div class="promos">
+        <NuxtLink v-for="p in MOCK_PROMOS" :key="p.image" :to="p.url">
+          <img :src="p.image" :alt="t('home.hotPromo')" loading="lazy" />
         </NuxtLink>
-        <div class="body">
-          <div class="name">{{ localized(product.name, locale) }}</div>
-          <div v-if="lowestSku(product)" class="price">
-            <PriceText :amount-minor="lowestSku(product)!.price_minor" :currency="lowestSku(product)!.currency" />
-          </div>
-          <div v-else class="muted">{{ $t("mall.unavailable") }}</div>
-          <NuxtLink class="btn sm mt" :to="`/products/${product.id}`">{{ $t("mall.viewDetails") }}</NuxtLink>
-        </div>
-      </article>
+      </div>
     </div>
 
-    <div v-if="result && result.items.length > 0" class="row between pagination">
-      <button class="btn" :disabled="page <= 1" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
-      <span class="muted">{{ $t("common.page") }} {{ page }} / {{ totalPages }}</span>
-      <button class="btn" :disabled="page >= totalPages" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+    <div class="section-bg">
+      <section v-for="floor in floors" :key="floor.categoryId" class="w1200 floor">
+        <header class="floor-head">
+          <h2>{{ pick(floor.name, locale) }}</h2>
+          <NuxtLink :to="`/search?category=${floor.categoryId}`" class="more">{{ t("home.viewMore") }} ›</NuxtLink>
+        </header>
+        <div class="floor-body">
+          <NuxtLink :to="floor.advUrl" class="floor-adv">
+            <img :src="floor.advImage" :alt="pick(floor.name, locale)" loading="lazy" />
+          </NuxtLink>
+          <div class="floor-grid">
+            <UiProductCard v-for="p in floor.products" :key="p.id" :product="p" />
+          </div>
+        </div>
+      </section>
     </div>
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.filters { display: flex; align-items: end; gap: 12px; margin-bottom: 20px; }
-.filters .field { margin: 0; }
-.search-field { flex: 1; }
-.category-field { min-width: 210px; }
-.filter-button { white-space: nowrap; }
-.image-placeholder { aspect-ratio: 1; display: grid; place-items: center; background: #eef1f5; color: var(--muted); }
-.pagination { margin-top: 20px; }
-.empty-state { text-align: center; }
-@media (max-width: 640px) {
-  .filters { align-items: stretch; flex-direction: column; }
-  .category-field { min-width: 0; }
+.hero {
+  margin-top: 0;
+}
+.strip {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.quick {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px;
+  background: var(--mall-line);
+  border: 1px solid var(--mall-line);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 240px;
+}
+.quick li {
+  background: #fff;
+  text-align: center;
+}
+.quick a {
+  display: block;
+  padding: 14px 0;
+  color: var(--mall-muted);
+  text-decoration: none;
+  font-size: 12px;
+}
+.quick a:hover {
+  color: var(--mall-red);
+}
+.quick svg {
+  display: block;
+  margin: 0 auto 6px;
+}
+.promos {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.promos img {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  display: block;
+}
+.floor {
+  margin-bottom: 30px;
+}
+.floor-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  border-bottom: 2px solid var(--mall-red);
+  margin-bottom: 0;
+}
+.floor-head h2 {
+  font-size: 18px;
+  margin: 0;
+  padding: 10px 0;
+}
+.more {
+  font-size: 12px;
+  color: var(--mall-muted);
+  text-decoration: none;
+}
+.more:hover {
+  color: var(--mall-red);
+}
+.floor-body {
+  display: flex;
+  gap: 0;
+  background: #fff;
+}
+.floor-adv img {
+  width: 234px;
+  height: 614px;
+  display: block;
+  object-fit: cover;
+}
+.floor-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1px;
+  background: var(--mall-line);
+}
+.floor-grid :deep(.card) {
+  border: 0;
 }
 </style>