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/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>