feat(DockView): support switching layouts

src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.23</Version>
+    <Version>10.0.24</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.DockView/Components/DockViewComponent.razor

@@ -1,18 +1,21 @@
 @inherits DockViewComponentBase
 
-<div id="@Id" class="bb-dockview-panel" data-bb-key="@Key" data-bb-title="@Title">
-    @if (TitleTemplate != null)
-    {
-        <div class="bb-dockview-item-title">
-            @TitleTemplate
-        </div>
-    }
-    else if (ShowTitleBar)
-    {
-        <DockViewTitleBar BarIcon="@TitleBarIcon" BarIconUrl="@TitleBarIconUrl" OnClickBarCallback="OnClickBar"></DockViewTitleBar>
-    }
-    @if (IsRender())
-    {
-        @ChildContent
-    }
-</div>
+@if (ChildContent != null)
+{
+    <div id="@Id" class="bb-dockview-panel" data-bb-key="@Key" data-bb-title="@Title">
+        @if (TitleTemplate != null)
+        {
+            <div class="bb-dockview-item-title">
+                @TitleTemplate
+            </div>
+        }
+        else if (ShowTitleBar)
+        {
+            <DockViewTitleBar BarIcon="@TitleBarIcon" BarIconUrl="@TitleBarIconUrl" OnClickBarCallback="OnClickBar"></DockViewTitleBar>
+        }
+        @if (IsRender())
+        {
+            @ChildContent
+        }
+    </div>
+}

src/components/BootstrapBlazor.DockView/Components/DockViewComponentBase.cs

@@ -42,6 +42,13 @@ public abstract class DockViewComponentBase : IdComponentBase, IDisposable
     [JsonIgnore]
     public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 名称</para>
+    /// <para lang="en">Gets or sets the name</para>
+    /// </summary>
+    [Parameter]
+    public string? LayoutName { get; set; }
+
     [CascadingParameter]
     private List<DockViewComponentBase>? Parent { get; set; }
 

src/components/BootstrapBlazor.DockView/Components/DockViewConfig.cs

@@ -129,4 +129,10 @@ class DockViewConfig
     /// <para lang="en">Gets or sets the layout configuration. Default is null</para>
     /// </summary>
     public string? LayoutConfig { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 布局名称，默认为 null</para>
+    /// <para lang="en">Gets or sets the layout name. Default is null</para>
+    /// </summary>
+    public string? LayoutName { get; set; }
 }

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

@@ -155,6 +155,13 @@ public partial class DockViewV2
     [Parameter]
     public DockViewTheme Theme { get; set; } = DockViewTheme.Light;
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 布局名称，默认为 null</para>
+    /// <para lang="en">Gets or sets the layout name. Default is null</para>
+    /// </summary>
+    [Parameter]
+    public string? LayoutName { get; set; }
+
     /// <summary>
     /// 嵌套 DockView 时生效防止生成冗余的 DOM 结构
     /// </summary>
@@ -179,6 +186,7 @@ public partial class DockViewV2
     private DockViewOptions? _options = null;
     private ConcurrentDictionary<string, DockViewComponentState> _componentStates = new();
     private string? _layoutConfig;
+    private string? _layoutName;
     private bool _disposed;
 
     /// <summary>
@@ -224,6 +232,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender)
         {
             _layoutConfig = LayoutConfig;
+            _layoutName = LayoutName;
+        }
+        else if (_layoutName != LayoutName)
+        {
+            _layoutName = LayoutName;
+            await InvokeVoidAsync("switchLayout", Id, GetDockViewConfig());
         }
         else if (!_triggerLoadTabs)
         {
@@ -283,14 +297,47 @@ private DockViewConfig GetDockViewConfig()
             LockChangedCallback = nameof(LockChangedCallbackAsync),
             SplitterCallback = nameof(SplitterCallbackAsync),
             SaveConfigCallback = nameof(SaveConfigCallbackAsync),
-            Contents = _components,
-            LoadTabs = nameof(LoadTabs)
+            Contents = GetLayoutContents(),
+            LoadTabs = nameof(LoadTabs),
+            LayoutName = LayoutName
         };
     }
 
+    /// <summary>
+    /// <para lang="zh">根据 <see cref="LayoutName"/> 在服务器端过滤出匹配的布局，避免将所有布局序列化到客户端</para>
+    /// <para lang="en">Filters the matching layout on the server side by <see cref="LayoutName"/> to avoid serializing all layouts to the client</para>
+    /// </summary>
+    private List<DockViewComponentBase> GetLayoutContents()
+    {
+        if (_components.Count == 0)
+        {
+            return [];
+        }
+
+        var content = _components[0];
+        if (string.IsNullOrEmpty(LayoutName))
+        {
+            return [content];
+        }
+
+        return [_components.Find(item => item.LayoutName == LayoutName) ?? content];
+    }
+
     private bool IsEnableLocalStorage => EnableLocalStorage ?? _options.EnableLocalStorage ?? false;
 
