diff --git a/.gitignore b/.gitignore
index fe96a20..81f9ce1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ target/
 .nuxt/
 .output/
 .data/
+.playwright-cli/
 dist/
 *.log
 .env
diff --git a/apps/mall/app.vue b/apps/mall/app.vue
index 7bac7dd..c5d0e31 100644
--- a/apps/mall/app.vue
+++ b/apps/mall/app.vue
@@ -1,56 +1,15 @@
 <script setup lang="ts">
 const session = useSessionStore();
-const { locale, locales, setLocale } = useI18n();
-const { currency } = usePrefs();
-const { $api } = useNuxtApp();
-
 onMounted(() => session.hydrate());
-
-const currencies = ref<string[]>(["USD"]);
-onMounted(async () => {
-  try {
-    const list = await $api.listCurrencies();
-    if (list.length > 0) currencies.value = list.map((c) => c.code);
-  } catch {
-    /* API may be down during SSR-less dev */
-  }
-});
 </script>
 
 <template>
   <div>
-    <header class="topnav">
-      <div class="container topnav-inner">
-        <NuxtLink to="/" class="brand">{{ $t("common.appName") }}</NuxtLink>
-        <nav>
-          <NuxtLink to="/">{{ $t("nav.home") }}</NuxtLink>
-          <NuxtLink to="/cart">{{ $t("nav.cart") }}</NuxtLink>
-          <NuxtLink to="/orders">{{ $t("nav.orders") }}</NuxtLink>
-          <NuxtLink to="/invoices">{{ $t("nav.invoices") }}</NuxtLink>
-        </nav>
-        <select
-          :value="currency"
-          :aria-label="$t('common.currency')"
-          @change="currency = ($event.target as HTMLSelectElement).value"
-        >
-          <option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
-        </select>
-        <select
-          :value="locale"
-          :aria-label="$t('common.language')"
-          @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
-        >
-          <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
-        </select>
-        <template v-if="session.isLoggedIn">
-          <span class="muted">{{ session.user?.display_name }}</span>
-          <button class="btn sm" @click="session.logout()">{{ $t("common.logout") }}</button>
-        </template>
-        <NuxtLink v-else to="/login" class="btn sm primary">{{ $t("common.login") }}</NuxtLink>
-      </div>
-    </header>
-    <main class="container page">
+    <ShellTopBar />
+    <ShellSiteHeader />
+    <main class="mall-main">
       <NuxtPage />
     </main>
+    <ShellSiteFooter />
   </div>
 </template>
diff --git a/apps/mall/assets/mall.css b/apps/mall/assets/mall.css
new file mode 100644
index 0000000..9d17730
--- /dev/null
+++ b/apps/mall/assets/mall.css
@@ -0,0 +1,161 @@
+/* B2B2C mall-style PC mall theme: 1200px grid, #ca151e brand red, compact controls. */
+
+:root {
+  --mall-red: #ca151e;
+  --mall-red-dark: #a8111a;
+  --mall-ink: #333;
+  --mall-muted: #666;
+  --mall-faint: #999;
+  --mall-line: #efefef;
+  --mall-line-dark: #d9d9d9;
+  --mall-bg: #f5f5f5;
+  --mall-panel: #fff;
+  --mall-green: #67c23a;
+  --mall-yellow: #e6a23c;
+  --mall-nav: #333;
+  --mall-radius: 3px;
+  --mall-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+body {
+  background: #fff;
+  color: var(--mall-ink);
+  font-size: 14px;
+}
+
+.w1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.mall-main {
+  min-height: 60vh;
+}
+
+/* buttons */
+.mbtn {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 6px 15px;
+  border: 1px solid var(--mall-line-dark);
+  border-radius: var(--mall-radius);
+  background: #fff;
+  color: var(--mall-muted);
+  font-size: 12px;
+  line-height: 1.6;
+  cursor: pointer;
+  text-decoration: none;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+}
+.mbtn:hover {
+  color: var(--mall-red);
+  border-color: var(--mall-red);
+}
+.mbtn.red {
+  background: var(--mall-red);
+  border-color: var(--mall-red);
+  color: #fff;
+}
+.mbtn.red:hover {
+  background: var(--mall-red-dark);
+}
+.mbtn.gray {
+  background: #909399;
+  border-color: #909399;
+  color: #fff;
+}
+.mbtn.block {
+  display: block;
+  width: 100%;
+  text-align: center;
+  padding: 10px 15px;
+  font-size: 14px;
+}
+.mbtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* white content panel (user center etc.) */
+.mpanel {
+  background: var(--mall-panel);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+.mpanel-title {
+  font-size: 16px;
+  border-left: 3px solid var(--mall-red);
+  padding-left: 12px;
+  margin: 0 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mpanel-title .more {
+  font-size: 12px;
+  color: var(--mall-muted);
+  text-decoration: none;
+}
+.mpanel-title .more:hover {
+  color: var(--mall-red);
+}
+
+.hr20 {
+  height: 1px;
+  background: var(--mall-line);
+  margin: 20px 0;
+  border: 0;
+}
+
+/* form controls */
+.minput {
+  box-sizing: border-box;
+  width: 100%;
+  height: 38px;
+  padding: 8px 12px;
+  border: 1px solid var(--mall-line-dark);
+  border-radius: var(--mall-radius);
+  font-size: 13px;
+  outline: none;
+}
+.minput:focus {
+  border-color: var(--mall-red);
+}
+
+/* gray page section background (home floors) */
+.section-bg {
+  background: var(--mall-bg);
+  padding: 20px 0 60px;
+}
+
+/* simple table */
+.mtable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.mtable th {
+  background: #fafafa;
+  border-bottom: 1px solid var(--mall-line);
+  padding: 10px 12px;
+  text-align: left;
+  color: var(--mall-muted);
+  font-weight: normal;
+}
+.mtable td {
+  border-bottom: 1px solid var(--mall-line);
+  padding: 12px;
+  vertical-align: middle;
+}
+.mtable tr:hover td {
+  background: #fcfcfc;
+}
+
+/* product card hover lift */
+.hover-lift {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.hover-lift:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--mall-shadow);
+}
diff --git a/apps/mall/components/shell/CategoryMenu.vue b/apps/mall/components/shell/CategoryMenu.vue
new file mode 100644
index 0000000..b83fb45
--- /dev/null
+++ b/apps/mall/components/shell/CategoryMenu.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { topCategories, childCategories } from "~/mock/data";
+import { t as pick } from "@vmall/shared";
+
+const { locale } = useI18n();
+const open = ref(false);
+const hoverId = ref<string | null>(null);
+
+const cats = computed(() =>
+  topCategories().map((c) => ({
+    cat: c,
+    children: childCategories(c.id).map((cc) => ({ cat: cc, grandchildren: childCategories(cc.id) })),
+  })),
+);
+
+const active = computed(() => cats.value.find((g) => g.cat.id === hoverId.value) ?? null);
+
+defineExpose({ open });
+</script>
+
+<template>
+  <div class="catmenu" @mouseleave="hoverId = null">
+    <ul class="lvl1">
+      <li
+        v-for="g in cats"
+        :key="g.cat.id"
+        :class="{ on: hoverId === g.cat.id }"
+        @mouseenter="hoverId = g.cat.id"
+      >
+        <NuxtLink :to="`/search?category=${g.cat.id}`" class="c1">{{ pick(g.cat.name, locale) }}</NuxtLink>
+        <span class="c2s">
+          <NuxtLink
+            v-for="cc in g.children.slice(0, 3)"
+            :key="cc.cat.id"
+            :to="`/search?category=${cc.cat.id}`"
+            class="c2"
+          >{{ pick(cc.cat.name, locale) }}</NuxtLink>
+        </span>
+      </li>
+    </ul>
+    <div v-if="active" class="sub">
+      <div v-for="cc in active.children" :key="cc.cat.id" class="sub-row">
+        <NuxtLink :to="`/search?category=${cc.cat.id}`" class="sub-title">{{ pick(cc.cat.name, locale) }}</NuxtLink>
+        <div class="sub-items">
+          <NuxtLink
+            v-for="gc in cc.grandchildren"
+            :key="gc.id"
+            :to="`/search?category=${gc.id}`"
+          >{{ pick(gc.name, locale) }}</NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.catmenu {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  z-index: 700;
+  display: flex;
+  width: 960px;
+}
+.lvl1 {
+  width: 240px;
+  margin: 0;
+  padding: 8px 0;
+  list-style: none;
+  background: rgba(30, 30, 30, 0.92);
+  min-height: 434px;
+}
+.lvl1 li {
+  padding: 10px 15px;
+  cursor: pointer;
+}
+.lvl1 li.on {
+  background: #fff;
+}
+.lvl1 li.on .c1,
+.lvl1 li.on .c2 {
+  color: var(--mall-red);
+}
+.c1 {
+  display: block;
+  color: #fff;
+  font-size: 14px;
+  text-decoration: none;
+}
+.c2s {
+  display: block;
+  margin-top: 2px;
+}
+.c2 {
+  color: #bbb;
+  font-size: 12px;
+  margin-right: 8px;
+  text-decoration: none;
+}
+.c2:hover {
+  color: #fff;
+}
+.sub {
+  flex: 1;
+  background: #fff;
+  box-shadow: var(--mall-shadow);
+  padding: 20px 30px;
+  min-height: 434px;
+}
+.sub-row {
+  display: flex;
+  border-bottom: 1px solid var(--mall-line);
+  padding: 12px 0;
+}
+.sub-row:last-child {
+  border-bottom: 0;
+}
+.sub-title {
+  width: 120px;
+  font-weight: 600;
+  color: var(--mall-ink);
+  text-decoration: none;
+}
+.sub-items a {
+  display: inline-block;
+  margin: 0 18px 8px 0;
+  color: var(--mall-muted);
+  font-size: 13px;
+  text-decoration: none;
+}
+.sub-items a:hover {
+  color: var(--mall-red);
+}
+</style>
diff --git a/apps/mall/components/shell/SiteFooter.vue b/apps/mall/components/shell/SiteFooter.vue
new file mode 100644
index 0000000..157d75f
--- /dev/null
+++ b/apps/mall/components/shell/SiteFooter.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const visible = ref(false);
+
+function onScroll(): void {
+  visible.value = window.scrollY > 400;
+}
+function toTop(): void {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+}
+onMounted(() => window.addEventListener("scroll", onScroll, { passive: true }));
+onBeforeUnmount(() => window.removeEventListener("scroll", onScroll));
+</script>
+
+<template>
+  <footer class="foot">
+    <div class="w1200">
+      <ul class="props">
+        <li>{{ t("shell.footer.v1") }}</li>
+        <li>{{ t("shell.footer.v2") }}</li>
+        <li>{{ t("shell.footer.v3") }}</li>
+        <li>{{ t("shell.footer.v4") }}</li>
+      </ul>
+      <div class="copyright">
+        <p>{{ t("shell.footer.copyright") }}</p>
+        <p>{{ t("shell.footer.icp") }}</p>
+      </div>
+    </div>
+    <button v-show="visible" class="backtop" type="button" :aria-label="t('shell.backToTop')" @click="toTop">↑</button>
+  </footer>
+</template>
+
+<style scoped>
+.foot {
+  padding-top: 10px;
+  text-align: center;
+}
+.props {
+  margin: 40px auto 0;
+  width: 720px;
+  border-top: 1px solid var(--mall-line);
+  padding: 40px 0 0;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+.copyright {
+  font-size: 12px;
+  line-height: 28px;
+  color: var(--mall-muted);
+  padding: 30px 0 20px;
+}
+.backtop {
+  position: fixed;
+  right: 40px;
+  bottom: 60px;
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--mall-line-dark);
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--mall-muted);
+  z-index: 800;
+}
+.backtop:hover {
+  color: #fff;
+  background: var(--mall-red);
+  border-color: var(--mall-red);
+}
+</style>
diff --git a/apps/mall/components/shell/SiteHeader.vue b/apps/mall/components/shell/SiteHeader.vue
new file mode 100644
index 0000000..97aacf9
--- /dev/null
+++ b/apps/mall/components/shell/SiteHeader.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+const { t, locale, locales, setLocale } = useI18n();
+const { currency } = usePrefs();
+const cart = useCartStore();
+const route = useRoute();
+const router = useRouter();
+
+const keywords = ref(typeof route.query.q === "string" ? route.query.q : "");
+watch(
+  () => route.query.q,
+  (q) => {
+    keywords.value = typeof q === "string" ? q : "";
+  },
+);
+
+function search(): void {
+  const q = keywords.value.trim();
+  void router.push({ path: "/search", query: q ? { q } : {} });
+}
+
+const currencies = ref<string[]>(["USD"]);
+const { $api } = useNuxtApp();
+onMounted(async () => {
+  try {
+    const list = await $api.listCurrencies();
+    if (list.length > 0) currencies.value = list.filter((c) => c.enabled).map((c) => c.code);
+  } catch {
+    /* keep default */
+  }
+  void cart.refresh();
+});
+
+const menuOpen = ref(false);
+const isHome = computed(() => route.path === "/");
+const collapsed = ref(false);
+onMounted(() => {
+  const onScroll = (): void => {
+    collapsed.value = window.scrollY > 200;
+  };
+  window.addEventListener("scroll", onScroll, { passive: true });
+});
+const showMenu = computed(() => menuOpen.value || (isHome.value && !collapsed.value));
+</script>
+
+<template>
+  <header class="hdr">
+    <div v-show="!collapsed" class="w1200 hdr-top">
+      <NuxtLink to="/" class="logo">VMall</NuxtLink>
+      <div class="search-box">
+        <input
+          v-model="keywords"
+          class="search-input"
+          type="text"
+          :placeholder="t('shell.searchPlaceholder')"
+          @keyup.enter="search"
+        />
+        <button class="search-btn" type="button" :aria-label="t('common.search')" @click="search">
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+            <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" />
+          </svg>
+        </button>
+        <div class="cart-links">
+          <NuxtLink to="/user" class="cart-link">{{ t("shell.myMall") }}</NuxtLink>
+          <NuxtLink to="/cart" class="cart-link">
+            {{ t("shell.myCart") }}
+            <span v-if="cart.count > 0" class="dot">{{ cart.count }}</span>
+          </NuxtLink>
+        </div>
+      </div>
+      <div class="prefs">
+        <select :value="currency" :aria-label="t('common.currency')" @change="currency = ($event.target as HTMLSelectElement).value">
+          <option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
+        </select>
+        <select :value="locale" :aria-label="t('common.language')" @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')">
+          <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
+        </select>
+      </div>
+    </div>
+    <nav class="nav">
+      <div class="w1200 nav-in">
+        <div
+          class="nav-cats"
+          @mouseenter="menuOpen = true"
+          @mouseleave="menuOpen = false"
+        >
+          {{ t("shell.allCategories") }}
+          <ShellCategoryMenu v-show="showMenu" />
+        </div>
+        <ul class="nav-links">
+          <li><NuxtLink to="/">{{ t("shell.nav.home") }}</NuxtLink></li>
+          <li><NuxtLink to="/stores">{{ t("shell.nav.stores") }}</NuxtLink></li>
+          <li><NuxtLink to="/seckill">{{ t("shell.nav.seckill") }}</NuxtLink></li>
+          <li><NuxtLink to="/collective">{{ t("shell.nav.collective") }}</NuxtLink></li>
+          <li><NuxtLink to="/integral">{{ t("shell.nav.integral") }}</NuxtLink></li>
+          <li><NuxtLink to="/user">{{ t("shell.nav.help") }}</NuxtLink></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.hdr {
+  background: #fff;
+}
+.hdr-top {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  padding: 24px 0;
+}
+.logo {
+  font-size: 34px;
+  font-weight: 800;
+  color: var(--mall-red);
+  text-decoration: none;
+  letter-spacing: 1px;
+}
+.search-box {
+  display: flex;
+  align-items: center;
+}
+.search-input {
+  width: 434px;
+  height: 38px;
+  padding: 10px;
+  outline: 0;
+  border: 1px solid var(--mall-line);
+  border-right: none;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+.search-btn {
+  border: 1px solid var(--mall-line);
+  width: 38px;
+  height: 38px;
+  background: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search-btn:hover {
+  color: #fff;
+  background: var(--mall-nav);
+}
+.cart-links {
+  display: flex;
+  height: 38px;
+  border: 1px solid var(--mall-line);
+  margin-left: 30px;
+  box-sizing: border-box;
+  font-size: 12px;
+  line-height: 38px;
+  padding: 0 20px;
+  gap: 20px;
+}
+.cart-link {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+}
+.cart-link:hover {
+  color: var(--mall-red);
+}
+.dot {
+  position: absolute;
+  top: -12px;
+  right: -14px;
+  line-height: 16px;
+  background: var(--mall-red);
+  padding: 0 4px;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 11px;
+}
+.prefs {
+  display: flex;
+  gap: 8px;
+}
+.prefs select {
+  height: 30px;
+  min-width: 76px;
+  padding: 0 6px;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+  font-size: 12px;
+}
+.nav {
+  height: 40px;
+  background: var(--mall-nav);
+  font-size: 14px;
+  line-height: 40px;
+  color: #fff;
+}
+.nav-in {
+  display: flex;
+}
+.nav-cats {
+  position: relative;
+  cursor: pointer;
+  width: 240px;
+  background: var(--mall-red);
+  box-sizing: border-box;
+  padding-left: 15px;
+}
+.nav-links {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 20px;
+}
+.nav-links a {
+  line-height: 40px;
+  padding: 0 30px;
+  color: #fff;
+  display: block;
+  text-decoration: none;
+}
+.nav-links a:hover {
+  background: #000;
+}
+</style>
diff --git a/apps/mall/components/shell/TopBar.vue b/apps/mall/components/shell/TopBar.vue
new file mode 100644
index 0000000..64a1fdd
--- /dev/null
+++ b/apps/mall/components/shell/TopBar.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const session = useSessionStore();
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="topbar">
+    <div class="w1200 topbar-in">
+      <ul class="left">
+        <li><NuxtLink to="/">{{ t("shell.officialSite") }}</NuxtLink></li>
+        <li>|</li>
+        <li><NuxtLink to="/">{{ t("shell.mallHome") }}</NuxtLink></li>
+        <li>|</li>
+        <li><NuxtLink to="/">{{ t("shell.contact") }}</NuxtLink></li>
+        <li>|</li>
+        <li><NuxtLink to="/">{{ t("shell.about") }}</NuxtLink></li>
+        <li>|</li>
+        <li class="city">{{ t("shell.city") }}</li>
+      </ul>
+      <ul class="right">
+        <template v-if="session.isLoggedIn">
+          <li>{{ t("shell.welcome") }}<NuxtLink to="/user" class="red">{{ session.user?.display_name }}</NuxtLink></li>
+          <li>|</li>
+          <li><NuxtLink to="/user">{{ t("shell.userCenter") }}</NuxtLink></li>
+          <li>|</li>
+          <li class="clickable" @click="session.logout()">{{ t("shell.logout") }}</li>
+        </template>
+        <template v-else>
+          <li><NuxtLink to="/login" class="red">{{ t("shell.login") }}</NuxtLink></li>
+          <li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
+        </template>
+        <li>|</li>
+        <li><NuxtLink to="/stores" class="red">{{ t("shell.sellerJoin") }}</NuxtLink></li>
+        <li>|</li>
+        <li><NuxtLink to="/">{{ t("shell.mobile") }}</NuxtLink></li>
+        <li>|</li>
+        <li><NuxtLink to="/">{{ t("shell.appDownload") }}</NuxtLink></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.topbar {
+  border-bottom: 1px solid var(--mall-line);
+  height: 30px;
+  background: #f9f9f9;
+  font-size: 12px;
+  line-height: 30px;
+}
+.topbar-in {
+  display: flex;
+  justify-content: space-between;
+}
+ul {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li {
+  padding: 0 5px;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:hover,
+.clickable:hover {
+  color: var(--mall-red);
+  cursor: pointer;
+}
+.red {
+  color: var(--mall-red);
+}
+.city {
+  color: var(--mall-red);
+}
+</style>
diff --git a/apps/mall/components/ui/Breadcrumb.vue b/apps/mall/components/ui/Breadcrumb.vue
new file mode 100644
index 0000000..6dab77c
--- /dev/null
+++ b/apps/mall/components/ui/Breadcrumb.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{ items: { label: string; to?: string }[] }>();
+</script>
+
+<template>
+  <nav class="crumbs w1200" aria-label="breadcrumb">
+    <template v-for="(item, i) in items" :key="i">
+      <NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
+      <span v-else class="here">{{ item.label }}</span>
+      <span v-if="i < items.length - 1" class="sep">/</span>
+    </template>
+  </nav>
+</template>
+
+<style scoped>
+.crumbs {
+  margin: 20px auto;
+  font-size: 13px;
+  color: var(--mall-muted);
+}
+a {
+  color: var(--mall-muted);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--mall-red);
+}
+.sep {
+  margin: 0 8px;
+  color: var(--mall-faint);
+}
+.here {
+  color: var(--mall-ink);
+}
+</style>
diff --git a/apps/mall/components/ui/Carousel.vue b/apps/mall/components/ui/Carousel.vue
new file mode 100644
index 0000000..0a03b9d
--- /dev/null
+++ b/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>
diff --git a/apps/mall/components/ui/EmptyState.vue b/apps/mall/components/ui/EmptyState.vue
new file mode 100644
index 0000000..08c9ac7
--- /dev/null
+++ b/apps/mall/components/ui/EmptyState.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ text?: string }>(), { text: "" });
+</script>
+
+<template>
+  <div class="empty">
+    <div class="icon">∅</div>
+    <p>{{ text || $t("common.empty") }}</p>
+  </div>
+</template>
+
+<style scoped>
+.empty {
+  padding: 60px 0;
+  text-align: center;
+  color: var(--mall-faint);
+}
+.icon {
+  font-size: 40px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/apps/mall/components/ui/Modal.vue b/apps/mall/components/ui/Modal.vue
new file mode 100644
index 0000000..12a51e2
--- /dev/null
+++ b/apps/mall/components/ui/Modal.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+defineProps<{ open: boolean; title?: string }>();
+const emit = defineEmits<{ close: [] }>();
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="mask" @click.self="emit('close')">
+      <div class="dialog">
+        <header v-if="title" class="head">
+          <span>{{ title }}</span>
+          <button type="button" class="x" :aria-label="$t('common.cancel')" @click="emit('close')">×</button>
+        </header>
+        <div class="body">
+          <slot />
+        </div>
+        <footer v-if="$slots.footer" class="foot">
+          <slot name="footer" />
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 900;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dialog {
+  background: #fff;
+  min-width: 420px;
+  max-width: 720px;
+  border-radius: 4px;
+  box-shadow: var(--mall-shadow);
+}
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--mall-line);
+  font-size: 15px;
+}
+.x {
+  border: 0;
+  background: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--mall-muted);
+}
+.body {
+  padding: 20px;
+}
+.foot {
+  padding: 12px 20px;
+  border-top: 1px solid var(--mall-line);
+  text-align: right;
+}
+</style>
diff --git a/apps/mall/components/ui/Pagination.vue b/apps/mall/components/ui/Pagination.vue
new file mode 100644
index 0000000..ea04352
--- /dev/null
+++ b/apps/mall/components/ui/Pagination.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const props = defineProps<{ page: number; total: number; perPage: number }>();
+const emit = defineEmits<{ change: [page: number] }>();
+
+const pages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
+const window_ = computed(() => {
+  const p = props.page;
+  const n = pages.value;
+  const start = Math.max(1, Math.min(p - 2, n - 4));
+  const out: number[] = [];
+  for (let i = start; i <= Math.min(n, start + 4); i++) out.push(i);
+  return out;
+});
+
+function go(p: number): void {
+  if (p >= 1 && p <= pages.value && p !== props.page) emit("change", p);
+}
+</script>
+
+<template>
+  <nav v-if="pages > 1" class="pager">
+    <button type="button" :disabled="page <= 1" @click="go(page - 1)">{{ $t("common.prev") }}</button>
+    <button
+      v-for="p in window_"
+      :key="p"
+      type="button"
+      :class="{ on: p === page }"
+      @click="go(p)"
+    >{{ p }}</button>
+    <button type="button" :disabled="page >= pages" @click="go(page + 1)">{{ $t("common.next") }}</button>
+  </nav>
+</template>
+
+<style scoped>
+.pager {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  margin: 30px 0;
+}
+button {
+  min-width: 34px;
+  height: 34px;
+  border: 1px solid var(--mall-line-dark);
+  background: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: var(--mall-radius);
+}
+button.on {
+  background: var(--mall-red);
+  border-color: var(--mall-red);
+  color: #fff;
+}
+button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>
diff --git a/apps/mall/components/ui/ProductCard.vue b/apps/mall/components/ui/ProductCard.vue
new file mode 100644
index 0000000..3528a4c
--- /dev/null
+++ b/apps/mall/components/ui/ProductCard.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { Product } from "@vmall/shared";
+import { t as pick } from "@vmall/shared";
+import { commentCountOf, lowestSku, salesOf } from "~/mock/data";
+
+const props = defineProps<{ product: Product }>();
+const { locale } = useI18n();
+
+const sku = computed(() => lowestSku(props.product));
+const sales = computed(() => salesOf(props.product));
+const comments = computed(() => commentCountOf(props.product));
+</script>
+
+<template>
+  <NuxtLink :to="`/goods/${product.slug}`" class="card hover-lift">
+    <div class="img">
+      <img :src="product.images[0] || '/mock/product-1.svg'" :alt="pick(product.name, locale)" loading="lazy" />
+    </div>
+    <div class="body">
+      <p class="name">{{ pick(product.name, locale) }}</p>
+      <p class="sub">{{ pick(product.description, locale) }}</p>
+      <p class="price-row">
+        <span v-if="sku" class="price"><PriceText :amount-minor="sku.price_minor" :currency="sku.currency" /></span>
+        <s v-if="sku" class="market"><PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" /></s>
+      </p>
+      <p class="meta">{{ $t("product.salesCount", { n: sales }) }} · {{ $t("product.commentCount", { n: comments }) }}</p>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.card {
+  display: block;
+  background: #fff;
+  text-decoration: none;
+  color: inherit;
+  border: 1px solid var(--mall-line);
+}
+.img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+.img img {
+  width: 180px;
+  height: 180px;
+  object-fit: contain;
+}
+.body {
+  padding: 0 14px 14px;
+}
+.name {
+  font-size: 13px;
+  line-height: 1.4;
+  height: 37px;
+  overflow: hidden;
+  margin: 0;
+}
+.card:hover .name {
+  color: var(--mall-red);
+}
+.sub {
+  font-size: 12px;
+  color: var(--mall-faint);
+  margin: 4px 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.price-row {
+  margin: 0;
+}
+.price {
+  color: var(--mall-red);
+  font-size: 16px;
+  font-weight: 700;
+  margin-right: 8px;
+}
+.market {
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.meta {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--mall-faint);
+}
+</style>
diff --git a/apps/mall/components/ui/QtyStepper.vue b/apps/mall/components/ui/QtyStepper.vue
new file mode 100644
index 0000000..42530ea
--- /dev/null
+++ b/apps/mall/components/ui/QtyStepper.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ modelValue: number; max?: number }>(), { max: 999 });
+const emit = defineEmits<{ "update:modelValue": [v: number] }>();
+
+function set(v: number): void {
+  const next = Math.min(props.max, Math.max(1, Math.floor(v) || 1));
+  emit("update:modelValue", next);
+}
+</script>
+
+<template>
+  <div class="stepper">
+    <button type="button" :disabled="modelValue <= 1" @click="set(modelValue - 1)">−</button>
+    <input
+      :value="modelValue"
+      type="number"
+      :min="1"
+      :max="max"
+      @change="set(Number(($event.target as HTMLInputElement).value))"
+    />
+    <button type="button" :disabled="modelValue >= max" @click="set(modelValue + 1)">+</button>
+  </div>
+</template>
+
+<style scoped>
+.stepper {
+  display: inline-flex;
+  border: 1px solid var(--mall-line-dark);
+  border-radius: var(--mall-radius);
+  overflow: hidden;
+}
+button {
+  width: 30px;
+  height: 32px;
+  border: 0;
+  background: #fafafa;
+  cursor: pointer;
+  font-size: 14px;
+}
+button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+input {
+  width: 48px;
+  height: 32px;
+  border: 0;
+  border-left: 1px solid var(--mall-line);
+  border-right: 1px solid var(--mall-line);
+  text-align: center;
+  font-size: 13px;
+  outline: none;
+}
+input::-webkit-inner-spin-button {
+  display: none;
+}
+</style>
diff --git a/apps/mall/components/ui/RatingStars.vue b/apps/mall/components/ui/RatingStars.vue
new file mode 100644
index 0000000..e2171cc
--- /dev/null
+++ b/apps/mall/components/ui/RatingStars.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ value: number; size?: number }>(), { size: 14 });
+const stars = computed(() => [1, 2, 3, 4, 5].map((i) => i <= Math.round(props.value)));
+</script>
+
+<template>
+  <span class="stars" :style="{ fontSize: `${size}px` }">
+    <span v-for="(on, i) in stars" :key="i" :class="{ on }">★</span>
+  </span>
+</template>
+
+<style scoped>
+.stars span {
+  color: #ddd;
+}
+.stars span.on {
+  color: var(--mall-red);
+}
+</style>
diff --git a/apps/mall/components/ui/StepBar.vue b/apps/mall/components/ui/StepBar.vue
new file mode 100644
index 0000000..f10bf8e
--- /dev/null
+++ b/apps/mall/components/ui/StepBar.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+defineProps<{ steps: string[]; active: number }>();
+</script>
+
+<template>
+  <ol class="steps">
+    <li v-for="(s, i) in steps" :key="s" :class="{ done: i < active, on: i === active }">
+      <span class="n">{{ i + 1 }}</span>
+      <span class="label">{{ s }}</span>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.steps {
+  display: flex;
+  list-style: none;
+  margin: 0 0 20px;
+  padding: 14px 0;
+  background: #fafafa;
+  border: 1px solid var(--mall-line);
+}
+li {
+  flex: 1;
+  text-align: center;
+  color: var(--mall-faint);
+  font-size: 13px;
+}
+.n {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  border-radius: 50%;
+  background: #ddd;
+  color: #fff;
+  margin-right: 8px;
+  font-size: 12px;
+}
+li.on {
+  color: var(--mall-red);
+  font-weight: 600;
+}
+li.on .n {
+  background: var(--mall-red);
+}
+li.done .n {
+  background: var(--mall-green);
+}
+</style>
diff --git a/apps/mall/components/ui/Tabs.vue b/apps/mall/components/ui/Tabs.vue
new file mode 100644
index 0000000..3b15753
--- /dev/null
+++ b/apps/mall/components/ui/Tabs.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps<{ tabs: { key: string; label: string }[]; modelValue: string }>();
+const emit = defineEmits<{ "update:modelValue": [key: string] }>();
+</script>
+
+<template>
+  <div class="tabs">
+    <div class="tab-head">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        type="button"
+        :class="{ on: tab.key === modelValue }"
+        @click="emit('update:modelValue', tab.key)"
+      >{{ tab.label }}</button>
+    </div>
+    <div class="tab-body">
+      <slot :active="modelValue" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tab-head {
+  display: flex;
+  border-bottom: 1px solid var(--mall-line);
+}
+.tab-head button {
+  border: 0;
+  background: none;
+  padding: 12px 24px;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--mall-muted);
+  border-bottom: 2px solid transparent;
+}
+.tab-head button.on {
+  color: var(--mall-red);
+  border-bottom-color: var(--mall-red);
+  font-weight: 600;
+}
+.tab-body {
+  padding: 20px 0;
+}
+</style>
diff --git a/apps/mall/locales-extra.ts b/apps/mall/locales-extra.ts
index 1d112c2..d815624 100644
--- a/apps/mall/locales-extra.ts
+++ b/apps/mall/locales-extra.ts
@@ -1,111 +1,53 @@
 // App-local message extensions, deep-merged over @vmall/shared locales.
-// Add keys here (never edit the shared locale files from an app agent).
-export const enExtra = {
-  mall: {
-    catalogTitle: "Shop products",
-    searchPlaceholder: "Search products",
-    categoryPlaceholder: "Choose a category",
-    allCategories: "All categories",
-    clear: "Clear",
-    viewDetails: "View details",
-    noImage: "No image",
-    noProducts: "No products found",
-    productDescription: "Description",
-    attributes: "Attributes",
-    sku: "SKU",
-    chooseSku: "Choose an option",
-    quantity: "Quantity",
-    available: "available",
-    unavailable: "Unavailable",
-    addedToCart: "Added to cart",
-    cartItems: "Cart items",
-    lineTotal: "Line total",
-    orderPreview: "Order preview",
-    checkoutTitle: "Checkout",
-    placeOrder: "Place order",
-    orderSuccess: "Your order has been placed",
-    orderNumbers: "Order numbers",
-    viewOrders: "View orders",
-    backToShop: "Continue shopping",
-    noOrders: "No orders found",
-    created: "Created",
-    items: "Items",
-    address: "Address",
-    shipments: "Shipments",
-    invoices: "Invoices",
-    noInvoice: "No invoice requested",
-    invoiceRequested: "Invoice requested",
-    notAvailable: "—",
-    companyTaxRequired: "Tax number is required for company invoices",
-    invalidQuantity: "Enter a valid quantity",
-    loadFailed: "Unable to load data",
-    signInRequired: "Please sign in to continue",
-    filter: "Filter",
-    details: "Details",
-    update: "Update",
-    confirm: "Confirm",
-    totalItems: "Total items",
-    shippingOptional: "Optional",
-    orderDetails: "Order details",
-    payment: "Payment",
-    requestInvoiceForOrder: "Request an invoice for this order",
-  },
-  auth: {
-    wrongRole: "This account is not a customer account",
-  },
-} as Record<string, unknown>;
+// Each domain module owns its own namespace; register new domains below.
+// (Never edit the shared locale files from an app agent.)
 
-export const zhExtra = {
+import shell from "./locales/shell";
+import home from "./locales/home";
+import search from "./locales/search";
+import product from "./locales/product";
+import cart from "./locales/cart";
+import checkout from "./locales/checkout";
+import auth from "./locales/auth";
+import user from "./locales/user";
+import stores from "./locales/stores";
+import marketing from "./locales/marketing";
+
+type Tree = Record<string, unknown>;
+
+function deepMerge<T extends Tree>(base: T, extra: Tree): T {
+  const out: Tree = { ...base };
+  for (const [k, v] of Object.entries(extra)) {
+    const b = out[k];
+    out[k] = b && v && typeof b === "object" && typeof v === "object"
+      ? deepMerge(b as Tree, v as Tree)
+      : v;
+  }
+  return out as T;
+}
+
+// Keys referenced by retained shared components (PriceText) and generic handlers.
+const legacyEn: Tree = {
   mall: {
-    catalogTitle: "选购商品",
-    searchPlaceholder: "搜索商品",
-    categoryPlaceholder: "选择分类",
-    allCategories: "全部分类",
-    clear: "清除",
-    viewDetails: "查看详情",
-    noImage: "暂无图片",
-    noProducts: "未找到商品",
-    productDescription: "商品描述",
-    attributes: "属性",
-    sku: "SKU",
-    chooseSku: "选择规格",
-    quantity: "数量",
-    available: "件可用",
-    unavailable: "暂不可用",
-    addedToCart: "已加入购物车",
-    cartItems: "购物车商品",
-    lineTotal: "行合计",
-    orderPreview: "订单预览",
-    checkoutTitle: "结算",
-    placeOrder: "提交订单",
-    orderSuccess: "订单提交成功",
-    orderNumbers: "订单号",
-    viewOrders: "查看订单",
-    backToShop: "继续购物",
-    noOrders: "暂无订单",
-    created: "创建时间",
-    items: "商品数",
-    address: "地址",
-    shipments: "发货信息",
-    invoices: "发票",
-    noInvoice: "尚未申请发票",
-    invoiceRequested: "发票已申请",
     notAvailable: "—",
-    companyTaxRequired: "企业发票必须填写税号",
-    invalidQuantity: "请输入有效数量",
-    loadFailed: "无法加载数据",
-    signInRequired: "请先登录",
-    filter: "筛选",
-    details: "详情",
-    update: "更新",
-    confirm: "确认",
-    totalItems: "商品总数",
-    shippingOptional: "可选",
-    orderDetails: "订单详情",
-    payment: "支付",
-    requestInvoiceForOrder: "申请本订单发票",
+    loadFailed: "Unable to load data",
   },
-  auth: {
-    wrongRole: "此账号不是买家账号",
+};
+
+const legacyZh: Tree = {
+  mall: {
+    notAvailable: "—",
+    loadFailed: "加载失败",
   },
-} as Record<string, unknown>;
+};
+
+const domains = [shell, home, search, product, cart, checkout, auth, user, stores, marketing];
+
+export const enExtra: Tree = domains.reduce<Tree>(
+  (acc, m) => deepMerge(acc, m.en as Tree),
+  legacyEn,
+);
+export const zhExtra: Tree = domains.reduce<Tree>(
+  (acc, m) => deepMerge(acc, m.zh as Tree),
+  legacyZh,
+);
diff --git a/apps/mall/locales/auth.ts b/apps/mall/locales/auth.ts
new file mode 100644
index 0000000..8870b8c
--- /dev/null
+++ b/apps/mall/locales/auth.ts
@@ -0,0 +1,72 @@
+export default {
+  en: {
+    auth: {
+      loginTitle: "Account sign in",
+      registerTitle: "Create account",
+      forgotTitle: "Reset password",
+      loginTab: "Account sign in",
+      registerTab: "Create account",
+      forgotTab: "Forgot password",
+      emailPlaceholder: "Enter your email",
+      passwordPlaceholder: "Enter your password",
+      newPassword: "New password",
+      displayNamePlaceholder: "Enter your display name",
+      confirmPassword: "Confirm password",
+      confirmPasswordPlaceholder: "Enter your password again",
+      smsCode: "Verification code",
+      smsCodePlaceholder: "Enter the code",
+      getCode: "Get code",
+      codeCountdown: "Retry in {n}s",
+      loginAction: "Sign in",
+      registerAction: "Create account",
+      resetAction: "Reset password",
+      forgotPassword: "Forgot password?",
+      noAccount: "Don't have an account?",
+      haveAccount: "Already have an account?",
+      registerNow: "Create one now",
+      loginNow: "Sign in now",
+      resetSuccess: "Password reset",
+      resetSuccessHint: "Your password has been reset. Sign in with your new password.",
+      validationRequired: "Please complete all required fields.",
+      validationEmail: "Enter a valid email address.",
+      validationPassword: "Password must be at least 6 characters.",
+      validationMismatch: "Passwords do not match.",
+      requestFailed: "Unable to complete this request. Please try again.",
+    },
+  },
+  zh: {
+    auth: {
+      loginTitle: "账号登录",
+      registerTitle: "注册账号",
+      forgotTitle: "忘记密码",
+      loginTab: "账号登录",
+      registerTab: "注册账号",
+      forgotTab: "忘记密码",
+      emailPlaceholder: "请输入邮箱",
+      passwordPlaceholder: "请输入密码",
+      newPassword: "新密码",
+      displayNamePlaceholder: "请输入昵称",
+      confirmPassword: "确认密码",
+      confirmPasswordPlaceholder: "请再次输入密码",
+      smsCode: "验证码",
+      smsCodePlaceholder: "请输入验证码",
+      getCode: "获取验证码",
+      codeCountdown: "{n} 秒后重试",
+      loginAction: "登录",
+      registerAction: "注册",
+      resetAction: "重置密码",
+      forgotPassword: "忘记密码？",
+      noAccount: "还没有账号？",
+      haveAccount: "已有账号？",
+      registerNow: "立即注册",
+      loginNow: "立即登录",
+      resetSuccess: "密码重置成功",
+      resetSuccessHint: "您的密码已重置，请使用新密码登录。",
+      validationRequired: "请填写所有必填项。",
+      validationEmail: "请输入有效的邮箱地址。",
+      validationPassword: "密码至少需要 6 位。",
+      validationMismatch: "两次输入的密码不一致。",
+      requestFailed: "操作失败，请稍后重试。",
+    },
+  },
+};
diff --git a/apps/mall/locales/cart.ts b/apps/mall/locales/cart.ts
new file mode 100644
index 0000000..bc7f8b9
--- /dev/null
+++ b/apps/mall/locales/cart.ts
@@ -0,0 +1,46 @@
+export default {
+  en: {
+    cart: {
+      title: "Shopping cart",
+      steps: { cart: "Cart", order: "Confirm order", payment: "Payment", complete: "Complete" },
+      empty: "Your cart is empty",
+      continueShopping: "Continue shopping",
+      selectAll: "Select all",
+      selectedCount: "{n} selected",
+      product: "Product",
+      spec: "Specification",
+      unitPrice: "Unit price",
+      quantity: "Quantity",
+      subtotal: "Subtotal",
+      actions: "Actions",
+      remove: "Remove",
+      shop: "Shop",
+      unknownStore: "Store",
+      checkout: "Checkout",
+      loadError: "Unable to load your cart.",
+      updateError: "Unable to update your cart.",
+    },
+  },
+  zh: {
+    cart: {
+      title: "购物车",
+      steps: { cart: "购物车", order: "确认订单", payment: "支付", complete: "完成" },
+      empty: "购物车还是空的",
+      continueShopping: "继续购物",
+      selectAll: "全选",
+      selectedCount: "已选 {n} 件",
+      product: "商品",
+      spec: "规格",
+      unitPrice: "单价",
+      quantity: "数量",
+      subtotal: "小计",
+      actions: "操作",
+      remove: "移除",
+      shop: "店铺",
+      unknownStore: "店铺",
+      checkout: "去结算",
+      loadError: "购物车加载失败，请稍后重试。",
+      updateError: "购物车更新失败，请稍后重试。",
+    },
+  },
+};
diff --git a/apps/mall/locales/checkout.ts b/apps/mall/locales/checkout.ts
new file mode 100644
index 0000000..edb512a
--- /dev/null
+++ b/apps/mall/locales/checkout.ts
@@ -0,0 +1,68 @@
+export default {
+  en: {
+    checkout: {
+      title: "Confirm order",
+      steps: { cart: "Cart", order: "Confirm order", payment: "Payment", complete: "Complete" },
+      address: "Shipping address",
+      defaultAddress: "Default",
+      orderPreview: "Order details",
+      shop: "Shop",
+      remark: "Order remark",
+      remarkPlaceholder: "Add a note for the seller (optional)",
+      total: "Order total",
+      submit: "Place order",
+      noItems: "There are no items to check out.",
+      backToCart: "Back to cart",
+      loadError: "Unable to load the order.",
+      submitError: "Unable to place the order.",
+      paymentTitle: "Choose payment",
+      balance: "Balance payment",
+      wechat: "WeChat Pay",
+      alipay: "Alipay",
+      payTitle: "Pay for your order",
+      orderNo: "Order no.",
+      grandTotal: "Total payment",
+      confirmPay: "Confirm payment",
+      noPendingOrders: "There are no orders waiting for payment.",
+      backHome: "Back to home",
+      payError: "Unable to complete payment.",
+      successTitle: "Payment successful",
+      successMessage: "Your order has been paid successfully.",
+      viewOrders: "View orders",
+      continueShopping: "Continue shopping",
+    },
+  },
+  zh: {
+    checkout: {
+      title: "确认订单",
+      steps: { cart: "购物车", order: "确认订单", payment: "支付", complete: "完成" },
+      address: "收货地址",
+      defaultAddress: "默认地址",
+      orderPreview: "订单商品",
+      shop: "店铺",
+      remark: "订单备注",
+      remarkPlaceholder: "给卖家留言（选填）",
+      total: "订单总额",
+      submit: "提交订单",
+      noItems: "暂无可结算的商品。",
+      backToCart: "返回购物车",
+      loadError: "订单信息加载失败，请稍后重试。",
+      submitError: "订单提交失败，请稍后重试。",
+      paymentTitle: "选择支付方式",
+      balance: "余额支付",
+      wechat: "微信支付",
+      alipay: "支付宝",
+      payTitle: "订单支付",
+      orderNo: "订单号",
+      grandTotal: "应付总额",
+      confirmPay: "确认支付",
+      noPendingOrders: "暂无待支付订单。",
+      backHome: "返回首页",
+      payError: "支付失败，请稍后重试。",
+      successTitle: "订单支付成功",
+      successMessage: "您的订单已支付成功。",
+      viewOrders: "查看订单",
+      continueShopping: "继续购物",
+    },
+  },
+};
diff --git a/apps/mall/locales/home.ts b/apps/mall/locales/home.ts
new file mode 100644
index 0000000..1325d7c
--- /dev/null
+++ b/apps/mall/locales/home.ts
@@ -0,0 +1,17 @@
+// Home page domain strings.
+export default {
+  en: {
+    home: {
+      viewMore: "View more",
+      quickLinks: "Quick links",
+      hotPromo: "Featured",
+    },
+  },
+  zh: {
+    home: {
+      viewMore: "查看更多",
+      quickLinks: "快捷入口",
+      hotPromo: "精选活动",
+    },
+  },
+};
diff --git a/apps/mall/locales/marketing.ts b/apps/mall/locales/marketing.ts
new file mode 100644
index 0000000..3315b30
--- /dev/null
+++ b/apps/mall/locales/marketing.ts
@@ -0,0 +1,82 @@
+export default {
+  en: {
+    marketing: {
+      seckillTitle: "Flash sale",
+      seckillBreadcrumb: "Flash sale",
+      currentSession: "Now",
+      upcoming: "Coming soon",
+      ended: "Ended",
+      countdown: "Ends in {time}",
+      seckillPrice: "Flash price",
+      originalPrice: "Original price",
+      progress: "Sold {n}%",
+      buyNow: "Grab now",
+      noSeckillProducts: "No flash-sale products right now.",
+      collectiveTitle: "Group deals",
+      collectiveBreadcrumb: "Group deals",
+      collectiveBannerAlt: "Group deal promotion",
+      peopleGroup: "{n} people group",
+      peopleJoined: "{n} people joined",
+      joinGroup: "View deal",
+      noCollectiveProducts: "No group deals right now.",
+      integralTitle: "Points mall",
+      integralBreadcrumb: "Points mall",
+      integralBannerAlt: "Points mall promotion",
+      loginPrompt: "Sign in to see your points",
+      pointsBalance: "My points",
+      customize: "Personal customization",
+      shipping: "Ships within 24 hours",
+      support: "Priority support",
+      recommendation: "Popular rewards",
+      points: "{n} points",
+      marketPrice: "Market price",
+      stock: "Stock {n}",
+      redeem: "Redeem now",
+      redeemed: "Redeemed",
+      mockNotice: "Demo redemption completed",
+      login: "Sign in",
+      register: "Create account",
+      noIntegralProducts: "No rewards available right now.",
+    },
+  },
+  zh: {
+    marketing: {
+      seckillTitle: "限时秒杀",
+      seckillBreadcrumb: "秒杀活动",
+      currentSession: "正在进行",
+      upcoming: "即将开始",
+      ended: "已结束",
+      countdown: "距结束 {time}",
+      seckillPrice: "秒杀价",
+      originalPrice: "原价",
+      progress: "已抢 {n}%",
+      buyNow: "马上抢",
+      noSeckillProducts: "当前暂无秒杀商品。",
+      collectiveTitle: "拼团购",
+      collectiveBreadcrumb: "拼团",
+      collectiveBannerAlt: "拼团活动",
+      peopleGroup: "{n}人团",
+      peopleJoined: "{n}人已拼",
+      joinGroup: "查看详情",
+      noCollectiveProducts: "当前暂无拼团商品。",
+      integralTitle: "积分商城",
+      integralBreadcrumb: "积分商城",
+      integralBannerAlt: "积分商城活动",
+      loginPrompt: "登录后查看您的积分",
+      pointsBalance: "我的积分",
+      customize: "私人定制",
+      shipping: "24小时发货",
+      support: "优先客服",
+      recommendation: "热门推荐",
+      points: "{n}积分",
+      marketPrice: "市场价",
+      stock: "库存 {n}",
+      redeem: "立即兑换",
+      redeemed: "已兑换",
+      mockNotice: "模拟兑换成功",
+      login: "登录",
+      register: "注册",
+      noIntegralProducts: "当前暂无积分商品。",
+    },
+  },
+} as const;
diff --git a/apps/mall/locales/product.ts b/apps/mall/locales/product.ts
new file mode 100644
index 0000000..c4ba660
--- /dev/null
+++ b/apps/mall/locales/product.ts
@@ -0,0 +1,93 @@
+// Product browse/detail domain strings (foundation-owned base keys; extend, don't remove).
+export default {
+  en: {
+    product: {
+      salesCount: "{n} sold",
+      commentCount: "{n} reviews",
+      home: "Home",
+      detail: "Product details",
+      currentPrice: "Sale price",
+      marketPrice: "Market price",
+      stock: "In stock: {n}",
+      sold: "{n} sold",
+      coupon: "Coupon",
+      coupons: "Available coupons",
+      claim: "Claim",
+      choose: "Choose",
+      selected: "Selected",
+      quantity: "Quantity",
+      buyNow: "Buy now",
+      addCart: "Add to cart",
+      addedCart: "Added to cart",
+      favorite: "Favorite",
+      unfavorite: "Unfavorite",
+      noStock: "Out of stock",
+      unavailable: "This combination is unavailable",
+      store: "Store",
+      quality: "Product quality",
+      company: "Company",
+      region: "Region",
+      rates: "Store ratings",
+      overall: "Overall",
+      service: "Service",
+      delivery: "Delivery",
+      enterStore: "Visit store",
+      contact: "Contact seller",
+      salesRank: "Best sellers",
+      tabsDetail: "Product details",
+      tabsReviews: "Customer reviews",
+      tabsAfterSale: "After-sales service",
+      description: "Description",
+      reviewSummary: "{rate}% positive reviews ({n} total)",
+      reviewAll: "All reviews",
+      reply: "Seller reply",
+      expires: "Expires {date}",
+      productNotFound: "Product not found",
+    },
+  },
+  zh: {
+    product: {
+      salesCount: "已售 {n} 件",
+      commentCount: "{n} 条评价",
+      home: "首页",
+      detail: "商品详情",
+      currentPrice: "活动价",
+      marketPrice: "市场价",
+      stock: "库存 {n} 件",
+      sold: "已售 {n} 件",
+      coupon: "优惠券",
+      coupons: "可用优惠券",
+      claim: "领取",
+      choose: "选择",
+      selected: "已选",
+      quantity: "数量",
+      buyNow: "立即购买",
+      addCart: "加入购物车",
+      addedCart: "已加入购物车",
+      favorite: "收藏",
+      unfavorite: "取消收藏",
+      noStock: "暂时缺货",
+      unavailable: "该规格暂不可用",
+      store: "店铺",
+      quality: "商品质量",
+      company: "公司",
+      region: "所在地区",
+      rates: "店铺评分",
+      overall: "描述相符",
+      service: "服务态度",
+      delivery: "物流服务",
+      enterStore: "进入店铺",
+      contact: "联系客服",
+      salesRank: "销售排行",
+      tabsDetail: "商品详情",
+      tabsReviews: "用户评价",
+      tabsAfterSale: "售后服务",
+      description: "商品描述",
+      reviewSummary: "好评率 {rate}%（共 {n} 条评价）",
+      reviewAll: "全部评价",
+      reply: "商家回复",
+      expires: "有效期至 {date}",
+      productNotFound: "商品不存在",
+    },
+  },
+};
diff --git a/apps/mall/locales/search.ts b/apps/mall/locales/search.ts
new file mode 100644
index 0000000..5d1e963
--- /dev/null
+++ b/apps/mall/locales/search.ts
@@ -0,0 +1,40 @@
+export default {
+  en: {
+    search: {
+      home: "Home",
+      searchResults: 'Results for "{keyword}"',
+      productList: "Product list",
+      category: "Category",
+      all: "All",
+      brand: "Brand",
+      sort: "Sort",
+      defaultSort: "Default",
+      price: "Price",
+      sales: "Sales",
+      comments: "Reviews",
+      ascending: "Ascending",
+      descending: "Descending",
+      empty: "No products found",
+      resultCount: "{n} products",
+    },
+  },
+  zh: {
+    search: {
+      home: "首页",
+      searchResults: '搜索 “{keyword}” 结果列表',
+      productList: "商品列表",
+      category: "商品分类",
+      all: "全部",
+      brand: "品牌筛选",
+      sort: "筛选排序",
+      defaultSort: "默认",
+      price: "价格",
+      sales: "销量",
+      comments: "评论",
+      ascending: "升序",
+      descending: "降序",
+      empty: "暂无相关商品",
+      resultCount: "共 {n} 件商品",
+    },
+  },
+};
diff --git a/apps/mall/locales/shell.ts b/apps/mall/locales/shell.ts
new file mode 100644
index 0000000..dd6223a
--- /dev/null
+++ b/apps/mall/locales/shell.ts
@@ -0,0 +1,79 @@
+// Shell chrome: top bar, header/search/nav, category menu, footer.
+export default {
+  en: {
+    shell: {
+      officialSite: "Official Site",
+      mallHome: "Mall Home",
+      contact: "Contact Us",
+      about: "About Us",
+      login: "Sign in",
+      register: "Register",
+      welcome: "Welcome,",
+      userCenter: "My Account",
+      logout: "Sign out",
+      sellerJoin: "Sell on VMall",
+      mobile: "Mobile",
+      appDownload: "App",
+      city: "San Francisco",
+      searchPlaceholder: "phones, laptops, clothing",
+      myMall: "My VMall",
+      myCart: "My Cart",
+      allCategories: "All Categories",
+      nav: {
+        home: "Home",
+        stores: "Stores",
+        seckill: "Flash Sale",
+        collective: "Group Buy",
+        integral: "Points Mall",
+        help: "Help Center",
+      },
+      footer: {
+        v1: "Fortune-500 quality",
+        v2: "7-day returns, 15-day exchanges",
+        v3: "Free shipping over $99",
+        v4: "448 service centers nationwide",
+        copyright: "VMall Demo Mall — all content is fixed mock data.",
+        icp: "Mock ICP 2026-0001",
+      },
+      backToTop: "Top",
+    },
+  },
+  zh: {
+    shell: {
+      officialSite: "官网首页",
+      mallHome: "商城首页",
+      contact: "联系我们",
+      about: "关于我们",
+      login: "登录",
+      register: "注册",
+      welcome: "欢迎您，",
+      userCenter: "个人中心",
+      logout: "退出登录",
+      sellerJoin: "商家入驻",
+      mobile: "手机端",
+      appDownload: "APP下载",
+      city: "旧金山",
+      searchPlaceholder: "手机 笔记本电脑 衣服",
+      myMall: "我的商城",
+      myCart: "我的购物车",
+      allCategories: "全部商品分类",
+      nav: {
+        home: "首页",
+        stores: "店铺街",
+        seckill: "秒杀",
+        collective: "拼团",
+        integral: "积分商城",
+        help: "帮助中心",
+      },
+      footer: {
+        v1: "500强企业 品质保证",
+        v2: "7天退货 15天换货",
+        v3: "满99美元免运费",
+        v4: "448家维修网点 全国联保",
+        copyright: "VMall 演示商城 —— 所有内容均为固定 mock 数据。",
+        icp: "模拟备案号 2026-0001",
+      },
+      backToTop: "顶部",
+    },
+  },
+};
diff --git a/apps/mall/locales/stores.ts b/apps/mall/locales/stores.ts
new file mode 100644
index 0000000..6bcd2cc
--- /dev/null
+++ b/apps/mall/locales/stores.ts
@@ -0,0 +1,60 @@
+export default {
+  en: {
+    stores: {
+      breadcrumbHome: "Home",
+      directory: "Store directory",
+      sortDefault: "Default",
+      sortDistance: "Distance",
+      distance: "{n} km away",
+      positiveRate: "Positive reviews 100%",
+      visitStore: "Visit store",
+      company: "Company",
+      region: "Region",
+      address: "Address",
+      storeProfile: "Store profile",
+      score: "Overall",
+      agreement: "Product",
+      service: "Service",
+      speed: "Delivery",
+      favorite: "Follow store",
+      favorited: "Following",
+      salesRank: "Top sellers",
+      storeProducts: "Store products",
+      sortPrice: "Price",
+      sortSales: "Sales",
+      sortComments: "Reviews",
+      noProducts: "This store has no products yet.",
+      unknownStore: "Store not found",
+      backToStores: "Back to stores",
+    },
+  },
+  zh: {
+    stores: {
+      breadcrumbHome: "首页",
+      directory: "店铺街",
+      sortDefault: "默认",
+      sortDistance: "距离",
+      distance: "距离 {n} 公里",
+      positiveRate: "好评率 100%",
+      visitStore: "进入店铺",
+      company: "公司",
+      region: "地区",
+      address: "地址",
+      storeProfile: "店铺信息",
+      score: "综合评分",
+      agreement: "商品质量",
+      service: "服务态度",
+      speed: "发货速度",
+      favorite: "收藏店铺",
+      favorited: "已收藏",
+      salesRank: "本店销量排行",
+      storeProducts: "店内商品",
+      sortPrice: "价格",
+      sortSales: "销量",
+      sortComments: "评论",
+      noProducts: "店铺暂时没有商品。",
+      unknownStore: "店铺不存在",
+      backToStores: "返回店铺街",
+    },
+  },
+} as const;
diff --git a/apps/mall/locales/user.ts b/apps/mall/locales/user.ts
new file mode 100644
index 0000000..a99a5ff
--- /dev/null
+++ b/apps/mall/locales/user.ts
@@ -0,0 +1,184 @@
+export default {
+  en: {
+    user: {
+      title: "My account",
+      editProfile: "Edit profile",
+      orderCenter: "Orders",
+      memberCenter: "Membership",
+      dashboard: "Account overview",
+      myOrders: "My orders",
+      addresses: "Shipping addresses",
+      coupons: "My coupons",
+      favorites: "Favorites",
+      invoices: "My invoices",
+      statsBalance: "Balance",
+      statsPoints: "Points",
+      statsFrozen: "Frozen funds",
+      pendingPayment: "To pay",
+      pendingShipment: "To ship",
+      pendingReceipt: "To receive",
+      completed: "Completed",
+      afterSale: "After-sale",
+      recentOrders: "Recent orders",
+      favoriteProducts: "Favorite products",
+      viewAll: "View all",
+      noOrders: "No orders yet.",
+      noFavorites: "No favorites yet.",
+      orderNo: "Order no.",
+      createdAt: "Created",
+      shop: "Shop",
+      orderTotal: "Order total",
+      viewDetails: "View details",
+      payNow: "Pay now",
+      cancelOrder: "Cancel order",
+      ordersTitle: "My orders",
+      filterAll: "All",
+      filterPendingPayment: "To pay",
+      filterPendingShipment: "To ship",
+      filterPendingReceipt: "To receive",
+      filterCompleted: "Completed",
+      filterCancelled: "Cancelled",
+      orderDetail: "Order details",
+      shippingAddress: "Shipping address",
+      orderItems: "Order items",
+      total: "Total",
+      product: "Product",
+      shipments: "Shipments",
+      shipmentNo: "Shipment no.",
+      carrier: "Carrier",
+      trackingNo: "Tracking no.",
+      confirmDelivery: "Confirm delivery",
+      noShipments: "No shipment information yet.",
+      invoiceRequest: "Request invoice",
+      invoiceTitle: "Invoice title",
+      taxNo: "Tax number (optional)",
+      invoiceKind: "Invoice type",
+      personal: "Personal",
+      company: "Company",
+      submitInvoice: "Request invoice",
+      invoiceSuccess: "Invoice request submitted.",
+      addAddress: "Add address",
+      editAddress: "Edit address",
+      recipient: "Recipient",
+      phone: "Phone",
+      region: "State / Province",
+      city: "City",
+      line1: "Street address",
+      postalCode: "Postal code",
+      defaultAddress: "Default",
+      setDefault: "Set as default",
+      saveAddress: "Save address",
+      noAddresses: "No shipping addresses yet.",
+      favoritesTitle: "Favorites",
+      favoriteProductsTab: "Products",
+      favoriteStoresTab: "Stores",
+      removeFavorite: "Remove favorite",
+      enterStore: "Enter store",
+      noFavoriteStores: "No favorite stores yet.",
+      couponsTitle: "My coupons",
+      couponTitle: "Coupon",
+      amount: "Amount",
+      threshold: "Minimum spend",
+      expiresAt: "Expires",
+      noCoupons: "No coupons yet.",
+      invoicesTitle: "My invoices",
+      invoiceNo: "Invoice no.",
+      invoiceOrderNo: "Order no.",
+      invoiceIssuedAt: "Issued at",
+      noInvoices: "No invoices yet.",
+      validationRequired: "Please complete the required fields.",
+      loadFailed: "Unable to load your account data.",
+    },
+  },
+  zh: {
+    user: {
+      title: "我的账户",
+      editProfile: "编辑资料",
+      orderCenter: "订单中心",
+      memberCenter: "会员中心",
+      dashboard: "个人中心",
+      myOrders: "我的订单",
+      addresses: "收货地址",
+      coupons: "我的优惠券",
+      favorites: "收藏/关注",
+      invoices: "我的发票",
+      statsBalance: "账户余额",
+      statsPoints: "账户积分",
+      statsFrozen: "冻结资金",
+      pendingPayment: "待付款",
+      pendingShipment: "待发货",
+      pendingReceipt: "待收货",
+      completed: "已完成",
+      afterSale: "售后中",
+      recentOrders: "最近订单",
+      favoriteProducts: "收藏的宝贝",
+      viewAll: "查看全部",
+      noOrders: "暂无订单。",
+      noFavorites: "暂无收藏。",
+      orderNo: "订单号",
+      createdAt: "创建时间",
+      shop: "店铺",
+      orderTotal: "订单总额",
+      viewDetails: "查看详情",
+      payNow: "付款",
+      cancelOrder: "取消订单",
+      ordersTitle: "我的订单",
+      filterAll: "全部",
+      filterPendingPayment: "待付款",
+      filterPendingShipment: "待发货",
+      filterPendingReceipt: "待收货",
+      filterCompleted: "已完成",
+      filterCancelled: "已取消",
+      orderDetail: "订单详情",
+      shippingAddress: "收货地址",
+      orderItems: "商品信息",
+      total: "合计",
+      product: "商品",
+      shipments: "物流信息",
+      shipmentNo: "发货单号",
+      carrier: "承运商",
+      trackingNo: "物流单号",
+      confirmDelivery: "确认收货",
+      noShipments: "暂无物流信息。",
+      invoiceRequest: "申请发票",
+      invoiceTitle: "发票抬头",
+      taxNo: "税号（选填）",
+      invoiceKind: "发票类型",
+      personal: "个人",
+      company: "企业",
+      submitInvoice: "提交申请",
+      invoiceSuccess: "发票申请已提交。",
+      addAddress: "新增地址",
+      editAddress: "编辑地址",
+      recipient: "收货人",
+      phone: "联系电话",
+      region: "省/州",
+      city: "城市",
+      line1: "详细地址",
+      postalCode: "邮编",
+      defaultAddress: "默认",
+      setDefault: "设为默认",
+      saveAddress: "保存地址",
+      noAddresses: "暂无收货地址。",
+      favoritesTitle: "我的收藏",
+      favoriteProductsTab: "商品",
+      favoriteStoresTab: "店铺",
+      removeFavorite: "取消收藏",
+      enterStore: "进入店铺",
+      noFavoriteStores: "暂无关注店铺。",
+      couponsTitle: "我的优惠券",
+      couponTitle: "优惠券",
+      amount: "优惠金额",
+      threshold: "使用门槛",
+      expiresAt: "有效期至",
+      noCoupons: "暂无优惠券。",
+      invoicesTitle: "我的发票",
+      invoiceNo: "发票号",
+      invoiceOrderNo: "订单号",
+      invoiceIssuedAt: "开具时间",
+      noInvoices: "暂无发票。",
+      validationRequired: "请填写必填项。",
+      loadFailed: "账户数据加载失败。",
+    },
+  },
+};
diff --git a/apps/mall/mock/api.ts b/apps/mall/mock/api.ts
new file mode 100644
index 0000000..a619055
--- /dev/null
+++ b/apps/mall/mock/api.ts
@@ -0,0 +1,340 @@
+// Mock API adapter: implements the full @vmall/shared ApiClient surface with
+// fixed data + in-memory cart/order state. Pages call $api exactly as they
+// would against the live backend, so switching back is a config flip.
+
+import { ApiError } from "@vmall/shared";
+import type {
+  Address,
+  ApiClient,
+  AuthTokens,
+  Cart,
+  CartItem,
+  Invoice,
+  InvoiceKind,
+  Order,
+  Product,
+  Shipment,
+  User,
+} from "@vmall/shared";
+import {
+  BASE_CURRENCY,
+  MOCK_CATEGORIES,
+  MOCK_CURRENCIES,
+  MOCK_USER,
+  defaultAddress,
+  mockConvertMinor,
+  productById,
+  searchMockProducts,
+  seedOrders,
+} from "./data";
+
+interface MockState {
+  token: string | null;
+  cart: CartItem[];
+  orders: Order[];
+  shipments: Shipment[];
+  invoices: Invoice[];
+  orderSeq: number;
+  invoiceSeq: number;
+}
+
+const STORAGE_KEY = "vmall.mock.state.v1";
+
+type PersistedState = Pick<MockState, "cart" | "orders" | "shipments" | "invoices" | "orderSeq" | "invoiceSeq">;
+
+// Load cart/order session state persisted by a previous page load (client only).
+function loadPersisted(): PersistedState | null {
+  if (!import.meta.client) return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed: unknown = JSON.parse(raw);
+    if (typeof parsed !== "object" || parsed === null) return null;
+    const p = parsed as Partial<PersistedState>;
+    if (!Array.isArray(p.cart) || !Array.isArray(p.orders)) return null;
+    if (!Array.isArray(p.shipments) || !Array.isArray(p.invoices)) return null;
+    if (typeof p.orderSeq !== "number" || typeof p.invoiceSeq !== "number") return null;
+    return p as PersistedState;
+  } catch {
+    return null;
+  }
+}
+
+function initialState(): MockState {
+  const persisted = loadPersisted();
+  if (persisted) return { token: null, ...persisted };
+  const seed = seedOrders(MOCK_USER.id);
+  return {
+    token: null,
+    cart: [],
+    orders: seed.orders,
+    shipments: seed.shipments,
+    invoices: seed.invoices,
+    orderSeq: 100,
+    invoiceSeq: 100,
+  };
+}
+
+function unsupported(): never {
+  throw new ApiError(501, "MOCK_UNSUPPORTED", "This admin/shop endpoint is not part of the mall mock.");
+}
+
+
+function skuIndex(): Record<string, { product: Product; skuId: string }> {
+  const index: Record<string, { product: Product; skuId: string }> = {};
+  for (const p of searchMockProducts({ perPage: 1000 }).items) {
+    for (const s of p.skus ?? []) index[s.id] = { product: p, skuId: s.id };
+  }
+  return index;
+}
+
+export function createMockApi(): ApiClient {
+  const state = initialState();
+  function persist(): void {
+    if (!import.meta.client) return;
+    try {
+      const snapshot: PersistedState = {
+        cart: state.cart,
+        orders: state.orders,
+        shipments: state.shipments,
+        invoices: state.invoices,
+        orderSeq: state.orderSeq,
+        invoiceSeq: state.invoiceSeq,
+      };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+    } catch {
+      /* storage unavailable: keep in-memory only */
+    }
+  }
+
+  function tokens(): AuthTokens {
+    state.token = `mock-token-${Date.now()}`;
+    return { token: state.token, user: MOCK_USER };
+  }
+
+  function cartSnapshot(): Cart {
+    return { items: state.cart.map((i) => ({ ...i })) };
+  }
+
+  function nextOrderNo(): string {
+    state.orderSeq += 1;
+    return `VM20260917${String(state.orderSeq).padStart(3, "0")}`;
+  }
+
+  return {
+    register: () => Promise.resolve(tokens()),
+    login: () => Promise.resolve(tokens()),
+    me: (): Promise<User> => Promise.resolve(MOCK_USER),
+
+    listProducts: (q = {}) =>
+      Promise.resolve(
+        searchMockProducts({
+          q: q.q,
+          categoryId: q.category_id,
+          shopId: q.shop_id,
+          page: q.page,
+          perPage: q.per_page,
+        }),
+      ),
+
+    getProduct: (idOrSlug) => {
+      const product = productById(idOrSlug);
+      if (!product) return Promise.reject(new ApiError(404, "NOT_FOUND", "Product not found"));
+      return Promise.resolve(product);
+    },
+
+    listCategories: () => Promise.resolve(MOCK_CATEGORIES),
+    listCurrencies: () => Promise.resolve(MOCK_CURRENCIES),
+    convert: (amountMinor, from, to) =>
+      Promise.resolve({ amount_minor: mockConvertMinor(amountMinor, from, to), currency: to }),
+
+    getCart: () => Promise.resolve(cartSnapshot()),
+
+    addCartItem: (skuId, qty) => {
+      const entry = skuIndex()[skuId];
+      if (!entry) return Promise.reject(new ApiError(404, "NOT_FOUND", "SKU not found"));
+      const sku = entry.product.skus?.find((s) => s.id === skuId);
+      if (!sku || !sku.active) return Promise.reject(new ApiError(400, "SKU_INACTIVE", "SKU is not available"));
+      const existing = state.cart.find((i) => i.sku_id === skuId);
+      const nextQty = (existing?.qty ?? 0) + qty;
+      if (nextQty > sku.stock) return Promise.reject(new ApiError(400, "OUT_OF_STOCK", "Not enough stock"));
+      if (existing) existing.qty = nextQty;
+      else {
+        state.cart.push({
+          sku_id: skuId,
+          product_id: entry.product.id,
+          product_name: entry.product.name,
+          sku_code: sku.sku_code,
+          image: entry.product.images[0] ?? null,
+          unit_price_minor: sku.price_minor,
+          currency: sku.currency,
+          qty,
+        });
+      }
+      persist();
+      return Promise.resolve(cartSnapshot());
+    },
+
+    updateCartItem: (skuId, qty) => {
+      const item = state.cart.find((i) => i.sku_id === skuId);
+      if (!item) return Promise.reject(new ApiError(404, "NOT_FOUND", "Cart item not found"));
+      if (qty <= 0) state.cart = state.cart.filter((i) => i.sku_id !== skuId);
+      else item.qty = qty;
+      persist();
+      return Promise.resolve(cartSnapshot());
+    },
+
+    removeCartItem: (skuId) => {
+      state.cart = state.cart.filter((i) => i.sku_id !== skuId);
+      persist();
+      return Promise.resolve(cartSnapshot());
+    },
+
+    checkout: (shippingAddress: Address, currency: string) => {
+      if (state.cart.length === 0) {
+        return Promise.reject(new ApiError(400, "EMPTY_CART", "Cart is empty"));
+      }
+      const byShop: Record<string, CartItem[]> = {};
+      for (const item of state.cart) {
+        const product = productById(item.product_id);
+        const shopId = product?.shop_id ?? "unknown";
+        (byShop[shopId] ??= []).push(item);
+      }
+      const created: Order[] = Object.entries(byShop).map(([shopId, items]) => {
+        const order: Order = {
+          id: `o-${Date.now()}-${shopId}`,
+          order_no: nextOrderNo(),
+          shop_id: shopId,
+          user_id: MOCK_USER.id,
+          status: "pending_payment",
+          currency,
+          total_minor: items.reduce((sum, i) => sum + i.unit_price_minor * i.qty, 0),
+          items: items.map((i, k) => ({
+            id: `oi-${Date.now()}-${k}`,
+            sku_id: i.sku_id,
+            product_name: i.product_name,
+            sku_code: i.sku_code,
+            unit_price_minor: i.unit_price_minor,
+            qty: i.qty,
+            image: i.image,
+          })),
+          shipping_address: shippingAddress,
+          created_at: new Date().toISOString(),
+        };
+        return order;
+      });
+      state.orders = [...created, ...state.orders];
+      state.cart = [];
+      persist();
+      return Promise.resolve(created);
+    },
+
+    listMyOrders: (page = 1) => {
+      const perPage = 10;
+      const start = (page - 1) * perPage;
+      return Promise.resolve({
+        items: state.orders.slice(start, start + perPage),
+        total: state.orders.length,
+        page,
+        per_page: perPage,
+      });
+    },
+
+    getOrder: (id) => {
+      const order = state.orders.find((o) => o.id === id || o.order_no === id);
+      if (!order) return Promise.reject(new ApiError(404, "NOT_FOUND", "Order not found"));
+      return Promise.resolve(order);
+    },
+
+    cancelOrder: (id) => {
+      const order = state.orders.find((o) => o.id === id);
+      if (!order) return Promise.reject(new ApiError(404, "NOT_FOUND", "Order not found"));
+      if (order.status !== "pending_payment") {
+        return Promise.reject(new ApiError(409, "INVALID_STATE", "Only unpaid orders can be cancelled"));
+      }
+      order.status = "cancelled";
+      persist();
+      return Promise.resolve(order);
+    },
+
+    payOrder: (id) => {
+      const order = state.orders.find((o) => o.id === id);
+      if (!order) return Promise.reject(new ApiError(404, "NOT_FOUND", "Order not found"));
+      if (order.status !== "pending_payment") {
+        return Promise.reject(new ApiError(409, "INVALID_STATE", "Only unpaid orders can be paid"));
+      }
+      order.status = "paid";
+      persist();
+      return Promise.resolve(order);
+    },
+
+    confirmDelivered: (shipmentId) => {
+      const shipment = state.shipments.find((s) => s.id === shipmentId);
+      if (!shipment) return Promise.reject(new ApiError(404, "NOT_FOUND", "Shipment not found"));
+      shipment.status = "delivered";
+      shipment.delivered_at = new Date().toISOString();
+      const order = state.orders.find((o) => o.id === shipment.order_id);
+      if (order) order.status = "completed";
+      persist();
+      return Promise.resolve(shipment);
+    },
+
+    listMyShipments: () => Promise.resolve(state.shipments.map((s) => ({ ...s }))),
+
+    requestInvoice: (orderId: string, title: string, taxNo: string | null, kind: InvoiceKind) => {
+      const order = state.orders.find((o) => o.id === orderId);
+      if (!order) return Promise.reject(new ApiError(404, "NOT_FOUND", "Order not found"));
+      state.invoiceSeq += 1;
+      const invoice: Invoice = {
+        id: `inv-${Date.now()}`,
+        invoice_no: `INV20260917${String(state.invoiceSeq).padStart(3, "0")}`,
+        order_id: order.id,
+        order_no: order.order_no,
+        title,
+        tax_no: taxNo,
+        kind,
+        amount_minor: order.total_minor,
+        currency: order.currency,
+        status: "requested",
+        issued_at: null,
+        created_at: new Date().toISOString(),
+      };
+      state.invoices = [invoice, ...state.invoices];
+      persist();
+      return Promise.resolve(invoice);
+    },
+
+    listMyInvoices: () => Promise.resolve(state.invoices.map((i) => ({ ...i }))),
+
+    shop: {
+      getMyShop: () => unsupported(),
+      listMyProducts: () => unsupported(),
+      getProduct: () => unsupported(),
+      createProduct: () => unsupported(),
+      updateProduct: () => unsupported(),
+      publish: () => unsupported(),
+      unpublish: () => unsupported(),
+      upsertSku: () => unsupported(),
+      listOrders: () => unsupported(),
+      getOrder: () => unsupported(),
+      createShipment: () => unsupported(),
+      listShipments: () => unsupported(),
+      markShipped: () => unsupported(),
+      listInvoices: () => unsupported(),
+      issueInvoice: () => unsupported(),
+    },
+    admin: {
+      listUsers: () => unsupported(),
+      setUserRole: () => unsupported(),
+      listShops: () => unsupported(),
+      createShop: () => unsupported(),
+      setShopStatus: () => unsupported(),
+      listOrders: () => unsupported(),
+      listCurrencies: () => unsupported(),
+      upsertCurrency: () => unsupported(),
+      setRate: () => unsupported(),
+    },
+  };
+}
+
+export { defaultAddress };
diff --git a/apps/mall/mock/data.ts b/apps/mall/mock/data.ts
new file mode 100644
index 0000000..914a672
--- /dev/null
+++ b/apps/mall/mock/data.ts
@@ -0,0 +1,887 @@
+// Fixed bilingual mock content for the mall MVP. No network, deterministic.
+// Money is always integer minor units + currency code (base USD).
+
+import type {
+  Address,
+  Category,
+  Invoice,
+  LocalizedText,
+  Order,
+  Product,
+  Shipment,
+  Sku,
+  User,
+} from "@vmall/shared";
+
+export const BASE_CURRENCY = "USD";
+
+const L = (en: string, zh: string): LocalizedText => ({ en, zh });
+
+// ---------- mall-local mock types ----------
+
+export interface MockBrand {
+  id: string;
+  name: string;
+}
+
+export interface MockStore {
+  id: string;
+  slug: string;
+  name: LocalizedText;
+  company: string;
+  logo: string;
+  banner: string;
+  region: string;
+  address: LocalizedText;
+  distanceKm: number;
+  rate: { score: number; agree: number; service: number; speed: number };
+  notice: LocalizedText;
+  afterSale: LocalizedText;
+}
+
+export interface MockBanner {
+  image: string;
+  url: string;
+}
+
+export interface MockQuickLink {
+  label: LocalizedText;
+  url: string;
+  glyph: string; // inline SVG path data, 24x24 viewBox
+}
+
+export interface MockPromo {
+  image: string;
+  url: string;
+}
+
+export interface HomeFloor {
+  categoryId: string;
+  name: LocalizedText;
+  advImage: string;
+  advUrl: string;
+  products: Product[];
+}
+
+export interface MockComment {
+  id: string;
+  productId: string;
+  author: string;
+  avatar: string;
+  rating: number; // 1-5
+  content: LocalizedText;
+  images: string[];
+  reply: LocalizedText | null;
+  createdAt: string;
+}
+
+export interface MockCoupon {
+  id: string;
+  title: LocalizedText;
+  amountMinor: number;
+  thresholdMinor: number;
+  currency: string;
+  expiresAt: string;
+}
+
+export interface MockAddress {
+  id: string;
+  recipient: string;
+  phone: string;
+  region: string;
+  city: string;
+  line1: string;
+  postalCode: string;
+  isDefault: boolean;
+}
+
+export interface MockFavorite {
+  id: string;
+  kind: "product" | "store";
+  refId: string;
+  createdAt: string;
+}
+
+export interface SeckillSession {
+  startHour: number;
+  endHour: number;
+  label: string;
+}
+
+export interface IntegralProduct {
+  id: string;
+  name: LocalizedText;
+  image: string;
+  points: number;
+  marketPriceMinor: number;
+  currency: string;
+  stock: number;
+}
+
+export interface ProductDetail {
+  product: Product;
+  store: MockStore;
+  comments: MockComment[];
+  commentStats: { all: number; good: number; medium: number; bad: number; goodRate: number };
+  coupons: MockCoupon[];
+  salesRank: Product[];
+}
+
+export interface StoreDetail {
+  store: MockStore;
+  products: Product[];
+  salesRank: Product[];
+}
+
+// ---------- currencies ----------
+
+export const MOCK_CURRENCIES = [
+  { code: "USD", name: L("US Dollar", "美元"), symbol: "$", exponent: 2, is_base: true, rate_to_base: "1", enabled: true },
+  { code: "CNY", name: L("Chinese Yuan", "人民币"), symbol: "¥", exponent: 2, is_base: false, rate_to_base: "0.14", enabled: true },
+  { code: "JPY", name: L("Japanese Yen", "日元"), symbol: "¥", exponent: 0, is_base: false, rate_to_base: "0.0067", enabled: true },
+  { code: "EUR", name: L("Euro", "欧元"), symbol: "€", exponent: 2, is_base: false, rate_to_base: "1.09", enabled: true },
+];
+
+// units of currency per 1 USD, scaled by 1e4 (integer math only)
+const PER_USD: Record<string, number> = { USD: 10000, CNY: 72000, JPY: 1500000, EUR: 9200 };
+
+export function mockConvertMinor(amountMinor: number, from: string, to: string): number {
+  if (from === to) return amountMinor;
+  const fromRate = PER_USD[from];
+  const toRate = PER_USD[to];
+  if (!fromRate || !toRate) throw new Error(`mock convert: unknown currency ${from}/${to}`);
+  return Math.round((amountMinor * toRate) / fromRate);
+}
+
+// ---------- categories (3-level tree) ----------
+
+interface CatSpec {
+  id: string;
+  slug: string;
+  name: LocalizedText;
+  children?: CatSpec[];
+}
+
+const CAT_TREE: CatSpec[] = [
+  {
+    id: "c1",
+    slug: "phones",
+    name: L("Phones & Digital", "手机数码"),
+    children: [
+      {
+        id: "c1-1",
+        slug: "smartphones",
+        name: L("Smartphones", "智能手机"),
+        children: [
+          { id: "c1-1-1", slug: "flagship", name: L("Flagship", "旗舰机型") },
+          { id: "c1-1-2", slug: "budget", name: L("Budget", "千元机") },
+        ],
+      },
+      {
+        id: "c1-2",
+        slug: "audio",
+        name: L("Audio", "影音娱乐"),
+        children: [
+          { id: "c1-2-1", slug: "earbuds", name: L("Earbuds", "真无线耳机") },
+          { id: "c1-2-2", slug: "speakers", name: L("Speakers", "蓝牙音箱") },
+        ],
+      },
+    ],
+  },
+  {
+    id: "c2",
+    slug: "computers",
+    name: L("Computers & Office", "电脑办公"),
+    children: [
+      {
+        id: "c2-1",
+        slug: "laptops",
+        name: L("Laptops", "笔记本电脑"),
+        children: [
+          { id: "c2-1-1", slug: "ultrabook", name: L("Ultrabooks", "轻薄本") },
+          { id: "c2-1-2", slug: "gaming", name: L("Gaming Laptops", "游戏本") },
+        ],
+      },
+      {
+        id: "c2-2",
+        slug: "peripherals",
+        name: L("Peripherals", "外设产品"),
+        children: [
+          { id: "c2-2-1", slug: "keyboards", name: L("Keyboards", "键盘") },
+          { id: "c2-2-2", slug: "monitors", name: L("Monitors", "显示器") },
+        ],
+      },
+    ],
+  },
+  {
+    id: "c3",
+    slug: "appliances",
+    name: L("Home Appliances", "家用电器"),
+    children: [
+      {
+        id: "c3-1",
+        slug: "kitchen",
+        name: L("Kitchen", "厨房电器"),
+        children: [
+          { id: "c3-1-1", slug: "cookers", name: L("Cookers", "电饭煲") },
+          { id: "c3-1-2", slug: "blenders", name: L("Blenders", "破壁机") },
+        ],
+      },
+      {
+        id: "c3-2",
+        slug: "cleaning",
+        name: L("Cleaning", "清洁电器"),
+        children: [
+          { id: "c3-2-1", slug: "vacuums", name: L("Vacuums", "吸尘器") },
+          { id: "c3-2-2", slug: "purifiers", name: L("Air Purifiers", "空气净化器") },
+        ],
+      },
+    ],
+  },
+  {
+    id: "c4",
+    slug: "fashion",
+    name: L("Fashion", "服饰鞋包"),
+    children: [
+      {
+        id: "c4-1",
+        slug: "menswear",
+        name: L("Menswear", "男装"),
+        children: [
+          { id: "c4-1-1", slug: "jackets", name: L("Jackets", "夹克外套") },
+          { id: "c4-1-2", slug: "shirts", name: L("Shirts", "衬衫") },
+        ],
+      },
+      {
+        id: "c4-2",
+        slug: "bags",
+        name: L("Bags", "箱包"),
+        children: [
+          { id: "c4-2-1", slug: "backpacks", name: L("Backpacks", "双肩包") },
+          { id: "c4-2-2", slug: "luggage", name: L("Luggage", "旅行箱") },
+        ],
+      },
+    ],
+  },
+  {
+    id: "c5",
+    slug: "beauty",
+    name: L("Beauty & Care", "美妆个护"),
+    children: [
+      {
+        id: "c5-1",
+        slug: "skincare",
+        name: L("Skincare", "面部护肤"),
+        children: [
+          { id: "c5-1-1", slug: "serums", name: L("Serums", "精华") },
+          { id: "c5-1-2", slug: "masks", name: L("Masks", "面膜") },
+        ],
+      },
+      {
+        id: "c5-2",
+        slug: "grooming",
+        name: L("Grooming", "个人护理"),
+        children: [
+          { id: "c5-2-1", slug: "shavers", name: L("Shavers", "电动剃须刀") },
+          { id: "c5-2-2", slug: "toothbrush", name: L("Electric Toothbrushes", "电动牙刷") },
+        ],
+      },
+    ],
+  },
+  {
+    id: "c6",
+    slug: "grocery",
+    name: L("Grocery & Fresh", "食品生鲜"),
+    children: [
+      {
+        id: "c6-1",
+        slug: "snacks",
+        name: L("Snacks", "休闲零食"),
+        children: [
+          { id: "c6-1-1", slug: "nuts", name: L("Nuts", "坚果炒货") },
+          { id: "c6-1-2", slug: "pastry", name: L("Pastry", "糕点饼干") },
+        ],
+      },
+      {
+        id: "c6-2",
+        slug: "fresh",
+        name: L("Fresh Food", "生鲜果蔬"),
+        children: [
+          { id: "c6-2-1", slug: "fruit", name: L("Fruit", "新鲜水果") },
+          { id: "c6-2-2", slug: "seafood", name: L("Seafood", "海鲜水产") },
+        ],
+      },
+    ],
+  },
+];
+
+function flattenCats(specs: CatSpec[], parentId: string | null, out: Category[]): void {
+  specs.forEach((s, i) => {
+    out.push({ id: s.id, parent_id: parentId, name: s.name, slug: s.slug, position: i });
+    if (s.children) flattenCats(s.children, s.id, out);
+  });
+}
+
+export const MOCK_CATEGORIES: Category[] = (() => {
+  const out: Category[] = [];
+  flattenCats(CAT_TREE, null, out);
+  return out;
+})();
+
+export function categorySubtreeIds(rootId: string): Set<string> {
+  const ids = new Set<string>([rootId]);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const c of MOCK_CATEGORIES) {
+      if (c.parent_id && ids.has(c.parent_id) && !ids.has(c.id)) {
+        ids.add(c.id);
+        grew = true;
+      }
+    }
+  }
+  return ids;
+}
+
+export function topCategories(): Category[] {
+  return MOCK_CATEGORIES.filter((c) => c.parent_id === null).sort((a, b) => a.position - b.position);
+}
+
+export function childCategories(parentId: string): Category[] {
+  return MOCK_CATEGORIES.filter((c) => c.parent_id === parentId).sort((a, b) => a.position - b.position);
+}
+
+// ---------- brands ----------
+
+export const MOCK_BRANDS: MockBrand[] = [
+  { id: "b1", name: "Aurora" },
+  { id: "b2", name: "Nordwind" },
+  { id: "b3", name: "Hexon" },
+  { id: "b4", name: "Mikado" },
+  { id: "b5", name: "Solace" },
+  { id: "b6", name: "Terra" },
+];
+
+const PRODUCT_BRAND: Record<string, string> = {};
+
+export function brandOf(productId: string): MockBrand | null {
+  const id = PRODUCT_BRAND[productId];
+  return MOCK_BRANDS.find((b) => b.id === id) ?? null;
+}
+
+// ---------- stores ----------
+
+export const MOCK_STORES: MockStore[] = [
+  {
+    id: "s1",
+    slug: "aurora-flagship",
+    name: L("Aurora Flagship Store", "Aurora 官方旗舰店"),
+    company: "Aurora Technology Co., Ltd.",
+    logo: "/mock/store-1.svg",
+    banner: "/mock/banner-1.svg",
+    region: "California",
+    address: L("1 Infinite Loop, Cupertino, CA", "加利福尼亚州库比蒂诺"),
+    distanceKm: 3.2,
+    rate: { score: 4.9, agree: 4.8, service: 4.9, speed: 4.7 },
+    notice: L("Free shipping on orders over $99.", "满 99 美元免运费。"),
+    afterSale: L("7-day returns, 15-day exchanges, 1-year warranty.", "支持 7 天退货、15 天换货、一年质保。"),
+  },
+  {
+    id: "s2",
+    slug: "nordwind-digital",
+    name: L("Nordwind Digital", "北风数码专营店"),
+    company: "Nordwind Trading LLC",
+    logo: "/mock/store-2.svg",
+    banner: "/mock/banner-2.svg",
+    region: "New York",
+    address: L("88 Fifth Ave, New York, NY", "纽约州纽约市第五大道 88 号"),
+    distanceKm: 12.5,
+    rate: { score: 4.7, agree: 4.6, service: 4.8, speed: 4.6 },
+    notice: L("Same-day dispatch before 3 PM.", "下午 3 点前下单当天发货。"),
+    afterSale: L("Nationwide warranty, online support 9:00-21:00.", "全国联保，在线客服 9:00-21:00。"),
+  },
+  {
+    id: "s3",
+    slug: "solace-living",
+    name: L("Solace Living", "Solace 生活馆"),
+    company: "Solace Home Inc.",
+    logo: "/mock/store-3.svg",
+    banner: "/mock/banner-3.svg",
+    region: "Texas",
+    address: L("500 Congress Ave, Austin, TX", "德克萨斯州奥斯汀国会大道 500 号"),
+    distanceKm: 28.9,
+    rate: { score: 4.8, agree: 4.9, service: 4.7, speed: 4.8 },
+    notice: L("New members get a welcome coupon.", "新会员可领新人券。"),
+    afterSale: L("30-day worry-free returns on home goods.", "家居商品 30 天无忧退。"),
+  },
+  {
+    id: "s4",
+    slug: "terra-fresh",
+    name: L("Terra Fresh Market", "Terra 生鲜市集"),
+    company: "Terra Foods Group",
+    logo: "/mock/store-4.svg",
+    banner: "/mock/banner-1.svg",
+    region: "Washington",
+    address: L("710 Pike St, Seattle, WA", "华盛顿州西雅图派克街 710 号"),
+    distanceKm: 45.0,
+    rate: { score: 4.6, agree: 4.7, service: 4.6, speed: 4.9 },
+    notice: L("Cold-chain delivery for fresh items.", "生鲜商品全程冷链配送。"),
+    afterSale: L("Bad-item refund within 48 hours.", "生鲜坏单 48 小时内包赔。"),
+  },
+];
+
+// ---------- products ----------
+
+interface ProductSpec {
+  n: number; // image number
+  slug: string;
+  cat: string;
+  store: string;
+  brand: string;
+  name: LocalizedText;
+  sub: LocalizedText;
+  price: number; // USD minor
+  market: number;
+  stock: number;
+  attrs: { key: string; values: string[] }[];
+}
+
+const PRODUCT_SPECS: ProductSpec[] = [
+  { n: 1, slug: "aurora-x90-pro", cat: "c1-1-1", store: "s1", brand: "b1", name: L("Aurora X90 Pro 5G", "Aurora X90 Pro 5G 手机"), sub: L("Flagship imaging, 120Hz OLED", "旗舰影像，120Hz OLED 屏"), price: 89900, market: 99900, stock: 128, attrs: [{ key: "Color", values: ["Black", "Silver"] }, { key: "Storage", values: ["256GB", "512GB"] }] },
+  { n: 2, slug: "aurora-lite-5g", cat: "c1-1-2", store: "s1", brand: "b1", name: L("Aurora Lite 5G", "Aurora Lite 5G 手机"), sub: L("All-day battery, great value", "长续航，高性价比"), price: 29900, market: 34900, stock: 356, attrs: [{ key: "Color", values: ["Blue", "Green"] }] },
+  { n: 3, slug: "hexon-buds-air", cat: "c1-2-1", store: "s2", brand: "b3", name: L("Hexon Buds Air", "Hexon Buds Air 真无线耳机"), sub: L("ANC, 36h total playback", "主动降噪，36 小时总续航"), price: 7900, market: 9900, stock: 842, attrs: [{ key: "Color", values: ["White", "Black"] }] },
+  { n: 4, slug: "hexon-boombox-mini", cat: "c1-2-2", store: "s2", brand: "b3", name: L("Hexon Boombox Mini", "Hexon Boombox Mini 蓝牙音箱"), sub: L("IPX7 waterproof, 20h playtime", "IPX7 防水，20 小时播放"), price: 5900, market: 7900, stock: 410, attrs: [{ key: "Color", values: ["Gray", "Red"] }] },
+  { n: 5, slug: "nordwind-air-14", cat: "c2-1-1", store: "s2", brand: "b2", name: L("Nordwind Air 14 Laptop", "Nordwind Air 14 轻薄本"), sub: L("1.19kg, 2.8K display, 16GB RAM", "1.19kg，2.8K 屏，16GB 内存"), price: 109900, market: 124900, stock: 96, attrs: [{ key: "Color", values: ["Silver", "Gray"] }, { key: "Memory", values: ["16GB", "32GB"] }] },
+  { n: 6, slug: "hexon-storm-16", cat: "c2-1-2", store: "s2", brand: "b3", name: L("Hexon Storm 16 Gaming Laptop", "Hexon Storm 16 游戏本"), sub: L("RTX graphics, 240Hz screen", "RTX 显卡，240Hz 电竞屏"), price: 189900, market: 209900, stock: 42, attrs: [{ key: "Color", values: ["Black"] }, { key: "Memory", values: ["16GB", "32GB"] }] },
+  { n: 7, slug: "nordwind-keys-pro", cat: "c2-2-1", store: "s2", brand: "b2", name: L("Nordwind Keys Pro", "Nordwind Keys Pro 机械键盘"), sub: L("Hot-swap, tri-mode wireless", "热插拔，三模无线"), price: 8900, market: 10900, stock: 520, attrs: [{ key: "Switch", values: ["Linear", "Tactile"] }] },
+  { n: 8, slug: "nordwind-view-27", cat: "c2-2-2", store: "s2", brand: "b2", name: L("Nordwind View 27 Monitor", "Nordwind View 27 显示器"), sub: L("4K IPS, 99% sRGB", "4K IPS，99% sRGB 色域"), price: 32900, market: 39900, stock: 150, attrs: [{ key: "Size", values: ["27in", "32in"] }] },
+  { n: 9, slug: "solace-rice-chef", cat: "c3-1-1", store: "s3", brand: "b5", name: L("Solace Rice Chef 4L", "Solace 智能电饭煲 4L"), sub: L("IH heating, 24h timer", "IH 电磁加热，24 小时预约"), price: 12900, market: 15900, stock: 230, attrs: [{ key: "Color", values: ["White"] }] },
+  { n: 10, slug: "solace-blend-max", cat: "c3-1-2", store: "s3", brand: "b5", name: L("Solace Blend Max", "Solace 破壁机"), sub: L("Quiet motor, self-cleaning", "静音电机，一键自清洗"), price: 14900, market: 18900, stock: 178, attrs: [{ key: "Color", values: ["Cream", "Green"] }] },
+  { n: 11, slug: "solace-vac-v12", cat: "c3-2-1", store: "s3", brand: "b5", name: L("Solace Vac V12", "Solace V12 无线吸尘器"), sub: L("60min runtime, laser dust detect", "60 分钟续航，激光显尘"), price: 39900, market: 45900, stock: 88, attrs: [{ key: "Color", values: ["Gray"] }] },
+  { n: 12, slug: "solace-pure-500", cat: "c3-2-2", store: "s3", brand: "b5", name: L("Solace Pure 500 Air Purifier", "Solace Pure 500 空气净化器"), sub: L("HEPA-13, 60m² coverage", "HEPA-13 滤芯，适用 60㎡"), price: 24900, market: 29900, stock: 140, attrs: [{ key: "Color", values: ["White"] }] },
+  { n: 13, slug: "mikado-field-jacket", cat: "c4-1-1", store: "s1", brand: "b4", name: L("Mikado Field Jacket", "Mikado 工装夹克"), sub: L("Water-repellent, 4 pockets", "防泼水面料，四袋设计"), price: 11900, market: 14900, stock: 310, attrs: [{ key: "Color", values: ["Olive", "Black"] }, { key: "Size", values: ["M", "L", "XL"] }] },
+  { n: 14, slug: "mikado-oxford-shirt", cat: "c4-1-2", store: "s1", brand: "b4", name: L("Mikado Oxford Shirt", "Mikado 牛津纺衬衫"), sub: L("Wrinkle-free cotton", "免烫纯棉"), price: 4900, market: 6900, stock: 460, attrs: [{ key: "Color", values: ["White", "Blue"] }, { key: "Size", values: ["M", "L", "XL"] }] },
+  { n: 15, slug: "mikado-commuter-pack", cat: "c4-2-1", store: "s1", brand: "b4", name: L("Mikado Commuter Pack 20L", "Mikado 通勤双肩包 20L"), sub: L("Fits 16in laptop, USB port", "可装 16 英寸电脑，外置 USB 口"), price: 6900, market: 8900, stock: 275, attrs: [{ key: "Color", values: ["Black", "Navy"] }] },
+  { n: 16, slug: "mikado-voyage-24", cat: "c4-2-2", store: "s1", brand: "b4", name: L("Mikado Voyage 24 Luggage", "Mikado Voyage 24 英寸旅行箱"), sub: L("PC shell, silent wheels", "PC 箱体，静音万向轮"), price: 13900, market: 16900, stock: 132, attrs: [{ key: "Color", values: ["Silver", "Black"] }] },
+  { n: 17, slug: "solace-glow-serum", cat: "c5-1-1", store: "s3", brand: "b5", name: L("Solace Glow Serum 30ml", "Solace 焕亮精华 30ml"), sub: L("Vitamin C + E, daily glow", "维 C + 维 E，日常焕亮"), price: 3900, market: 4900, stock: 640, attrs: [{ key: "Size", values: ["30ml", "50ml"] }] },
+  { n: 18, slug: "solace-hydra-mask", cat: "c5-1-2", store: "s3", brand: "b5", name: L("Solace Hydra Mask 10pcs", "Solace 补水面膜 10 片装"), sub: L("Hyaluronic acid boost", "玻尿酸深层补水"), price: 1900, market: 2900, stock: 900, attrs: [{ key: "Type", values: ["Hydrating", "Soothing"] }] },
+  { n: 19, slug: "hexon-shave-s9", cat: "c5-2-1", store: "s2", brand: "b3", name: L("Hexon Shave S9", "Hexon S9 电动剃须刀"), sub: L("3-head flex, wet & dry", "三刀头浮动，干湿两用"), price: 9900, market: 12900, stock: 205, attrs: [{ key: "Color", values: ["Black"] }] },
+  { n: 20, slug: "hexon-brush-t5", cat: "c5-2-2", store: "s2", brand: "b3", name: L("Hexon Brush T5", "Hexon T5 电动牙刷"), sub: L("Sonic, 90-day battery", "声波震动，90 天续航"), price: 4900, market: 6900, stock: 380, attrs: [{ key: "Color", values: ["White", "Pink"] }] },
+  { n: 21, slug: "terra-mixed-nuts", cat: "c6-1-1", store: "s4", brand: "b6", name: L("Terra Mixed Nuts 1kg", "Terra 混合坚果 1kg"), sub: L("6 kinds, no added salt", "6 种坚果，无添加盐"), price: 2900, market: 3900, stock: 720, attrs: [{ key: "Pack", values: ["1kg", "500g"] }] },
+  { n: 22, slug: "terra-butter-cookies", cat: "c6-1-2", store: "s4", brand: "b6", name: L("Terra Butter Cookies 908g", "Terra 黄油曲奇 908g"), sub: L("Danish recipe, gift tin", "丹麦配方，礼盒铁罐装"), price: 2400, market: 3200, stock: 540, attrs: [{ key: "Pack", values: ["908g"] }] },
+  { n: 23, slug: "terra-fuji-apples", cat: "c6-2-1", store: "s4", brand: "b6", name: L("Terra Fuji Apples 5kg", "Terra 红富士苹果 5kg"), sub: L("Crisp & sweet, farm direct", "脆甜多汁，产地直发"), price: 1900, market: 2600, stock: 460, attrs: [{ key: "Size", values: ["Medium", "Large"] }] },
+  { n: 24, slug: "terra-salmon-fillet", cat: "c6-2-2", store: "s4", brand: "b6", name: L("Terra Salmon Fillet 500g", "Terra 三文鱼中段 500g"), sub: L("Cold-chain, sashimi grade", "冷链直达，刺身级"), price: 3400, market: 4200, stock: 190, attrs: [{ key: "Cut", values: ["Fillet", "Steak"] }] },
+];
+
+function buildProducts(): Product[] {
+  const now = "2026-09-01T00:00:00.000Z";
+  return PRODUCT_SPECS.map((spec, i) => {
+    const id = `p${i + 1}`;
+    PRODUCT_BRAND[id] = spec.brand;
+    const img = `/mock/product-${spec.n}.svg`;
+    const skus: Sku[] = [];
+    const combos = spec.attrs.reduce<string[][]>(
+      (acc, attr) => acc.flatMap((prefix) => attr.values.map((v) => [...prefix, `${attr.key}:${v}`])),
+      [[]],
+    );
+    combos.forEach((combo, k) => {
+      const attributes: Record<string, string> = {};
+      for (const pair of combo) {
+        const idx = pair.indexOf(":");
+        attributes[pair.slice(0, idx)] = pair.slice(idx + 1);
+      }
+      skus.push({
+        id: `${id}-sku${k + 1}`,
+        product_id: id,
+        sku_code: `${spec.slug.toUpperCase().replaceAll("-", "_")}_${k + 1}`,
+        attributes,
+        price_minor: spec.price + k * 1000,
+        currency: BASE_CURRENCY,
+        stock: Math.max(0, Math.floor(spec.stock / combos.length) - (k % 3)),
+        active: true,
+      });
+    });
+    return {
+      id,
+      shop_id: spec.store,
+      category_id: spec.cat,
+      slug: spec.slug,
+      name: spec.name,
+      description: spec.sub,
+      images: [img, img, img],
+      status: "published",
+      created_at: now,
+      skus,
+    } satisfies Product;
+  });
+}
+
+export const MOCK_PRODUCTS: Product[] = buildProducts();
+
+export function productById(idOrSlug: string): Product | null {
+  return MOCK_PRODUCTS.find((p) => p.id === idOrSlug || p.slug === idOrSlug) ?? null;
+}
+
+export function storeById(idOrSlug: string): MockStore | null {
+  return MOCK_STORES.find((s) => s.id === idOrSlug || s.slug === idOrSlug) ?? null;
+}
+
+export function lowestSku(product: Product): Sku | null {
+  const active = (product.skus ?? []).filter((s) => s.active && s.stock > 0);
+  return (
+    active.reduce<Sku | null>(
+      (low, s) => (low === null || s.price_minor < low.price_minor ? s : low),
+      null,
+    ) ?? (product.skus ?? []).find((s) => s.active) ?? null
+  );
+}
+
+export interface MockSearchQuery {
+  q?: string;
+  categoryId?: string;
+  brandId?: string;
+  shopId?: string;
+  sort?: "default" | "price" | "sales" | "comments";
+  order?: "asc" | "desc";
+  page?: number;
+  perPage?: number;
+}
+
+// deterministic pseudo stats so sort orders are stable
+export function salesOf(p: Product): number {
+  return 50 + ((Number(p.id.slice(1)) * 137) % 950);
+}
+export function commentCountOf(p: Product): number {
+  return 5 + ((Number(p.id.slice(1)) * 61) % 240);
+}
+
+export function searchMockProducts(query: MockSearchQuery): { items: Product[]; total: number; page: number; per_page: number } {
+  const page = query.page && query.page > 0 ? query.page : 1;
+  const perPage = query.perPage && query.perPage > 0 ? query.perPage : 20;
+  let list = MOCK_PRODUCTS.filter((p) => p.status === "published");
+  if (query.shopId) list = list.filter((p) => p.shop_id === query.shopId);
+  if (query.categoryId) {
+    const ids = categorySubtreeIds(query.categoryId);
+    list = list.filter((p) => p.category_id !== null && ids.has(p.category_id));
+  }
+  if (query.brandId) list = list.filter((p) => PRODUCT_BRAND[p.id] === query.brandId);
+  const kw = query.q?.trim().toLowerCase();
+  if (kw) {
+    list = list.filter((p) =>
+      [p.name.en, p.name.zh, p.description.en, p.description.zh]
+        .filter((v): v is string => typeof v === "string")
+        .some((v) => v.toLowerCase().includes(kw)),
+    );
+  }
+  const dir = query.order === "asc" ? 1 : -1;
+  switch (query.sort) {
+    case "price":
+      list = [...list].sort((a, b) => dir * ((lowestSku(a)?.price_minor ?? 0) - (lowestSku(b)?.price_minor ?? 0)));
+      break;
+    case "sales":
+      list = [...list].sort((a, b) => dir * (salesOf(a) - salesOf(b)));
+      break;
+    case "comments":
+      list = [...list].sort((a, b) => dir * (commentCountOf(a) - commentCountOf(b)));
+      break;
+    default:
+      list = [...list].sort((a, b) => Number(a.id.slice(1)) - Number(b.id.slice(1)));
+  }
+  const total = list.length;
+  const items = list.slice((page - 1) * perPage, page * perPage);
+  return { items, total, page, per_page: perPage };
+}
+
+// ---------- home content ----------
+
+export const MOCK_BANNERS: MockBanner[] = [
+  { image: "/mock/banner-1.svg", url: "/search?sort=sales&order=desc" },
+  { image: "/mock/banner-2.svg", url: "/seckill" },
+  { image: "/mock/banner-3.svg", url: "/collective" },
+];
+
+const GLYPHS = {
+  shield: "M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z",
+  coin: "M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
+  gift: "M20 7h-3.2A3 3 0 0012 3.5 3 3 0 007.2 7H4v4h7V9h2v2h7V7zM4 13v8h7v-8H4zm9 8h7v-8h-7v8z",
+  bolt: "M13 2L4 14h6l-1 8 9-12h-6l1-8z",
+  bell: "M12 22a2.5 2.5 0 002.5-2.5h-5A2.5 2.5 0 0012 22zm7-6v-5a7 7 0 00-5-6.7V4a2 2 0 00-4 0v.3A7 7 0 005 11v5l-2 2v1h18v-1l-2-2z",
+  shop: "M4 4h16l2 5v2a3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 01-3 3 3 3 0 01-3-3V9l2-5zm0 10.7V20h7v-5h2v5h7v-5.3a4.98 4.98 0 01-2 .4V20H6v-5.7a4.98 4.98 0 01-2 .4z",
+};
+
+export const MOCK_QUICK_LINKS: MockQuickLink[] = [
+  { label: L("Verification", "实名认证"), url: "/user", glyph: GLYPHS.shield },
+  { label: L("Points Mall", "积分商城"), url: "/integral", glyph: GLYPHS.coin },
+  { label: L("Group Buy", "优惠团购"), url: "/collective", glyph: GLYPHS.gift },
+  { label: L("Flash Sale", "秒杀活动"), url: "/seckill", glyph: GLYPHS.bolt },
+  { label: L("Notice", "商城公告"), url: "/user", glyph: GLYPHS.bell },
+  { label: L("Become a Seller", "入驻商家"), url: "/stores", glyph: GLYPHS.shop },
+];
+
+export const MOCK_PROMOS: MockPromo[] = [
+  { image: "/mock/promo-1.svg", url: "/search?category=c1" },
+  { image: "/mock/promo-2.svg", url: "/search?category=c3" },
+  { image: "/mock/promo-3.svg", url: "/search?category=c6" },
+];
+
+export function homeFloors(): HomeFloor[] {
+  return topCategories().map((cat, i) => {
+    const ids = categorySubtreeIds(cat.id);
+    const products = MOCK_PRODUCTS.filter((p) => p.category_id !== null && ids.has(p.category_id)).slice(0, 8);
+    return {
+      categoryId: cat.id,
+      name: cat.name,
+      advImage: `/mock/floor-adv-${i + 1}.svg`,
+      advUrl: `/search?category=${cat.id}`,
+      products,
+    };
+  });
+}
+
+// ---------- product detail extras ----------
+
+export const MOCK_COUPONS: MockCoupon[] = [
+  { id: "cp1", title: L("$5 off over $59", "满 59 减 5"), amountMinor: 500, thresholdMinor: 5900, currency: BASE_CURRENCY, expiresAt: "2026-12-31" },
+  { id: "cp2", title: L("$15 off over $199", "满 199 减 15"), amountMinor: 1500, thresholdMinor: 19900, currency: BASE_CURRENCY, expiresAt: "2026-11-30" },
+  { id: "cp3", title: L("$40 off over $499", "满 499 减 40"), amountMinor: 4000, thresholdMinor: 49900, currency: BASE_CURRENCY, expiresAt: "2026-10-31" },
+];
+
+export function commentsFor(productId: string): MockComment[] {
+  const seed = Number(productId.replace(/\D/g, "")) || 1;
+  const pool: { author: string; text: LocalizedText; rating: number }[] = [
+    { author: "A***a", text: L("Great quality, exactly as described. Fast shipping!", "质量很好，和描述一致，发货快！"), rating: 5 },
+    { author: "M***e", text: L("Good value for the price. Would buy again.", "性价比不错，会回购。"), rating: 5 },
+    { author: "J***n", text: L("Decent, but packaging could be better.", "还行，包装可以更好。"), rating: 4 },
+    { author: "S***y", text: L("Average experience overall.", "整体一般。"), rating: 3 },
+  ];
+  const count = 2 + (seed % 3);
+  const out: MockComment[] = [];
+  for (let i = 0; i < count; i++) {
+    const p = pool[(seed + i) % pool.length];
+    out.push({
+      id: `${productId}-cm${i + 1}`,
+      productId,
+      author: p.author,
+      avatar: "/mock/avatar.svg",
+      rating: p.rating,
+      content: p.text,
+      images: [],
+      reply:
+        p.rating <= 3
+          ? L("Sorry for the inconvenience, please contact support.", "很抱歉带来不便，请联系在线客服处理。")
+          : null,
+      createdAt: `2026-0${(seed % 8) + 1}-1${i}`,
+    });
+  }
+  return out;
+}
+
+export function commentStats(productId: string): { all: number; good: number; medium: number; bad: number; goodRate: number } {
+  const all = commentCountOf(productById(productId) ?? MOCK_PRODUCTS[0]);
+  const good = Math.round(all * 0.92);
+  const medium = Math.round(all * 0.06);
+  const bad = all - good - medium;
+  return { all, good, medium, bad, goodRate: Math.round((good / Math.max(1, all)) * 100) };
+}
+
+export function salesRankFor(shopId: string): Product[] {
+  return MOCK_PRODUCTS.filter((p) => p.shop_id === shopId)
+    .sort((a, b) => salesOf(b) - salesOf(a))
+    .slice(0, 5);
+}
+
+export function productDetail(idOrSlug: string): ProductDetail | null {
+  const product = productById(idOrSlug);
+  if (!product) return null;
+  const store = storeById(product.shop_id) ?? MOCK_STORES[0];
+  return {
+    product,
+    store,
+    comments: commentsFor(product.id),
+    commentStats: commentStats(product.id),
+    coupons: MOCK_COUPONS,
+    salesRank: salesRankFor(product.shop_id),
+  };
+}
+
+export function storeDetail(idOrSlug: string): StoreDetail | null {
+  const store = storeById(idOrSlug);
+  if (!store) return null;
+  return {
+    store,
+    products: MOCK_PRODUCTS.filter((p) => p.shop_id === store.id),
+    salesRank: salesRankFor(store.id),
+  };
+}
+
+// ---------- marketing ----------
+
+export const SECKILL_SESSIONS: SeckillSession[] = [
+  { startHour: 0, endHour: 8, label: "00:00" },
+  { startHour: 8, endHour: 12, label: "08:00" },
+  { startHour: 12, endHour: 18, label: "12:00" },
+  { startHour: 18, endHour: 24, label: "18:00" },
+];
+
+export function seckillProducts(): { product: Product; seckillPriceMinor: number; soldPct: number }[] {
+  return MOCK_PRODUCTS.slice(0, 8).map((p, i) => {
+    const sku = lowestSku(p);
+    const base = sku?.price_minor ?? 1000;
+    return {
+      product: p,
+      seckillPriceMinor: Math.round(base * (0.5 + (i % 3) * 0.1)),
+      soldPct: 20 + ((i * 17) % 75),
+    };
+  });
+}
+
+export function collectiveProducts(): { product: Product; need: number; joined: number }[] {
+  return MOCK_PRODUCTS.slice(8, 16).map((p, i) => ({
+    product: p,
+    need: 2 + (i % 3),
+    joined: 10 + ((i * 23) % 80),
+  }));
+}
+
+export const INTEGRAL_PRODUCTS: IntegralProduct[] = [
+  { id: "ip1", name: L("Insulated Mug", "保温杯"), image: "/mock/product-9.svg", points: 1200, marketPriceMinor: 4900, currency: BASE_CURRENCY, stock: 300 },
+  { id: "ip2", name: L("Canvas Tote", "帆布手提袋"), image: "/mock/product-15.svg", points: 600, marketPriceMinor: 1900, currency: BASE_CURRENCY, stock: 500 },
+  { id: "ip3", name: L("Phone Stand", "手机支架"), image: "/mock/product-7.svg", points: 400, marketPriceMinor: 1200, currency: BASE_CURRENCY, stock: 800 },
+  { id: "ip4", name: L("Cable Organizer Set", "数据线收纳套装"), image: "/mock/product-3.svg", points: 300, marketPriceMinor: 900, currency: BASE_CURRENCY, stock: 1000 },
+  { id: "ip5", name: L("Notebook A5", "A5 笔记本"), image: "/mock/product-14.svg", points: 250, marketPriceMinor: 700, currency: BASE_CURRENCY, stock: 1200 },
+  { id: "ip6", name: L("Umbrella", "折叠雨伞"), image: "/mock/product-13.svg", points: 900, marketPriceMinor: 2900, currency: BASE_CURRENCY, stock: 260 },
+];
+
+// ---------- user center ----------
+
+export const MOCK_USER: User = {
+  id: "u1",
+  email: "shopper@vmall.dev",
+  display_name: "Demo Shopper",
+  role: "customer",
+  shop_id: null,
+  locale: "en",
+  created_at: "2026-01-15T08:00:00.000Z",
+};
+
+export const MOCK_ADDRESSES: MockAddress[] = [
+  { id: "a1", recipient: "Demo Shopper", phone: "+1 555 0100", region: "California", city: "Cupertino", line1: "1 Infinite Loop", postalCode: "95014", isDefault: true },
+  { id: "a2", recipient: "Demo Shopper", phone: "+1 555 0100", region: "New York", city: "New York", line1: "88 Fifth Ave", postalCode: "10011", isDefault: false },
+];
+
+export function defaultAddress(): Address {
+  const a = MOCK_ADDRESSES.find((x) => x.isDefault) ?? MOCK_ADDRESSES[0];
+  return {
+    recipient: a.recipient,
+    phone: a.phone,
+    country: "US",
+    region: a.region,
+    city: a.city,
+    line1: a.line1,
+    postal_code: a.postalCode,
+  };
+}
+
+export const MOCK_FAVORITES: MockFavorite[] = [
+  { id: "f1", kind: "product", refId: "p1", createdAt: "2026-08-20" },
+  { id: "f2", kind: "product", refId: "p5", createdAt: "2026-08-25" },
+  { id: "f3", kind: "store", refId: "s1", createdAt: "2026-09-01" },
+];
+
+export const USER_STATS = { balanceMinor: 12800, points: 2680, frozenMinor: 0 };
+
+export interface DashboardCounts {
+  pendingPayment: number;
+  pendingShipment: number;
+  shipped: number;
+  pendingComment: number;
+  afterSale: number;
+}
+
+// ---------- seeded orders / shipments / invoices ----------
+
+function orderItemFrom(productIndex: number, qty: number): { id: string; sku: Sku; product: Product; qty: number } {
+  const product = MOCK_PRODUCTS[productIndex];
+  const sku = lowestSku(product) ?? product.skus?.[0];
+  if (!sku) throw new Error("mock seed: product has no sku");
+  return { id: `oi-${productIndex + 1}`, sku, product, qty };
+}
+
+export interface MockOrderSeed {
+  orders: Order[];
+  shipments: Shipment[];
+  invoices: Invoice[];
+}
+
+export function seedOrders(userId: string): MockOrderSeed {
+  const mk = (
+    id: string,
+    orderNo: string,
+    picks: number[],
+    status: Order["status"],
+    createdAt: string,
+  ): Order => {
+    const items = picks.map((pi, k) => {
+      const { sku, product, qty } = orderItemFrom(pi, k + 1);
+      return {
+        id: `${id}-it${k + 1}`,
+        sku_id: sku.id,
+        product_name: product.name,
+        sku_code: sku.sku_code,
+        unit_price_minor: sku.price_minor,
+        qty,
+        image: product.images[0] ?? null,
+      };
+    });
+    const total = items.reduce((sum, it) => sum + it.unit_price_minor * it.qty, 0);
+    return {
+      id,
+      order_no: orderNo,
+      shop_id: MOCK_PRODUCTS[picks[0]].shop_id,
+      user_id: userId,
+      status,
+      currency: BASE_CURRENCY,
+      total_minor: total,
+      items,
+      shipping_address: defaultAddress(),
+      created_at: createdAt,
+    };
+  };
+  const orders: Order[] = [
+    mk("o1", "VM20260910001", [0], "shipped", "2026-09-10T10:00:00.000Z"),
+    mk("o2", "VM20260912002", [2, 6], "completed", "2026-09-12T15:30:00.000Z"),
+    mk("o3", "VM20260915003", [20], "pending_payment", "2026-09-15T09:12:00.000Z"),
+  ];
+  const shipments: Shipment[] = [
+    {
+      id: "sh1",
+      shipment_no: "SH20260910001",
+      order_id: "o1",
+      order_no: "VM20260910001",
+      carrier: "SF Express",
+      tracking_no: "SF1000000001",
+      status: "shipped",
+      items: [{ order_item_id: "o1-it1", qty: 1 }],
+      shipped_at: "2026-09-10T18:00:00.000Z",
+      delivered_at: null,
+      created_at: "2026-09-10T17:30:00.000Z",
+    },
+  ];
+  const invoices: Invoice[] = [
+    {
+      id: "inv1",
+      invoice_no: "INV20260912001",
+      order_id: "o2",
+      order_no: "VM20260912002",
+      title: "Demo Shopper",
+      tax_no: null,
+      kind: "personal",
+      amount_minor: orders[1].total_minor,
+      currency: BASE_CURRENCY,
+      status: "issued",
+      issued_at: "2026-09-13T09:00:00.000Z",
+      created_at: "2026-09-12T16:00:00.000Z",
+    },
+  ];
+  return { orders, shipments, invoices };
+}
diff --git a/apps/mall/nuxt.config.ts b/apps/mall/nuxt.config.ts
index 9c34e28..1730e2e 100644
--- a/apps/mall/nuxt.config.ts
+++ b/apps/mall/nuxt.config.ts
@@ -1,11 +1,12 @@
 export default defineNuxtConfig({
   modules: ["@pinia/nuxt", "@nuxtjs/i18n"],
-  css: ["@vmall/shared/ui.css"],
+  css: ["@vmall/shared/ui.css", "~/assets/mall.css"],
   devtools: { enabled: false },
   devServer: { port: 3000 },
   runtimeConfig: {
     public: {
       apiBase: "http://localhost:8080/api",
+      mockApi: true,
       appName: "mall",
     },
   },
diff --git a/apps/mall/pages/cart.vue b/apps/mall/pages/cart.vue
index 161c567..e08f433 100644
--- a/apps/mall/pages/cart.vue
+++ b/apps/mall/pages/cart.vue
@@ -1,134 +1,350 @@
 <script setup lang="ts">
-import type { Cart, CartItem } from "@vmall/shared";
-import { t as localized } from "@vmall/shared";
+import { t as pick } from "@vmall/shared";
+import type { CartItem } from "@vmall/shared";
+import { productById, storeById } from "~/mock/data";
+
+type CartGroup = {
+  shopId: string;
+  store: ReturnType<typeof storeById>;
+  items: CartItem[];
+};
 
 const { $api } = useNuxtApp();
-const { locale } = useI18n();
-const { currency, convertAmount, formatAmount } = usePrice();
+const { locale, t } = useI18n();
+const { currency } = usePrefs();
+const cartStore = useCartStore();
+const router = useRouter();
 
-const cart = ref<Cart | null>(null);
-const converted = ref<Record<string, number>>({});
-const subtotalDisplay = ref("");
+const items = ref<CartItem[]>([]);
+const selected = reactive<Record<string, boolean>>({});
 const loading = ref(true);
+const mutating = ref(false);
 const error = ref("");
-const updating = ref<string | null>(null);
 
-const subtotalMinor = computed(() => (cart.value?.items ?? []).reduce((sum, item) => sum + (converted.value[item.sku_id] ?? 0) * item.qty, 0));
+const stepLabels = computed(() => [
+  t("cart.steps.cart"),
+  t("cart.steps.order"),
+  t("cart.steps.payment"),
+  t("cart.steps.complete"),
+]);
 
-function errorMessage(value: unknown): string {
-  return value instanceof Error ? value.message : $t("mall.loadFailed");
+const groups = computed<CartGroup[]>(() => {
+  const grouped = new Map<string, CartItem[]>();
+  for (const item of items.value) {
+    const shopId = productById(item.product_id)?.shop_id ?? "unknown";
+    const groupItems = grouped.get(shopId) ?? [];
+    groupItems.push(item);
+    grouped.set(shopId, groupItems);
+  }
+  return Array.from(grouped, ([shopId, groupItems]) => ({
+    shopId,
+    store: shopId === "unknown" ? null : storeById(shopId),
+    items: groupItems,
+  }));
+});
+
+const selectedItems = computed(() => items.value.filter((item) => selected[item.sku_id]));
+const allSelected = computed(
+  () => items.value.length > 0 && items.value.every((item) => selected[item.sku_id]),
+);
+const selectedCurrency = computed(() => selectedItems.value[0]?.currency ?? currency.value);
+const selectedTotalMinor = computed(() =>
+  selectedItems.value.reduce((total, item) => total + item.unit_price_minor * item.qty, 0),
+);
+
+function imageFor(item: CartItem): string {
+  return productById(item.product_id)?.images[0] ?? item.image ?? "/mock/product-1.svg";
 }
 
-async function refreshPrices(): Promise<void> {
-  if (!cart.value) return;
-  const entries = await Promise.all(cart.value.items.map(async (item) => [item.sku_id, await convertAmount(item.unit_price_minor, item.currency)] as const));
-  converted.value = Object.fromEntries(entries);
-  subtotalDisplay.value = await formatAmount(subtotalMinor.value, currency.value);
+function maxFor(item: CartItem): number {
+  return productById(item.product_id)?.skus?.find((sku) => sku.id === item.sku_id)?.stock ?? 999;
 }
 
 async function loadCart(): Promise<void> {
   loading.value = true;
   error.value = "";
   try {
-    cart.value = await $api.getCart();
-    await refreshPrices();
-  } catch (value) {
-    error.value = errorMessage(value);
-    cart.value = null;
+    const snapshot = await $api.getCart();
+    const previous = { ...selected };
+    for (const skuId of Object.keys(selected)) delete selected[skuId];
+    items.value = snapshot.items;
+    for (const item of items.value) selected[item.sku_id] = previous[item.sku_id] ?? true;
+  } catch {
+    error.value = t("cart.loadError");
   } finally {
     loading.value = false;
   }
 }
 
-async function updateQuantity(item: CartItem, value: string | number): Promise<void> {
-  const qty = Math.trunc(Number(value));
-  if (!Number.isFinite(qty) || qty < 1) {
-    error.value = $t("mall.invalidQuantity");
-    return;
-  }
-  updating.value = item.sku_id;
+function setAllSelected(checked: boolean): void {
+  for (const item of items.value) selected[item.sku_id] = checked;
+}
+
+function onSelectionChange(skuId: string, event: Event): void {
+  selected[skuId] = (event.target as HTMLInputElement).checked;
+}
+
+async function updateQuantity(item: CartItem, qty: number): Promise<void> {
+  mutating.value = true;
   error.value = "";
   try {
     await $api.updateCartItem(item.sku_id, qty);
     await loadCart();
-  } catch (value) {
-    error.value = errorMessage(value);
+    await cartStore.refresh();
+  } catch {
+    error.value = t("cart.updateError");
   } finally {
-    updating.value = null;
+    mutating.value = false;
   }
 }
 
 async function removeItem(item: CartItem): Promise<void> {
-  updating.value = item.sku_id;
+  mutating.value = true;
   error.value = "";
   try {
     await $api.removeCartItem(item.sku_id);
     await loadCart();
-  } catch (value) {
-    error.value = errorMessage(value);
+    await cartStore.refresh();
+  } catch {
+    error.value = t("cart.updateError");
   } finally {
-    updating.value = null;
+    mutating.value = false;
   }
 }
 
-watch(currency, () => void refreshPrices());
-onMounted(() => void loadCart());
+async function goToCheckout(): Promise<void> {
+  if (selectedItems.value.length === 0) return;
+  await router.push("/checkout");
+}
 
-definePageMeta({ middleware: "auth" });
+onMounted(() => void loadCart());
 </script>
 
 <template>
-  <section>
-    <h1 class="page-title">{{ $t("cart.title") }}</h1>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <div v-if="!loading && cart && cart.items.length === 0" class="card empty-state">{{ $t("cart.emptyCart") }}</div>
-    <template v-if="cart && cart.items.length > 0">
-      <div class="card cart-list">
-        <div v-for="item in cart.items" :key="item.sku_id" class="cart-line">
-          <div class="cart-product">
-            <img v-if="item.image" :src="item.image" :alt="localized(item.product_name, locale)">
-            <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
-            <div>
-              <NuxtLink :to="`/products/${item.product_id}`" class="product-name">{{ localized(item.product_name, locale) }}</NuxtLink>
-              <div class="muted">{{ item.sku_code }}</div>
-            </div>
-          </div>
-          <div class="unit-price"><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></div>
-          <div class="quantity-field">
-            <label class="sr-only" :for="`qty-${item.sku_id}`">{{ $t("common.qty") }}</label>
-            <input :id="`qty-${item.sku_id}`" :value="item.qty" type="number" min="1" :disabled="updating === item.sku_id" @change="updateQuantity(item, ($event.target as HTMLInputElement).value)">
-          </div>
-          <div class="line-total"><PriceText :amount-minor="(converted[item.sku_id] ?? 0) * item.qty" :currency="currency" /></div>
-          <button class="btn danger sm" :disabled="updating === item.sku_id" @click="removeItem(item)">{{ $t("cart.remove") }}</button>
-        </div>
+  <div class="transaction-page cart-page">
+    <div class="w1200">
+      <UiStepBar :steps="stepLabels" :active="0" />
+      <header class="page-heading">
+        <h1>{{ t("cart.title") }}</h1>
+      </header>
+
+      <p v-if="error" class="error-message">{{ error }}</p>
+      <template v-if="!loading && items.length > 0">
+        <section v-for="group in groups" :key="group.shopId" class="shop-group mpanel">
+          <header class="shop-heading">
+            <span class="shop-label">{{ t("cart.shop") }}</span>
+            <strong>{{ group.store ? pick(group.store.name, locale) : t("cart.unknownStore") }}</strong>
+          </header>
+          <table class="mtable cart-table">
+            <thead>
+              <tr>
+                <th class="check-col" />
+                <th class="product-col">{{ t("cart.product") }}</th>
+                <th>{{ t("cart.spec") }}</th>
+                <th>{{ t("cart.unitPrice") }}</th>
+                <th>{{ t("cart.quantity") }}</th>
+                <th>{{ t("cart.subtotal") }}</th>
+                <th>{{ t("cart.actions") }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in group.items" :key="item.sku_id">
+                <td class="check-col">
+                  <input
+                    :checked="Boolean(selected[item.sku_id])"
+                    type="checkbox"
+                    :aria-label="pick(item.product_name, locale)"
+                    @change="onSelectionChange(item.sku_id, $event)"
+                  />
+                </td>
+                <td class="product-cell">
+                  <img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
+                  <span>{{ pick(item.product_name, locale) }}</span>
+                </td>
+                <td class="muted">{{ item.sku_code }}</td>
+                <td><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></td>
+                <td>
+                  <UiQtyStepper
+                    :model-value="item.qty"
+                    :max="maxFor(item)"
+                    @update:model-value="updateQuantity(item, $event)"
+                  />
+                </td>
+                <td class="price-strong">
+                  <PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" />
+                </td>
+                <td>
+                  <button type="button" class="text-button" :disabled="mutating" @click="removeItem(item)">
+                    {{ t("cart.remove") }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <footer class="cart-footer mpanel">
+          <label class="select-all">
+            <input :checked="allSelected" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
+            <span>{{ t("cart.selectAll") }}</span>
+          </label>
+          <span class="selected-count">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
+          <span class="total-label">{{ t("cart.subtotal") }}:</span>
+          <strong class="total-price"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
+          <button class="mbtn red checkout-button" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">
+            {{ t("cart.checkout") }}
+          </button>
+        </footer>
+      </template>
+
+      <div v-else-if="!loading" class="empty-wrap mpanel">
+        <UiEmptyState :text="t('cart.empty')" />
+        <NuxtLink class="mbtn red" to="/">{{ t("cart.continueShopping") }}</NuxtLink>
       </div>
-      <div class="card summary row between">
-        <strong>{{ $t("cart.subtotal") }}</strong>
-        <strong class="total">{{ subtotalDisplay || $t("common.loading") }}</strong>
-        <NuxtLink class="btn primary" to="/checkout">{{ $t("cart.checkout") }}</NuxtLink>
-      </div>
-    </template>
-  </section>
+      <div v-else class="loading-state">{{ $t("common.loading") }}</div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-.cart-list { padding: 0; }
-.cart-line { display: grid; grid-template-columns: minmax(240px, 1fr) 120px 100px 120px auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
-.cart-line:last-child { border-bottom: 0; }
-.cart-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.cart-product img, .image-placeholder { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); background: #eef1f5; }
-.image-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; text-align: center; }
-.product-name { font-weight: 600; }
-.quantity-field { margin: 0; }
-.quantity-field input { width: 80px; }
-.line-total, .unit-price, .total { color: var(--primary); font-weight: 600; }
-.summary { margin-top: 16px; }
-.empty-state { text-align: center; }
-.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-@media (max-width: 800px) {
-  .cart-line { grid-template-columns: 1fr auto auto; }
-  .unit-price, .line-total { text-align: right; }
-  .cart-product { grid-column: 1 / -1; }
+.transaction-page {
+  padding: 24px 0 56px;
+  background: #f5f5f5;
+  min-height: 60vh;
+}
+.page-heading {
+  display: flex;
+  align-items: center;
+  margin: 0 0 16px;
+}
+.page-heading h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+.error-message {
+  margin: 0 0 16px;
+  padding: 10px 14px;
+  color: #b42318;
+  background: #fff1f0;
+  border: 1px solid #ffd6d2;
+}
+.shop-group {
+  margin-bottom: 16px;
+  padding: 0;
+  overflow: hidden;
+}
+.shop-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--mall-line);
+  font-size: 14px;
+}
+.shop-label {
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.cart-table {
+  margin: 0;
+  width: 100%;
+}
+.cart-table th,
+.cart-table td {
+  padding: 14px 10px;
+  vertical-align: middle;
+}
+.cart-table th:first-child,
+.cart-table td:first-child {
+  padding-left: 18px;
+}
+.cart-table th:last-child,
+.cart-table td:last-child {
+  padding-right: 18px;
+}
+.check-col {
+  width: 42px;
+  text-align: center;
+}
+.product-col {
+  width: 34%;
+}
+.product-cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 60px;
+  line-height: 1.5;
+}
+.product-cell img {
+  width: 60px;
+  height: 60px;
+  flex: 0 0 60px;
+  object-fit: cover;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+}
+.muted {
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.price-strong,
+.total-price {
+  color: var(--mall-red);
+  font-weight: 600;
+}
+.text-button {
+  border: 0;
+  background: transparent;
+  color: var(--mall-muted);
+  cursor: pointer;
+  padding: 4px;
+}
+.text-button:hover {
+  color: var(--mall-red);
+}
+.text-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.cart-footer {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 14px 18px;
+}
+.select-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  cursor: pointer;
+}
+.selected-count {
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.total-label {
+  margin-left: auto;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.total-price {
+  font-size: 18px;
+}
+.checkout-button {
+  min-width: 112px;
+}
+.empty-wrap {
+  padding-bottom: 28px;
+  text-align: center;
+}
+.empty-wrap :deep(.empty) {
+  padding-bottom: 20px;
+}
+.loading-state {
+  padding: 70px 0;
+  text-align: center;
+  color: var(--mall-muted);
 }
 </style>
diff --git a/apps/mall/pages/checkout.vue b/apps/mall/pages/checkout.vue
deleted file mode 100644
index 81f711b..0000000
--- a/apps/mall/pages/checkout.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<script setup lang="ts">
-import type { Address, Cart, Order } from "@vmall/shared";
-import { t as localized } from "@vmall/shared";
-
-const { $api } = useNuxtApp();
-const { locale } = useI18n();
-const { currency, convertAmount, formatAmount } = usePrice();
-
-const cart = ref<Cart | null>(null);
-const converted = ref<Record<string, number>>({});
-const subtotalDisplay = ref("");
-const loading = ref(true);
-const submitting = ref(false);
-const error = ref("");
-const placedOrders = ref<Order[] | null>(null);
-const address = reactive<Address>({ recipient: "", phone: "", country: "", region: "", city: "", line1: "", postal_code: "" });
-
-const subtotalMinor = computed(() => (cart.value?.items ?? []).reduce((sum, item) => sum + (converted.value[item.sku_id] ?? 0) * item.qty, 0));
-
-function errorMessage(value: unknown): string {
-  return value instanceof Error ? value.message : $t("mall.loadFailed");
-}
-
-async function refreshPrices(): Promise<void> {
-  if (!cart.value) return;
-  const entries = await Promise.all(cart.value.items.map(async (item) => [item.sku_id, await convertAmount(item.unit_price_minor, item.currency)] as const));
-  converted.value = Object.fromEntries(entries);
-  subtotalDisplay.value = await formatAmount(subtotalMinor.value, currency.value);
-}
-
-async function loadCart(): Promise<void> {
-  loading.value = true;
-  error.value = "";
-  try {
-    cart.value = await $api.getCart();
-    await refreshPrices();
-  } catch (value) {
-    error.value = errorMessage(value);
-  } finally {
-    loading.value = false;
-  }
-}
-
-function validateAddress(): boolean {
-  const required: (keyof Address)[] = ["recipient", "phone", "country", "city", "line1"];
-  return required.every((key) => address[key].trim().length > 0);
-}
-
-async function placeOrder(): Promise<void> {
-  if (!validateAddress()) {
-    error.value = $t("common.required");
-    return;
-  }
-  if (!cart.value || cart.value.items.length === 0) return;
-  submitting.value = true;
-  error.value = "";
-  try {
-    placedOrders.value = await $api.checkout({ ...address }, currency.value);
-    await $api.getCart();
-  } catch (value) {
-    error.value = errorMessage(value);
-  } finally {
-    submitting.value = false;
-  }
-}
-
-watch(currency, () => void refreshPrices());
-onMounted(() => void loadCart());
-
-definePageMeta({ middleware: "auth" });
-</script>
-
-<template>
-  <section>
-    <h1 class="page-title">{{ placedOrders ? $t("mall.orderSuccess") : $t("mall.checkoutTitle") }}</h1>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-
-    <div v-if="placedOrders" class="card success-card">
-      <h2>{{ $t("mall.orderNumbers") }}</h2>
-      <ul>
-        <li v-for="order in placedOrders" :key="order.id"><NuxtLink :to="`/orders/${order.id}`">{{ order.order_no }}</NuxtLink></li>
-      </ul>
-      <div class="row">
-        <NuxtLink class="btn primary" to="/orders">{{ $t("mall.viewOrders") }}</NuxtLink>
-        <NuxtLink class="btn" to="/">{{ $t("mall.backToShop") }}</NuxtLink>
-      </div>
-    </div>
-
-    <template v-else-if="cart && cart.items.length > 0">
-      <div class="checkout-layout">
-        <form class="card" @submit.prevent="placeOrder">
-          <h2>{{ $t("order.shippingAddress") }}</h2>
-          <div class="field-row">
-            <div class="field"><label for="recipient">{{ $t("order.recipient") }}</label><input id="recipient" v-model="address.recipient" required></div>
-            <div class="field"><label for="phone">{{ $t("order.phone") }}</label><input id="phone" v-model="address.phone" required></div>
-          </div>
-          <div class="field-row">
-            <div class="field"><label for="country">{{ $t("order.country") }}</label><input id="country" v-model="address.country" required></div>
-            <div class="field"><label for="region">{{ $t("order.region") }} <span class="muted">({{ $t("mall.shippingOptional") }})</span></label><input id="region" v-model="address.region"></div>
-          </div>
-          <div class="field-row">
-            <div class="field"><label for="city">{{ $t("order.city") }}</label><input id="city" v-model="address.city" required></div>
-            <div class="field"><label for="postal-code">{{ $t("order.postalCode") }} <span class="muted">({{ $t("mall.shippingOptional") }})</span></label><input id="postal-code" v-model="address.postal_code"></div>
-          </div>
-          <div class="field"><label for="line1">{{ $t("order.line1") }}</label><input id="line1" v-model="address.line1" required></div>
-          <button class="btn primary" type="submit" :disabled="submitting">{{ submitting ? $t("common.loading") : $t("mall.placeOrder") }}</button>
-        </form>
-
-        <aside class="card preview">
-          <h2>{{ $t("mall.orderPreview") }}</h2>
-          <div v-for="item in cart.items" :key="item.sku_id" class="preview-line">
-            <div><strong>{{ localized(item.product_name, locale) }}</strong><span class="muted">{{ item.sku_code }} × {{ item.qty }}</span></div>
-            <PriceText :amount-minor="(converted[item.sku_id] ?? 0) * item.qty" :currency="currency" />
-          </div>
-          <div class="preview-total row between"><strong>{{ $t("cart.subtotal") }}</strong><strong>{{ subtotalDisplay || $t("common.loading") }}</strong></div>
-        </aside>
-      </div>
-    </template>
-    <div v-else-if="!loading" class="card empty-state">
-      {{ $t("cart.emptyCart") }}
-      <NuxtLink class="btn mt" to="/">{{ $t("mall.backToShop") }}</NuxtLink>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 20px; align-items: start; }
-.card h2 { font-size: 17px; margin: 0 0 16px; }
-.preview-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
-.preview-line > div { display: grid; gap: 2px; }
-.preview-total { padding-top: 14px; color: var(--primary); }
-.success-card { max-width: 580px; }
-.empty-state { text-align: center; }
-@media (max-width: 760px) { .checkout-layout { grid-template-columns: 1fr; } }
-</style>
diff --git a/apps/mall/pages/checkout/index.vue b/apps/mall/pages/checkout/index.vue
new file mode 100644
index 0000000..e09a192
--- /dev/null
+++ b/apps/mall/pages/checkout/index.vue
@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import type { Address, CartItem } from "@vmall/shared";
+import { MOCK_ADDRESSES, productById, storeById } from "~/mock/data";
+import type { MockAddress } from "~/mock/data";
+
+type CheckoutGroup = {
+  shopId: string;
+  store: ReturnType<typeof storeById>;
+  items: CartItem[];
+};
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t } = useI18n();
+const { currency } = usePrefs();
+const cartStore = useCartStore();
+const router = useRouter();
+const pendingOrderIds = useState<string[]>("checkout-orders", () => []);
+
+const items = ref<CartItem[]>([]);
+const selectedAddressId = ref(MOCK_ADDRESSES.find((address) => address.isDefault)?.id ?? MOCK_ADDRESSES[0]?.id ?? "");
+const remark = ref("");
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref("");
+
+const stepLabels = computed(() => [
+  t("checkout.steps.cart"),
+  t("checkout.steps.order"),
+  t("checkout.steps.payment"),
+  t("checkout.steps.complete"),
+]);
+
+const selectedAddress = computed<MockAddress | null>(
+  () => MOCK_ADDRESSES.find((address) => address.id === selectedAddressId.value) ?? null,
+);
+
+const groups = computed<CheckoutGroup[]>(() => {
+  const grouped = new Map<string, CartItem[]>();
+  for (const item of items.value) {
+    const shopId = productById(item.product_id)?.shop_id ?? "unknown";
+    const groupItems = grouped.get(shopId) ?? [];
+    groupItems.push(item);
+    grouped.set(shopId, groupItems);
+  }
+  return Array.from(grouped, ([shopId, groupItems]) => ({
+    shopId,
+    store: shopId === "unknown" ? null : storeById(shopId),
+    items: groupItems,
+  }));
+});
+
+const sourceCurrency = computed(() => items.value[0]?.currency ?? currency.value);
+const totalMinor = computed(() =>
+  items.value.reduce((total, item) => total + item.unit_price_minor * item.qty, 0),
+);
+
+function imageFor(item: CartItem): string {
+  return productById(item.product_id)?.images[0] ?? item.image ?? "/mock/product-1.svg";
+}
+
+function toAddress(address: MockAddress): Address {
+  return {
+    recipient: address.recipient,
+    phone: address.phone,
+    country: "US",
+    region: address.region,
+    city: address.city,
+    line1: address.line1,
+    postal_code: address.postalCode,
+  };
+}
+
+async function loadCart(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    const snapshot = await $api.getCart();
+    items.value = snapshot.items;
+    if (items.value.length === 0) {
+      await router.replace("/cart");
+    }
+  } catch {
+    error.value = t("checkout.loadError");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function submitOrder(): Promise<void> {
+  if (!selectedAddress.value || items.value.length === 0) return;
+  submitting.value = true;
+  error.value = "";
+  try {
+    const orders = await $api.checkout(toAddress(selectedAddress.value), currency.value);
+    pendingOrderIds.value = orders.map((order) => order.id);
+    const snapshot = await $api.getCart();
+    items.value = snapshot.items;
+    await cartStore.refresh();
+    await router.push("/checkout/pay");
+  } catch {
+    error.value = t("checkout.submitError");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+onMounted(() => void loadCart());
+</script>
+
+<template>
+  <div class="transaction-page checkout-page">
+    <div class="w1200">
+      <UiStepBar :steps="stepLabels" :active="1" />
+      <header class="page-heading">
+        <h1>{{ t("checkout.title") }}</h1>
+      </header>
+
+      <p v-if="error" class="error-message">{{ error }}</p>
+      <template v-if="!loading && items.length > 0">
+        <section class="mpanel address-panel">
+          <h2 class="section-title">{{ t("checkout.address") }}</h2>
+          <div class="address-list">
+            <label
+              v-for="address in MOCK_ADDRESSES"
+              :key="address.id"
+              class="address-option"
+              :class="{ selected: address.id === selectedAddressId }"
+            >
+              <input v-model="selectedAddressId" type="radio" name="shipping-address" :value="address.id" />
+              <span class="address-main">
+                <strong>{{ address.recipient }}</strong>
+                <span>{{ address.phone }}</span>
+                <span>{{ address.region }} {{ address.city }} {{ address.line1 }} {{ address.postalCode }}</span>
+              </span>
+              <span v-if="address.isDefault" class="default-tag">{{ t("checkout.defaultAddress") }}</span>
+            </label>
+          </div>
+        </section>
+
+        <section class="mpanel order-panel">
+          <h2 class="section-title">{{ t("checkout.orderPreview") }}</h2>
+          <div v-for="group in groups" :key="group.shopId" class="order-group">
+            <header class="shop-heading">
+              <img v-if="group.store" :src="group.store.logo" :alt="pick(group.store.name, locale)" />
+              <span>{{ group.store ? pick(group.store.name, locale) : t("checkout.shop") }}</span>
+            </header>
+            <div v-for="item in group.items" :key="item.sku_id" class="order-item">
+              <img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
+              <div class="item-info">
+                <strong>{{ pick(item.product_name, locale) }}</strong>
+                <span class="muted">{{ item.sku_code }}</span>
+              </div>
+              <PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
+              <span class="qty">× {{ item.qty }}</span>
+              <strong class="line-total">
+                <PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" />
+              </strong>
+            </div>
+          </div>
+        </section>
+
+        <section class="mpanel remark-panel">
+          <label class="section-title" for="order-remark">{{ t("checkout.remark") }}</label>
+          <textarea id="order-remark" v-model="remark" class="remark-input" :placeholder="t('checkout.remarkPlaceholder')" rows="3" />
+        </section>
+
+        <footer class="submit-bar mpanel">
+          <span class="total-label">{{ t("checkout.total") }}:</span>
+          <strong class="total-price"><PriceText :amount-minor="totalMinor" :currency="sourceCurrency" /></strong>
+          <button class="mbtn red" type="button" :disabled="submitting" @click="submitOrder">
+            {{ t("checkout.submit") }}
+          </button>
+        </footer>
+      </template>
+      <div v-else-if="!loading" class="empty-wrap mpanel">
+        <UiEmptyState :text="t('checkout.noItems')" />
+        <NuxtLink class="mbtn gray" to="/cart">{{ t("checkout.backToCart") }}</NuxtLink>
+      </div>
+      <div v-else class="loading-state">{{ $t("common.loading") }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.transaction-page {
+  padding: 24px 0 56px;
+  background: #f5f5f5;
+  min-height: 60vh;
+}
+.page-heading {
+  margin: 0 0 16px;
+}
+.page-heading h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+.error-message {
+  margin: 0 0 16px;
+  padding: 10px 14px;
+  color: #b42318;
+  background: #fff1f0;
+  border: 1px solid #ffd6d2;
+}
+.mpanel {
+  margin-bottom: 16px;
+}
+.section-title {
+  display: block;
+  margin: 0;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--mall-line);
+  font-size: 15px;
+  font-weight: 600;
+}
+.address-list {
+  padding: 8px 18px 16px;
+}
+.address-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+  padding: 13px 14px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  line-height: 1.5;
+}
+.address-option:hover,
+.address-option.selected {
+  border-color: var(--mall-red);
+  background: #fffafa;
+}
+.address-main {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
+}
+.address-main span:last-child {
+  color: var(--mall-muted);
+}
+.default-tag {
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.order-panel {
+  padding: 0;
+  overflow: hidden;
+}
+.order-group + .order-group {
+  border-top: 1px solid var(--mall-line);
+}
+.shop-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 18px;
+  color: #444;
+  font-size: 13px;
+}
+.shop-heading img {
+  width: 28px;
+  height: 28px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.order-item {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) 120px 64px 130px;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 18px;
+  border-top: 1px solid #f5f5f5;
+}
+.order-item > img {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border: 1px solid var(--mall-line);
+}
+.item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+.item-info strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.muted,
+.qty {
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.line-total {
+  color: var(--mall-red);
+  text-align: right;
+}
+.remark-panel {
+  padding: 0 0 16px;
+}
+.remark-input {
+  display: block;
+  box-sizing: border-box;
+  width: calc(100% - 36px);
+  margin: 14px 18px 0;
+  resize: vertical;
+  border: 1px solid var(--mall-line-dark);
+  padding: 10px 12px;
+  font: inherit;
+  outline: none;
+}
+.remark-input:focus {
+  border-color: var(--mall-red);
+}
+.submit-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 18px;
+  padding: 14px 18px;
+}
+.total-label {
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.total-price {
+  color: var(--mall-red);
+  font-size: 20px;
+}
+.empty-wrap {
+  padding-bottom: 28px;
+  text-align: center;
+}
+.empty-wrap :deep(.empty) {
+  padding-bottom: 20px;
+}
+.loading-state {
+  padding: 70px 0;
+  text-align: center;
+  color: var(--mall-muted);
+}
+</style>
diff --git a/apps/mall/pages/checkout/pay.vue b/apps/mall/pages/checkout/pay.vue
new file mode 100644
index 0000000..ed789bb
--- /dev/null
+++ b/apps/mall/pages/checkout/pay.vue
@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import type { Order } from "@vmall/shared";
+import { storeById } from "~/mock/data";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t } = useI18n();
+const { currency } = usePrefs();
+const router = useRouter();
+const pendingOrderIds = useState<string[]>("checkout-orders", () => []);
+
+const orders = ref<Order[]>([]);
+const paymentMethod = ref("balance");
+const loading = ref(true);
+const paying = ref(false);
+const error = ref("");
+
+const stepLabels = computed(() => [
+  t("checkout.steps.cart"),
+  t("checkout.steps.order"),
+  t("checkout.steps.payment"),
+  t("checkout.steps.complete"),
+]);
+
+const paymentOptions = computed(() => [
+  { value: "balance", label: t("checkout.balance") },
+  { value: "wechat", label: t("checkout.wechat") },
+  { value: "alipay", label: t("checkout.alipay") },
+]);
+
+const grandTotalMinor = computed(() => orders.value.reduce((total, order) => total + order.total_minor, 0));
+const totalCurrency = computed(() => orders.value[0]?.currency ?? currency.value);
+
+function imageFor(image: string | null): string {
+  return image ?? "/mock/product-1.svg";
+}
+
+function storeName(shopId: string): string {
+  const store = storeById(shopId);
+  return store ? pick(store.name, locale.value) : t("checkout.shop");
+}
+
+async function loadOrders(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  if (pendingOrderIds.value.length === 0) {
+    loading.value = false;
+    return;
+  }
+  try {
+    orders.value = await Promise.all(pendingOrderIds.value.map((id) => $api.getOrder(id)));
+  } catch {
+    orders.value = [];
+    error.value = t("checkout.loadError");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function confirmPayment(): Promise<void> {
+  if (orders.value.length === 0) return;
+  paying.value = true;
+  error.value = "";
+  try {
+    for (const order of orders.value) await $api.payOrder(order.id);
+    pendingOrderIds.value = [];
+    await router.push("/checkout/success");
+  } catch {
+    error.value = t("checkout.payError");
+  } finally {
+    paying.value = false;
+  }
+}
+
+onMounted(() => void loadOrders());
+</script>
+
+<template>
+  <div class="transaction-page pay-page">
+    <div class="w1200">
+      <UiStepBar :steps="stepLabels" :active="2" />
+      <header class="page-heading">
+        <h1>{{ t("checkout.payTitle") }}</h1>
+      </header>
+
+      <p v-if="error" class="error-message">{{ error }}</p>
+      <template v-if="!loading && orders.length > 0">
+        <section class="order-cards">
+          <article v-for="order in orders" :key="order.id" class="mpanel order-card">
+            <header class="order-heading">
+              <span>{{ t("checkout.orderNo") }}: {{ order.order_no }}</span>
+              <span class="shop-name">{{ storeName(order.shop_id) }}</span>
+            </header>
+            <div v-for="item in order.items" :key="item.id" class="order-item">
+              <img :src="imageFor(item.image)" :alt="pick(item.product_name, locale)" />
+              <div class="item-info">
+                <strong>{{ pick(item.product_name, locale) }}</strong>
+                <span class="muted">{{ item.sku_code }}</span>
+              </div>
+              <PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" />
+              <span class="qty">× {{ item.qty }}</span>
+              <strong class="line-total">
+                <PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" />
+              </strong>
+            </div>
+            <footer class="order-total">
+              <span>{{ t("checkout.total") }}</span>
+              <strong><PriceText :amount-minor="order.total_minor" :currency="order.currency" /></strong>
+            </footer>
+          </article>
+        </section>
+
+        <section class="mpanel payment-panel">
+          <h2 class="section-title">{{ t("checkout.paymentTitle") }}</h2>
+          <label v-for="option in paymentOptions" :key="option.value" class="payment-option">
+            <input v-model="paymentMethod" type="radio" name="payment-method" :value="option.value" />
+            <span>{{ option.label }}</span>
+          </label>
+        </section>
+
+        <footer class="submit-bar mpanel">
+          <span class="total-label">{{ t("checkout.grandTotal") }}:</span>
+          <strong class="total-price"><PriceText :amount-minor="grandTotalMinor" :currency="totalCurrency" /></strong>
+          <button class="mbtn red" type="button" :disabled="paying" @click="confirmPayment">
+            {{ t("checkout.confirmPay") }}
+          </button>
+        </footer>
+      </template>
+      <div v-else-if="!loading" class="empty-wrap mpanel">
+        <UiEmptyState :text="t('checkout.noPendingOrders')" />
+        <NuxtLink class="mbtn gray" to="/">{{ t("checkout.backHome") }}</NuxtLink>
+      </div>
+      <div v-else class="loading-state">{{ $t("common.loading") }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.transaction-page {
+  padding: 24px 0 56px;
+  background: #f5f5f5;
+  min-height: 60vh;
+}
+.page-heading {
+  margin: 0 0 16px;
+}
+.page-heading h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+.error-message {
+  margin: 0 0 16px;
+  padding: 10px 14px;
+  color: #b42318;
+  background: #fff1f0;
+  border: 1px solid #ffd6d2;
+}
+.order-card {
+  padding: 0;
+  overflow: hidden;
+}
+.order-card + .order-card {
+  margin-top: 16px;
+}
+.order-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--mall-line);
+  font-size: 13px;
+}
+.shop-name {
+  color: var(--mall-muted);
+}
+.order-item {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) 120px 64px 130px;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 18px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.order-item > img {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border: 1px solid var(--mall-line);
+}
+.item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+.item-info strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.muted,
+.qty {
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.line-total {
+  color: var(--mall-red);
+  text-align: right;
+}
+.order-total {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 18px;
+  padding: 14px 18px;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.order-total strong {
+  color: var(--mall-red);
+  font-size: 16px;
+}
+.payment-panel {
+  margin-top: 16px;
+  padding: 0 18px 16px;
+}
+.section-title {
+  margin: 0 -18px 12px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--mall-line);
+  font-size: 15px;
+  font-weight: 600;
+}
+.payment-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 30px;
+  padding: 8px 0;
+  cursor: pointer;
+}
+.submit-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 18px;
+  padding: 14px 18px;
+}
+.total-label {
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.total-price {
+  color: var(--mall-red);
+  font-size: 20px;
+}
+.empty-wrap {
+  padding-bottom: 28px;
+  text-align: center;
+}
+.empty-wrap :deep(.empty) {
+  padding-bottom: 20px;
+}
+.loading-state {
+  padding: 70px 0;
+  text-align: center;
+  color: var(--mall-muted);
+}
+</style>
diff --git a/apps/mall/pages/checkout/success.vue b/apps/mall/pages/checkout/success.vue
new file mode 100644
index 0000000..629bdfb
--- /dev/null
+++ b/apps/mall/pages/checkout/success.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+definePageMeta({ middleware: "auth" });
+
+const { t } = useI18n();
+
+const stepLabels = computed(() => [
+  t("checkout.steps.cart"),
+  t("checkout.steps.order"),
+  t("checkout.steps.payment"),
+  t("checkout.steps.complete"),
+]);
+</script>
+
+<template>
+  <div class="transaction-page success-page">
+    <div class="w1200">
+      <UiStepBar :steps="stepLabels" :active="3" />
+      <section class="mpanel success-panel">
+        <div class="success-icon" aria-hidden="true">✓</div>
+        <h1>{{ t("checkout.successTitle") }}</h1>
+        <p>{{ t("checkout.successMessage") }}</p>
+        <div class="success-actions">
+          <NuxtLink class="mbtn red" to="/user/orders">{{ t("checkout.viewOrders") }}</NuxtLink>
+          <NuxtLink class="mbtn gray" to="/">{{ t("checkout.continueShopping") }}</NuxtLink>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.transaction-page {
+  padding: 24px 0 80px;
+  background: #f5f5f5;
+  min-height: 60vh;
+}
+.success-panel {
+  padding: 60px 20px 70px;
+  text-align: center;
+}
+.success-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: var(--mall-green);
+  color: #fff;
+  font-size: 48px;
+  line-height: 1;
+}
+.success-panel h1 {
+  margin: 22px 0 10px;
+  font-size: 24px;
+  font-weight: 500;
+}
+.success-panel p {
+  margin: 0;
+  color: var(--mall-muted);
+}
+.success-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 28px;
+}
+</style>
diff --git a/apps/mall/pages/collective.vue b/apps/mall/pages/collective.vue
new file mode 100644
index 0000000..d6236e3
--- /dev/null
+++ b/apps/mall/pages/collective.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import { collectiveProducts, lowestSku } from "~/mock/data";
+
+const { locale, t } = useI18n();
+const products = collectiveProducts();
+
+const breadcrumb = computed(() => [
+  { label: t("stores.breadcrumbHome"), to: "/" },
+  { label: t("marketing.collectiveBreadcrumb") },
+]);
+
+function currencyOf(product: (typeof products)[number]["product"]): string {
+  return lowestSku(product)?.currency ?? "USD";
+}
+function priceMinorOf(product: (typeof products)[number]["product"]): number {
+  return lowestSku(product)?.price_minor ?? 0;
+}
+
+</script>
+
+<template>
+  <div class="collective-page">
+    <UiBreadcrumb :items="breadcrumb" />
+    <section class="w1200 marketing-section">
+      <img class="marketing-banner" src="/mock/collective-banner.svg" :alt="t('marketing.collectiveBannerAlt')" />
+      <header class="section-heading">
+        <h1>{{ t("marketing.collectiveTitle") }}</h1>
+      </header>
+      <div v-if="products.length" class="collective-grid">
+        <article v-for="item in products" :key="item.product.id" class="collective-card hover-lift">
+          <NuxtLink :to="`/goods/${item.product.slug}`" class="product-image">
+            <img :src="item.product.images[0]" :alt="pick(item.product.name, locale)" loading="lazy" />
+          </NuxtLink>
+          <div class="product-body">
+            <NuxtLink :to="`/goods/${item.product.slug}`" class="product-name">{{ pick(item.product.name, locale) }}</NuxtLink>
+            <div class="deal-meta">
+              <span class="deal-price"><PriceText :amount-minor="priceMinorOf(item.product)" :currency="currencyOf(item.product)" /></span>
+              <span class="group-tag">{{ t("marketing.peopleGroup", { n: item.need }) }}</span>
+            </div>
+            <p class="joined">{{ t("marketing.peopleJoined", { n: item.joined }) }}</p>
+            <NuxtLink :to="`/goods/${item.product.slug}`" class="deal-link">{{ t("marketing.joinGroup") }} <span aria-hidden="true">›</span></NuxtLink>
+          </div>
+        </article>
+      </div>
+      <UiEmptyState v-else :text="t('marketing.noCollectiveProducts')" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.collective-page {
+  padding-bottom: 60px;
+}
+.marketing-section {
+  background: #fff;
+}
+.marketing-banner {
+  display: block;
+  width: 100%;
+  height: 350px;
+  object-fit: cover;
+}
+.section-heading {
+  margin-top: 20px;
+  border: 1px solid var(--mall-line);
+  background: #fafafa;
+  padding: 14px 18px;
+}
+.section-heading h1 {
+  margin: 0;
+  border-left: 3px solid var(--mall-red);
+  padding-left: 10px;
+  font-size: 17px;
+  font-weight: 500;
+}
+.collective-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 15px;
+  margin-top: 20px;
+}
+.collective-card {
+  min-width: 0;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+}
+.product-image {
+  display: flex;
+  height: 180px;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+}
+.product-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.product-body {
+  padding: 0 12px 13px;
+}
+.product-name {
+  display: block;
+  height: 36px;
+  overflow: hidden;
+  color: var(--mall-ink);
+  font-size: 13px;
+  line-height: 1.4;
+  text-decoration: none;
+}
+.product-name:hover {
+  color: var(--mall-red);
+}
+.deal-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  margin-top: 11px;
+}
+.deal-price {
+  color: var(--mall-red);
+  font-size: 17px;
+  font-weight: 700;
+}
+.group-tag {
+  flex: 0 0 auto;
+  border: 1px solid #f2b9bc;
+  background: #fff4f4;
+  padding: 2px 5px;
+  color: var(--mall-red);
+  font-size: 11px;
+}
+.joined {
+  margin: 7px 0 10px;
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.deal-link {
+  display: block;
+  border-top: 1px solid var(--mall-line);
+  padding-top: 9px;
+  color: var(--mall-red);
+  font-size: 12px;
+  text-decoration: none;
+}
+.deal-link span {
+  float: right;
+  font-size: 16px;
+  line-height: 11px;
+}
+@media (max-width: 1240px) {
+  .w1200 {
+    width: calc(100% - 32px);
+  }
+}
+@media (max-width: 900px) {
+  .collective-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 600px) {
+  .marketing-banner {
+    height: 220px;
+  }
+  .collective-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
diff --git a/apps/mall/pages/forgot-password.vue b/apps/mall/pages/forgot-password.vue
new file mode 100644
index 0000000..263f7b5
--- /dev/null
+++ b/apps/mall/pages/forgot-password.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const email = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+const code = ref("");
+const errorKey = ref("");
+const success = ref(false);
+const submitting = ref(false);
+const countdown = ref(0);
+let timer: ReturnType<typeof setInterval> | undefined;
+
+function startCountdown(): void {
+  if (countdown.value > 0) return;
+  countdown.value = 60;
+  timer = setInterval(() => {
+    countdown.value -= 1;
+    if (countdown.value <= 0 && timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+  }, 1000);
+}
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+
+function validate(): boolean {
+  if (!email.value || !password.value || !confirmPassword.value || !code.value) {
+    errorKey.value = "auth.validationRequired";
+    return false;
+  }
+  if (!/^\S+@\S+\.\S+$/.test(email.value)) {
+    errorKey.value = "auth.validationEmail";
+    return false;
+  }
+  if (password.value.length < 6) {
+    errorKey.value = "auth.validationPassword";
+    return false;
+  }
+  if (password.value !== confirmPassword.value) {
+    errorKey.value = "auth.validationMismatch";
+    return false;
+  }
+  return true;
+}
+
+async function submit(): Promise<void> {
+  errorKey.value = "";
+  if (!validate()) return;
+  submitting.value = true;
+  await new Promise<void>((resolve) => setTimeout(resolve, 180));
+  success.value = true;
+  submitting.value = false;
+}
+</script>
+
+<template>
+  <section class="auth-page">
+    <div class="auth-inner">
+      <div class="auth-panel">
+        <template v-if="success">
+          <div class="success-state">
+            <div class="success-mark">✓</div>
+            <h1>{{ t("auth.resetSuccess") }}</h1>
+            <p>{{ t("auth.resetSuccessHint") }}</p>
+            <NuxtLink class="mbtn red block" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
+          </div>
+        </template>
+        <template v-else>
+          <div class="auth-tabs">
+            <h1>{{ t("auth.forgotTab") }}</h1>
+            <NuxtLink to="/login">{{ t("auth.loginTab") }}</NuxtLink>
+          </div>
+          <form @submit.prevent="submit">
+            <label class="field">
+              <span>{{ t("common.email") }}</span>
+              <input v-model.trim="email" class="minput" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
+            </label>
+            <label class="field">
+              <span>{{ t("auth.newPassword") }}</span>
+              <input v-model="password" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
+            </label>
+            <label class="field">
+              <span>{{ t("auth.confirmPassword") }}</span>
+              <input v-model="confirmPassword" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
+            </label>
+            <label class="field">
+              <span>{{ t("auth.smsCode") }}</span>
+              <span class="code-row">
+                <input v-model.trim="code" class="minput" type="text" :placeholder="t('auth.smsCodePlaceholder')" />
+                <button class="mbtn code-button" type="button" :disabled="countdown > 0" @click="startCountdown">
+                  {{ countdown > 0 ? t("auth.codeCountdown", { n: countdown }) : t("auth.getCode") }}
+                </button>
+              </span>
+            </label>
+            <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
+            <button class="mbtn red block submit" type="submit" :disabled="submitting">
+              {{ t("auth.resetAction") }}
+            </button>
+          </form>
+          <div class="auth-links">
+            <NuxtLink to="/login">{{ t("auth.loginNow") }}</NuxtLink>
+          </div>
+        </template>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.auth-page {
+  min-height: 720px;
+  background: #f6f6f6 url("/mock/login-bg.svg") center top / cover no-repeat;
+  padding: 50px 0;
+  box-sizing: border-box;
+}
+.auth-inner {
+  width: 1200px;
+  min-height: 540px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.auth-panel {
+  width: 400px;
+  min-height: 540px;
+  box-sizing: border-box;
+  padding: 40px;
+  background: #fff;
+  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
+}
+.auth-tabs {
+  display: flex;
+  align-items: baseline;
+  gap: 18px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--mall-line);
+  padding-bottom: 14px;
+}
+h1 {
+  margin: 0;
+  color: var(--mall-ink);
+  font-size: 20px;
+  font-weight: 600;
+}
+.auth-tabs a,
+.auth-links a {
+  color: var(--mall-red);
+  font-size: 13px;
+  text-decoration: none;
+}
+.auth-tabs a:hover,
+.auth-links a:hover {
+  color: var(--mall-red-dark);
+}
+.field {
+  display: block;
+  margin-bottom: 13px;
+}
+.field > span:first-child {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.code-row {
+  display: flex;
+  gap: 8px;
+}
+.code-row .minput {
+  min-width: 0;
+  flex: 1;
+}
+.code-button {
+  flex: 0 0 100px;
+  padding: 5px 8px;
+  white-space: nowrap;
+}
+.submit {
+  margin-top: 4px;
+}
+.error {
+  margin: -2px 0 10px;
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.auth-links {
+  margin-top: 17px;
+  font-size: 12px;
+  text-align: center;
+}
+.success-state {
+  padding-top: 60px;
+  text-align: center;
+}
+.success-mark {
+  width: 54px;
+  height: 54px;
+  margin: 0 auto 18px;
+  border-radius: 50%;
+  background: var(--mall-green);
+  color: #fff;
+  font-size: 34px;
+  line-height: 54px;
+}
+.success-state h1 {
+  font-size: 20px;
+}
+.success-state p {
+  margin: 14px 0 28px;
+  color: var(--mall-muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+.success-state a {
+  text-decoration: none;
+}
+@media (max-width: 1240px) {
+  .auth-inner {
+    width: calc(100% - 40px);
+  }
+}
+@media (max-width: 640px) {
+  .auth-page {
+    padding: 20px;
+  }
+  .auth-inner {
+    width: 100%;
+  }
+  .auth-panel {
+    width: 100%;
+    padding: 30px 24px;
+  }
+}
+</style>
diff --git a/apps/mall/pages/goods/[id].vue b/apps/mall/pages/goods/[id].vue
new file mode 100644
index 0000000..82a25f7
--- /dev/null
+++ b/apps/mall/pages/goods/[id].vue
@@ -0,0 +1,701 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import type { Category, Sku } from "@vmall/shared";
+import {
+  MOCK_CATEGORIES,
+  lowestSku,
+  productDetail,
+  salesOf,
+} from "~/mock/data";
+import { useCartStore } from "~/stores/cart";
+
+type AttributeGroup = { key: string; values: string[] };
+
+const route = useRoute();
+const router = useRouter();
+const { locale, t } = useI18n();
+const { $api } = useNuxtApp();
+const cart = useCartStore();
+
+const routeId = computed(() => {
+  const value = route.params.id;
+  return Array.isArray(value) ? value[0] ?? "" : value ?? "";
+});
+const detail = computed(() => productDetail(routeId.value));
+const product = computed(() => detail.value?.product ?? null);
+const store = computed(() => detail.value?.store ?? null);
+const selectedAttributes = reactive<Record<string, string>>({});
+const quantity = ref(1);
+const galleryIndex = ref(0);
+const favorite = ref(false);
+const cartSuccess = ref(false);
+const activeTab = ref("detail");
+
+const attributeGroups = computed<AttributeGroup[]>(() => {
+  const valuesByKey = new Map<string, Set<string>>();
+  for (const sku of product.value?.skus ?? []) {
+    if (!sku.active) continue;
+    for (const [key, value] of Object.entries(sku.attributes)) {
+      const values = valuesByKey.get(key) ?? new Set<string>();
+      values.add(value);
+      valuesByKey.set(key, values);
+    }
+  }
+  return [...valuesByKey.entries()].map(([key, values]) => ({ key, values: [...values] }));
+});
+
+watch(
+  detail,
+  (current) => {
+    for (const key of Object.keys(selectedAttributes)) delete selectedAttributes[key];
+    const initial = current ? (current.product.skus?.find((sku) => sku.active) ?? lowestSku(current.product)) : null;
+    if (initial) Object.assign(selectedAttributes, initial.attributes);
+    quantity.value = 1;
+    galleryIndex.value = 0;
+    favorite.value = false;
+    cartSuccess.value = false;
+    activeTab.value = "detail";
+  },
+  { immediate: true },
+);
+
+const matchedSku = computed<Sku | null>(() => {
+  const skus = product.value?.skus ?? [];
+  const keys = attributeGroups.value.map((group) => group.key);
+  if (!keys.every((key) => selectedAttributes[key])) return null;
+  return skus.find(
+    (sku) => sku.active && keys.every((key) => sku.attributes[key] === selectedAttributes[key]),
+  ) ?? null;
+});
+
+
+const stock = computed(() => matchedSku.value?.stock ?? 0);
+const marketPrice = computed(() => {
+  const amount = matchedSku.value?.price_minor;
+  return amount === undefined ? 0 : Math.round((amount * 115) / 100);
+});
+const currentImage = computed(() => product.value?.images[galleryIndex.value] ?? product.value?.images[0] ?? "/mock/product-1.svg");
+
+const categoryById = (id: string): Category | undefined => MOCK_CATEGORIES.find((category) => category.id === id);
+const categoryPath = computed(() => {
+  const path: Category[] = [];
+  let current = product.value?.category_id ? categoryById(product.value.category_id) : undefined;
+  while (current) {
+    path.unshift(current);
+    current = current.parent_id ? categoryById(current.parent_id) : undefined;
+  }
+  return path;
+});
+
+const breadcrumbItems = computed(() => [
+  { label: t("product.home"), to: "/" },
+  ...categoryPath.value.map((category) => ({
+    label: pick(category.name, locale.value),
+    to: `/search?category=${category.id}`,
+  })),
+  { label: product.value ? pick(product.value.name, locale.value) : t("product.productNotFound") },
+]);
+
+const selectAttribute = (key: string, value: string): void => {
+  selectedAttributes[key] = value;
+  quantity.value = 1;
+  cartSuccess.value = false;
+};
+
+const addToCart = async (): Promise<boolean> => {
+  if (!matchedSku.value || stock.value <= 0) return false;
+  await $api.addCartItem(matchedSku.value.id, quantity.value);
+  await cart.refresh();
+  return true;
+};
+
+const buyNow = async (): Promise<void> => {
+  if (await addToCart()) await router.push("/checkout");
+};
+
+const addCart = async (): Promise<void> => {
+  if (await addToCart()) {
+    cartSuccess.value = true;
+    window.setTimeout(() => {
+      cartSuccess.value = false;
+    }, 1800);
+  }
+};
+
+const tabs = computed(() => [
+  { key: "detail", label: t("product.tabsDetail") },
+  { key: "reviews", label: t("product.tabsReviews") },
+  { key: "service", label: t("product.tabsAfterSale") },
+]);
+
+const rateRows = computed(() => {
+  const rate = store.value?.rate;
+  return [
+    { key: "overall", value: rate?.score ?? 0, label: t("product.overall") },
+    { key: "service", value: rate?.service ?? 0, label: t("product.service") },
+    { key: "delivery", value: rate?.speed ?? 0, label: t("product.delivery") },
+    { key: "agree", value: rate?.agree ?? 0, label: t("product.quality") },
+  ];
+});
+
+const detailImages = computed(() => product.value?.images ?? []);
+</script>
+
+<template>
+  <div class="product-page section-bg">
+    <UiBreadcrumb :items="breadcrumbItems" />
+    <main v-if="detail" class="w1200">
+      <section class="product-top mpanel">
+        <div class="gallery">
+          <div class="main-image">
+            <img class="zoom-image" :src="currentImage" :alt="pick(detail.product.name, locale)" />
+          </div>
+          <div class="thumbs" role="list">
+            <button
+              v-for="(image, index) in detail.product.images.slice(0, 3)"
+              :key="`${image}-${index}`"
+              type="button"
+              :class="{ active: galleryIndex === index }"
+              :aria-label="`${t('product.detail')} ${index + 1}`"
+              @click="galleryIndex = index"
+            >
+              <img :src="image" :alt="pick(detail.product.name, locale)" loading="lazy" />
+            </button>
+          </div>
+        </div>
+
+        <div class="summary">
+          <div class="summary-heading">
+            <div>
+              <h1>{{ pick(detail.product.name, locale) }}</h1>
+              <p class="subtitle">{{ pick(detail.product.description, locale) }}</p>
+            </div>
+            <button
+              type="button"
+              class="favorite"
+              :class="{ active: favorite }"
+              :aria-label="favorite ? t('product.unfavorite') : t('product.favorite')"
+              @click="favorite = !favorite"
+            >{{ favorite ? "♥" : "♡" }}</button>
+          </div>
+          <div class="price-panel">
+            <span class="price-label">{{ t("product.currentPrice") }}</span>
+            <strong v-if="matchedSku" class="price"><PriceText :amount-minor="matchedSku.price_minor" :currency="matchedSku.currency" /></strong>
+            <strong v-else class="price">{{ t("product.unavailable") }}</strong>
+            <span v-if="matchedSku" class="market-label">{{ t("product.marketPrice") }} <s><PriceText :amount-minor="marketPrice" :currency="matchedSku.currency" /></s></span>
+          </div>
+          <div class="summary-meta">
+            <span>{{ t("product.sold", { n: salesOf(detail.product) }) }}</span>
+            <span>{{ t("product.commentCount", { n: detail.commentStats.all }) }}</span>
+            <span :class="{ soldout: stock <= 0 }">{{ stock > 0 ? t("product.stock", { n: stock }) : t("product.noStock") }}</span>
+          </div>
+
+          <div class="coupon-row">
+            <span class="label">{{ t("product.coupons") }}</span>
+            <div class="coupon-list">
+              <span v-for="coupon in detail.coupons" :key="coupon.id" class="coupon">
+                {{ pick(coupon.title, locale) }}
+                <small>{{ t("product.expires", { date: coupon.expiresAt }) }}</small>
+              </span>
+            </div>
+          </div>
+
+          <div v-for="group in attributeGroups" :key="group.key" class="attribute-row">
+            <span class="label">{{ group.key }}</span>
+            <div class="attribute-values">
+              <button
+                v-for="value in group.values"
+                :key="value"
+                type="button"
+                :class="{ active: selectedAttributes[group.key] === value }"
+                @click="selectAttribute(group.key, value)"
+              >{{ value }}</button>
+            </div>
+          </div>
+
+          <div class="quantity-row">
+            <span class="label">{{ t("product.quantity") }}</span>
+            <UiQtyStepper v-model="quantity" :max="Math.max(1, stock)" />
+          </div>
+          <div class="actions">
+            <button type="button" class="primary-action" :disabled="!matchedSku || stock <= 0" @click="buyNow">{{ t("product.buyNow") }}</button>
+            <button type="button" class="cart-action" :disabled="!matchedSku || stock <= 0" @click="addCart">{{ cartSuccess ? t("product.addedCart") : t("product.addCart") }}</button>
+          </div>
+          <p v-if="matchedSku && stock <= 0" class="stock-warning">{{ t("product.noStock") }}</p>
+          <p v-else-if="!matchedSku" class="stock-warning">{{ t("product.unavailable") }}</p>
+        </div>
+      </section>
+
+      <section class="below-grid">
+        <aside class="left-rail">
+          <div class="store-card mpanel">
+            <h2>{{ t("product.store") }}</h2>
+            <div class="store-heading">
+              <img :src="detail.store.logo" :alt="pick(detail.store.name, locale)" />
+              <strong>{{ pick(detail.store.name, locale) }}</strong>
+            </div>
+            <dl>
+              <div><dt>{{ t("product.company") }}</dt><dd>{{ detail.store.company }}</dd></div>
+              <div><dt>{{ t("product.region") }}</dt><dd>{{ detail.store.region }}</dd></div>
+            </dl>
+            <h3>{{ t("product.rates") }}</h3>
+            <div v-for="row in rateRows" :key="row.key" class="rate-row">
+              <span>{{ row.label }}</span><UiRatingStars :value="row.value" :size="13" />
+            </div>
+            <div class="store-actions">
+              <NuxtLink class="store-button" :to="`/stores/${detail.store.slug}`">{{ t("product.enterStore") }}</NuxtLink>
+              <button type="button" class="store-button" disabled>{{ t("product.contact") }}</button>
+            </div>
+          </div>
+          <div class="sales-rank mpanel">
+            <h2>{{ t("product.salesRank") }}</h2>
+            <NuxtLink v-for="item in detail.salesRank" :key="item.id" :to="`/goods/${item.slug}`" class="rank-item">
+              <img :src="item.images[0]" :alt="pick(item.name, locale)" loading="lazy" />
+              <span class="rank-name">{{ pick(item.name, locale) }}</span>
+              <span v-if="lowestSku(item)" class="rank-price"><PriceText :amount-minor="lowestSku(item)!.price_minor" :currency="lowestSku(item)!.currency" /></span>
+            </NuxtLink>
+          </div>
+        </aside>
+
+        <section class="detail-panel mpanel">
+          <UiTabs v-model="activeTab" :tabs="tabs">
+            <template #default="{ active }">
+              <div v-if="active === 'detail'" class="detail-content">
+                <h2>{{ t("product.description") }}</h2>
+                <p>{{ pick(detail.product.description, locale) }}</p>
+                <img v-for="(image, index) in detailImages" :key="`${image}-detail-${index}`" :src="image" :alt="t('product.detail')" loading="lazy" />
+              </div>
+              <div v-else-if="active === 'reviews'" class="reviews-content">
+                <div class="review-summary">
+                  <strong>{{ t("product.reviewSummary", { rate: detail.commentStats.goodRate, n: detail.commentStats.all }) }}</strong>
+                  <span>{{ t("product.reviewAll") }}</span>
+                </div>
+                <article v-for="comment in detail.comments" :key="comment.id" class="review">
+                  <img :src="comment.avatar" :alt="comment.author" loading="lazy" />
+                  <div class="review-body">
+                    <header><strong>{{ comment.author }}</strong><UiRatingStars :value="comment.rating" :size="13" /><time>{{ comment.createdAt }}</time></header>
+                    <p>{{ pick(comment.content, locale) }}</p>
+                    <div v-if="comment.reply" class="reply"><strong>{{ t("product.reply") }}:</strong> {{ pick(comment.reply, locale) }}</div>
+                  </div>
+                </article>
+              </div>
+              <div v-else class="service-content">
+                <h2>{{ t("product.tabsAfterSale") }}</h2>
+                <p>{{ pick(detail.store.afterSale, locale) }}</p>
+              </div>
+            </template>
+          </UiTabs>
+        </section>
+      </section>
+    </main>
+    <UiEmptyState v-else :text="t('product.productNotFound')" />
+  </div>
+</template>
+
+
+<style scoped>
+.product-page {
+  min-height: 700px;
+  padding-bottom: 60px;
+}
+.product-top {
+  display: grid;
+  grid-template-columns: 450px 1fr;
+  gap: 32px;
+  min-height: 500px;
+  background: #fff;
+  border: 1px solid var(--mall-line);
+  padding: 24px;
+}
+.gallery {
+  width: 400px;
+}
+.main-image {
+  display: flex;
+  width: 400px;
+  height: 400px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid var(--mall-line);
+}
+.zoom-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: transform 220ms ease;
+}
+.main-image:hover .zoom-image {
+  transform: scale(1.07);
+}
+.thumbs {
+  display: flex;
+  gap: 12px;
+  margin-top: 14px;
+}
+.thumbs button {
+  width: 74px;
+  height: 74px;
+  padding: 4px;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+  cursor: pointer;
+}
+.thumbs button.active {
+  border-color: var(--mall-red);
+}
+.thumbs img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.summary {
+  min-width: 0;
+}
+.summary-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+h1 {
+  margin: 0;
+  color: var(--mall-ink);
+  font-size: 22px;
+  line-height: 1.35;
+}
+.subtitle {
+  margin: 8px 0 18px;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.favorite {
+  align-self: flex-start;
+  border: 0;
+  background: transparent;
+  color: var(--mall-faint);
+  cursor: pointer;
+  font-size: 28px;
+  line-height: 1;
+}
+.favorite.active {
+  color: var(--mall-red);
+}
+.price-panel {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 12px;
+  background: #fff5f5;
+  padding: 16px;
+}
+.price-label,
+.market-label,
+.label {
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.price {
+  color: var(--mall-red);
+  font-size: 28px;
+}
+.market-label s {
+  color: var(--mall-faint);
+}
+.summary-meta {
+  display: flex;
+  gap: 28px;
+  border-bottom: 1px solid var(--mall-line);
+  color: var(--mall-muted);
+  font-size: 12px;
+  padding: 13px 0;
+}
+.summary-meta .soldout,
+.stock-warning {
+  color: var(--mall-red);
+}
+.coupon-row,
+.attribute-row,
+.quantity-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
+  border-bottom: 1px solid var(--mall-line);
+  padding: 15px 0;
+}
+.coupon-row > .label,
+.attribute-row > .label,
+.quantity-row > .label {
+  width: 58px;
+  flex: 0 0 58px;
+  line-height: 30px;
+}
+.coupon-list,
+.attribute-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.coupon {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 3px;
+  border: 1px solid var(--mall-red);
+  color: var(--mall-red);
+  font-size: 12px;
+  padding: 5px 8px;
+}
+.coupon small {
+  color: var(--mall-muted);
+  font-size: 10px;
+}
+.attribute-values button {
+  min-width: 66px;
+  border: 1px solid var(--mall-line-dark);
+  background: #fff;
+  color: var(--mall-ink);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 6px 12px;
+}
+.attribute-values button.active {
+  border-color: var(--mall-red);
+  color: var(--mall-red);
+}
+.actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 22px;
+}
+.primary-action,
+.cart-action {
+  min-width: 136px;
+  border: 1px solid var(--mall-red);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 11px 22px;
+}
+.primary-action {
+  background: #fff0f0;
+  color: var(--mall-red);
+}
+.cart-action {
+  background: var(--mall-red);
+  color: #fff;
+}
+.primary-action:disabled,
+.cart-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.stock-warning {
+  margin: 10px 0 0;
+  font-size: 12px;
+}
+.below-grid {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 20px;
+  margin-top: 20px;
+}
+.left-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.store-card,
+.sales-rank,
+.detail-panel {
+  background: #fff;
+  border: 1px solid var(--mall-line);
+  padding: 18px;
+}
+.store-card h2,
+.sales-rank h2,
+.detail-content h2,
+.service-content h2 {
+  border-left: 3px solid var(--mall-red);
+  color: var(--mall-ink);
+  font-size: 16px;
+  margin: 0 0 16px;
+  padding-left: 8px;
+}
+.store-heading {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 13px;
+}
+.store-heading img {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
+}
+dl {
+  margin: 14px 0;
+}
+dl div {
+  display: flex;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+dt {
+  color: var(--mall-muted);
+  flex: 0 0 42px;
+}
+dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.store-card h3 {
+  color: var(--mall-muted);
+  font-size: 12px;
+  font-weight: 400;
+  margin: 12px 0 8px;
+}
+.rate-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--mall-muted);
+  font-size: 12px;
+  line-height: 25px;
+}
+.store-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 14px;
+}
+.store-button {
+  flex: 1;
+  border: 1px solid var(--mall-line-dark);
+  background: #fff;
+  color: var(--mall-ink);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 7px 4px;
+  text-align: center;
+  text-decoration: none;
+}
+.store-button:first-child {
+  border-color: var(--mall-red);
+  color: var(--mall-red);
+}
+.store-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.rank-item {
+  display: grid;
+  grid-template-columns: 52px 1fr;
+  gap: 5px 8px;
+  border-bottom: 1px solid var(--mall-line);
+  color: inherit;
+  padding: 10px 0;
+  text-decoration: none;
+}
+.rank-item:last-child {
+  border-bottom: 0;
+}
+.rank-item img {
+  grid-row: 1 / span 2;
+  width: 52px;
+  height: 52px;
+  object-fit: contain;
+}
+.rank-name {
+  align-self: end;
+  font-size: 11px;
+  line-height: 1.35;
+  max-height: 30px;
+  overflow: hidden;
+}
+.rank-price {
+  align-self: start;
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.detail-panel {
+  min-height: 550px;
+}
+.detail-content p,
+.service-content p {
+  color: var(--mall-muted);
+  font-size: 13px;
+  line-height: 1.8;
+  margin: 0 0 18px;
+}
+.detail-content > img {
+  display: block;
+  width: 100%;
+  max-height: 500px;
+  margin: 0 auto 14px;
+  object-fit: contain;
+}
+.review-summary {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--mall-line);
+  color: var(--mall-red);
+  font-size: 13px;
+  padding: 0 0 15px;
+}
+.review-summary span {
+  color: var(--mall-muted);
+}
+.review {
+  display: flex;
+  gap: 12px;
+  border-bottom: 1px solid var(--mall-line);
+  padding: 18px 0;
+}
+.review > img {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+}
+.review-body {
+  min-width: 0;
+  flex: 1;
+}
+.review-body header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.review-body header strong {
+  color: var(--mall-ink);
+}
+.review-body time {
+  margin-left: auto;
+}
+.review-body p {
+  color: var(--mall-ink);
+  font-size: 13px;
+  line-height: 1.6;
+  margin: 9px 0;
+}
+.reply {
+  background: #fafafa;
+  color: var(--mall-muted);
+  font-size: 12px;
+  padding: 8px 10px;
+}
+.reply strong {
+  color: var(--mall-red);
+}
+@media (max-width: 900px) {
+  .product-top,
+  .below-grid {
+    grid-template-columns: 1fr;
+  }
+  .gallery,
+  .main-image {
+    width: 100%;
+    max-width: 400px;
+  }
+}
+</style>
diff --git a/apps/mall/pages/index.vue b/apps/mall/pages/index.vue
index 0f9f518..dabb7f7 100644
--- a/apps/mall/pages/index.vue
+++ b/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>
diff --git a/apps/mall/pages/integral.vue b/apps/mall/pages/integral.vue
new file mode 100644
index 0000000..93d901d
--- /dev/null
+++ b/apps/mall/pages/integral.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import { INTEGRAL_PRODUCTS, USER_STATS } from "~/mock/data";
+
+const { locale, t } = useI18n();
+const session = useSessionStore();
+const redeemed = ref<Set<string>>(new Set());
+
+const breadcrumb = computed(() => [
+  { label: t("stores.breadcrumbHome"), to: "/" },
+  { label: t("marketing.integralBreadcrumb") },
+]);
+
+function redeem(id: string): void {
+  redeemed.value = new Set(redeemed.value).add(id);
+}
+
+function isRedeemed(id: string): boolean {
+  return redeemed.value.has(id);
+}
+
+onMounted(() => session.hydrate());
+</script>
+
+<template>
+  <div class="integral-page">
+    <UiBreadcrumb :items="breadcrumb" />
+    <section class="w1200 marketing-section">
+      <img class="marketing-banner" src="/mock/integral-banner.svg" :alt="t('marketing.integralBannerAlt')" />
+
+      <div class="benefits-row">
+        <section class="points-account">
+          <template v-if="session.isLoggedIn">
+            <img src="/mock/avatar.svg" :alt="session.user?.display_name ?? t('marketing.pointsBalance')" />
+            <div>
+              <p class="account-name">{{ session.user?.display_name }}</p>
+              <p class="points-label">{{ t("marketing.pointsBalance") }}</p>
+              <strong class="account-points">{{ USER_STATS.points }}</strong>
+            </div>
+          </template>
+          <template v-else>
+            <div class="login-copy">
+              <h2>{{ t("marketing.pointsBalance") }}</h2>
+              <p>{{ t("marketing.loginPrompt") }}</p>
+            </div>
+            <div class="account-actions">
+              <NuxtLink to="/login" class="mbtn red">{{ t("marketing.login") }}</NuxtLink>
+              <NuxtLink to="/register" class="mbtn">{{ t("marketing.register") }}</NuxtLink>
+            </div>
+          </template>
+        </section>
+        <div class="value-card">
+          <span class="value-mark">01</span>
+          <strong>{{ t("marketing.customize") }}</strong>
+        </div>
+        <div class="value-card">
+          <span class="value-mark">02</span>
+          <strong>{{ t("marketing.shipping") }}</strong>
+        </div>
+        <div class="value-card">
+          <span class="value-mark">03</span>
+          <strong>{{ t("marketing.support") }}</strong>
+        </div>
+      </div>
+
+      <header class="section-heading">
+        <h1>{{ t("marketing.recommendation") }}</h1>
+      </header>
+      <div v-if="INTEGRAL_PRODUCTS.length" class="integral-grid">
+        <article v-for="item in INTEGRAL_PRODUCTS" :key="item.id" class="integral-card hover-lift">
+          <div class="product-image">
+            <img :src="item.image" :alt="pick(item.name, locale)" loading="lazy" />
+          </div>
+          <div class="product-body">
+            <h2>{{ pick(item.name, locale) }}</h2>
+            <div class="points-line">
+              <strong>{{ t("marketing.points", { n: item.points }) }}</strong>
+              <s><PriceText :amount-minor="item.marketPriceMinor" :currency="item.currency" /></s>
+            </div>
+            <p class="stock-line">{{ t("marketing.stock", { n: item.stock }) }}</p>
+            <button type="button" class="mbtn red redeem-button" :disabled="isRedeemed(item.id)" @click="redeem(item.id)">
+              {{ isRedeemed(item.id) ? t("marketing.redeemed") : t("marketing.redeem") }}
+            </button>
+            <p v-if="isRedeemed(item.id)" class="mock-note" aria-live="polite">{{ t("marketing.mockNotice") }}</p>
+          </div>
+        </article>
+      </div>
+      <UiEmptyState v-else :text="t('marketing.noIntegralProducts')" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.integral-page {
+  padding-bottom: 60px;
+}
+.marketing-section {
+  background: #fff;
+}
+.marketing-banner {
+  display: block;
+  width: 100%;
+  height: 350px;
+  object-fit: cover;
+}
+.benefits-row {
+  display: grid;
+  grid-template-columns: 1.4fr repeat(3, 1fr);
+  gap: 12px;
+  margin: 20px 0;
+}
+.points-account,
+.value-card {
+  min-height: 106px;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+}
+.points-account {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 14px 18px;
+}
+.points-account > img {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.account-name,
+.points-label,
+.login-copy h2,
+.login-copy p {
+  margin: 0;
+}
+.account-name {
+  font-size: 14px;
+  font-weight: 700;
+}
+.points-label {
+  margin-top: 7px;
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.account-points {
+  display: block;
+  margin-top: 2px;
+  color: var(--mall-red);
+  font-size: 20px;
+}
+.login-copy {
+  min-width: 0;
+  flex: 1;
+}
+.login-copy h2 {
+  font-size: 16px;
+  font-weight: 500;
+}
+.login-copy p {
+  margin-top: 7px;
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.account-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.account-actions .mbtn {
+  min-width: 74px;
+  padding: 4px 8px;
+  text-align: center;
+}
+.value-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 13px;
+}
+.value-mark {
+  color: var(--mall-red);
+  font-size: 18px;
+  font-weight: 700;
+}
+.value-card strong {
+  font-size: 13px;
+  font-weight: 500;
+}
+.section-heading {
+  border: 1px solid var(--mall-line);
+  background: #fafafa;
+  padding: 14px 18px;
+}
+.section-heading h1 {
+  margin: 0;
+  border-left: 3px solid var(--mall-red);
+  padding-left: 10px;
+  font-size: 17px;
+  font-weight: 500;
+}
+.integral-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+.integral-card {
+  min-width: 0;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+}
+.product-image {
+  display: flex;
+  height: 205px;
+  align-items: center;
+  justify-content: center;
+  padding: 14px;
+}
+.product-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.product-body {
+  padding: 0 14px 14px;
+}
+.product-body h2 {
+  height: 37px;
+  overflow: hidden;
+  margin: 0;
+  color: var(--mall-ink);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.points-line {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 10px;
+}
+.points-line strong {
+  color: var(--mall-red);
+  font-size: 17px;
+}
+.points-line s {
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.stock-line {
+  margin: 8px 0 11px;
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.redeem-button {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+.mock-note {
+  margin: 8px 0 0;
+  color: var(--mall-green);
+  font-size: 12px;
+  text-align: center;
+}
+@media (max-width: 1240px) {
+  .w1200 {
+    width: calc(100% - 32px);
+  }
+}
+@media (max-width: 900px) {
+  .benefits-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .points-account {
+    grid-column: span 2;
+  }
+  .integral-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 640px) {
+  .marketing-banner {
+    height: 220px;
+  }
+  .benefits-row {
+    grid-template-columns: 1fr;
+  }
+  .points-account {
+    grid-column: auto;
+  }
+  .integral-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 420px) {
+  .integral-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/mall/pages/invoices.vue b/apps/mall/pages/invoices.vue
deleted file mode 100644
index 1f2ec69..0000000
--- a/apps/mall/pages/invoices.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import type { Invoice } from "@vmall/shared";
-
-const { $api } = useNuxtApp();
-const { locale } = useI18n();
-const { formatAmount } = usePrice();
-const invoices = ref<Invoice[]>([]);
-const amounts = ref<Record<string, string>>({});
-const loading = ref(true);
-const error = ref("");
-
-function errorMessage(value: unknown): string {
-  return value instanceof Error ? value.message : $t("mall.loadFailed");
-}
-
-async function loadInvoices(): Promise<void> {
-  loading.value = true;
-  error.value = "";
-  try {
-    invoices.value = await $api.listMyInvoices();
-    const entries = await Promise.all(invoices.value.map(async (invoice) => [invoice.id, await formatAmount(invoice.amount_minor, invoice.currency)] as const));
-    amounts.value = Object.fromEntries(entries);
-  } catch (value) {
-    error.value = errorMessage(value);
-    invoices.value = [];
-  } finally {
-    loading.value = false;
-  }
-}
-
-watch(locale, () => {
-  if (invoices.value.length > 0) void loadInvoices();
-});
-onMounted(() => void loadInvoices());
-
-definePageMeta({ middleware: "auth" });
-</script>
-
-<template>
-  <section>
-    <h1 class="page-title">{{ $t("invoice.title") }}</h1>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <div v-if="!loading && invoices.length === 0" class="card empty-state">{{ $t("common.empty") }}</div>
-    <table v-if="invoices.length > 0" class="table">
-      <thead><tr><th>{{ $t("invoice.invoiceNo") }}</th><th>{{ $t("order.orderNo") }}</th><th>{{ $t("invoice.invoiceTitle") }}</th><th>{{ $t("invoice.kind") }}</th><th>{{ $t("invoice.amount") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("invoice.status.issued") }}</th></tr></thead>
-      <tbody>
-        <tr v-for="item in invoices" :key="item.id">
-          <td>{{ item.invoice_no || $t("mall.notAvailable") }}</td>
-          <td>{{ item.order_no || $t("mall.notAvailable") }}</td>
-          <td>{{ item.title }}</td>
-          <td>{{ $t(`invoice.${item.kind}`) }}</td>
-          <td>{{ amounts[item.id] || $t("common.loading") }}</td>
-          <td><StatusBadge :status="item.status" kind="invoice" /></td>
-          <td>{{ item.issued_at ? new Date(item.issued_at).toLocaleString(locale === "zh" ? "zh-CN" : "en-US") : $t("mall.notAvailable") }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
-</template>
-
-<style scoped>
-.empty-state { text-align: center; }
-@media (max-width: 760px) { .table { display: block; overflow-x: auto; white-space: nowrap; } }
-</style>
diff --git a/apps/mall/pages/login.vue b/apps/mall/pages/login.vue
index 57c3831..715611c 100644
--- a/apps/mall/pages/login.vue
+++ b/apps/mall/pages/login.vue
@@ -1,24 +1,40 @@
 <script setup lang="ts">
+const { t } = useI18n();
 const { $api } = useNuxtApp();
 const session = useSessionStore();
+const router = useRouter();
+
 const email = ref("");
 const password = ref("");
-const error = ref("");
+const errorKey = ref("");
 const submitting = ref(false);
 
+function validate(): boolean {
+  if (!email.value || !password.value) {
+    errorKey.value = "auth.validationRequired";
+    return false;
+  }
+  if (!/^\S+@\S+\.\S+$/.test(email.value)) {
+    errorKey.value = "auth.validationEmail";
+    return false;
+  }
+  if (password.value.length < 6) {
+    errorKey.value = "auth.validationPassword";
+    return false;
+  }
+  return true;
+}
+
 async function submit(): Promise<void> {
+  errorKey.value = "";
+  if (!validate()) return;
   submitting.value = true;
-  error.value = "";
   try {
-    const auth = await $api.login(email.value.trim(), password.value);
-    if (auth.user.role !== "customer") {
-      error.value = $t("auth.wrongRole");
-      return;
-    }
+    const auth = await $api.login(email.value, password.value);
     session.setAuth(auth);
-    await navigateTo("/");
-  } catch (value) {
-    error.value = value instanceof Error ? value.message : $t("auth.badCredentials");
+    await router.push("/");
+  } catch {
+    errorKey.value = "auth.requestFailed";
   } finally {
     submitting.value = false;
   }
@@ -26,14 +42,129 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="form-narrow card">
-    <h1 class="page-title">{{ $t("auth.welcome") }}</h1>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <form @submit.prevent="submit">
-      <div class="field"><label for="login-email">{{ $t("common.email") }}</label><input id="login-email" v-model="email" type="email" autocomplete="email" required></div>
-      <div class="field"><label for="login-password">{{ $t("common.password") }}</label><input id="login-password" v-model="password" type="password" autocomplete="current-password" required></div>
-      <button class="btn primary" type="submit" :disabled="submitting">{{ submitting ? $t("common.loading") : $t("common.login") }}</button>
-    </form>
-    <p class="muted mt">{{ $t("auth.noAccount") }} <NuxtLink to="/register">{{ $t("common.register") }}</NuxtLink></p>
+  <section class="auth-page">
+    <div class="auth-inner">
+      <div class="auth-panel">
+        <div class="auth-tabs">
+          <h1>{{ t("auth.loginTab") }}</h1>
+          <NuxtLink to="/register">{{ t("auth.registerTab") }}</NuxtLink>
+        </div>
+        <form @submit.prevent="submit">
+          <label class="field">
+            <span>{{ t("common.email") }}</span>
+            <input v-model.trim="email" class="minput" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
+          </label>
+          <label class="field">
+            <span>{{ t("common.password") }}</span>
+            <input v-model="password" class="minput" type="password" autocomplete="current-password" :placeholder="t('auth.passwordPlaceholder')" />
+          </label>
+          <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
+          <button class="mbtn red block submit" type="submit" :disabled="submitting">
+            {{ t("auth.loginAction") }}
+          </button>
+        </form>
+        <div class="auth-links">
+          <span>{{ t("auth.noAccount") }}</span>
+          <NuxtLink to="/register">{{ t("auth.registerNow") }}</NuxtLink>
+          <NuxtLink to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
+
+<style scoped>
+.auth-page {
+  min-height: 620px;
+  background: #f6f6f6 url("/mock/login-bg.svg") center top / cover no-repeat;
+  padding: 50px 0;
+  box-sizing: border-box;
+}
+.auth-inner {
+  width: 1200px;
+  min-height: 450px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.auth-panel {
+  width: 400px;
+  min-height: 450px;
+  box-sizing: border-box;
+  padding: 40px;
+  background: #fff;
+  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
+}
+.auth-tabs {
+  display: flex;
+  align-items: baseline;
+  gap: 18px;
+  margin-bottom: 28px;
+  border-bottom: 1px solid var(--mall-line);
+  padding-bottom: 14px;
+}
+h1 {
+  margin: 0;
+  color: var(--mall-ink);
+  font-size: 20px;
+  font-weight: 600;
+}
+.auth-tabs a {
+  color: var(--mall-faint);
+  font-size: 14px;
+  text-decoration: none;
+}
+.auth-tabs a:hover,
+.auth-links a:hover {
+  color: var(--mall-red);
+}
+.field {
+  display: block;
+  margin-bottom: 18px;
+}
+.field span {
+  display: block;
+  margin-bottom: 7px;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.submit {
+  margin-top: 4px;
+}
+.error {
+  margin: -4px 0 12px;
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.auth-links {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 18px;
+  color: var(--mall-faint);
+  font-size: 12px;
+  flex-wrap: wrap;
+}
+.auth-links a {
+  color: var(--mall-red);
+  text-decoration: none;
+}
+@media (max-width: 1240px) {
+  .auth-inner {
+    width: calc(100% - 40px);
+  }
+}
+@media (max-width: 640px) {
+  .auth-page {
+    padding: 20px;
+  }
+  .auth-inner {
+    width: 100%;
+  }
+  .auth-panel {
+    width: 100%;
+    padding: 30px 24px;
+  }
+}
+</style>
diff --git a/apps/mall/pages/orders/[id].vue b/apps/mall/pages/orders/[id].vue
deleted file mode 100644
index 8292316..0000000
--- a/apps/mall/pages/orders/[id].vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import type { Invoice, InvoiceKind, Order, Shipment } from "@vmall/shared";
-import { t as localized } from "@vmall/shared";
-
-const route = useRoute();
-const { locale } = useI18n();
-const { $api } = useNuxtApp();
-const { formatAmount } = usePrice();
-
-const order = ref<Order | null>(null);
-const shipments = ref<Shipment[]>([]);
-const invoice = ref<Invoice | null>(null);
-const totalDisplay = ref("");
-const loading = ref(true);
-const error = ref("");
-const action = ref("");
-const invoiceKind = ref<InvoiceKind>("personal");
-const invoiceTitle = ref("");
-const taxNo = ref("");
-const invoiceSubmitting = ref(false);
-
-function errorMessage(value: unknown): string {
-  return value instanceof Error ? value.message : $t("mall.loadFailed");
-}
-
-async function loadOrder(): Promise<void> {
-  loading.value = true;
-  error.value = "";
-  try {
-    const orderId = String(route.params.id);
-    const [loadedOrder, loadedShipments, loadedInvoices] = await Promise.all([
-      $api.getOrder(orderId),
-      $api.listMyShipments(),
-      $api.listMyInvoices(),
-    ]);
-    order.value = loadedOrder;
-    shipments.value = loadedShipments.filter((shipment) => shipment.order_id === loadedOrder.id);
-    invoice.value = loadedInvoices.find((item) => item.order_id === loadedOrder.id) ?? null;
-    totalDisplay.value = await formatAmount(loadedOrder.total_minor, loadedOrder.currency);
-  } catch (value) {
-    error.value = errorMessage(value);
-    order.value = null;
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function runAction(name: "pay" | "cancel"): Promise<void> {
-  if (!order.value) return;
-  action.value = name;
-  error.value = "";
-  try {
-    if (name === "pay") await $api.payOrder(order.value.id);
-    else await $api.cancelOrder(order.value.id);
-    await loadOrder();
-  } catch (value) {
-    error.value = errorMessage(value);
-  } finally {
-    action.value = "";
-  }
-}
-
-async function confirmDelivery(shipment: Shipment): Promise<void> {
-  action.value = shipment.id;
-  error.value = "";
-  try {
-    await $api.confirmDelivered(shipment.id);
-    await loadOrder();
-  } catch (value) {
-    error.value = errorMessage(value);
-  } finally {
-    action.value = "";
-  }
-}
-
-async function requestInvoice(): Promise<void> {
-  if (!order.value || !invoiceTitle.value.trim()) {
-    error.value = $t("common.required");
-    return;
-  }
-  if (invoiceKind.value === "company" && !taxNo.value.trim()) {
-    error.value = $t("mall.companyTaxRequired");
-    return;
-  }
-  invoiceSubmitting.value = true;
-  error.value = "";
-  try {
-    await $api.requestInvoice(order.value.id, invoiceTitle.value.trim(), invoiceKind.value === "company" ? taxNo.value.trim() : null, invoiceKind.value);
-    await loadOrder();
-  } catch (value) {
-    error.value = errorMessage(value);
-  } finally {
-    invoiceSubmitting.value = false;
-  }
-}
-
-watch(locale, () => {
-  if (order.value) void loadOrder();
-});
-onMounted(() => void loadOrder());
-
-definePageMeta({ middleware: "auth" });
-</script>
-
-<template>
-  <section>
-    <NuxtLink to="/orders" class="muted">← {{ $t("common.back") }}</NuxtLink>
-    <p v-if="loading" class="muted mt">{{ $t("common.loading") }}</p>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <template v-if="order">
-      <div class="page-head mt">
-        <h1 class="page-title">{{ order.order_no }}</h1>
-        <StatusBadge :status="order.status" kind="order" />
-      </div>
-      <div class="card order-summary">
-        <div><span class="muted">{{ $t("mall.created") }}</span><strong>{{ new Date(order.created_at).toLocaleString(locale === "zh" ? "zh-CN" : "en-US") }}</strong></div>
-        <div><span class="muted">{{ $t("common.total") }}</span><strong class="total">{{ totalDisplay }}</strong></div>
-        <div v-if="order.status === 'pending_payment'" class="row">
-          <button class="btn primary" :disabled="action !== ''" @click="runAction('pay')">{{ action === "pay" ? $t("common.loading") : $t("order.pay") }}</button>
-          <button class="btn danger" :disabled="action !== ''" @click="runAction('cancel')">{{ action === "cancel" ? $t("common.loading") : $t("order.cancelOrder") }}</button>
-        </div>
-      </div>
-
-      <div class="card mt">
-        <h2>{{ $t("mall.cartItems") }}</h2>
-        <table class="table">
-          <thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("common.price") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("mall.lineTotal") }}</th></tr></thead>
-          <tbody>
-            <tr v-for="item in order.items" :key="item.id">
-              <td><div>{{ localized(item.product_name, locale) }}</div><span class="muted">{{ item.sku_code }}</span></td>
-              <td><PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" /></td>
-              <td>{{ item.qty }}</td>
-              <td><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" /></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="card mt">
-        <h2>{{ $t("order.shippingAddress") }}</h2>
-        <div class="address-grid">
-          <div><span class="muted">{{ $t("order.recipient") }}</span>{{ order.shipping_address.recipient }}</div>
-          <div><span class="muted">{{ $t("order.phone") }}</span>{{ order.shipping_address.phone }}</div>
-          <div><span class="muted">{{ $t("order.country") }}</span>{{ order.shipping_address.country }}</div>
-          <div><span class="muted">{{ $t("order.region") }}</span>{{ order.shipping_address.region || $t("mall.notAvailable") }}</div>
-          <div><span class="muted">{{ $t("order.city") }}</span>{{ order.shipping_address.city }}</div>
-          <div><span class="muted">{{ $t("order.postalCode") }}</span>{{ order.shipping_address.postal_code }}</div>
-          <div class="wide"><span class="muted">{{ $t("order.line1") }}</span>{{ order.shipping_address.line1 }}</div>
-        </div>
-      </div>
-
-      <div class="card mt">
-        <h2>{{ $t("mall.shipments") }}</h2>
-        <div v-if="shipments.length === 0" class="muted">{{ $t("common.empty") }}</div>
-        <table v-else class="table">
-          <thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shipment.carrier") }}</th><th>{{ $t("shipment.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
-          <tbody>
-            <tr v-for="shipment in shipments" :key="shipment.id">
-              <td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td><td><StatusBadge :status="shipment.status" kind="shipment" /></td>
-              <td><button v-if="shipment.status === 'shipped'" class="btn sm" :disabled="action !== ''" @click="confirmDelivery(shipment)">{{ $t("order.confirmDelivery") }}</button><span v-else class="muted">{{ $t("mall.notAvailable") }}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="card mt">
-        <h2>{{ $t("mall.invoices") }}</h2>
-        <div v-if="invoice" class="invoice-existing row between">
-          <div><strong>{{ invoice.invoice_no || $t("mall.notAvailable") }}</strong><span class="muted">{{ invoice.title }} · {{ $t(`invoice.${invoice.kind}`) }}</span></div>
-          <StatusBadge :status="invoice.status" kind="invoice" />
-        </div>
-        <div v-else>
-          <p class="muted">{{ $t("mall.noInvoice") }}</p>
-          <form class="invoice-form" @submit.prevent="requestInvoice">
-            <div class="field"><label for="invoice-kind">{{ $t("invoice.kind") }}</label><select id="invoice-kind" v-model="invoiceKind"><option value="personal">{{ $t("invoice.personal") }}</option><option value="company">{{ $t("invoice.company") }}</option></select></div>
-            <div class="field"><label for="invoice-title">{{ $t("invoice.invoiceTitle") }}</label><input id="invoice-title" v-model="invoiceTitle" required></div>
-            <div v-if="invoiceKind === 'company'" class="field"><label for="tax-no">{{ $t("invoice.taxNo") }}</label><input id="tax-no" v-model="taxNo"></div>
-            <button class="btn primary" type="submit" :disabled="invoiceSubmitting">{{ invoiceSubmitting ? $t("common.loading") : $t("order.requestInvoice") }}</button>
-          </form>
-        </div>
-      </div>
-    </template>
-  </section>
-</template>
-
-<style scoped>
-.order-summary { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
-.order-summary > div:not(.row) { display: grid; gap: 3px; }
-.total { color: var(--primary); font-size: 18px; }
-.card h2 { font-size: 17px; margin: 0 0 14px; }
-.address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
-.address-grid > div { display: grid; gap: 2px; }
-.address-grid .wide { grid-column: 1 / -1; }
-.invoice-existing > div { display: grid; gap: 3px; }
-.invoice-form { max-width: 420px; }
-@media (max-width: 640px) { .address-grid { grid-template-columns: 1fr; } .address-grid .wide { grid-column: auto; } .table { display: block; overflow-x: auto; white-space: nowrap; } }
-</style>
diff --git a/apps/mall/pages/orders/index.vue b/apps/mall/pages/orders/index.vue
deleted file mode 100644
index 7175d38..0000000
--- a/apps/mall/pages/orders/index.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import type { Order, Paged } from "@vmall/shared";
-
-const { $api } = useNuxtApp();
-const { locale } = useI18n();
-const { formatAmount } = usePrice();
-const page = ref(1);
-const result = ref<Paged<Order> | null>(null);
-const totals = ref<Record<string, string>>({});
-const loading = ref(true);
-const error = ref("");
-
-function errorMessage(value: unknown): string {
-  return value instanceof Error ? value.message : $t("mall.loadFailed");
-}
-
-async function loadOrders(): Promise<void> {
-  loading.value = true;
-  error.value = "";
-  try {
-    result.value = await $api.listMyOrders(page.value);
-    const entries = await Promise.all(result.value.items.map(async (order) => [order.id, await formatAmount(order.total_minor, order.currency)] as const));
-    totals.value = Object.fromEntries(entries);
-  } catch (value) {
-    error.value = errorMessage(value);
-    result.value = null;
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function changePage(next: number): Promise<void> {
-  if (next < 1 || next > totalPages.value) return;
-  page.value = next;
-  await loadOrders();
-}
-
-const totalPages = computed(() => Math.max(1, Math.ceil((result.value?.total ?? 0) / (result.value?.per_page ?? 20))));
-
-watch(locale, () => {
-  if (result.value) void loadOrders();
-});
-onMounted(() => void loadOrders());
-
-</script>
-
-<template>
-  <section>
-    <h1 class="page-title">{{ $t("order.title") }}</h1>
-    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <div v-if="!loading && result && result.items.length === 0" class="card empty-state">{{ $t("common.empty") }}</div>
-    <table v-if="result && result.items.length > 0" class="table">
-      <thead><tr><th>{{ $t("order.orderNo") }}</th><th>{{ $t("mall.created") }}</th><th>{{ $t("mall.items") }}</th><th>{{ $t("common.total") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
-      <tbody>
-        <tr v-for="order in result.items" :key="order.id">
-          <td>{{ order.order_no }}</td>
-          <td>{{ new Date(order.created_at).toLocaleString(locale === "zh" ? "zh-CN" : "en-US") }}</td>
-          <td>{{ order.items.length }}</td>
-          <td>{{ totals[order.id] || $t("common.loading") }}</td>
-          <td><StatusBadge :status="order.status" kind="order" /></td>
-          <td><NuxtLink :to="`/orders/${order.id}`">{{ $t("mall.details") }}</NuxtLink></td>
-        </tr>
-      </tbody>
-    </table>
-    <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>
-  </section>
-</template>
-
-<style scoped>
-.pagination { margin-top: 16px; }
-.empty-state { text-align: center; }
-@media (max-width: 700px) { .table { display: block; overflow-x: auto; white-space: nowrap; } }
-</style>
diff --git a/apps/mall/pages/products/[id].vue b/apps/mall/pages/products/[id].vue
deleted file mode 100644
index 133c4b1..0000000
--- a/apps/mall/pages/products/[id].vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import type { Product, Sku } from "@vmall/shared";
-import { t as localized } from "@vmall/shared";
-
-const route = useRoute();
-const { locale } = useI18n();
-const { $api } = useNuxtApp();
-const session = useSessionStore();
-const product = ref<Product | null>(null);
-const selectedSkuId = ref("");
-const quantity = ref(1);
-const mainImage = ref("");
-const loading = ref(true);
-const submitting = ref(false);
-const error = ref("");
-
-const skus = computed(() => (product.value?.skus ?? []).filter((sku) => sku.active));
-const selectedSku = computed<Sku | null>(() => skus.value.find((sku) => sku.id === selectedSkuId.value) ?? skus.value[0] ?? null);
-
-function errorMessage(value: unknown): string {
-  return value instanceof Error ? value.message : $t("mall.loadFailed");
-}
-
-async function loadProduct(): Promise<void> {
-  loading.value = true;
-  error.value = "";
-  try {
-    product.value = await $api.getProduct(String(route.params.id));
-    mainImage.value = product.value.images[0] ?? "";
-    selectedSkuId.value = skus.value[0]?.id ?? "";
-  } catch (value) {
-    error.value = errorMessage(value);
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function addToCart(): Promise<void> {
-  const sku = selectedSku.value;
-  if (!sku || sku.stock < 1) return;
-  if (!localStorage.getItem("vmall.token") || session.user?.role !== "customer") {
-    await navigateTo("/login");
-    return;
-  }
-  const qty = Math.max(1, Math.min(sku.stock, Math.trunc(quantity.value)));
-  submitting.value = true;
-  error.value = "";
-  try {
-    await $api.addCartItem(sku.id, qty);
-    await navigateTo("/cart");
-  } catch (value) {
-    error.value = errorMessage(value);
-  } finally {
-    submitting.value = false;
-  }
-}
-
-watch(selectedSku, (sku) => {
-  if (sku && quantity.value > sku.stock) quantity.value = Math.max(1, sku.stock);
-});
-
-onMounted(async () => {
-  session.hydrate();
-  await loadProduct();
-});
-</script>
-
-<template>
-  <section>
-    <NuxtLink to="/" class="muted">← {{ $t("common.back") }}</NuxtLink>
-    <p v-if="loading" class="muted mt">{{ $t("common.loading") }}</p>
-    <p v-else-if="error" class="error-text" role="alert">{{ error }}</p>
-    <div v-else-if="product" class="detail-layout mt">
-      <div>
-        <div class="main-image">
-          <img v-if="mainImage" :src="mainImage" :alt="localized(product.name, locale)">
-          <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
-        </div>
-        <div v-if="product.images.length > 1" class="thumbs">
-          <button v-for="image in product.images" :key="image" class="thumb" :class="{ selected: image === mainImage }" type="button" @click="mainImage = image">
-            <img :src="image" :alt="localized(product.name, locale)">
-          </button>
-        </div>
-      </div>
-      <div class="card product-info">
-        <h1 class="page-title">{{ localized(product.name, locale) }}</h1>
-        <p class="muted">{{ localized(product.description, locale) }}</p>
-
-        <div class="field">
-          <label>{{ $t("mall.chooseSku") }}</label>
-          <div v-if="skus.length" class="sku-list">
-            <label v-for="sku in skus" :key="sku.id" class="sku-option" :class="{ selected: sku.id === selectedSkuId }">
-              <input v-model="selectedSkuId" type="radio" name="sku" :value="sku.id" :disabled="sku.stock < 1">
-              <span>
-                <strong>{{ sku.sku_code }}</strong>
-                <span v-for="(value, key) in sku.attributes" :key="key" class="attribute">{{ key }}: {{ value }}</span>
-              </span>
-              <span class="sku-meta">
-                <PriceText :amount-minor="sku.price_minor" :currency="sku.currency" />
-                <span class="muted">{{ sku.stock }} {{ $t("mall.available") }}</span>
-              </span>
-            </label>
-          </div>
-          <p v-else class="muted">{{ $t("mall.unavailable") }}</p>
-        </div>
-
-        <div v-if="selectedSku" class="purchase-row">
-          <div class="field quantity-field">
-            <label for="product-quantity">{{ $t("mall.quantity") }}</label>
-            <input id="product-quantity" v-model.number="quantity" type="number" min="1" :max="selectedSku.stock">
-          </div>
-          <div class="selected-price"><PriceText :amount-minor="selectedSku.price_minor" :currency="selectedSku.currency" /></div>
-        </div>
-        <button class="btn primary" :disabled="submitting || !selectedSku || selectedSku.stock < 1" @click="addToCart">
-          {{ submitting ? $t("common.loading") : $t("product.addToCart") }}
-        </button>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
-.main-image { overflow: hidden; border-radius: var(--radius); background: #eef1f5; }
-.main-image img, .image-placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
-.image-placeholder { display: grid; place-items: center; color: var(--muted); }
-.thumbs { display: flex; gap: 8px; margin-top: 10px; }
-.thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; border-radius: var(--radius); overflow: hidden; }
-.thumb.selected { border-color: var(--primary); }
-.thumb img { width: 64px; height: 64px; display: block; object-fit: cover; }
-.product-info .page-title { margin-bottom: 8px; }
-.sku-list { display: grid; gap: 8px; }
-.sku-option { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; cursor: pointer; }
-.sku-option.selected { border-color: var(--primary); background: #f7f9ff; }
-.sku-option input { width: auto; margin-top: 3px; }
-.attribute { display: inline-block; margin-left: 10px; color: var(--muted); font-size: 12px; }
-.sku-meta { display: grid; justify-items: end; gap: 2px; color: var(--primary); font-weight: 600; }
-.sku-meta .muted { font-weight: 400; font-size: 12px; }
-.purchase-row { display: flex; align-items: end; gap: 16px; margin: 18px 0; }
-.quantity-field { width: 120px; margin: 0; }
-.selected-price { color: var(--primary); font-size: 20px; font-weight: 700; padding-bottom: 8px; }
-@media (max-width: 760px) { .detail-layout { grid-template-columns: 1fr; } }
-</style>
diff --git a/apps/mall/pages/register.vue b/apps/mall/pages/register.vue
index 5819e8b..c1c7fcf 100644
--- a/apps/mall/pages/register.vue
+++ b/apps/mall/pages/register.vue
@@ -1,25 +1,65 @@
 <script setup lang="ts">
+const { t } = useI18n();
 const { $api } = useNuxtApp();
 const session = useSessionStore();
+const router = useRouter();
+
+const displayName = ref("");
 const email = ref("");
 const password = ref("");
-const displayName = ref("");
-const error = ref("");
+const confirmPassword = ref("");
+const code = ref("");
+const errorKey = ref("");
 const submitting = ref(false);
+const countdown = ref(0);
+let timer: ReturnType<typeof setInterval> | undefined;
+
+function startCountdown(): void {
+  if (countdown.value > 0) return;
+  countdown.value = 60;
+  timer = setInterval(() => {
+    countdown.value -= 1;
+    if (countdown.value <= 0 && timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+  }, 1000);
+}
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+
+function validate(): boolean {
+  if (!displayName.value || !email.value || !password.value || !confirmPassword.value || !code.value) {
+    errorKey.value = "auth.validationRequired";
+    return false;
+  }
+  if (!/^\S+@\S+\.\S+$/.test(email.value)) {
+    errorKey.value = "auth.validationEmail";
+    return false;
+  }
+  if (password.value.length < 6) {
+    errorKey.value = "auth.validationPassword";
+    return false;
+  }
+  if (password.value !== confirmPassword.value) {
+    errorKey.value = "auth.validationMismatch";
+    return false;
+  }
+  return true;
+}
 
 async function submit(): Promise<void> {
+  errorKey.value = "";
+  if (!validate()) return;
   submitting.value = true;
-  error.value = "";
   try {
-    const auth = await $api.register(email.value.trim(), password.value, displayName.value.trim());
-    if (auth.user.role !== "customer") {
-      error.value = $t("auth.wrongRole");
-      return;
-    }
+    const auth = await $api.register(email.value, password.value, displayName.value);
     session.setAuth(auth);
-    await navigateTo("/");
-  } catch (value) {
-    error.value = value instanceof Error ? value.message : $t("common.error");
+    await router.push("/");
+  } catch {
+    errorKey.value = "auth.requestFailed";
   } finally {
     submitting.value = false;
   }
@@ -27,15 +67,156 @@ async function submit(): Promise<void> {
 </script>
 
 <template>
-  <section class="form-narrow card">
-    <h1 class="page-title">{{ $t("auth.createAccount") }}</h1>
-    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
-    <form @submit.prevent="submit">
-      <div class="field"><label for="register-name">{{ $t("common.displayName") }}</label><input id="register-name" v-model="displayName" autocomplete="name" required></div>
-      <div class="field"><label for="register-email">{{ $t("common.email") }}</label><input id="register-email" v-model="email" type="email" autocomplete="email" required></div>
-      <div class="field"><label for="register-password">{{ $t("common.password") }}</label><input id="register-password" v-model="password" type="password" autocomplete="new-password" minlength="8" required></div>
-      <button class="btn primary" type="submit" :disabled="submitting">{{ submitting ? $t("common.loading") : $t("common.register") }}</button>
-    </form>
-    <p class="muted mt">{{ $t("auth.haveAccount") }} <NuxtLink to="/login">{{ $t("common.login") }}</NuxtLink></p>
+  <section class="auth-page">
+    <div class="auth-inner">
+      <div class="auth-panel">
+        <div class="auth-tabs">
+          <h1>{{ t("auth.registerTab") }}</h1>
+          <NuxtLink to="/login">{{ t("auth.loginTab") }}</NuxtLink>
+        </div>
+        <form @submit.prevent="submit">
+          <label class="field">
+            <span>{{ t("common.displayName") }}</span>
+            <input v-model.trim="displayName" class="minput" type="text" autocomplete="name" :placeholder="t('auth.displayNamePlaceholder')" />
+          </label>
+          <label class="field">
+            <span>{{ t("common.email") }}</span>
+            <input v-model.trim="email" class="minput" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
+          </label>
+          <label class="field">
+            <span>{{ t("common.password") }}</span>
+            <input v-model="password" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
+          </label>
+          <label class="field">
+            <span>{{ t("auth.confirmPassword") }}</span>
+            <input v-model="confirmPassword" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
+          </label>
+          <label class="field">
+            <span>{{ t("auth.smsCode") }}</span>
+            <span class="code-row">
+              <input v-model.trim="code" class="minput" type="text" :placeholder="t('auth.smsCodePlaceholder')" />
+              <button class="mbtn code-button" type="button" :disabled="countdown > 0" @click="startCountdown">
+                {{ countdown > 0 ? t("auth.codeCountdown", { n: countdown }) : t("auth.getCode") }}
+              </button>
+            </span>
+          </label>
+          <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
+          <button class="mbtn red block submit" type="submit" :disabled="submitting">
+            {{ t("auth.registerAction") }}
+          </button>
+        </form>
+        <div class="auth-links">
+          <span>{{ t("auth.haveAccount") }}</span>
+          <NuxtLink to="/login">{{ t("auth.loginNow") }}</NuxtLink>
+          <NuxtLink to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
+
+<style scoped>
+.auth-page {
+  min-height: 720px;
+  background: #f6f6f6 url("/mock/login-bg.svg") center top / cover no-repeat;
+  padding: 50px 0;
+  box-sizing: border-box;
+}
+.auth-inner {
+  width: 1200px;
+  min-height: 540px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.auth-panel {
+  width: 400px;
+  min-height: 540px;
+  box-sizing: border-box;
+  padding: 40px;
+  background: #fff;
+  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
+}
+.auth-tabs {
+  display: flex;
+  align-items: baseline;
+  gap: 18px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--mall-line);
+  padding-bottom: 14px;
+}
+h1 {
+  margin: 0;
+  color: var(--mall-ink);
+  font-size: 20px;
+  font-weight: 600;
+}
+.auth-tabs a,
+.auth-links a {
+  color: var(--mall-red);
+  font-size: 13px;
+  text-decoration: none;
+}
+.auth-tabs a:hover,
+.auth-links a:hover {
+  color: var(--mall-red-dark);
+}
+.field {
+  display: block;
+  margin-bottom: 13px;
+}
+.field > span:first-child {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.code-row {
+  display: flex;
+  gap: 8px;
+}
+.code-row .minput {
+  min-width: 0;
+  flex: 1;
+}
+.code-button {
+  flex: 0 0 100px;
+  padding: 5px 8px;
+  white-space: nowrap;
+}
+.submit {
+  margin-top: 4px;
+}
+.error {
+  margin: -2px 0 10px;
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.auth-links {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 17px;
+  color: var(--mall-faint);
+  font-size: 12px;
+  flex-wrap: wrap;
+}
+@media (max-width: 1240px) {
+  .auth-inner {
+    width: calc(100% - 40px);
+  }
+}
+@media (max-width: 640px) {
+  .auth-page {
+    padding: 20px;
+  }
+  .auth-inner {
+    width: 100%;
+  }
+  .auth-panel {
+    width: 100%;
+    padding: 30px 24px;
+  }
+}
+</style>
diff --git a/apps/mall/pages/search.vue b/apps/mall/pages/search.vue
new file mode 100644
index 0000000..3fdf726
--- /dev/null
+++ b/apps/mall/pages/search.vue
@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import type { Category } from "@vmall/shared";
+import {
+  MOCK_BRANDS,
+  MOCK_CATEGORIES,
+  childCategories,
+  searchMockProducts,
+  topCategories,
+} from "~/mock/data";
+
+type SortType = "default" | "price" | "sales" | "comments";
+type OrderType = "asc" | "desc";
+
+const route = useRoute();
+const router = useRouter();
+const { locale, t } = useI18n();
+
+const queryValue = (value: unknown): string => {
+  if (Array.isArray(value)) return typeof value[0] === "string" ? value[0] : "";
+  return typeof value === "string" ? value : "";
+};
+
+const state = computed(() => {
+  const sortValue = queryValue(route.query.sort);
+  const orderValue = queryValue(route.query.order);
+  const sort: SortType = ["default", "price", "sales", "comments"].includes(sortValue)
+    ? (sortValue as SortType)
+    : "default";
+  const order: OrderType = orderValue === "asc" ? "asc" : "desc";
+  const pageValue = Number.parseInt(queryValue(route.query.page), 10);
+  return {
+    q: queryValue(route.query.q),
+    category: queryValue(route.query.category),
+    brand: queryValue(route.query.brand),
+    sort,
+    order,
+    page: Number.isFinite(pageValue) && pageValue > 0 ? pageValue : 1,
+  };
+});
+
+const result = computed(() =>
+  searchMockProducts({
+    q: state.value.q,
+    categoryId: state.value.category || undefined,
+    brandId: state.value.brand || undefined,
+    sort: state.value.sort,
+    order: state.value.order,
+    page: state.value.page,
+    perPage: 20,
+  }),
+);
+
+const replaceQuery = async (patch: Record<string, string | undefined>): Promise<void> => {
+  const next: Record<string, string> = {};
+  for (const [key, value] of Object.entries({
+    q: state.value.q,
+    category: state.value.category,
+    brand: state.value.brand,
+    sort: state.value.sort,
+    order: state.value.order,
+    page: String(state.value.page),
+    ...patch,
+  })) {
+    if (value) next[key] = value;
+  }
+  if (next.sort === "default") {
+    delete next.sort;
+    if (next.order === "desc") delete next.order;
+  }
+  if (next.page === "1") delete next.page;
+  await router.replace({ query: next });
+};
+
+const chooseCategory = (id?: string): void => {
+  void replaceQuery({ category: id, page: "1" });
+};
+
+const chooseBrand = (id?: string): void => {
+  void replaceQuery({ brand: id, page: "1" });
+};
+
+const chooseSort = (sort: SortType): void => {
+  const order: OrderType = state.value.sort === sort && sort !== "default"
+    ? state.value.order === "asc" ? "desc" : "asc"
+    : "asc";
+  void replaceQuery({ sort, order, page: "1" });
+};
+
+const categoryById = (id: string): Category | undefined => MOCK_CATEGORIES.find((category) => category.id === id);
+
+const selectedPath = computed(() => {
+  const path: Category[] = [];
+  let current = state.value.category ? categoryById(state.value.category) : undefined;
+  while (current) {
+    path.unshift(current);
+    current = current.parent_id ? categoryById(current.parent_id) : undefined;
+  }
+  return path;
+});
+
+const categoryChildren = computed(() => {
+  const selected = selectedPath.value[selectedPath.value.length - 1];
+  return selected ? childCategories(selected.id) : [];
+});
+
+const breadcrumbItems = computed(() => [
+  { label: t("search.home"), to: "/" },
+  {
+    label: state.value.q
+      ? t("search.searchResults", { keyword: state.value.q })
+      : t("search.productList"),
+  },
+]);
+
+const sortOptions = computed(() => [
+  { key: "default" as SortType, label: t("search.defaultSort") },
+  { key: "price" as SortType, label: t("search.price") },
+  { key: "sales" as SortType, label: t("search.sales") },
+  { key: "comments" as SortType, label: t("search.comments") },
+]);
+</script>
+
+<template>
+  <div class="search-page section-bg">
+    <UiBreadcrumb :items="breadcrumbItems" />
+    <main class="w1200">
+      <section class="filter mpanel" :aria-label="t('search.sort')">
+        <div class="filter-row">
+          <strong>{{ t("search.category") }}</strong>
+          <div class="filter-options">
+            <button type="button" :class="{ active: !state.category }" @click="chooseCategory()">{{ t("search.all") }}</button>
+            <button
+              v-for="category in topCategories()"
+              :key="category.id"
+              type="button"
+              :class="{ active: category.id === state.category }"
+              @click="chooseCategory(category.id)"
+            >{{ pick(category.name, locale) }}</button>
+            <template v-if="selectedPath.length">
+              <button
+                v-for="category in selectedPath.slice(1)"
+                :key="`path-${category.id}`"
+                type="button"
+                :class="{ active: category.id === state.category }"
+                @click="chooseCategory(category.id)"
+              >{{ pick(category.name, locale) }}</button>
+            </template>
+            <button
+              v-for="category in categoryChildren"
+              :key="`child-${category.id}`"
+              type="button"
+              :class="{ active: category.id === state.category }"
+              @click="chooseCategory(category.id)"
+            >{{ pick(category.name, locale) }}</button>
+          </div>
+        </div>
+        <div class="filter-row">
+          <strong>{{ t("search.brand") }}</strong>
+          <div class="filter-options">
+            <button type="button" :class="{ active: !state.brand }" @click="chooseBrand()">{{ t("search.all") }}</button>
+            <button
+              v-for="brand in MOCK_BRANDS"
+              :key="brand.id"
+              type="button"
+              :class="{ active: brand.id === state.brand }"
+              @click="chooseBrand(brand.id)"
+            >{{ brand.name }}</button>
+          </div>
+        </div>
+        <div class="filter-row sort-row">
+          <strong>{{ t("search.sort") }}</strong>
+          <div class="filter-options">
+            <button
+              v-for="option in sortOptions"
+              :key="option.key"
+              type="button"
+              :class="{ active: state.sort === option.key }"
+              :aria-label="option.key === state.sort ? (state.order === 'asc' ? t('search.ascending') : t('search.descending')) : undefined"
+              @click="chooseSort(option.key)"
+            >
+              {{ option.label }}
+              <span v-if="state.sort === option.key && option.key !== 'default'" aria-hidden="true">{{ state.order === "asc" ? "↑" : "↓" }}</span>
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <div class="result-head">
+        <span>{{ t("search.resultCount", { n: result.total }) }}</span>
+      </div>
+      <div v-if="result.items.length" class="product-grid">
+        <UiProductCard v-for="product in result.items" :key="product.id" :product="product" />
+      </div>
+      <UiEmptyState v-else :text="t('search.empty')" />
+      <UiPagination :page="result.page" :total="result.total" :per-page="result.per_page" @change="(page) => replaceQuery({ page: String(page) })" />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.search-page {
+  min-height: 650px;
+  padding-bottom: 50px;
+}
+.filter {
+  background: #fff;
+  border: 1px solid var(--mall-line);
+  padding: 2px 20px;
+}
+.filter-row {
+  display: flex;
+  min-height: 48px;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--mall-line);
+  padding: 12px 0 8px;
+}
+.filter-row:last-child {
+  border-bottom: 0;
+}
+.filter-row strong {
+  width: 90px;
+  flex: 0 0 90px;
+  color: var(--mall-ink);
+  font-size: 13px;
+  line-height: 28px;
+}
+.filter-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+}
+.filter-options button {
+  border: 0;
+  background: transparent;
+  color: var(--mall-muted);
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 28px;
+  padding: 0 10px;
+}
+.filter-options button:hover,
+.filter-options button.active {
+  background: var(--mall-red);
+  color: #fff;
+  border-radius: var(--mall-radius);
+}
+.sort-row .filter-options button {
+  min-width: 60px;
+}
+.result-head {
+  color: var(--mall-muted);
+  font-size: 13px;
+  padding: 22px 2px 12px;
+}
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 16px;
+}
+@media (max-width: 900px) {
+  .product-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+</style>
diff --git a/apps/mall/pages/seckill.vue b/apps/mall/pages/seckill.vue
new file mode 100644
index 0000000..2405c15
--- /dev/null
+++ b/apps/mall/pages/seckill.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import { lowestSku, SECKILL_SESSIONS, seckillProducts } from "~/mock/data";
+import type { Product } from "@vmall/shared";
+
+const { locale, t } = useI18n();
+const activeSessionIndex = ref(0);
+const remainingSeconds = ref(0);
+const products = seckillProducts();
+let countdownTimer: ReturnType<typeof setInterval> | undefined;
+
+const breadcrumb = computed(() => [
+  { label: t("stores.breadcrumbHome"), to: "/" },
+  { label: t("marketing.seckillBreadcrumb") },
+]);
+
+const activeSession = computed(() => SECKILL_SESSIONS[activeSessionIndex.value] ?? SECKILL_SESSIONS[0]);
+
+function setCurrentSession(): void {
+  const hour = new Date().getHours();
+  const index = SECKILL_SESSIONS.findIndex((session) => hour >= session.startHour && hour < session.endHour);
+  activeSessionIndex.value = index >= 0 ? index : 0;
+}
+
+function updateCountdown(): void {
+  const now = new Date();
+  const session = activeSession.value;
+  const end = new Date(now);
+  if (session.endHour === 24) {
+    end.setDate(end.getDate() + 1);
+    end.setHours(0, 0, 0, 0);
+  } else {
+    end.setHours(session.endHour, 0, 0, 0);
+  }
+  const seconds = Math.max(0, Math.ceil((end.getTime() - now.getTime()) / 1000));
+  if (seconds === 0) {
+    setCurrentSession();
+    updateCountdown();
+    return;
+  }
+  remainingSeconds.value = seconds;
+}
+
+function formatCountdown(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  const p = (n: number): string => String(n).padStart(2, "0");
+  return `${p(h)}:${p(m)}:${p(s)}`;
+}
+
+function sessionState(index: number): "current" | "upcoming" | "ended" {
+  if (index === activeSessionIndex.value) return "current";
+  return index < activeSessionIndex.value ? "ended" : "upcoming";
+}
+
+function sessionStateLabel(index: number): string {
+  const state = sessionState(index);
+  if (state === "current") return t("marketing.currentSession");
+  if (state === "ended") return t("marketing.ended");
+  return t("marketing.upcoming");
+}
+function priceMinorOf(product: Product): number {
+  return lowestSku(product)?.price_minor ?? 0;
+}
+
+function currencyOf(product: Product): string {
+  return lowestSku(product)?.currency ?? "USD";
+}
+
+
+onMounted(() => {
+  setCurrentSession();
+  updateCountdown();
+  countdownTimer = setInterval(updateCountdown, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (countdownTimer) clearInterval(countdownTimer);
+});
+</script>
+
+<template>
+  <div class="seckill-page">
+    <UiBreadcrumb :items="breadcrumb" />
+    <section class="w1200 marketing-section">
+      <header class="section-heading">
+        <h1>{{ t("marketing.seckillTitle") }}</h1>
+      </header>
+      <div class="session-tabs" role="tablist">
+        <button
+          v-for="(session, index) in SECKILL_SESSIONS"
+          :key="session.label"
+          type="button"
+          class="session-tab"
+          :class="{ active: sessionState(index) === 'current', ended: sessionState(index) === 'ended' }"
+          role="tab"
+          :aria-selected="sessionState(index) === 'current'"
+
+        >
+          <strong>{{ session.label }}</strong>
+          <span>{{ sessionStateLabel(index) }}</span>
+        </button>
+      </div>
+      <p class="countdown" aria-live="polite">{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}</p>
+
+      <div v-if="products.length" class="seckill-grid">
+        <article v-for="item in products" :key="item.product.id" class="seckill-card hover-lift">
+          <NuxtLink :to="`/goods/${item.product.slug}`" class="product-image">
+            <img :src="item.product.images[0]" :alt="pick(item.product.name, locale)" loading="lazy" />
+          </NuxtLink>
+          <div class="product-body">
+            <NuxtLink :to="`/goods/${item.product.slug}`" class="product-name">{{ pick(item.product.name, locale) }}</NuxtLink>
+            <p class="price-line">
+              <span class="sale-price"><PriceText :amount-minor="item.seckillPriceMinor" :currency="currencyOf(item.product)" /></span>
+              <s class="original-price"><PriceText :amount-minor="priceMinorOf(item.product)" :currency="currencyOf(item.product)" /></s>
+            </p>
+            <div class="progress-line">
+              <div class="progress-track"><span :style="{ width: `${item.soldPct}%` }"></span></div>
+              <span>{{ t("marketing.progress", { n: item.soldPct }) }}</span>
+            </div>
+            <NuxtLink :to="`/goods/${item.product.slug}`" class="mbtn red grab-button">{{ t("marketing.buyNow") }}</NuxtLink>
+          </div>
+        </article>
+      </div>
+      <UiEmptyState v-else :text="t('marketing.noSeckillProducts')" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.seckill-page {
+  padding-bottom: 60px;
+}
+.marketing-section {
+  background: #fff;
+}
+.section-heading {
+  border: 1px solid var(--mall-line);
+  border-bottom: 0;
+  background: #fafafa;
+  padding: 14px 18px;
+}
+.section-heading h1 {
+  margin: 0;
+  border-left: 3px solid var(--mall-red);
+  padding-left: 10px;
+  font-size: 17px;
+  font-weight: 500;
+}
+.session-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border: 1px solid var(--mall-line);
+  border-bottom: 0;
+}
+.session-tab {
+  display: flex;
+  min-height: 70px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  border-right: 1px solid var(--mall-line);
+  background: #fff;
+  color: var(--mall-muted);
+  cursor: pointer;
+}
+.session-tab:last-child {
+  border-right: 0;
+}
+.session-tab strong {
+  color: var(--mall-ink);
+  font-size: 19px;
+  font-weight: 600;
+}
+.session-tab span {
+  margin-top: 4px;
+  font-size: 12px;
+}
+.session-tab.active {
+  background: var(--mall-red);
+  color: #fff;
+}
+.session-tab.active strong {
+  color: #fff;
+}
+.session-tab.ended {
+  color: var(--mall-faint);
+}
+.session-tab.ended strong {
+  color: var(--mall-faint);
+}
+.countdown {
+  margin: 0;
+  border: 1px solid var(--mall-line);
+  border-top: 0;
+  padding: 10px;
+  color: var(--mall-red);
+  font-size: 13px;
+  text-align: center;
+}
+.seckill-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+.seckill-card {
+  min-width: 0;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+}
+.product-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 205px;
+  padding: 14px;
+}
+.product-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.product-body {
+  padding: 0 14px 14px;
+}
+.product-name {
+  display: block;
+  height: 38px;
+  overflow: hidden;
+  color: var(--mall-ink);
+  font-size: 13px;
+  line-height: 1.45;
+  text-decoration: none;
+}
+.product-name:hover {
+  color: var(--mall-red);
+}
+.price-line {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 10px 0;
+}
+.sale-price {
+  color: var(--mall-red);
+  font-size: 19px;
+  font-weight: 700;
+}
+.original-price {
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.progress-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--mall-faint);
+  font-size: 11px;
+}
+.progress-track {
+  height: 7px;
+  flex: 1;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #f5d9db;
+}
+.progress-track span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--mall-red);
+}
+.grab-button {
+  display: block;
+  margin-top: 13px;
+  text-align: center;
+}
+@media (max-width: 1240px) {
+  .w1200 {
+    width: calc(100% - 32px);
+  }
+}
+@media (max-width: 840px) {
+  .seckill-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 520px) {
+  .session-tab {
+    min-height: 62px;
+  }
+  .session-tab strong {
+    font-size: 15px;
+  }
+  .seckill-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/mall/pages/stores/[id].vue b/apps/mall/pages/stores/[id].vue
new file mode 100644
index 0000000..5b1dd09
--- /dev/null
+++ b/apps/mall/pages/stores/[id].vue
@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import { lowestSku, salesOf, searchMockProducts, storeDetail } from "~/mock/data";
+
+const route = useRoute();
+const { locale, t } = useI18n();
+const storeId = computed(() => {
+  const raw = route.params.id;
+  return typeof raw === "string" ? raw : raw?.[0] ?? "";
+});
+const detail = computed(() => storeDetail(storeId.value));
+const store = computed(() => detail.value?.store ?? null);
+const favorite = ref(false);
+const sortMode = ref<"default" | "price" | "sales" | "comments">("default");
+const sortOrder = ref<"asc" | "desc">("desc");
+const page = ref(1);
+const perPage = 12;
+
+const productResult = computed(() => {
+  if (!store.value) return { items: [], total: 0, page: 1, per_page: perPage };
+  return searchMockProducts({
+    shopId: store.value.id,
+    sort: sortMode.value,
+    order: sortOrder.value,
+    page: page.value,
+    perPage,
+  });
+});
+
+const breadcrumb = computed(() => [
+  { label: t("stores.breadcrumbHome"), to: "/" },
+  { label: t("stores.directory"), to: "/stores" },
+  { label: store.value ? pick(store.value.name, locale.value) : t("stores.unknownStore") },
+]);
+
+const rateRows = computed(() => {
+  if (!store.value) return [];
+  return [
+    { label: t("stores.score"), value: store.value.rate.score },
+    { label: t("stores.agreement"), value: store.value.rate.agree },
+    { label: t("stores.service"), value: store.value.rate.service },
+    { label: t("stores.speed"), value: store.value.rate.speed },
+  ];
+});
+
+function priceMinorOf(product: Parameters<typeof lowestSku>[0]): number {
+  return lowestSku(product)?.price_minor ?? 0;
+}
+
+function currencyOf(product: Parameters<typeof lowestSku>[0]): string {
+  return lowestSku(product)?.currency ?? "USD";
+}
+const salesRank = computed(() => detail.value?.salesRank ?? []);
+
+function chooseSort(mode: "default" | "price" | "sales" | "comments"): void {
+  if (sortMode.value === mode && mode !== "default") {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+  } else {
+    sortMode.value = mode;
+    sortOrder.value = mode === "price" ? "asc" : "desc";
+  }
+  page.value = 1;
+}
+</script>
+
+<template>
+  <div class="store-page">
+    <UiBreadcrumb :items="breadcrumb" />
+    <template v-if="store">
+      <div class="w1200 store-banner">
+        <img :src="store.banner" :alt="pick(store.name, locale)" />
+      </div>
+      <div class="w1200 store-layout">
+        <aside class="store-rail">
+          <section class="mpanel store-card">
+            <div class="store-heading">
+              <img :src="store.logo" :alt="pick(store.name, locale)" />
+              <div>
+                <h1>{{ pick(store.name, locale) }}</h1>
+                <p>{{ t("stores.positiveRate") }}</p>
+              </div>
+            </div>
+            <div class="rate-list">
+              <div v-for="row in rateRows" :key="row.label" class="rate-row">
+                <span>{{ row.label }}</span>
+                <UiRatingStars :value="row.value" :size="13" />
+                <strong>{{ row.value.toFixed(1) }}</strong>
+              </div>
+            </div>
+            <dl class="store-info">
+              <div><dt>{{ t("stores.company") }}</dt><dd>{{ store.company }}</dd></div>
+              <div><dt>{{ t("stores.region") }}</dt><dd>{{ store.region }}</dd></div>
+              <div><dt>{{ t("stores.address") }}</dt><dd>{{ pick(store.address, locale) }}</dd></div>
+            </dl>
+            <button type="button" class="mbtn favorite-button" :class="{ selected: favorite }" @click="favorite = !favorite">
+              {{ favorite ? t("stores.favorited") : t("stores.favorite") }}
+            </button>
+          </section>
+
+          <section class="mpanel sales-card">
+            <h2 class="rail-title">{{ t("stores.salesRank") }}</h2>
+            <NuxtLink v-for="(product, index) in salesRank" :key="product.id" :to="`/goods/${product.slug}`" class="rank-item">
+              <span class="rank-number">{{ index + 1 }}</span>
+              <img :src="product.images[0]" :alt="pick(product.name, locale)" loading="lazy" />
+              <span class="rank-copy">
+                <span class="rank-name">{{ pick(product.name, locale) }}</span>
+                <span class="rank-sales">{{ t("product.salesCount", { n: salesOf(product) }) }}</span>
+              </span>
+              <span class="rank-price"><PriceText :amount-minor="priceMinorOf(product)" :currency="currencyOf(product)" /></span>
+            </NuxtLink>
+          </section>
+        </aside>
+
+        <section class="store-products">
+          <header class="product-toolbar">
+            <h2>{{ t("stores.storeProducts") }}</h2>
+            <div class="product-sorts" role="tablist">
+              <button type="button" :class="{ active: sortMode === 'default' }" @click="chooseSort('default')">{{ t("stores.sortDefault") }}</button>
+              <button type="button" :class="{ active: sortMode === 'price' }" @click="chooseSort('price')">{{ t("stores.sortPrice") }}</button>
+              <button type="button" :class="{ active: sortMode === 'sales' }" @click="chooseSort('sales')">{{ t("stores.sortSales") }}</button>
+              <button type="button" :class="{ active: sortMode === 'comments' }" @click="chooseSort('comments')">{{ t("stores.sortComments") }}</button>
+            </div>
+          </header>
+          <div v-if="productResult.items.length" class="product-grid">
+            <UiProductCard v-for="product in productResult.items" :key="product.id" :product="product" />
+          </div>
+          <UiEmptyState v-else :text="t('stores.noProducts')" />
+          <UiPagination :page="productResult.page" :total="productResult.total" :per-page="productResult.per_page" @change="page = $event" />
+        </section>
+      </div>
+    </template>
+    <div v-else class="w1200 missing-store">
+      <UiEmptyState :text="t('stores.unknownStore')" />
+      <NuxtLink to="/stores" class="mbtn">{{ t("stores.backToStores") }}</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.store-page {
+  padding-bottom: 60px;
+}
+.store-banner {
+  height: 350px;
+  overflow: hidden;
+  background: var(--mall-bg);
+}
+.store-banner img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.store-layout {
+  display: grid;
+  grid-template-columns: 270px 1fr;
+  gap: 20px;
+  margin-top: 20px;
+  align-items: start;
+}
+.store-rail {
+  min-width: 0;
+}
+.mpanel {
+  padding: 16px;
+  border: 1px solid var(--mall-line);
+}
+.store-card {
+  margin-bottom: 20px;
+}
+.store-heading {
+  display: flex;
+  gap: 11px;
+  align-items: center;
+  padding-bottom: 13px;
+  border-bottom: 1px solid var(--mall-line);
+}
+.store-heading img {
+  width: 58px;
+  height: 58px;
+  border: 1px solid var(--mall-line);
+  object-fit: contain;
+}
+.store-heading h1 {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.45;
+}
+.store-heading p {
+  margin: 4px 0 0;
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.rate-list {
+  padding: 12px 0 4px;
+  border-bottom: 1px solid var(--mall-line);
+}
+.rate-row {
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  gap: 5px;
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.rate-row > span:first-child {
+  width: 64px;
+}
+.rate-row strong {
+  margin-left: auto;
+  color: var(--mall-red);
+  font-weight: 500;
+}
+.store-info {
+  margin: 12px 0;
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.store-info > div {
+  display: grid;
+  grid-template-columns: 42px 1fr;
+  gap: 7px;
+  margin: 8px 0;
+}
+.store-info dt {
+  color: var(--mall-faint);
+}
+.store-info dd {
+  min-width: 0;
+  margin: 0;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.favorite-button {
+  width: 100%;
+}
+.favorite-button.selected {
+  border-color: var(--mall-red);
+  color: var(--mall-red);
+}
+.rail-title {
+  margin: 0 0 12px;
+  border-left: 3px solid var(--mall-red);
+  padding-left: 9px;
+  font-size: 14px;
+  font-weight: 500;
+}
+.rank-item {
+  display: grid;
+  grid-template-columns: 18px 48px 1fr;
+  gap: 6px;
+  align-items: center;
+  position: relative;
+  padding: 9px 0;
+  border-top: 1px solid var(--mall-line);
+  color: inherit;
+  text-decoration: none;
+}
+.rank-number {
+  color: var(--mall-red);
+  font-size: 12px;
+  text-align: center;
+}
+.rank-item img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+.rank-copy {
+  min-width: 0;
+}
+.rank-name,
+.rank-sales {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rank-name {
+  font-size: 12px;
+}
+.rank-sales {
+  margin-top: 4px;
+  color: var(--mall-faint);
+  font-size: 11px;
+}
+.rank-price {
+  grid-column: 2 / 4;
+  color: var(--mall-red);
+  font-size: 12px;
+  text-align: right;
+}
+.store-products {
+  min-width: 0;
+}
+.product-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--mall-line);
+  background: #fafafa;
+  padding: 12px 16px;
+}
+.product-toolbar h2 {
+  margin: 0;
+  border-left: 3px solid var(--mall-red);
+  padding-left: 9px;
+  font-size: 15px;
+  font-weight: 500;
+}
+.product-sorts {
+  display: flex;
+}
+.product-sorts button {
+  border: 0;
+  border-right: 1px solid var(--mall-line-dark);
+  background: transparent;
+  padding: 2px 12px;
+  color: var(--mall-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+.product-sorts button:last-child {
+  border-right: 0;
+  padding-right: 0;
+}
+.product-sorts button.active {
+  color: var(--mall-red);
+  font-weight: 700;
+}
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 15px;
+}
+.product-grid :deep(.card) {
+  min-width: 0;
+}
+.missing-store {
+  min-height: 360px;
+  padding-top: 60px;
+  text-align: center;
+}
+@media (max-width: 1240px) {
+  .w1200 {
+    width: calc(100% - 32px);
+  }
+}
+@media (max-width: 840px) {
+  .store-layout {
+    grid-template-columns: 1fr;
+  }
+  .product-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 520px) {
+  .store-banner {
+    height: 220px;
+  }
+  .product-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .product-sorts button {
+    padding-left: 7px;
+    padding-right: 7px;
+  }
+}
+</style>
diff --git a/apps/mall/pages/stores/index.vue b/apps/mall/pages/stores/index.vue
new file mode 100644
index 0000000..565d8cb
--- /dev/null
+++ b/apps/mall/pages/stores/index.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import { MOCK_STORES } from "~/mock/data";
+
+const { locale, t } = useI18n();
+const sortMode = ref<"default" | "distance">("default");
+
+const stores = computed(() => {
+  const list = [...MOCK_STORES];
+  if (sortMode.value === "distance") list.sort((a, b) => a.distanceKm - b.distanceKm);
+  return list;
+});
+
+const breadcrumb = computed(() => [
+  { label: t("stores.breadcrumbHome"), to: "/" },
+  { label: t("stores.directory") },
+]);
+</script>
+
+<template>
+  <div class="stores-page">
+    <UiBreadcrumb :items="breadcrumb" />
+    <section class="w1200 store-directory">
+      <header class="sort-row">
+        <h1>{{ t("stores.directory") }}</h1>
+        <div class="sort-options" role="tablist">
+          <button
+            type="button"
+            :class="{ active: sortMode === 'default' }"
+            role="tab"
+            :aria-selected="sortMode === 'default'"
+            @click="sortMode = 'default'"
+          >{{ t("stores.sortDefault") }}</button>
+          <button
+            type="button"
+            :class="{ active: sortMode === 'distance' }"
+            role="tab"
+            :aria-selected="sortMode === 'distance'"
+            @click="sortMode = 'distance'"
+          >{{ t("stores.sortDistance") }}</button>
+        </div>
+      </header>
+
+      <div v-if="stores.length" class="store-list">
+        <article v-for="store in stores" :key="store.id" class="store-row hover-lift">
+          <NuxtLink :to="`/stores/${store.slug}`" class="store-logo-link">
+            <img class="store-logo" :src="store.logo" :alt="pick(store.name, locale)" loading="lazy" />
+          </NuxtLink>
+          <div class="store-main">
+            <NuxtLink :to="`/stores/${store.slug}`" class="store-name">{{ pick(store.name, locale) }}</NuxtLink>
+            <p class="store-company">{{ store.company }}</p>
+            <p class="store-location">
+              <span>{{ t("stores.region") }}：{{ store.region }}</span>
+              <span>{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span>
+            </p>
+          </div>
+          <div class="store-rating">{{ t("stores.positiveRate") }}</div>
+          <div class="store-actions">
+            <span class="distance">{{ t("stores.distance", { n: store.distanceKm.toFixed(1) }) }}</span>
+            <NuxtLink :to="`/stores/${store.slug}`" class="mbtn red">{{ t("stores.visitStore") }}</NuxtLink>
+          </div>
+        </article>
+      </div>
+      <UiEmptyState v-else :text="t('common.empty')" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.stores-page {
+  padding-bottom: 60px;
+}
+.store-directory {
+  background: #fff;
+}
+.sort-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--mall-line);
+  background: #fafafa;
+  padding: 13px 18px;
+}
+h1 {
+  margin: 0;
+  border-left: 3px solid var(--mall-red);
+  padding-left: 10px;
+  font-size: 16px;
+  font-weight: 500;
+}
+.sort-options {
+  display: flex;
+}
+.sort-options button {
+  border: 0;
+  border-right: 1px solid var(--mall-line-dark);
+  background: transparent;
+  color: var(--mall-muted);
+  padding: 2px 15px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.sort-options button:last-child {
+  border-right: 0;
+  padding-right: 0;
+}
+.sort-options button.active {
+  color: var(--mall-red);
+  font-weight: 700;
+}
+.store-list {
+  border: 1px solid var(--mall-line);
+  border-top: 0;
+}
+.store-row {
+  display: flex;
+  align-items: center;
+  min-height: 126px;
+  padding: 20px 22px;
+  border-bottom: 1px solid var(--mall-line);
+  background: #fff;
+}
+.store-row:last-child {
+  border-bottom: 0;
+}
+.store-logo-link {
+  display: flex;
+  width: 80px;
+  height: 80px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 80px;
+  border: 1px solid var(--mall-line);
+  background: #fff;
+}
+.store-logo {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+}
+.store-main {
+  min-width: 0;
+  flex: 1;
+  padding: 0 28px;
+}
+.store-name {
+  display: block;
+  color: var(--mall-ink);
+  font-size: 16px;
+  font-weight: 700;
+  text-decoration: none;
+}
+.store-name:hover {
+  color: var(--mall-red);
+}
+.store-company,
+.store-location {
+  margin: 8px 0 0;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.store-location {
+  display: flex;
+  gap: 24px;
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.store-rating {
+  width: 130px;
+  color: var(--mall-red);
+  font-size: 13px;
+  text-align: center;
+}
+.store-actions {
+  display: flex;
+  width: 145px;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+}
+.distance {
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+@media (max-width: 1240px) {
+  .w1200 {
+    width: calc(100% - 32px);
+  }
+}
+@media (max-width: 720px) {
+  .store-row {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .store-main {
+    width: calc(100% - 100px);
+    padding: 0;
+  }
+  .store-location {
+    flex-direction: column;
+    gap: 4px;
+  }
+  .store-rating {
+    width: auto;
+    margin-left: 100px;
+  }
+  .store-actions {
+    width: auto;
+    margin-left: auto;
+  }
+}
+</style>
diff --git a/apps/mall/pages/user.vue b/apps/mall/pages/user.vue
new file mode 100644
index 0000000..88b1681
--- /dev/null
+++ b/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>
diff --git a/apps/mall/pages/user/addresses.vue b/apps/mall/pages/user/addresses.vue
new file mode 100644
index 0000000..654d2ce
--- /dev/null
+++ b/apps/mall/pages/user/addresses.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import type { MockAddress } from "~/mock/data";
+import { MOCK_ADDRESSES } from "~/mock/data";
+
+definePageMeta({ middleware: "auth" });
+
+const { t } = useI18n();
+
+const rows = ref<MockAddress[]>(MOCK_ADDRESSES.map((address) => ({ ...address })));
+const open = ref(false);
+const editingId = ref<string | null>(null);
+
+const form = reactive<MockAddress>({
+  id: "",
+  recipient: "",
+  phone: "",
+  region: "",
+  city: "",
+  line1: "",
+  postalCode: "",
+  isDefault: false,
+});
+
+const errorKey = ref("");
+
+const modalTitle = computed(() => (editingId.value ? t("user.editAddress") : t("user.addAddress")));
+
+function resetForm(): void {
+  form.id = "";
+  form.recipient = "";
+  form.phone = "";
+  form.region = "";
+  form.city = "";
+  form.line1 = "";
+  form.postalCode = "";
+  form.isDefault = false;
+  errorKey.value = "";
+}
+
+function openAdd(): void {
+  editingId.value = null;
+  resetForm();
+  open.value = true;
+}
+
+function openEdit(row: MockAddress): void {
+  editingId.value = row.id;
+  form.id = row.id;
+  form.recipient = row.recipient;
+  form.phone = row.phone;
+  form.region = row.region;
+  form.city = row.city;
+  form.line1 = row.line1;
+  form.postalCode = row.postalCode;
+  form.isDefault = row.isDefault;
+  errorKey.value = "";
+  open.value = true;
+}
+
+function setDefault(id: string): void {
+  rows.value = rows.value.map((row) => ({ ...row, isDefault: row.id === id }));
+}
+
+function save(): void {
+  if (!form.recipient || !form.phone || !form.region || !form.city || !form.line1 || !form.postalCode) {
+    errorKey.value = "user.validationRequired";
+    return;
+  }
+  if (editingId.value) {
+    rows.value = rows.value.map((row) =>
+      row.id === editingId.value
+        ? {
+            ...row,
+            recipient: form.recipient,
+            phone: form.phone,
+            region: form.region,
+            city: form.city,
+            line1: form.line1,
+            postalCode: form.postalCode,
+            isDefault: form.isDefault,
+          }
+        : form.isDefault
+          ? { ...row, isDefault: false }
+          : row,
+    );
+  } else {
+    const nextId = `a-local-${Date.now()}`;
+    const next: MockAddress = {
+      id: nextId,
+      recipient: form.recipient,
+      phone: form.phone,
+      region: form.region,
+      city: form.city,
+      line1: form.line1,
+      postalCode: form.postalCode,
+      isDefault: form.isDefault,
+    };
+    rows.value = [next, ...rows.value.map((row) => ({ ...row, isDefault: form.isDefault ? false : row.isDefault }))];
+  }
+  open.value = false;
+}
+</script>
+
+<template>
+  <section class="mpanel addresses-panel">
+    <h1 class="mpanel-title">
+      {{ t("user.addresses") }}
+      <button class="mbtn red" type="button" @click="openAdd">{{ t("user.addAddress") }}</button>
+    </h1>
+    <UiEmptyState v-if="rows.length === 0" :text="t('user.noAddresses')" />
+    <table v-else class="mtable">
+      <thead>
+        <tr>
+          <th>{{ t("user.recipient") }}</th>
+          <th>{{ t("user.phone") }}</th>
+          <th>{{ t("user.region") }}</th>
+          <th>{{ t("user.city") }}</th>
+          <th>{{ t("user.line1") }}</th>
+          <th>{{ t("user.postalCode") }}</th>
+          <th>{{ t("common.status") }}</th>
+          <th>{{ t("common.actions") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in rows" :key="row.id">
+          <td>{{ row.recipient }}</td>
+          <td>{{ row.phone }}</td>
+          <td>{{ row.region }}</td>
+          <td>{{ row.city }}</td>
+          <td>{{ row.line1 }}</td>
+          <td>{{ row.postalCode }}</td>
+          <td>
+            <span v-if="row.isDefault" class="default-tag">{{ t("user.defaultAddress") }}</span>
+            <button v-else class="mbtn" type="button" @click="setDefault(row.id)">{{ t("user.setDefault") }}</button>
+          </td>
+          <td>
+            <button class="mbtn" type="button" @click="openEdit(row)">{{ t("common.edit") }}</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <UiModal :open="open" :title="modalTitle" @close="open = false">
+      <div class="form-grid">
+        <label>
+          <span>{{ t("user.recipient") }}</span>
+          <input v-model.trim="form.recipient" class="minput" type="text" />
+        </label>
+        <label>
+          <span>{{ t("user.phone") }}</span>
+          <input v-model.trim="form.phone" class="minput" type="text" />
+        </label>
+        <label>
+          <span>{{ t("user.region") }}</span>
+          <input v-model.trim="form.region" class="minput" type="text" />
+        </label>
+        <label>
+          <span>{{ t("user.city") }}</span>
+          <input v-model.trim="form.city" class="minput" type="text" />
+        </label>
+        <label class="full-line">
+          <span>{{ t("user.line1") }}</span>
+          <input v-model.trim="form.line1" class="minput" type="text" />
+        </label>
+        <label>
+          <span>{{ t("user.postalCode") }}</span>
+          <input v-model.trim="form.postalCode" class="minput" type="text" />
+        </label>
+        <label class="checkbox">
+          <input v-model="form.isDefault" type="checkbox" />
+          <span>{{ t("user.defaultAddress") }}</span>
+        </label>
+      </div>
+      <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
+      <template #footer>
+        <button class="mbtn" type="button" @click="open = false">{{ t("common.cancel") }}</button>
+        <button class="mbtn red" type="button" @click="save">{{ t("user.saveAddress") }}</button>
+      </template>
+    </UiModal>
+  </section>
+</template>
+
+<style scoped>
+.addresses-panel {
+  min-height: 560px;
+}
+.default-tag {
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.form-grid label > span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.full-line {
+  grid-column: 1 / -1;
+}
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.checkbox > span {
+  margin: 0;
+}
+.error {
+  margin-top: 8px;
+  color: var(--mall-red);
+  font-size: 12px;
+}
+@media (max-width: 760px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/mall/pages/user/coupons.vue b/apps/mall/pages/user/coupons.vue
new file mode 100644
index 0000000..83d746b
--- /dev/null
+++ b/apps/mall/pages/user/coupons.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { t as pick } from "@vmall/shared";
+import { MOCK_COUPONS } from "~/mock/data";
+
+definePageMeta({ middleware: "auth" });
+
+const { locale, t } = useI18n();
+</script>
+
+<template>
+  <section class="mpanel coupons-panel">
+    <h1 class="mpanel-title">{{ t("user.couponsTitle") }}</h1>
+    <UiEmptyState v-if="MOCK_COUPONS.length === 0" :text="t('user.noCoupons')" />
+    <table v-else class="mtable">
+      <thead>
+        <tr>
+          <th>{{ t("user.couponTitle") }}</th>
+          <th>{{ t("user.amount") }}</th>
+          <th>{{ t("user.threshold") }}</th>
+          <th>{{ t("user.expiresAt") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="coupon in MOCK_COUPONS" :key="coupon.id">
+          <td>{{ pick(coupon.title, locale) }}</td>
+          <td><PriceText :amount-minor="coupon.amountMinor" :currency="coupon.currency" /></td>
+          <td><PriceText :amount-minor="coupon.thresholdMinor" :currency="coupon.currency" /></td>
+          <td>{{ coupon.expiresAt }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+
+<style scoped>
+.coupons-panel {
+  min-height: 560px;
+}
+</style>
diff --git a/apps/mall/pages/user/favorites.vue b/apps/mall/pages/user/favorites.vue
new file mode 100644
index 0000000..4aeb828
--- /dev/null
+++ b/apps/mall/pages/user/favorites.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import type { Product } from "@vmall/shared";
+import { t as pick } from "@vmall/shared";
+import { MOCK_FAVORITES, lowestSku, productById, storeById } from "~/mock/data";
+
+definePageMeta({ middleware: "auth" });
+
+const { locale, t } = useI18n();
+
+const activeTab = ref<"product" | "store">("product");
+const favorites = ref(MOCK_FAVORITES.map((item) => ({ ...item })));
+
+const tabs = computed(() => [
+  { key: "product", label: t("user.favoriteProductsTab") },
+  { key: "store", label: t("user.favoriteStoresTab") },
+]);
+
+const productRows = computed(() =>
+  favorites.value
+    .filter((favorite) => favorite.kind === "product")
+    .map((favorite) => productById(favorite.refId))
+    .filter((product): product is Product => product !== null)
+    .map((product) => {
+      const sku = lowestSku(product);
+      return {
+        product,
+        amountMinor: sku?.price_minor ?? null,
+        currency: sku?.currency ?? null,
+      };
+    }),
+);
+
+const storeRows = computed(() =>
+  favorites.value
+    .filter((favorite) => favorite.kind === "store")
+    .map((favorite) => storeById(favorite.refId))
+    .filter((store): store is NonNullable<ReturnType<typeof storeById>> => store !== null),
+);
+
+function removeProductFavorite(productId: string): void {
+  favorites.value = favorites.value.filter((item) => !(item.kind === "product" && item.refId === productId));
+}
+
+function removeStoreFavorite(storeId: string): void {
+  favorites.value = favorites.value.filter((item) => !(item.kind === "store" && item.refId === storeId));
+}
+
+
+</script>
+
+<template>
+  <section class="mpanel favorites-panel">
+    <h1 class="mpanel-title">{{ t("user.favoritesTitle") }}</h1>
+    <UiTabs v-model="activeTab" :tabs="tabs">
+      <template #default>
+        <div v-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.product.id" class="product-card hover-lift">
+              <NuxtLink :to="`/goods/${item.product.slug}`" class="cover">
+                <img :src="item.product.images[0] || '/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.amountMinor !== null && item.currency" :amount-minor="item.amountMinor" :currency="item.currency" />
+                <button class="mbtn" type="button" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</button>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <div v-else>
+          <UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
+          <div v-else class="store-list">
+            <article v-for="store in storeRows" :key="store.id" class="store-row">
+              <img :src="store.logo" :alt="pick(store.name, locale)" />
+              <div class="store-main">
+                <strong>{{ pick(store.name, locale) }}</strong>
+                <span>{{ store.company }}</span>
+              </div>
+              <div class="store-actions">
+                <NuxtLink class="mbtn" :to="`/stores/${store.slug}`">{{ t("user.enterStore") }}</NuxtLink>
+                <button class="mbtn" type="button" @click="removeStoreFavorite(store.id)">{{ t("user.removeFavorite") }}</button>
+              </div>
+            </article>
+          </div>
+        </div>
+      </template>
+    </UiTabs>
+  </section>
+</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 {
+  width: 56px;
+  height: 56px;
+  border: 1px solid var(--mall-line);
+  border-radius: 4px;
+  object-fit: cover;
+}
+.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>
diff --git a/apps/mall/pages/user/index.vue b/apps/mall/pages/user/index.vue
new file mode 100644
index 0000000..58d0333
--- /dev/null
+++ b/apps/mall/pages/user/index.vue
@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import type { Order, Product } from "@vmall/shared";
+import { t as pick } from "@vmall/shared";
+import { MOCK_FAVORITES, USER_STATS, lowestSku, productById } from "~/mock/data";
+
+definePageMeta({ middleware: "auth" });
+
+const { locale, t } = useI18n();
+const { $api } = useNuxtApp();
+const orders = ref<Order[]>([]);
+const loading = ref(true);
+
+async function loadOrders(): Promise<void> {
+  loading.value = true;
+  try {
+    const result = await $api.listMyOrders();
+    orders.value = result.items;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  void loadOrders();
+});
+
+const counts = computed(() => ({
+  pendingPayment: orders.value.filter((o) => o.status === "pending_payment").length,
+  pendingShipment: orders.value.filter((o) => o.status === "paid").length,
+  pendingReceipt: orders.value.filter((o) => o.status === "shipped").length,
+  completed: orders.value.filter((o) => o.status === "completed").length,
+  afterSale: 0,
+}));
+
+const statusLinks = computed(() => [
+  { key: "pendingPayment", label: t("user.pendingPayment"), count: counts.value.pendingPayment, to: "/user/orders?status=pending_payment" },
+  { key: "pendingShipment", label: t("user.pendingShipment"), count: counts.value.pendingShipment, to: "/user/orders?status=paid" },
+  { key: "pendingReceipt", label: t("user.pendingReceipt"), count: counts.value.pendingReceipt, to: "/user/orders?status=shipped" },
+  { key: "completed", label: t("user.completed"), count: counts.value.completed, to: "/user/orders?status=completed" },
+  { key: "afterSale", label: t("user.afterSale"), count: counts.value.afterSale, to: "/user/orders?status=after-sale" },
+]);
+
+const favoriteProducts = computed(() =>
+  MOCK_FAVORITES.filter((favorite) => favorite.kind === "product")
+    .map((favorite) => productById(favorite.refId))
+    .filter((product): product is Product => product !== null)
+    .map((product) => {
+      const sku = lowestSku(product);
+      return {
+        product,
+        amountMinor: sku?.price_minor ?? null,
+        currency: sku?.currency ?? null,
+      };
+    }),
+);
+</script>
+
+<template>
+  <div>
+    <section class="mpanel welcome-panel">
+      <h1 class="mpanel-title">{{ t("user.dashboard") }}</h1>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <span>{{ t("user.statsBalance") }}</span>
+          <strong><PriceText :amount-minor="USER_STATS.balanceMinor" currency="USD" /></strong>
+        </div>
+        <div class="stat-card">
+          <span>{{ t("user.statsPoints") }}</span>
+          <strong>{{ USER_STATS.points }}</strong>
+        </div>
+        <div class="stat-card">
+          <span>{{ t("user.statsFrozen") }}</span>
+          <strong><PriceText :amount-minor="USER_STATS.frozenMinor" currency="USD" /></strong>
+        </div>
+      </div>
+      <div class="status-links">
+        <NuxtLink v-for="item in statusLinks" :key="item.key" :to="item.to" class="status-link">
+          <span>{{ item.label }}</span>
+          <b>{{ item.count }}</b>
+        </NuxtLink>
+      </div>
+    </section>
+
+    <section class="mpanel">
+      <h2 class="mpanel-title">
+        {{ t("user.recentOrders") }}
+        <NuxtLink class="more" to="/user/orders">{{ t("user.viewAll") }} ›</NuxtLink>
+      </h2>
+      <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+      <UiEmptyState v-else-if="orders.length === 0" :text="t('user.noOrders')" />
+      <div v-else class="recent-orders">
+        <article v-for="order in orders.slice(0, 3)" :key="order.id" class="recent-order">
+          <header>
+            <span>{{ t("user.orderNo") }} {{ order.order_no }}</span>
+            <StatusBadge :status="order.status" kind="order" />
+          </header>
+          <div class="order-body">
+            <div class="item-previews">
+              <img v-for="item in order.items" :key="item.id" :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" />
+            </div>
+            <div class="order-date">{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</div>
+            <div class="order-total">
+              <span>{{ t("user.orderTotal") }}</span>
+              <PriceText :amount-minor="order.total_minor" :currency="order.currency" />
+            </div>
+            <NuxtLink class="mbtn" :to="`/user/orders/${order.id}`">{{ t("user.viewDetails") }}</NuxtLink>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section class="mpanel">
+      <h2 class="mpanel-title">{{ t("user.favoriteProducts") }}</h2>
+      <UiEmptyState v-if="favoriteProducts.length === 0" :text="t('user.noFavorites')" />
+      <div v-else class="favorite-grid">
+        <NuxtLink v-for="item in favoriteProducts" :key="item.product.id" :to="`/goods/${item.product.slug}`" class="favorite-card hover-lift">
+          <img :src="item.product.images[0] || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
+          <span>{{ pick(item.product.name, locale) }}</span>
+          <PriceText v-if="item.amountMinor !== null && item.currency" :amount-minor="item.amountMinor" :currency="item.currency" />
+        </NuxtLink>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.welcome-panel {
+  padding-bottom: 0;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.stat-card {
+  padding: 18px;
+  border: 1px solid var(--mall-line);
+  background: #fffafa;
+}
+.stat-card span {
+  display: block;
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.stat-card strong {
+  display: block;
+  margin-top: 10px;
+  color: var(--mall-red);
+  font-size: 20px;
+}
+.status-links {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  border-top: 1px solid var(--mall-line);
+}
+.status-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 8px;
+  color: var(--mall-muted);
+  font-size: 12px;
+  text-decoration: none;
+}
+.status-link + .status-link {
+  border-left: 1px solid var(--mall-line);
+}
+.status-link b {
+  color: var(--mall-red);
+  font-size: 18px;
+  font-weight: 600;
+}
+.muted {
+  color: var(--mall-faint);
+  padding: 20px 0;
+}
+.recent-order {
+  border: 1px solid var(--mall-line);
+  margin-bottom: 12px;
+}
+.recent-order:last-child {
+  margin-bottom: 0;
+}
+.recent-order header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  background: #fafafa;
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.order-body {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+}
+.item-previews {
+  display: flex;
+  gap: 5px;
+  min-width: 140px;
+}
+.item-previews img {
+  width: 44px;
+  height: 44px;
+  object-fit: contain;
+  border: 1px solid var(--mall-line);
+}
+.order-date {
+  flex: 1;
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.order-total {
+  text-align: right;
+  font-size: 12px;
+}
+.order-total span {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--mall-faint);
+}
+.order-total :deep(.price) {
+  color: var(--mall-red);
+  font-weight: 600;
+}
+.favorite-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+.favorite-card {
+  display: block;
+  padding: 10px;
+  border: 1px solid var(--mall-line);
+  color: var(--mall-ink);
+  text-decoration: none;
+}
+.favorite-card img {
+  display: block;
+  width: 100%;
+  height: 120px;
+  object-fit: contain;
+  margin-bottom: 8px;
+}
+.favorite-card span {
+  display: block;
+  height: 34px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 17px;
+}
+.favorite-card :deep(.price) {
+  display: block;
+  margin-top: 8px;
+  color: var(--mall-red);
+  font-size: 14px;
+  font-weight: 600;
+}
+@media (max-width: 760px) {
+  .status-links {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .order-body {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  .order-date {
+    flex: 0 0 calc(100% - 156px);
+  }
+  .favorite-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/apps/mall/pages/user/invoices.vue b/apps/mall/pages/user/invoices.vue
new file mode 100644
index 0000000..8dc9320
--- /dev/null
+++ b/apps/mall/pages/user/invoices.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { Invoice } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { t } = useI18n();
+const { $api } = useNuxtApp();
+
+const rows = ref<Invoice[]>([]);
+const loading = ref(true);
+
+async function load(): Promise<void> {
+  loading.value = true;
+  try {
+    rows.value = await $api.listMyInvoices();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  void load();
+});
+</script>
+
+<template>
+  <section class="mpanel invoices-panel">
+    <h1 class="mpanel-title">{{ t("user.invoicesTitle") }}</h1>
+    <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+    <UiEmptyState v-else-if="rows.length === 0" :text="t('user.noInvoices')" />
+    <table v-else class="mtable">
+      <thead>
+        <tr>
+          <th>{{ t("user.invoiceNo") }}</th>
+          <th>{{ t("user.invoiceOrderNo") }}</th>
+          <th>{{ t("user.invoiceTitle") }}</th>
+          <th>{{ t("user.invoiceKind") }}</th>
+          <th>{{ t("user.amount") }}</th>
+          <th>{{ t("common.status") }}</th>
+          <th>{{ t("user.invoiceIssuedAt") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="invoice in rows" :key="invoice.id">
+          <td>{{ invoice.invoice_no }}</td>
+          <td>{{ invoice.order_no || t("mall.notAvailable") }}</td>
+          <td>{{ invoice.title }}</td>
+          <td>{{ invoice.kind === "personal" ? t("user.personal") : t("user.company") }}</td>
+          <td><PriceText :amount-minor="invoice.amount_minor" :currency="invoice.currency" /></td>
+          <td><StatusBadge :status="invoice.status" kind="invoice" /></td>
+          <td>{{ invoice.issued_at ? invoice.issued_at.slice(0, 10) : t("mall.notAvailable") }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+
+<style scoped>
+.invoices-panel {
+  min-height: 560px;
+}
+.muted {
+  color: var(--mall-faint);
+  padding: 20px 0;
+}
+</style>
diff --git a/apps/mall/pages/user/orders/[id].vue b/apps/mall/pages/user/orders/[id].vue
new file mode 100644
index 0000000..2a9b9b6
--- /dev/null
+++ b/apps/mall/pages/user/orders/[id].vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import type { InvoiceKind, Order, Shipment } from "@vmall/shared";
+import { t as pick } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { locale, t } = useI18n();
+const { $api } = useNuxtApp();
+const route = useRoute();
+
+const order = ref<Order | null>(null);
+const shipments = ref<Shipment[]>([]);
+const loading = ref(true);
+const confirmingShipmentId = ref("");
+const invoiceWorking = ref(false);
+const invoiceSuccess = ref(false);
+const invoiceErrorKey = ref("");
+
+const invoiceTitle = ref("");
+const invoiceTaxNo = ref("");
+const invoiceKind = ref<InvoiceKind>("personal");
+
+const orderId = computed(() => String(route.params.id ?? ""));
+
+const orderShipments = computed(() => shipments.value.filter((shipment) => shipment.order_id === order.value?.id));
+
+async function load(): Promise<void> {
+  loading.value = true;
+  try {
+    const [o, allShipments] = await Promise.all([$api.getOrder(orderId.value), $api.listMyShipments()]);
+    order.value = o;
+    shipments.value = allShipments;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function confirmDelivery(shipment: Shipment): Promise<void> {
+  confirmingShipmentId.value = shipment.id;
+  try {
+    await $api.confirmDelivered(shipment.id);
+    await load();
+  } finally {
+    confirmingShipmentId.value = "";
+  }
+}
+
+async function submitInvoice(): Promise<void> {
+  invoiceErrorKey.value = "";
+  if (!order.value || !invoiceTitle.value.trim()) {
+    invoiceErrorKey.value = "user.validationRequired";
+    return;
+  }
+  invoiceWorking.value = true;
+  try {
+    await $api.requestInvoice(
+      order.value.id,
+      invoiceTitle.value.trim(),
+      invoiceTaxNo.value.trim() || null,
+      invoiceKind.value,
+    );
+    invoiceSuccess.value = true;
+  } catch {
+    invoiceErrorKey.value = "user.loadFailed";
+  } finally {
+    invoiceWorking.value = false;
+  }
+}
+
+onMounted(() => {
+  void load();
+});
+</script>
+
+<template>
+  <section class="mpanel order-detail-panel">
+    <h1 class="mpanel-title">{{ t("user.orderDetail") }}</h1>
+    <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+    <UiEmptyState v-else-if="!order" :text="t('user.noOrders')" />
+    <div v-else>
+      <header class="summary">
+        <div>
+          <strong>{{ t("user.orderNo") }} {{ order.order_no }}</strong>
+          <p>{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</p>
+        </div>
+        <StatusBadge :status="order.status" kind="order" />
+      </header>
+
+      <article class="mpanel block">
+        <h2 class="block-title">{{ t("user.shippingAddress") }}</h2>
+        <p>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</p>
+        <p>
+          {{ order.shipping_address.country }} {{ order.shipping_address.region }} {{ order.shipping_address.city }}
+          {{ order.shipping_address.line1 }} {{ order.shipping_address.postal_code }}
+        </p>
+      </article>
+
+      <article class="mpanel block">
+        <h2 class="block-title">{{ t("user.orderItems") }}</h2>
+        <table class="mtable">
+          <thead>
+            <tr>
+              <th>{{ t("user.product") }}</th>
+              <th>{{ t("common.price") }}</th>
+              <th>{{ t("common.qty") }}</th>
+              <th>{{ t("common.total") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in order.items" :key="item.id">
+              <td class="prod-col">
+                <img :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" />
+                <span>{{ pick(item.product_name, locale) }}</span>
+              </td>
+              <td><PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" /></td>
+              <td>{{ item.qty }}</td>
+              <td><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" /></td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="order-total">{{ t("user.total") }}: <PriceText :amount-minor="order.total_minor" :currency="order.currency" /></p>
+      </article>
+
+      <article class="mpanel block">
+        <h2 class="block-title">{{ t("user.shipments") }}</h2>
+        <UiEmptyState v-if="orderShipments.length === 0" :text="t('user.noShipments')" />
+        <div v-else>
+          <div v-for="shipment in orderShipments" :key="shipment.id" class="shipment-row">
+            <div>
+              <strong>{{ t("user.shipmentNo") }} {{ shipment.shipment_no }}</strong>
+              <p>{{ t("user.carrier") }}: {{ shipment.carrier }}</p>
+              <p>{{ t("user.trackingNo") }}: {{ shipment.tracking_no }}</p>
+            </div>
+            <div class="shipment-right">
+              <StatusBadge :status="shipment.status" kind="shipment" />
+              <button
+                v-if="shipment.status === 'shipped'"
+                class="mbtn red"
+                type="button"
+                :disabled="confirmingShipmentId === shipment.id"
+                @click="confirmDelivery(shipment)"
+              >
+                {{ t("user.confirmDelivery") }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </article>
+
+      <article class="mpanel block">
+        <h2 class="block-title">{{ t("user.invoiceRequest") }}</h2>
+        <div v-if="invoiceSuccess" class="invoice-success">{{ t("user.invoiceSuccess") }}</div>
+        <form v-else class="invoice-form" @submit.prevent="submitInvoice">
+          <label>
+            <span>{{ t("user.invoiceTitle") }}</span>
+            <input v-model.trim="invoiceTitle" class="minput" type="text" />
+          </label>
+          <label>
+            <span>{{ t("user.taxNo") }}</span>
+            <input v-model.trim="invoiceTaxNo" class="minput" type="text" />
+          </label>
+          <fieldset>
+            <legend>{{ t("user.invoiceKind") }}</legend>
+            <label><input v-model="invoiceKind" type="radio" value="personal" /> {{ t("user.personal") }}</label>
+            <label><input v-model="invoiceKind" type="radio" value="company" /> {{ t("user.company") }}</label>
+          </fieldset>
+          <p v-if="invoiceErrorKey" class="error">{{ t(invoiceErrorKey) }}</p>
+          <button class="mbtn red" type="submit" :disabled="invoiceWorking">{{ t("user.submitInvoice") }}</button>
+        </form>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.order-detail-panel {
+  min-height: 560px;
+}
+.muted {
+  color: var(--mall-faint);
+  padding: 20px 0;
+}
+.summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px;
+  border: 1px solid var(--mall-line);
+  background: #fafafa;
+}
+.summary strong {
+  color: var(--mall-ink);
+  font-size: 15px;
+}
+.summary p {
+  margin: 4px 0 0;
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.block {
+  margin-top: 16px;
+  margin-bottom: 0;
+  border: 1px solid var(--mall-line);
+}
+.block-title {
+  margin: 0 0 14px;
+  color: var(--mall-ink);
+  font-size: 15px;
+}
+.prod-col {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.prod-col img {
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--mall-line);
+  object-fit: contain;
+}
+.order-total {
+  margin: 16px 0 0;
+  text-align: right;
+  font-size: 13px;
+  color: var(--mall-muted);
+}
+.order-total :deep(.price) {
+  color: var(--mall-red);
+  font-size: 18px;
+  font-weight: 600;
+}
+.shipment-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid var(--mall-line);
+  margin-bottom: 10px;
+}
+.shipment-row:last-child {
+  margin-bottom: 0;
+}
+.shipment-row p {
+  margin: 5px 0 0;
+  font-size: 12px;
+  color: var(--mall-muted);
+}
+.shipment-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.invoice-form {
+  display: grid;
+  gap: 12px;
+  max-width: 520px;
+}
+.invoice-form label > span,
+.invoice-form legend {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.invoice-form fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.invoice-form fieldset label {
+  font-size: 13px;
+  color: var(--mall-ink);
+}
+.error {
+  margin: 0;
+  color: var(--mall-red);
+  font-size: 12px;
+}
+.invoice-success {
+  color: var(--mall-green);
+  font-size: 14px;
+}
+@media (max-width: 760px) {
+  .summary,
+  .shipment-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>
diff --git a/apps/mall/pages/user/orders/index.vue b/apps/mall/pages/user/orders/index.vue
new file mode 100644
index 0000000..9b47c24
--- /dev/null
+++ b/apps/mall/pages/user/orders/index.vue
@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import type { Order, OrderStatus } from "@vmall/shared";
+import { t as pick } from "@vmall/shared";
+import { storeById } from "~/mock/data";
+
+definePageMeta({ middleware: "auth" });
+
+const { locale, t } = useI18n();
+const { $api } = useNuxtApp();
+const route = useRoute();
+
+const activeFilter = ref("all");
+const orders = ref<Order[]>([]);
+const page = ref(1);
+const total = ref(0);
+const perPage = ref(10);
+const loading = ref(true);
+const workingId = ref("");
+
+const filterStatuses: Record<string, OrderStatus[]> = {
+  all: [],
+  pending_payment: ["pending_payment"],
+  pending_shipment: ["paid", "fulfilling"],
+  pending_receipt: ["shipped"],
+  completed: ["completed"],
+  cancelled: ["cancelled"],
+};
+
+const tabs = computed(() => [
+  { key: "all", label: t("user.filterAll") },
+  { key: "pending_payment", label: t("user.filterPendingPayment") },
+  { key: "pending_shipment", label: t("user.filterPendingShipment") },
+  { key: "pending_receipt", label: t("user.filterPendingReceipt") },
+  { key: "completed", label: t("user.filterCompleted") },
+  { key: "cancelled", label: t("user.filterCancelled") },
+]);
+
+const filteredOrders = computed(() => {
+  const statuses = filterStatuses[activeFilter.value] ?? [];
+  return statuses.length === 0 ? orders.value : orders.value.filter((order) => statuses.includes(order.status));
+});
+
+function setInitialFilter(): void {
+  const queryStatus = String(route.query.status ?? "");
+  const mapped = queryStatus === "paid" || queryStatus === "fulfilling"
+    ? "pending_shipment"
+    : queryStatus === "shipped"
+      ? "pending_receipt"
+      : queryStatus === "pending_payment" || queryStatus === "completed" || queryStatus === "cancelled"
+        ? queryStatus
+        : "all";
+  activeFilter.value = mapped;
+}
+
+async function loadOrders(nextPage = page.value): Promise<void> {
+  loading.value = true;
+  try {
+    const result = await $api.listMyOrders(nextPage);
+    orders.value = result.items;
+    page.value = result.page;
+    total.value = result.total;
+    perPage.value = result.per_page;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function pay(order: Order): Promise<void> {
+  workingId.value = order.id;
+  try {
+    await $api.payOrder(order.id);
+    await loadOrders();
+  } finally {
+    workingId.value = "";
+  }
+}
+
+async function cancel(order: Order): Promise<void> {
+  workingId.value = order.id;
+  try {
+    await $api.cancelOrder(order.id);
+    await loadOrders();
+  } finally {
+    workingId.value = "";
+  }
+}
+
+function changeFilter(key: string): void {
+  activeFilter.value = key;
+}
+
+function shopName(shopId: string): string {
+  const store = storeById(shopId);
+  return store ? pick(store.name, locale.value) : t("user.shop");
+}
+
+onMounted(() => {
+  setInitialFilter();
+  void loadOrders();
+});
+</script>
+
+<template>
+  <section class="mpanel orders-panel">
+    <h1 class="mpanel-title">{{ t("user.ordersTitle") }}</h1>
+    <UiTabs :model-value="activeFilter" :tabs="tabs" @update:model-value="changeFilter">
+      <template #default>
+        <div v-if="loading" class="muted">{{ t("common.loading") }}</div>
+        <UiEmptyState v-else-if="filteredOrders.length === 0" :text="t('user.noOrders')" />
+        <div v-else class="order-list">
+          <article v-for="order in filteredOrders" :key="order.id" class="order-card">
+            <header class="order-header">
+              <div>
+                <strong>{{ shopName(order.shop_id) }}</strong>
+                <span>{{ t("user.orderNo") }} {{ order.order_no }}</span>
+                <span>{{ t("user.createdAt") }} {{ order.created_at.slice(0, 10) }}</span>
+              </div>
+              <StatusBadge :status="order.status" kind="order" />
+            </header>
+            <div class="order-items">
+              <div v-for="item in order.items" :key="item.id" class="order-item">
+                <img :src="item.image || '/mock/product-1.svg'" :alt="pick(item.product_name, locale)" />
+                <div class="item-name">
+                  <span>{{ pick(item.product_name, locale) }}</span>
+                  <small>{{ item.sku_code }} × {{ item.qty }}</small>
+                </div>
+                <PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" />
+              </div>
+            </div>
+            <footer class="order-footer">
+              <span>{{ t("user.orderTotal") }} <strong><PriceText :amount-minor="order.total_minor" :currency="order.currency" /></strong></span>
+              <div class="actions">
+                <button v-if="order.status === 'pending_payment'" class="mbtn red" type="button" :disabled="workingId === order.id" @click="pay(order)">{{ t("user.payNow") }}</button>
+                <button v-if="order.status === 'pending_payment'" class="mbtn" type="button" :disabled="workingId === order.id" @click="cancel(order)">{{ t("user.cancelOrder") }}</button>
+                <NuxtLink class="mbtn" :to="`/user/orders/${order.id}`">{{ t("user.viewDetails") }}</NuxtLink>
+              </div>
+            </footer>
+          </article>
+        </div>
+        <UiPagination :page="page" :total="total" :per-page="perPage" @change="loadOrders" />
+      </template>
+    </UiTabs>
+  </section>
+</template>
+
+<style scoped>
+.orders-panel {
+  min-height: 560px;
+}
+.muted {
+  padding: 30px 0;
+  color: var(--mall-faint);
+}
+.order-card {
+  margin-bottom: 14px;
+  border: 1px solid var(--mall-line);
+}
+.order-card:last-child {
+  margin-bottom: 0;
+}
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  background: #fafafa;
+  border-bottom: 1px solid var(--mall-line);
+}
+.order-header > div {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+  color: var(--mall-faint);
+  font-size: 12px;
+}
+.order-header strong {
+  color: var(--mall-ink);
+  font-size: 13px;
+  font-weight: 600;
+}
+.order-items {
+  padding: 4px 14px;
+}
+.order-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+}
+.order-item + .order-item {
+  border-top: 1px solid var(--mall-line);
+}
+.order-item img {
+  width: 54px;
+  height: 54px;
+  border: 1px solid var(--mall-line);
+  object-fit: contain;
+}
+.item-name {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+  font-size: 13px;
+}
+.item-name span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.item-name small {
+  color: var(--mall-faint);
+  font-size: 11px;
+}
+.order-item :deep(.price) {
+  color: var(--mall-muted);
+  font-size: 13px;
+}
+.order-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-top: 1px solid var(--mall-line);
+  color: var(--mall-muted);
+  font-size: 12px;
+}
+.order-footer strong :deep(.price) {
+  color: var(--mall-red);
+  font-size: 16px;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+}
+.actions .mbtn {
+  padding: 5px 11px;
+}
+@media (max-width: 760px) {
+  .order-header > div {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 3px;
+  }
+  .order-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/apps/mall/plugins/api.ts b/apps/mall/plugins/api.ts
index 1678a49..85a5c19 100644
--- a/apps/mall/plugins/api.ts
+++ b/apps/mall/plugins/api.ts
@@ -1,10 +1,16 @@
 import { createApi } from "@vmall/shared";
+import { createMockApi } from "~/mock/api";
 
 export default defineNuxtPlugin(() => {
   const config = useRuntimeConfig();
-  const api = createApi({
-    baseUrl: config.public.apiBase as string,
-    getToken: () => (import.meta.client ? localStorage.getItem("vmall.token") : null),
-  });
+  // Mock-first MVP: default to the fixed-data adapter; set NUXT_PUBLIC_MOCK_API=false
+  // (or runtimeConfig.public.mockApi) to talk to the live backend again.
+  const useMock = (config.public.mockApi as boolean | undefined) !== false;
+  const api = useMock
+    ? createMockApi()
+    : createApi({
+        baseUrl: config.public.apiBase as string,
+        getToken: () => (import.meta.client ? localStorage.getItem("vmall.token") : null),
+      });
   return { provide: { api } };
 });
diff --git a/apps/mall/public/mock/avatar.svg b/apps/mall/public/mock/avatar.svg
new file mode 100644
index 0000000..df977b4
--- /dev/null
+++ b/apps/mall/public/mock/avatar.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#909399"/><stop offset="1" stop-color="#c0c4cc"/>
+  </linearGradient></defs>
+  <rect width="120" height="120" fill="url(#g)"/>
+  <text x="60" y="60" font-family="system-ui,sans-serif" font-size="15" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">U</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/banner-1.svg b/apps/mall/public/mock/banner-1.svg
new file mode 100644
index 0000000..c01f6d8
--- /dev/null
+++ b/apps/mall/public/mock/banner-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="450" viewBox="0 0 1200 450">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ca151e"/><stop offset="1" stop-color="#f0643a"/>
+  </linearGradient></defs>
+  <rect width="1200" height="450" fill="url(#g)"/>
+  <text x="600" y="225" font-family="system-ui,sans-serif" font-size="48" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Banner 1</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/banner-2.svg b/apps/mall/public/mock/banner-2.svg
new file mode 100644
index 0000000..ed84c9d
--- /dev/null
+++ b/apps/mall/public/mock/banner-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="450" viewBox="0 0 1200 450">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#333333"/><stop offset="1" stop-color="#666666"/>
+  </linearGradient></defs>
+  <rect width="1200" height="450" fill="url(#g)"/>
+  <text x="600" y="225" font-family="system-ui,sans-serif" font-size="48" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Banner 2</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/banner-3.svg b/apps/mall/public/mock/banner-3.svg
new file mode 100644
index 0000000..1b0fcf7
--- /dev/null
+++ b/apps/mall/public/mock/banner-3.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="450" viewBox="0 0 1200 450">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#1a5fb4"/><stop offset="1" stop-color="#3b82c4"/>
+  </linearGradient></defs>
+  <rect width="1200" height="450" fill="url(#g)"/>
+  <text x="600" y="225" font-family="system-ui,sans-serif" font-size="48" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Banner 3</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/collective-banner.svg b/apps/mall/public/mock/collective-banner.svg
new file mode 100644
index 0000000..49768b6
--- /dev/null
+++ b/apps/mall/public/mock/collective-banner.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="350" viewBox="0 0 1200 350">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ad1457"/><stop offset="1" stop-color="#f06292"/>
+  </linearGradient></defs>
+  <rect width="1200" height="350" fill="url(#g)"/>
+  <text x="600" y="175" font-family="system-ui,sans-serif" font-size="40" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Group Buy</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/floor-adv-1.svg b/apps/mall/public/mock/floor-adv-1.svg
new file mode 100644
index 0000000..bc55bcc
--- /dev/null
+++ b/apps/mall/public/mock/floor-adv-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="234" height="614" viewBox="0 0 234 614">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#1a5fb4"/><stop offset="1" stop-color="#3b82c4"/>
+  </linearGradient></defs>
+  <rect width="234" height="614" fill="url(#g)"/>
+  <text x="117" y="307" font-family="system-ui,sans-serif" font-size="29" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Floor 1</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/floor-adv-2.svg b/apps/mall/public/mock/floor-adv-2.svg
new file mode 100644
index 0000000..76ae7ba
--- /dev/null
+++ b/apps/mall/public/mock/floor-adv-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="234" height="614" viewBox="0 0 234 614">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#2e7d32"/><stop offset="1" stop-color="#66bb6a"/>
+  </linearGradient></defs>
+  <rect width="234" height="614" fill="url(#g)"/>
+  <text x="117" y="307" font-family="system-ui,sans-serif" font-size="29" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Floor 2</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/floor-adv-3.svg b/apps/mall/public/mock/floor-adv-3.svg
new file mode 100644
index 0000000..baca5e0
--- /dev/null
+++ b/apps/mall/public/mock/floor-adv-3.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="234" height="614" viewBox="0 0 234 614">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#6a1b9a"/><stop offset="1" stop-color="#ab47bc"/>
+  </linearGradient></defs>
+  <rect width="234" height="614" fill="url(#g)"/>
+  <text x="117" y="307" font-family="system-ui,sans-serif" font-size="29" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Floor 3</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/floor-adv-4.svg b/apps/mall/public/mock/floor-adv-4.svg
new file mode 100644
index 0000000..7b21ad7
--- /dev/null
+++ b/apps/mall/public/mock/floor-adv-4.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="234" height="614" viewBox="0 0 234 614">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#c77800"/><stop offset="1" stop-color="#ffb300"/>
+  </linearGradient></defs>
+  <rect width="234" height="614" fill="url(#g)"/>
+  <text x="117" y="307" font-family="system-ui,sans-serif" font-size="29" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Floor 4</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/floor-adv-5.svg b/apps/mall/public/mock/floor-adv-5.svg
new file mode 100644
index 0000000..4e0baae
--- /dev/null
+++ b/apps/mall/public/mock/floor-adv-5.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="234" height="614" viewBox="0 0 234 614">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#00838f"/><stop offset="1" stop-color="#26c6da"/>
+  </linearGradient></defs>
+  <rect width="234" height="614" fill="url(#g)"/>
+  <text x="117" y="307" font-family="system-ui,sans-serif" font-size="29" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Floor 5</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/floor-adv-6.svg b/apps/mall/public/mock/floor-adv-6.svg
new file mode 100644
index 0000000..b4bcaeb
--- /dev/null
+++ b/apps/mall/public/mock/floor-adv-6.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="234" height="614" viewBox="0 0 234 614">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ad1457"/><stop offset="1" stop-color="#ec407a"/>
+  </linearGradient></defs>
+  <rect width="234" height="614" fill="url(#g)"/>
+  <text x="117" y="307" font-family="system-ui,sans-serif" font-size="29" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Floor 6</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/integral-banner.svg b/apps/mall/public/mock/integral-banner.svg
new file mode 100644
index 0000000..e95d314
--- /dev/null
+++ b/apps/mall/public/mock/integral-banner.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="350" viewBox="0 0 1200 350">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#c77800"/><stop offset="1" stop-color="#ffca28"/>
+  </linearGradient></defs>
+  <rect width="1200" height="350" fill="url(#g)"/>
+  <text x="600" y="175" font-family="system-ui,sans-serif" font-size="40" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Points Mall</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/login-bg.svg b/apps/mall/public/mock/login-bg.svg
new file mode 100644
index 0000000..ded7e9a
--- /dev/null
+++ b/apps/mall/public/mock/login-bg.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="600" viewBox="0 0 1920 600">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#2b2b2b"/><stop offset="1" stop-color="#ca151e"/>
+  </linearGradient></defs>
+  <rect width="1920" height="600" fill="url(#g)"/>
+  <text x="960" y="300" font-family="system-ui,sans-serif" font-size="64" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">VMall</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-1.svg b/apps/mall/public/mock/product-1.svg
new file mode 100644
index 0000000..08bd89f
--- /dev/null
+++ b/apps/mall/public/mock/product-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#333333"/><stop offset="1" stop-color="#666666"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P1</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-10.svg b/apps/mall/public/mock/product-10.svg
new file mode 100644
index 0000000..0bec15b
--- /dev/null
+++ b/apps/mall/public/mock/product-10.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#1a5fb4"/><stop offset="1" stop-color="#3b82c4"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P10</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-11.svg b/apps/mall/public/mock/product-11.svg
new file mode 100644
index 0000000..b4221bb
--- /dev/null
+++ b/apps/mall/public/mock/product-11.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#2e7d32"/><stop offset="1" stop-color="#66bb6a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P11</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-12.svg b/apps/mall/public/mock/product-12.svg
new file mode 100644
index 0000000..5b17fc6
--- /dev/null
+++ b/apps/mall/public/mock/product-12.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#6a1b9a"/><stop offset="1" stop-color="#ab47bc"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P12</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-13.svg b/apps/mall/public/mock/product-13.svg
new file mode 100644
index 0000000..3b5ef53
--- /dev/null
+++ b/apps/mall/public/mock/product-13.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#c77800"/><stop offset="1" stop-color="#ffb300"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P13</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-14.svg b/apps/mall/public/mock/product-14.svg
new file mode 100644
index 0000000..60b259b
--- /dev/null
+++ b/apps/mall/public/mock/product-14.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#00838f"/><stop offset="1" stop-color="#26c6da"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P14</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-15.svg b/apps/mall/public/mock/product-15.svg
new file mode 100644
index 0000000..3922d0e
--- /dev/null
+++ b/apps/mall/public/mock/product-15.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ad1457"/><stop offset="1" stop-color="#ec407a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P15</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-16.svg b/apps/mall/public/mock/product-16.svg
new file mode 100644
index 0000000..44d3c80
--- /dev/null
+++ b/apps/mall/public/mock/product-16.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ca151e"/><stop offset="1" stop-color="#f0643a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P16</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-17.svg b/apps/mall/public/mock/product-17.svg
new file mode 100644
index 0000000..31b4d72
--- /dev/null
+++ b/apps/mall/public/mock/product-17.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#333333"/><stop offset="1" stop-color="#666666"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P17</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-18.svg b/apps/mall/public/mock/product-18.svg
new file mode 100644
index 0000000..cef8fb6
--- /dev/null
+++ b/apps/mall/public/mock/product-18.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#1a5fb4"/><stop offset="1" stop-color="#3b82c4"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P18</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-19.svg b/apps/mall/public/mock/product-19.svg
new file mode 100644
index 0000000..0e2b41d
--- /dev/null
+++ b/apps/mall/public/mock/product-19.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#2e7d32"/><stop offset="1" stop-color="#66bb6a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P19</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-2.svg b/apps/mall/public/mock/product-2.svg
new file mode 100644
index 0000000..ff3442a
--- /dev/null
+++ b/apps/mall/public/mock/product-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#1a5fb4"/><stop offset="1" stop-color="#3b82c4"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P2</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-20.svg b/apps/mall/public/mock/product-20.svg
new file mode 100644
index 0000000..3efdf66
--- /dev/null
+++ b/apps/mall/public/mock/product-20.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#6a1b9a"/><stop offset="1" stop-color="#ab47bc"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P20</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-21.svg b/apps/mall/public/mock/product-21.svg
new file mode 100644
index 0000000..d59ea65
--- /dev/null
+++ b/apps/mall/public/mock/product-21.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#c77800"/><stop offset="1" stop-color="#ffb300"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P21</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-22.svg b/apps/mall/public/mock/product-22.svg
new file mode 100644
index 0000000..7816214
--- /dev/null
+++ b/apps/mall/public/mock/product-22.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#00838f"/><stop offset="1" stop-color="#26c6da"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P22</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-23.svg b/apps/mall/public/mock/product-23.svg
new file mode 100644
index 0000000..a4b9b22
--- /dev/null
+++ b/apps/mall/public/mock/product-23.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ad1457"/><stop offset="1" stop-color="#ec407a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P23</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-24.svg b/apps/mall/public/mock/product-24.svg
new file mode 100644
index 0000000..e413e33
--- /dev/null
+++ b/apps/mall/public/mock/product-24.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ca151e"/><stop offset="1" stop-color="#f0643a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P24</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-3.svg b/apps/mall/public/mock/product-3.svg
new file mode 100644
index 0000000..e5e7b82
--- /dev/null
+++ b/apps/mall/public/mock/product-3.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#2e7d32"/><stop offset="1" stop-color="#66bb6a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P3</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-4.svg b/apps/mall/public/mock/product-4.svg
new file mode 100644
index 0000000..3584aab
--- /dev/null
+++ b/apps/mall/public/mock/product-4.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#6a1b9a"/><stop offset="1" stop-color="#ab47bc"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P4</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-5.svg b/apps/mall/public/mock/product-5.svg
new file mode 100644
index 0000000..2fabcd7
--- /dev/null
+++ b/apps/mall/public/mock/product-5.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#c77800"/><stop offset="1" stop-color="#ffb300"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P5</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-6.svg b/apps/mall/public/mock/product-6.svg
new file mode 100644
index 0000000..2f04119
--- /dev/null
+++ b/apps/mall/public/mock/product-6.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#00838f"/><stop offset="1" stop-color="#26c6da"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P6</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-7.svg b/apps/mall/public/mock/product-7.svg
new file mode 100644
index 0000000..e77edcb
--- /dev/null
+++ b/apps/mall/public/mock/product-7.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ad1457"/><stop offset="1" stop-color="#ec407a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P7</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-8.svg b/apps/mall/public/mock/product-8.svg
new file mode 100644
index 0000000..fc05cd1
--- /dev/null
+++ b/apps/mall/public/mock/product-8.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ca151e"/><stop offset="1" stop-color="#f0643a"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P8</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/product-9.svg b/apps/mall/public/mock/product-9.svg
new file mode 100644
index 0000000..4c5810f
--- /dev/null
+++ b/apps/mall/public/mock/product-9.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#333333"/><stop offset="1" stop-color="#666666"/>
+  </linearGradient></defs>
+  <rect width="400" height="400" fill="url(#g)"/>
+  <text x="200" y="200" font-family="system-ui,sans-serif" font-size="50" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">P9</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/promo-1.svg b/apps/mall/public/mock/promo-1.svg
new file mode 100644
index 0000000..b859607
--- /dev/null
+++ b/apps/mall/public/mock/promo-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="312" height="160" viewBox="0 0 312 160">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#2e7d32"/><stop offset="1" stop-color="#66bb6a"/>
+  </linearGradient></defs>
+  <rect width="312" height="160" fill="url(#g)"/>
+  <text x="156" y="80" font-family="system-ui,sans-serif" font-size="20" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Promo 1</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/promo-2.svg b/apps/mall/public/mock/promo-2.svg
new file mode 100644
index 0000000..bb8835f
--- /dev/null
+++ b/apps/mall/public/mock/promo-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="312" height="160" viewBox="0 0 312 160">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#6a1b9a"/><stop offset="1" stop-color="#ab47bc"/>
+  </linearGradient></defs>
+  <rect width="312" height="160" fill="url(#g)"/>
+  <text x="156" y="80" font-family="system-ui,sans-serif" font-size="20" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Promo 2</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/promo-3.svg b/apps/mall/public/mock/promo-3.svg
new file mode 100644
index 0000000..f94718e
--- /dev/null
+++ b/apps/mall/public/mock/promo-3.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="312" height="160" viewBox="0 0 312 160">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#c77800"/><stop offset="1" stop-color="#ffb300"/>
+  </linearGradient></defs>
+  <rect width="312" height="160" fill="url(#g)"/>
+  <text x="156" y="80" font-family="system-ui,sans-serif" font-size="20" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">Promo 3</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/store-1.svg b/apps/mall/public/mock/store-1.svg
new file mode 100644
index 0000000..3c915ca
--- /dev/null
+++ b/apps/mall/public/mock/store-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#6a1b9a"/><stop offset="1" stop-color="#ab47bc"/>
+  </linearGradient></defs>
+  <rect width="120" height="120" fill="url(#g)"/>
+  <text x="60" y="60" font-family="system-ui,sans-serif" font-size="15" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">S1</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/store-2.svg b/apps/mall/public/mock/store-2.svg
new file mode 100644
index 0000000..054209e
--- /dev/null
+++ b/apps/mall/public/mock/store-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#c77800"/><stop offset="1" stop-color="#ffb300"/>
+  </linearGradient></defs>
+  <rect width="120" height="120" fill="url(#g)"/>
+  <text x="60" y="60" font-family="system-ui,sans-serif" font-size="15" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">S2</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/store-3.svg b/apps/mall/public/mock/store-3.svg
new file mode 100644
index 0000000..7f809a4
--- /dev/null
+++ b/apps/mall/public/mock/store-3.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#00838f"/><stop offset="1" stop-color="#26c6da"/>
+  </linearGradient></defs>
+  <rect width="120" height="120" fill="url(#g)"/>
+  <text x="60" y="60" font-family="system-ui,sans-serif" font-size="15" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">S3</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/public/mock/store-4.svg b/apps/mall/public/mock/store-4.svg
new file mode 100644
index 0000000..8e1fd53
--- /dev/null
+++ b/apps/mall/public/mock/store-4.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ad1457"/><stop offset="1" stop-color="#ec407a"/>
+  </linearGradient></defs>
+  <rect width="120" height="120" fill="url(#g)"/>
+  <text x="60" y="60" font-family="system-ui,sans-serif" font-size="15" fill="rgba(255,255,255,.9)" text-anchor="middle" dominant-baseline="middle">S4</text>
+</svg>
\ No newline at end of file
diff --git a/apps/mall/stores/cart.ts b/apps/mall/stores/cart.ts
new file mode 100644
index 0000000..8c80f03
--- /dev/null
+++ b/apps/mall/stores/cart.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+
+/** Cart badge state; mirrors the (mock or live) cart item count. */
+export const useCartStore = defineStore("mallCart", {
+  state: () => ({ count: 0 }),
+  actions: {
+    async refresh(): Promise<void> {
+      const { $api } = useNuxtApp();
+      try {
+        const cart = await $api.getCart();
+        this.count = cart.items.reduce((sum, i) => sum + i.qty, 0);
+      } catch {
+        this.count = 0;
+      }
+    },
+    setCount(n: number): void {
+      this.count = n;
+    },
+  },
+});
diff --git a/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/agent-contracts.md b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/agent-contracts.md
new file mode 100644
index 0000000..ddb4e14
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/agent-contracts.md
@@ -0,0 +1,39 @@
+# Agent contracts — mall-pc-storefront-replica
+
+Read this whole file plus `proposal.md` and `design-reference.md` before editing.
+
+## Hard rules
+- `apps/mall` only. NEVER edit `packages/shared`, other apps, or backend.
+- TS strict: no `any` / `as any` / `@ts-ignore`. Vue 3 `<script setup lang="ts">`.
+- All UI copy via `$t()` / `t()`; keys live ONLY in your assigned `apps/mall/locales/<domain>.ts` file (shape: `export default { en: { <domain>: {...} }, zh: { <domain>: {...} } }`). Extend the existing structure; both en and zh always.
+- Mock content fields are `LocalizedText` (`{en, zh}`); render with `t as pick` from `@vmall/shared`: `pick(text, locale)` where `const { locale } = useI18n()`.
+- Money: integer minor units. Render prices ONLY via `<PriceText :amount-minor="n" currency="USD" />` (auto-imported component). No float math, no hardcoded exponent.
+- Styling: scoped CSS per component using the global tokens/utilities in `apps/mall/assets/mall.css` (`--mall-red` etc., `.w1200`, `.mbtn`, `.mpanel`, `.mtable`, `.section-bg`, `.hover-lift`). No Tailwind, no element-plus, no new deps.
+- Do NOT run builds/tests/dev servers; the integrator validates.
+- Do NOT create/modify files outside your assigned list. If you believe a shared file must change, note it in your final report instead.
+
+## Mock data layer (import from `~/mock/data`; read the file for full signatures)
+- Shared-contract data: `MOCK_PRODUCTS: Product[]`, `MOCK_CATEGORIES: Category[]`, `MOCK_CURRENCIES`, `MOCK_USER`.
+- Helpers: `searchMockProducts({q, categoryId, brandId, shopId, sort, order, page, perPage})` → `{items,total,page,per_page}`; `productById(idOrSlug)`; `productDetail(idOrSlug)` → `{product, store, comments, commentStats, coupons, salesRank}`; `lowestSku(product)`; `salesOf(p)`; `commentCountOf(p)`; `topCategories()`; `childCategories(id)`; `categorySubtreeIds(id)`; `brandOf(productId)`; `MOCK_BRANDS`.
+- Stores: `MOCK_STORES: MockStore[]`, `storeById`, `storeDetail(idOrSlug)` → `{store, products, salesRank}`.
+- Home: `MOCK_BANNERS`, `MOCK_PROMOS`, `MOCK_QUICK_LINKS`, `homeFloors()`.
+- Marketing: `SECKILL_SESSIONS`, `seckillProducts()` → `{product, seckillPriceMinor, soldPct}[]`, `collectiveProducts()` → `{product, need, joined}[]`, `INTEGRAL_PRODUCTS`, banner images `/mock/integral-banner.svg`, `/mock/collective-banner.svg`.
+- User center: `MOCK_ADDRESSES: MockAddress[]`, `MOCK_FAVORITES: MockFavorite[]`, `USER_STATS`, `MOCK_COUPONS`.
+- Images: `/mock/*.svg` (product-1..24, banner-1..3, promo-1..3, floor-adv-1..6, store-1..4, avatar).
+
+## API adapter (via `const { $api } = useNuxtApp()`)
+Full `@vmall/shared` `ApiClient`, mock-backed with in-memory state: auth (login/register accept anything → demo user), `listProducts({page, per_page, category_id, q, shop_id})`, `getProduct`, `listCategories`, `listCurrencies`, `convert`, cart CRUD, `checkout(address, currency)` → `Order[]` (one per shop, clears cart), `listMyOrders`, `getOrder`, `cancelOrder`, `payOrder`, `listMyShipments`, `confirmDelivered`, `requestInvoice`, `listMyInvoices`. shop/* and admin/* throw — never call them.
+Cart badge: `useCartStore()` → `.count`, `.refresh()` after cart mutations.
+
+## Session
+`useSessionStore()`: `isLoggedIn`, `user`, `setAuth(tokens)`, `logout()`, `hydrate()` (app.vue hydrates). Route guard: `definePageMeta({ middleware: "auth" })` on pages requiring login (user center, checkout).
+
+## Components (auto-imported)
+- Shell (already placed in app.vue — pages do NOT re-add): `ShellTopBar`, `ShellSiteHeader`, `ShellSiteFooter`.
+- `UiCarousel` `{images: {image,url?}[], height?, interval?}`; `UiPagination` `{page,total,perPage}` emits `change`; `UiBreadcrumb` `{items: {label,to?}[]}` (already 1200px-wide); `UiQtyStepper` `v-model, max`; `UiRatingStars` `{value,size?}`; `UiEmptyState` `{text?}`; `UiModal` `{open,title?}` emits `close`, slots default+footer; `UiTabs` `{tabs:[{key,label}], modelValue}` emits update, default slot receives `{active}`; `UiStepBar` `{steps: string[], active: number}`; `UiProductCard` `{product: Product}`; `PriceText` `{amountMinor, currency}`; `StatusBadge` `{status, kind}` (uses shared `order.status.*` etc. keys).
+
+## Routes (fixed)
+`/` home (done); `/search` (query: q, category, brand, sort, order, page); `/goods/[id]`; `/cart`; `/checkout`, `/checkout/pay`, `/checkout/success`; `/login`, `/register`, `/forgot-password`; `/stores`, `/stores/[id]`; `/seckill`, `/collective`, `/integral`; `/user` shell + `/user` (dashboard), `/user/orders`, `/user/orders/[id]`, `/user/addresses`, `/user/favorites`, `/user/coupons`, `/user/invoices`.
+
+## Visual reference
+Follow `design-reference.md` (reference digest): 1200px grid, `#ca151e` red, `#333` dark nav, hairline `#efefef` borders, 12–14px text, card hover lift, red price + struck market price, 4-step bar on transaction pages, right-floating 400px auth panel over `/mock/login-bg.svg`, user center 234px left menu + white `.mpanel` content.
diff --git a/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/design-reference.md b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/design-reference.md
new file mode 100644
index 0000000..f9f4226
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/design-reference.md
@@ -0,0 +1,139 @@
+# PC buyer mall reference digest
+
+## 1. Home route table
+
+`resources/js/plugins/routes/index.js` defines one parent `path: '/'` component `Home/index` (the global buyer shell). Its children are:
+
+| Path | Page file | Purpose / mock data boundary |
+|---|---|---|
+| `/` | `Home/default.vue` | Home landing page: hero/banner, quick links and category product floors. `/home` response supplies `goods` groups; each group has `name`, `goods[]`, and each product has `id`, `goods_master_image`, `goods_name`, `goods_subname`, `goods_price`, `goods_market_price`. |
+| `/login` | `Home/auth/login.vue` | Username/password login plus WeChat login. |
+| `/register` | `Home/auth/register.vue` | Phone registration, password confirmation and SMS code. |
+| `/forget_password` | `Home/auth/forget_password.vue` | Phone, new password/confirmation and SMS code reset. |
+| `/stores` | `Home/stores/list.vue` | Store directory, default/distance sort, pagination. |
+| `/store/:id` | `Home/stores/info.vue` | Store profile/rating, store sales rail, product listing/sort. |
+| `/store/join` | `Home/stores/index.vue` | Merchant onboarding landing; links into join steps. |
+| `/store/step_1`, `/store/step_2`, `/store/step_3` | corresponding `Home/stores/step_*.vue` | Join agreement/data/review state steps. |
+| `/s/:params?` | `Home/goods/index.vue` | Product search/list; optional base64 JSON query (`keywords`, `pid/sid/tid`, `class_id`, `brand_id`, `sort_type`, `sort_order`). |
+| `/goods/:id` | `Home/goods/info.vue` | Product detail, gallery/zoom, SKU, buy/cart, store, detail/comments/service. |
+| `/carts` | `Home/carts/index.vue` | Cart grouped by store, selection/quantity/removal and checkout. |
+| `/integral` | `Home/integral/index.vue` | Points-mall home (banner, account panel, recommendations/category rails). |
+| `/integral/search/:params?` | `Home/integral/goods.vue` | Points product search/category/sort list. |
+| `/integral/goods/:id` | `Home/integral/info.vue` | Points product detail and quantity selection. |
+| `/integral/order/:id/:buy_num` | `Home/integral/orders/index.vue` | Address + points redemption order. |
+| `/seckills` | `Home/seckills/index.vue` | Timed seckill sessions/products. |
+| `/collectives/:params?` | `Home/collectives/index.vue` | Group-buy product list, using ordinary goods filters with `is_collective: 1`. |
+| `/user` | `Home/users/index.vue` with child `Home/users/default.vue` | Buyer center shell and dashboard. |
+| `/user/address` (+ `/form/:id?`) | `Home/users/address/index.vue` (+ `form.vue`) | Address list and add/edit. |
+| `/user/comments`, `/user/comment/add/:id` | comments pages | Buyer comments and add-comment flow. |
+| `/user/info`, `/user/safe/**`, `/user/oauth`, `/user/cashes` | user subpages | Profile, safety/password/phone, OAuth binding and withdrawal. |
+| `/user/favorites` | `Home/users/favorites/index.vue` | Toggle product favorites/store follows. |
+| `/user/money`, `/user/integral`, `/user/frozen_money` | money-log pages | Balance, points and frozen-funds records. |
+| `/user/orders`, `/user/order/:id`, `/user/order/comment/:id`, `/user/order/refund/**` | order subpages | Order list/detail/comment/refund flows. |
+| `/user/integral_order` | integral-order page | User’s points orders. |
+| `/user/coupons` | `Home/users/coupons/index.vue` | Coupon table. |
+| `/user/distribution/**` | distribution pages | Distribution profile/members/commissions. |
+| `/user/article/:name` | article page | Named announcement/help/about content. |
+| `/order/before/:params` | `Home/orders/before.vue` | Address/coupon/remark and order preview. |
+| `/order/pay/:params` | `Home/orders/pay.vue` | Payment selection and generated order summary. |
+| `/order/success` | `Home/orders/success.vue` | Completed payment result. |
+
+`views/App.vue` is only `<router-view/>`; `/Admin/login` and `/Seller/login` are separate non-buyer routes (Admin/Seller areas exist but are out of this survey). `router.js` creates a history router, installs `baseRoute`, and has global progress/auth navigation logic.
+
+## 2. Global layout anatomy
+
+The naming is slightly split: `views/Home/index.vue` is the shell, `views/Home/default.vue` is the actual home landing page, and `components/home/base.vue` is the shared outer layout.
+
+1. **`components/home/top.vue` fixed top bar (`.head`, 30px):** 1200px `.head_in`; left links in order: 平台官网, separator, 商城官网, separator, 联系方式, separator, 关于我们, separator, city/location (default 北京市, optionally IP/AMap-resolved). Right side conditionally shows 登录/注册 or `欢迎您，nickname`, 个人中心, 注销账号; then 商家入驻, 手机端, APP下载. Uses `#ca151e` for login/location/merchant links.
+2. **`components/home/head.vue` fixed header (`top:30px`, white):** `.center_top center1200` logo (`.shop_logo`, 242x74), then `.shop_top_seach` with 434px text input (`data.keywords`), search icon button and `.index_my_car` “我的商城/我的购物车” with cart count badge `.shop_car_dot`. Below is 40px dark `.shop_top_nav`: 240px red `.shop_top_nav_left` “全部商品” (hover mounts `leftbar`), then links 首页, 店铺街, 秒杀, 拼团, 积分商城, 帮助中心. Header collapses logo/search area after scroll >200; home category menu can collapse after scroll. Search pushes `/s/` + base64 JSON `{keywords}`.
+3. **`components/home/leftbar.vue` category mega-menu:** 240px x 450px `.leftbar` (white) or `.leftbar2` (black translucent when over hero). Each top-level `goodsClass` renders `.left_bar_block`: `.class_1` top category name, `.class_2` up to three child names, and hidden hover `.subbar` 960px wide. Mega menu contains optional top tags, right brand tiles from `goodsBrand[]` (`thumb`), optional advert, and `.subbar_subnav` rows: child heading `name`, grandchildren `{id,pid,name}`. Navigation encodes `pid/sid/tid/class_id` into `/s/:params`.
+4. **`components/home/base.vue`:** `<div class="home_default"><top/><div class="padding_content"/><slot name="main"/><foot/></div>`. `.padding_content` is 228px to offset fixed top + header. On mount dispatches `init/loadCommon` (common config, classes, brands, cart, etc.). In `Home/index.vue`, the main slot is `<head-view/><router-view/>`; therefore every buyer page receives the top/header/footer shell. Home `default.vue` itself is just the route content under that shell.
+5. **`components/home/foot.vue`:** centered 1200px `.shop_foot`; four value propositions in order (“500强企业 品质保证”, “7天退货 15天换货”, “99元起免运费”, “448家维修网点 全国联保”), then copyright/ICP/security text interpolating `common.web_name` and `common.icp`, plus Element `el-backtop`. Replace `el-backtop` with a small fixed scroll-to-top control in Nuxt.
+
+Element Plus pieces to replace in this shell: `el-icon`/icons (search, cart, etc.), `el-image` (native img with lazy loading), `el-carousel`/transition (CSS/Headless carousel), `el-backtop`, and any `el-breadcrumb` used by child pages.
+
+## 3. Homepage sections and mock data
+
+`views/Home/default.vue` is intentionally simpler than the nav labels suggest—there are no dedicated seckill/collective/brand sections in this file. Those are quick links in `banner_adv`; product floors are generic category groups.
+
+1. **Hero carousel (`components/home/banner.vue`, first child):** `<el-carousel height=450>` → each `<el-carousel-item>` → `.shop_banner` background image (`background-position:center; background-size:cover`) → full 1200x450 router link. `banner` shape: `[{image:string, url?:string, name?:string}]`; default landing mock is one `default_banner.jpg` item. Nuxt replacement: regular CSS/JS carousel.
+2. **Below-hero promo/quick-link strip (`components/home/banner_adv.vue`):** `.banner_bottom_adv center1200`; left 240px six 78x80 cells in order: 实名认证 (`/user/safe`), 积分商城, 优惠团购, 秒杀活动, 公告 (`/user`), 入驻商家. Each icon is an image; right side has up to three 312x160 linked promo images. `index_adv` shape: `[{image:string, url?:string, name?:string}]`. Uses `el-image` (replace with img).
+3. **Floor background:** `.index_bg` gray `#f5f5f5`, top margin 40px and 20px/60px padding. For every `data.goods` category group, render `.goods_class_list w1200`; if `v.goods.length > 0`, first `adv-view` full-width placeholder (`adv:{image,url?}`), then `.title` group name + “查看更多”.
+4. **Floor body:** left `.index_adv_goods_left` 234x614 image from `data.classLeftAdv[k].image_url` or fallback `pc_class_btadv.jpg`; right `.index_class_goods_right` 966px with product cards in `<ul>`. Product cards are 220x300 white `.product_act_in` with 140x140 image, title, subtitle, red sale price and struck market price. Floor product shape: `{id, goods_master_image, goods_name, goods_subname, goods_price, goods_market_price}`; floor group shape: `{name, goods:[product...]}`. Note `classLeftAdv` is initialized but not assigned from `/home` in the shown code, so a mock can supply it separately.
+5. **`components/home/adv.vue`:** a linked lazy image, default `width/height:'100%'`, margin top/bottom 40px; `adv:{image,url?}`.
+
+Visual card behavior: hover lifts cards by 3px and adds `0 2px 12px rgba(0,0,0,.1)`. A Nuxt mock module should include `home {goods: Floor[], classLeftAdv: Adv[]}`, `banner`, and `index_adv` even though the current banner/floor images are hardcoded assets.
+
+## 4. Goods list (`views/Home/goods/index.vue`)
+
+- Breadcrumb `.w1200 breadcrumb`: 首页, then either `搜索 "..." 结果列表` (decoded `keywords`) or 商品列表.
+- **Filter block `.goods_where w1200`:** three `.item` rows: 商品分类, 品牌筛选, 筛选排序. Category has “全部”, top-level `common.classes`, selected second-level and third-level children; each class is `{id,name,children:[...]}`. Brand options are `{id,name}`. The route state/query shape is `{keywords?,pid?,sid?,tid?,class_id?:number[],brand_id?,sort_type?,sort_order?}` encoded in base64 path.
+- **Important reference limitation:** despite a request to survey “attrs/brands/price”, this template has no attribute facet row and no price-range controls. It exposes category + brands + sort only. Do not infer an attrs/price UI from this file; if the new app adds them, it is an intentional enhancement rather than parity.
+- Sort choices are default, 价格 (`goods_price`), 销量 (`goods_sale`), 评论 (`order_comment_count`), each toggling `sort_order` asc/desc. In the shown template the sort controls are also in `.goods_where`, not a separate bar.
+- **Results:** `.s_goods_content`; `.s_goods_list` five cards/row (`.item` 224x364). Each card `<dl>` has 176x176 image, title, red price, footer “立即购买” and `{order_comment_count} 人评论`; links `/goods/{id}`. Product list shape: `{id,goods_master_image,goods_name,goods_price,order_comment_count}` (market/subname are not rendered here).
+- **Pagination:** `.fy` Element `el-pagination` total/prev/pager/next; response fields are `data`, `total`, `per_page`, `last_page`, `current_page`; empty state is `el-empty`. Replace with plain button/page-number pagination, empty state, and native img.
+
+## 5. Goods detail (`views/Home/goods/info.vue`)
+
+- **Breadcrumb:** `.mbx w1200`: 首页 → every `goods_info.classList[{name}]` → product name.
+- **Gallery:** `.goods_info_top_left` has `.goods_image_item` containing custom `components/home/vue-piczoom.vue`, then thumbnail rail `.pic_zoom_list` with previous/next controls and `goods_images_thumb_150[]`; selected index `chose_img_pos`, display image `goods_images_thumb_400[]`, zoom source `goods_images[]`. Mock fields: `goods_images`, `goods_images_thumb_400`, `goods_images_thumb_150` arrays of URLs.
+- **Product summary:** `.goods_info_top_right` title/subtitle, favorite toggle, sale/market prices, sale count, QR hint, coupon cards, optional seckill and group-buy activity, full-reduction messages. Core `goods_info`: `id,goods_name,goods_subname,goods_price,goods_market_price,goods_sale,goods_stock,goods_content,classList,attrList,skuList,sale_list`; `coupons[]` entries `{id,money,use_money}`, `full_reductions[]` `{money,use_money}`, `seckills` `{discount,end_time,format_time}`, `collectives` `{discount,need}`, `collective_list[]` `{id,avatar,nickname,orders_count,need}`.
+- **SKU/quantity:** `attrList[]` each `{name,specs:[{id,name,is_chose?}]}`; `skuList[]` each `{id,spec_id:number[],goods_price,goods_market_price,goods_stock}`. Chosen `sku_id`, `buy_num`, current stock; “立即购买”, “加入购物车” (regular goods) or “立即抢购” (seckill). Group buy adds `collective_id`.
+- **Store card / left rail:** `.goods_info_content` left `.left_item` store card with `store_info.store_name`, `store_company_name`, `area_info`, `store_address`, `id`, `user_id`; four scores in `rate_info` (`scoreAll`, `agreeAll`, `serviceAll`, `speedAll`); buttons enter store/customer service. Below, 销售排行 from `goods_info.sale_list[]` product `{id,goods_master_image,goods_name,goods_price}`.
+- **Tabs:** right `.right_item` Element tabs: 商品详情 renders sanitized `goods_content`; 用户评价 renders statistics `{all,good,commonly,bad,rate}`, comment filters, paginated `comments[]` where `{avatar,nickname,score,content,image:string[],reply}`; 售后服务 renders `store_info.after_sale_service`. Replace `el-tabs`, `el-rate`, `el-pagination`, `el-image` with native tabs, stars and controls. `Chat` is a separate common component and may be replaced with a simple contact CTA if chat is not in scope.
+
+## 6. Cart and order flow
+
+**Cart (`views/Home/carts/index.vue`):** `.create_order_1 w1200` begins a four-step `.step_bar` (cart active, address, payment, success). If nonempty, `.cart_th` header columns are 商品, 规格, 单价（元）, 数量, 小计, 操作. `.cart_table` groups `data.list` by store: store group `{store_id,store_name,checked,css,cart_list[]}`, item `{cart_id,goods_id,goods_image,goods_name,sku_name,goods_price,buy_num,checked}`. Each item has checkbox, 40px thumb/name link, SKU, +/- quantity controls, subtotal and 移除. Bottom select-all summarizes `allCount`, `allPrice` and 结算; empty `el-empty`. Pagination response state exists (`data.params={page,per_page,last_page,total}`) but no pager is rendered. Replace Element checkboxes/empty/icons.
+
+**Order before (`orders/before.vue`):** same step bar with cart/address active. Address selection list entries `{id,receive_name,receive_tel,area_info,address,is_default}`; then order preview grouped by store. Order group includes `store_info:{id,store_logo,store_name}`, `coupon_id`, `coupons[]:{id,money}`, `is_coupon`, `goods_list[]:{goods_master_image,goods_name,sku_name,goods_price,buy_num,total}`. Shows remark textarea (`data.remark`), total, create-order button. Submit payload uses encoded route `params`, `address_id`, comma-joined `coupon_id`, `remark`.
+
+**Order pay (`orders/pay.vue`):** step bar through payment; balance panel `userInfo.money`; payment options are balance/password, WeChat and Alipay. Displays generated `order[]` groups `{order_no,coupon_money,order_goods[]:{goods_image,goods_name,sku_name,goods_price,buy_num,total_price}}`, `total`, `freight_money`; balance password and QR modal state `{pay_password,qr_code}`. Replace `el-dialog`, QR Vue and Element grid with Tailwind modal/grid and a QR library.
+
+**Order success (`orders/success.vue`):** all four steps active, success result (“订单支付成功！”), link to `/user`; replace Element `el-result` with a simple success panel.
+
+## 7. User center
+
+`Home/users/index.vue` is a two-column `.user_default` shell: 234px `.user_left` + 20px gap, 946px `.user_right` with nested `<router-view>`. Profile card has avatar, `nickname`, edit link, account-profile progress (`check`) and safety indicators (`phone`, `check`). Nav menu groups/items, in order:
+
+- **订单中心:** 我的订单 `/user/orders`, 收货地址 `/user/address`, 评论列表 `/user/comments`.
+- **会员中心:** 个人中心 `/user`, 用户资料 `/user/info`, 账户安全 `/user/safe`, 账号绑定 `/user/oauth`, 资金提现 `/user/cashes`, 收藏/关注 `/user/favorites`, 我的优惠券 `/user/coupons`.
+- **积分商城:** 积分订单 `/user/integral_order`.
+- **资产记录:** 平台余额 `/user/money`, 冻结资金 `/user/frozen_money`, 平台积分 `/user/integral`.
+- **分销分佣:** 分销信息 `/user/distribution`, 分销会员 `/user/distribution_users`, 分销佣金 `/user/distribution_logs`.
+- **帮助中心:** 网站公告、其他合作、帮助中心、关于我们 at `/user/article/:name`.
+
+`users/default.vue` dashboard data shape: `user_info:{money,integral,frozen_money}`, `count[5]` for pending payment/shipping/receipt/comment/after-sale, `order[]` with `{id,created_at,order_no,order_status,order_status_cn,order_goods[]:{goods_image,goods_name,sku_name,buy_num,total_price}}`, `fav[]` with `{out_id,goods_master_image,goods_name,goods_price}`, and local `history[]` with `{id,image,goods_name,goods_price}`. It renders balance cards, five status links/badges, recent orders, recent favorites and browsing history, all in `.user_main` cards.
+
+Focused page shapes:
+- **Address:** `addresses[]:{id,receive_name,receive_tel,area_info,address,is_default}`; add/edit fields are `receive_name`, `receive_tel`, `area` (cascader), `address`, `is_default`; paginated response. Uses `el-dialog`, `el-form`, `el-pagination`.
+- **Orders:** filter `{order_status,order_no,created_at:[start,end],is_type}`; statuses -1/0/1/2/3/4/5/6 = all/cancelled/wait-pay/wait-ship/wait-receive/wait-comment/after-sale/completed. Cards use the same order/item shape above and action buttons; logistics modal expects `order_info.delivery_list[]:{context,time}`.
+- **Favorites:** toggle `isGoods`; product table fields `goods_master_image,goods_name,goods_price,created_at`, store table fields `store_logo,store_name,created_at`, records carry `is_type,out_id`.
+- **Coupons:** generic table columns `name,money,use_money,end_time,created_at`; no custom card UI. `table-view` is a large Element-based shared component and should be replaced with a plain responsive table in Nuxt.
+
+## 8. Stores, seckill, collective and integral pages
+
+- **Stores list (`stores/list.vue`):** breadcrumb + one sort row (default/distance), then store rows with 80px logo and `{id,store_logo,store_name,store_company_name,area_info,store_address,distance}`; center hardcodes 好评率 100%, right shows distance and 进入店铺; 30/page pagination. Location comes from local `lonlat`. Replace `el-breadcrumb`, icons, image and pagination.
+- **Store info (`stores/info.vue`):** 350px banner from `store_info.store_slide[]`, left store profile/rates/company/address/favorite/contact and sales ranking; right store-scoped sort (default/price/sales/comments) plus 220x300 product cards with `{id,goods_master_image,goods_name,goods_subname,goods_price,goods_market_price}` and pagination. Store payload adds `id,user_id,store_verify,store_status,store_logo,sale_list[]`, `rate:{scoreAll,agreeAll,serviceAll,speedAll}`, and `after_sale_service` where relevant.
+- **Seckills (`seckills/index.vue`):** breadcrumb, four equal timed session selectors (`timeList` hours, `timeIndex`, `timeFormat` countdown), then a 4-column product grid using `{id,goods_master_image,goods_name,goods_subname,goods_price,goods_market_price}`, paginated by `{page,per_page,last_page,total,start_time}`. Countdown refreshes the page when the hour expires.
+- **Collectives (`collectives/index.vue`):** 350px collective banner, then the same 3-row category/brand/sort filter and 5-column standard goods cards as `/s`; API query adds `is_collective:1`. Mock the same class/brand/filter/product/page shapes as goods list.
+- **Integral home (`integral/index.vue`):** 350px banner, four info blocks (login/register or avatar + `userInfo.integral`, plus private customization/24H/priority cards), then “热门推荐” and category rails. Data is `{store_slide?,userInfo:{avatar,integral},recommend:[{id,goods_master_image,goods_name,goods_price,goods_market_price}],list:[{name,integral_goods:[same product shape]}]}`.
+- **Integral goods/detail/order:** `integral/goods.vue` is a category/sort-only list (`class[]:{id,name}`, product card uses “立即兑换”); `integral/info.vue` is zoom gallery + points price/market price, sale/stock and quantity, “立即兑换”, with `goods_content`; `integral/orders/index.vue` reuses address/remark four-step checkout but has one points product `{goods_master_image,goods_name,sku_name,goods_price,buy_num}`, and submits `{id,buy_num,address_id,remark}` to points pay.
+
+## 9. Auth pages
+
+All three use `.home_login` with `user_login__bgs.png`, a 1200px `.login_block`, and right-floating white `.login_item` 400x450, 40px padding, 50px top margin. Inputs are 320px wide, 35px high; submit is full-width red `#ca151e`; no shared top/header is rendered inside the auth template (they still are routed beneath the Home shell in the current route tree).
+
+- **Login:** title tabs “帐号登录 | 扫码登录”; `username`, `password`; 登录 button; links 注册 and 忘记密码; Element divider and WeChat icon/click. Mock `{username,password,provider:'users'}`.
+- **Register:** title “注册账号 | 账号登录”; `username` (phone), `password`, `re_password`, SMS `code`, send-code countdown (`code_text`, `math`); 注册 + forgot-password link. Optional inviter id from query/session. Mock `{username,password,re_password,code,code_text,math}`.
+- **Forgot password:** title “忘记密码 | 账号登录”; `username`, new `password`, `re_password`, SMS `code`, send-code state; 确定 + 立即登录. Same `{username,password,re_password,code,code_text,math}`.
+
+Element replacements here: `el-divider` → border/label, `el-message` → toast, and ordinary inputs/buttons can be native/Tailwind.
+
+## 10. Theme and visual language
+
+- `plugins/css/style.css` resets body/common block margins and list styles, sets `html,body,#app` height 100%, base `font-size:14px`, color `#333`, no explicit `font-family` (browser/system font applies). Links default `#333` with no decoration; hover `#000`. `body` margin is zero.
+- Fixed desktop container is `.center1200` and `.w1200`, both `width:1200px;margin:0 auto`; floats are `.float_left/.float_right`; `.clear` clears floats. Other recurring utility classes: `.breadcrumb` (30px vertical margin), `.shadow` (`0 2px 12px rgba(0,0,0,.1)`), `.x20` 1px gray divider with 20px margin, `.user_main` white padded card, `.table_lists` min-height 600px, `.block_title` 16px with 3px red left border.
+- `base.scss` has `$admin_background:#f4f4f4`; `.home` Element primary CSS vars are `--el-color-primary:#e50e19` and light variants, but storefront source consistently uses `#ca151e` for active links, red prices, buttons, selected filters, nav, and borders. Preserve both: `#ca151e` is the visual brand red; `#e50e19` is Element theme fallback. Status colors are green `#67c23a`, gray `#909399`, yellow `#e6a23c`, red `#f56c6c` (round utility classes).
+- Button language: white bordered `.default_btn`, red `.error_btn`, yellow `.warn_btn`, green `.success_btn`, gray `.gray_btn`; all compact 12px, 3px radius, 6px/15px padding. Cards/rows are mostly white with `#efefef` 1px rules, subtle hover lift/shadow, restrained 12–16px text, and red price emphasis. Home/floor backgrounds use `#f5f5f5`; user center uses `#f1f1f1`; header nav is `#333` with a red category block.
+- Replication recommendation: keep 1200px desktop grid, 20–30px section rhythm, 20px card gaps, 40px header/nav spacing, 220–224px product cards, gray separators, low-radius 3px controls, red active states and strikethrough market prices. Since the reference relies heavily on Element Plus (`el-carousel`, `el-image`, `el-breadcrumb`, `el-pagination`, `el-empty`, `el-checkbox`, `el-select`, `el-dialog`, `el-form`, `el-tabs`, `el-rate`, `el-result`, `el-badge`, `el-progress`, `el-timeline`, `el-icon`), a fresh Nuxt 3/Tailwind build should provide plain semantic replacements rather than porting Element’s runtime.
\ No newline at end of file
diff --git a/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/proposal.md b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/proposal.md
new file mode 100644
index 0000000..a9416ae
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/proposal.md
@@ -0,0 +1,27 @@
+# Proposal: mall-pc-storefront-replica
+
+## Why
+The current mall is a bare API-wired storefront (plain grid, minimal chrome). We want a real PC mall experience modeled on a classic open-source B2B2C buyer mall (Vue2 + element-plus, outdated): its layout, components and visual language — but rebuilt in our Nuxt 3 stack. The backend assortment/marketing/user-center endpoints for this experience do not exist yet, so the MVP serves everything from fixed mock data behind a mock API adapter, keeping the `$api` call shape so pages can later switch back to the live API without rewrites.
+
+## What changes
+- `apps/mall` is rebuilt as a full PC storefront replicating a classic B2B2C buyer mall: fixed top bar + header (logo/search/cart badge) + dark nav with category mega-menu + footer; 1200px container, `#ca151e` brand red, card/floor visual language (see `design-reference.md`).
+- Mock layer: `apps/mall/mock/` provides (a) a `createMockApi()` adapter implementing the existing `@vmall/shared` API client surface with fixed data, selected via `runtimeConfig.public.mockApi` (default `true`), and (b) a mall-local mock content module for surfaces the real API has no counterpart for (banners, home floors, brands, seckill sessions, collectives, stores, comments, coupons, addresses, user dashboard stats).
+- Pages (all mock-backed):
+  - Home `/`: hero carousel, quick-link/promo strip, category product floors.
+  - Goods list `/search`: breadcrumb, category/brand/sort filter block, 5-col product cards, pagination.
+  - Goods detail `/goods/[id]`: gallery + zoom, SKU/attr picker, quantity, price/market price, coupons/activity strip, store card + sales rail, tabs (detail/comments/after-sale).
+  - Cart `/cart`, checkout flow `/checkout` → `/checkout/pay` → `/checkout/success` with 4-step bar, address selection, mock payment.
+  - Auth: `/login`, `/register`, `/forgot-password` (right-floating white panel over banner background).
+  - User center `/user/**`: 234px left menu shell; dashboard, orders list/detail, addresses, favorites, coupons, invoices.
+  - Stores: `/stores` directory, `/stores/[id]` store home.
+  - Marketing: `/seckill` (timed sessions + countdown), `/collective`, `/integral` (points mall home).
+- Element Plus widgets are NOT ported; plain Nuxt equivalents are built (carousel, pagination, tabs, checkbox, dialog, empty state, back-to-top, rating stars).
+- All UI copy stays `$t()`-driven (en/zh via `locales-extra.ts`); mock content fields keep the `{"en","zh"}` JSONB shape; money stays integer minor units through `formatMoney`.
+
+## Non-goals
+- No backend changes; no changes to `@vmall/shared` contract, shop-admin, or admin apps.
+- No SEO/SSR tuning, no real payment, no chat/customer-service, no distribution/cash/integral-order subsystems beyond display mocks.
+- No element-plus or Tailwind introduction; styling is scoped CSS in the mall app.
+
+## Capabilities
+- `frontend-mall`: rebuilt PC storefront experience (mock-backed MVP).
diff --git a/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/specs/frontend-mall/spec.md b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/specs/frontend-mall/spec.md
new file mode 100644
index 0000000..e438ea8
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/specs/frontend-mall/spec.md
@@ -0,0 +1,75 @@
+# Spec delta: frontend-mall
+
+## ADDED Requirements
+
+### Requirement: B2B2C mall-style PC storefront shell
+The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The visual language SHALL use #ca151e for brand/price/active states, #f5f5f5 section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use Nuxt-native semantic components and SHALL NOT depend on Element Plus.
+
+#### Scenario: shopper opens any mall page
+- **WHEN** a shopper navigates to a buyer-facing route
+- **THEN** the shared desktop shell wraps the route content and its nav/search/cart controls are usable
+
+### Requirement: Mock API adapter
+The mall SHALL default to a fixed-data mock adapter that implements the existing `@vmall/shared` API client surface. The adapter SHALL support auth, catalog, currency conversion, cart mutation, checkout, order/payment/shipment state, and invoices without a backend. A runtime configuration switch SHALL select the live API client later without changing page call sites.
+
+#### Scenario: mall runs without backend
+- **WHEN** the mall starts with mock mode enabled and the API service is unavailable
+- **THEN** browsing, cart, checkout, payment, orders and invoice pages return deterministic mock data and remain functional
+
+### Requirement: Mock PC home page
+The mall home page SHALL render a hero carousel, a six-item quick-link strip with promotion tiles, and bilingual product floors with a left advert and product-card grid.
+
+#### Scenario: shopper lands on home
+- **WHEN** `/` loads in mock mode
+- **THEN** the carousel, quick links, promotions and every non-empty product floor render fixed mock content
+
+### Requirement: Product discovery pages
+The mall SHALL provide `/search` with breadcrumb, category, brand and sort controls, a five-column desktop product grid, pagination and an empty state. It SHALL provide `/goods/[id]` with image gallery/zoom, bilingual name/subtitle, integer-minor-unit prices, attribute and SKU selection, stock-aware quantity, coupons/activity summary, store card, sales rail, and detail/comments/after-sale tabs.
+
+#### Scenario: filter and inspect a product
+- **WHEN** a shopper filters the search page and opens a product
+- **THEN** matching mock cards are shown and selecting an in-stock SKU updates the displayed price, stock and cart target
+
+### Requirement: Mock transaction flow
+The mall SHALL provide a store-grouped cart, address-selecting checkout preview, mock payment selection and payment-success result. Cart quantity/removal, selection totals, checkout and mock payment SHALL update the in-memory mock state for the current browser session.
+
+#### Scenario: complete mock purchase
+- **WHEN** a shopper adds an in-stock SKU, checks out with a mock address and confirms a mock payment
+- **THEN** the cart is cleared, the success page is shown and the new order appears in the user order list
+
+### Requirement: Auth and buyer center
+The mall SHALL provide B2B2C mall-style login, register and forgot-password panels backed by deterministic mock auth. `/user` SHALL render a two-column buyer center with dashboard, order list/detail, addresses, favorites, coupons and invoices.
+
+#### Scenario: sign in and inspect buyer data
+- **WHEN** a shopper submits the mock login form and opens `/user`
+- **THEN** the buyer-center shell and fixed account/order/address/favorite/coupon/invoice data render without backend access
+
+### Requirement: Store and marketing pages
+The mall SHALL provide a store directory, store home, timed seckill page, collective-buy list and points-mall home using fixed bilingual mock content. Marketing pages MAY be display-only except navigation to product detail.
+
+#### Scenario: navigate storefront discovery channels
+- **WHEN** a shopper opens stores, seckill, collective or integral routes
+- **THEN** each page renders the appropriate B2B2C mall-style banner/filter/session/card layout and product links resolve to mock product details
+
+## MODIFIED Requirements
+
+### Requirement: Localized storefront
+The mall SHALL render every UI string and all catalog/store/marketing mock content in en or zh from one switcher, defaulting to en. Switching locale SHALL update the desktop shell and current page without a full reload.
+
+#### Scenario: switch to Chinese
+- **WHEN** a shopper switches locale to zh
+- **THEN** navigation, buttons, product/store names and mock marketing content render in Chinese without reload errors
+
+### Requirement: Multi-currency display
+The mall SHALL offer a currency switcher sourced from the selected API adapter and SHALL convert product, cart and order prices through integer minor units and each currency's exponent. Mock mode SHALL use deterministic fixed conversion rates; live mode SHALL use the API.
+
+#### Scenario: switch currency
+- **WHEN** a shopper switches from USD to JPY on a product priced $10.00
+- **THEN** the displayed price reflects the selected adapter's conversion rate with JPY exponent 0 and no floating-point money arithmetic
+
+### Requirement: Shopping flow
+A shopper SHALL be able to browse, view detail, add to cart, checkout with a shipping address, pay (mock), track orders/shipments, confirm delivery, and request an invoice through the selected API adapter. The MVP SHALL default to the fixed-data mock adapter and SHALL not require the live API.
+
+#### Scenario: end-to-end purchase
+- **WHEN** a shopper completes checkout on a non-empty mock cart
+- **THEN** the resulting order appears in the buyer center and the cart is empty
diff --git a/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/tasks.md b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/tasks.md
new file mode 100644
index 0000000..dd5533d
--- /dev/null
+++ b/openspec/changes/archive/2026-09-17-mall-pc-storefront-replica/tasks.md
@@ -0,0 +1,34 @@
+# Tasks: mall-pc-storefront-replica
+
+## 1. Mock layer
+- [x] `apps/mall/mock/data.ts`: fixed bilingual catalog (categories tree, brands, products+SKUs+images, stores, banners, home floors, seckill sessions, collectives, integral goods, comments, coupons, addresses, user profile/orders/invoices), money in minor units
+- [x] `apps/mall/mock/api.ts`: `createMockApi()` implementing the `@vmall/shared` client surface (auth, products, categories, currencies+convert, cart with in-memory state, checkout, orders, shipments, invoices) returning fixed/derived data
+- [x] `apps/mall/plugins/api.ts`: select mock vs real client via `runtimeConfig.public.mockApi` (default `true`)
+
+## 2. Shell + shared components
+- [x] Layout: `TopBar` (30px, city/links/login state), `SiteHeader` (logo, search box, cart badge, dark nav + category mega-menu `CategoryMenu`), `SiteFooter` (value props + copyright), scroll-aware header collapse, back-to-top
+- [x] Primitives: `ProductCard`, `Pagination`, `Breadcrumb`, `QtyStepper`, `RatingStars`, `EmptyState`, `Modal`, `Tabs`, `Carousel`, `StepBar`; classic B2B2C mall theme via scoped CSS (1200px container, #ca151e, #f5f5f5 floors, card hover lift)
+- [x] i18n: all new UI strings in `apps/mall/locales-extra.ts` (en/zh)
+
+## 3. Browse pages
+- [x] Home `/`: hero carousel, quick-link/promo strip, category floors (left adv + product cards)
+- [x] Goods list `/search`: category/brand/sort filter block, 5-col cards, pagination, empty state
+- [x] Goods detail `/goods/[id]`: gallery+zoom, attr/SKU picker, qty stepper, price block, coupon/activity strip, store card + sales rail, detail/comments/after-sale tabs
+
+## 4. Transaction pages (mock)
+- [x] Cart `/cart`: store-grouped table, select/qty/remove, summary + 结算
+- [x] Checkout `/checkout`: step bar, address select, store-grouped preview, remark, submit
+- [x] Pay `/checkout/pay` + success `/checkout/success`
+
+## 5. Auth + user center
+- [x] `/login`, `/register`, `/forgot-password` panels
+- [x] `/user` shell: left menu; dashboard, orders list + detail, addresses, favorites, coupons, invoices
+
+## 6. Stores + marketing pages
+- [x] `/stores` directory + `/stores/[id]` store home
+- [x] `/seckill` sessions + countdown grid, `/collective` list, `/integral` points mall home
+
+## 7. Verify
+- [x] `pnpm --filter @vmall/mall build` green
+- [x] `openspec change validate mall-pc-storefront-replica --strict` green
+- [x] Browser smoke: home, search, goods detail (SKU pick), cart → checkout → pay → success, login, user center, stores, seckill — in both locales
diff --git a/openspec/specs/frontend-mall/spec.md b/openspec/specs/frontend-mall/spec.md
index 5133f37..9cd657a 100644
--- a/openspec/specs/frontend-mall/spec.md
+++ b/openspec/specs/frontend-mall/spec.md
@@ -4,23 +4,72 @@
 TBD - created by archiving change frontend-apps. Update Purpose after archive.
 ## Requirements
 ### Requirement: Localized storefront
-The mall SHALL render UI strings and catalog content in en or zh from one switcher, defaulting to en.
+The mall SHALL render every UI string and all catalog/store/marketing mock content in en or zh from one switcher, defaulting to en. Switching locale SHALL update the desktop shell and current page without a full reload.
 
 #### Scenario: switch to Chinese
 - **WHEN** a shopper switches locale to zh
-- **THEN** navigation, buttons and product names render in Chinese without reload errors
+- **THEN** navigation, buttons, product/store names and mock marketing content render in Chinese without reload errors
 
 ### Requirement: Multi-currency display
-The mall SHALL offer a currency switcher (enabled currencies from the API) converting SKU prices for display; checkout uses the selected currency.
+The mall SHALL offer a currency switcher sourced from the selected API adapter and SHALL convert product, cart and order prices through integer minor units and each currency's exponent. Mock mode SHALL use deterministic fixed conversion rates; live mode SHALL use the API.
 
 #### Scenario: switch currency
 - **WHEN** a shopper switches from USD to JPY on a product priced $10.00
-- **THEN** the displayed price reflects the API conversion rate (integer minor units)
+- **THEN** the displayed price reflects the selected adapter's conversion rate with JPY exponent 0 and no floating-point money arithmetic
 
 ### Requirement: Shopping flow
-A shopper SHALL be able to browse, view detail, add to cart, checkout with a shipping address, pay (mock), track shipments, confirm delivery, and request an invoice — all against the live API.
+A shopper SHALL be able to browse, view detail, add to cart, checkout with a shipping address, pay (mock), track orders/shipments, confirm delivery, and request an invoice through the selected API adapter. The MVP SHALL default to the fixed-data mock adapter and SHALL not require the live API.
 
 #### Scenario: end-to-end purchase
-- **WHEN** a registered shopper completes checkout on a non-empty cart
-- **THEN** orders appear under Orders and the cart is empty
+- **WHEN** a shopper completes checkout on a non-empty mock cart
+- **THEN** the resulting order appears in the buyer center and the cart is empty
+
+### Requirement: B2B2C mall-style PC storefront shell
+The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The visual language SHALL use #ca151e for brand/price/active states, #f5f5f5 section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use Nuxt-native semantic components and SHALL NOT depend on Element Plus.
+
+#### Scenario: shopper opens any mall page
+- **WHEN** a shopper navigates to a buyer-facing route
+- **THEN** the shared desktop shell wraps the route content and its nav/search/cart controls are usable
+
+### Requirement: Mock API adapter
+The mall SHALL default to a fixed-data mock adapter that implements the existing `@vmall/shared` API client surface. The adapter SHALL support auth, catalog, currency conversion, cart mutation, checkout, order/payment/shipment state, and invoices without a backend. A runtime configuration switch SHALL select the live API client later without changing page call sites.
+
+#### Scenario: mall runs without backend
+- **WHEN** the mall starts with mock mode enabled and the API service is unavailable
+- **THEN** browsing, cart, checkout, payment, orders and invoice pages return deterministic mock data and remain functional
+
+### Requirement: Mock PC home page
+The mall home page SHALL render a hero carousel, a six-item quick-link strip with promotion tiles, and bilingual product floors with a left advert and product-card grid.
+
+#### Scenario: shopper lands on home
+- **WHEN** `/` loads in mock mode
+- **THEN** the carousel, quick links, promotions and every non-empty product floor render fixed mock content
+
+### Requirement: Product discovery pages
+The mall SHALL provide `/search` with breadcrumb, category, brand and sort controls, a five-column desktop product grid, pagination and an empty state. It SHALL provide `/goods/[id]` with image gallery/zoom, bilingual name/subtitle, integer-minor-unit prices, attribute and SKU selection, stock-aware quantity, coupons/activity summary, store card, sales rail, and detail/comments/after-sale tabs.
+
+#### Scenario: filter and inspect a product
+- **WHEN** a shopper filters the search page and opens a product
+- **THEN** matching mock cards are shown and selecting an in-stock SKU updates the displayed price, stock and cart target
+
+### Requirement: Mock transaction flow
+The mall SHALL provide a store-grouped cart, address-selecting checkout preview, mock payment selection and payment-success result. Cart quantity/removal, selection totals, checkout and mock payment SHALL update the in-memory mock state for the current browser session.
+
+#### Scenario: complete mock purchase
+- **WHEN** a shopper adds an in-stock SKU, checks out with a mock address and confirms a mock payment
+- **THEN** the cart is cleared, the success page is shown and the new order appears in the user order list
+
+### Requirement: Auth and buyer center
+The mall SHALL provide B2B2C mall-style login, register and forgot-password panels backed by deterministic mock auth. `/user` SHALL render a two-column buyer center with dashboard, order list/detail, addresses, favorites, coupons and invoices.
+
+#### Scenario: sign in and inspect buyer data
+- **WHEN** a shopper submits the mock login form and opens `/user`
+- **THEN** the buyer-center shell and fixed account/order/address/favorite/coupon/invoice data render without backend access
+
+### Requirement: Store and marketing pages
+The mall SHALL provide a store directory, store home, timed seckill page, collective-buy list and points-mall home using fixed bilingual mock content. Marketing pages MAY be display-only except navigation to product detail.
+
+#### Scenario: navigate storefront discovery channels
+- **WHEN** a shopper opens stores, seckill, collective or integral routes
+- **THEN** each page renders the appropriate B2B2C mall-style banner/filter/session/card layout and product links resolve to mock product details