refactor: 移动 Tab 右键菜单逻辑到内部

ArgoZhang · ArgoZhang · commit 00db538398c8 · 2025-03-28T12:00:24.000+08:00
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor b/src/BootstrapBlazor/Components/Layout/Layout.razor
@@ -116,31 +116,7 @@
     @<main class="layout-main">
         @if (UseTabSet)
         {
-            @if (ShowTabContextMenu)
-            {
-                <ContextMenuZone>
-                    @RenderTab
-                    <ContextMenu>
-                        @if (BeforeTabContextMenuTemplate != null)
-                        {
-                            @BeforeTabContextMenuTemplate(_tab)
-                        }
-                        <ContextMenuItem Icon="@TabContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
-                        <ContextMenuDivider></ContextMenuDivider>
-                        <ContextMenuItem Icon="@TabContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
-                        <ContextMenuItem Icon="@TabContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
-                        <ContextMenuItem Icon="@TabContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
-                        @if (TabContextMenuTemplate != null)
-                        {
-                            @TabContextMenuTemplate(_tab)
-                        }
-                    </ContextMenu>
-                </ContextMenuZone>
-            }
-            else
-            {
-                @RenderTab
-            }
+            @RenderTab
         }
         else
         {
@@ -153,6 +129,9 @@
           ShowExtendButtons="ShowTabExtendButtons" ShowClose="ShowTabItemClose" AllowDrag="AllowDragTab"        
           DefaultUrl="@TabDefaultUrl" ExcludeUrls="@ExcludeUrls" IsOnlyRenderActiveTab="IsOnlyRenderActiveTab"
           TabStyle="TabStyle" ShowToolbar="@ShowToolbar" ToolbarTemplate="@ToolbarTemplate"
+          ShowContextMenu="ShowTabContextMenu"
+          ContextMenuRefreshIcon="@TabContextMenuRefreshIcon" ContextMenuCloseIcon="@TabContextMenuCloseIcon"
+          ContextMenuCloseOtherIcon="@TabContextMenuCloseOtherIcon" ContextMenuCloseAllIcon="@TabContextMenuCloseAllIcon"
           ShowRefreshToolbarButton="ShowRefreshToolbarButton" ShowFullscreenToolbarButton="ShowFullscreenToolbarButton"
           RefreshToolbarButtonIcon="@RefreshToolbarButtonIcon" FullscreenToolbarButtonIcon="@FullscreenToolbarButtonIcon"
           RefreshToolbarTooltipText="@RefreshToolbarTooltipText" FullscreenToolbarTooltipText="@FullscreenToolbarTooltipText"
diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs
@@ -509,10 +509,6 @@ protected override void OnParametersSet()
 
         TooltipText ??= Localizer[nameof(TooltipText)];
         MenuBarIcon ??= IconTheme.GetIconByKey(ComponentIcons.LayoutMenuBarIcon);
-        TabContextMenuRefreshIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuRefreshIcon);
-        TabContextMenuCloseIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseIcon);
-        TabContextMenuCloseOtherIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseOtherIcon);
-        TabContextMenuCloseAllIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseAllIcon);
     }
 
     /// <summary>
