doc(Tutorials): update Tutorials sample code (#8023)

* doc: 合并多语言

* doc: 追悼模式增加多语言支持

* doc: 资源文件排序

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs

@@ -3,7 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
-using BootstrapBlazor.Server.Components.Pages;
 using Microsoft.AspNetCore.Components.Web;
 using System.Text;
 
@@ -20,11 +19,7 @@ public partial class TutorialsNavMenu
 
     [Inject]
     [NotNull]
-    private IStringLocalizer<Tutorials>? TutorialsLocalizer { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Tutorials>? Localizer { get; set; }
+    private IStringLocalizer<TutorialsNavMenu>? Localizer { get; set; }
 
     [Inject]
     [NotNull]
@@ -52,12 +47,12 @@ protected override async Task OnInitializedAsync()
             new()
             {
                 Template = CreateDownloadButtonComponent("dashboard", _dashboardFileList),
-                Text = TutorialsLocalizer["DashboardSummary"],
+                Text = Localizer["DashboardSummary"],
                 Url = "tutorials/dashboard"
             },
             new()
             {
-                Text = TutorialsLocalizer["LoginSummary"],
+                Text = Localizer["LoginSummary"],
                 Url = "tutorials/login",
                 Items =
                 [
@@ -96,24 +91,24 @@ protected override async Task OnInitializedAsync()
             new()
             {
                 Template = CreateDownloadButtonComponent("waterfall", _waterfallFileList),
-                Text = TutorialsLocalizer["WaterfallSummary"],
+                Text = Localizer["WaterfallSummary"],
                 Url = "tutorials/waterfall"
             },
             new()
             {
                 Template = CreateDownloadButtonComponent("translate", _translateFileList),
-                Text = TutorialsLocalizer["TranslateSummary"],
+                Text = Localizer["TranslateSummary"],
                 Url = "tutorials/translate"
             },
             new()
             {
                 Template = CreateDownloadButtonComponent("drawing", _drawingAppFileList),
-                Text = TutorialsLocalizer["DrawingSummary"],
+                Text = Localizer["DrawingSummary"],
                 Url = "tutorials/drawing"
             },
             new()
             {
-                Text = TutorialsLocalizer["AdminSummary"],
+                Text = Localizer["AdminSummary"],
                 Url = "tutorials/admin",
             },
             new()

src/BootstrapBlazor.Server/Components/Pages/Tutorials.razor

@@ -1,6 +1,6 @@
-@layout TutorialsLayout
+@layout TutorialsLayout
 @page "/tutorials"
-@inject IStringLocalizer<Tutorials> Localizer
+@inject IStringLocalizer<TutorialsNavMenu> Localizer
 
 <ComponentCategory Text="@Localizer["CategoryTitle"]">
     <ComponentCard Text="@Localizer["DashboardSummary"]" Image="tutorials/dashboard.png" Url="tutorials/dashboard"></ComponentCard>
@@ -10,4 +10,3 @@
     <ComponentCard Text="@Localizer["DrawingSummary"]" Image="tutorials/drawing.png" Url="tutorials/drawing"></ComponentCard>
     <ComponentCard Text="@Localizer["AdminSummary"]" Image="tutorials/pro.jpg" Url="tutorials/admin"></ComponentCard>
 </ComponentCategory>
-

src/BootstrapBlazor.Server/Components/Samples/Tutorials/Memorial.razor

@@ -1,13 +1,14 @@
-@page "/tutorials/memorial"
+@page "/tutorials/memorial"
+@inject IStringLocalizer<Memorial> Localizer
 
-<Button Text="切换哀悼模式" OnClick="OnToggle" class="mb-3"></Button>
+<Button Text="@Localizer["ToggleButtonText"]" OnClick="OnToggle" class="mb-3"></Button>
 
-<p class="code-label">1. 加载 <code>Utlity</code> 工具</p>
+<p class="code-label">@((MarkupString)Localizer["Step1Title"].Value)</p>
 <Pre>var module = await JSRuntime.LoadUtility();</Pre>
 
-<p class="code-label">2. 设置哀悼模式</p>
+<p class="code-label">@Localizer["Step2Title"]</p>
 <Pre>await module.InvokeVoidAsync("SetMemorial", true);</Pre>
 
-<p class="code-label">3. 全站默认设置追悼模式方法</p>
-<p>更新 <code>App.razor</code> 文档内容如下</p>
+<p class="code-label">@Localizer["Step3Title"]</p>
+<p>@((MarkupString)Localizer["Step3Description"].Value)</p>
 <Pre>&lt;html lang="en" data-bs-theme='dark' data-bb-theme="memorial"&gt;</Pre>

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

@@ -469,9 +469,16 @@
     "ZipArchive": "IZipArchiveService"
   },
   "BootstrapBlazor.Server.Components.Layout.TutorialsNavMenu": {
+    "AdminSummary": "Admin",
+    "CategoryTitle": "Bootstrap Blazor Practical Cases",
+    "DashboardSummary": "Dashboard",
+    "DrawingSummary": "Drawing",
+    "LoginSummary": "Login&Register",
     "MemorialMode": "Memorial",
     "MFA": "MFA",
-    "OnlineSheet": "UniverSheet"
+    "OnlineSheet": "UniverSheet",
+    "TranslateSummary": "Translate",
+    "WaterfallSummary": "Waterfall"
   },
   "BootstrapBlazor.Server.Components.Pages.Breakpoints": {
     "Amount": "pixel",
@@ -716,15 +723,6 @@
     "P8": "theme, please use the original",
     "P9": "The added style file is as follows"
   },
-  "BootstrapBlazor.Server.Components.Pages.Tutorials": {
-    "AdminSummary": "Admin",
-    "CategoryTitle": "Bootstrap Blazor Practical Cases",
-    "DashboardSummary": "Dashboard",
-    "DrawingSummary": "Drawing",
-    "LoginSummary": "Login&Register",
-    "TranslateSummary": "Translate",
-    "WaterfallSummary": "Waterfall"
-  },
   "BootstrapBlazor.Server.Components.Samples.Affixs": {
     "AffixIntro": "Fix the element to a specific visible area",
     "AffixNormalIntro": "Affix is fixed at the top of the page by default",
@@ -4607,10 +4605,10 @@
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "AllowDragOrderDesc": "<p>Pressing the mouse over a column heading and dragging it to another column heading position can adjust the column to be in front of the target column, but the built-in columns in the <code>Table</code> component, such as detail row, row number, selection, and operation columns, cannot be adjusted</p><p>This example enables local storage by setting the <code>ClientTableName</code> parameter. After dragging and adjusting the order, the page can be refreshed, and the column order remains in the previous state</p><p>After version <code>10.6.1</code>, use <code>OnTableColumnClientStatusChanged</code> to uniformly handle column dragging, column resizing, and auto-fit column width callbacks, replacing the original <code>OnDragColumnEndAsync</code>, <code>OnResizeColumnAsync</code>, and <code>OnAutoFitContentAsync</code> callbacks.</p><p><b>Notes:</b></p><p>Table state persistence has two modes. If the <code>ClientTableName</code> property is set, browser local storage is used to persist information. If it is not set, server-side storage persistence is implemented through callbacks. The persistence structure is <code>TableColumnClientStatus</code>, which consists of the column state collection and the table width parameter.</p><p>The table width parameter defaults to 0. When all columns have width values, the table width parameter is the actual width rendered on the client. A value of 0 means the table width is adaptive.</p><p>When using browser local storage for persistence, no additional settings are required. The table automatically loads the client state.</p><p>When using server-side storage for persistence, handle table state loading and saving logic in callbacks. In actual use, the state can be stored in a database or other storage as needed. Use the <code>OnTableColumnClientStatusChanged</code> callback to handle server-side state changes, and use the <code>OnLoadTableColumnClientStatus</code> callback to restore the table persistence state.</p>",
-    "ClearTableColumnClientStatusDesc": "By calling the <code>ClearTableColumnClientStatus</code> method of the table component instance, the current persistent settings are cleared, restoring the table to its default settings.",
-    "ResetButtonText": "Reset",
     "AllowDragOrderIntro": "By specifying <code>AllowDragColumn</code>, set the table columns to allow dragging column headings to adjust the table column order",
     "AllowDragOrderTitle": "Allow dragging column headings to adjust table column order",
+    "ClearTableColumnClientStatusDesc": "By calling the <code>ClearTableColumnClientStatus</code> method of the table component instance, the current persistent settings are cleared, restoring the table to its default settings.",
+    "ResetButtonText": "Reset",
     "TablesColumnDescription": "Used to display multiple pieces of data with similar structures, data can be sorted, filtered, compared or other custom operations.",
     "TablesColumnTitle": "Table Column"
   },
@@ -5706,6 +5704,13 @@
     "UrlDesc": "Use your iPhone's camera or the QR code scanning function to scan the QR code below, then open the <code>Safari</code> browser and open the current address",
     "WiFiDesc": "Use your iPhone's camera or the QR code scanner to scan the QR code below to automatically join the <code>WiFi</code> network."
   },
+  "BootstrapBlazor.Server.Components.Samples.Tutorials.Memorial": {
+    "Step1Title": "1. Load the <code>Utility</code> module",
+    "Step2Title": "2. Enable memorial mode",
+    "Step3Description": "Update the <code>App.razor</code> document as follows",
+    "Step3Title": "3. Enable memorial mode site-wide by default",
+    "ToggleButtonText": "Toggle Memorial Mode"
+  },
   "BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet.OnlineSheet": {
     "ToastOnReadyContent": "After 4 seconds the table is updated by other writers to change the content",
     "ToastOnReadyTitle": "Collaboration Notification"

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

@@ -469,9 +469,16 @@
     "ZipArchive": "压缩归档服务 IZipArchiveService"
   },
   "BootstrapBlazor.Server.Components.Layout.TutorialsNavMenu": {
+    "AdminSummary": "中台 Admin",
+    "CategoryTitle": "BootstrapBlazor 实战案例",
+    "DashboardSummary": "仪表盘 Dashboard",
+    "DrawingSummary": "画图 Drawing",
+    "LoginSummary": "登陆注册 Login&Register",
     "MemorialMode": "追悼模式",
     "MFA": "多因子认证 MFA",
-    "OnlineSheet": "在线表格 UniverSheet"
+    "OnlineSheet": "在线表格 UniverSheet",
+    "TranslateSummary": "翻译工具 Translate",
+    "WaterfallSummary": "瀑布流图片 Waterfall"
   },
   "BootstrapBlazor.Server.Components.Pages.Breakpoints": {
     "Amount": "像素",
@@ -716,15 +723,6 @@
     "P8": "主题，则请在原有",
     "P9": "内增加样式文件如下"
   },
-  "BootstrapBlazor.Server.Components.Pages.Tutorials": {
-    "AdminSummary": "中台 Admin",
-    "CategoryTitle": "BootstrapBlazor 实战案例",
-    "DashboardSummary": "仪表盘 Dashboard",
-    "DrawingSummary": "画图 Drawing",
-    "LoginSummary": "登陆注册 Login&Register",
-    "TranslateSummary": "翻译工具 Translate",
-    "WaterfallSummary": "瀑布流图片 Waterfall"
-  },
   "BootstrapBlazor.Server.Components.Samples.Affixs": {
     "AffixIntro": "将页面元素钉在可视范围",
     "AffixNormalIntro": "固钉默认固定在页面顶部",
@@ -4607,10 +4605,10 @@
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "AllowDragOrderDesc": "<p>在列标题上按下鼠标拖动到其他列标题位置可将该列调整至目标列之前，但 <code>Table</code> 组件内置的列如明细行列、行号列、选择列、操作列等不可被调整</p><p>本示例通过设置 <code>ClientTableName</code> 参数开启了本地化存储，拖动调整顺序后，可刷新页面，列顺序是保持上次状态的</p><p><code>10.6.1</code> 版本后使用 <code>OnTableColumnClientStatusChanged</code> 统一处理列拖拽、列宽调整与自适应列宽回调，移除原 <code>OnDragColumnEndAsync</code> <code>OnResizeColumnAsync</code> 和 <code>OnAutoFitContentAsync</code> 回调。</p><p><b>注意事项：</b></p><p>表格状态持久化功能分两种情况，设置 <code>ClientTableName</code> 属性即使用浏览器本地存储持久化信息，如果未设置则通过回调使用服务器端存储持久化信息。持久化信息结构体为 <code>TableColumnClientStatus</code> 由列状态集合以及表格宽度参数组成。</p><p>表格宽度参数默认为 0 当所有列宽度均有值时，表格宽度参数值为表格在客户端渲染的实际宽度；为 0 表示表格宽度自适应</p><p>使用浏览器本地存储持久化信息时，无需任何设置，表格会自动加载客户端状态</p><p>使用服务器端存储持久化信息时，需在回调中处理表格状态加载与保存逻辑，实际使用中可根据需要使用数据库或其他方式进行存储;通过 <code>OnTableColumnClientStatusChanged</code> 回调处理服务器端状态，通过 <code>OnLoadTableColumnClientStatus</code> 回调方法对表格进行持久化状态恢复操作</p>",
-    "ClearTableColumnClientStatusDesc": "通过调用表格组件实例方法 <code>ClearTableColumnClientStatus</code> 清除当前持久化设置恢复表格为默认设置",
-    "ResetButtonText": "重置",
     "AllowDragOrderIntro": "通过指定 <code>AllowDragColumn</code> 设置表格列允许拖动列标题调整表格列顺序",
     "AllowDragOrderTitle": "允许拖动列标题调整表格列顺序",
+    "ClearTableColumnClientStatusDesc": "通过调用表格组件实例方法 <code>ClearTableColumnClientStatus</code> 清除当前持久化设置恢复表格为默认设置",
+    "ResetButtonText": "重置",
     "TablesColumnDescription": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",
     "TablesColumnTitle": "Table 表格"
   },
@@ -5706,6 +5704,13 @@
     "UrlDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，打开 <code>Safari</code> 浏览器并且打开当前地址",
     "WiFiDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，自动加入 <code>WiFi</code> 网络"
   },
+  "BootstrapBlazor.Server.Components.Samples.Tutorials.Memorial": {
+    "Step1Title": "1. 加载 <code>Utility</code> 工具",
+    "Step2Title": "2. 设置哀悼模式",
+    "Step3Description": "更新 <code>App.razor</code> 文档内容如下",
+    "Step3Title": "3. 全站默认设置追悼模式方法",
+    "ToggleButtonText": "切换哀悼模式"
+  },
   "BootstrapBlazor.Server.Components.Samples.Tutorials.OnlineSheet.OnlineSheet": {
     "ToastOnReadyContent": "4 秒后表格更新其他写作人员更改内容",
     "ToastOnReadyTitle": "在线表格协作通知"