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:
@@ -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>
|
||||
Reference in New Issue
Block a user