refactor(ui): replace modal dialogs with toast/sheet components
Remove DialogVant/NotifyVant and add Toast and Sheet components with useToast, useReveal, and usePageTransition composables. Rework Navigation, RegisterView, and styles across both apps; rebuild dist assets. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
148b99c4a6
commit
c05352d6fd
@@ -0,0 +1,43 @@
|
||||
import { nextTick, ref } from 'vue'
|
||||
|
||||
/**
|
||||
* First-paint entrance shared by the tab screens (Home, Dashboard, Cart):
|
||||
* once a screen's first data load lands, its sections rise and fade in one
|
||||
* after another. The styles are the global `.reveal` / `.is-revealed` pair in
|
||||
* assets/styles/style.less.
|
||||
*
|
||||
* MasterLayout renders its routes without keep-alive, so a screen remounts on
|
||||
* every return to its tab. Which screens have already played is kept here in
|
||||
* module scope, so the entrance is a first-run flourish that resets only on a
|
||||
* full reload — replaying it on each tab switch would fight the page
|
||||
* transition rather than add to it. (A `let` at the top of <script setup>
|
||||
* would not do this: that code runs once per mount.)
|
||||
*/
|
||||
const played = new Set<string>()
|
||||
|
||||
export function useReveal(key: string, stepMs = 70) {
|
||||
const revealed = ref(played.has(key))
|
||||
|
||||
// Each item starts a beat after the one before it. Kept small, so the whole
|
||||
// sequence finishes well under a second and reads as the page arriving.
|
||||
function revealDelay(i: number) {
|
||||
return { '--reveal-delay': `${i * stepMs}ms` }
|
||||
}
|
||||
|
||||
// Call once the first load has populated the DOM. Waits for the new nodes
|
||||
// to be mounted, then for one painted frame in their "before" state — with
|
||||
// a single frame the browser can resolve both states in the same style pass
|
||||
// and there is nothing to animate.
|
||||
async function reveal() {
|
||||
if (revealed.value) return
|
||||
await nextTick()
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => {
|
||||
revealed.value = true
|
||||
played.add(key)
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
return { revealed, revealDelay, reveal }
|
||||
}
|
||||
Reference in New Issue
Block a user