perf: 优化旧版浏览器页面恢复与资源加载

- 页面恢复时延后版本检查并补齐根背景，减少白闪与首帧卡顿

- 面向 Chrome 90 收敛公共分包，按需加载资源弹窗和知识库面板

- 压缩工作流图标并补充延迟加载与可见性生命周期测试

easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useAccess } from '@easyflow/access';
@@ -7,25 +7,64 @@ import { $t } from '@easyflow/locales';
 import { useUserStore } from '@easyflow/stores';
 
 import { ArrowLeft, Plus } from '@element-plus/icons-vue';
-import { ElButton, ElIcon, ElImage } from 'element-plus';
+import { ElButton, ElIcon, ElImage, ElMessage } from 'element-plus';
 
 import { api } from '#/api/request';
 import bookIcon from '#/assets/ai/knowledge/book.svg';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
-import ChunkDocumentTable from '#/views/ai/documentCollection/ChunkDocumentTable.vue';
-import DocumentCollectionDataConfig from '#/views/ai/documentCollection/DocumentCollectionDataConfig.vue';
-import DocumentTable from '#/views/ai/documentCollection/DocumentTable.vue';
-import FaqTable from '#/views/ai/documentCollection/FaqTable.vue';
-import ImportKnowledgeDocFile from '#/views/ai/documentCollection/ImportKnowledgeDocFile.vue';
-import KnowledgeSearch from '#/views/ai/documentCollection/KnowledgeSearch.vue';
-import KnowledgeShareManagement from '#/views/ai/documentCollection/KnowledgeShareManagement.vue';
-import SegmenterDoc from '#/views/ai/documentCollection/SegmenterDoc.vue';
+import { createLazyComponentController } from '#/utils/lazy-component';
+
+const ChunkDocumentTable = defineAsyncComponent(
+  () => import('#/views/ai/documentCollection/ChunkDocumentTable.vue'),
+);
+const DocumentCollectionDataConfig = defineAsyncComponent(
+  () =>
+    import('#/views/ai/documentCollection/DocumentCollectionDataConfig.vue'),
+);
+const DocumentTable = defineAsyncComponent(
+  () => import('#/views/ai/documentCollection/DocumentTable.vue'),
+);
+const FaqTable = defineAsyncComponent(
+  () => import('#/views/ai/documentCollection/FaqTable.vue'),
+);
+const KnowledgeSearch = defineAsyncComponent(
+  () => import('#/views/ai/documentCollection/KnowledgeSearch.vue'),
+);
+const KnowledgeShareManagement = defineAsyncComponent(
+  () => import('#/views/ai/documentCollection/KnowledgeShareManagement.vue'),
+);
+const SegmenterDoc = defineAsyncComponent(
+  () => import('#/views/ai/documentCollection/SegmenterDoc.vue'),
+);
 
 const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const { hasAccessByCodes } = useAccess();
 
+interface ImportKnowledgeDocFileInstance {
+  openDialog: () => void;
+}
+
+const {
+  component: ImportKnowledgeDocFileComponent,
+  componentRef: importDocModalRef,
+  ensureInstance: ensureImportKnowledgeDocFile,
+  loading: importDialogLoading,
+} = createLazyComponentController<ImportKnowledgeDocFileInstance>(
+  () => import('#/views/ai/documentCollection/ImportKnowledgeDocFile.vue'),
+);
+
+async function openImportDialog() {
+  try {
+    const modal = await ensureImportKnowledgeDocFile();
+    modal.openDialog();
+  } catch (error) {
+    console.error('Failed to load document import modal:', error);
+    ElMessage.error($t('message.getDataError'));
+  }
+}
+
 const knowledgeId = ref<string>((route.query.id as string) || '');
 const activeMenu = ref<string>((route.query.activeMenu as string) || '');
 const knowledgeInfo = ref<any>({});
@@ -149,10 +188,9 @@ const headerButtons = [
 ];
 const panelMode = ref<'chunk' | 'list' | 'process'>('list');
 const documentTableRef = ref();
-const importDocModalRef = ref<InstanceType<typeof ImportKnowledgeDocFile>>();
 const documentTitle = ref('');
 const handleSearch = (searchParams: string) => {
-  documentTableRef.value.search(searchParams);
+  documentTableRef.value?.search?.(searchParams);
 };
 const handleButtonClick = (event: any) => {
   // 根据按钮 key 执行不同操作
@@ -162,7 +200,7 @@ const handleButtonClick = (event: any) => {
       break;
     }
     case 'importFile': {
-      importDocModalRef.value?.openDialog?.();
+      void openImportDialog();
       break;
     }
   }
@@ -193,7 +231,7 @@ const backDoc = async () => {
 </script>
 
 <template>
-  <div class="document-container">
+  <div v-loading="importDialogLoading" class="document-container">
     <div class="doc-header-container">
       <div class="doc-knowledge-container">
         <div @click="back()" style="cursor: pointer">
@@ -301,7 +339,9 @@ const backDoc = async () => {
         </div>
       </div>
     </div>
-    <ImportKnowledgeDocFile
+    <component
+      :is="ImportKnowledgeDocFileComponent"
+      v-if="ImportKnowledgeDocFileComponent"
       ref="importDocModalRef"
       :knowledge-id-prop="String(knowledgeId)"
       @imported="backDoc"