49 lines
1.7 KiB
Vue
49 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
import { RouterView } from 'vue-router'
|
||
import ErrorBoundary from '@/views/fallback/ErrorBoundary.vue'
|
||
import FallbackPage from '@/views/fallback/FallbackPage.vue'
|
||
import { useOnline } from '@/composables/useOnline'
|
||
|
||
/**
|
||
* 应用根：渲染当前路由页面 + 离线兜底层。
|
||
*
|
||
* ErrorBoundary 包住整个 RouterView（含 DefaultLayout 外壳）：
|
||
* 页面或布局的渲染错误就地兜成 500 缺省页，而不是整屏白。
|
||
* 对照 fms-vue 的 App.vue（`<ErrorBoundary><router-view /></ErrorBoundary>`）。
|
||
*
|
||
* 注意 onErrorCaptured 只捕获【后代组件】的错误；根组件自身与
|
||
* 事件回调 / 异步链里的错误不走这里 —— 那些由 main.ts 的
|
||
* app.config.errorHandler 与接口层的统一提示兜底。
|
||
*/
|
||
|
||
const { isOffline } = useOnline()
|
||
|
||
/**
|
||
* 离线兜底：断网时在最上层【盖一页】离线缺省页，恢复后自动移除。
|
||
*
|
||
* ⚠️ 用覆盖层，而不是 v-if 把 RouterView 换掉：
|
||
* 原页面组件始终挂载，断网前后的表单输入、滚动位置、页签缓存全部保留；
|
||
* 若用 v-else 替换，断网瞬间页面被卸载，恢复后回到初始状态，用户填了一半的表单就没了。
|
||
* 这正是 fms-vue 的做法（它注释里明确写了这个取舍）。
|
||
*
|
||
* z-index 取 5000：高于弹窗（G3UI 的弹层走 z-index 管理器，基数 200 左右），
|
||
* 断网时全域可见、不被任何浮层遮挡。
|
||
*/
|
||
</script>
|
||
|
||
<template>
|
||
<ErrorBoundary>
|
||
<RouterView />
|
||
</ErrorBoundary>
|
||
|
||
<FallbackPage v-if="isOffline" status="offline" class="app-offline" />
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-offline {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 5000;
|
||
}
|
||
</style>
|