refactor: 重构 Tab 组件增加 TabHeader 参数代替 Layout

Author: ArgoZhang

src/BootstrapBlazor/Components/Layout/Layout.razor

@@ -81,7 +81,7 @@
         }
         @if (ShowTabInHeader)
         {
-            <div class="tabs tabs-chrome">
+            <div class="tabs tabs-chrome" id="@GetId()">
                 @RenderTabHeader()
             </div>
         }
@@ -143,7 +143,7 @@
           ShowRefreshToolbarButton="ShowRefreshToolbarButton" ShowFullscreenToolbarButton="ShowFullscreenToolbarButton"
           RefreshToolbarButtonIcon="@RefreshToolbarButtonIcon" FullscreenToolbarButtonIcon="@FullscreenToolbarButtonIcon"
           RefreshToolbarTooltipText="@RefreshToolbarTooltipText" FullscreenToolbarTooltipText="@FullscreenToolbarTooltipText"
-          OnToolbarRefreshCallback="OnToolbarRefreshCallback" Layout="this"
+          OnToolbarRefreshCallback="OnToolbarRefreshCallback" TabHeader="TabHeader"
           Body="@Main" NotAuthorized="NotAuthorized!" NotFound="NotFound!" NotFoundTabText="@NotFoundTabText">
     </Tab>;
 

src/BootstrapBlazor/Components/Layout/Layout.razor.cs

@@ -13,7 +13,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// Layout 组件
 /// </summary>
-public partial class Layout : IHandlerException
+public partial class Layout : IHandlerException, ITabHeader
 {
     private bool IsSmallScreen { get; set; }
 
@@ -458,7 +458,9 @@ public partial class Layout : IHandlerException
 
     private bool _init;
     private Tab? _tab = null;
-    private ITabHeader? _tabHeader = null;
+    private LayoutHeader? _layoutHeader = null;
+
+    private ITabHeader? TabHeader => ShowTabInHeader ? this : null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -637,15 +639,26 @@ public virtual Task HandlerException(Exception ex, RenderFragment<Exception> err
     private RenderFragment RenderTabHeader() => builder =>
     {
         builder.OpenComponent<LayoutHeader>(0);
-        builder.AddComponentReferenceCapture(1, instance => _tabHeader = (ITabHeader)instance);
+        builder.AddComponentReferenceCapture(1, instance => _layoutHeader = (LayoutHeader)instance);
         builder.CloseComponent();
     };
 
-    internal void RegisterTab(Tab tab)
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="renderFragment"></param>
+    /// <exception cref="NotImplementedException"></exception>
+    public void Render(RenderFragment renderFragment)
     {
-        tab.TabHeader = _tabHeader;
+        _layoutHeader?.Render(renderFragment);
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    public string GetId() => $"{Id}_tab_header";
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor/Components/Layout/LayoutHeader.cs

@@ -5,7 +5,7 @@
 
 namespace BootstrapBlazor.Components;
 
-internal class LayoutHeader : IComponent, ITabHeader
+internal class LayoutHeader : IComponent
 {
     private RenderHandle _renderHandle;
 

src/BootstrapBlazor/Components/Tab/ITabHeader.cs

@@ -15,4 +15,10 @@ public interface ITabHeader
     /// </summary>
     /// <param name="renderFragment"></param>
     void Render(RenderFragment renderFragment);
+
+    /// <summary>
+    /// Get the id of the tab header
+    /// </summary>
+    /// <returns></returns>
+    string GetId();
 }

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -8,7 +8,7 @@
 }
 else
 {
-    <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
+    <div @attributes="@AdditionalAttributes" id="@Id" data-bb-header-id="@HeaderId" class="@ClassString" style="@StyleString">
         @if (TabHeader != null)
         {
             TabHeader.Render(RenderTabHeader);

src/BootstrapBlazor/Components/Tab/Tab.razor.cs

@@ -423,10 +423,10 @@ public partial class Tab : IHandlerException
     /// Gets or sets the <see cref="ITabHeader"/> instance. Default is null.
     /// </summary>
     [Parameter]
-    public Layout? Layout { get; set; }
+    public ITabHeader? TabHeader { get; set; }
 
     [CascadingParameter]
-    private Layout? CascadeLayout { get; set; }
+    private Layout? Layout { get; set; }
 
     [Inject]
     [NotNull]
@@ -471,8 +471,6 @@ public partial class Tab : IHandlerException
 
     private bool IsPreventDefault => _contextMenuZone != null;
 
-    internal ITabHeader? TabHeader { get; set; }
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -494,15 +492,6 @@ protected override void OnParametersSet()
             IsBorderCard = true;
         }
 
-        if (Layout is { ShowTabInHeader: true })
-        {
-            Layout.RegisterTab(this);
-        }
-        else
-        {
-            TabHeader = null;
-        }
-
         CloseOtherTabsText ??= Localizer[nameof(CloseOtherTabsText)];
         CloseAllTabsText ??= Localizer[nameof(CloseAllTabsText)];
         CloseCurrentTabText ??= Localizer[nameof(CloseCurrentTabText)];
@@ -584,9 +573,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(DragItemCallback), LayoutId);
-
-    private string? LayoutId => Layout is { ShowTabInHeader: true } ? Layout.Id : null;
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(DragItemCallback));
 
     private void RemoveLocationChanged()
     {
@@ -798,8 +785,6 @@ public void AddTab(string url, string text, string? icon = null, bool active = t
         StateHasChanged();
     }
 
-    private Layout? LayoutInstance => Layout ?? CascadeLayout;
-
     private void AddTabItem(string url)
     {
         var parameters = new Dictionary<string, object?>
@@ -837,7 +822,7 @@ private void AddTabItem(string url)
                 builder.AddAttribute(1, nameof(BootstrapBlazorAuthorizeView.Type), context.Handler);
                 builder.AddAttribute(2, nameof(BootstrapBlazorAuthorizeView.Parameters), context.Parameters);
                 builder.AddAttribute(3, nameof(BootstrapBlazorAuthorizeView.NotAuthorized), NotAuthorized);
-                builder.AddAttribute(4, nameof(BootstrapBlazorAuthorizeView.Resource), LayoutInstance?.Resource);
+                builder.AddAttribute(4, nameof(BootstrapBlazorAuthorizeView.Resource), Layout?.Resource);
                 builder.CloseComponent();
             }));
         }
