feat: 完善异步加载

Author: zhaijunlei955

src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.cs

@@ -304,7 +304,7 @@ public Task LoadActiveTabs(List<string> tabs)
     /// </summary>
     /// <param name="tabs"></param>
     [JSInvokable]
-    private Task LoadInactiveTabs(List<string> tabs)
+    public Task LoadInactiveTabs(List<string> tabs)
     {
         // 客户端请求渲染当前未激活的标签
         _inactiveTabs.Clear();

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js

@@ -278,7 +278,7 @@ const getGroupNode = (contentItem, size, boxSize, parent, panels, getGroupId, op
                     title: item.title,
                     tabComponent: item.componentName,
                     contentComponent: item.componentName,
-                    renderer: item.renderer || options.renderer,
+                    // renderer: item.renderer || options.renderer,
                     params: { ...item, parentId: parent.id }
                 }
                 return item.id
@@ -303,7 +303,7 @@ const getLeafNode = (contentItem, size, boxSize, parent, panels, getGroupId, opt
     panels[contentItem.id] = {
         id: contentItem.id,
         title: contentItem.title,
-        renderer: contentItem.renderer || options.renderer,
+        // renderer: contentItem.renderer || options.renderer,
         tabComponent: contentItem.componentName,
         contentComponent: contentItem.componentName,
         params: { ...contentItem, parentId: parent.id }

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js

@@ -25,9 +25,9 @@ const observePanelActiveChange = panel => {
     })
     panel.api.onDidVisibilityChange(({ isVisible }) => {
         const dockview = panel.accessor;
-        if (dockview._inited && isVisible) {
-            console.log(isVisible, 'isVisible');
-            dockview._loadActiveTabs?.fire([panel.params.key]);
+        if (dockview.params.options.renderer === 'onlyWhenVisible' && dockview._inited && isVisible) {
+            const visiblePanels = dockview.groups.map(g => g.panels.find(p => p.params.isActive) || g.panels.find(p => p.api.isVisible))
+            dockview._loadActiveTabs?.fire(visiblePanels.filter(p => Boolean(p)).map(p => p.params.key));
         }
     })
 }
@@ -143,7 +143,7 @@ const getPanels = (contentItem, options, parent = {}, panels = []) => {
             id: contentItem.id,
             groupId: contentItem.groupId,
             title: contentItem.title,
-            renderer: contentItem.renderer || options.renderer,
+            // renderer: contentItem.renderer || options.renderer,
             tabComponent: contentItem.componentName,
             contentComponent: contentItem.componentName,
             params: { ...contentItem, parentType: parent.type, parentId: parent.id }

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js

@@ -8,6 +8,7 @@ import './dockview-extensions.js'
 const cerateDockview = (el, options) => {
     const theme = options.theme || "dockview-theme-light";
     const template = el.querySelector('template');
+    options.renderer ??= 'partial'; // onlyWhenVisible | partial | always
     const dockview = new DockviewComponent(el, {
         parentElement: el,
         theme: {
@@ -95,10 +96,21 @@ const initDockview = (dockview, options, template) => {
             clearTimeout(handler);
             const panels = dockview.panels;
             const groups = dockview.groups;
-            const delPanelsStr = localStorage.getItem(dockview.params.options.localStorageKey + '-panels')
-            const delPanels = delPanelsStr && JSON.parse(delPanelsStr) || []
-            const visiblePanels = groups.map(g => g.panels.find(p => p.params.isActive) || g.panels.find(p => p.api.isVisible))
-            dockview._loadActiveTabs?.fire(visiblePanels.filter(p => Boolean(p)).map(p => p.params.key));
+            const delPanelsStr = localStorage.getItem(dockview.params.options.localStorageKey + '-panels');
+            const delPanels = delPanelsStr && JSON.parse(delPanelsStr) || [];
+            if (options.renderer === 'always') {
+                dockview._loadActiveTabs?.fire(panels.map(p => p.params.key));
+            }
+            else if (options.renderer === 'partial' || options.renderer === 'onlyWhenVisible') {
+                const visiblePanels = groups.filter(g => g.isVisible).map(g => g.panels.find(p => p.params.isActive) || g.panels.find(p => p.api.isVisible))
+                dockview._loadActiveTabs?.fire(visiblePanels.filter(p => Boolean(p)).map(p => p.params.key));
+            }
+            if (options.renderer === 'partial') {
+                const inVisiblePanels = groups.flatMap(g => g.panels.filter(p => !p.api.isVisible));
+                if (inVisiblePanels.length > 0) {
+                    dockview._loadInactiveTabs?.fire(inVisiblePanels.map(p => p.params.key));
+                }
+            }
             panels.forEach(panel => {
                 const visible = panel.params.visible
                 if (!visible) {