From 3e9ed9e1320b36b7947f87ad7a8fca85fe076ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?=
 <908705107@qq.com>
Date: Mon, 22 Jun 2026 08:26:18 +0800
Subject: [PATCH] perf: defer ai page prefetch

---
 .../components/ai-chat-panel/AiChatPanel.vue  |  7 ++
 web/apps/web-ele/src/router/prefetch.ts       | 92 +++++++++++++------
 2 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue b/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue
index e99daee..f1458d2 100644
--- a/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue
+++ b/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue
@@ -1091,6 +1091,7 @@ onUnmounted(() => {
     <!-- 侧边栏布局时的设计面板（保持原有行为） -->
     <template v-if="layout === 'sidebar'">
       <DesignEditorPanel
+        v-if="showDesignPanel"
         :visible="showDesignPanel"
         :design="currentDesign as any"
         @update:visible="showDesignPanel = $event"
@@ -1099,6 +1100,7 @@ onUnmounted(() => {
       />
 
       <AppDesignPanel
+        v-if="showAppDesignPanel"
         :visible="showAppDesignPanel"
         :design="currentAppDesign as any"
         @update:visible="showAppDesignPanel = $event"
@@ -1107,6 +1109,7 @@ onUnmounted(() => {
       />
 
       <AppSettingsPanel
+        v-if="showAppSettingsPanel"
         :visible="showAppSettingsPanel"
         :settings="currentAppSettings as any"
         @update:visible="showAppSettingsPanel = $event"
@@ -1115,6 +1118,7 @@ onUnmounted(() => {
       />
 
       <DashboardBasicInfoConfirmPanel
+        v-if="showDashboardBasicInfoPanel"
         :visible="showDashboardBasicInfoPanel"
         :basic-info="currentDashboardBasicInfo as any"
         @update:visible="showDashboardBasicInfoPanel = $event"
@@ -1123,6 +1127,7 @@ onUnmounted(() => {
       />
 
       <DashboardDesignConfirmPanel
+        v-if="showDashboardDesignPanel"
         :visible="showDashboardDesignPanel"
         :design="currentDashboardDesign as any"
         @update:visible="showDashboardDesignPanel = $event"
@@ -1131,6 +1136,7 @@ onUnmounted(() => {
       />
 
       <DashboardPublishConfirmPanel
+        v-if="showDashboardPublishPanel"
         :visible="showDashboardPublishPanel"
         :publish-data="currentDashboardPublish as any"
         @update:visible="showDashboardPublishPanel = $event"
@@ -1139,6 +1145,7 @@ onUnmounted(() => {
       />
 
       <SystemSummaryConfirmPanel
+        v-if="showSystemSummaryPanel"
         :visible="showSystemSummaryPanel"
         :data="currentSystemSummary as any"
         @update:visible="showSystemSummaryPanel = $event"
diff --git a/web/apps/web-ele/src/router/prefetch.ts b/web/apps/web-ele/src/router/prefetch.ts
index b363b47..cba5098 100644
--- a/web/apps/web-ele/src/router/prefetch.ts
+++ b/web/apps/web-ele/src/router/prefetch.ts
@@ -16,9 +16,11 @@ type NavigatorWithConnection = Navigator & {
     effectiveType?: string;
     saveData?: boolean;
   };
+  deviceMemory?: number;
 };
 
 const prefetchedGroups = new Set<string>();
+const scheduledGroups = new Set<string>();
 
 type PrefetchTask = {
   key: string;
@@ -31,39 +33,36 @@ const corePrefetchTasks: PrefetchTask[] = [
   { key: 'system-role', load: () => import('#/views/_core/role/index.vue') },
 ];
 
-const aiInteractivePrefetchTasks: PrefetchTask[] = [
-  {
-    key: 'agent-chat',
-    load: () => import('#/views/_core/agent-chat/index.vue'),
-  },
-  {
-    key: 'ai-chat-panel',
-    load: () => import('#/components/ai-chat-panel/AiChatPanel.vue'),
-  },
-];
-
-const aiManagementPrefetchTasks: PrefetchTask[] = [
-  {
+const aiPrefetchTasks = {
+  agent: {
     key: 'ai-agent',
     load: () => import('#/views/ai-platform/agent/index.vue'),
   },
-  {
-    key: 'ai-workflow',
-    load: () => import('#/views/ai-platform/workflow/index.vue'),
+  agentChat: {
+    key: 'agent-chat',
+    load: () => import('#/views/_core/agent-chat/index.vue'),
   },
-  {
-    key: 'ai-model',
-    load: () => import('#/views/ai-platform/model/index.vue'),
+  aiChatPanel: {
+    key: 'ai-chat-panel',
+    load: () => import('#/components/ai-chat-panel/AiChatPanel.vue'),
   },
-  {
+  knowledge: {
     key: 'ai-knowledge',
     load: () => import('#/views/ai-platform/knowledge/index.vue'),
   },
-  {
+  model: {
+    key: 'ai-model',
+    load: () => import('#/views/ai-platform/model/index.vue'),
+  },
+  workflow: {
+    key: 'ai-workflow',
+    load: () => import('#/views/ai-platform/workflow/index.vue'),
+  },
+  workflowRuns: {
     key: 'ai-workflow-runs',
     load: () => import('#/views/ai-platform/workflow-runs/index.vue'),
   },
-];
+} as const;
 
 function scheduleIdle(callback: () => void) {
   const browserWindow = window as WindowWithIdleCallback;
@@ -86,6 +85,11 @@ function canPrefetch() {
     return false;
   }
 
+  const deviceMemory = (navigator as NavigatorWithConnection).deviceMemory;
+  if (deviceMemory && deviceMemory < 4) {
+    return false;
+  }
+
   return !/(^|-)2g$/.test(connection?.effectiveType || '');
 }
 
@@ -99,13 +103,18 @@ async function runTasksSequentially(tasks: PrefetchTask[]) {
     }
     prefetchedGroups.add(task.key);
     await task.load().catch(() => undefined);
+    await new Promise((resolve) => window.setTimeout(resolve, 300));
   }
 }
 
-function delayedPrefetch(tasks: PrefetchTask[], delay: number) {
+function delayedPrefetch(groupKey: string, tasks: PrefetchTask[], delay: number) {
   if (!tasks.length || typeof window === 'undefined') {
     return;
   }
+  if (scheduledGroups.has(groupKey)) {
+    return;
+  }
+  scheduledGroups.add(groupKey);
 
   window.setTimeout(() => {
     scheduleIdle(() => {
@@ -126,29 +135,54 @@ function isAgentChatRoute(path: string) {
   return path.startsWith('/agent-chat/');
 }
 
+function getAiRoutePrefetchTasks(path: string): PrefetchTask[] {
+  if (path.startsWith('/ai-platform/agent')) {
+    return [aiPrefetchTasks.workflow, aiPrefetchTasks.model];
+  }
+  if (path.startsWith('/ai-platform/workflow-runs')) {
+    return [aiPrefetchTasks.workflow];
+  }
+  if (path.startsWith('/ai-platform/workflow')) {
+    return [aiPrefetchTasks.workflowRuns, aiPrefetchTasks.agent];
+  }
+  if (path.startsWith('/ai-platform/model')) {
+    return [aiPrefetchTasks.agent, aiPrefetchTasks.workflow];
+  }
+  if (path.startsWith('/ai-platform/knowledge')) {
+    return [aiPrefetchTasks.agent];
+  }
+  return [aiPrefetchTasks.agent, aiPrefetchTasks.workflow];
+}
+
 function prefetchAiPlatformPages(currentPath = '') {
   if (typeof window === 'undefined') {
     return;
   }
 
   if (isSystemRoute(currentPath)) {
-    delayedPrefetch(corePrefetchTasks, 6000);
+    delayedPrefetch(`core:${currentPath}`, corePrefetchTasks, 8000);
     return;
   }
 
   if (isAgentChatRoute(currentPath)) {
-    delayedPrefetch(aiInteractivePrefetchTasks, 1500);
+    delayedPrefetch(
+      `agent-chat:${currentPath}`,
+      [aiPrefetchTasks.agentChat, aiPrefetchTasks.aiChatPanel],
+      6000,
+    );
     return;
   }
 
   if (isAiPlatformRoute(currentPath)) {
-    delayedPrefetch(aiManagementPrefetchTasks, 2000);
-    delayedPrefetch(aiInteractivePrefetchTasks, 4500);
+    delayedPrefetch(
+      `ai:${currentPath}`,
+      getAiRoutePrefetchTasks(currentPath),
+      6000,
+    );
     return;
   }
 
-  delayedPrefetch(corePrefetchTasks, 7000);
-  delayedPrefetch(aiInteractivePrefetchTasks, 12_000);
+  delayedPrefetch('core:home', corePrefetchTasks, 10_000);
 }
 
 export { prefetchAiPlatformPages };