@@ -1019,7 +1004,7 @@ private RenderFragment RenderTabItemContent(TabItem item) => builder =>
     private IEnumerable<MenuItem>? _menuItems;
     private MenuItem? GetMenuItem(string url)
     {
-        _menuItems ??= (Menus ?? LayoutInstance?.Menus).GetAllItems();
+        _menuItems ??= (Menus ?? Layout?.Menus).GetAllItems();
         return _menuItems?.FirstOrDefault(i => !string.IsNullOrEmpty(i.Url) && (i.Url.TrimStart('/').Equals(url.TrimStart('/'), StringComparison.OrdinalIgnoreCase)));
     }
 
@@ -1188,30 +1173,36 @@ private RenderFragment RenderContextMenuZoneContent() => builder =>
 
     private RenderFragment RenderTabItems() => builder =>
     {
-        for (var index = 0; index < _items.Count; index++)
+        foreach (var item in Items)
         {
-            var item = _items[index];
-            var sequence = (index + 1) * 100;
             if (item.HeaderTemplate != null)
             {
-                builder.OpenElement(sequence, "div");
+                builder.OpenElement(0, "div");
                 builder.SetKey(item);
-                builder.AddAttribute(sequence + 10, "class", GetItemWrapClassString(item));
-                builder.AddAttribute(sequence + 20, "draggable", DraggableString);
-                builder.AddContent(sequence + 30, item.HeaderTemplate(item));
+                builder.AddAttribute(10, "class", GetItemWrapClassString(item));
+                builder.AddAttribute(20, "draggable", DraggableString);
+                builder.AddContent(30, item.HeaderTemplate(item));
                 builder.CloseElement();
             }
             else if (item.IsDisabled)
             {
-                builder.AddContent(sequence + 40, RenderDisabledHeaderItem(item));
+                builder.AddContent(40, RenderDisabledHeaderItem(item));
             }
             else
             {
-                builder.AddContent(sequence + 50, RenderHeaderItem(item));
+                builder.AddContent(50, RenderHeaderItem(item));
             }
         }
     };
 
+    /// <summary>
+    /// Sets the <see cref="ITabHeader"/> instance.
+    /// </summary>
+    /// <param name="tabHeader"></param>
+    public void SetTabHeader(ITabHeader tabHeader) => TabHeader = tabHeader;
+
+    private string? HeaderId => TabHeader?.GetId();
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor/Components/Tab/Tab.razor.js

@@ -171,7 +171,7 @@ const disposeDragItems = items => {
     })
 }
 
-export function init(id, invoke, method, layoutId) {
+export function init(id, invoke, method) {
     const el = document.getElementById(id)
     if (el === null) {
         return
@@ -180,9 +180,10 @@ export function init(id, invoke, method, layoutId) {
     const tab = { el, invoke, method }
     Data.set(id, tab)
 
-    if (layoutId) {
-        const layout = document.getElementById(layoutId)
-        tab.header = layout.querySelector('.layout-header .tabs > .tabs-header');
+    const headerId = el.getAttribute("data-bb-header-id");
+    if (headerId) {
+        const header = document.getElementById(headerId)
+        tab.header = header.querySelector('.tabs > .tabs-header');
     }
     else {
         tab.header = el.firstChild