doc(MindMap): add how to use section (#5018)

* doc: 代码格式化

* doc: 更新文档

* refactor: 更新依赖 9.1.3

Co-Authored-By: Alex chow <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -48,7 +48,7 @@
     <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="9.1.0" />
     <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.6" />
     <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
-    <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.1" />
+    <PackageReference Include="BootstrapBlazor.MindMap" Version="9.1.3" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.PdfReader" Version="9.0.0" />

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

@@ -41,19 +41,19 @@ private async Task OnClick()
 <DemoBlock Title="@Localizer["KeyboardTitle"]" Introduction="@Localizer["KeyboardIntro"]" Name="Keyboard">
     <section ignore>@((MarkupString)Localizer["KeyboardTip"].Value)</section>
     <Button OnClick="@KeyboardOnClick">@Localizer["KeyboardOpenDialogButton"]</Button>
-    <Button OnClick="@OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
+    <Button OnClick="@OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3"></Button>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ResizeTitle"]" Introduction="@Localizer["ResizeIntro"]" Name="Resize">
     <Button OnClick="@OnResizeDialogClick" Text="Resize"></Button>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["CustomerHeaderTitle"]" Introduction="@Localizer["CustomerHeaderIntro"]" Name="CustomerHeader">
-    <Button OnClick="@OnCustomerHeaderClick" Text="@Localizer["CustomerHeaderOpenDialogButton"]" />
+    <Button OnClick="@OnCustomerHeaderClick" Text="@Localizer["CustomerHeaderOpenDialogButton"]"></Button>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["HeaderToolbarTemplateTitle"]" Introduction="@Localizer["HeaderToolbarTemplateIntro"]" Name="HeaderToolbarTemplate">
-    <Button OnClick="@OnCustomerHeaderToolbarClick" Text="@Localizer["HeaderToolbarTemplateButtonText"]" />
+    <Button OnClick="@OnCustomerHeaderToolbarClick" Text="@Localizer["HeaderToolbarTemplateButtonText"]"></Button>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ComponentTitle"]" Introduction="@Localizer["ComponentIntro"]" Name="Component">
@@ -183,7 +183,7 @@ private async Task OnClick()
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ErrorLoggerTitle"]" Introduction="@Localizer["ErrorLoggerIntro"]" Name="ErrorLogger">
-    <Button OnClick="@OnErrorDialog" Text="@Localizer["ErrorLoggerButton"]" Icon="fa-solid fa-bug" />
+    <Button OnClick="@OnErrorDialog" Text="@Localizer["ErrorLoggerButton"]" Icon="fa-solid fa-bug"></Button>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["EmailTitle"]" Introduction="@Localizer["EmailIntro"]" Name="Email">
@@ -202,7 +202,7 @@ private async Task OnClick()
     </section>
     <div class="input-group">
         <BootstrapInput PlaceHolder="@Localizer["EmailInput"]" Value="@EmailInputValue" />
-        <Button Icon="fa-regular fa-address-card" OnClick="@OnEmailButtonClick" />
+        <Button Icon="fa-regular fa-address-card" OnClick="@OnEmailButtonClick"></Button>
     </div>
 </DemoBlock>
 

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

@@ -6,11 +6,15 @@
 </HeadContent>
 
 <h3>@Localizer["MindMapTitle"]</h3>
-
 <h4>@Localizer["MindMapDescription"]</h4>
 
 <PackageTips Name="BootstrapBlazor.MindMap" />
 
+<p><code>MindMap</code> 是对 <code>Javascript</code> <a href="https://github.com/wanglin2/mind-map?wt.mc_id=DT-MVP-5004174">MindMap</a> 仓库的封装，使其更加符合 <code>Blazor</code> 使用习惯</p>
+<p class="code-label">1. 画图</p>
+<p>通过 <a href="https://wanglin2.github.io/mind-map/#/">在线工具地址</a> 绘制或者导入进行修改后导出 <code>Json</code> 格式数据</p>
+<div class="code-label">2. 对组件 <code>Data</code> 参数赋值即可呈现</div>
+
 <DemoBlock Title="@Localizer["MindMapNormalTitle"]" Introduction="@Localizer["MindMapDescription"]" Name="MindMapNormal">
     <section ignore>
         <div class="row g-3 form-inline">
@@ -22,12 +26,12 @@
             </div>
         </div>
     </section>
-    <MindMap Layout="_layout" Theme="_theme" Data="@_data" @ref="MindMap"></MindMap>
+    <MindMap Layout="_layout" Theme="_theme" Data="@SampleData1" @ref="MindMap"></MindMap>
     <section ignore>
         <div class="row g-3 mt-3">
             <div class="col-12">
-                <Button Text="@Localizer["Sample1ButtonText"]" OnClick="Sample1"></Button>
-                <Button Text="@Localizer["Sample2ButtonText"]" OnClick="Sample2"></Button>
+                <Button Text="@Localizer["Sample1ButtonText"]" OnClick="SetSample1"></Button>
+                <Button Text="@Localizer["Sample2ButtonText"]" OnClick="SetSample2"></Button>
                 <Button Text="@Localizer["ExportButtonText"]" OnClick="ExportImage"></Button>
                 <Button Text="@Localizer["ExportJsonButtonText"]" OnClick="ExportJson"></Button>
                 <Button Text="@Localizer["GetFullDataButtonText"]" OnClick="GetFullData"></Button>

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

@@ -23,27 +23,16 @@ public partial class MindMaps
     [NotNull]
     private MindMap? MindMap { get; set; }
 
-    /// <summary>
-    /// 初始化数据
-    /// </summary>
-    public string _data = SampleData1;
-
     async Task ExportImage()
     {
         await MindMap.Export();
-        await ShowBottomMessage("下载Png");
+        await ShowBottomMessage("下载 Png");
     }
 
     async Task ExportJson()
     {
         await MindMap.Export("json", withConfig: false);
-        await ShowBottomMessage("下载Json");
-    }
-
-    async Task ExportPng()
-    {
-        await MindMap.Export(download: false, withConfig: false);
-        await ShowBottomMessage("已导出Png");
+        await ShowBottomMessage("下载 Json");
     }
 
     private Task ShowBottomMessage(string message) => MessageService.Show(new MessageOption()
@@ -59,7 +48,7 @@ async Task GetFullData()
 
     async Task GetData()
     {
-        _result = await MindMap.GetData(false);
+        _result = await MindMap.GetData();
     }
 
     async Task SetData()
@@ -83,13 +72,13 @@ async Task Scale(float step)
         await MindMap.Scale(_scale);
     }
 
-    async Task Sample1()
+    async Task SetSample1()
     {
         _result = SampleData1;
         await SetData();
     }
 
-    async Task Sample2()
+    async Task SetSample2()
     {
         _result = SampleData2;
         await SetData();

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

@@ -6306,7 +6306,7 @@
   },
   "BootstrapBlazor.Server.Components.Samples.MindMaps": {
     "MindMapTitle": "Mind Map",
-    "MindMapDescription": "The shortcut key tab adds a new node, the mouse can drag node arrangement",
+    "MindMapDescription": "Used to display specific Json format data as a Web mind map",
     "MindMapNormalTitle": "Basic usage",
     "MindMapLayout": "Layout",
     "MindMapTheme": "Theme",

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

@@ -6306,12 +6306,12 @@
   },
   "BootstrapBlazor.Server.Components.Samples.MindMaps": {
     "MindMapTitle": "Mind Map 思维导图",
-    "MindMapDescription": "快捷键Tab添加新节点,鼠标可拖动节点排列",
+    "MindMapDescription": "用于将特定 Json 格式数据展示成 Web 思维导图",
     "MindMapNormalTitle": "基本用法",
     "MindMapLayout": "布局",
     "MindMapTheme": "主题",
-    "Sample1ButtonText": "例子1",
-    "Sample2ButtonText": "一周安排",
+    "Sample1ButtonText": "普通示例",
+    "Sample2ButtonText": "周安排示例",
     "ExportButtonText": "导出 PNG",
     "ExportJsonButtonText": "导出 Json",
     "GetFullDataButtonText": "GetFullData",