doc: 更新 DockView 主题切换功能

ArgoZhang · ArgoZhang · commit 1a3b1f642454 · 2025-03-24T19:40:27.000+08:00
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.5" />
+    <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.7" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs
@@ -22,6 +22,10 @@ public abstract class BaseDockView : ComponentBase
     [NotNull]
     private MockDataTableDynamicService? DataTableDynamicService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IThemeProvider? ThemeProviderService { get; set; }
+
     /// <summary>
     /// 获得/设置 数据集合
     /// </summary>
@@ -39,6 +43,11 @@ 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>
@@ -51,6 +60,8 @@ public abstract class BaseDockView : ComponentBase
     /// </summary>
     protected override void OnInitialized()
     {
+        base.OnInitialized();
+
         Items = Foo.GenerateFoo(LocalizerFoo, 50);
 
         // 模拟数据从数据库中获得
@@ -63,6 +74,22 @@ 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>
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" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutColumn" Theme="@Theme" 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" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutComplex" Theme="@Theme" 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" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutGroup" Theme="@Theme" 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" LayoutConfig="@LayoutConfig" class="dock-layout-demo">
+<DockViewV2 @ref="DockView" Name="DockViewLayout" Theme="@Theme" 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/DockViewLock.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLock.razor
@@ -7,7 +7,7 @@
 
 <Button OnClick="OnToggleLock" Text="@LockText"></Button>
 
-<DockViewV2 Name="DockViewLock" OnLockChangedCallbackAsync="OnLockChangedCallbackAsync" IsLock="IsLock" class="dock-lock-demo">
+<DockViewV2 Name="DockViewLock" Theme="@Theme" 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,6 +13,4 @@ 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" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutRow" Theme="@Theme" 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" class="dockview-demo">
+<DockViewV2 Name="DockViewV2LayoutColumn" Theme="@Theme" 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" OnVisibleStateChangedAsync="OnVisibleStateChangedAsync" class="dockview-demo">
+<DockViewV2 Name="DockViewVisible" Theme="@Theme" OnVisibleStateChangedAsync="OnVisibleStateChangedAsync" class="dockview-demo">
     <DockViewContent Type="DockViewContentType.Column">
         <DockViewComponent Key="tab1" Title="标签一" Visible="Visible">
             <Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext"

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,4 @@ public partial class DockViewNest`
`13`	`13`	`[Inject]`
`14`	`14`	`[NotNull]`
`15`	`15`	`private IStringLocalizer<DockViewNest>? Localizer { get; set; }`
`16`		`-`
`17`		`- private DockViewTheme _theme;`
`18`	`16`	`}`