From 6ff5c6e949edfe7b236ffac2ef04d0a675b4bf5c Mon Sep 17 00:00:00 2001
From: chengqian <wuchengqian5@163.com>
Date: Thu, 30 Jul 2026 14:40:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E9=98=B2=E6=AD=A2=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=BC=82=E5=B8=B8=E9=98=BB=E5=A1=9E=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/RouteErrorBoundary.vue     | 45 ++++++++++++++++++
 web/admin/src/main.ts                         |  3 ++
 web/admin/src/views/AdminLayout.vue           |  7 ++-
 .../components/common/RouteErrorBoundary.vue  | 46 +++++++++++++++++++
 web/tenant/src/main.ts                        |  3 ++
 web/tenant/src/views/Layout.vue               |  7 ++-
 6 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 web/admin/src/components/RouteErrorBoundary.vue
 create mode 100644 web/tenant/src/components/common/RouteErrorBoundary.vue

diff --git a/web/admin/src/components/RouteErrorBoundary.vue b/web/admin/src/components/RouteErrorBoundary.vue
new file mode 100644
index 0000000..7935347
--- /dev/null
+++ b/web/admin/src/components/RouteErrorBoundary.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const error = ref<unknown>(null)
+
+onErrorCaptured((caughtError, _instance, info) => {
+  error.value = caughtError
+  console.error('[RouteErrorBoundary]', info, caughtError)
+  return false
+})
+
+function reloadPage() {
+  window.location.reload()
+}
+
+async function goToDashboard() {
+  error.value = null
+  await router.push({ name: 'AdminDashboard' })
+}
+</script>
+
+<template>
+  <slot v-if="!error" />
+  <div v-else class="route-error">
+    <AResult status="error" title="页面加载失败" subtitle="页面数据异常，请重试或返回仪表盘">
+      <template #extra>
+        <ASpace>
+          <AButton type="primary" @click="reloadPage">重新加载</AButton>
+          <AButton @click="goToDashboard">返回仪表盘</AButton>
+        </ASpace>
+      </template>
+    </AResult>
+  </div>
+</template>
+
+<style scoped>
+.route-error {
+  display: flex;
+  min-height: min(520px, calc(100vh - 160px));
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/web/admin/src/main.ts b/web/admin/src/main.ts
index 661008c..4ba0800 100644
--- a/web/admin/src/main.ts
+++ b/web/admin/src/main.ts
@@ -27,6 +27,9 @@ console.log(
 )
 
 const app = createApp(App)
+app.config.errorHandler = (error, _instance, info) => {
+  console.error('[VueError]', info, error)
+}
 app.use(createPinia())
 app.use(ArcoVue)
 app.use(router)
diff --git a/web/admin/src/views/AdminLayout.vue b/web/admin/src/views/AdminLayout.vue
index 9b3c96b..70bbc4f 100644
--- a/web/admin/src/views/AdminLayout.vue
+++ b/web/admin/src/views/AdminLayout.vue
@@ -5,6 +5,7 @@ import { Message } from '@arco-design/web-vue'
 import axios from 'axios'
 import { marked } from 'marked'
 import request from '@/utils/request'
+import RouteErrorBoundary from '@/components/RouteErrorBoundary.vue'
 import { useWatermark } from '@/composables/useWatermark'
 import { useSiteName } from '@/composables/useSiteName'
 import {
@@ -610,9 +611,11 @@ onUnmounted(() => {
 
       <!-- Content -->
       <main class="admin-content page-bg">
-        <router-view v-slot="{ Component }">
+        <router-view v-slot="{ Component, route: currentRoute }">
           <Transition name="page-fade" mode="out-in">
-            <component :is="Component" />
+            <RouteErrorBoundary :key="currentRoute.fullPath">
+              <component :is="Component" />
+            </RouteErrorBoundary>
           </Transition>
         </router-view>
       </main>
diff --git a/web/tenant/src/components/common/RouteErrorBoundary.vue b/web/tenant/src/components/common/RouteErrorBoundary.vue
new file mode 100644
index 0000000..98ff179
--- /dev/null
+++ b/web/tenant/src/components/common/RouteErrorBoundary.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import Icon from '@/components/common/Icon.vue'
+
+const router = useRouter()
+const error = ref<unknown>(null)
+
+onErrorCaptured((caughtError, _instance, info) => {
+  error.value = caughtError
+  console.error('[RouteErrorBoundary]', info, caughtError)
+  return false
+})
+
+function reloadPage() {
+  window.location.reload()
+}
+
+async function goToDashboard() {
+  error.value = null
+  await router.push({ name: 'TenantDashboard' })
+}
+</script>
+
+<template>
+  <slot v-if="!error" />
+  <div v-else class="flex min-h-[min(520px,calc(100vh-10rem))] items-center justify-center px-4">
+    <div class="w-full max-w-lg text-center">
+      <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-red-50 text-red-500">
+        <Icon name="exclamationCircle" size="xl" />
+      </div>
+      <h2 class="mt-5 text-lg font-semibold text-gray-900">页面加载失败</h2>
+      <p class="mt-2 text-sm text-gray-500">页面数据异常，请重试或返回仪表盘</p>
+      <div class="mt-6 flex flex-wrap justify-center gap-3">
+        <button type="button" class="btn btn-primary" @click="reloadPage">
+          <Icon name="refresh" size="sm" />
+          重新加载
+        </button>
+        <button type="button" class="btn btn-secondary" @click="goToDashboard">
+          <Icon name="chart" size="sm" />
+          返回仪表盘
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/tenant/src/main.ts b/web/tenant/src/main.ts
index 425faee..b7926af 100644
--- a/web/tenant/src/main.ts
+++ b/web/tenant/src/main.ts
@@ -29,6 +29,9 @@ console.log(
 )
 
 const app = createApp(App)
+app.config.errorHandler = (error, _instance, info) => {
+  console.error('[VueError]', info, error)
+}
 app.use(head)
 app.use(createPinia())
 app.use(router)
diff --git a/web/tenant/src/views/Layout.vue b/web/tenant/src/views/Layout.vue
index a928885..21e3ccb 100644
--- a/web/tenant/src/views/Layout.vue
+++ b/web/tenant/src/views/Layout.vue
@@ -10,6 +10,7 @@ import { toast } from '@/utils/toast'
 import Icon from '@/components/common/Icon.vue'
 import MaintenanceBanner from '@/components/common/MaintenanceBanner.vue'
 import AnnouncementBanner from '@/components/common/AnnouncementBanner.vue'
+import RouteErrorBoundary from '@/components/common/RouteErrorBoundary.vue'
 import { marked } from 'marked'
 import request from '@/utils/request'
 
@@ -510,7 +511,11 @@ onBeforeUnmount(() => {
 				class="tenant-main px-3 pb-5 pt-4 md:px-5 md:pb-6 lg:pt-5"
 				:class="{ 'tenant-table-main': route.meta.viewportTable }"
 			>
-				<router-view />
+				<router-view v-slot="{ Component, route: currentRoute }">
+					<RouteErrorBoundary :key="currentRoute.fullPath">
+						<component :is="Component" />
+					</RouteErrorBoundary>
+				</router-view>
 			</main>
 		</div>
 	</div>