【新增】使用 INotificationService 动态调用 TNotification 组件显示消息通知 (#155)

Author: teacher-zhou

doc/TDesign.Docs.Shared/Pages/Components/MessagePage.razor

@@ -61,7 +61,7 @@
 <Example Title="通过服务调用">
     <Description>注入 <code>IMessageService</code> 接口动态调用消息</Description>
     <RunContent>
-        <TButton OnClick="@(e=>MessageService.Show(new MessageConfiguration{ Content="这是全局提示"}))">自定义提示</TButton>
+        <TButton OnClick="@(e=>MessageService.Show(new (){ Content="这是全局提示"}))">自定义提示</TButton>
         <TButton Theme="Theme.Primary" OnClick="@(e=>MessageService.Info("普通的提示"))">普通</TButton>
         <TButton Theme="Theme.Success" OnClick="@(e=>MessageService.Success("成功的提示"))">成功</TButton>
         <TButton Theme="Theme.Warning" OnClick="@(e=>MessageService.Warning("警告的提示"))">警告</TButton>

doc/TDesign.Docs.Shared/Pages/Components/NotificationPage.razor

@@ -84,16 +84,13 @@
             </OperationContent>
         </TNotification>
         <br/>
-        <TNotification Theme="Theme.Warning">
-            <TitleContent>
-                消息通知 <small>这里是副标题</small>
-            </TitleContent>
+        <TNotification Theme="Theme.Warning" Title="消息通知" SubTitle="这里是副标题">
             <ChildContent>
                 1. 使用插槽自定义标题 2. 使用插槽自定义底部内容
             </ChildContent>
             <OperationContent>
-                <TButton Type="ButtonVarient.Text">取消</TButton>
-                <TButton Theme="Theme.Primary" Type="ButtonVarient.Text">稍后提醒我(10s)</TButton>
+                <TButton Varient="ButtonVarient.Text">取消</TButton>
+                <TButton Theme="Theme.Primary" Varient="ButtonVarient.Text">稍后提醒我(10s)</TButton>
             </OperationContent>
         </TNotification>
     </RunContent>
@@ -111,22 +108,41 @@
     </OperationContent>
 </TNotification>
 
-<TNotification Theme=""Theme.Warning"">
-    <TitleContent>
-        消息通知 <small>这里是副标题</small>
-    </TitleContent>
+<TNotification Theme=""Theme.Warning"" Title=""消息通知"" SubTitle=""这里是副标题"">
     <ChildContent>
         1. 使用插槽自定义标题 2. 使用插槽自定义底部内容
     </ChildContent>
     <OperationContent>
-        <TButton Type=""ButtonType.Text"">取消</TButton>
-        <TButton Theme=""Theme.Primary"" Type=""ButtonType.Text"">稍后提醒我(10s)</TButton>
+        <TButton Varient=""ButtonType.Text"">取消</TButton>
+        <TButton Theme=""Theme.Primary"" Varient=""ButtonType.Text"">稍后提醒我(10s)</TButton>
     </OperationContent>
 </TNotification>
 ```
 ")
     </CodeContent>
 </Example>
 
-        <h2>通过服务调用</h2>
-        代码建设中...
+
+<Example Title="通过服务调用">
+    <Description>注入 <code>INotificationService</code> 接口动态调用消息</Description>
+    <RunContent>
+        <TButton OnClick="@(e=>NotificationService.Show(new (){ Content="这是全局提示"}))">自定义提示</TButton>
+        <TButton Theme="Theme.Primary" OnClick="@(e=>NotificationService.Info("普通的提示","消息通知"))">普通</TButton>
+        <TButton Theme="Theme.Success" OnClick="@(e=>NotificationService.Success("成功的提示","消息通知"))">成功</TButton>
+        <TButton Theme="Theme.Warning" OnClick="@(e=>NotificationService.Warning("警告的提示","消息通知"))">警告</TButton>
+        <TButton Theme="Theme.Danger" OnClick="@(e=>NotificationService.Danger("失败的提示","消息通知"))">失败</TButton>
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```cs
+@inject INotificationService NotificationService
+
+NotificationService.Info(...)
+NotificationService.Success(...)
+NotificationService.Danger(...)
+NotificationService.Warning(...)
+```
+")
+    </CodeContent>
+</Example>
+@inject INotificationService NotificationService

src/TDesign/Abstractions/IContainerComonent.cs

@@ -0,0 +1,7 @@
+namespace TDesign.Abstractions;
+/// <summary>
+/// 表示实现该接口的组件会被自动作为容器加入。该接口用于动态服务调用时组件所需要的容器组件。
+/// </summary>
+public interface IContainerComonent : IComponent
+{
+}

src/TDesign/Components/Messages/IMessageService.cs

@@ -0,0 +1,22 @@
+namespace TDesign.Notification;
+/// <summary>
+/// 提供可以弹出通知提示的服务。
+/// </summary>
+/// <typeparam name="TConfiguration">配置的类型。</typeparam>
+public interface INotifyService<TConfiguration> where TConfiguration : NotifyConfigurationBase
+{
+    /// <summary>
+    /// 显示指定消息配置的全局提示。
+    /// </summary>
+    /// <param name="configuration">消息服务的配置。</param>
+    Task? Show(TConfiguration configuration);
+    /// <summary>
+    /// 当消息被关闭后时触发的事件。
+    /// </summary>
+    event Action? OnClosed;
+    /// <summary>
+    /// 当消息正在显示时触发的事件。
+    /// </summary>
+
+    event Func<TConfiguration, Task>? OnShowing;
+}

src/TDesign/Components/Messages/MessageService.cs

@@ -1,8 +1,8 @@
-namespace TDesign;
+namespace TDesign.Notification;
 /// <summary>
 /// 消息组件的基类。
 /// </summary>
-public abstract class MessageComponentBase : BlazorComponentBase, IHasChildContent
+public abstract class NotifyComponentBase : BlazorComponentBase, IHasChildContent
 {
     /// <summary>
     /// <inheritdoc/>

src/TDesign/Components/Messages/TMessageContainer.cs

@@ -1,38 +1,26 @@
-namespace TDesign;
-
-/// <summary>
-/// 表示全局消息的配置。
-/// </summary>
-/// <remarks>该对象用于 <see cref="IMessageService"/> 调用时传值给 <see cref="TMessage"/> 组件。</remarks>
-public class MessageConfiguration
+namespace TDesign.Notification;
+public abstract class NotifyConfigurationBase
 {
-    internal Guid Key => Guid.NewGuid();
     /// <summary>
-    /// 获取或设置消息提示的内容文本字符串。
+    /// Gets the key.
     /// </summary>
-    public string? Content { get; set; }
+    internal Guid Key => Guid.NewGuid();
     /// <summary>
-    /// 获取或设置消息提示的图标。
+    /// 获取或设置内容文本字符串。
     /// </summary>
-    public object? Icon { get; set; }
+    public string? Content { get; set; }
     /// <summary>
-    /// 获取或设置消息提示的主题风格。
+    /// 获取或设置主题风格。
     /// </summary>
     public Theme Theme { get; set; } = Theme.Primary;
-
     /// <summary>
-    /// 获取或设置消息提示具备加载中的状态。
+    /// 获取或设置消息持续多久自动关闭，单位是毫秒，默认 5 秒，即 5000 毫秒。
     /// </summary>
-    public bool Loading { get; set; }
-    /// <summary>
-    /// 获取或设置消息提示可以被用户关闭。
-    /// </summary>
-    public bool Closable { get; set; }
-
+    public int? Delay { get; set; } = 3000;
     /// <summary>
-    /// 获取或设置消息提示持续多久自动关闭，单位是毫秒，默认 5 秒，即 5000 毫秒。
+    /// 获取或设置消息提示的图标。
     /// </summary>
-    public int? Delay { get; set; } = 3000;
+    public object? Icon { get; set; }
 
     /// <summary>
     /// 获取或设置显示的位置。