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
@@ -58,182 +58,48 @@ async function submit(): Promise<void> {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="auth-page">
|
||||
<div class="auth-inner">
|
||||
<div class="auth-panel">
|
||||
<template v-if="success">
|
||||
<div class="success-state">
|
||||
<div class="success-mark">✓</div>
|
||||
<h1>{{ t("auth.resetSuccess") }}</h1>
|
||||
<p>{{ t("auth.resetSuccessHint") }}</p>
|
||||
<NuxtLink class="mbtn red block" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="auth-tabs">
|
||||
<h1>{{ t("auth.forgotTab") }}</h1>
|
||||
<NuxtLink to="/login">{{ t("auth.loginTab") }}</NuxtLink>
|
||||
</div>
|
||||
<form @submit.prevent="submit">
|
||||
<label class="field">
|
||||
<span>{{ t("common.email") }}</span>
|
||||
<input v-model.trim="email" class="minput" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>{{ t("auth.newPassword") }}</span>
|
||||
<input v-model="password" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>{{ t("auth.confirmPassword") }}</span>
|
||||
<input v-model="confirmPassword" class="minput" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>{{ t("auth.smsCode") }}</span>
|
||||
<span class="code-row">
|
||||
<input v-model.trim="code" class="minput" type="text" :placeholder="t('auth.smsCodePlaceholder')" />
|
||||
<button class="mbtn code-button" type="button" :disabled="countdown > 0" @click="startCountdown">
|
||||
{{ countdown > 0 ? t("auth.codeCountdown", { n: countdown }) : t("auth.getCode") }}
|
||||
</button>
|
||||
</span>
|
||||
</label>
|
||||
<p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
|
||||
<button class="mbtn red block submit" type="submit" :disabled="submitting">
|
||||
{{ t("auth.resetAction") }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="auth-links">
|
||||
<NuxtLink to="/login">{{ t("auth.loginNow") }}</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<section class="min-h-screen bg-bg px-5 py-10 font-sans text-text">
|
||||
<VCard class="mx-auto my-10 max-w-[420px] p-6 sm:p-10">
|
||||
<template v-if="success">
|
||||
<div class="pt-12 text-center">
|
||||
<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-success text-3xl text-white">✓</div>
|
||||
<h1 class="m-0 text-xl font-semibold">{{ t("auth.resetSuccess") }}</h1>
|
||||
<p class="my-3.5 mb-7 text-sm leading-relaxed text-muted">{{ t("auth.resetSuccessHint") }}</p>
|
||||
<NuxtLink class="block" to="/login"><VBtn class="w-full" variant="primary">{{ t("auth.loginNow") }}</VBtn></NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="mb-6 flex items-baseline gap-4 border-b border-border pb-3.5">
|
||||
<h1 class="m-0 text-xl font-semibold">{{ t("auth.forgotTab") }}</h1>
|
||||
<NuxtLink class="text-sm text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginTab") }}</NuxtLink>
|
||||
</div>
|
||||
<form @submit.prevent="submit">
|
||||
<VField :label="t('common.email')">
|
||||
<VInput v-model.trim="email" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
|
||||
</VField>
|
||||
<VField :label="t('auth.newPassword')">
|
||||
<VInput v-model="password" type="password" autocomplete="new-password" :placeholder="t('auth.passwordPlaceholder')" />
|
||||
</VField>
|
||||
<VField :label="t('auth.confirmPassword')">
|
||||
<VInput v-model="confirmPassword" type="password" autocomplete="new-password" :placeholder="t('auth.confirmPasswordPlaceholder')" />
|
||||
</VField>
|
||||
<VField :label="t('auth.smsCode')">
|
||||
<div class="flex gap-2">
|
||||
<VInput v-model.trim="code" type="text" class="min-w-0 flex-1" :placeholder="t('auth.smsCodePlaceholder')" />
|
||||
<VBtn class="shrink-0 whitespace-nowrap" type="button" size="sm" :disabled="countdown > 0" @click="startCountdown">
|
||||
{{ countdown > 0 ? t("auth.codeCountdown", { n: countdown }) : t("auth.getCode") }}
|
||||
</VBtn>
|
||||
</div>
|
||||
</VField>
|
||||
<p v-if="errorKey" class="-mt-1 mb-3 text-xs text-danger">{{ t(errorKey) }}</p>
|
||||
<VBtn class="mt-1 w-full" variant="primary" type="submit" :disabled="submitting">{{ t("auth.resetAction") }}</VBtn>
|
||||
</form>
|
||||
<div class="mt-4 text-center text-xs">
|
||||
<NuxtLink class="text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</VCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-page {
|
||||
min-height: 720px;
|
||||
background: #f6f6f6 url("/mock/login-bg.svg") center top / cover no-repeat;
|
||||
padding: 50px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.auth-inner {
|
||||
width: 1200px;
|
||||
min-height: 540px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.auth-panel {
|
||||
width: 400px;
|
||||
min-height: 540px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.auth-tabs {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 18px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--mall-ink);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.auth-tabs a,
|
||||
.auth-links a {
|
||||
color: var(--mall-red);
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.auth-tabs a:hover,
|
||||
.auth-links a:hover {
|
||||
color: var(--mall-red-dark);
|
||||
}
|
||||
.field {
|
||||
display: block;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.field > span:first-child {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.code-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.code-row .minput {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.code-button {
|
||||
flex: 0 0 100px;
|
||||
padding: 5px 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.submit {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.error {
|
||||
margin: -2px 0 10px;
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
}
|
||||
.auth-links {
|
||||
margin-top: 17px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.success-state {
|
||||
padding-top: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.success-mark {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin: 0 auto 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--mall-green);
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
line-height: 54px;
|
||||
}
|
||||
.success-state h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.success-state p {
|
||||
margin: 14px 0 28px;
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.success-state a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 1240px) {
|
||||
.auth-inner {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.auth-page {
|
||||
padding: 20px;
|
||||
}
|
||||
.auth-inner {
|
||||
width: 100%;
|
||||
}
|
||||
.auth-panel {
|
||||
width: 100%;
|
||||
padding: 30px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user