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/shops.vue
+46 -64
View File
@@ -24,7 +24,7 @@ function formatDate(value: string): string {
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}
function statusClass(status: Shop["status"]): string {
function statusClass(status: Shop["status"]): "green" | "red" {
return status === "active" ? "green" : "red";
}
@@ -84,69 +84,51 @@ onMounted(() => {
</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>
<VPage :title="$t('nav.shops')">
<VCard class="mb-5">
<h2 class="mb-4 text-base font-semibold">{{ $t("admin.createShop") }}</h2>
<div class="grid gap-3 md:grid-cols-3">
<VField :label="$t('admin.shopNameEn')">
<VInput id="shop-name-en" v-model="nameEn" required />
</VField>
<VField :label="$t('admin.shopNameZh')">
<VInput id="shop-name-zh" v-model="nameZh" required />
</VField>
<VField :label="$t('admin.shopSlug')">
<VInput id="shop-slug" v-model="slug" required />
</VField>
</div>
<p v-if="createError" class="error-text" role="alert">{{ createError }}</p>
<button class="btn primary" type="button" :disabled="creating" @click="createShop">
<p v-if="createError" class="my-2 text-sm text-danger" role="alert">{{ createError }}</p>
<VBtn variant="primary" :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>
</VBtn>
</VCard>
<p v-if="loading" class="text-sm text-muted">{{ $t("common.loading") }}</p>
<p v-else-if="errorMessage" class="my-2 text-sm text-danger" role="alert">{{ errorMessage }}</p>
<VCard v-else-if="shops.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
<div v-else class="overflow-x-auto"><div class="min-w-[720px]"><VTable>
<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 class="rounded bg-bg px-1.5 py-0.5">{{ shop.slug }}</code></td>
<td><VBadge :tone="statusClass(shop.status)">{{ $t(`admin.${shop.status}`) }}</VBadge></td>
<td>{{ formatDate(shop.created_at) }}</td>
<td>
<VBtn :variant="shop.status === 'active' ? 'danger' : 'default'" size="sm" :disabled="updatingId === shop.id" @click="setStatus(shop)">
{{ updatingId === shop.id ? $t("common.loading") : $t(shop.status === "active" ? "admin.suspend" : "admin.activate") }}
</VBtn>
</td>
</tr>
</tbody>
</VTable></div></div>
</VPage>
</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>