SearchView: Removed the dynamic collection-tile grid (e.g. "پرفروش‌های این هفته") and the "نتایج / N محصول" section header from the UI. Underlying data/filtering logic untouched.

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.
This commit is contained in:
s.esmaeili
2026-09-18 12:54:45 +03:30
parent 05fe780c89
commit 53a304b5d5
355 changed files with 22865 additions and 14 deletions
@@ -0,0 +1,9 @@
<!-- Ported from legacy henza_pwa/src/layout/fullPage.vue -->
<template>
<div>
<router-view />
</div>
</template>
<script setup lang="ts">
</script>
@@ -0,0 +1,85 @@
<!--
Ported from legacy henza_pwa/src/layout/master.vue.
NOTE (existing issue, ported as-is — not fixed here): this layout renders
its own <router-view/> rather than a <slot/>, so the keep-alive/suspense
wrapper App.vue builds around its own <router-view> is never actually used
by this layout — the route component here is resolved fresh, independently.
Preserved exactly; flagged separately.
-->
<template>
<section ref="content">
<router-view v-slot="{ Component, route }">
<transition name="page" mode="out-in">
<component :is="Component" :key="route.name" />
</transition>
</router-view>
<Navigation />
<div class="bg-primary top-[-2rem] fixed h-[2rem] w-full z-10" />
</section>
</template>
<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import { useResizeObserver } from '@vueuse/core'
import Navigation from '../components/ui/Navigation.vue'
import { useWindowDataStore } from '../stores/windowDataStore'
const windowData = useWindowDataStore()
const content = ref<HTMLElement | null>(null)
// Route changes here are tab switches, not a hierarchy, so there is no "back"
// or "forward" direction to honour — a directional slide would be inventing
// one (and would have to be mirrored for RTL). A soft lift-and-fade reads as
// the new page settling into place and works the same in both directions.
onBeforeMount(() => {
windowData.setWidth(window.innerWidth)
})
useResizeObserver(content, (entries) => {
const entry = entries[0]
const { width } = entry.contentRect
if (windowData.width !== width) {
windowData.setWidth(width)
}
})
</script>
<!--
Not scoped: these classes land on the routed page component, which carries
its own scope id, not this layout's.
-->
<style lang="less">
// Leave is deliberately shorter than enter. With mode="out-in" the two run
// back to back, so a slow exit is dead time the user feels as lag; a quick
// fade out and an unhurried settle in reads as responsive but smooth.
.page-leave-active {
transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), transform 0.16s cubic-bezier(0.4, 0, 1, 1);
}
.page-enter-active {
transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1), transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.page-enter-from {
opacity: 0;
// Small travel on purpose — the page should look like it came into focus,
// not like it flew in from off-screen.
transform: translate3d(0, 10px, 0) scale(0.995);
}
.page-leave-to {
opacity: 0;
transform: translate3d(0, -5px, 0) scale(0.997);
}
@media (prefers-reduced-motion: reduce) {
.page-enter-active,
.page-leave-active {
transition: opacity 0.12s linear;
}
.page-enter-from,
.page-leave-to {
transform: none;
}
}
</style>