feat(DockView): add OnlyWhenVisible render mode (#974)

* refactor: 移除 Partial 渲染模式

* feat: 增加 DockViewComponentState 类记录各个组件状态

* refactor: 实现组件状态同步逻辑

* refactor: 修改panelVisibleChangedCallback参数改为使用key

* refactor: 更新缓存值逻辑

* feat: 增加 Render 参数

* refactor: 恢复默认值

* refactor：增加enableLocalStorage判断

* feat: 增加状态切换逻辑

* doc: 更新注释

* refactor: 精简代码

* fix: 修复拖动panel到组时显示空白

* refactor: 调整代码结构顺序

* feat: 增加可见性缓存功能

* refactor: 使用扩展方法精简代码

* fix: 切换数据时不需要更新panel的visible状态

* feat: 增加组件实例用于同步组件实例状态

* chore: 调整渲染结构方便调试

* feat: 增加状态切换同步组件状态逻辑

* refactor: 精简代码

* fix：修复关闭按钮配置不生效

* chore: 更改文件编码

* chore: bump version 10.0.7

* refactor: 精简代码

* refactor: 组件方法直接调用 DockView 方法

* refactor: 代码内聚

* fix：删除panel时隐藏空的group及enableLocalStorage不起作用

* refactor: 增加忽略标签防止报错

* revert: 撤销更改

* fix: 修复隐藏组时出现多余的线条

* fix: 修改切换数据dockview更新不对

* fix: 修复切换数据dockview出现空白

* chore: bump version 10.0.8-beta01

* chore: bump version 10.0.8-beta02

* feat(DockViewConfig): add FirstRender parameter

* refactor: 更改 FirstRender 参数值逻辑

* feat: 增加首次渲染不移动 Panel 逻辑

* Revert "refactor: 更改 FirstRender 参数值逻辑"

This reverts commit 161471a.

* Revert "feat(DockViewConfig): add FirstRender parameter"

This reverts commit c095c99.

* refactor: 更新 firstLoad 变量

* chore: bump version 10.0.8-beta03

* refactor(DockView): add closePanel rewrite function

* chore: bump version 10.0.8-beta04

* fix: 通过样式修复隐藏group时出现多余的线条

* fix: 增加isUpdate状态判断点击按钮时不发送panel显示状态

* refactor: 更新是否触发面板可见回调事件逻辑

* style: 更新样式

* refactor: 支持服务器端无 Key 逻辑

* fix: 添加js消除多余的线条

* refactor：修改是要否保留panel的DOM结构的判断

* chore: 更新样式

* chore: bump version 10.0.8-beta05

---------

Co-authored-by: zhaijunlei <276318515@qq.com>

Author: ArgoZhang

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

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.7</Version>
+    <Version>10.0.8-beta05</Version>
   </PropertyGroup>
 
   <PropertyGroup>

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

@@ -11,7 +11,7 @@
     {
         <DockViewTitleBar BarIcon="@TitleBarIcon" BarIconUrl="@TitleBarIconUrl" OnClickBarCallback="OnClickBar"></DockViewTitleBar>
     }
-    @if (Visible)
+    @if (IsRender())
     {
         @ChildContent
     }

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

@@ -1,4 +1,4 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
@@ -8,131 +8,152 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// DockContentItem 配置项子项对标 content 配置项内部 content 配置
+/// <para lang="zh">DockView 组件配置项，对应 content 配置项中的组件项</para>
+/// <para lang="en">DockView component option corresponding to a component item in the content configuration</para>
 /// </summary>
 public partial class DockViewComponent
 {
     /// <summary>
-    /// 获得/设置 组件是否显示 Header 默认 true 显示
+    /// <para lang="zh">获得/设置 组件是否显示标题栏，默认为 true</para>
+    /// <para lang="en">Gets or sets whether the component header is displayed. Default is true</para>
     /// </summary>
     [Parameter]
     public bool ShowHeader { get; set; } = true;
 
     /// <summary>
-    /// 获得/设置 组件 Title
+    /// <para lang="zh">获得/设置 组件标题</para>
+    /// <para lang="en">Gets or sets the component title</para>
     /// </summary>
     [Parameter]
     public string? Title { get; set; }
 
     /// <summary>
-    /// 获得/设置 组件 Title 宽度 默认 null 未设置
+    /// <para lang="zh">获得/设置 组件标题宽度，默认为 null</para>
+    /// <para lang="en">Gets or sets the component title width. Default is null</para>
     /// </summary>
     [Parameter]
     public int? TitleWidth { get; set; }
 
     /// <summary>
-    /// 获得/设置 组件 Title 样式 默认 null 未设置
+    /// <para lang="zh">获得/设置 组件标题样式类，默认为 null</para>
+    /// <para lang="en">Gets or sets the component title CSS class. Default is null</para>
     /// </summary>
     [Parameter]
     public string? TitleClass { get; set; }
 
     /// <summary>
-    /// 获得/设置 Title 模板 默认 null 未设置
+    /// <para lang="zh">获得/设置 标题模板，默认为 null</para>
+    /// <para lang="en">Gets or sets the title template. Default is null</para>
     /// </summary>
     [Parameter]
-    [JsonIgnore]
     public RenderFragment? TitleTemplate { get; set; }
 
     /// <summary>
-    /// 获得/设置 组件 Class 默认 null 未设置
+    /// <para lang="zh">获得/设置 组件样式类，默认为 null</para>
+    /// <para lang="en">Gets or sets the component CSS class. Default is null</para>
     /// </summary>
     [Parameter]
     public string? Class { get; set; }
 
     /// <summary>
-    /// 获得/设置 组件是否可见 默认 true 可见
+    /// <para lang="zh">获得/设置 组件是否可见，默认为 true</para>
+    /// <para lang="en">Gets or sets whether the component is visible. Default is true</para>
     /// </summary>
     [Parameter]
     public bool Visible { get; set; } = true;
 
     /// <summary>
-    /// 获得/设置 组件是否允许关闭 默认 null 使用 DockView 的配置
+    /// <para lang="zh">获得/设置 组件是否允许关闭，默认为 null，未设置时使用 DockView 的配置</para>
+    /// <para lang="en">Gets or sets whether the component can be closed. Default is null. When not set, the DockView configuration is used</para>
     /// </summary>
     [Parameter]
     public bool? ShowClose { get; set; }
 
     /// <summary>
-    /// 获得/设置 组件唯一标识值 默认 null 未设置时取 Title 作为唯一标识
+    /// <para lang="zh">获得/设置 组件唯一标识，默认为 null，未设置时使用 Title 作为唯一标识</para>
+    /// <para lang="en">Gets or sets the unique component identifier. Default is null. When not set, Title is used as the unique identifier</para>
     /// </summary>
     [Parameter]
     public string? Key { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否锁定 默认 null 未设置时取 DockView 的配置
+    /// <para lang="zh">获得/设置 组件是否锁定，默认为 null，未设置时使用 DockView 的配置</para>
+    /// <para lang="en">Gets or sets whether the component is locked. Default is null. When not set, the DockView configuration is used</para>
     /// </summary>
-    /// <remarks>锁定后无法拖动</remarks>
     [Parameter]
     public bool? IsLock { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示锁定按钮 默认 null 未设置时取 DockView 的配置
+    /// <para lang="zh">获得/设置 是否显示锁定按钮，默认为 null，未设置时使用 DockView 的配置</para>
+    /// <para lang="en">Gets or sets whether the lock button is displayed. Default is null. When not set, the DockView configuration is used</para>
     /// </summary>
     [Parameter]
     public bool? ShowLock { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否悬浮 默认 null 未设置时取 DockView 的配置
+    /// <para lang="zh">获得/设置 是否悬浮，默认为 null，未设置时使用 DockView 的配置</para>
+    /// <para lang="en">Gets or sets whether the component is floating. Default is null. When not set, the DockView configuration is used</para>
     /// </summary>
     [Parameter]
     public bool? IsFloating { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示可悬浮按钮 默认 null 未设置时取 DockView 的配置
+    /// <para lang="zh">获得/设置 是否显示悬浮按钮，默认为 null，未设置时使用 DockView 的配置</para>
+    /// <para lang="en">Gets or sets whether the float button is displayed. Default is null. When not set, the DockView configuration is used</para>
     /// </summary>
     [Parameter]
     public bool? ShowFloat { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示最大化按钮 默认 null 未设置时取 DockView 的配置
+    /// <para lang="zh">获得/设置 是否显示最大化按钮，默认为 null，未设置时使用 DockView 的配置</para>
+    /// <para lang="en">Gets or sets whether the maximize button is displayed. Default is null. When not set, the DockView configuration is used</para>
     /// </summary>
     [Parameter]
     public bool? ShowMaximize { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否一直显示 默认 null 未设置时取 DockView 的配置
+    /// <para lang="zh">获得/设置 组件渲染模式，默认为 null，未设置时使用 DockView 的配置</para>
+    /// <para lang="en">Gets or sets the component render mode. Default is null. When not set, the DockView configuration is used</para>
     /// </summary>
     [Parameter]
-    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? Renderer { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示标题前置图标 默认 false 不显示
+    /// <para lang="zh">获得/设置 是否显示标题前置图标，默认为 false</para>
+    /// <para lang="en">Gets or sets whether the leading title icon is displayed. Default is false</para>
     /// </summary>
     [Parameter]
     [JsonIgnore]
     public bool ShowTitleBar { get; set; }
 
     /// <summary>
-    /// 获得/设置 标题前置图标 默认 null 未设置使用默认图标
+    /// <para lang="zh">获得/设置 标题前置图标，默认为 null，未设置时使用默认图标</para>
+    /// <para lang="en">Gets or sets the leading title icon. Default is null. When not set, the default icon is used</para>
     /// </summary>
     [Parameter]
     [JsonIgnore]
     public string? TitleBarIcon { get; set; }
 
     /// <summary>
-    /// 获得/设置 标题前置图标 Url 默认 null 未设置使用默认图标
+    /// <para lang="zh">获得/设置 标题前置图标地址，默认为 null，未设置时使用默认图标</para>
+    /// <para lang="en">Gets or sets the leading title icon URL. Default is null. When not set, the default icon is used</para>
     /// </summary>
     [Parameter]
     [JsonIgnore]
     public string? TitleBarIconUrl { get; set; }
 
     /// <summary>
-    /// 获得/设置 标题前置图标点击回调方法 默认 null
+    /// <para lang="zh">获得/设置 标题前置图标点击回调方法，默认为 null</para>
+    /// <para lang="en">Gets or sets the click callback for the leading title icon. Default is null</para>
     /// </summary>
     [Parameter]
     [JsonIgnore]
     public Func<Task>? OnClickTitleBarCallback { get; set; }
 
+    [CascadingParameter]
+    [NotNull]
+    private DockViewV2? DockView { get; set; }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -141,6 +162,20 @@ protected override void OnInitialized()
         base.OnInitialized();
 
         Type = DockViewContentType.Component;
+
+        // 增加组件状态用于序列化
+        DockView?.AddComponentState(new DockViewComponentState(this) { Key = Key });
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        // 同步组件状态到缓存
+        DockView.UpdateComponentState(Key, Visible, IsLock);
     }
 
     private async Task OnClickBar()
@@ -151,12 +186,20 @@ private async Task OnClickBar()
         }
     }
 
+    private bool IsRender() => DockView.IsRender(Key);
+
+    internal void SetVisible(bool visible) => Visible = visible;
+
+    internal void SetLock(bool isLock) => IsLock = isLock;
+
     /// <summary>
-    /// 设置 Visible 参数方法
+    /// <inheritdoc/>
     /// </summary>
-    /// <param name="visible"></param>
-    public void SetVisible(bool visible)
+    /// <param name="disposing"></param>
+    protected override void Dispose(bool disposing)
     {
-        Visible = visible;
+        base.Dispose(disposing);
+
+        DockView.RemoveComponentState(Key);
     }
 }

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

@@ -8,44 +8,40 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// <para lang="zh">DockComponent 基类</para>
-/// <para lang="en">Base class for DockComponent</para>
+/// <para lang="zh">DockView 组件基类</para>
+/// <para lang="en">Base class for DockView components</para>
 /// </summary>
 public abstract class DockViewComponentBase : IdComponentBase, IDisposable
 {
     /// <summary>
-    /// <para lang="zh">获得/设置 渲染类型 默认 Component</para>
-    /// <para lang="en">Gets or sets the render type. Default is Component.</para>
+    /// <para lang="zh">获得/设置 组件渲染类型，默认为 Component</para>
+    /// <para lang="en">Gets or sets the component render type. Default is Component</para>
     /// </summary>
     [Parameter]
     public DockViewContentType Type { get; set; }
 
     /// <summary>
-    /// <para lang="zh">获得/设置 组件宽度百分比 默认 null 未设置</para>
-    /// <para lang="en">Gets or sets the component width percentage. Default is null (not set).</para>
+    /// <para lang="zh">获得/设置 组件宽度百分比，默认为 null</para>
+    /// <para lang="en">Gets or sets the component width percentage. Default is null</para>
     /// </summary>
     [Parameter]
     public int? Width { get; set; }
 
     /// <summary>
-    /// <para lang="zh">获得/设置 组件高度百分比 默认 null 未设置</para>
-    /// <para lang="en">Gets or sets the component height percentage. Default is null (not set).</para>
+    /// <para lang="zh">获得/设置 组件高度百分比，默认为 null</para>
+    /// <para lang="en">Gets or sets the component height percentage. Default is null</para>
     /// </summary>
     [Parameter]
     public int? Height { get; set; }
 
     /// <summary>
-    /// <para lang="zh">获得/设置 子组件</para>
-    /// <para lang="en">Gets or sets the child content.</para>
+    /// <para lang="zh">获得/设置 子组件内容</para>
+    /// <para lang="en">Gets or sets the child content</para>
     /// </summary>
     [Parameter]
     [JsonIgnore]
     public RenderFragment? ChildContent { get; set; }
 
-    /// <summary>
-    /// <para lang="zh">获得/设置 DockContent 实例</para>
-    /// <para lang="en">Gets or sets the DockContent instance.</para>
-    /// </summary>
     [CascadingParameter]
     private List<DockViewComponentBase>? Parent { get; set; }
 
@@ -60,8 +56,8 @@ protected override void OnInitialized()
     }
 
     /// <summary>
-    /// <para lang="zh">资源销毁方法</para>
-    /// <para lang="en">Resource disposal method</para>
+    /// <para lang="zh">资源释放方法</para>
+    /// <para lang="en">Releases resources</para>
     /// </summary>
     /// <param name="disposing"></param>
     protected virtual void Dispose(bool disposing)
@@ -73,8 +69,8 @@ protected virtual void Dispose(bool disposing)
     }
 
     /// <summary>
-    /// <para lang="zh">资源销毁方法</para>
-    /// <para lang="en">Resource disposal method</para>
+    /// <para lang="zh">资源释放方法</para>
+    /// <para lang="en">Releases resources</para>
     /// </summary>
     public void Dispose()
     {