james/vmall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): adopt Tailwind v4 design system and archive change

Browse Source 
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin
- Add @vmall/shared/theme.css tokens with html[data-accent] presets
- Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage,
  VAccentSwatch, useAccent) as a Nuxt module
- Convert all three apps to kit + utilities; delete ui.css/mall.css and
  every <style scoped>; consoles get accent presets, mall locked to red
- Fix VCard boolean prop default (padding) and PDP/store stale
  useAsyncData keys on param navigation
- Archive adopt-tailwind-design-system; new frontend-ui capability spec
This commit is contained in:
Chengdong Zhang
2026-09-22 18:22:50 +08:00
parent 4d2ee3b0bf
commit 0d0e10b97b
101 changed files with 2833 additions and 7207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/shop-admin/app.vue
+41 -31
View File
@@ -2,10 +2,12 @@
const session = useSessionStore();
const { locale, locales, setLocale } = useI18n();
const route = useRoute();
onMounted(() => session.hydrate());
const { boot } = useAccent();
const isAuthPage = computed(() => route.path === "/login");
boot();
onMounted(() => session.hydrate());
watchEffect(() => {
if (import.meta.client && session.token === null && !isAuthPage.value && route.path !== "/") {
// pages opt into auth middleware; nothing global here
@@ -17,34 +19,42 @@ watchEffect(() => {
<div v-if="isAuthPage">
<NuxtPage />
</div>
<div v-else class="auth-layout">
<aside>
<div class="brand">{{ $t("common.appName") }} · Shop</div>
<NuxtLink to="/">{{ $t("nav.dashboard") }}</NuxtLink>
<NuxtLink to="/products">{{ $t("nav.products") }}</NuxtLink>
<NuxtLink to="/orders">{{ $t("nav.orders") }}</NuxtLink>
<NuxtLink to="/shipments">{{ $t("nav.shipments") }}</NuxtLink>
<NuxtLink to="/invoices">{{ $t("nav.invoices") }}</NuxtLink>
<NuxtLink to="/coupons">{{ $t("nav.coupons") }}</NuxtLink>
<NuxtLink to="/flash-sales">{{ $t("nav.flashSales") }}</NuxtLink>
<NuxtLink to="/group-buying">{{ $t("nav.groupBuying") }}</NuxtLink>
</aside>
<main>
<div class="main-head">
<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>
<NuxtPage />
</main>
<div v-else class="min-h-screen bg-bg font-sans text-text">
<div class="flex min-h-screen">
<aside class="w-60 shrink-0 border-r border-border bg-surface px-4 py-5">
<div class="mb-6 px-3 text-lg font-bold text-text">{{ $t("common.appName") }} · Shop</div>
<nav class="grid gap-1" :aria-label="$t('common.appName')">
<NuxtLink to="/" exact-active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.dashboard") }}</NuxtLink>
<NuxtLink to="/products" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.products") }}</NuxtLink>
<NuxtLink to="/orders" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.orders") }}</NuxtLink>
<NuxtLink to="/shipments" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.shipments") }}</NuxtLink>
<NuxtLink to="/invoices" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.invoices") }}</NuxtLink>
<NuxtLink to="/coupons" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.coupons") }}</NuxtLink>
<NuxtLink to="/flash-sales" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.flashSales") }}</NuxtLink>
<NuxtLink to="/group-buying" active-class="bg-primary-soft text-primary" class="rounded-md px-3 py-2 text-sm font-medium text-muted hover:bg-bg">{{ $t("nav.groupBuying") }}</NuxtLink>
</nav>
</aside>
<main class="min-w-0 flex-1">
<header class="flex min-h-16 items-center justify-end gap-4 border-b border-border bg-surface px-6">
<VAccentSwatch />
<select
:value="locale"
:aria-label="$t('common.language')"
class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30"
@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="text-sm text-muted">{{ session.user?.display_name }}</span>
<VBtn size="sm" @click="session.logout()">{{ $t("common.logout") }}</VBtn>
</template>
<NuxtLink v-else to="/login" class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-2.5 py-1 text-[13px] font-medium text-white hover:bg-primary-hover">{{ $t("common.login") }}</NuxtLink>
</header>
<div class="px-6">
<NuxtPage />
</div>
</main>
</div>
</div>
</template>
apps/shop-admin/components/ProductForm.vue
+34 -49
View File
@@ -58,53 +58,38 @@ function submit(): void {
</script>
<template>
<form class="card form-narrow product-form" @submit.prevent="submit">
<div v-if="validationError" class="error-text" role="alert">{{ validationError }}</div>
<div class="field">
<label for="product-slug">{{ $t("product.slug") }}</label>
<input id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
</div>
<div class="field">
<label for="product-name-en">{{ $t("product.nameEn") }}</label>
<input id="product-name-en" v-model="nameEn" required />
</div>
<div class="field">
<label for="product-name-zh">{{ $t("product.nameZh") }}</label>
<input id="product-name-zh" v-model="nameZh" />
</div>
<div class="field">
<label for="product-description-en">{{ $t("product.descEn") }}</label>
<textarea id="product-description-en" v-model="descriptionEn" rows="4" />
</div>
<div class="field">
<label for="product-description-zh">{{ $t("product.descZh") }}</label>
<textarea id="product-description-zh" v-model="descriptionZh" rows="4" />
</div>
<div class="field">
<label for="product-category">{{ $t("product.category") }}</label>
<select id="product-category" v-model="categoryId">
<option value="">{{ $t("shop.categoryOptional") }}</option>
<option v-for="category in categories" :key="category.id" :value="category.id">
{{ localized(category.name, locale) }}
</option>
</select>
</div>
<div class="field">
<label for="product-images">{{ $t("product.images") }}</label>
<textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" />
</div>
<button class="btn primary" type="submit" :disabled="busy">
{{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
</button>
</form>
<VCard class="mx-auto my-10 w-full max-w-[720px]">
<form @submit.prevent="submit">
<div v-if="validationError" class="my-2 text-sm text-danger" role="alert">{{ validationError }}</div>
<VField :label="$t('product.slug')">
<VInput id="product-slug" v-model="slug" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" />
</VField>
<VField :label="$t('product.nameEn')">
<VInput id="product-name-en" v-model="nameEn" required />
</VField>
<VField :label="$t('product.nameZh')">
<VInput id="product-name-zh" v-model="nameZh" />
</VField>
<VField :label="$t('product.descEn')">
<textarea id="product-description-en" v-model="descriptionEn" rows="4" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
</VField>
<VField :label="$t('product.descZh')">
<textarea id="product-description-zh" v-model="descriptionZh" rows="4" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
</VField>
<VField :label="$t('product.category')">
<select id="product-category" v-model="categoryId" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option value="">{{ $t("shop.categoryOptional") }}</option>
<option v-for="category in categories" :key="category.id" :value="category.id">
{{ localized(category.name, locale) }}
</option>
</select>
</VField>
<VField :label="$t('product.images')">
<textarea id="product-images" v-model="images" rows="4" :placeholder="$t('shop.imagesHint')" class="w-full resize-y rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" />
</VField>
<VBtn variant="primary" type="submit" :disabled="busy">
{{ busy ? $t("common.loading") : product ? $t("shop.updateProduct") : $t("shop.saveProduct") }}
</VBtn>
</form>
</VCard>
</template>
<style scoped>
.product-form {
max-width: 720px;
margin: 0;
}
.product-form textarea {
resize: vertical;
}
</style>
apps/shop-admin/nuxt.config.ts
+5 -2
View File
@@ -1,6 +1,9 @@
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
modules: ["@pinia/nuxt", "@nuxtjs/i18n"],
css: ["@vmall/shared/ui.css"],
modules: ["@pinia/nuxt", "@nuxtjs/i18n", "@vmall/ui/nuxt"],
css: ["@vmall/shared/theme.css"],
vite: { plugins: [tailwindcss()] },
devtools: { enabled: false },
devServer: { port: 3001 },
runtimeConfig: {
apps/shop-admin/package.json
+6 -1
View File
@@ -14,6 +14,11 @@
"nuxt": "^3.15.4",
"pinia": "^2.3.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
"vue-router": "^4.5.0",
"@vmall/ui": "workspace:*"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.13",
"tailwindcss": "^4.1.13"
}
}
apps/shop-admin/pages/coupons.vue
+54 -127
View File
@@ -180,137 +180,64 @@ onMounted(async () => {
</script>
<template>
<div class="page">
<h1 class="page-title">{{ $t("shop.couponList") }}</h1>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<div v-if="message" class="muted" role="status">{{ message }}</div>
<VPage :title="$t('shop.couponList')">
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
<section class="card">
<h2>{{ editingId ? $t("shop.editCoupon") : $t("shop.newCoupon") }}</h2>
<div class="form-grid">
<label>
<span>{{ $t("shop.couponTitleEn") }}</span>
<input v-model="form.titleEn" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.couponTitleZh") }}</span>
<input v-model="form.titleZh" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.couponAmount") }}</span>
<input v-model.number="form.amountMinor" class="input" type="number" min="1" step="1" />
</label>
<label>
<span>{{ $t("shop.couponThreshold") }}</span>
<input v-model.number="form.thresholdMinor" class="input" type="number" min="0" step="1" />
</label>
<label>
<span>{{ $t("shop.couponCurrency") }}</span>
<select v-model="form.currency" class="input">
<VCard class="mb-5">
<h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("shop.editCoupon") : $t("shop.newCoupon") }}</h2>
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
<VField :label="$t('shop.couponTitleEn')"><VInput v-model="form.titleEn" type="text" /></VField>
<VField :label="$t('shop.couponTitleZh')"><VInput v-model="form.titleZh" type="text" /></VField>
<VField :label="$t('shop.couponAmount')"><VInput v-model.number="form.amountMinor" type="number" min="1" step="1" /></VField>
<VField :label="$t('shop.couponThreshold')"><VInput v-model.number="form.thresholdMinor" type="number" min="0" step="1" /></VField>
<VField :label="$t('shop.couponCurrency')">
<select v-model="form.currency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
</select>
</label>
<label>
<span>{{ $t("shop.couponStock") }}</span>
<input v-model.number="form.stock" class="input" type="number" min="0" step="1" />
</label>
<label>
<span>{{ $t("shop.couponStartsAt") }}</span>
<input v-model="form.startsAt" class="input" type="datetime-local" />
</label>
<label>
<span>{{ $t("shop.couponEndsAt") }}</span>
<input v-model="form.endsAt" class="input" type="datetime-local" />
</label>
<label class="checkbox">
<input v-model="form.enabled" type="checkbox" />
<span>{{ $t("shop.couponEnabled") }}</span>
</label>
</VField>
<VField :label="$t('shop.couponStock')"><VInput v-model.number="form.stock" type="number" min="0" step="1" /></VField>
<VField :label="$t('shop.couponStartsAt')"><VInput v-model="form.startsAt" type="datetime-local" /></VField>
<VField :label="$t('shop.couponEndsAt')"><VInput v-model="form.endsAt" type="datetime-local" /></VField>
<label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="form.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.couponEnabled") }}</span></label>
</div>
<div class="form-actions">
<button class="btn primary" :disabled="saving" @click="submit">
{{ editingId ? $t("shop.updateCoupon") : $t("shop.createCoupon") }}
</button>
<button v-if="editingId" class="btn" type="button" @click="resetForm">
{{ $t("common.cancel") }}
</button>
<div class="flex gap-2">
<VBtn variant="primary" :disabled="saving" @click="submit">{{ editingId ? $t("shop.updateCoupon") : $t("shop.createCoupon") }}</VBtn>
<VBtn v-if="editingId" type="button" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
</div>
</section>
</VCard>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="!templates.length" class="card muted">{{ $t("common.empty") }}</div>
<div v-else class="table-wrap">
<table class="table">
<thead>
<tr>
<th>{{ $t("shop.couponTitleEn") }}</th>
<th>{{ $t("shop.couponAmount") }}</th>
<th>{{ $t("shop.couponThreshold") }}</th>
<th>{{ $t("shop.couponStock") }}</th>
<th>{{ $t("shop.couponStartsAt") }}</th>
<th>{{ $t("shop.couponEndsAt") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="template in templates" :key="template.id">
<td>{{ template.title[locale] ?? template.title.en }}</td>
<td>{{ fmt(template.amount_minor, template.currency) }}</td>
<td>{{ fmt(template.threshold_minor, template.currency) }}</td>
<td>{{ template.stock }}</td>
<td>{{ template.starts_at.slice(0, 10) }}</td>
<td>{{ template.ends_at.slice(0, 10) }}</td>
<td>
<span class="badge" :class="template.enabled ? 'green' : 'red'">
{{ template.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}
</span>
</td>
<td class="actions">
<button class="btn sm" :disabled="actionId === template.id" @click="edit(template)">
{{ $t("shop.edit") }}
</button>
<button class="btn sm" :disabled="actionId === template.id" @click="toggleEnabled(template)">
{{ template.enabled ? $t("shop.enabledOff") : $t("shop.enabledOn") }}
</button>
<button class="btn sm" :disabled="actionId === template.id" @click="remove(template)">
{{ $t("common.delete") }}
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!templates.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<VTable v-else>
<thead>
<tr>
<th>{{ $t("shop.couponTitleEn") }}</th>
<th>{{ $t("shop.couponAmount") }}</th>
<th>{{ $t("shop.couponThreshold") }}</th>
<th>{{ $t("shop.couponStock") }}</th>
<th>{{ $t("shop.couponStartsAt") }}</th>
<th>{{ $t("shop.couponEndsAt") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="template in templates" :key="template.id">
<td>{{ template.title[locale] ?? template.title.en }}</td>
<td>{{ fmt(template.amount_minor, template.currency) }}</td>
<td>{{ fmt(template.threshold_minor, template.currency) }}</td>
<td>{{ template.stock }}</td>
<td>{{ template.starts_at.slice(0, 10) }}</td>
<td>{{ template.ends_at.slice(0, 10) }}</td>
<td><VBadge :tone="template.enabled ? 'green' : 'red'">{{ template.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge></td>
<td class="flex flex-wrap gap-1.5">
<VBtn size="sm" :disabled="actionId === template.id" @click="edit(template)">{{ $t("shop.edit") }}</VBtn>
<VBtn size="sm" :disabled="actionId === template.id" @click="toggleEnabled(template)">{{ template.enabled ? $t("shop.enabledOff") : $t("shop.enabledOn") }}</VBtn>
<VBtn size="sm" :disabled="actionId === template.id" @click="remove(template)">{{ $t("common.delete") }}</VBtn>
</td>
</tr>
</tbody>
</VTable>
</VPage>
</template>
<style scoped>
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 12px 0;
}
.form-grid label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
}
.form-grid .checkbox {
flex-direction: row;
align-items: center;
gap: 8px;
}
.form-actions {
display: flex;
gap: 8px;
}
.table-wrap {
overflow-x: auto;
}
.actions {
display: flex;
gap: 6px;
}
</style>
apps/shop-admin/pages/flash-sales.vue
+73 -188
View File
@@ -232,211 +232,96 @@ onMounted(async () => {
</script>
<template>
<div class="page">
<h1 class="page-title">{{ $t("shop.flashSaleList") }}</h1>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<div v-if="message" class="muted" role="status">{{ message }}</div>
<VPage :title="$t('shop.flashSaleList')">
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
<section class="card create-card">
<h2>{{ editingSessionId ? $t("shop.editFlashSale") : $t("shop.newFlashSale") }}</h2>
<div class="form-grid">
<label>
<span>{{ $t("shop.flashLabelEn") }}</span>
<input v-model="sessionForm.labelEn" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.flashLabelZh") }}</span>
<input v-model="sessionForm.labelZh" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.flashStartsAt") }}</span>
<input v-model="sessionForm.startsAt" class="input" type="datetime-local" />
</label>
<label>
<span>{{ $t("shop.flashEndsAt") }}</span>
<input v-model="sessionForm.endsAt" class="input" type="datetime-local" />
</label>
<label class="checkbox">
<input v-model="sessionForm.enabled" type="checkbox" />
<span>{{ $t("shop.flashEnabled") }}</span>
</label>
<VCard class="mb-5">
<h2 class="mb-4 text-base font-semibold">{{ editingSessionId ? $t("shop.editFlashSale") : $t("shop.newFlashSale") }}</h2>
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
<VField :label="$t('shop.flashLabelEn')"><VInput v-model="sessionForm.labelEn" type="text" /></VField>
<VField :label="$t('shop.flashLabelZh')"><VInput v-model="sessionForm.labelZh" type="text" /></VField>
<VField :label="$t('shop.flashStartsAt')"><VInput v-model="sessionForm.startsAt" type="datetime-local" /></VField>
<VField :label="$t('shop.flashEndsAt')"><VInput v-model="sessionForm.endsAt" type="datetime-local" /></VField>
<label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="sessionForm.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.flashEnabled") }}</span></label>
</div>
<div class="form-actions">
<button class="btn primary" :disabled="saving" @click="saveSession">
{{ editingSessionId ? $t("shop.updateFlashSale") : $t("shop.createFlashSale") }}
</button>
<button v-if="editingSessionId" class="btn" type="button" @click="resetSessionForm">
{{ $t("common.cancel") }}
</button>
<div class="flex gap-2">
<VBtn variant="primary" :disabled="saving" @click="saveSession">{{ editingSessionId ? $t("shop.updateFlashSale") : $t("shop.createFlashSale") }}</VBtn>
<VBtn v-if="editingSessionId" type="button" @click="resetSessionForm">{{ $t("common.cancel") }}</VBtn>
</div>
</section>
</VCard>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="!sessions.length" class="card muted">{{ $t("common.empty") }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!sessions.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<template v-else>
<section v-for="session in sessions" :key="session.id" class="card session-card">
<header class="session-head">
<div>
<VCard v-for="session in sessions" :key="session.id" class="mb-4">
<header class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-2">
<strong>{{ session.label[locale] ?? session.label.en }}</strong>
<span class="muted">
{{ session.starts_at.slice(0, 10) }} → {{ session.ends_at.slice(0, 10) }}
</span>
<span class="badge" :class="session.enabled ? 'green' : 'red'">
{{ session.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}
</span>
<span class="text-sm text-muted">{{ session.starts_at.slice(0, 10) }} → {{ session.ends_at.slice(0, 10) }}</span>
<VBadge :tone="session.enabled ? 'green' : 'red'">{{ session.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge>
</div>
<div class="action-row">
<button class="btn sm" :disabled="actionId === session.id" @click="editSession(session)">
{{ $t("shop.edit") }}
</button>
<button class="btn sm" :disabled="actionId === session.id" @click="startAddItem(session)">
{{ $t("shop.newFlashItem") }}
</button>
<button class="btn sm" :disabled="actionId === session.id" @click="removeSession(session)">
{{ $t("common.delete") }}
</button>
<div class="flex gap-1.5">
<VBtn size="sm" :disabled="actionId === session.id" @click="editSession(session)">{{ $t("shop.edit") }}</VBtn>
<VBtn size="sm" :disabled="actionId === session.id" @click="startAddItem(session)">{{ $t("shop.newFlashItem") }}</VBtn>
<VBtn size="sm" :disabled="actionId === session.id" @click="removeSession(session)">{{ $t("common.delete") }}</VBtn>
</div>
</header>
<h3 class="sub-title">{{ $t("shop.flashItems") }}</h3>
<div v-if="!session.items.length" class="muted">{{ $t("shop.noFlashItems") }}</div>
<div v-else class="table-wrap">
<table class="table">
<thead>
<tr>
<th>{{ $t("shop.flashSku") }}</th>
<th>{{ $t("shop.flashSalePrice") }}</th>
<th>{{ $t("shop.flashOriginalPrice") }}</th>
<th>{{ $t("shop.flashRemaining") }}</th>
<th>{{ $t("shop.flashSold") }}</th>
<th>{{ $t("shop.flashPerCustomerLimit") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in session.items" :key="item.id">
<td>{{ item.sku_code }}</td>
<td>{{ fmt(item.sale_price_minor, item.currency) }}</td>
<td>{{ fmt(item.original_price_minor, item.original_currency) }}</td>
<td>{{ item.reserved_stock }}</td>
<td>{{ item.sold_count }}</td>
<td>{{ item.per_customer_limit }}</td>
<td class="action-row">
<button class="btn sm" :disabled="actionId === item.id" @click="editItem(session, item)">
{{ $t("shop.edit") }}
</button>
<button class="btn sm" :disabled="actionId === item.id" @click="removeItem(item)">
{{ $t("common.delete") }}
</button>
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="mb-2 mt-4 text-sm font-semibold">{{ $t("shop.flashItems") }}</h3>
<div v-if="!session.items.length" class="text-muted">{{ $t("shop.noFlashItems") }}</div>
<VTable v-else>
<thead>
<tr>
<th>{{ $t("shop.flashSku") }}</th>
<th>{{ $t("shop.flashSalePrice") }}</th>
<th>{{ $t("shop.flashOriginalPrice") }}</th>
<th>{{ $t("shop.flashRemaining") }}</th>
<th>{{ $t("shop.flashSold") }}</th>
<th>{{ $t("shop.flashPerCustomerLimit") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in session.items" :key="item.id">
<td>{{ item.sku_code }}</td>
<td>{{ fmt(item.sale_price_minor, item.currency) }}</td>
<td>{{ fmt(item.original_price_minor, item.original_currency) }}</td>
<td>{{ item.reserved_stock }}</td>
<td>{{ item.sold_count }}</td>
<td>{{ item.per_customer_limit }}</td>
<td class="flex gap-1.5">
<VBtn size="sm" :disabled="actionId === item.id" @click="editItem(session, item)">{{ $t("shop.edit") }}</VBtn>
<VBtn size="sm" :disabled="actionId === item.id" @click="removeItem(item)">{{ $t("common.delete") }}</VBtn>
</td>
</tr>
</tbody>
</VTable>
<div v-if="itemSessionId === session.id" class="item-form">
<h3 class="sub-title">
{{ editingItemId ? $t("shop.editFlashItem") : $t("shop.newFlashItem") }}
</h3>
<div class="form-grid">
<label>
<span>{{ $t("shop.flashSku") }}</span>
<select v-model="itemForm.skuId" class="input">
<div v-if="itemSessionId === session.id" class="mt-4 border-t border-border pt-3">
<h3 class="mb-2 text-sm font-semibold">{{ editingItemId ? $t("shop.editFlashItem") : $t("shop.newFlashItem") }}</h3>
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
<VField :label="$t('shop.flashSku')">
<select v-model="itemForm.skuId" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option value="">{{ $t("shop.flashSelectSku") }}</option>
<option v-for="option in skuOptions" :key="option.id" :value="option.id">
{{ option.label }}
</option>
<option v-for="option in skuOptions" :key="option.id" :value="option.id">{{ option.label }}</option>
</select>
</label>
<label>
<span>{{ $t("shop.flashSalePrice") }}</span>
<input v-model.number="itemForm.salePriceMinor" class="input" type="number" min="1" step="1" />
</label>
<label>
<span>{{ $t("shop.couponCurrency") }}</span>
<select v-model="itemForm.currency" class="input">
</VField>
<VField :label="$t('shop.flashSalePrice')"><VInput v-model.number="itemForm.salePriceMinor" type="number" min="1" step="1" /></VField>
<VField :label="$t('shop.couponCurrency')">
<select v-model="itemForm.currency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
</select>
</label>
<label>
<span>{{ $t("shop.flashReservedStock") }}</span>
<input v-model.number="itemForm.reservedStock" class="input" type="number" min="0" step="1" />
</label>
<label>
<span>{{ $t("shop.flashPerCustomerLimit") }}</span>
<input v-model.number="itemForm.perCustomerLimit" class="input" type="number" min="1" step="1" />
</label>
</VField>
<VField :label="$t('shop.flashReservedStock')"><VInput v-model.number="itemForm.reservedStock" type="number" min="0" step="1" /></VField>
<VField :label="$t('shop.flashPerCustomerLimit')"><VInput v-model.number="itemForm.perCustomerLimit" type="number" min="1" step="1" /></VField>
</div>
<div class="form-actions">
<button class="btn primary" :disabled="saving" @click="saveItem(session)">
{{ $t("shop.saveFlashItem") }}
</button>
<button class="btn" type="button" @click="itemSessionId = ''; resetItemForm()">
{{ $t("common.cancel") }}
</button>
<div class="flex gap-2">
<VBtn variant="primary" :disabled="saving" @click="saveItem(session)">{{ $t("shop.saveFlashItem") }}</VBtn>
<VBtn type="button" @click="itemSessionId = ''; resetItemForm()">{{ $t("common.cancel") }}</VBtn>
</div>
</div>
</section>
</VCard>
</template>
</div>
</VPage>
</template>
<style scoped>
.create-card {
margin-bottom: 20px;
}
.create-card h2 {
font-size: 16px;
margin: 0 0 16px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 12px 0;
}
.form-grid label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
}
.form-grid .checkbox {
flex-direction: row;
align-items: center;
gap: 8px;
}
.form-actions {
display: flex;
gap: 8px;
}
.session-card {
margin-bottom: 16px;
}
.session-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.session-head .muted {
margin: 0 10px;
}
.sub-title {
font-size: 14px;
margin: 16px 0 8px;
}
.table-wrap {
overflow-x: auto;
}
.action-row {
display: flex;
gap: 6px;
}
.item-form {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--mall-line, #eee);
}
</style>
apps/shop-admin/pages/group-buying.vue
+68 -159
View File
@@ -186,171 +186,80 @@ onMounted(async () => {
</script>
<template>
<div class="page">
<h1 class="page-title">{{ $t("shop.groupBuyingList") }}</h1>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<div v-if="message" class="muted" role="status">{{ message }}</div>
<VPage :title="$t('shop.groupBuyingList')">
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<div v-if="message" class="my-2 text-sm text-muted" role="status">{{ message }}</div>
<section class="card create-card">
<h2>{{ editingId ? $t("shop.editGroupActivity") : $t("shop.newGroupActivity") }}</h2>
<div class="form-grid">
<label>
<span>{{ $t("shop.groupSku") }}</span>
<select v-model="form.skuId" class="input">
<VCard class="mb-5">
<h2 class="mb-4 text-base font-semibold">{{ editingId ? $t("shop.editGroupActivity") : $t("shop.newGroupActivity") }}</h2>
<div class="my-3 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
<VField :label="$t('shop.groupSku')">
<select v-model="form.skuId" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option value="">{{ $t("shop.flashSelectSku") }}</option>
<option v-for="option in skuOptions" :key="option.id" :value="option.id">
{{ option.label }}
</option>
<option v-for="option in skuOptions" :key="option.id" :value="option.id">{{ option.label }}</option>
</select>
</label>
<label>
<span>{{ $t("shop.groupNameEn") }}</span>
<input v-model="form.nameEn" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.groupNameZh") }}</span>
<input v-model="form.nameZh" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.groupDescriptionEn") }}</span>
<input v-model="form.descriptionEn" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.groupDescriptionZh") }}</span>
<input v-model="form.descriptionZh" class="input" type="text" />
</label>
<label>
<span>{{ $t("shop.groupPrice") }}</span>
<input v-model.number="form.groupPriceMinor" class="input" type="number" min="1" step="1" />
</label>
<label>
<span>{{ $t("shop.couponCurrency") }}</span>
<select v-model="form.currency" class="input">
</VField>
<VField :label="$t('shop.groupNameEn')"><VInput v-model="form.nameEn" type="text" /></VField>
<VField :label="$t('shop.groupNameZh')"><VInput v-model="form.nameZh" type="text" /></VField>
<VField :label="$t('shop.groupDescriptionEn')"><VInput v-model="form.descriptionEn" type="text" /></VField>
<VField :label="$t('shop.groupDescriptionZh')"><VInput v-model="form.descriptionZh" type="text" /></VField>
<VField :label="$t('shop.groupPrice')"><VInput v-model.number="form.groupPriceMinor" type="number" min="1" step="1" /></VField>
<VField :label="$t('shop.couponCurrency')">
<select v-model="form.currency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option v-for="c in currencies" :key="c.code" :value="c.code">{{ c.code }}</option>
</select>
</label>
<label>
<span>{{ $t("shop.groupRequiredMembers") }}</span>
<input v-model.number="form.requiredMembers" class="input" type="number" min="2" step="1" />
</label>
<label>
<span>{{ $t("shop.groupLifetimeHours") }}</span>
<input v-model.number="form.groupLifetimeHours" class="input" type="number" min="1" step="1" />
</label>
<label>
<span>{{ $t("shop.groupStartsAt") }}</span>
<input v-model="form.startsAt" class="input" type="datetime-local" />
</label>
<label>
<span>{{ $t("shop.groupEndsAt") }}</span>
<input v-model="form.endsAt" class="input" type="datetime-local" />
</label>
<label class="checkbox">
<input v-model="form.enabled" type="checkbox" />
<span>{{ $t("shop.groupEnabled") }}</span>
</label>
</VField>
<VField :label="$t('shop.groupRequiredMembers')"><VInput v-model.number="form.requiredMembers" type="number" min="2" step="1" /></VField>
<VField :label="$t('shop.groupLifetimeHours')"><VInput v-model.number="form.groupLifetimeHours" type="number" min="1" step="1" /></VField>
<VField :label="$t('shop.groupStartsAt')"><VInput v-model="form.startsAt" type="datetime-local" /></VField>
<VField :label="$t('shop.groupEndsAt')"><VInput v-model="form.endsAt" type="datetime-local" /></VField>
<label class="flex items-center gap-2 text-sm font-medium text-text"><input v-model="form.enabled" type="checkbox" class="h-4 w-4 accent-primary" /><span>{{ $t("shop.groupEnabled") }}</span></label>
</div>
<div class="form-actions">
<button class="btn primary" :disabled="saving" @click="save">
{{ editingId ? $t("shop.updateGroupActivity") : $t("shop.createGroupActivity") }}
</button>
<button v-if="editingId" class="btn" type="button" @click="resetForm">
{{ $t("common.cancel") }}
</button>
<div class="flex gap-2">
<VBtn variant="primary" :disabled="saving" @click="save">{{ editingId ? $t("shop.updateGroupActivity") : $t("shop.createGroupActivity") }}</VBtn>
<VBtn v-if="editingId" type="button" @click="resetForm">{{ $t("common.cancel") }}</VBtn>
</div>
</section>
</VCard>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="!activities.length" class="card muted">{{ $t("common.empty") }}</div>
<div v-else class="table-wrap card">
<table class="table">
<thead>
<tr>
<th>{{ $t("shop.groupSku") }}</th>
<th>{{ $t("shop.groupNameEn") }}</th>
<th>{{ $t("shop.groupPrice") }}</th>
<th>{{ $t("shop.groupRequiredMembers") }}</th>
<th>{{ $t("shop.groupLifetimeHours") }}</th>
<th>{{ $t("shop.groupStartsAt") }}</th>
<th>{{ $t("shop.groupOpenGroups") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="activity in activities" :key="activity.id">
<td>{{ activity.sku_code }}</td>
<td>{{ activity.name[locale] ?? activity.name.en }}</td>
<td>{{ fmt(activity.group_price_minor, activity.currency) }}</td>
<td>{{ activity.required_members }}</td>
<td>{{ activity.group_lifetime_hours }}</td>
<td>{{ activity.starts_at.slice(0, 10) }}</td>
<td>
<template v-if="activity.open_groups.length">
<span v-for="group in activity.open_groups" :key="group.id" class="badge orange">
{{ $t("shop.groupPaidMembers") }} {{ group.paid_member_count }}/{{ group.required_members }}
</span>
</template>
<span v-else class="muted">{{ $t("shop.groupNoOpenGroups") }}</span>
</td>
<td>
<span class="badge" :class="activity.enabled ? 'green' : 'red'">
{{ activity.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}
</span>
</td>
<td class="action-row">
<button class="btn sm" :disabled="actionId === activity.id" @click="edit(activity)">
{{ $t("shop.edit") }}
</button>
<button class="btn sm" :disabled="actionId === activity.id" @click="remove(activity)">
{{ $t("common.delete") }}
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!activities.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<VTable v-else>
<thead>
<tr>
<th>{{ $t("shop.groupSku") }}</th>
<th>{{ $t("shop.groupNameEn") }}</th>
<th>{{ $t("shop.groupPrice") }}</th>
<th>{{ $t("shop.groupRequiredMembers") }}</th>
<th>{{ $t("shop.groupLifetimeHours") }}</th>
<th>{{ $t("shop.groupStartsAt") }}</th>
<th>{{ $t("shop.groupOpenGroups") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="activity in activities" :key="activity.id">
<td>{{ activity.sku_code }}</td>
<td>{{ activity.name[locale] ?? activity.name.en }}</td>
<td>{{ fmt(activity.group_price_minor, activity.currency) }}</td>
<td>{{ activity.required_members }}</td>
<td>{{ activity.group_lifetime_hours }}</td>
<td>{{ activity.starts_at.slice(0, 10) }}</td>
<td>
<template v-if="activity.open_groups.length">
<VBadge v-for="group in activity.open_groups" :key="group.id" tone="orange" class="mr-1">
{{ $t("shop.groupPaidMembers") }} {{ group.paid_member_count }}/{{ group.required_members }}
</VBadge>
</template>
<span v-else class="text-muted">{{ $t("shop.groupNoOpenGroups") }}</span>
</td>
<td><VBadge :tone="activity.enabled ? 'green' : 'red'">{{ activity.enabled ? $t("shop.enabledOn") : $t("shop.enabledOff") }}</VBadge></td>
<td class="flex gap-1.5">
<VBtn size="sm" :disabled="actionId === activity.id" @click="edit(activity)">{{ $t("shop.edit") }}</VBtn>
<VBtn size="sm" :disabled="actionId === activity.id" @click="remove(activity)">{{ $t("common.delete") }}</VBtn>
</td>
</tr>
</tbody>
</VTable>
</VPage>
</template>
<style scoped>
.create-card {
margin-bottom: 20px;
}
.create-card h2 {
font-size: 16px;
margin: 0 0 16px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 12px 0;
}
.form-grid label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
}
.form-grid .checkbox {
flex-direction: row;
align-items: center;
gap: 8px;
}
.form-actions {
display: flex;
gap: 8px;
}
.table-wrap {
overflow-x: auto;
padding: 0;
}
.table {
min-width: 1100px;
}
.action-row {
display: flex;
gap: 6px;
}
</style>
apps/shop-admin/pages/index.vue
+24 -53
View File
@@ -61,67 +61,38 @@ const stats = computed(() => [
</script>
<template>
<div class="page">
<div class="page-head">
<h1 class="page-title">{{ $t("shop.dashboardTitle") }}</h1>
<button class="btn sm" :disabled="loading" @click="loadDashboard">{{ $t("common.search") }}</button>
</div>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<VPage :title="$t('shop.dashboardTitle')">
<template #actions>
<VBtn size="sm" :disabled="loading" @click="loadDashboard">{{ $t("common.search") }}</VBtn>
</template>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<template v-else>
<div class="stats-grid">
<div v-for="stat in stats" :key="stat.key" class="card stat-card">
<span class="muted">{{ $t(stat.label) }}</span>
<strong>{{ stat.value }}</strong>
</div>
<div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
<VCard v-for="stat in stats" :key="stat.key" class="grid gap-2">
<span class="text-sm text-muted">{{ $t(stat.label) }}</span>
<strong class="text-3xl font-bold text-text">{{ stat.value }}</strong>
</VCard>
</div>
<section v-if="shop" class="card shop-profile mt">
<h2>{{ $t("shop.profile") }}</h2>
<div class="profile-grid">
<div>
<span class="muted">{{ $t("product.shop") }}</span>
<VCard v-if="shop" class="mt-4">
<h2 class="mb-4 text-lg font-semibold text-text">{{ $t("shop.profile") }}</h2>
<div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
<div class="grid gap-1.5">
<span class="text-sm text-muted">{{ $t("product.shop") }}</span>
<strong>{{ localized(shop.name, locale) }}</strong>
</div>
<div>
<span class="muted">{{ $t("shop.slug") }}</span>
<div class="grid gap-1.5">
<span class="text-sm text-muted">{{ $t("shop.slug") }}</span>
<strong>{{ shop.slug }}</strong>
</div>
<div>
<span class="muted">{{ $t("shop.shopStatus") }}</span>
<span class="badge" :class="shop.status === 'active' ? 'green' : 'red'">
<div class="grid gap-1.5">
<span class="text-sm text-muted">{{ $t("shop.shopStatus") }}</span>
<VBadge :tone="shop.status === 'active' ? 'green' : 'red'">
{{ $t(`admin.${shop.status}`) }}
</span>
</VBadge>
</div>
</div>
</section>
</VCard>
</template>
</div>
</VPage>
</template>
<style scoped>
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 16px;
}
.stat-card {
display: grid;
gap: 8px;
}
.stat-card strong {
font-size: 28px;
}
.shop-profile h2 {
margin: 0 0 16px;
font-size: 18px;
}
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.profile-grid > div {
display: grid;
gap: 6px;
}
</style>
apps/shop-admin/pages/invoices.vue
+33 -41
View File
@@ -12,10 +12,11 @@ const loading = ref(true);
const error = ref("");
const actionId = ref("");
function statusClass(value: Invoice["status"]): string {
function statusClass(value: Invoice["status"]): "green" | "red" | "orange" {
return value === "issued" ? "green" : value === "cancelled" ? "red" : "orange";
}
async function loadInvoices(): Promise<void> {
loading.value = true;
error.value = "";
@@ -48,44 +49,35 @@ onMounted(() => {
</script>
<template>
<div class="page">
<h1 class="page-title">{{ $t("shop.invoiceList") }}</h1>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="!invoices.length" class="card muted">{{ $t("common.empty") }}</div>
<div v-else class="table-wrap">
<table class="table">
<thead>
<tr>
<th>{{ $t("shop.invoiceNo") }}</th>
<th>{{ $t("shop.orderNo") }}</th>
<th>{{ $t("invoice.invoiceTitle") }}</th>
<th>{{ $t("shop.kind") }}</th>
<th>{{ $t("shop.taxNo") }}</th>
<th>{{ $t("invoice.amount") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="invoice in invoices" :key="invoice.id">
<td>{{ invoice.invoice_no || $t("shop.noInvoice") }}</td>
<td><NuxtLink :to="`/orders/${invoice.order_id}`">{{ invoice.order_no ?? invoice.order_id }}</NuxtLink></td>
<td>{{ invoice.title }}</td>
<td>{{ $t(`invoice.${invoice.kind}`) }}</td>
<td>{{ invoice.tax_no || $t("shop.noInvoice") }}</td>
<td>{{ fmt(invoice.amount_minor, invoice.currency) }}</td>
<td><span class="badge" :class="statusClass(invoice.status)">{{ $t(`invoice.status.${invoice.status}`) }}</span></td>
<td><button v-if="invoice.status === 'requested'" class="btn sm primary" :disabled="actionId === invoice.id" @click="issueInvoice(invoice)">{{ $t("shop.issueInvoice") }}</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<VPage :title="$t('shop.invoiceList')">
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!invoices.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<VTable v-else>
<thead>
<tr>
<th>{{ $t("shop.invoiceNo") }}</th>
<th>{{ $t("shop.orderNo") }}</th>
<th>{{ $t("invoice.invoiceTitle") }}</th>
<th>{{ $t("shop.kind") }}</th>
<th>{{ $t("shop.taxNo") }}</th>
<th>{{ $t("invoice.amount") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="invoice in invoices" :key="invoice.id">
<td>{{ invoice.invoice_no || $t("shop.noInvoice") }}</td>
<td><NuxtLink :to="`/orders/${invoice.order_id}`" class="text-primary hover:underline">{{ invoice.order_no ?? invoice.order_id }}</NuxtLink></td>
<td>{{ invoice.title }}</td>
<td>{{ $t(`invoice.${invoice.kind}`) }}</td>
<td>{{ invoice.tax_no || $t("shop.noInvoice") }}</td>
<td>{{ fmt(invoice.amount_minor, invoice.currency) }}</td>
<td><VBadge :tone="statusClass(invoice.status)">{{ $t(`invoice.status.${invoice.status}`) }}</VBadge></td>
<td><VBtn v-if="invoice.status === 'requested'" variant="primary" size="sm" :disabled="actionId === invoice.id" @click="issueInvoice(invoice)">{{ $t("shop.issueInvoice") }}</VBtn></td>
</tr>
</tbody>
</VTable>
</VPage>
</template>
<style scoped>
.table-wrap {
overflow-x: auto;
}
</style>
apps/shop-admin/pages/login.vue
+16 -16
View File
@@ -27,21 +27,21 @@ async function submit(): Promise<void> {
</script>
<template>
<main class="page">
<form class="card form-narrow" @submit.prevent="submit">
<h1 class="page-title">{{ $t("auth.welcome") }}</h1>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<div class="field">
<label for="email">{{ $t("common.email") }}</label>
<input id="email" v-model="email" type="email" autocomplete="username" required />
</div>
<div class="field">
<label for="password">{{ $t("common.password") }}</label>
<input id="password" v-model="password" type="password" autocomplete="current-password" required />
</div>
<button class="btn primary" type="submit" :disabled="busy">
{{ busy ? $t("common.loading") : $t("common.login") }}
</button>
</form>
<main class="grid min-h-screen place-items-center bg-bg px-4 font-sans text-text">
<VCard class="w-full max-w-[420px]">
<form @submit.prevent="submit">
<h1 class="mb-5 text-xl font-bold text-text">{{ $t("auth.welcome") }}</h1>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<VField :label="$t('common.email')">
<VInput id="email" v-model="email" type="email" autocomplete="username" required />
</VField>
<VField :label="$t('common.password')">
<VInput id="password" v-model="password" type="password" autocomplete="current-password" required />
</VField>
<VBtn variant="primary" type="submit" :disabled="busy">
{{ busy ? $t("common.loading") : $t("common.login") }}
</VBtn>
</form>
</VCard>
</main>
</template>
apps/shop-admin/pages/orders/[id].vue
+63 -96
View File
@@ -19,17 +19,18 @@ const busy = ref(false);
const actionId = ref("");
const error = ref("");
function statusClass(value: OrderStatus): string {
function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
if (value === "completed") return "green";
if (value === "cancelled") return "red";
if (value === "pending_payment") return "orange";
return "blue";
}
function shipmentStatusClass(value: Shipment["status"]): string {
function shipmentStatusClass(value: Shipment["status"]): "green" | "blue" | "orange" {
return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
}
function formatDate(value: string): string {
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}
@@ -134,112 +135,78 @@ onMounted(() => {
</script>
<template>
<div class="page">
<div class="page-head">
<h1 class="page-title">{{ order ? order.order_no : $t("order.title") }}</h1>
<NuxtLink class="btn" to="/orders">{{ $t("common.back") }}</NuxtLink>
</div>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<VPage :title="order ? order.order_no : $t('order.title')">
<template #actions>
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/orders">{{ $t("common.back") }}</NuxtLink>
</template>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<template v-else-if="order">
<section class="card">
<div class="row between detail-heading">
<h2>{{ $t("shop.details") }}</h2>
<span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span>
<VCard>
<div class="mb-4 flex items-center justify-between gap-3">
<h2 class="text-lg font-semibold">{{ $t("shop.details") }}</h2>
<VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge>
</div>
<div class="order-meta">
<div><span class="muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
<div><span class="muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
<div class="mb-5 grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
<div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
</div>
<h3>{{ $t("shop.items") }}</h3>
<div class="table-wrap">
<table class="table">
<thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
<tbody>
<tr v-for="item in order.items" :key="item.id">
<td>{{ localized(item.product_name, locale) }}</td>
<td>{{ item.sku_code }}</td>
<td>{{ item.qty }}</td>
<td>{{ fmt(item.unit_price_minor, order.currency) }}</td>
</tr>
</tbody>
</table>
</div>
<h3>{{ $t("shop.address") }}</h3>
<address class="address">
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.items") }}</h3>
<VTable>
<thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
<tbody>
<tr v-for="item in order.items" :key="item.id">
<td>{{ localized(item.product_name, locale) }}</td>
<td>{{ item.sku_code }}</td>
<td>{{ item.qty }}</td>
<td>{{ fmt(item.unit_price_minor, order.currency) }}</td>
</tr>
</tbody>
</VTable>
<h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("shop.address") }}</h3>
<address class="not-italic leading-7">
<div>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</div>
<div>{{ order.shipping_address.country }}, {{ order.shipping_address.region }}, {{ order.shipping_address.city }}</div>
<div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
</address>
</section>
</VCard>
<section v-if="order.status === 'paid' || order.status === 'fulfilling'" class="card mt">
<h2>{{ $t("shop.createShipment") }}</h2>
<VCard v-if="order.status === 'paid' || order.status === 'fulfilling'" class="mt-4">
<h2 class="mb-4 text-lg font-semibold">{{ $t("shop.createShipment") }}</h2>
<form @submit.prevent="createShipment">
<div class="field-row">
<div class="field"><label for="carrier">{{ $t("shop.carrier") }}</label><input id="carrier" v-model="carrier" required /></div>
<div class="field"><label for="tracking-no">{{ $t("shop.trackingNo") }}</label><input id="tracking-no" v-model="trackingNo" required /></div>
<div class="grid gap-3 md:grid-cols-2">
<VField :label="$t('shop.carrier')">
<VInput id="carrier" v-model="carrier" required />
</VField>
<VField :label="$t('shop.trackingNo')">
<VInput id="tracking-no" v-model="trackingNo" required />
</VField>
</div>
<h3>{{ $t("shop.shipmentQuantities") }}</h3>
<div v-for="item in order.items" :key="`quantity-${item.id}`" class="field-row quantity-row">
<div class="quantity-name">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
<div class="field"><label :for="`quantity-${item.id}`">{{ $t("shop.unshipped") }}: {{ unshippedQuantity(item.id, item.qty) }}</label><input :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" /></div>
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.shipmentQuantities") }}</h3>
<div v-for="item in order.items" :key="`quantity-${item.id}`" class="flex items-end gap-3">
<div class="min-w-0 flex-[2] pb-3.5">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
<VField class="flex-1" :label="`${$t('shop.unshipped')}: ${unshippedQuantity(item.id, item.qty)}`">
<VInput :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" />
</VField>
</div>
<button class="btn primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</button>
<VBtn variant="primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</VBtn>
</form>
</section>
</VCard>
<section class="card mt">
<h2>{{ $t("shipment.title") }}</h2>
<div v-if="!shipments.length" class="muted">{{ $t("common.empty") }}</div>
<div v-else class="table-wrap">
<table class="table">
<thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.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><span class="badge" :class="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</span></td>
<td><button v-if="shipment.status === 'pending'" class="btn sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</button></td>
</tr>
</tbody>
</table>
</div>
</section>
<VCard class="mt-4">
<h2 class="mb-4 text-lg font-semibold">{{ $t("shipment.title") }}</h2>
<div v-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</div>
<VTable v-else>
<thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.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><VBadge :tone="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></td>
<td><VBtn v-if="shipment.status === 'pending'" size="sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</VBtn></td>
</tr>
</tbody>
</VTable>
</VCard>
</template>
</div>
</VPage>
</template>
<style scoped>
.detail-heading h2,
.card h3 {
margin-top: 0;
}
.order-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.order-meta > div {
display: grid;
gap: 6px;
}
.address {
font-style: normal;
line-height: 1.7;
}
.table-wrap {
overflow-x: auto;
}
.quantity-row {
align-items: end;
}
.quantity-name {
flex: 2;
padding-bottom: 14px;
}
.quantity-row .field {
flex: 1;
}
</style>
apps/shop-admin/pages/orders/index.vue
+34 -42
View File
@@ -13,13 +13,14 @@ const status = ref<"" | OrderStatus>("");
const loading = ref(true);
const error = ref("");
function statusClass(value: OrderStatus): string {
function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
if (value === "completed") return "green";
if (value === "cancelled") return "red";
if (value === "pending_payment") return "orange";
return "blue";
}
function formatDate(value: string): string {
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}
@@ -54,11 +55,10 @@ onMounted(() => {
</script>
<template>
<div class="page">
<div class="page-head"><h1 class="page-title">{{ $t("shop.orderList") }}</h1></div>
<div class="row mb">
<label for="order-status">{{ $t("shop.filterOrderStatus") }}</label>
<select id="order-status" v-model="status" @change="filterChanged">
<VPage :title="$t('shop.orderList')">
<div class="mb-4 flex items-center gap-3">
<label for="order-status" class="text-sm font-medium">{{ $t("shop.filterOrderStatus") }}</label>
<select id="order-status" v-model="status" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" @change="filterChanged">
<option value="">{{ $t("common.all") }}</option>
<option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
<option value="paid">{{ $t("order.status.paid") }}</option>
@@ -68,43 +68,35 @@ onMounted(() => {
<option value="cancelled">{{ $t("order.status.cancelled") }}</option>
</select>
</div>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="!orders?.items.length" class="card muted">{{ $t("common.empty") }}</div>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!orders?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<template v-else>
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>{{ $t("shop.orderNo") }}</th>
<th>{{ $t("shop.created") }}</th>
<th>{{ $t("shop.items") }}</th>
<th>{{ $t("shop.total") }}</th>
<th>{{ $t("common.status") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="order in orders.items" :key="order.id">
<td><NuxtLink :to="`/orders/${order.id}`">{{ order.order_no }}</NuxtLink></td>
<td>{{ formatDate(order.created_at) }}</td>
<td>{{ order.items.length }}</td>
<td>{{ fmt(order.total_minor, order.currency) }}</td>
<td><span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span></td>
</tr>
</tbody>
</table>
</div>
<div v-if="orders.total > orders.per_page" class="row between mt">
<button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
<span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
<button class="btn sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
<VTable>
<thead>
<tr>
<th>{{ $t("shop.orderNo") }}</th>
<th>{{ $t("shop.created") }}</th>
<th>{{ $t("shop.items") }}</th>
<th>{{ $t("shop.total") }}</th>
<th>{{ $t("common.status") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="order in orders.items" :key="order.id">
<td><NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{ order.order_no }}</NuxtLink></td>
<td>{{ formatDate(order.created_at) }}</td>
<td>{{ order.items.length }}</td>
<td>{{ fmt(order.total_minor, order.currency) }}</td>
<td><VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge></td>
</tr>
</tbody>
</VTable>
<div v-if="orders.total > orders.per_page" class="mt-4 flex items-center justify-between">
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
<span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
<VBtn size="sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
</div>
</template>
</div>
</VPage>
</template>
<style scoped>
.table-wrap {
overflow-x: auto;
}
</style>
apps/shop-admin/pages/products/[id].vue
+48 -82
View File
@@ -105,95 +105,61 @@ onMounted(() => {
</script>
<template>
<div class="page">
<div class="page-head">
<h1 class="page-title">{{ $t("product.editProduct") }}</h1>
<NuxtLink class="btn" to="/products">{{ $t("common.back") }}</NuxtLink>
</div>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<VPage :title="$t('product.editProduct')">
<template #actions>
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/products">{{ $t("common.back") }}</NuxtLink>
</template>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<template v-else-if="product">
<ProductForm :product="product" :categories="categories" :busy="busy" @submit="updateProduct" />
<section class="card mt sku-section">
<h2>{{ $t("shop.skuManager") }}</h2>
<div v-if="!product.skus?.length" class="muted mb">{{ $t("shop.noSkus") }}</div>
<div v-else class="table-wrap">
<table class="table">
<thead>
<tr>
<th>{{ $t("product.skuCode") }}</th>
<th>{{ $t("common.price") }}</th>
<th>{{ $t("common.currency") }}</th>
<th>{{ $t("shop.stock") }}</th>
<th>{{ $t("shop.active") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="sku in product.skus" :key="sku.id">
<td>{{ sku.sku_code }}</td>
<td>{{ formatSkuPrice(sku) }}</td>
<td>{{ sku.currency }}</td>
<td>{{ sku.stock }}</td>
<td><span class="badge" :class="sku.active ? 'green' : 'red'">{{ sku.active ? $t("common.yes") : $t("common.no") }}</span></td>
</tr>
</tbody>
</table>
</div>
<form class="sku-form mt" @submit.prevent="saveSku">
<h3>{{ $t("shop.addSku") }}</h3>
<div class="field-row">
<div class="field">
<label for="sku-code">{{ $t("product.skuCode") }}</label>
<input id="sku-code" v-model="skuCode" required />
</div>
<div class="field">
<label for="sku-price">{{ $t("shop.skuPriceMajor") }}</label>
<input id="sku-price" v-model="skuPrice" inputmode="decimal" required />
</div>
</div>
<div class="field-row">
<div class="field">
<label for="sku-currency">{{ $t("common.currency") }}</label>
<select id="sku-currency" v-model="skuCurrency">
<VCard class="mt-4 max-w-[960px]">
<h2 class="mb-4 text-lg font-semibold">{{ $t("shop.skuManager") }}</h2>
<div v-if="!product.skus?.length" class="mb-4 text-muted">{{ $t("shop.noSkus") }}</div>
<VTable v-else>
<thead>
<tr>
<th>{{ $t("product.skuCode") }}</th>
<th>{{ $t("common.price") }}</th>
<th>{{ $t("common.currency") }}</th>
<th>{{ $t("shop.stock") }}</th>
<th>{{ $t("shop.active") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="sku in product.skus" :key="sku.id">
<td>{{ sku.sku_code }}</td>
<td>{{ formatSkuPrice(sku) }}</td>
<td>{{ sku.currency }}</td>
<td>{{ sku.stock }}</td>
<td><VBadge :tone="sku.active ? 'green' : 'red'">{{ sku.active ? $t("common.yes") : $t("common.no") }}</VBadge></td>
</tr>
</tbody>
</VTable>
<form class="mt-4 max-w-[720px] border-t border-border pt-3" @submit.prevent="saveSku">
<h3 class="mb-3 text-base font-semibold">{{ $t("shop.addSku") }}</h3>
<div class="grid gap-3 md:grid-cols-2">
<VField :label="$t('product.skuCode')">
<VInput id="sku-code" v-model="skuCode" required />
</VField>
<VField :label="$t('shop.skuPriceMajor')">
<VInput id="sku-price" v-model="skuPrice" inputmode="decimal" required />
</VField>
<VField :label="$t('common.currency')">
<select id="sku-currency" v-model="skuCurrency" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
<option value="USD">USD</option>
<option value="CNY">CNY</option>
<option value="EUR">EUR</option>
</select>
</div>
<div class="field">
<label for="sku-stock">{{ $t("shop.stock") }}</label>
<input id="sku-stock" v-model="skuStock" type="number" min="0" step="1" required />
</div>
</VField>
<VField :label="$t('shop.stock')">
<VInput id="sku-stock" v-model="skuStock" type="number" min="0" step="1" required />
</VField>
</div>
<label class="checkbox-field"><input v-model="skuActive" type="checkbox" /> {{ $t("shop.active") }}</label>
<button class="btn primary" type="submit" :disabled="skuBusy">{{ $t("shop.addSku") }}</button>
<label class="mb-3.5 flex items-center gap-2 text-sm font-medium text-text"><input v-model="skuActive" type="checkbox" class="h-4 w-4 accent-primary" /> {{ $t("shop.active") }}</label>
<VBtn variant="primary" type="submit" :disabled="skuBusy">{{ $t("shop.addSku") }}</VBtn>
</form>
</section>
</VCard>
</template>
</div>
</VPage>
</template>
<style scoped>
.sku-section {
max-width: 960px;
}
.sku-section h2,
.sku-form h3 {
margin-top: 0;
}
.table-wrap {
overflow-x: auto;
}
.sku-form {
max-width: 720px;
}
.checkbox-field {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.checkbox-field input {
width: auto;
}
</style>
apps/shop-admin/pages/products/index.vue
+43 -64
View File
@@ -13,10 +13,11 @@ const loading = ref(true);
const error = ref("");
const actionId = ref("");
function statusClass(value: ProductStatus): string {
function statusClass(value: ProductStatus): "green" | "orange" | "blue" {
return value === "published" ? "green" : value === "unpublished" ? "orange" : "blue";
}
function formatDate(value: string): string {
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}
@@ -62,76 +63,54 @@ onMounted(loadProducts);
</script>
<template>
<div class="page">
<div class="page-head">
<h1 class="page-title">{{ $t("shop.productList") }}</h1>
<NuxtLink class="btn primary" to="/products/new">{{ $t("shop.newProduct") }}</NuxtLink>
</div>
<div class="row mb">
<label for="product-status">{{ $t("shop.filterStatus") }}</label>
<select id="product-status" v-model="status" @change="filterChanged">
<VPage :title="$t('shop.productList')">
<template #actions>
<NuxtLink to="/products/new" class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover">{{ $t("shop.newProduct") }}</NuxtLink>
</template>
<div class="mb-4 flex items-center gap-3">
<label for="product-status" class="text-sm font-medium">{{ $t("shop.filterStatus") }}</label>
<select id="product-status" v-model="status" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" @change="filterChanged">
<option value="">{{ $t("common.all") }}</option>
<option value="draft">{{ $t("product.draft") }}</option>
<option value="published">{{ $t("product.published") }}</option>
<option value="unpublished">{{ $t("product.unpublished") }}</option>
</select>
</div>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="!products?.items.length" class="card muted">{{ $t("common.empty") }}</div>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!products?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<template v-else>
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>{{ $t("product.detail") }}</th>
<th>{{ $t("product.slug") }}</th>
<th>{{ $t("shop.skuCount") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("shop.created") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="product in products.items" :key="product.id">
<td>{{ localized(product.name, locale) }}</td>
<td>{{ product.slug }}</td>
<td>{{ product.skus?.length ?? 0 }}</td>
<td><span class="badge" :class="statusClass(product.status)">{{ $t(`product.${product.status}`) }}</span></td>
<td>{{ formatDate(product.created_at) }}</td>
<td class="row actions-cell">
<NuxtLink class="btn sm" :to="`/products/${product.id}`">{{ $t("shop.edit") }}</NuxtLink>
<button
v-if="product.status === 'published'"
class="btn sm"
:disabled="actionId === product.id"
@click="togglePublished(product)"
>{{ $t("product.unpublish") }}</button>
<button
v-else
class="btn sm primary"
:disabled="actionId === product.id"
@click="togglePublished(product)"
>{{ $t("product.publish") }}</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="products.total > products.per_page" class="row between mt">
<button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
<span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(products.total / products.per_page) }}</span>
<button class="btn sm" :disabled="page >= Math.ceil(products.total / products.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
<VTable>
<thead>
<tr>
<th>{{ $t("product.detail") }}</th>
<th>{{ $t("product.slug") }}</th>
<th>{{ $t("shop.skuCount") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("shop.created") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="product in products.items" :key="product.id">
<td>{{ localized(product.name, locale) }}</td>
<td>{{ product.slug }}</td>
<td>{{ product.skus?.length ?? 0 }}</td>
<td><VBadge :tone="statusClass(product.status)">{{ $t(`product.${product.status}`) }}</VBadge></td>
<td>{{ formatDate(product.created_at) }}</td>
<td class="flex flex-wrap items-center gap-1.5">
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-2.5 py-1 text-[13px] font-medium text-text hover:bg-bg" :to="`/products/${product.id}`">{{ $t("shop.edit") }}</NuxtLink>
<VBtn v-if="product.status === 'published'" size="sm" :disabled="actionId === product.id" @click="togglePublished(product)">{{ $t("product.unpublish") }}</VBtn>
<VBtn v-else variant="primary" size="sm" :disabled="actionId === product.id" @click="togglePublished(product)">{{ $t("product.publish") }}</VBtn>
</td>
</tr>
</tbody>
</VTable>
<div v-if="products.total > products.per_page" class="mt-4 flex items-center justify-between">
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
<span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(products.total / products.per_page) }}</span>
<VBtn size="sm" :disabled="page >= Math.ceil(products.total / products.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
</div>
</template>
</div>
</VPage>
</template>
<style scoped>
.table-wrap {
overflow-x: auto;
}
.actions-cell {
flex-wrap: wrap;
}
</style>
apps/shop-admin/pages/products/new.vue
+7 -8
View File
@@ -37,13 +37,12 @@ onMounted(loadCategories);
</script>
<template>
<div class="page">
<div class="page-head">
<h1 class="page-title">{{ $t("product.newProduct") }}</h1>
<NuxtLink class="btn" to="/products">{{ $t("common.back") }}</NuxtLink>
</div>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<VPage :title="$t('product.newProduct')">
<template #actions>
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/products">{{ $t("common.back") }}</NuxtLink>
</template>
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<ProductForm v-else :categories="categories" :busy="busy" @submit="saveProduct" />
</div>
</VPage>
</template>
apps/shop-admin/pages/shipments.vue
+31 -39
View File
@@ -10,10 +10,11 @@ const loading = ref(true);
const error = ref("");
const actionId = ref("");
function statusClass(value: Shipment["status"]): string {
function statusClass(value: Shipment["status"]): "green" | "blue" | "orange" {
return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
}
function formatDate(value: string): string {
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}
@@ -47,42 +48,33 @@ onMounted(loadShipments);
</script>
<template>
<div class="page">
<h1 class="page-title">{{ $t("shop.shipmentList") }}</h1>
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="!shipments.length" class="card muted">{{ $t("common.empty") }}</div>
<div v-else class="table-wrap">
<table class="table">
<thead>
<tr>
<th>{{ $t("shipment.shipmentNo") }}</th>
<th>{{ $t("shop.orderNo") }}</th>
<th>{{ $t("shop.carrier") }}</th>
<th>{{ $t("shop.trackingNo") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("shop.created") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="shipment in shipments" :key="shipment.id">
<td>{{ shipment.shipment_no }}</td>
<td><NuxtLink :to="`/orders/${shipment.order_id}`">{{ shipment.order_no ?? shipment.order_id }}</NuxtLink></td>
<td>{{ shipment.carrier }}</td>
<td>{{ shipment.tracking_no }}</td>
<td><span class="badge" :class="statusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</span></td>
<td>{{ formatDate(shipment.created_at) }}</td>
<td><button v-if="shipment.status === 'pending'" class="btn sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<VPage :title="$t('shop.shipmentList')">
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</VCard>
<VTable v-else>
<thead>
<tr>
<th>{{ $t("shipment.shipmentNo") }}</th>
<th>{{ $t("shop.orderNo") }}</th>
<th>{{ $t("shop.carrier") }}</th>
<th>{{ $t("shop.trackingNo") }}</th>
<th>{{ $t("common.status") }}</th>
<th>{{ $t("shop.created") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="shipment in shipments" :key="shipment.id">
<td>{{ shipment.shipment_no }}</td>
<td><NuxtLink :to="`/orders/${shipment.order_id}`" class="text-primary hover:underline">{{ shipment.order_no ?? shipment.order_id }}</NuxtLink></td>
<td>{{ shipment.carrier }}</td>
<td>{{ shipment.tracking_no }}</td>
<td><VBadge :tone="statusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></td>
<td>{{ formatDate(shipment.created_at) }}</td>
<td><VBtn v-if="shipment.status === 'pending'" size="sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</VBtn></td>
</tr>
</tbody>
</VTable>
</VPage>
</template>
<style scoped>
.table-wrap {
overflow-x: auto;
}
</style>