2026a1ca9f
* добавил диалог при удалении карты * добавил сохранение движения * добавил вывод сохраненного отчета * изменил логику сохранения отчета
119 lines
4.0 KiB
Vue
119 lines
4.0 KiB
Vue
<script setup>
|
|
import {NLayout, NLayoutHeader, NEl, NAlert, NSpin, NText} from "naive-ui";
|
|
import AppHeader from "./Components/AppHeader.vue";
|
|
import {useGlobalLoading} from "../Composables/useGlobalLoading.js";
|
|
import AppDialogManager from "../Components/AppDialogManager.vue";
|
|
|
|
const {isGlobalLoading} = useGlobalLoading()
|
|
</script>
|
|
|
|
<template>
|
|
<AppDialogManager />
|
|
<NLayout position="absolute">
|
|
|
|
<NLayoutHeader style="height: 48px;" bordered>
|
|
<AppHeader>
|
|
<template #headerExtra>
|
|
<slot name="headerExtra" />
|
|
</template>
|
|
|
|
<template #headerSuffix>
|
|
<slot name="headerSuffix" />
|
|
</template>
|
|
</AppHeader>
|
|
</NLayoutHeader>
|
|
|
|
<Transition name="wait-alert">
|
|
<NEl
|
|
v-if="isGlobalLoading"
|
|
class="wait-layer pointer-events-none fixed inset-x-0 top-[56px] z-[2600] flex justify-center px-3"
|
|
>
|
|
<NAlert
|
|
type="info"
|
|
:show-icon="false"
|
|
class="wait-banner w-full max-w-md"
|
|
style="
|
|
--n-color: color-mix(in oklch, var(--info-color) 12%, transparent);
|
|
--n-border: 1px solid color-mix(in oklch, var(--info-color) 36%, transparent);
|
|
"
|
|
>
|
|
<div class="flex items-center justify-center gap-2.5 text-[13px] leading-none">
|
|
<NSpin :size="14" />
|
|
<NText depth="1" class="tracking-[0.1px]">Подождите, загружаем данные…</NText>
|
|
</div>
|
|
</NAlert>
|
|
</NEl>
|
|
</Transition>
|
|
|
|
<NEl class="pointer-events-none fixed inset-x-0 top-12 bottom-0 overflow-hidden z-0">
|
|
<div class="absolute inset-x-0 top-[-12rem] mx-auto h-80 w-80 rounded-full blur-3xl"
|
|
style="background: color-mix(in oklch, var(--primary-color) 22%, transparent);" />
|
|
<div class="absolute right-[-8rem] top-48 h-72 w-72 rounded-full blur-3xl"
|
|
style="background: color-mix(in oklch, var(--warning-color) 28%, transparent);" />
|
|
<div class="absolute left-[-10rem] bottom-10 h-80 w-80 rounded-full blur-3xl"
|
|
style="background: color-mix(in oklch, var(--info-color) 24%, transparent);" />
|
|
<div class="grid-overlay absolute inset-0 opacity-65" />
|
|
</NEl>
|
|
|
|
<NLayout
|
|
has-sider
|
|
position="absolute"
|
|
class="top-12! bottom-0! relative overflow-hidden z-10"
|
|
content-class="relative z-10"
|
|
:native-scrollbar="false"
|
|
style="--n-color: transparent;"
|
|
>
|
|
<!-- <NLayoutSider-->
|
|
<!-- :native-scrollbar="false"-->
|
|
<!-- width="290"-->
|
|
<!-- class="h-[100vh-48px]!"-->
|
|
<!-- >-->
|
|
<!-- <SideMenu />-->
|
|
<!-- </NLayoutSider>-->
|
|
|
|
<NLayout style="--n-color: transparent;">
|
|
<div>
|
|
<slot name="header" />
|
|
</div>
|
|
<slot />
|
|
</NLayout>
|
|
</NLayout>
|
|
|
|
</NLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wait-alert-enter-active,
|
|
.wait-alert-leave-active {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.wait-alert-enter-from,
|
|
.wait-alert-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-6px);
|
|
}
|
|
|
|
.wait-banner {
|
|
box-shadow:
|
|
0 10px 24px -18px color-mix(in oklch, var(--info-color) 55%, transparent),
|
|
0 4px 12px -10px rgb(0 0 0 / 55%);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
:deep(.wait-banner .n-alert-body) {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
:deep(.wait-banner .n-spin-body) {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/* If a modal is open, keep loading alert in modal visual context (not behind it). */
|
|
:global(body:has(.n-modal-container)) .wait-layer {
|
|
top: 24px;
|
|
}
|
|
</style>
|