feat(UniverSheet): add LoadingText parameter (#901)

* feat: UniverSheet add onRendered Lifecycle

* chore: 增加资源文件

* feat: 增加遮罩

* feat: 增加加载功能

* chore: bump version 10.0.7

---------

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

Author: ArgoZhang

src/components/BootstrapBlazor.UniverSheet/BootstrapBlazor.UniverSheet.csproj

@@ -1,14 +1,19 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.6</Version>
+    <Version>10.0.7</Version>
   </PropertyGroup>
 
   <PropertyGroup>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Univer Sheet Excel</PackageTags>
     <Description>Bootstrap UI components extensions of Univer Sheet</Description>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Content Remove="Locales\*.json" />
+    <EmbeddedResource Include="Locales\*.json" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
   </ItemGroup>

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,14 +11,22 @@ 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,
         theme,
         lang,
         ribbonType,
-        darkMode
+        darkMode,
+        events: {
+            onRendered: () => {
+                const backdrop = el.querySelector('.bb-univer-sheet-backdrop');
+                if (backdrop) {
+                    backdrop.classList.add('d-none');
+                }
+            }
+        }
     };
 
     await createUniverSheetAsync(univerSheet);

src/components/BootstrapBlazor.UniverSheet/Locales/en.json

@@ -0,0 +1,5 @@
+{
+  "BootstrapBlazor.Components.UniverSheet": {
+    "LoadingText": "Loading ..."
+  }
+}

src/components/BootstrapBlazor.UniverSheet/Locales/zh.json

@@ -0,0 +1,5 @@
+{
+  "BootstrapBlazor.Components.UniverSheet": {
+    "LoadingText": "正在加载 ..."
+  }
+}

src/components/BootstrapBlazor.UniverSheet/wwwroot/univer.js

@@ -1,4 +1,4 @@
-import { addScript, addLink, getTheme } from '../BootstrapBlazor/modules/utility.js'
+import { addScript, addLink, getTheme } from '../BootstrapBlazor/modules/utility.js'
 import DataService from './data-service.js'
 
 const loadAssets2 = async lang => {
@@ -30,6 +30,7 @@ const loadAssets = async lang => {
     await addScript('./_content/BootstrapBlazor.UniverSheet/univer/univer-bundle.js');
     await addLink('./_content/BootstrapBlazor.UniverSheet/univer/univer-sheet.bundle.css');
 }
+
 export async function createUniverSheetAsync(sheet) {
     sheet.lang = sheet.lang ?? 'en-US';
     await loadAssets(sheet.lang);
@@ -46,7 +47,7 @@ export async function createUniverSheetAsync(sheet) {
     const lang = sheet.lang.replace('-', '')
     const langStr = lang.charAt(0).toUpperCase() + lang.slice(1)
     const options = {
-        theme: sheet.theme, 
+        theme: sheet.theme,
         darkMode: sheet.darkMode,
         locale: lang,
         locales: {
@@ -66,12 +67,12 @@ export async function createUniverSheetAsync(sheet) {
                 ribbonType: sheet.ribbonType ?? 'simple', // default | classic | simple
                 menu: {
                     'sheet.menu.print': {
-                      hidden: true,
+                        hidden: true,
                     },
                     'sheets-exchange-client.operation.exchange': {
-                      hidden: true,
+                        hidden: true,
                     },
-                  },
+                },
             }),
             UniverSheetsDrawingPreset(),
             UniverSheetsThreadCommentPreset(),
@@ -113,6 +114,17 @@ export async function createUniverSheetAsync(sheet) {
         univerAPI.createWorkbook();
     }
 
+    const { onRendered } = sheet.events;
+    if (onRendered) {
+        const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, e => {
+            const { stage } = e;
+            if (stage === univerAPI.Enum.LifecycleStages.Rendered) {
+                onRendered();
+                disposable.dispose()
+            }
+        });
+    }
+
     sheet.univer = univer;
     sheet.univerAPI = univerAPI;
     sheet.dispose = () => {

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 {