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
+30
-140
@@ -55,147 +55,37 @@ async function submit(): Promise<void> {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="auth-page">
|
||||
<div class="auth-inner">
|
||||
<div class="auth-panel">
|
||||
<div class="auth-tabs">
|
||||
<h1>{{ t("auth.registerTab") }}</h1>
|
||||
<NuxtLink to="/login">{{ t("auth.loginTab") }}</NuxtLink>
|
||||
</div>
|
||||
<form @submit.prevent="submit">
|
||||
<label class="field">
|
||||
<span>{{ t("common.displayName") }}</span>
|
||||
<input v-model.trim="displayName" class="minput" type="text" autocomplete="name" :placeholder="t('auth.displayNamePlaceholder')" />
|
||||
</label>
|
||||
<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("common.password") }}</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>
|
||||
<p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
|
||||
<button class="mbtn red block submit" type="submit" :disabled="submitting">
|
||||
{{ t("auth.registerAction") }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="auth-links">
|
||||
<span>{{ t("auth.haveAccount") }}</span>
|
||||
<NuxtLink to="/login">{{ t("auth.loginNow") }}</NuxtLink>
|
||||
<NuxtLink to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
|
||||
</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">
|
||||
<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.registerTab") }}</h1>
|
||||
<NuxtLink class="text-sm text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginTab") }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<form @submit.prevent="submit">
|
||||
<VField :label="t('common.displayName')">
|
||||
<VInput v-model.trim="displayName" type="text" autocomplete="name" :placeholder="t('auth.displayNamePlaceholder')" />
|
||||
</VField>
|
||||
<VField :label="t('common.email')">
|
||||
<VInput v-model.trim="email" type="email" autocomplete="email" :placeholder="t('auth.emailPlaceholder')" />
|
||||
</VField>
|
||||
<VField :label="t('common.password')">
|
||||
<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>
|
||||
<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.registerAction") }}
|
||||
</VBtn>
|
||||
</form>
|
||||
<div class="mt-4 flex flex-wrap items-center gap-2 text-xs text-muted">
|
||||
<span>{{ t("auth.haveAccount") }}</span>
|
||||
<NuxtLink class="text-primary hover:text-primary-hover" to="/login">{{ t("auth.loginNow") }}</NuxtLink>
|
||||
<NuxtLink class="text-primary hover:text-primary-hover" to="/forgot-password">{{ t("auth.forgotPassword") }}</NuxtLink>
|
||||
</div>
|
||||
</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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 17px;
|
||||
color: var(--mall-faint);
|
||||
font-size: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@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