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

apps/mall/components/PriceText.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{
+  amountMinor: number;
+  currency: string;
+}>();
+
+const { formatPrice, currency } = usePrice();
+const display = ref("");
+const failed = ref(false);
+
+async function refresh(): Promise<void> {
+  if (import.meta.server) return;
+  failed.value = false;
+  try {
+    display.value = await formatPrice(props.amountMinor, props.currency, currency.value);
+  } catch {
+    failed.value = true;
+    display.value = "";
+  }
+}
+
+watch(
+  [() => props.amountMinor, () => props.currency, currency],
+  () => void refresh(),
+  { immediate: true },
+);
+</script>
+
+<template>
+  <span v-if="failed" class="muted">{{ $t("mall.notAvailable") }}</span>
+  <span v-else>{{ display || $t("common.loading") }}</span>
+</template>

apps/mall/components/StatusBadge.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{ status: string; kind: "order" | "shipment" | "invoice" }>();
+
+const tone = computed(() => {
+  if (["completed", "delivered", "issued"].includes(props.status)) return "green";
+  if (["paid", "fulfilling", "shipped"].includes(props.status)) return "blue";
+  if (["cancelled"].includes(props.status)) return "red";
+  return "orange";
+});
+
+const label = computed(() => {
+  const root = props.kind === "order" ? "order.status" : props.kind === "shipment" ? "shipment.status" : "invoice.status";
+  return `${root}.${props.status}`;
+});
+</script>
+
+<template>
+  <span class="badge" :class="tone">{{ $t(label) }}</span>
+</template>