@@ -627,7 +623,7 @@ public virtual Task HandlerException(Exception ex, RenderFragment<Exception> err
 
     private string? GetTargetString() => IsFixedTabHeader ? ".tabs-body" : null;
 
-    private async Task OnRefrsh(ContextMenuItem item, object? context)
+    private async Task OnRefresh(ContextMenuItem item, object? context)
     {
         if (context is TabItem tabItem)
         {
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor
@@ -6,9 +6,35 @@
 {
     @Body
 }
+else if (ShowContextMenu)
+{
+    <ContextMenuZone @ref="_contextMenuZone">
+        @RenderTab
+        <ContextMenu>
+            @if (BeforeContextMenuTemplate != null)
+            {
+                @BeforeContextMenuTemplate(this)
+            }
+            <ContextMenuItem Icon="@ContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefresh"></ContextMenuItem>
+            <ContextMenuDivider></ContextMenuDivider>
+            <ContextMenuItem Icon="@ContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
+            <ContextMenuItem Icon="@ContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
+            <ContextMenuItem Icon="@ContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
+            @if (ContextMenuTemplate != null)
+            {
+                @ContextMenuTemplate(this)
+            }
+        </ContextMenu>
+    </ContextMenuZone>
+}
 else
 {
-    <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
+    @RenderTab
+}
+
+@code {
+    RenderFragment RenderTab =>
+    @<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
         <div class="tabs-header">
             <div class="@WrapClassString">
                 @if (BeforeNavigatorTemplate != null)
@@ -155,10 +181,8 @@ else
                 }
             </CascadingValue>
         </div>
-    </div>
-}
-
-@code {
+    </div>;
+    
     RenderFragment<TabItem> RenderTabItem => item =>
     @<CascadingValue Value="item" IsFixed="true">
         @RenderTabItemContent(item)
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
@@ -358,7 +358,49 @@ public partial class Tab : IHandlerException
     /// </summary>
     [Parameter]
     public string? CloseTabNavLinkTooltipText { get; set; }
+    
+    /// <summary>
+    /// Gets or sets whether enable tab context menu. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool ShowContextMenu { get; set; }
+    
+    /// <summary>
+    /// Gets or sets the template of before context menu. Default is null.
+    /// </summary>
+    [Parameter]
+    public RenderFragment<Tab>? BeforeContextMenuTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets the template of context menu. Default is null.
+    /// </summary>
+    [Parameter]
+    public RenderFragment<Tab>? ContextMenuTemplate { get; set; }
+    
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu refresh button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? ContextMenuRefreshIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu close button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? ContextMenuCloseIcon { get; set; }
 
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu close other button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? ContextMenuCloseOtherIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon of tab item context menu close all button. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? ContextMenuCloseAllIcon { get; set; }
+    
     [CascadingParameter]
     private Layout? Layout { get; set; }
 
@@ -384,10 +426,9 @@ public partial class Tab : IHandlerException
 
     [Inject, NotNull]
     private DialogService? DialogService { get; set; }
-
-    [CascadingParameter]
-    private ContextMenuZone? ContextMenuZone { get; set; }
-
+    
+    private ContextMenuZone? _contextMenuZone;
+    
     private ConcurrentDictionary<TabItem, bool> LazyTabCache { get; } = new();
 
     private bool HandlerNavigation { get; set; }
@@ -400,7 +441,7 @@ public partial class Tab : IHandlerException
 
     private readonly ConcurrentDictionary<TabItem, TabItemContent> _cache = [];
 
-    private bool IsPreventDefault => ContextMenuZone != null;
+    private bool IsPreventDefault => _contextMenuZone != null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -439,6 +480,11 @@ protected override void OnParametersSet()
         CloseIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabCloseIcon);
         RefreshToolbarButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabRefreshButtonIcon);
 
+        ContextMenuRefreshIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuRefreshIcon);
+        ContextMenuCloseIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseIcon);
+        ContextMenuCloseOtherIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseOtherIcon);
+        ContextMenuCloseAllIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseAllIcon);
+        
         if (AdditionalAssemblies is null)
         {
             var entryAssembly = Assembly.GetEntryAssembly();
@@ -989,6 +1035,38 @@ public async Task Refresh(TabItem item)
             await OnToolbarRefreshCallback();
         }
     }
+    
+    private async Task OnRefresh(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            await Refresh(tabItem);
+        }
+    }
+
+    private async Task OnClose(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            await RemoveTab(tabItem);
+        }
+    }
+
+    private Task OnCloseOther(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            ActiveTab(tabItem);
+        }
+        CloseOtherTabs();
+        return Task.CompletedTask;
+    }
+
+    private Task OnCloseAll(ContextMenuItem item, object? context)
+    {
+        CloseAllTabs();
+        return Task.CompletedTask;
+    }
 
     /// <summary>
     /// <inheritdoc/>
@@ -1006,9 +1084,9 @@ protected override async ValueTask DisposeAsync(bool disposing)
 
     private async Task OnContextMenu(MouseEventArgs e, TabItem item)
     {
-        if (ContextMenuZone != null)
+        if (_contextMenuZone != null)
         {
-            await ContextMenuZone.OnContextMenu(e, item);
+            await _contextMenuZone.OnContextMenu(e, item);
         }
     }
 }
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
@@ -700,6 +700,7 @@
                 display: flex;
                 align-items: center;
                 border-radius: var(--bs-border-radius);
