88d1c41cb9
- Map pages wired to real MapLibre engine (MapManager/Factory/composables) - mapMonitoring page with device markers and popups - App.vue with keep-alive + route transitions - main.ts with global error handlers + MapLibre CSS - index.html with WeChat/WxJSBridge detection - Deployed to ygcxy.top (nginx-static via Traefik)
81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 应用根组件
|
|
*
|
|
* 使用 Vant ConfigProvider 包裹路由视图，
|
|
* 提供全局主题配置、路由缓存 (keep-alive) 和过渡动画。
|
|
*/
|
|
import { useAppStore } from '@/stores/app'
|
|
|
|
const appStore = useAppStore()
|
|
</script>
|
|
|
|
<template>
|
|
<van-config-provider>
|
|
<router-view v-slot="{ Component, route }">
|
|
<transition
|
|
:name="route.meta.transition as string || 'fade-slide'"
|
|
mode="out-in"
|
|
appear
|
|
>
|
|
<keep-alive :include="appStore.cachedViews">
|
|
<component :is="Component" :key="route.path" />
|
|
</keep-alive>
|
|
</transition>
|
|
</router-view>
|
|
</van-config-provider>
|
|
</template>
|
|
|
|
<style>
|
|
/* App-level 全局样式调整 */
|
|
#app {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── 路由过渡动画 ── */
|
|
|
|
/* 淡入 + 滑动（默认） */
|
|
.fade-slide-enter-active,
|
|
.fade-slide-leave-active {
|
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
|
}
|
|
|
|
.fade-slide-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.fade-slide-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
/* 淡入 */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 向上滑动（用于详情页等） */
|
|
.slide-up-enter-active,
|
|
.slide-up-leave-active {
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.slide-up-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
.slide-up-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-30px);
|
|
}
|
|
</style>
|