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/components/ui/Carousel.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ images: { image: string; url?: string }[]; height?: number; interval?: number }>(), {
+  height: 450,
+  interval: 4000,
+});
+
+const index = ref(0);
+let timer: ReturnType<typeof setInterval> | null = null;
+
+function go(i: number): void {
+  index.value = (i + props.images.length) % props.images.length;
+}
+onMounted(() => {
+  if (props.images.length > 1) {
+    timer = setInterval(() => {
+      index.value = (index.value + 1) % props.images.length;
+    }, props.interval);
+  }
+});
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer);
+});
+</script>
+
+<template>
+  <div class="carousel" :style="{ height: `${height}px` }">
+    <NuxtLink
+      v-for="(img, i) in images"
+      v-show="i === index"
+      :key="img.image"
+      :to="img.url || '#'"
+      class="slide"
+      :style="{ backgroundImage: `url(${img.image})` }"
+    />
+    <div v-if="images.length > 1" class="dots">
+      <button
+        v-for="(_, i) in images"
+        :key="i"
+        type="button"
+        :class="{ on: i === index }"
+        :aria-label="`slide ${i + 1}`"
+        @click="go(i)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+.slide {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-size: cover;
+}
+.dots {
+  position: absolute;
+  bottom: 14px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+.dots button {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 0;
+  background: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+  padding: 0;
+}
+.dots button.on {
+  background: var(--mall-red);
+}
+</style>