feat(Message): support async update content use same option (#6040)

* doc: 更新示例

* feat: 支持保持相同消息

* doc: 更新本地化

* refactor: 优化性能

* refactor: 完善逻辑

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Messages.razor

@@ -24,6 +24,10 @@ private MessageService? MessageService { get; set; }
     <Message @ref="Message" Placement="Placement.Bottom" />
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["MessagesAsyncTitle"]" Introduction="@Localizer["MessagesAsyncIntro"]" Name="Async">
+    <Button IsAsync="true" OnClick="@ShowAsyncMessage" Text="@Localizer["MessagesAsyncText"]"></Button>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["MessagesIconTitle"]" Introduction="@Localizer["MessagesIconIntro"]" Name="Icon">
     <button class="btn btn-primary" @onclick="@ShowIconMessage">@Localizer["MessagesMessagePrompt"]</button>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Messages.razor.cs

@@ -16,6 +16,8 @@ public sealed partial class Messages
     [NotNull]
     private Message? Message1 { get; set; }
 
+    private readonly MessageOption _option = new();
+
     private async Task ShowMessage()
     {
         Message.SetPlacement(Placement.Top);
@@ -25,6 +27,28 @@ await MessageService.Show(new MessageOption()
         });
     }
 
+    private async Task ShowAsyncMessage()
+    {
+        _option.ForceDelay = true;
+        _option.IsAutoHide = false;
+        _option.Delay = 3000;
+        _option.Content = Localizer["MessagesAsyncDemoStep1Text"];
+        _option.Color = Color.Info;
+        await MessageService.Show(_option);
+
+        await Task.Delay(3000);
+        _option.Content = Localizer["MessagesAsyncDemoStep2Text"];
+        _option.IsAutoHide = true;
+        _option.Color = Color.Info;
+        await MessageService.Show(_option);
+
+        await Task.Delay(2000);
+        _option.Content = Localizer["MessagesAsyncDemoStep3Text"];
+        _option.Color = Color.Success;
+
+        await MessageService.Show(_option);
+    }
+
     private async Task ShowIconMessage()
     {
         await MessageService.Show(new MessageOption()

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -125,7 +125,7 @@
     "ToastsPreventIntro": "By setting <code>PreventDuplicates=\"true\"</code> to repeatedly click the button below, only one pop-up window will appear",
     "ToastsPreventText": "Prevent Duplicates",
     "ToastsAsyncTitle": "Async notification",
-    "ToastsAsyncIntro": "By setting <code>IsAsync</code>, the pop-up window is displayed, the thread is blocked, and after clicking the close button, the subsequent code continues to execute",
+    "ToastsAsyncIntro": "By setting the button's <code>IsAsync</code> parameter, use the same <code>ToastOption</code> to update the pop-up window information for different steps",
     "ToastsAsyncDemoTitle": "Async notification",
     "ToastsAsyncDemoStep1Text": "Packing documents, please wait...",
     "ToastsAsyncDemoStep2Text": "Packaging completed, downloading...",
@@ -465,6 +465,12 @@
     "MessagesNormalTitle": "Basic usage",
     "MessagesNormalIntro": "Appears from the top and automatically disappears after 4 seconds",
     "MessagesMessagePrompt": "Open the message prompt",
+    "MessagesAsyncTitle": "Async notification",
+    "MessagesAsyncIntro": "By setting the button's <code>IsAsync</code> parameter, use the same <code>MessageOption</code> to update the pop-up window information for different steps",
+    "MessagesAsyncDemoStep1Text": "Packing documents, please wait...",
+    "MessagesAsyncDemoStep2Text": "Packaging completed, downloading...",
+    "MessagesAsyncDemoStep3Text": "Download completed, close the window automatically",
+    "MessagesAsyncText": "AsyncNotify",
     "MessagesIconTitle": "message box with icon",
     "MessagesIconIntro": "Change the small icon on the left side of the message box by setting the <code>Icon</code> property of <code>MessageOption</code>",
     "MessagesCloseButtonTitle": "message box with close button",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -125,7 +125,7 @@
     "ToastsPreventIntro": "通过设置 <code>PreventDuplicates=\"true\"</code> 重复点击下方按钮时，仅弹窗一次",
     "ToastsPreventText": "阻止重复",
     "ToastsAsyncTitle": "线程阻塞通知",
-    "ToastsAsyncIntro": "通过设置 <code>IsAsync</code> 弹窗显示后，线程阻塞，点击关闭按钮后，继续执行后续代码",
+    "ToastsAsyncIntro": "通过设置按钮 <code>IsAsync</code> 参数，使用同一个 <code>ToastOption</code> 更新弹窗信息提示不同步骤时的信息",
     "ToastsAsyncDemoTitle": "异步通知",
     "ToastsAsyncDemoStep1Text": "正在打包文档，请稍等...",
     "ToastsAsyncDemoStep2Text": "打包完成，正在下载...",
@@ -465,6 +465,12 @@
     "MessagesNormalTitle": "基础用法",
     "MessagesNormalIntro": "从顶部出现，4 秒后自动消失",
     "MessagesMessagePrompt": "打开消息提示",
+    "MessagesAsyncTitle": "线程阻塞通知",
+    "MessagesAsyncIntro": "通过设置按钮 <code>IsAsync</code> 参数，使用同一个 <code>MessageOption</code> 更新弹窗信息提示不同步骤时的信息",
+    "MessagesAsyncDemoStep1Text": "正在打包文档，请稍等...",
+    "MessagesAsyncDemoStep2Text": "打包完成，正在下载...",
+    "MessagesAsyncDemoStep3Text": "下载完成，自动关窗",
+    "MessagesAsyncText": "线程阻塞通知示例",
     "MessagesIconTitle": "带图标的消息框",
     "MessagesIconIntro": "通过设置 <code>MessageOption</code> 的 <code>Icon</code> 属性，更改消息框左侧小图标",
     "MessagesCloseButtonTitle": "带关闭按钮的消息框",

src/BootstrapBlazor/Components/Message/Message.razor.cs

@@ -102,8 +102,11 @@ private async Task Show(MessageOption option)
             _messages.Clear();
         }
 
-        _messages.Add(option);
-        _msgId = GetItemId(option);
+        if (!_messages.Contains(option))
+        {
+            _messages.Add(option);
+            _msgId = GetItemId(option);
+        }
         await InvokeAsync(StateHasChanged);
     }