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/admin/pages/points-orders.vue
+40 -72
View File
@@ -16,7 +16,7 @@ function rewardName(order: IntegralOrder): string {
return order.items.map((line) => line.name[locale.value] ?? line.name.en).join(", ");
}
function statusClass(status: IntegralOrderStatus): string {
function statusClass(status: IntegralOrderStatus): "green" | "red" | "orange" {
if (status === "fulfilled") return "green";
if (status === "cancelled") return "red";
return "orange";
@@ -61,75 +61,43 @@ onMounted(() => void load());
</script>
<template>
<div class="page">
<h1 class="page-title">{{ $t("admin.pointsOrderManagement") }}</h1>
<p v-if="error" class="error-text" role="alert">{{ error }}</p>
<p v-if="notice" class="muted" role="status">{{ notice }}</p>
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
<div v-else-if="orders.length === 0" class="card muted">{{ $t("common.empty") }}</div>
<div v-else class="table-wrap card">
<table class="table">
<thead>
<tr>
<th>{{ $t("admin.redemptionNo") }}</th>
<th>{{ $t("admin.redemptionCustomer") }}</th>
<th>{{ $t("admin.redemptionReward") }}</th>
<th>{{ $t("admin.redemptionPoints") }}</th>
<th>{{ $t("admin.created") }}</th>
<th>{{ $t("admin.redemptionStatus") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="order in orders" :key="order.id">
<td>{{ order.order_no }}</td>
<td class="muted">{{ order.user_id }}</td>
<td>{{ rewardName(order) }}</td>
<td>{{ order.total_points }}</td>
<td>{{ order.created_at.slice(0, 10) }}</td>
<td>
<span class="badge" :class="statusClass(order.status)">
{{ $t(`admin.redemptionStatuses.${order.status}`) }}
</span>
</td>
<td class="action-row">
<template v-if="order.status === 'pending_fulfillment'">
<button
class="btn sm primary"
type="button"
:disabled="actionId === order.id"
@click="transition(order, 'fulfill')"
>
{{ $t("admin.fulfillRedemption") }}
</button>
<button
class="btn sm"
type="button"
:disabled="actionId === order.id"
@click="transition(order, 'cancel')"
>
{{ $t("admin.cancelRedemption") }}
</button>
</template>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<VPage :title="$t('admin.pointsOrderManagement')">
<p v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</p>
<p v-if="notice" class="text-sm text-muted" role="status">{{ notice }}</p>
<p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
<VCard v-else-if="orders.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
<div v-else class="overflow-x-auto"><div class="min-w-[980px]"><VTable>
<thead>
<tr>
<th>{{ $t("admin.redemptionNo") }}</th>
<th>{{ $t("admin.redemptionCustomer") }}</th>
<th>{{ $t("admin.redemptionReward") }}</th>
<th>{{ $t("admin.redemptionPoints") }}</th>
<th>{{ $t("admin.created") }}</th>
<th>{{ $t("admin.redemptionStatus") }}</th>
<th>{{ $t("common.actions") }}</th>
</tr>
</thead>
<tbody>
<tr v-for="order in orders" :key="order.id">
<td>{{ order.order_no }}</td>
<td class="text-muted">{{ order.user_id }}</td>
<td>{{ rewardName(order) }}</td>
<td>{{ order.total_points }}</td>
<td>{{ order.created_at.slice(0, 10) }}</td>
<td><VBadge :tone="statusClass(order.status)">{{ $t(`admin.redemptionStatuses.${order.status}`) }}</VBadge></td>
<td><div class="flex gap-2">
<template v-if="order.status === 'pending_fulfillment'">
<VBtn size="sm" variant="primary" :disabled="actionId === order.id" @click="transition(order, 'fulfill')">
{{ $t("admin.fulfillRedemption") }}
</VBtn>
<VBtn size="sm" :disabled="actionId === order.id" @click="transition(order, 'cancel')">
{{ $t("admin.cancelRedemption") }}
</VBtn>
</template>
</div></td>
</tr>
</tbody>
</VTable></div></div>
</VPage>
</template>
<style scoped>
.table-wrap {
overflow-x: auto;
padding: 0;
}
.table {
min-width: 980px;
}
.action-row {
display: flex;
gap: 8px;
}
</style>