doc(DockView): add auto switch theme sample (#5713)

ArgoZhang · web-flow · commit 788723bf6bba · 2025-03-25T13:24:12.000+08:00
* refactor: 主题切换改为 JS 框架完成

* refactor: 重构代码

* refactor: 增加主题同步代码逻辑

* refactor: 异步支持

* refactor: 精简代码提高可读性

* refactor: 重构代码降低版本要求

* refactor: 增加 TriggerThemeChanged 事件响应

* revert: 撤销 ThemeMode 代码更改

* style: 更新 Dropdown 暗黑主题背景色

* revert: 撤销 Theme 设置

* chore: 更新依赖

* refactor: 重构代码
diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -31,7 +31,7 @@
     <PackageReference Include="BootstrapBlazor.Chart" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.7" />
+    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.8" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />
@@ -48,7 +48,7 @@
     <PackageReference Include="BootstrapBlazor.Markdown" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.9" />
-    <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
+    <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.4" />
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.6" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.OctIcon" Version="9.0.4" />
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor b/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor
@@ -1,5 +1,5 @@
 ﻿@inherits WebSiteModuleComponentBase
-@attribute [JSModuleAutoLoader("Components/ThemeMode.razor.js", JSObjectReference = true)]
+@attribute [JSModuleAutoLoader("Components/ThemeMode.razor.js")]
 
 <div id="@Id" class="btn btn-circle btn-fade btn-theme-mode icon-theme d-flex" @onclick:stopPropagation>
     <i class="@GetLightIconClassString"></i>
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.cs b/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.cs
@@ -3,8 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
-using Microsoft.JSInterop;
-
 namespace BootstrapBlazor.Server.Components.Components;
 
 /// <summary>
@@ -15,10 +13,6 @@ public partial class ThemeMode
     [Inject, NotNull]
     private IIconTheme? IconTheme { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IThemeProvider? ThemeProvider { get; set; }
-
     private string? GetLightIconClassString => CssBuilder.Default("icon-light")
         .AddClass(_lightModeIcon)
         .Build();
@@ -41,17 +35,4 @@ protected override void OnInitialized()
         _darkModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderDarkModeIcon);
         _lightModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderLightModeIcon);
     }
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(OnThemeChanged));
-
-    /// <summary>
-    /// The callback when theme changed
-    /// </summary>
-    /// <param name="themeName"></param>
-    /// <returns></returns>
-    [JSInvokable]
-    public ValueTask OnThemeChanged(string themeName) => ThemeProvider.SetThemeAsync(themeName);
 }
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js b/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js
@@ -1,7 +1,7 @@
 ﻿import { getTheme, switchTheme, calcCenterPosition } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
