feat: three nuxt frontends, demo seed, rounding + money-exponent + rate-cast fixes, archived specs

apps/mall/pages/index.vue

@@ -1,6 +1,144 @@
+<script setup lang="ts">
+import type { Category, Product, Paged, Sku } from "@vmall/shared";
+import { t as localized } from "@vmall/shared";
+
+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))));
+</script>
+
 <template>
-  <div>
-    <h1 class="page-title">{{ $t("common.appName") }}</h1>
-    <p class="muted">{{ $t("common.loading") }}</p>
-  </div>
+  <section>
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("mall.catalogTitle") }}</h1>
+    </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>
+        </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 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>
+.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; }
+}
+</style>