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

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+definePageMeta({ middleware: "auth" });
+
+const route = useRoute();
+const session = useSessionStore();
+const { t } = useI18n();
+
+const menuGroups = computed(() => [
+  {
+    title: t("user.orderCenter"),
+    items: [
+      { label: t("user.myOrders"), to: "/user/orders" },
+      { label: t("user.addresses"), to: "/user/addresses" },
+      { label: t("user.coupons"), to: "/user/coupons" },
+    ],
+  },
+  {
+    title: t("user.memberCenter"),
+    items: [
+      { label: t("user.dashboard"), to: "/user" },
+      { label: t("user.favorites"), to: "/user/favorites" },
+      { label: t("user.invoices"), to: "/user/invoices" },
+    ],
+  },
+]);
+
+function isActive(to: string): boolean {
+  return to === "/user" ? route.path === "/user" : route.path === to || route.path.startsWith(`${to}/`);
+}
+</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">
+            <strong>{{ session.user?.display_name }}</strong>
+            <NuxtLink to="/user">{{ t("user.editProfile") }}</NuxtLink>
+          </div>
+        </div>
+        <nav v-for="group in menuGroups" :key="group.title" class="menu-group">
+          <h2>{{ group.title }}</h2>
+          <NuxtLink
+            v-for="item in group.items"
+            :key="item.to"
+            :to="item.to"
+            class="menu-item"
+            :class="{ active: isActive(item.to) }"
+          >
+            {{ item.label }}
+          </NuxtLink>
+        </nav>
+      </aside>
+      <main class="user-content">
+        <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>