-export function init(id, invoke, method) {
+export function init(id) {
     const el = document.getElementById(id);
     if (el) {
         EventHandler.on(el, 'click', e => {
@@ -15,7 +15,6 @@ export function init(id, invoke, method) {
 
             const rect = calcCenterPosition(el);
             switchTheme(theme, rect.x, rect.y);
-            invoke.invokeMethodAsync(method, theme);
         });
     }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs
@@ -22,10 +22,6 @@ public abstract class BaseDockView : ComponentBase
     [NotNull]
     private MockDataTableDynamicService? DataTableDynamicService { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IThemeProvider? ThemeProviderService { get; set; }
-
     /// <summary>
     /// 获得/设置 数据集合
     /// </summary>
@@ -43,11 +39,6 @@ public abstract class BaseDockView : ComponentBase
     /// </summary>
     protected DataTableDynamicContext? DataTableDynamicContext { get; set; }
 
-    /// <summary>
-    /// Gets or sets the theme
-    /// </summary>
-    protected DockViewTheme Theme { get; set; } = DockViewTheme.Light;
-
     /// <summary>
     /// 获得 <see cref="DynamicObjectContext"/> 实例方法
     /// </summary>
@@ -74,22 +65,6 @@ protected override void OnInitialized()
         TreeItems.AddRange(TreeFoo.GenerateFoos(LocalizerFoo, 3, 101, 1010));
 
         DataTableDynamicContext = DataTableDynamicService.CreateContext();
-
-        ThemeProviderService.ThemeChangedAsync += OnThemeChanged;
-    }
-
-    private Task OnThemeChanged(string themeName)
-    {
-        if (themeName == "dark")
-        {
-            Theme = DockViewTheme.Dark;
-        }
-        else
-        {
-            Theme = DockViewTheme.Light;
-        }
-        StateHasChanged();
-        return Task.CompletedTask;
     }
 
     /// <summary>
@@ -116,23 +91,23 @@ private int GenerateId()
     protected static Task<IEnumerable<TableTreeNode<TreeFoo>>> TreeNodeConverter(IEnumerable<TreeFoo> items)
     {
         // 构造树状数据结构
-        var ret = BuildTreeNodes(items, 0);
-        return Task.FromResult(ret);
+        var ret = BuildTreeNodes(items.ToList(), 0);
+        return Task.FromResult(ret.AsEnumerable());
+    }
 
-        IEnumerable<TableTreeNode<TreeFoo>> BuildTreeNodes(IEnumerable<TreeFoo> items, int parentId)
+    private static List<TableTreeNode<TreeFoo>> BuildTreeNodes(List<TreeFoo> items, int parentId)
+    {
+        var ret = new List<TableTreeNode<TreeFoo>>();
+        ret.AddRange(items.Where(i => i.ParentId == parentId).Select((foo, index) => new TableTreeNode<TreeFoo>(foo)
         {
-            var ret = new List<TableTreeNode<TreeFoo>>();
-            ret.AddRange(items.Where(i => i.ParentId == parentId).Select((foo, index) => new TableTreeNode<TreeFoo>(foo)
-            {
-                // 此处为示例，假设偶行数据都有子数据
-                HasChildren = index % 2 == 0,
-                // 如果子项集合有值 则默认展开此节点
-                IsExpand = items.Any(i => i.ParentId == foo.Id),
-                // 获得子项集合
-                Items = BuildTreeNodes(items.Where(i => i.ParentId == foo.Id), foo.Id)
-            }));
-            return ret;
-        }
+            // 此处为示例，假设偶行数据都有子数据
+            HasChildren = index % 2 == 0,
+            // 如果子项集合有值 则默认展开此节点
+            IsExpand = items.Any(i => i.ParentId == foo.Id),
+            // 获得子项集合
+            Items = BuildTreeNodes(items.Where(i => i.ParentId == foo.Id).ToList(), foo.Id)
+        }));
+        return ret;
     }
 
     /// <summary>
@@ -162,7 +137,7 @@ public class TreeFoo : Foo
         /// GenerateFoos
         /// </summary>
         /// <returns></returns>
-        public static List<TreeFoo> GenerateFoos(IStringLocalizer<Foo> localizer, int count = 80, int parentId = 0, int id = 0) => Enumerable.Range(1, count).Select(i => new TreeFoo()
+        public static List<TreeFoo> GenerateFoos(IStringLocalizer<Foo> localizer, int count = 80, int parentId = 0, int id = 0) => [.. Enumerable.Range(1, count).Select(i => new TreeFoo()
         {
             Id = id + i,
             ParentId = parentId,
@@ -172,6 +147,6 @@ public class TreeFoo : Foo
             Count = Random.Shared.Next(1, 100),
             Complete = Random.Shared.Next(1, 100) > 50,
             Education = Random.Shared.Next(1, 100) > 50 ? EnumEducation.Primary : EnumEducation.Middle
-        }).ToList();
+        })];
     }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewCol.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewCol.razor
@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewColIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutColumn" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutColumn" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一" Height="33">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewComplex.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewComplex.razor
@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewComplexIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutComplex" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutComplex" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewContent Type="DockViewContentType.Column">
             <DockViewComponent Key="tab1" Title="标签一">
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewGroup.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewGroup.razor
@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewGroupIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutGroup" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutGroup" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewContent Type="DockViewContentType.Group">
             <DockViewComponent Key="tab1" Title="标签一">
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLayout.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLayout.razor
@@ -12,7 +12,7 @@
     <Button OnClickWithoutRender="Reset" Text="复位"></Button>
 </GroupBox>
 
