s.esmaeili
53a304b5d5
DashboardView ("میز کار"): Rebuilt from scratch with a new structure, distinct from the old card+grid layout but visually aligned with HomeView (same blurred bar, @ink/@wine palette, staged reveal animation on mount):
Single hero card (ink→wine gradient) showing balance, gold/fiat debt, and identity — no quick-action icons inside it anymore.
Live gold rate folded into a slim inline row at the bottom instead of a titled section.
Iterated shadow/spacing on the hero card per feedback (softer, less clipped).
DialogVant / DialogVantOneButton (shared modal components, used in 7+ call sites: Dashboard, Cart, SingleProduct, Register, App): Replaced Vant's default dialog chrome with the app's own rounded-card language — circular icon badge for the illustration, pill-shaped primary/secondary buttons. No call-site markup changed.
LoginView: Rebuilt from scratch — full-bleed dark hero (brand + step copy) overlapped by a floating white form sheet, animated crossfade transition between the mobile-number and OTP steps, same staged entrance animation as Home/Dashboard. All auth logic (API check, OTP stub, session login) unchanged.
143 lines
3.9 KiB
Vue
143 lines
3.9 KiB
Vue
<!--
|
|
Ported from legacy henza_pwa/src/components/DialogVant.vue.
|
|
EXISTING ISSUE, ported as-is (not fixed): this component doesn't declare a
|
|
`show`/`modelValue` prop, and the internal `watch(() => props.modelValue, ...)`
|
|
references a prop that was never declared (always undefined, so that watcher
|
|
effectively never fires — its `showNotify`/timeout auto-hide logic is dead
|
|
code). Actual visibility works anyway, because <van-dialog> is this
|
|
component's sole root element and Vue's automatic attribute fallthrough
|
|
passes the parent's `v-model:show` straight through to it. Preserved exactly.
|
|
|
|
Visual pass: redesigned to the app's own card language instead of Vant's
|
|
stock dialog chrome — rounded @canvas card, the illustration slot framed in
|
|
a soft circular badge (@wineWash) rather than floating loose, and the
|
|
button row rebuilt as two pill buttons (primary filled @ink, secondary
|
|
ghost) instead of Vant's bare text-grid. Every call site only ever fills
|
|
the img/title/button slots with content (never Vant's own button classes),
|
|
so this is a pure chrome swap: no call site needs to change, and slot
|
|
content (including per-call-site text color utility classes already baked
|
|
into that content) still renders as-is inside the new layout.
|
|
-->
|
|
<template>
|
|
<van-dialog class="mDialog">
|
|
<div class="mDialog__body">
|
|
<div class="mDialog__art">
|
|
<slot name="img">{{ text2 }}</slot>
|
|
</div>
|
|
<div class="mDialog__title">
|
|
<slot name="title">{{ text1 }}</slot>
|
|
</div>
|
|
<div class="mDialog__actions">
|
|
<slot name="button">{{ text3 }}</slot>
|
|
</div>
|
|
</div>
|
|
</van-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Dialog as VanDialog } from 'vant'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
timeOut: number
|
|
text1?: string
|
|
text2?: string
|
|
text3?: string
|
|
}>(),
|
|
{},
|
|
)
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.van-dialog__confirm,
|
|
.van-dialog__cancel {
|
|
display: none !important;
|
|
}
|
|
|
|
// Vant's own dialog chrome (white slab, hard corners, drop shadow) is
|
|
// replaced wholesale — the shape and elevation now match the rest of the
|
|
// app's cards (HomeView's hero, Dashboard's rows) rather than the library
|
|
// default.
|
|
.mDialog.van-dialog {
|
|
width: min(320px, calc(100vw - 48px));
|
|
border-radius: 26px;
|
|
background: @canvas;
|
|
box-shadow: 0 30px 60px -24px rgba(20, 22, 26, 0.45);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mDialog__body {
|
|
padding: 26px 22px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
// The illustration sits inside a soft circular badge in the page's wine
|
|
// wash, sized to a consistent footprint regardless of the source SVG's
|
|
// native dimensions — mirrors DashboardView's icon-badge treatment.
|
|
.mDialog__art {
|
|
width: 84px;
|
|
height: 84px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: @wineWash;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.mDialog__art img,
|
|
.mDialog__art svg,
|
|
.mDialog__art canvas {
|
|
width: 56px;
|
|
height: 56px;
|
|
object-fit: contain;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mDialog__title {
|
|
font-size: 14.5px;
|
|
font-weight: 700;
|
|
line-height: 1.9;
|
|
color: @ink;
|
|
}
|
|
|
|
// Two pill buttons instead of Vant's bordered text-grid. Each call site
|
|
// passes two <div>s with a click handler; the first (the affirmative action)
|
|
// is promoted to the filled primary pill by DOM order, the second becomes
|
|
// the ghost/secondary pill — no call-site markup changes needed.
|
|
.mDialog__actions {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
margin-top: 22px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.mDialog__actions > * {
|
|
padding: 12px;
|
|
border-radius: 14px;
|
|
cursor: pointer;
|
|
transition: transform 0.18s ease, opacity 0.18s ease;
|
|
}
|
|
|
|
.mDialog__actions > *:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.mDialog__actions > *:first-child {
|
|
color: #fff !important;
|
|
background: @ink;
|
|
}
|
|
|
|
.mDialog__actions > *:last-child {
|
|
color: @inkFaint !important;
|
|
background: none;
|
|
}
|
|
</style>
|