+                user-select: none;
 
                 &:not(.disabled):not(:disabled):hover {
                     background-color: var(--bb-tabs-item-hover-bg-color);
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
@@ -105,11 +105,7 @@
     "TooltipText": "Go top"
   },
   "BootstrapBlazor.Components.Layout": {
-    "TooltipText": "Click to Expand/Collapse sidebar",
-    "ContextRefresh": "Refresh",
-    "ContextClose": "Close",
-    "ContextCloseOther": "Close Other Tabs",
-    "ContextCloseAll": "Close All Tabs"
+    "TooltipText": "Click to Expand/Collapse sidebar"
   },
   "BootstrapBlazor.Components.Logout": {
     "PrefixDisplayNameText": "Welcome",
@@ -119,7 +115,7 @@
     "Text": "Logout"
   },
   "BootstrapBlazor.Components.Menu": {
-    "InvalidOperationExceptionMessage": "Sidemenu component cannot be used independently. Please use Menu component to set IsVertical = true"
+    "InvalidOperationExceptionMessage": "SideMenu component cannot be used independently. Please use Menu component to set IsVertical = true"
   },
   "BootstrapBlazor.Components.ModalDialog": {
     "CloseButtonText": "Close",
@@ -182,7 +178,11 @@
     "FullscreenToolbarTooltipText": "Fullscreen",
     "PrevTabNavLinkTooltipText": "Prev Tab",
     "NextTabNavLinkTooltipText": "Next Tab",
-    "CloseTabNavLinkTooltipText": "Close"
+    "CloseTabNavLinkTooltipText": "Close",
+    "ContextRefresh": "Refresh",
+    "ContextClose": "Close",
+    "ContextCloseOther": "Close Other Tabs",
+    "ContextCloseAll": "Close All Tabs"
   },
   "BootstrapBlazor.Components.MultiFilter": {
     "MultiFilterSearchPlaceHolderText": "Please enter ...",
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
@@ -105,11 +105,7 @@
     "TooltipText": "返回顶端"
   },
   "BootstrapBlazor.Components.Layout": {
-    "TooltipText": "点击展开收缩左侧菜单",
-    "ContextRefresh": "刷新",
-    "ContextClose": "关闭",
-    "ContextCloseOther": "关闭其他",
-    "ContextCloseAll": "关闭全部"
+    "TooltipText": "点击展开收缩左侧菜单"
   },
   "BootstrapBlazor.Components.Logout": {
     "PrefixDisplayNameText": "欢迎",
@@ -182,7 +178,11 @@
     "FullscreenToolbarTooltipText": "全屏",
     "PrevTabNavLinkTooltipText": "上一个标签",
     "NextTabNavLinkTooltipText": "下一个标签",
-    "CloseTabNavLinkTooltipText": "关闭"
+    "CloseTabNavLinkTooltipText": "关闭",
+    "ContextRefresh": "刷新",
+    "ContextClose": "关闭",
+    "ContextCloseOther": "关闭其他",
+    "ContextCloseAll": "关闭全部"
   },
   "BootstrapBlazor.Components.MultiFilter": {
     "MultiFilterSearchPlaceHolderText": "请输入 ...",

Original file line number	Diff line number	Diff line change
`@@ -509,10 +509,6 @@ protected override void OnParametersSet()`
`509`	`509`
`510`	`510`	`TooltipText ??= Localizer[nameof(TooltipText)];`
`511`	`511`	`MenuBarIcon ??= IconTheme.GetIconByKey(ComponentIcons.LayoutMenuBarIcon);`
`512`		`- TabContextMenuRefreshIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuRefreshIcon);`
`513`		`- TabContextMenuCloseIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseIcon);`
`514`		`- TabContextMenuCloseOtherIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseOtherIcon);`
`515`		`- TabContextMenuCloseAllIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseAllIcon);`
`516`	`512`	`}`
`517`	`513`
`518`	`514`	`/// <summary>`
`@@ -627,7 +623,7 @@ public virtual Task HandlerException(Exception ex, RenderFragment<Exception> err`
`627`	`623`
`628`	`624`	`private string? GetTargetString() => IsFixedTabHeader ? ".tabs-body" : null;`
`629`	`625`
`630`		`- private async Task OnRefrsh(ContextMenuItem item, object? context)`
	`626`	`+ private async Task OnRefresh(ContextMenuItem item, object? context)`
`631`	`627`	`{`
`632`	`628`	`if (context is TabItem tabItem)`
`633`	`629`	`{`