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