!2328 doc(#I4RCRW): update sample code for Dialog ShowEdit/Search/SaveDialog

* doc: 增加弹窗示例代码
* feat: 增加 DialogSaveDetail 组件
* refactor: 微调 Popover 脚本代码
* revert: 恢复配置
* doc: 格式化代码

src/BootstrapBlazor.Shared/Components/DialogSaveDetail.razor

@@ -0,0 +1,17 @@
+<div class="row form-inline g-3">
+    <div class="col-12 col-sm-6">
+        <BootstrapInput @bind-Value="Value.Name" ShowLabel="true" DisplayText="姓名" />
+    </div>
+    <div class="col-12 col-sm-6">
+        <BootstrapInput @bind-Value="Value.Count" ShowLabel="true" DisplayText="数量" />
+    </div>
+</div>
+
+@code {
+    /// <summary>
+    ///
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public Foo? Value { get; set; }
+}

src/BootstrapBlazor.Shared/Samples/Dialogs.razor

@@ -4,14 +4,6 @@
 
 <h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>
 
-<Tips class="mt-3">
-    <p>
-        本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用，需要在使用本组件的页面中内置 <code>Dialog</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：
-    </p>
-</Tips>
-
-<Pre>&lt;Dialog /&gt;</Pre>
-
 <DemoBlock Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" Name="Keyboard">
     <div>
         <p>通过设置 <code>DialogOption</code> <code>IsKeyboard</code> 参数，开启弹窗是否支持 <kbd>ESC</kbd>，请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p>
@@ -100,6 +92,35 @@
     <BlockLogger @ref="Trace" class="mt-3" />
 </DemoBlock>
 
+<DemoBlock Title="编辑对话框" Introduction="通过 <code>ShowEditDialog</code> 方法弹出保存对话框" Name="EditDialog">
+    <p>功能介绍</p>
+    <ul class="ul-demo">
+        <li>点击按钮弹出编辑弹窗</li>
+        <li>通过 <code>EditDialogOption</code> 参数对弹窗进行设置</li>
+        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成带客户端验证的表单窗口</li>
+    </ul>
+    <Button OnClick="@OnEditDialogClick">编辑弹窗</Button>
+</DemoBlock>
+
+<DemoBlock Title="搜索对话框" Introduction="通过 <code>ShowSearchDialog</code> 方法弹出保存对话框" Name="SearchDialog">
+    <p>功能介绍</p>
+    <ul class="ul-demo">
+        <li>点击按钮弹出搜索弹窗</li>
+        <li>通过 <code>SearchDialogOption</code> 参数对弹窗进行设置</li>
+        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成搜索窗口</li>
+    </ul>
+    <Button OnClick="@OnSearchDialogClick">搜索弹窗</Button>
+</DemoBlock>
+
+<DemoBlock Title="保存对话框" Introduction="通过 <code>ShowSaveDialog</code> 方法弹出保存对话框" Name="SaveDialog">
+    <p>功能介绍</p>
+    <ul class="ul-demo">
+        <li>点击按钮弹出保存弹窗</li>
+        <li>设计出发点通过给定 <code>TComponent</code> 自动生成保存窗口，通过设置 <code>saveCallback</code> 在保存回调方法中进行数据处理，<code>TComponent</code> 泛型组件所需要参数可以通过 <code>parameters</code> 进行传递</li>
+    </ul>
+    <Button OnClick="@OnSaveDialogClick">保存弹窗</Button>
+</DemoBlock>
+
 <DemoBlock Title="对话框大小" Introduction="通过设置 <code>Size</code> <code>FullScreenSize</code> 参数组合可以实现非常灵活的窗体大小控制" Name="ModalDialog">
     <Button OnClick="@OnSizeDialogClick">全屏弹窗(&lt; 1200px)</Button>
 </DemoBlock>

src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs

@@ -7,6 +7,7 @@ using BootstrapBlazor.Shared.Common;
 using BootstrapBlazor.Shared.Components;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.Localization;
 using System;
 using System.Collections.Generic;
 using System.Diagnostics.CodeAnalysis;
@@ -29,6 +30,10 @@ public sealed partial class Dialogs
     [NotNull]
     private DialogService? DialogService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? Localizer { get; set; }
+
     private bool IsKeyboard { get; set; }
 
     private void OnClickKeyboard()
@@ -224,6 +229,44 @@ public sealed partial class Dialogs
         });
     }
 
+    private async Task OnEditDialogClick()
+    {
+        var option = new EditDialogOption<Foo>()
+        {
+            Title = "编辑弹窗",
+            Model = new Foo(),
+            RowType = RowType.Inline,
+            ItemsPerRow = 2,
+            ItemChangedType = ItemChangedType.Update
+        };
+        await DialogService.ShowEditDialog(option);
+    }
+
+    private async Task OnSearchDialogClick()
+    {
+        var option = new SearchDialogOption<Foo>()
+        {
+            Title = "搜索弹窗",
+            Model = new Foo(),
+            RowType = RowType.Inline,
+            ItemsPerRow = 2,
+        };
+        await DialogService.ShowSearchDialog(option);
+    }
+
+    private async Task OnSaveDialogClick()
+    {
+        var foo = Foo.Generate(Localizer);
+        await DialogService.ShowSaveDialog<DialogSaveDetail>("保存", () =>
+        {
+            // 此处可以访问 foo 实例进行入库操作等
+            return Task.FromResult(true);
+        }, new Dictionary<string, object?>
+        {
+            ["Value"] = foo
+        });
+    }
+
     /// <summary>
     /// 获得属性方法
     /// </summary>