-    private string? LocalStorageKey => IsEnableLocalStorage ? $"{GetPrefixKey()}-{Name}-{GetVersion()}" : null;
+    private string? LocalStorageKey
+    {
+        get
+        {
+            if (!IsEnableLocalStorage)
+            {
+                return null;
+            }
+
+            var layoutSegment = string.IsNullOrEmpty(LayoutName) ? "" : $"-{LayoutName}";
+            return $"{GetPrefixKey()}-{Name}{layoutSegment}-{GetVersion()}";
+        }
+    }
 
     private string GetVersion() => Version ?? _options.Version ?? "v1";
 

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

@@ -17,9 +17,6 @@ export async function init(id, invoke, options) {
         }
     }
     const dockview = cerateDockview(el, options);
-    dockview.params.invisiblePanels?.forEach(invisiblePanel => {
-        invoke.invokeMethodAsync(options.panelVisibleChangedCallback, invisiblePanel.params.key, false);
-    })
 
     const updateTheme = e => dockview.switchTheme(e.theme);
     Data.set(id, { el, dockview, updateTheme });

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

@@ -1,4 +1,4 @@
-import { getPanelsFromOptions } from "./dockview-panel.js"
+import { getPanelsFromOptions, getRootContent } from "./dockview-panel.js"
 
 const initDockviewFromConfig = (dockview, options) => {
     const { layoutConfig, enableLocalStorage } = options;
@@ -58,17 +58,39 @@ const initDockviewFromConfig = (dockview, options) => {
     else {
         dockview.fromJSON(getConfigFromContent(options));
         dockview.params.invisiblePanels = [];
+        dockview.params.floatingGroups = [];
     }
 
+    syncLayoutToContainer(dockview);
 }
 
+const syncLayoutToContainer = dockview => {
+    const el = dockview.gridview?.element?.parentElement ?? dockview.element;
+    if (!el) return;
+    const width = el.clientWidth;
+    const height = el.clientHeight;
+    if (!width || !height) return;
+    if (width === dockview.width && height === dockview.height) return;
+    dockview.layout(width, height, true);
+}
+
+
 const getConfigFromContent = options => {
     const { width, height } = { width: 800, height: 600 };
     const getGroupId = getGroupIdFunc()
     options = filterEmptyContent(options)
-    const panels = {}, rootType = options.content[0].type
+    const rootContent = getRootContent(options)
+    if (!rootContent) {
+        return {
+            activeGroup: '1',
+            grid: { width, height, orientation: 'HORIZONTAL', root: { type: 'branch', size: 0, data: [] } },
+            panels: {}
+        }
+    }
+    const rootParent = { content: [rootContent] }
+    const panels = {}, rootType = rootContent.type
     const orientation = rootType === 'column' ? 'VERTICAL' : 'HORIZONTAL';
-    const root = getTree(options.content[0], { width, height, orientation }, options, panels, getGroupId, options)
+    const root = getTree(rootContent, { width, height, orientation }, rootParent, panels, getGroupId, options)
     return {
         activeGroup: '1',
         grid: { width, height, orientation, root },
@@ -260,9 +282,6 @@ const saveConfig = dockview => {
         return;
     }
 
-    // Don't persist a collapsed/unmeasured layout: while collapsed toJSON() serializes size:100, which
-    // makes the even-split sticky across refreshes. Real layouts are measured (width>0), so this only
-    // drops a degenerate save the next change re-saves.
     if (!dockview.width || !dockview.height) {
         return;
     }
@@ -271,10 +290,6 @@ const saveConfig = dockview => {
         panel.params.isActive = panel.api.isActive || panel.group.activePanel === panel
     })
 
-    // While maximized, toJSON()'s serialize() toggles sibling visibility once; guard it with
-    // `maximizing` so the onlyWhenVisible handler doesn't move sibling content into the template
-    // (which would blank it after exit). finally resets the flag even on throw, otherwise a stuck
-    // `maximizing` would make every later saveConfig bail at the top guard.
     let gridJson;
     dockview.params.maximizing = true;
     try {
@@ -341,6 +356,10 @@ const syncLayoutWithOptions = (layout, options, invisiblePanels = []) => {
         if (p.params?.key) localIdByKey.set(p.params.key, p.id);
     });
 
+    if (optionPanels.length === 0) {
+        return layout;
+    }
+
     const matchCount = [...optionPanelByKey.keys()].filter(key => localIdByKey.has(key)).length;
     if (matchCount === 0) {
         return getConfigFromContent(options);

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

@@ -463,7 +463,7 @@ const createDrawerBtn = (floatingGroup, isRight) => {
 const removeDrawerBtn = group => {
     const parentEle = group.api.accessor.element.parentElement.parentElement
     const btnList = parentEle?.querySelectorAll(`[groupid="${group.api.accessor.id}_${group.id}"]`)
-    btnList.forEach(btn => btn.remove())
+    btnList?.forEach(btn => btn.remove())
 }
 
 const setDrawerTitle = group => {

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

@@ -120,8 +120,10 @@ const updateTitle = panel => {
     }
 }
 
+export const getRootContent = options => options.content.find(c => c.layoutName === options.layoutName) || options.content[0]
 const getPanelsFromOptions = options => {
-    return getPanels(options.content[0], options)
+    const rootContent = getRootContent(options)
+    return rootContent ? getPanels(rootContent, options) : []
 }
 
 const getPanels = (contentItem, options, parent = {}, panels = []) => {