-<DockViewV2 @ref="DockView" Name="DockViewLayout" Theme="@Theme" LayoutConfig="@LayoutConfig" class="dock-layout-demo">
+<DockViewV2 @ref="@_dockView" Name="DockViewLayout" LayoutConfig="@_layoutConfig" class="dock-layout-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLayout.razor.cs
@@ -15,26 +15,26 @@ public partial class DockViewLayout
     private IStringLocalizer<DockViewLayout>? Localizer { get; set; }
 
     [NotNull]
-    private DockViewV2? DockView { get; set; }
+    private DockViewV2? _dockView = null;
 
-    private Task Reset() => DockView.Reset(LayoutConfig);
+    private Task Reset() => _dockView.Reset(_layoutConfig);
 
     private void OnToggleLayout1()
     {
-        LayoutConfig = LayoutConfig1;
+        _layoutConfig = LayoutConfig1;
     }
 
     private void OnToggleLayout2()
     {
-        LayoutConfig = LayoutConfig2;
+        _layoutConfig = LayoutConfig2;
     }
 
     private void OnToggleLayout3()
     {
-        LayoutConfig = LayoutConfig3;
+        _layoutConfig = LayoutConfig3;
     }
 
-    private string LayoutConfig = LayoutConfig1;
+    private string _layoutConfig = LayoutConfig1;
 
     const string LayoutConfig1 = """{"grid":{"root":{"type":"branch","data":[{"type":"branch","data":[{"type":"leaf","data":{"views":["bb_5893789"],"activeView":"bb_5893789","id":"0"},"size":364},{"type":"leaf","data":{"views":["bb_11251481"],"activeView":"bb_11251481","id":"1"},"size":364},{"type":"leaf","data":{"views":["bb_39754773"],"activeView":"bb_39754773","id":"2"},"size":364}],"size":601}],"size":1092},"width":1092,"height":601,"orientation":"VERTICAL"},"panels":{"bb_5893789":{"id":"bb_5893789","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签一","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_5893789","additionalAttributes":null},"title":"标签一"},"bb_11251481":{"id":"bb_11251481","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签二","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_11251481","additionalAttributes":null},"title":"标签二"},"bb_39754773":{"id":"bb_39754773","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签三","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_39754773","additionalAttributes":null},"title":"标签三"}},"activeGroup":"1"}""";
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLock.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLock.razor
@@ -7,7 +7,7 @@
 
 <Button OnClick="OnToggleLock" Text="@LockText"></Button>
 
-<DockViewV2 Name="DockViewLock" Theme="@Theme" OnLockChangedCallbackAsync="OnLockChangedCallbackAsync" IsLock="IsLock" class="dock-lock-demo">
+<DockViewV2 Name="DockViewLock" OnLockChangedCallbackAsync="OnLockChangedCallbackAsync" IsLock="IsLock" class="dock-lock-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewComponent Key="tab1" Title="标签一" Width="18">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor
@@ -5,9 +5,9 @@
 
 <h4>@((MarkupString)Localizer["DockViewNestIntro"].Value)</h4>
 
-<Select @bind-Value="@Theme"></Select>
+<Select @bind-Value="@_theme"></Select>
 
-<DockViewV2 Name="DockViewNest" Theme="Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewNest" Theme="_theme" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewComponent Key="tab1" Title="标签一">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
@@ -40,7 +40,7 @@
             </Table>
         </DockViewComponent>
         <DockViewComponent Key="tab3" Title="嵌套布局" ShowHeader="false">
-            <DockViewV2 Name="DockViewInnerNest" Theme="Theme">
+            <DockViewV2 Name="DockViewInnerNest" Theme="_theme">
                 <DockViewContent Type="DockViewContentType.Column">
                     <DockViewComponent Key="tab31" Title="内嵌标签一">
                         <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor.cs
@@ -13,4 +13,6 @@ public partial class DockViewNest
     [Inject]
     [NotNull]
     private IStringLocalizer<DockViewNest>? Localizer { get; set; }
+
+    private DockViewTheme _theme;
 }
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewRow.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewRow.razor
@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewRowIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutRow" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutRow" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Row">
         <DockViewComponent Key="tab1" Title="标签一" ShowClose="false" Width="14">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewTitle.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewTitle.razor
@@ -5,7 +5,7 @@
 
 <h4>@((MarkupString)Localizer["DockViewTitleIntro"].Value)</h4>
 
