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

2026-09-17 13:34:38 +08:00
parent dc9fd31c5e
commit 653f13161a
85 changed files with 4327 additions and 106 deletions
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { LocalizedText, Shop } from "@vmall/shared";
+
+definePageMeta({ middleware: "auth" });
+
+const { $api } = useNuxtApp();
+const { locale, t } = useI18n();
+
+const shops = ref<Shop[]>([]);
+const loading = ref(true);
+const errorMessage = ref("");
+const createError = ref("");
+const creating = ref(false);
+const updatingId = ref<string | null>(null);
+const nameEn = ref("");
+const nameZh = ref("");
+const slug = ref("");
+
+function localizedName(name: LocalizedText): string {
+  return name[locale.value] ?? name.en ?? Object.values(name)[0] ?? "";
+}
+
+function formatDate(value: string): string {
+  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
+}
+
+function statusClass(status: Shop["status"]): string {
+  return status === "active" ? "green" : "red";
+}
+
+async function loadShops(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    shops.value = await $api.admin.listShops();
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function createShop(): Promise<void> {
+  createError.value = "";
+  if (!nameEn.value.trim() || !nameZh.value.trim() || !slug.value.trim()) {
+    createError.value = t("common.required");
+    return;
+  }
+
+  creating.value = true;
+  try {
+    await $api.admin.createShop(
+      { en: nameEn.value.trim(), zh: nameZh.value.trim() },
+      slug.value.trim(),
+    );
+    nameEn.value = "";
+    nameZh.value = "";
+    slug.value = "";
+    await loadShops();
+  } catch (error: unknown) {
+    createError.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function setStatus(shop: Shop): Promise<void> {
+  updatingId.value = shop.id;
+  errorMessage.value = "";
+  const nextStatus = shop.status === "active" ? "suspended" : "active";
+  try {
+    await $api.admin.setShopStatus(shop.id, nextStatus);
+    await loadShops();
+  } catch (error: unknown) {
+    errorMessage.value = error instanceof Error ? error.message : t("common.error");
+  } finally {
+    updatingId.value = null;
+  }
+}
+
+onMounted(() => {
+  void loadShops();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-head">
+      <h1 class="page-title">{{ $t("nav.shops") }}</h1>
+    </div>
+    <section class="card create-card">
+      <h2>{{ $t("admin.createShop") }}</h2>
+      <div class="form-grid">
+        <div class="field">
+          <label for="shop-name-en">{{ $t("admin.shopNameEn") }}</label>
+          <input id="shop-name-en" v-model="nameEn" type="text" required />
+        </div>
+        <div class="field">
+          <label for="shop-name-zh">{{ $t("admin.shopNameZh") }}</label>
+          <input id="shop-name-zh" v-model="nameZh" type="text" required />
+        </div>
+        <div class="field">
+          <label for="shop-slug">{{ $t("admin.shopSlug") }}</label>
+          <input id="shop-slug" v-model="slug" type="text" required />
+        </div>
+      </div>
+      <p v-if="createError" class="error-text" role="alert">{{ createError }}</p>
+      <button class="btn primary" type="button" :disabled="creating" @click="createShop">
+        {{ creating ? $t("common.loading") : $t("common.create") }}
+      </button>
+    </section>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-else-if="errorMessage" class="error-text" role="alert">{{ errorMessage }}</p>
+    <div v-else-if="shops.length === 0" class="card muted">{{ $t("common.empty") }}</div>
+    <div v-else class="table-wrap card">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{{ $t("admin.shopNameEn") }}</th>
+            <th>{{ $t("admin.shopSlug") }}</th>
+            <th>{{ $t("admin.shopStatus") }}</th>
+            <th>{{ $t("admin.created") }}</th>
+            <th>{{ $t("common.actions") }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="shop in shops" :key="shop.id">
+            <td>{{ localizedName(shop.name) }}</td>
+            <td><code>{{ shop.slug }}</code></td>
+            <td><span class="badge" :class="statusClass(shop.status)">{{ $t(`admin.${shop.status}`) }}</span></td>
+            <td>{{ formatDate(shop.created_at) }}</td>
+            <td>
+              <button class="btn sm" :class="{ danger: shop.status === 'active' }" type="button" :disabled="updatingId === shop.id" @click="setStatus(shop)">
+                {{ updatingId === shop.id ? $t("common.loading") : $t(shop.status === "active" ? "admin.suspend" : "admin.activate") }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.create-card { margin-bottom: 20px; }
+.create-card h2 { font-size: 16px; margin: 0 0 16px; }
+.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.table-wrap { overflow-x: auto; padding: 0; }
+.table { min-width: 720px; }
+code { background: #f0f2f5; border-radius: 4px; padding: 2px 5px; }
+@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
+</style>