feat(ui): adopt Tailwind v4 design system and archive change
- 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
@@ -140,52 +140,43 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<h1 class="page-title">{{ $t("nav.currencies") }}</h1>
|
||||
</div>
|
||||
<section class="card create-card">
|
||||
<h2>{{ $t("admin.currencyFormTitle") }}</h2>
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label for="currency-code">{{ $t("admin.currencyCode") }}</label>
|
||||
<input id="currency-code" v-model="form.code" maxlength="3" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-name-en">{{ $t("admin.currencyNameEn") }}</label>
|
||||
<input id="currency-name-en" v-model="form.nameEn" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-name-zh">{{ $t("admin.currencyNameZh") }}</label>
|
||||
<input id="currency-name-zh" v-model="form.nameZh" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-symbol">{{ $t("admin.symbol") }}</label>
|
||||
<input id="currency-symbol" v-model="form.symbol" type="text" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-exponent">{{ $t("admin.exponent") }}</label>
|
||||
<input id="currency-exponent" v-model.number="form.exponent" min="0" max="6" type="number" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="currency-rate">{{ $t("admin.rate") }}</label>
|
||||
<input id="currency-rate" v-model="form.rateToBase" min="0" step="any" type="number" required />
|
||||
</div>
|
||||
<VPage :title="$t('nav.currencies')">
|
||||
<VCard class="mb-5">
|
||||
<h2 class="mb-4 text-base font-semibold">{{ $t("admin.currencyFormTitle") }}</h2>
|
||||
<div class="grid gap-3 md:grid-cols-3">
|
||||
<VField :label="$t('admin.currencyCode')">
|
||||
<VInput id="currency-code" v-model="form.code" maxlength="3" required />
|
||||
</VField>
|
||||
<VField :label="$t('admin.currencyNameEn')">
|
||||
<VInput id="currency-name-en" v-model="form.nameEn" required />
|
||||
</VField>
|
||||
<VField :label="$t('admin.currencyNameZh')">
|
||||
<VInput id="currency-name-zh" v-model="form.nameZh" required />
|
||||
</VField>
|
||||
<VField :label="$t('admin.symbol')">
|
||||
<VInput id="currency-symbol" v-model="form.symbol" required />
|
||||
</VField>
|
||||
<VField :label="$t('admin.exponent')">
|
||||
<VInput id="currency-exponent" v-model.number="form.exponent" min="0" max="6" type="number" required />
|
||||
</VField>
|
||||
<VField :label="$t('admin.rate')">
|
||||
<VInput id="currency-rate" v-model="form.rateToBase" min="0" step="any" type="number" required />
|
||||
</VField>
|
||||
</div>
|
||||
<label class="checkbox-field">
|
||||
<input v-model="form.enabled" type="checkbox" />
|
||||
<label class="my-0 mb-4 flex items-center gap-2 text-sm">
|
||||
<input v-model="form.enabled" class="h-4 w-4 accent-primary" type="checkbox" />
|
||||
{{ $t("admin.enabled") }}
|
||||
</label>
|
||||
<p v-if="formError" class="error-text" role="alert">{{ formError }}</p>
|
||||
<button class="btn primary" type="button" :disabled="creating" @click="createCurrency">
|
||||
<p v-if="formError" class="my-2 text-sm text-danger" role="alert">{{ formError }}</p>
|
||||
<VBtn variant="primary" :disabled="creating" @click="createCurrency">
|
||||
{{ creating ? $t("common.loading") : $t("admin.saveCurrency") }}
|
||||
</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="currencies.length === 0" class="card muted">{{ $t("common.empty") }}</div>
|
||||
<div v-else class="table-wrap card">
|
||||
<table class="table">
|
||||
</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="currencies.length === 0" class="text-muted">{{ $t("common.empty") }}</VCard>
|
||||
<div v-else class="overflow-x-auto">
|
||||
<div class="min-w-[1080px]"><VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t("common.currency") }}</th>
|
||||
@@ -204,35 +195,23 @@ onMounted(() => {
|
||||
<td>{{ localizedName(currency.name) }}</td>
|
||||
<td>{{ currency.symbol }}</td>
|
||||
<td>{{ currency.exponent }}</td>
|
||||
<td><VInput v-model="rateDrafts[currency.code]" class="min-w-[110px]" type="number" min="0" step="any" /></td>
|
||||
<td>
|
||||
<input v-model="rateDrafts[currency.code]" class="rate-input" type="number" min="0" step="any" />
|
||||
<VBadge v-if="currency.is_base" tone="blue">{{ $t("admin.baseCurrency") }}</VBadge>
|
||||
<span v-else class="text-muted">—</span>
|
||||
</td>
|
||||
<td><span v-if="currency.is_base" class="badge blue">{{ $t("admin.baseCurrency") }}</span><span v-else class="muted">—</span></td>
|
||||
<td><span class="badge" :class="currency.enabled ? 'green' : 'red'">{{ currency.enabled ? $t("common.yes") : $t("common.no") }}</span></td>
|
||||
<td class="action-row">
|
||||
<button class="btn sm primary" type="button" :disabled="savingCode === currency.code" @click="saveRate(currency)">
|
||||
<td><VBadge :tone="currency.enabled ? 'green' : 'red'">{{ currency.enabled ? $t("common.yes") : $t("common.no") }}</VBadge></td>
|
||||
<td><div class="flex gap-2">
|
||||
<VBtn size="sm" variant="primary" :disabled="savingCode === currency.code" @click="saveRate(currency)">
|
||||
{{ savingCode === currency.code ? $t("common.loading") : $t("admin.updateRate") }}
|
||||
</button>
|
||||
<button class="btn sm" type="button" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
|
||||
</VBtn>
|
||||
<VBtn size="sm" :disabled="savingCode === currency.code" @click="toggleEnabled(currency)">
|
||||
{{ currency.enabled ? $t("admin.suspend") : $t("admin.activate") }}
|
||||
</button>
|
||||
</td>
|
||||
</VBtn>
|
||||
</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</VTable></div>
|
||||
</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)); }
|
||||
.checkbox-field { align-items: center; display: flex; gap: 8px; margin: 2px 0 16px; }
|
||||
.checkbox-field input { width: auto; }
|
||||
.table-wrap { overflow-x: auto; padding: 0; }
|
||||
.table { min-width: 1080px; }
|
||||
.rate-input { min-width: 110px; }
|
||||
.action-row { display: flex; gap: 8px; }
|
||||
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user