-<DockViewV2 Name="DockViewV2LayoutColumn" Theme="@Theme" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutColumn" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一" ShowTitleBar="true" OnClickTitleBarCallback="OnClickTitleBarCallback" Height="33">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewVisible.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewVisible.razor
@@ -7,7 +7,7 @@
 
 <Button OnClick="OnToggleVisible" Text="切换标签一"></Button>
 
-<DockViewV2 Name="DockViewVisible" Theme="@Theme" OnVisibleStateChangedAsync="OnVisibleStateChangedAsync" class="dockview-demo">
+<DockViewV2 Name="DockViewVisible" OnVisibleStateChangedAsync="OnVisibleStateChangedAsync" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一" Visible="Visible">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"
diff --git a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.cs b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.cs
@@ -143,6 +143,7 @@ public async Task OnThemeChanged(ThemeValue name)
         {
             await OnThemeChangedAsync(name);
         }
-        await ThemeProviderService.SetThemeAsync(name.ToDescriptionString());
+
+        ThemeProviderService.TriggerThemeChanged(name.ToDescriptionString());
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import { getTheme, switchTheme, calcCenterPosition } from "../../_content/BootstrapBlazor/modules/utility.js"`
`2`	`2`	`import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"`
`3`	`3`
`4`		`-export function init(id, invoke, method) {`
	`4`	`+export function init(id) {`
`5`	`5`	`const el = document.getElementById(id);`
`6`	`6`	`if (el) {`
`7`	`7`	`EventHandler.on(el, 'click', e => {`
`@@ -15,7 +15,6 @@ export function init(id, invoke, method) {`
`15`	`15`
`16`	`16`	`const rect = calcCenterPosition(el);`
`17`	`17`	`switchTheme(theme, rect.x, rect.y);`
`18`		`- invoke.invokeMethodAsync(method, theme);`
`19`	`18`	`});`
`20`	`19`	`}`
`21`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,26 +15,26 @@ public partial class DockViewLayout`
`15`	`15`	`private IStringLocalizer<DockViewLayout>? Localizer { get; set; }`
`16`	`16`
`17`	`17`	`[NotNull]`
`18`		`- private DockViewV2? DockView { get; set; }`
	`18`	`+ private DockViewV2? _dockView = null;`
`19`	`19`
`20`		`- private Task Reset() => DockView.Reset(LayoutConfig);`
	`20`	`+ private Task Reset() => _dockView.Reset(_layoutConfig);`
`21`	`21`
`22`	`22`	`private void OnToggleLayout1()`
`23`	`23`	`{`
`24`		`- LayoutConfig = LayoutConfig1;`
	`24`	`+ _layoutConfig = LayoutConfig1;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`private void OnToggleLayout2()`
`28`	`28`	`{`
`29`		`- LayoutConfig = LayoutConfig2;`
	`29`	`+ _layoutConfig = LayoutConfig2;`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`private void OnToggleLayout3()`
`33`	`33`	`{`
`34`		`- LayoutConfig = LayoutConfig3;`
	`34`	`+ _layoutConfig = LayoutConfig3;`
`35`	`35`	`}`
`36`	`36`
`37`		`- private string LayoutConfig = LayoutConfig1;`
	`37`	`+ private string _layoutConfig = LayoutConfig1;`
`38`	`38`
`39`	`39`	const string LayoutConfig1 = """{"grid":{"root":{"type":"branch","data":[{"type":"branch","data":[{"type":"leaf","data":{"views":["bb_5893789"],"activeView":"bb_5893789","id":"0"},"size":364},{"type":"leaf","data":{"views":["bb_11251481"],"activeView":"bb_11251481","id":"1"},"size":364},{"type":"leaf","data":{"views":["bb_39754773"],"activeView":"bb_39754773","id":"2"},"size":364}],"size":601}],"size":1092},"width":1092,"height":601,"orientation":"VERTICAL"},"panels":{"bb_5893789":{"id":"bb_5893789","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签一","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_5893789","additionalAttributes":null},"title":"标签一"},"bb_11251481":{"id":"bb_11251481","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签二","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_11251481","additionalAttributes":null},"title":"标签二"},"bb_39754773":{"id":"bb_39754773","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签三","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_39754773","additionalAttributes":null},"title":"标签三"}},"activeGroup":"1"}""";
`40`	`40`