Ant Design Blazor 中实现多语言标签页标题的最佳实践

在 Ant Design Blazor 项目中，开发者经常需要为 ReuseTabs 组件实现多语言支持，特别是针对不同页面的标签页标题。本文将深入探讨如何优雅地实现这一功能。

核心问题分析

当使用 ReuseTabs 组件时，每个页面的标题可以通过两种方式定义：

1. 直接在页面类上使用 [ReuseTabsPageAttribute(Title = "固定标题")] 特性
2. 实现 IReuseTabsPage 接口的 GetPageTitle 方法

第一种方式的局限性在于无法动态支持多语言，而第二种方式则提供了更大的灵活性。

解决方案实现

基础实现方案

最简单的实现方式是让每个页面直接实现 IReuseTabsPage 接口：

public class MyPage : ComponentBase, IReuseTabsPage
{
    [Inject] private IStringLocalizer L { get; set; }
    
    public RenderFragment GetPageTitle()
    {
        return @<span>@L["my-page-title"]</span>;
    }
}

这种方式简单直接，每个页面自行管理自己的标题多语言资源。

高级抽象方案

对于有大量页面的项目，我们可以创建一个基类来统一处理多语言标题：

public abstract class LocalizablePageBase : ComponentBase, IReuseTabsPage
{
    [Inject] protected IStringLocalizerFactory LocalizerFactory { get; set; }
    
    protected abstract string PageTitleKey { get; }
    
    public virtual RenderFragment GetPageTitle()
    {
        var localizer = LocalizerFactory.Create(GetType());
        return @<span>@localizer[PageTitleKey]</span>;
    }
}

使用时，派生类只需指定多语言键：

public class MyPage : LocalizablePageBase
{
    protected override string PageTitleKey => "my-page-title";
}

设计考量

1. 性能优化：可以考虑缓存 Localizer 实例以避免重复创建
2. 灵活性：基类可以进一步扩展，支持动态标题或带参数的标题
3. 一致性：统一的多语言管理方式有助于维护项目一致性

最佳实践建议

1. 对于小型项目，直接在各页面实现 GetPageTitle 方法即可
2. 对于中大型项目，推荐使用抽象基类方案，提高代码复用率
3. 考虑将多语言键定义为常量，便于统一管理和重构

通过以上方案，开发者可以轻松实现 Ant Design Blazor 项目中标签页标题的多语言支持，同时保持代码的整洁和可维护性。