u

code/g3soft-erp/web/src/App.vue

@@ -1,7 +1,48 @@
 <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>
-  <RouterView />
+  <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>