doc(BaiduOcr): add config documentation (#6690)

* doc: 文档格式化

* doc: 更新配置文档

* doc: 更新资源文件

* doc: 更新文档

Author: ArgoZhang

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

@@ -1,22 +1,29 @@
 @page "/ocr"
-@inject IBaiduOcr OcrService
-@inject IStringLocalizer<BaiduOcr> Localizer
-@inject ToastService ToastService
 
 <h3>@Localizer["Title"]</h3>
 
 <h4>@Localizer["SubTitle"]</h4>
 
 <Tips>@Localizer["BaiduOcrDesc"]</Tips>
+<PackageTips Name="BootstrapBlazor.BaiduOcr" />
+<p><b>@Localizer["BaiduOcrIntro"]</b></p>
+<p class="code-label">@((MarkupString)Localizer["BaiduOcrStep1"].Value)</p>
+<p>@((MarkupString)Localizer["BaiduOcrStep1Desc"].Value)</p>
+<Pre>{
+    "BaiduOcrOption": {
+      "AppId": "",
+      "ApiKey": "",
+      "Secret": ""
+    }
+}</Pre>
+<p class="code-label">@((MarkupString)Localizer["BaiduOcrStep2"].Value)</p>
+<Pre>[Inject, NotNull]
+private IBaiduOcr? OcrService { get; set; }</Pre>
 
-    <PackageTips Name="BootstrapBlazor.BaiduOcr" />
-
-    <p><b>@Localizer["BaiduOcrIntro"]</b></p>
-<p>@((MarkupString)Localizer["BaiduOcrStep1"].Value)</p>
-<p>@((MarkupString)Localizer["BaiduOcrStep2"].Value)</p>
+<p class="code-label">@((MarkupString)Localizer["BaiduOcrStep3"].Value)</p>
 
 <DemoBlock Title="@Localizer["VatInvoiceTitle"]" Introduction="@Localizer["VatInvoiceIntro"]" Name="VatInvoice">
-    <ButtonUpload TValue="string" OnChange="@OnClickToUploadBlock" BrowserButtonText="VATInvoice" ShowUploadFileList="false" IsDisabled="IsLoading" BrowserButtonIcon="@Icon"></ButtonUpload>
+    <ButtonUpload TValue="string" OnChange="@OnClickToUploadBlock" BrowserButtonText="VATInvoice" ShowUploadFileList="false" IsDisabled="_isLoading" BrowserButtonIcon="@Icon"></ButtonUpload>
     @if (Invoice != null)
     {
         <div class="row form-inline g-3 mt-0">
@@ -128,7 +135,7 @@
                 <EditorItem @bind-Field="@context.TotalAmount" Text="金额" PlaceHolder="可为空" />
             </FieldItems>
             <Buttons>
-                <Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-check" Text="Verify" />
+                <Button ButtonType="ButtonType.Submit" Icon="fa-solid fa-check" Text="Verify"></Button>
             </Buttons>
         </EditorForm>
     </ValidateForm>

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

@@ -12,16 +12,21 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class BaiduOcr : IDisposable
 {
-    private InvoiceEntity? Invoice { get; set; }
+    [Inject, NotNull]
+    private IBaiduOcr? OcrService { get; set; }
 
-    /*以下示例为本站特殊处理逻辑可不参考*/
-    private bool IsLoading { get; set; }
+    [Inject, NotNull]
+    private IStringLocalizer<BaiduOcr>? Localizer { get; set; }
 
-    private string ButtonIcon { get; } = "fa-solid fa-cloud-arrow-up";
+    [Inject, NotNull]
+    private ToastService? ToastService { get; set; }
 
-    private string LoadingIcon { get; } = "fa-solid fa-spinner fa-spin-pulse";
+    private InvoiceEntity? Invoice { get; set; }
+
+    /*以下示例为本站特殊处理逻辑可不参考*/
+    private bool _isLoading;
 
-    private string Icon => IsLoading ? LoadingIcon : ButtonIcon;
+    private string Icon => _isLoading ? "fa-solid fa-spinner fa-spin-pulse" : "fa-solid fa-cloud-arrow-up";
 
     /// <summary>
     /// 取消请求令牌
@@ -33,12 +38,12 @@ private async Task OnClickToUploadBlock(UploadFile file)
         if (file.File != null)
         {
             // 设置 按钮禁用
-            IsLoading = true;
+            _isLoading = true;
             StateHasChanged();
 
             // 获得上传文件
             var payload = await file.GetBytesAsync(file.File.Size);
-            if (payload != null && payload.Length > 0)
+            if (payload is { Length: > 0 })
             {
                 try
                 {
@@ -60,7 +65,7 @@ private async Task OnClickToUploadBlock(UploadFile file)
                 }
             }
 
-            IsLoading = false;
+            _isLoading = false;
             StateHasChanged();
         }
     }

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

@@ -650,7 +650,9 @@
     "BaiduOcrDesc": "本组件通过调用 Baidu AI 平台文字识别接口进行增值税发票文字识别。支持对增值税普票、专票、全电发票（新版全国统一电子发票，专票/普票）、卷票、区块链发票的所有字段进行结构化识别，包括发票基本信息、销售方及购买方信息、商品信息、价税信息等，其中五要素字段的识别准确率超过 99.9%； 同时，支持对增值税卷票的 21 个关键字段进行识别，包括发票类型、发票代码、发票号码、机打号码、机器编号、收款人、销售方名称、销售方纳税人识别号、开票日期、购买方名称、购买方纳税人识别号、项目、单价、数量、金额、税额、合计金额(小写)、合计金额(大写)、校验码、省、市，四要素字段的识别准确率可达95%。上传图片不能超过 4M",
     "BaiduOcrIntro": "Usage",
     "BaiduOcrStep1": "1. Get <code>IBaiduOcr</code> instance by inject service",
-    "BaiduOcrStep2": "2. Call <code>IBaiduOcr</code> instance method",
+    "BaiduOcrStep1Desc": "Update the <code>appsettings.json</code> file with the following configuration. Please register on <a href=\"https://ai.baidu.com/ai-doc/index/OCR\" target=\"\">Baidu AI Open Platform</a> and apply for relevant parameter values.",
+    "BaiduOcrStep2": "2. Get <code>IBaiduOcr</code> instance by inject service",
+    "BaiduOcrStep3": "3. Call <code>IBaiduOcr</code> instance method",
     "VerifyVatInvoiceTitle": "增值税验真",
     "VerifyVatInvoiceIntro": "通过调用 <code>IBaiduOcr</code> 服务实例的发票验真方法 <code>VerifyInvoiceAsync</code> 返回 <code>InvoiceVerifyResult</code> 其属性 <code>Valid</code> 为 <code>true</code> 时为真"
   },

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

@@ -465,7 +465,6 @@
     "MultipleMaskContainerDesc": "组件内自己设置 <code>Mask</code> 组件，调用 <code>MaskService</code> 实例方法 <code>Show</code> 时，通过第二个参数指定 <code>Mask</code> 实例即可",
     "MaskCloseTitle": "代码关闭弹窗",
     "MaskCloseIntro": "通过使用 <code>DialogCloseButton</code> 组件或者级联参数关闭弹窗"
-
   },
   "BootstrapBlazor.Server.Components.Samples.Messages": {
     "MessagesTitle": "Message 消息提示",
@@ -650,8 +649,10 @@
     "VatInvoiceIntro": "通过上传增值税发票图片调用百度 Ocr 接口进行文字识别",
     "BaiduOcrDesc": "本组件通过调用 Baidu AI 平台文字识别接口进行增值税发票文字识别。支持对增值税普票、专票、全电发票（新版全国统一电子发票，专票/普票）、卷票、区块链发票的所有字段进行结构化识别，包括发票基本信息、销售方及购买方信息、商品信息、价税信息等，其中五要素字段的识别准确率超过 99.9%； 同时，支持对增值税卷票的 21 个关键字段进行识别，包括发票类型、发票代码、发票号码、机打号码、机器编号、收款人、销售方名称、销售方纳税人识别号、开票日期、购买方名称、购买方纳税人识别号、项目、单价、数量、金额、税额、合计金额(小写)、合计金额(大写)、校验码、省、市，四要素字段的识别准确率可达95%。上传图片不能超过 4M",
     "BaiduOcrIntro": "使用方法",
-    "BaiduOcrStep1": "1. 通过注入服务获得 <code>IBaiduOcr</code> 实例",
-    "BaiduOcrStep2": "2. 调用服务相对应的识别方法即可",
+    "BaiduOcrStep1": "1. 配置 <code>BaiduOcrOption</code>",
+    "BaiduOcrStep1Desc": "更新 <code>appsettings.json</code> 文件，配置如下：相关参数值请在 <a href=\"https://ai.baidu.com/ai-doc/index/OCR\" target=\"\">百度 AI 开放平台</a> 注册后开通申请",
+    "BaiduOcrStep2": "2. 通过注入服务获得 <code>IBaiduOcr</code> 实例",
+    "BaiduOcrStep3": "3. 调用服务相对应的识别方法即可",
     "VerifyVatInvoiceTitle": "增值税验真",
     "VerifyVatInvoiceIntro": "通过调用 <code>IBaiduOcr</code> 服务实例的发票验真方法 <code>VerifyInvoiceAsync</code> 返回 <code>InvoiceVerifyResult</code> 其属性 <code>Valid</code> 为 <code>true</code> 时为真"
   },