feat: 增加加载功能

Author: ArgoZhang

src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor

@@ -2,4 +2,9 @@
 @inherits BootstrapModuleComponentBase
 @attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.js", JSObjectReference = true)]
 
-<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id"></div>
+<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id" style="position: relative; overflow: hidden;">
+    <div class="bb-univer-sheet-wrap" style="height: 100%;"></div>
+    <div class="bb-univer-sheet-backdrop" style="background-color: #000; opacity: 0.3; position: absolute; inset: 0; z-index: 1205; display: flex; align-items: center; justify-content: center;">
+        <div style="color: #fff;">@LoadingText</div>
+    </div>
+</div>

src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.cs

@@ -3,6 +3,7 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 using System.Globalization;
 
 namespace BootstrapBlazor.Components;
@@ -48,12 +49,21 @@ public partial class UniverSheet
     [Parameter]
     public UniverSheetData? Data { get; set; }
 
+    /// <summary>
+    /// 获得/设置 正在加载显示文本 默认 null 未设置读取资源文件
+    /// </summary>
+    [Parameter]
+    public string? LoadingText { get; set; }
+
     /// <summary>
     /// 获得/设置 Frame 加载页面传递过来的数据
     /// </summary>
     [Parameter]
     public Func<UniverSheetData?, Task<UniverSheetData?>>? OnPostDataAsync { get; set; }
 
+    [Inject, NotNull]
+    private IStringLocalizer<UniverSheet>? Localizer { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-univer-sheet")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -78,6 +88,7 @@ protected override void OnParametersSet()
         base.OnParametersSet();
 
         Lang ??= CultureInfo.CurrentUICulture.Name;
+        LoadingText ??= Localizer[nameof(LoadingText)];
     }
 
     /// <summary>

src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.js

@@ -11,7 +11,7 @@ export async function init(id, invoke, options) {
 
     const { theme, lang, plugins, data, ribbonType, darkMode } = options;
     const univerSheet = {
-        el,
+        el: el.querySelector('.bb-univer-sheet-wrap'),
         invoke,
         data,
         plugins,

src/components/BootstrapBlazor.UniverSheet/wwwroot/univer/univer-sheet.bundle.css

@@ -3,7 +3,6 @@
 .bb-univer-sheet {
     width: 100%;
     height: 100%;
-    overflow: hidden;
 }
 
 .univer-theme {