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