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"

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

@@ -44,8 +44,8 @@ import CardPage from '#/components/page/CardList.vue';
 import PageData from '#/components/page/PageData.vue';
 import PageSide from '#/components/page/PageSide.vue';
 import { copyTextWithFeedback } from '#/utils/clipboard-feedback';
+import { createLazyComponentController } from '#/utils/lazy-component';
 import { buildAbsoluteAppRouteUrl } from '#/utils/share-route-context';
-import DocumentCollectionModal from '#/views/ai/documentCollection/DocumentCollectionModal.vue';
 import AiResourceCornerMeta from '#/views/ai/shared/AiResourceCornerMeta.vue';
 import { confirmPublishSubmission } from '#/views/ai/shared/approval-application-reason';
 import {
@@ -70,6 +70,29 @@ const collectionTypeLabelMap = {
 };
 type VisibilityScope = 'DEPT' | 'PRIVATE' | 'PUBLIC';
 
+interface DocumentCollectionModalInstance {
+  openDialog: (row: Record<string, unknown>) => void;
+}
+
+const {
+  component: DocumentCollectionModalComponent,
+  componentRef: aiKnowledgeModalRef,
+  ensureInstance: ensureDocumentCollectionModal,
+  loading: knowledgeModalLoading,
+} = createLazyComponentController<DocumentCollectionModalInstance>(
+  () => import('#/views/ai/documentCollection/DocumentCollectionModal.vue'),
+);
+
+async function openKnowledgeModal(row: Record<string, unknown>) {
+  try {
+    const modal = await ensureDocumentCollectionModal();
+    modal.openDialog(row);
+  } catch (error) {
+    console.error('Failed to load knowledge modal:', error);
+    ElMessage.error($t('message.getDataError'));
+  }
+}
+
 const canManageKnowledgePermission = computed(() =>
   hasAccessByCodes(['/api/v1/documentCollection/save']),
 );
@@ -205,7 +228,7 @@ const actions: ActionButton[] = [
       if (!ensureManageKnowledgeItem(row)) {
         return;
       }
-      aiKnowledgeModalRef.value.openDialog(row);
+      void openKnowledgeModal(row);
     },
   },
   {
@@ -460,7 +483,6 @@ function resolvePublishStatusMeta(
 }
 
 const pageDataRef = ref();
-const aiKnowledgeModalRef = ref();
 const headerButtons = [
   {
     key: 'add',
@@ -474,7 +496,7 @@ const headerButtons = [
 const handleButtonClick = (event: any, _item: any) => {
   switch (event.key) {
     case 'add': {
-      aiKnowledgeModalRef.value.openDialog({});
+      void openKnowledgeModal({});
       break;
     }
   }
@@ -667,7 +689,7 @@ function changeCategory(category: any) {
 </script>
 
 <template>
-  <div class="flex h-full flex-col gap-6 p-6">
+  <div v-loading="knowledgeModalLoading" class="flex h-full flex-col gap-6 p-6">
     <div class="knowledge-header">
       <HeaderSearch
         :buttons="headerButtons"
@@ -865,7 +887,9 @@ function changeCategory(category: any) {
     </EasyFlowFormModal>
 
     <!--    新增知识库模态框-->
-    <DocumentCollectionModal
+    <component
+      :is="DocumentCollectionModalComponent"
+      v-if="DocumentCollectionModalComponent"
       ref="aiKnowledgeModalRef"
       @reload="reloadKnowledgeList"
     />