chore: bump version to 5.14.0

* doc: 更新 OnSetItemClass 示例
* feat: 增加 OnSetItemClass 回调参数

.editorconfig

@@ -64,8 +64,8 @@ dotnet_style_explicit_tuple_names = true:suggestion
 dotnet_style_null_propagation = true:suggestion 
 dotnet_style_coalesce_expression = true:suggestion 
 dotnet_style_prefer_is_null_check_over_reference_equality_method = true:silent 
-dotnet_prefer_inferred_tuple_names = true:suggestion 
-dotnet_prefer_inferred_anonymous_type_member_names = true:suggestion 
+dotnet_style_prefer_inferred_tuple_names = true:suggestion
+dotnet_style_prefer_inferred_anonymous_type_member_names = true:suggestion
 dotnet_style_prefer_auto_properties = true:silent 
 dotnet_style_prefer_conditional_expression_over_assignment = true:silent 
 dotnet_style_prefer_conditional_expression_over_return = true:silent 
@@ -88,9 +88,10 @@ dotnet_naming_symbols.constant_fields.required_modifiers          = const
 # var preferences 
 csharp_style_var_for_built_in_types = true:silent 
 csharp_style_var_when_type_is_apparent = true:silent 
-csharp_style_var_elsewhere = true:silent 
+csharp_style_var_elsewhere = true:silent
+csharp_prefer_static_local_function= true:silent
 # Expression-bodied members 
-csharp_style_expression_bodied_methods = false:silent 
+csharp_style_expression_bodied_methods = false:silent
 csharp_style_expression_bodied_constructors = false:silent 
 csharp_style_expression_bodied_operators = false:silent 
 csharp_style_expression_bodied_properties = true:silent 

.filenesting.json

@@ -0,0 +1,110 @@
+{
+  "help": "https://go.microsoft.com/fwlink/?linkid=866610",
+  "root": true,
+
+  "dependentFileProviders": {
+    "add": {
+      "addedExtension": {},
+      "pathSegment": {
+        "add": {
+          ".*": [
+            ".js",
+            ".css",
+            ".html",
+            ".htm",
+            ".less",
+            ".scss",
+            ".coffee",
+            ".iced",
+            ".config",
+            ".cs",
+            ".vb",
+            ".json"
+          ]
+        }
+      },
+      "extensionToExtension": {
+        "add": {
+          ".js": [
+            ".cs",
+            ".razor",
+            ".coffee",
+            ".iced",
+            ".ts",
+            ".tsx",
+            ".jsx"
+          ],
+          ".css": [
+            ".cs",
+            ".razor",
+            ".less",
+            ".scss",
+            ".sass",
+            ".styl"
+          ],
+          ".html": [
+            ".md",
+            ".mdown",
+            ".markdown",
+            ".mdwn"
+          ],
+          ".map": [
+            ".js",
+            ".css"
+          ],
+          ".svgz": [
+            ".svg"
+          ],
+          ".designer.cs": [
+            ".resx"
+          ],
+          ".cs.d.ts": [
+            ".cs"
+          ]
+        }
+      },
+      "fileToFile": {
+        "add": {
+          ".bowerrc": [
+            "bower.json"
+          ],
+          ".npmrc": [
+            "package.json"
+          ],
+          "npm-shrinkwrap.json": [
+            "package.json"
+          ],
+          "yarn.lock": [
+            "package.json"
+          ],
+          ".yarnclean": [
+            "package.json"
+          ],
+          ".yarnignore": [
+            "package.json"
+          ],
+          ".yarn-integrity": [
+            "package.json"
+          ],
+          ".yarnrc": [
+            "package.json"
+          ],
+          "package-lock.json": [
+            "package.json"
+          ]
+        }
+      },
+      "fileSuffixToExtension": {
+        "add": {
+          "-vsdoc.js": [
+            ".js"
+          ]
+        }
+      },
+      "allExtensions": {
+        "add": {
+        }
+      }
+    }
+  }
+}

.github/workflows/build.yml

@@ -0,0 +1,32 @@
+name: Build Project
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Setup .NET Core 2.1
+      uses: actions/setup-dotnet@v1
+      with:
+        dotnet-version: 2.1.x
+
+    - name: Setup .NET Core 5
+      uses: actions/setup-dotnet@v1
+      with:
+        dotnet-version: 5.0.x
+
+    - name: Build
+      env: 
+        NUGET_API_KEY: ${{secrets.NUGET_API_KEY}}
+        Bundle: True
+      run: |
+        dotnet restore src/BootstrapBlazor --no-cache
+        dotnet build src/BootstrapBlazor

.github/workflows/docker.yml

@@ -0,0 +1,15 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches:
+      - dev-dockerfile
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+ 
+    steps:
+    - uses: actions/checkout@v1
+    - name: Build the Docker image
+      run: docker build . --file src/BootstrapBlazor.Server/Linux.Dockerfile --tag bb:$(date +%s)

.github/workflows/pack.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - pack
+      - hotfix
 
 jobs:
   pack:
@@ -12,14 +13,21 @@ jobs:
     steps:
     - uses: actions/checkout@v2
 
-    - name: Setup .NET Core
+    - name: Setup .NET Core 2.1
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 5.0.201
+        dotnet-version: 2.1.x
+
+    - name: Setup .NET Core 5
+      uses: actions/setup-dotnet@v1
+      with:
+        dotnet-version: 5.0.x
 
     - name: Publish to Nuget
       env: 
         NUGET_API_KEY: ${{secrets.NUGET_API_KEY}}
+        Bundle: True
+
       run: |
         dotnet pack src/BootstrapBlazor -c Release -o publish
         dotnet nuget push publish/BootstrapBlazor.*.nupkg -s https://api.nuget.org/v3/index.json -k $NUGET_API_KEY --skip-duplicate

.github/workflows/publish.yml

@@ -12,10 +12,15 @@ jobs:
     steps:
     - uses: actions/checkout@v2
 
-    - name: Setup .NET Core
+    - name: Setup .NET Core 2.1
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 5.0.201
+        dotnet-version: 2.1.x
+
+    - name: Setup .NET Core 5
+      uses: actions/setup-dotnet@v1
+      with:
+        dotnet-version: 5.0.x
 
     - name: Publish wasm
       run: |

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Package to Nuget
+name: Package Extensions to Nuget
 
 on:
   push:
@@ -12,14 +12,20 @@ jobs:
     steps:
     - uses: actions/checkout@v2
 
-    - name: Setup .NET Core
+    - name: Setup .NET Core 2.1
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 5.0.201
+        dotnet-version: 2.1.x
+
+    - name: Setup .NET Core 5
+      uses: actions/setup-dotnet@v1
+      with:
+        dotnet-version: 5.0.x
 
     - name: Publish to Nuget
       env: 
         NUGET_API_KEY: ${{secrets.NUGET_API_KEY}}
+        Bundle: True
       run: |      
         dotnet pack src/Extensions/Components/BootstrapBlazor.Chart -c Release -o publish
         dotnet nuget push publish/BootstrapBlazor.Chart.*.nupkg -s https://api.nuget.org/v3/index.json -k $NUGET_API_KEY --skip-duplicate
@@ -38,3 +44,6 @@ jobs:
         
         dotnet pack src/Extensions/DataServices/BootstrapBlazor.DataAcces.FreeSql -c Release -o publish
         dotnet nuget push publish/BootstrapBlazor.DataAcces.FreeSql.*.nupkg -s https://api.nuget.org/v3/index.json -k $NUGET_API_KEY --skip-duplicate
+        
+        dotnet pack src/Middleware/BootstrapBlazor.Middleware -c Release -o publish
+        dotnet nuget push publish/BootstrapBlazor.Middleware.*.nupkg -s https://api.nuget.org/v3/index.json -k $NUGET_API_KEY --skip-duplicate

.gitignore

@@ -1,4 +1,4 @@
-###### -- File Created With Git Source Control Provider 2015 -- ######
+###### -- File Created With Git Source Control Provider 2015 -- ######
 ###### -- From https://github.com/github/gitignore -- ######
 ###### -- Warning Regenerating this file will erase all your custom ignores, unless you add them below the Custom Ignore section at the bottom --  ######
 ## Ignore Visual Studio temporary files, build results, and
@@ -354,3 +354,6 @@ src/**/*.xml
 # Coverage
 coverage*.xml
 tools/
+
+# Upload Folder
+src/**/wwwroot/**/uploader

BootstrapBlazor.sln

@@ -36,7 +36,9 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "appveyor", "appveyor", "{1E
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "github", "github", "{F0754254-903C-411B-972C-EC91254B4A67}"
 	ProjectSection(SolutionItems) = preProject
+		.github\workflows\build.yml = .github\workflows\build.yml
 		.github\workflows\deploy.yml = .github\workflows\deploy.yml
+		.github\workflows\docker.yml = .github\workflows\docker.yml
 		.github\workflows\pack.yml = .github\workflows\pack.yml
 		.github\workflows\publish.yml = .github\workflows\publish.yml
 		.github\workflows\release.yml = .github\workflows\release.yml
@@ -95,6 +97,22 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.WebAssembly
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.WebAssembly.ServerHost", "src\Wasm\BootstrapBlazor.WebAssembly.ServerHost\BootstrapBlazor.WebAssembly.ServerHost.csproj", "{FFFD2EB7-AE88-4DAD-A825-528B2CEFB4B5}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "config", "config", "{8AB9DB43-233A-4D49-99FA-FA540C2109F2}"
+	ProjectSection(SolutionItems) = preProject
+		.editorconfig = .editorconfig
+		.filenesting.json = .filenesting.json
+		.gitattributes = .gitattributes
+		.gitignore = .gitignore
+		.issuetracker = .issuetracker
+		appveyor.yml = appveyor.yml
+		Directory.Build.props = Directory.Build.props
+		NuGet.Config = NuGet.Config
+	EndProjectSection
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "middleware", "middleware", "{4A7F4513-C515-40DD-A217-169E1CBB2827}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BootstrapBlazor.Middleware", "src\Middleware\BootstrapBlazor.Middleware\BootstrapBlazor.Middleware.csproj", "{59B49D4C-05FB-4E51-AB40-9498ADC71DD0}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -149,6 +167,10 @@ Global
 		{FFFD2EB7-AE88-4DAD-A825-528B2CEFB4B5}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{FFFD2EB7-AE88-4DAD-A825-528B2CEFB4B5}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{FFFD2EB7-AE88-4DAD-A825-528B2CEFB4B5}.Release|Any CPU.Build.0 = Release|Any CPU
+		{59B49D4C-05FB-4E51-AB40-9498ADC71DD0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{59B49D4C-05FB-4E51-AB40-9498ADC71DD0}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{59B49D4C-05FB-4E51-AB40-9498ADC71DD0}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{59B49D4C-05FB-4E51-AB40-9498ADC71DD0}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -161,6 +183,7 @@ Global
 		{F0754254-903C-411B-972C-EC91254B4A67} = {A627F6CC-94FC-4E48-B3CC-F0EA16700527}
 		{B84D315E-967D-4FBF-9B72-1F3128155CB0} = {A627F6CC-94FC-4E48-B3CC-F0EA16700527}
 		{190F25CF-C6F9-4964-97E9-F6A912D527AE} = {7C1D79F1-87BC-42C1-BD5A-CDE4044AC1BD}
+		{22328011-53B3-447A-B781-AC3C196B2847} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 		{C8E79F4C-8C55-4E13-96B5-3D2BD6A07B74} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 		{CD062AB6-244D-402A-8F33-C37DAC5856CC} = {22328011-53B3-447A-B781-AC3C196B2847}
 		{56FEFF09-85FC-408D-A397-6E264E68414E} = {22328011-53B3-447A-B781-AC3C196B2847}
@@ -174,6 +197,8 @@ Global
 		{1ED371F3-2B28-4B2D-91B8-0C00DA42CB65} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
 		{0556D9AB-8673-4248-8817-4D99F4DCC568} = {C8E79F4C-8C55-4E13-96B5-3D2BD6A07B74}
 		{FFFD2EB7-AE88-4DAD-A825-528B2CEFB4B5} = {C8E79F4C-8C55-4E13-96B5-3D2BD6A07B74}
+		{4A7F4513-C515-40DD-A217-169E1CBB2827} = {A2182155-43ED-44C1-BF6F-1B70EBD2DFFE}
+		{59B49D4C-05FB-4E51-AB40-9498ADC71DD0} = {4A7F4513-C515-40DD-A217-169E1CBB2827}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {0DCB0756-34FA-4FD0-AE1D-D3F08B5B3A6B}

CHANGELOG.zh-CN.md

@@ -0,0 +1,90 @@
+<h1 align="center">Bootstrap Blazor 组件库</h1>
+
+<div align="center">
+<h2>一套基于 Bootstrap 和 Blazor 的企业级组件库</h2>
+
+
+[![Nuget](https://img.shields.io/nuget/v/BootstrapBlazor.svg?color=red&logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
+[![Nuget](https://img.shields.io/nuget/dt/BootstrapBlazor.svg?logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
+[![Commit Date](https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/master.svg?logo=github&logoColor=green&label=commit)](https://github.com/ArgoZhang/BootstrapBlazor)
+
+</div>
+
+---
+
+### 发布周期
+
+- 主版本号：与 Microsoft .NET 主版本号一致
+- 次版本号：与 Microsoft .NET 次版本号一致
+- 修订版本号：每周四发布正式版（翻车紧急修复会跳版本号）日常每天发布新功能测试版本或者修复 BUG 测试版本 beta-##
+
+---
+
+### 5.0.22
+
+`2021-03-24`
+
+#### 增加功能
+
+- !1193 feat(#I3CQYI): Table 组件编辑按钮增加回调委托 [#I3CQYI](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1193)
+- !1192 feat(#I3CQY7): 增加 Row 组件用于栅格系统布局 [#I3CQY7](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1192)
+- !1191 feat(#I3CQXQ): 自动生成标签 AutoGenerateColumn 增加 ComponentType 属性用于自定义呈现组件 [#I3CQXQ](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1191)
+- !1188 feat(#I3CQY7): Switch 组件适配 Row 组件支持 row form-row form-inline 三种模式 [#I3CQY7](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1188)
+- !1187 feat(#I3CPJ8): Select 组件适配 Row 组件支持 row form-row form-inline 三种模式 [#I3CPJ8](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1187)
+- !1172 feat(#I3CFJS): Table 组件树形数据支持 CRUD 并且保持编辑前展开收缩状态 [#I3CFJS](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1172)
+- !1173 feat(#I3CBQT): 增加演示网站 wasm 模式对浏览器是否兼容性提示功能 [#I3CBQT](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1173)
+- !1171 feat(#I3CBI6): DataAnnotation 支持复杂类型的验证 [#I3CBI6](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1171)
+- !1167 feat(#I3C6GH): Table 组件展开树形数据是增加 Spin 动画效果 [#I3C6GH](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1167)
+
+#### 问题修复
+
+- !1189 fix(#I3CPLZ): 更新 EFCore 数据注入服务获取记录总数逻辑 [#I3CPLZ](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1189)
+- !1185 fix(#I3CFAS): 修复 EFCore 数据注入服务排序导致递归循环引用问题 [#I3CFAS](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1185)
+- !1183 fix(#I3CF4K): 更新 EFCore 数据注入服务使服务生命周期内部与参数一致默认 Scope [#I3CF4K](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1183)
+- !1178 fix(#I3CCK1): 修复全局配置 SwalDelay 参数在 Swal 组件中未生效问题 [#I3CCK1](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1178)
+- !1177 fix(#I3CCIQ): 修复全局配置 MessageDelay 参数在 Message 组件中未生效问题 [#I3CCIQ](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1177)
+- !1175 fix(#I3CBSW): 修复 Timer 计时器组件不兼容 wasm 模式问题 [#I3CBSW](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1175)
+- !1168 fix(#I3C8PH): 修复 Tab 组件首次加载时活动标签页蓝色火柴棍特效不能正常呈现问题 [#I3C8PH](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1168)
+- !1163 fix(#I3C2W4): 修复内置数据服务导致高级搜索默认高亮状态问题 [#I3C2W4](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1163)
+- !1161 fix(#I3C205): 更新 Switch 组件点击事件触发组件 [#I3C205](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1161)
+
+#### 示例更新
+
+- !1190 docs(#I3CQXN): 更新 Table 组件明细行示例代码
+- !1182 docs(#I3CF12): 更新 Table 组件更新固定列示例代码
+- !1169 docs(#I3C8Q3): 更新 dialog 示例代码
+- !1166 docs(#I3C4HV): 更新 Table 组件固定表头示例代码
+- !1165 docs(#I3C4F0): 更新 Table 组件多表头示例代码
+
+#### 性能优化
+
+- !1186 perf(#I3CPID): 优化 ValidateForm 组件提高内部性能 [#I3CPID](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1186)
+- !1170 refactor(#I3CA0I): DynamicComponent 改名为 BootstrapDynamicComponent [#I3CA0I](https://gitee.com/LongbowEnterprise/BootstrapBlazor/pulls/1170)
+
+
+### 5.0.21
+
+`2021-03-18`
+ 
+* !1158 feat(#I3BULP): Table 组件增加数据服参数未设置时使用全局注入数据服务
+* !1157 feat(#I3BUL0): MultiSelect 组件支持双向绑定数组类型
+* !1155 feat(#I3BNXX): ValidateForm 组件增加 ValidateAllProperties 参数是否开启检查所有字段默认 false 仅检查表单中的绑定字段
+* !1154 feat(#I3BN0L): ValidateForm 组件增加 SetError 方法可主动设置绑定字段提示信息
+* !1153 feat(#I3BKXC): 优化 Upload 组件 ButtonUpload 模式上传失败后鼠标悬停图标
+* !1152 fix(#I3ALSP): 修复 Upload 组件 ShowProgress 与 IsMultiple 参数共同使用时出错问题
+* !1151 fix(#I3BGMV): 修复 Table 组件固定列后选中行样式被遮挡问题
+* !1147 fix(#I3AB7H): Upload 组件上传中增加 Spin 动画
+* !1145 fix(#I3BEBQ): 修复 Cascader 组件选中项样式
+* !1144 fix(#I3BBNS): 修复 Table 组件加载树形数据后与 ClickToSelect 参数冲突问题
+* !1143 perf(#I3BBMK): 优化 SweetAlert 组件内部弹窗性能
+* !1142 feat(#I3BADG): Dialog 组件支持无限弹窗
+* !1140 fix(#I3B9GU): 修复 Cascader 组件选择后显示文字不更新问题
+* !1139 feat(#I3B8RN): 演示站点增加切换主题功能
+* !1138 feat(#I3B8FX): Table 组件增加 ShowErrorToast 参数用于控制是否显示操作提示弹窗
+* !1137 feat(#I3B7UV): 新增 Cascader 组件
+* !1136 fix(#I3B502): 修复 Table 组件 ClickToSelect 属性与扩展操作按钮冲突问题
+* !1134 fix(#I3B50S): 修复 Table 组件树形数据点击节点无刷新问题
+* !1131 docs(#I3B1VU): Table 组件更新分页示例
+* !1130 feat(#I3B1VL): EditorForm 组件自动布局支持 Textarea 组件类型
+* !1128 fix(#I3AZOI): 修复 Menu 组件顶栏超过 5 个子菜单时样式不正确问题
+* !1127 perf(#I3AYCH): 优化 Dialog 组件性能阻止点击关闭等按钮导致子组件二次渲染问题

Directory.Build.props

@@ -1,5 +1,6 @@
 <Project>
   <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
     <Copyright>Argo Zhang</Copyright>
     <Authors>Argo Zhang(argo@163.com)</Authors>
     <Company>Longbow</Company>

NuGet.Config

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+    <add key="Blazor" value="https://nuget.blazor.zone/v3/index.json" />
+  </packageSources>
+</configuration>

README.md

@@ -1,15 +1,15 @@
-<h1 align="center">Bootstrap Blazor Component</h1>
+<h1 align="center">Bootstrap Blazor Component</h1>
 
 <div align="center">
 <h2>A set of enterprise-class UI components based on Bootstrap and Blazor.</h2>
 
 
-[![Github build](https://img.shields.io/github/workflow/status/ArgoZhang/BootstrapBlazor/Package%20to%20Nuget/master?label=master&logo=github&logoColor=green)](https://github.com/ArgoZhang/BootstrapAdmin/actions?query=workflow%3A%22Auto+Build+CI%22+branch%3Amaster)
+[![Github build](https://img.shields.io/github/workflow/status/ArgoZhang/BootstrapBlazor/Build%20Project/main?label=main&logo=github&logoColor=green)](https://github.com/ArgoZhang/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain)
 [![Nuget](https://img.shields.io/nuget/v/BootstrapBlazor.svg?color=red&logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
 [![Nuget](https://img.shields.io/nuget/dt/BootstrapBlazor.svg?logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
-[![Github](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://github.com/ArgoZhang/BootstrapBlazor/blob/master/LICENSE)
+[![Github](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
 [![Repo Size](https://img.shields.io/github/repo-size/ArgoZhang/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo)](https://github.com/ArgoZhang/BootstrapBlazor)
-[![Commit Date](https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/master.svg?logo=github&logoColor=green&label=commit)](https://github.com/ArgoZhang/BootstrapBlazor)
+[![Commit Date](https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit)](https://github.com/ArgoZhang/BootstrapBlazor)
 
 </div>
 

README.zh-CN.md

@@ -1,4 +1,18 @@
-# Bootstrap Blazor Component
+<h1 align="center">Bootstrap Blazor 组件库</h1>
+
+<div align="center">
+<h2>一套基于 Bootstrap 和 Blazor 的企业级组件库</h2>
+
+[![Github build](https://img.shields.io/github/workflow/status/ArgoZhang/BootstrapBlazor/Build%20Project/main?label=main&logo=github&logoColor=green)](https://github.com/ArgoZhang/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain)
+[![Nuget](https://img.shields.io/nuget/v/BootstrapBlazor.svg?color=red&logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
+[![Nuget](https://img.shields.io/nuget/dt/BootstrapBlazor.svg?logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/)
+[![Github](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
+[![Repo Size](https://img.shields.io/github/repo-size/ArgoZhang/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo)](https://github.com/ArgoZhang/BootstrapBlazor)
+[![Commit Date](https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit)](https://github.com/ArgoZhang/BootstrapBlazor)
+
+</div>
+
+---
 
 <a href="README.md">English</a> | <span>中文</span>
 
@@ -23,18 +37,32 @@ Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：
 
 本项目是利用 Bootstrap 样式进行封装的 UI 组件库
 
+## 生态伙伴
+
+WTM 快速开发框架，设计的核心理念就是”尽一切可能提高开发效率“。WTM框架把常规编码结构化，重复编码自动化，它不仅是一个框架，它是强有力的生产力工具！目前 WTM 快速开发框架已深度集成 Blazor 欢迎大家使用 [传送门](https://wtmdoc.walkingtec.cn)
+
+<a href="https://wtmdoc.walkingtec.cn" target="_blank"><img src="http://images.gitee.com/uploads/images/2021/0718/194451_5b6cff04_554725.png" width="100px" /></a>
+
 ## 开发环境搭建
 1. 安装 .net core sdk 最新版 [官方网址](http://www.microsoft.com/net/download)
 2. 安装 Visual Studio 2019 最新版 [官方网址](https://visualstudio.microsoft.com/vs/getting-started/)
 3. 获取本项目代码 [BootstrapBlazor](https://gitee.com/LongbowEnterprise/BootstrapBlazor)
 
 ## 相关资源
+
 - [Blazor 官方文档](https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=DT-MVP-5004174)
-- [MS Learn 平台 Blazor 教程](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5004174)
+- [生成 Blazor Web 应用](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5004174)
+- [什么是 Blazor](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/2-understand-blazor-webassembly?WT.mc_id=DT-MVP-5004174)
+- [练习 - 配置开发环境](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/3-exercise-configure-enviromnent?WT.mc_id=DT-MVP-5004174)
+- [Blazor 组件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/4-blazor-components?WT.mc_id=DT-MVP-5004174)
+- [练习 - 添加组件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/5-exercise-add-component?WT.mc_id=DT-MVP-5004174)
+- [数据绑定和事件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/6-csharp-razor-binding?WT.mc_id=DT-MVP-5004174)
+- [练习 - 数据绑定和事件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/7-exercise-razor-binding?WT.mc_id=DT-MVP-5004174)
+- [总结](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/8-summary?WT.mc_id=DT-MVP-5004174)
 
 ## QQ交流群
 
-[![QQ](https://img.shields.io/badge/QQ-795206915(满)-red.svg?logo=tencent%20qq&logoColor=red)](https://qm.qq.com/cgi-bin/qm/qr?k=1-jF9-5WA_3GFiJgXem2U_AQfqbdyOlV&jump_from=webapi) [![QQ](https://img.shields.io/badge/QQ-675147445-green.svg?logo=tencent%20qq&logoColor=red)](https://qm.qq.com/cgi-bin/qm/qr?k=Geker7hCXK0HC-J8_974645j_n6w0OE0&jump_from=webapi)
+[![QQ](https://img.shields.io/badge/QQ-795206915-green.svg?logo=tencent%20qq&logoColor=red)](https://qm.qq.com/cgi-bin/qm/qr?k=1-jF9-5WA_3GFiJgXem2U_AQfqbdyOlV&jump_from=webapi) [![QQ](https://img.shields.io/badge/QQ-675147445-green.svg?logo=tencent%20qq&logoColor=red)](https://qm.qq.com/cgi-bin/qm/qr?k=Geker7hCXK0HC-J8_974645j_n6w0OE0&jump_from=webapi)
 
 ## 视频教程
 

scripts/linux/deploy-blazor.sh

@@ -2,6 +2,7 @@
 
 cd ~/BootstrapBlazor
 git pull
+dotnet restore --no-cache
 dotnet publish src/BootstrapBlazor.WebConsole -c Release
 
 systemctl stop ba.blazor

scripts/windows/bundle.cmd

@@ -0,0 +1 @@
+setx Bundle=True

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -1,16 +1,12 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
     <IsWebProject>true</IsWebProject>
   </PropertyGroup>
 
   <ItemGroup>
-    <SupportedPlatform Include="browser" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <PackageReference Include="Longbow.Tasks" Version="5.0.0" />
+    <PackageReference Include="BootstrapBlazor.Middleware" Version="1.*" />
+    <PackageReference Include="Longbow.Tasks" Version="5.*" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Server/Controllers/Api/CodeController.cs

@@ -6,6 +6,7 @@ using BootstrapBlazor.Shared;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
 using System;
+using System.Net;
 using System.Net.Http;
 using System.Threading.Tasks;
 
@@ -26,10 +27,17 @@ namespace BootstrapBlazor.Server.Controllers.Api
         /// <param name="options"></param>
         /// <returns></returns>
         [HttpGet]
-        public Task<string> Get([FromQuery] string fileName, [FromServices] HttpClient client, [FromServices] IOptions<WebsiteOptions> options)
+        public async Task<string> Get([FromQuery] string fileName, [FromServices] HttpClient client, [FromServices] IOptions<WebsiteOptions> options)
         {
+            var ret = "";
             client.BaseAddress = new Uri(options.Value.RepositoryUrl);
-            return client.GetStringAsync(fileName);
+            try
+            {
+                ret = await client.GetStringAsync(fileName);
+            }
+            catch (HttpRequestException ex) { ret = ex.StatusCode == HttpStatusCode.NotFound ? "无" : ex.StatusCode.ToString() ?? "网络错误"; }
+            catch (Exception) { }
+            return ret;
         }
 
         /// <summary>

src/BootstrapBlazor.Server/Dockerfile

@@ -0,0 +1,19 @@
+#Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
+#For more information, please see https://aka.ms/containercompat
+
+FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
+WORKDIR /app
+EXPOSE 80
+
+FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
+WORKDIR /
+COPY . .
+
+WORKDIR "src/BootstrapBlazor.Server"
+FROM build AS publish
+RUN dotnet publish -c Release -o /app
+
+FROM base AS final
+WORKDIR /app
+COPY --from=publish /app .
+ENTRYPOINT ["dotnet", "BootstrapBlazor.Server.dll"]

src/BootstrapBlazor.Server/Extensions/CultureStorageExtensions.cs

@@ -1,29 +0,0 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-// Website: https://www.blazor.zone or https://argozhang.github.io/
-
-using Microsoft.Extensions.DependencyInjection.Extensions;
-
-namespace Microsoft.Extensions.DependencyInjection
-{
-    /// <summary>
-    /// 
-    /// </summary>
-    internal static class CultureStorageExtensions
-    {
-        /// <summary>
-        /// 添加本地化持久化策略服务
-        /// </summary>
-        /// <param name="services"></param>
-        public static IServiceCollection AddCultureStorage(this IServiceCollection services)
-        {
-            services.TryAddSingleton<ICultureStorage, DefaultCultureStorage>();
-            return services;
-        }
-
-        internal class DefaultCultureStorage : ICultureStorage
-        {
-            public CultureStorageMode Mode { get; set; }
-        }
-    }
-}

src/BootstrapBlazor.Server/Pages/_Host.cshtml

@@ -21,11 +21,14 @@
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
     <link rel="apple-touch-icon" href="favicon.png">
     <base href="~/">
-    <link rel="stylesheet" href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
+    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" asp-append-version="true">
+    <link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css" asp-append-version="true">
+    <link rel="stylesheet" href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" asp-append-version="true">
+    <link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" asp-append-version="true">
+    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css" asp-append-version="true">
+    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css" asp-append-version="true">
+    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/motronic.css" asp-append-version="true">
     <environment include="Staging,Production">
         <script>
             var _hmt = _hmt || [];
@@ -44,23 +47,24 @@
     </app>
 
     <div id="blazor-error-ui">
-        <environment include="Staging,Production">
-            An error has occurred. This application may no longer respond until reloaded.
-        </environment>
-        <environment include="Development">
-            An unhandled exception has occurred. See browser dev tools for details.
-        </environment>
+        <span>
+            <environment include="Staging,Production">
+                An error has occurred. This application may no longer respond until reloaded.
+            </environment>
+            <environment include="Development">
+                An unhandled exception has occurred. See browser dev tools for details.
+            </environment>
+        </span>
         <a href="" class="reload">Reload</a>
         <a class="dismiss"><i class="fa fa-times"></i></a>
     </div>
-
-    <script src="_framework/blazor.server.js"></script>
-    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
-    <script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js"></script>
-    <script src="_content/BootstrapBlazor.TableExport/js/export.min.js"></script>
-    <script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"></script>
-    <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
-    <script src="_content/BootstrapBlazor.Shared/lib/summernote/summernote-zh-CN.min.js"></script>
-    <script src="_content/BootstrapBlazor.Shared/js/common.js"></script>
+    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
+    <script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js" asp-append-version="true"></script>
+    <script src="_content/BootstrapBlazor.TableExport/js/export.min.js" asp-append-version="true"></script>
+    <script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js" asp-append-version="true"></script>
+    <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js" asp-append-version="true"></script>
+    <script src="_content/BootstrapBlazor.Shared/lib/summernote/summernote-zh-CN.min.js" asp-append-version="true"></script>
+    <script src="_content/BootstrapBlazor.Shared/js/common.js" asp-append-version="true"></script>
+    <script src="_framework/blazor.server.js" asp-append-version="true"></script>
 </body>
 </html>

src/BootstrapBlazor.Server/Properties/launchSettings.json

@@ -1,4 +1,4 @@
-{
+{
   "iisSettings": {
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
@@ -29,4 +29,4 @@
       "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}"
     }
   }
-}
+}

src/BootstrapBlazor.Server/Startup.cs

@@ -11,7 +11,10 @@ using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
 using Microsoft.Extensions.Options;
 using System;
+using System.Collections.Generic;
+using System.Linq;
 using System.Reflection;
+using System.Text;
 
 namespace BootstrapBlazor.Server
 {
@@ -49,13 +52,14 @@ namespace BootstrapBlazor.Server
         // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
         public void ConfigureServices(IServiceCollection services)
         {
+            Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);
+
             services.AddCors();
             services.AddResponseCompression();
 
             services.AddControllers();
             services.AddRazorPages();
             services.AddServerSideBlazor();
-            services.AddCultureStorage();
 
             services.AddBlazorBackgroundTask();
 
@@ -64,11 +68,17 @@ namespace BootstrapBlazor.Server
             {
                 // 统一设置 Toast 组件自动消失时间
                 options.ToastDelay = 4000;
-                options.Themes.Add(new System.Collections.Generic.KeyValuePair<string, string>("Ant Design (完善中)", "_content/BootstrapBlazor.Shared/css/ant.css"));
+                options.Themes.AddRange(Configuration.GetSection("Themes")
+                    .GetChildren()
+                    .Select(c => new KeyValuePair<string, string>(c.Key, c.Value)));
             }, options =>
             {
                 // 附加自己的 json 多语言文化资源文件 如 zh-TW.json
-                options.AdditionalJsonAssemblies = new Assembly[] { typeof(BootstrapBlazor.Shared.App).Assembly };
+                options.AdditionalJsonAssemblies = new Assembly[]
+                {
+                    typeof(BootstrapBlazor.Shared.App).Assembly,
+                    typeof(BootstrapBlazor.Components.Chart).Assembly
+                };
             });
 
             // 增加多语言支持配置信息
@@ -151,6 +161,7 @@ namespace BootstrapBlazor.Server
             app.UseRouting();
             app.UseCors(builder => builder.WithOrigins(Configuration["AllowOrigins"].Split(',', StringSplitOptions.RemoveEmptyEntries)).AllowAnyHeader().AllowAnyMethod().AllowCredentials());
 
+            app.UseBootstrapBlazor();
             app.UseEndpoints(endpoints =>
             {
                 endpoints.MapDefaultControllerRoute();

src/BootstrapBlazor.Server/appsettings.Development.json

@@ -7,6 +7,7 @@
       "Microsoft.Hosting.Lifetime": "Information"
     }
   },
+  "AllowOrigins": "http://localhost:5000",
   "WebsiteOptions": {
     "ServerUrl": "http://localhost:50853",
     "WasmUrl": "http://localhost:50855"

src/BootstrapBlazor.Server/appsettings.json

@@ -15,7 +15,7 @@
     "ToastDelay": 4000,
     "MessageDelay": 4000,
     "SwalDelay": 4000,
-    "FallbackCultureName": "en-US",
+    "FallbackCulture": "en",
     "SupportedCultures": [
       "zh-CN",
       "en-US"
@@ -25,6 +25,13 @@
     "ServerUrl": "https://www.blazor.zone",
     "AdminUrl": "https://admin.blazor.zone",
     "ImageLibUrl": "https://imgs.blazor.zone",
-    "WasmUrl": "https://wasm.blazor.zone"
+    "WasmUrl": "https://wasm.blazor.zone",
+    "TotalCount": 90
+  },
+  "Themes": {
+    "Motronic (已集成)": "_content/BootstrapBlazor/css/motronic.min.css",
+    "Ant Design (完善中)": "_content/BootstrapBlazor.Shared/css/ant.css",
+    "LayUI (完善中)": "_content/BootstrapBlazor.Shared/css/layui.css",
+    "Bluma (完善中)": "_content/BootstrapBlazor.Shared/css/bluma.css"
   }
 }

src/BootstrapBlazor.Shared/App.razor

@@ -8,3 +8,4 @@
         </LayoutView>
     </NotFound>
 </Router>
+<Title></Title>

src/BootstrapBlazor.Shared/App.razor.cs

@@ -3,7 +3,11 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 using Microsoft.JSInterop;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
 
 namespace BootstrapBlazor.Shared
 {
@@ -12,23 +16,25 @@ namespace BootstrapBlazor.Shared
     /// </summary>
     public sealed partial class App
     {
-        /// <summary>
-        /// 
-        /// </summary>
         [Inject]
+        [NotNull]
         private IJSRuntime? JSRuntime { get; set; }
 
+        [Inject]
+        [NotNull]
+        private IStringLocalizer<App>? Localizer { get; set; }
+
         /// <summary>
         /// 
         /// </summary>
         /// <param name="firstRender"></param>
-        protected override void OnAfterRender(bool firstRender)
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            base.OnAfterRender(firstRender);
+            await base.OnAfterRenderAsync(firstRender);
 
-            if (firstRender && JSRuntime != null)
+            if (firstRender)
             {
-                JSRuntime.InvokeVoidAsync("$.loading");
+                await JSRuntime.InvokeVoidAsync("$.loading", OperatingSystem.IsBrowser(), Localizer["ErrorMessage"].Value, Localizer["Reload"].Value);
             }
         }
     }

src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj

@@ -1,7 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
     <IsPackable>true</IsPackable>
     <Version>5.0.0</Version>
   </PropertyGroup>
@@ -18,10 +17,9 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="BootstrapBlazor.Chart" Version="5.0.10" />
-    <PackageReference Include="BootstrapBlazor.Markdown" Version="5.0.10" />
-    <PackageReference Include="BootstrapBlazor.TableExport" Version="5.0.10" />
-    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+    <PackageReference Include="BootstrapBlazor.Chart" Version="5.*" />
+    <PackageReference Include="BootstrapBlazor.Markdown" Version="5.*" />
+    <PackageReference Include="BootstrapBlazor.TableExport" Version="5.*" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Shared/Extensions/ExampleExtensions.cs

@@ -34,8 +34,6 @@ namespace Microsoft.Extensions.DependencyInjection
     {
         private HttpClient Client { get; set; }
 
-        private bool IsWebAssembly { get; set; }
-
         private string ServerUrl { get; set; }
 
         /// <summary>
@@ -43,15 +41,13 @@ namespace Microsoft.Extensions.DependencyInjection
         /// </summary>
         /// <param name="client"></param>
         /// <param name="options"></param>
-        /// <param name="storage"></param>
-        public ExampleService(HttpClient client, IOptions<WebsiteOptions> options, ICultureStorage storage)
+        public ExampleService(HttpClient client, IOptions<WebsiteOptions> options)
         {
             Client = client;
             Client.Timeout = TimeSpan.FromSeconds(5);
             Client.BaseAddress = new Uri(options.Value.RepositoryUrl);
 
             ServerUrl = options.Value.ServerUrl;
-            IsWebAssembly = storage.Mode == CultureStorageMode.LocalStorage;
         }
 
         /// <summary>
@@ -63,7 +59,7 @@ namespace Microsoft.Extensions.DependencyInjection
             var content = "";
             try
             {
-                if (IsWebAssembly)
+                if (OperatingSystem.IsBrowser())
                 {
                     Client.BaseAddress = new Uri($"{ServerUrl}/api/");
                     content = await Client.GetStringAsync($"Code?fileName={CodeFile}");
@@ -73,7 +69,8 @@ namespace Microsoft.Extensions.DependencyInjection
                     content = await Client.GetStringAsync(CodeFile);
                 }
             }
-            catch (HttpRequestException) { content = "无"; }
+            catch (HttpRequestException) { content = "网络错误"; }
+            catch (TaskCanceledException) { }
             catch (Exception) { }
             return content;
         }

src/BootstrapBlazor.Shared/Extensions/TableDemoDataServiceCollectionExtensions.cs

@@ -3,10 +3,10 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using BootstrapBlazor.Components;
-using BootstrapBlazor.Shared.Pages;
 using BootstrapBlazor.Shared.Pages.Components;
-using Microsoft.Extensions.DependencyInjection.Extensions;
+using Microsoft.Extensions.Localization;
 using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
 using System.Linq;
 using System.Threading.Tasks;
 
@@ -34,8 +34,16 @@ namespace Microsoft.Extensions.DependencyInjection
     /// </summary>
     internal class TableDemoDataService<TModel> : DataServiceBase<TModel> where TModel : class, new()
     {
+        [NotNull]
         private List<TModel>? Items { get; set; }
 
+        private IStringLocalizer<TModel> Localizer { get; set; }
+
+        public TableDemoDataService(IStringLocalizer<TModel> localizer)
+        {
+            Localizer = localizer;
+        }
+
         /// <summary>
         /// 查询操作方法
         /// </summary>
@@ -44,7 +52,10 @@ namespace Microsoft.Extensions.DependencyInjection
         public override Task<QueryData<TModel>> QueryAsync(QueryPageOptions options)
         {
             // 此处代码实战中不可用，仅仅为演示而写
-            if (Items == null || Items.Count == 0) Items = TablesBase.GenerateItems().Cast<TModel>().ToList();
+            if (Items == null || Items.Count == 0)
+            {
+                Items = Foo.GenerateFoo((IStringLocalizer<Foo>)Localizer).Cast<TModel>().ToList();
+            }
 
             var total = Items.Count;
 
@@ -59,25 +70,21 @@ namespace Microsoft.Extensions.DependencyInjection
         /// 
         /// </summary>
         /// <param name="model"></param>
+        /// <param name="changedType"></param>
         /// <returns></returns>
-        public override Task<bool> SaveAsync(TModel model)
+        public override Task<bool> SaveAsync(TModel model, ItemChangedType changedType)
         {
             var ret = false;
             if (model is Foo foo)
             {
-                var item = Items?.FirstOrDefault(item =>
+                if (changedType == ItemChangedType.Add)
                 {
-                    var f = item as Foo;
-                    return f?.Id == foo.Id;
-                });
-                if (item == null)
-                {
-                    var id = Items!.Count + 1;
+                    var id = Items.Count + 1;
                     while (Items.FirstOrDefault(item => (item as Foo)!.Id == id) != null)
                     {
                         id++;
                     }
-                    item = new Foo()
+                    var item = new Foo()
                     {
                         Id = id,
                         Name = foo.Name,
@@ -88,10 +95,15 @@ namespace Microsoft.Extensions.DependencyInjection
                         Education = foo.Education,
                         Hobby = foo.Hobby
                     } as TModel;
-                    Items?.Add(item!);
+                    Items.Add(item!);
                 }
                 else
                 {
+                    var item = Items.First(item =>
+                    {
+                        var f = item as Foo;
+                        return f?.Id == foo.Id;
+                    });
                     var f = item as Foo;
                     f!.Name = foo.Name;
                     f!.Address = foo.Address;
@@ -108,7 +120,11 @@ namespace Microsoft.Extensions.DependencyInjection
 
         public override Task<bool> DeleteAsync(IEnumerable<TModel> models)
         {
-            foreach (var model in models) Items?.Remove(model);
+            foreach (var model in models)
+            {
+                Items?.Remove(model);
+            }
+
             return base.DeleteAsync(models);
         }
     }

src/BootstrapBlazor.Shared/Extensions/WebsiteOptions.cs

@@ -54,6 +54,11 @@ namespace BootstrapBlazor.Shared
         /// </summary>
         public string RepositoryUrl { get; set; } = "https://gitee.com/LongbowEnterprise/BootstrapBlazor/raw/dev/src/BootstrapBlazor.Shared/Pages/Samples/";
 
+        /// <summary>
+        /// 
+        /// </summary>
+        public string WikiUrl { get; set; } = "https://gitee.com/LongbowEnterprise/BootstrapBlazor/wikis/%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97?sort_id=4062034";
+
         /// <summary>
         /// 获得 QQ 1 群链接地址
         /// </summary>
@@ -92,6 +97,11 @@ namespace BootstrapBlazor.Shared
         /// </summary>
         public string CurrentTheme { get; set; } = "";
 
+        /// <summary>
+        /// 获得/设置 组件总数
+        /// </summary>
+        public int TotalCount { get; set; }
+
         /// <summary>
         /// 构造函数
         /// </summary>

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

@@ -1,103 +0,0 @@
-{
-  "BootstrapBlazor.Shared.Pages.Components.Block": {
-    "Title": "",
-    "SubTitle": "Demo"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.AttributeTable": {
-    "Title": "Attributes"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.MethodTable": {
-    "Title": "Methods"
-  },
-  "BootstrapBlazor.Shared.Common.AttributeItem": {
-    "Name": "Parameter",
-    "Description": "Description",
-    "Type": "Type",
-    "ValueList": "ValueList",
-    "DefaultValue": "DefaultValue"
-  },
-  "BootstrapBlazor.Shared.Common.EventItem": {
-    "Name": "Parameter",
-    "Description": "Description",
-    "Type": "Type"
-  },
-  "BootstrapBlazor.Shared.Common.MethodItem": {
-    "Title": "Methods",
-    "Name": "Parameter",
-    "Description": "Description",
-    "Type": "Type",
-    "Parameters": "Parameters",
-    "ReturnValue": "ReturnValue"
-  },
-  "BootstrapBlazor.Shared.Shared.ComponentLayout": {
-    "Title": "Enterprise-level component library based on Bootstrap and Blazor",
-    "Example": "Example",
-    "Video": "Video"
-  },
-  "BootstrapBlazor.Shared.Pages.Alerts": {
-    "Title": "Alert",
-    "SubTitle": "Displays important alert messages.",
-    "BaseUsageText": "Basic usage",
-    "IntroText1": "Alert components are non-overlay elements in the page that does not disappear automatically.",
-    "AlertPrimaryText": "A simple primary alert—check it out!",
-    "AlertSecondaryText": "A simple secondary alert—check it out!",
-    "AlertSuccessText": "A simple success alert—check it out!",
-    "AlertDangerText": "A simple danger alert—check it out!",
-    "AlertWarningText": "A simple warning alert—check it out!",
-    "AlertInfoText": "A simple info alert—check it out!",
-    "AlertDarkText": "A simple dark alert—check it out!",
-    "CloseButtonUsageText": "Close button",
-    "IntroText2": "Customize the close button as texts or other symbols.",
-    "WithIconUsageText": "With Icon",
-    "IntroText3": "Displaying an icon improves readability.",
-    "ShowBarUsageText": "With Bar",
-    "IntroText4": "Show <code>Tip</code>"
-  },
-  "BootstrapBlazor.Shared.Pages.QRCodes": {
-    "Title": "QRCode",
-    "SubTitle": "Generate QR code",
-    "BaseUsageText": "Basic usage",
-    "IntroText1": "Click the Generate button to generate a <code>QRCode</code>",
-    "SuccessText": "QR code generated successfully",
-    "CallbackDescription": "Call back after QR code generation"
-  },
-  "BootstrapBlazor.Shared.Pages.Anchors": {
-    "Title": "Anchor",
-    "SubTitle": "Hyperlinks to scroll on one page.",
-    "BaseUsageText": "Basic usage",
-    "IntroText1": "For displaying anchor hyperlinks on page and jumping between them.",
-    "IntroText2": "Click <code>Anchor</code> item try it",
-    "ContentText1": "<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p><p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p><p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.Foo": {
-    "Name": "Name",
-    "DateTime": "DateTime",
-    "Address": "Address",
-    "Count": "Count",
-    "Complete": "Complete",
-    "Education": "Education",
-    "Hobby": "Hobby",
-    "Name.Required": "{0} is required.",
-    "Address.Required": "{0} is required.",
-    "Education.Required": "{0} is required.",
-    "Hobby.Required": "{0} is required.",
-    "Name.PlaceHolder": "required",
-    "Hobbys": "Swimming,Climb,Shoot,Chess",
-    "Foo.Name": "Zhangsan {0}",
-    "Foo.Address": "Lane {0} of Jinshajiang Road, Putuo District, Shanghai",
-    "Foo.Address2": "Earth, China, Lane {0} of Jinshajiang Road, Putuo District, Shanghai. Here is an example of super long cell",
-    "Foo.BindValue": "BindValue"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.EnumEducation": {
-    "PlaceHolder": "Click to select ...",
-    "Primary": "Primary",
-    "Middel": "Middel"
-  },
-  "BootstrapBlazor.Shared.Pages.Inputs": {
-    "PlaceHolder": "please input ..."
-  },
-  "BootstrapBlazor.Shared.Pages.Components.ThemeChooser": {
-    "Title": "Click to choose theme",
-    "HeaderText": "Themes"
-  }
-}

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

@@ -1,103 +0,0 @@
-{
-  "BootstrapBlazor.Shared.Pages.Components.Block": {
-    "Title": "未设置",
-    "SubTitle": "示例"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.AttributeTable": {
-    "Title": "Attributes 属性"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.MethodTable": {
-    "Title": "Methods 方法"
-  },
-  "BootstrapBlazor.Shared.Common.AttributeItem": {
-    "Name": "参数",
-    "Description": "说明",
-    "Type": "类型",
-    "ValueList": "可选值",
-    "DefaultValue": "默认值"
-  },
-  "BootstrapBlazor.Shared.Common.EventItem": {
-    "Name": "参数",
-    "Description": "说明",
-    "Type": "类型"
-  },
-  "BootstrapBlazor.Shared.Common.MethodItem": {
-    "Title": "Methods 方法",
-    "Name": "参数",
-    "Description": "说明",
-    "Type": "类型",
-    "Parameters": "参数",
-    "ReturnValue": "返回值"
-  },
-  "BootstrapBlazor.Shared.Shared.ComponentLayout": {
-    "Title": "基于 Bootstrap 和 Blazor 的企业级组件库",
-    "Example": "示例",
-    "Video": "相关视频"
-  },
-  "BootstrapBlazor.Shared.Pages.Alerts": {
-    "Title": "Alert 警告",
-    "SubTitle": "用于页面中展示重要的提示信息。",
-    "BaseUsageText": "基本用法",
-    "IntroText1": "页面中的非浮层元素，不会自动消失。",
-    "AlertPrimaryText": "主要的警告框",
-    "AlertSecondaryText": "次要的警告框",
-    "AlertSuccessText": "成功的警告框",
-    "AlertDangerText": "危险的警告框",
-    "AlertWarningText": "警告的警告框",
-    "AlertInfoText": "信息的警告框",
-    "AlertDarkText": "黑暗的警告框",
-    "CloseButtonUsageText": "关闭按钮",
-    "IntroText2": "提供关闭按钮的警告框",
-    "WithIconUsageText": "带 Icon",
-    "IntroText3": "表示某种状态时提升可读性。",
-    "ShowBarUsageText": "显示左侧 Bar",
-    "IntroText4": "作为 <code>Tip</code> 使用"
-  },
-  "BootstrapBlazor.Shared.Pages.QRCodes": {
-    "Title": "QRCode 二维码",
-    "SubTitle": "用于二维码生成",
-    "BaseUsageText": "基本用法",
-    "IntroText1": "点击生成按钮，生成特定的 <code>QRCode</code>",
-    "SuccessText": "二维码生成成功",
-    "CallbackDescription": "二维码生成后回调委托"
-  },
-  "BootstrapBlazor.Shared.Pages.Anchors": {
-    "Title": "Anchor 锚点",
-    "SubTitle": "用于跳转到页面指定位置",
-    "BaseUsageText": "基本用法",
-    "IntroText1": "需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转",
-    "IntroText2": "点击下面 <code>Anchor</code> 项目，页面滚动到相对应的章节",
-    "ContentText1": "<p>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</p><p>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</p><p>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</p><p>简化流程：设计简洁直观的操作流程；</p><p>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</p><p>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</p>"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.Foo": {
-    "Name": "姓名",
-    "DateTime": "日期",
-    "Address": "地址",
-    "Count": "数量",
-    "Complete": "是/否",
-    "Education": "学历",
-    "Hobby": "爱好",
-    "Name.Required": "{0}是必填项",
-    "Address.Required": "{0}是必填项",
-    "Education.Required": "{0}是必选项",
-    "Hobby.Required": "请选择一种{0}",
-    "Name.PlaceHolder": "不可为空",
-    "Hobbys": "游泳,登山,打球,下棋",
-    "Foo.Name": "张三 {0}",
-    "Foo.Address": "上海市普陀区金沙江路 {0} 弄",
-    "Foo.Address2": "地球、中国、上海市普陀区金沙江路 {0} 弄 这里是超长单元格示例",
-    "Foo.BindValue": "绑定值"
-  },
-  "BootstrapBlazor.Shared.Pages.Components.EnumEducation": {
-    "PlaceHolder": "请选择 ...",
-    "Primary": "小学",
-    "Middel": "中学"
-  },
-  "BootstrapBlazor.Shared.Pages.Inputs": {
-    "PlaceHolder": "请输入 ..."
-  },
-  "BootstrapBlazor.Shared.Pages.Components.ThemeChooser": {
-    "Title": "点击切换主题",
-    "HeaderText": "请选择主题"
-  }
-}

src/BootstrapBlazor.Shared/Pages/Components/Block.razor

@@ -1,6 +1,6 @@
 @inherits BootstrapComponentBase
 
-<h4>@Title</h4>
+<AnchorLink Text="@Title" Id="@Name" />
 
 <p>@(new MarkupString(Introduction))</p>
 

src/BootstrapBlazor.Shared/Pages/Components/Block.razor.cs

@@ -39,6 +39,12 @@ namespace BootstrapBlazor.Shared.Pages.Components
         [NotNull]
         private IStringLocalizer<Block>? Localizer { get; set; }
 
+        /// <summary>
+        /// 获得/设置 友好链接锚点名称
+        /// </summary>
+        [Parameter]
+        public string? Name { get; set; }
+
         /// <summary>
         /// OnInitialized 方法
         /// </summary>

src/BootstrapBlazor.Shared/Pages/Components/BlockLogger.razor

@@ -1,12 +1,23 @@
 <div class="@ClassName">
     @foreach (var m in Message.Reverse())
     {
-        <div class="log-item">@m</div>
+        <div class="log-item">
+            @if (IsHtml)
+            {
+                @((MarkupString)m)
+            }
+            else
+            {
+                @m
+            }
+        </div>
     }
 </div>
 
 @code {
-    protected System.Collections.Concurrent.ConcurrentQueue<string> Message { get; set; } = new System.Collections.Concurrent.ConcurrentQueue<string>();
+    protected System.Collections.Concurrent.ConcurrentQueue<string> Message { get; set; } = new();
+
+    private bool IsHtml { get; set; }
 
     /// <summary>
     /// 获得 按钮样式集合
@@ -25,8 +36,9 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public IDictionary<string, object>? AdditionalAttributes { get; set; }
 
-    public void Log(string message)
+    public void Log(string message, bool isHtml = false)
     {
+        IsHtml = isHtml;
         Message.Enqueue($"{DateTimeOffset.Now}: {message}");
         Class = "";
         if (Message.Count > 3) Message.TryDequeue(out var s);

src/BootstrapBlazor.Shared/Pages/Components/ChartToast.cs

@@ -0,0 +1,82 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class ChartToast : ComponentBase, IDisposable
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Inject]
+        private ToastService? ToastService { get; set; }
+
+        [Inject]
+        private IJSRuntime? JSRuntime { get; set; }
+
+        private JSInterop<ChartToast>? Interope { get; set; }
+
+        /// <summary>
+        /// BuildRenderTree 方法
+        /// </summary>
+        /// <param name="builder"></param>
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenComponent<Toast>(0);
+            builder.CloseComponent();
+        }
+
+        /// <summary>
+        /// OnAfterRenderAsync 方法
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender && JSRuntime != null)
+            {
+                if (Interope == null) Interope = new JSInterop<ChartToast>(JSRuntime);
+                await Interope.InvokeVoidAsync(this, "", "_initChart", nameof(ShowToast));
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [JSInvokable]
+        public void ShowToast()
+        {
+            ToastService?.Show(new ToastOption() { Title = "友情提示", Content = "屏幕宽度过小，如果是手机请横屏观看" });
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="disposing"></param>
+        private void Dispose(bool disposing)
+        {
+            if (disposing) Interope?.Dispose();
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public void Dispose()
+        {
+            Dispose(true);
+            GC.SuppressFinalize(this);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/ComponentCard.razor.cs

@@ -4,6 +4,7 @@
 
 using BootstrapBlazor.Components;
 using Microsoft.AspNetCore.Components;
+using System;
 using System.Collections.Generic;
 
 namespace BootstrapBlazor.Shared.Pages.Components
@@ -15,8 +16,8 @@ namespace BootstrapBlazor.Shared.Pages.Components
     {
         private string ImageUrl => $"_content/BootstrapBlazor.Shared/images/{Image}";
 
-        private string? ClassString => CssBuilder.Default("form-group col-12 col-sm-6 col-md-4 col-lg-3")
-            .AddClass("d-none", !string.IsNullOrEmpty(SearchText) && !Text.Contains(SearchText, System.StringComparison.OrdinalIgnoreCase))
+        private string? ClassString => CssBuilder.Default("col-12 col-sm-6 col-md-4 col-lg-3")
+            .AddClass("d-none", IsHide)
             .Build();
 
         /// <summary>
@@ -56,5 +57,10 @@ namespace BootstrapBlazor.Shared.Pages.Components
             ComponentNames?.Add(Text);
             Parent?.Add(this);
         }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        internal bool IsHide => !string.IsNullOrEmpty(SearchText) && !Text.Contains(SearchText, StringComparison.OrdinalIgnoreCase);
     }
 }

src/BootstrapBlazor.Shared/Pages/Components/ComponentCategory.razor

@@ -1,22 +1,21 @@
-<div class="coms-cate">
+<div class="@ClassString">
     <h3>
         <span>@Text</span>
+        <RenderTemplate>
+            <Badge IsPill="true" Color="Color.Success">@CardCount</Badge>
+        </RenderTemplate>
     </h3>
 
-    <h4>@Desc</h4>
+    @if (!string.IsNullOrEmpty(Desc))
+    {
+        <h4>@Desc</h4>
+    }
 
-    <div class="form-inline coms-demo">
-        <div class="row flex-fill">
+    <div class="coms-demo">
+        <div class="row g-3">
             <CascadingValue Value="this" IsFixed="true">
                 @ChildContent
             </CascadingValue>
         </div>
     </div>
-
-    <RenderTemplate>
-        @if (Cards.Count > 0)
-        {
-            <Badge IsPill="true" Color="Color.Success">@Cards.Count</Badge>
-        }
-    </RenderTemplate>
 </div>

src/BootstrapBlazor.Shared/Pages/Components/ComponentCategory.razor.cs

@@ -2,8 +2,10 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
+using BootstrapBlazor.Components;
 using Microsoft.AspNetCore.Components;
 using System.Collections.Generic;
+using System.Linq;
 
 namespace BootstrapBlazor.Shared.Pages.Components
 {
@@ -30,8 +32,30 @@ namespace BootstrapBlazor.Shared.Pages.Components
         [Parameter]
         public string? Desc { get; set; }
 
-        private List<ComponentCard> Cards { get; set; } = new List<ComponentCard>();
+        private List<ComponentCard> Cards { get; } = new List<ComponentCard>();
 
         internal void Add(ComponentCard card) => Cards.Add(card);
+
+        private int CardCount => Cards.Where(c => !c.IsHide).Count();
+
+        private bool IsRendered { get; set; }
+
+        private string? ClassString => CssBuilder.Default("coms-cate")
+            .AddClass("d-none", IsRendered && CardCount == 0)
+            .Build();
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            base.OnAfterRender(firstRender);
+
+            if (firstRender)
+            {
+                IsRendered = true;
+            }
+        }
     }
 }

src/BootstrapBlazor.Shared/Pages/Components/CultureChooser.razor

@@ -1,10 +1,7 @@
 @inherits BootstrapComponentBase
-@inject IOptions<BootstrapBlazorOptions> BootstrapOptions
-@inject NavigationManager NavigationManager
-@inject ICultureStorage CultureStorage
 
 <div @attributes="@AdditionalAttributes" class="@ClassString">
-    <label>请选择语言：</label>
+    <label>@Label</label>
     <Select Value="@SelectedCulture" OnSelectedItemChanged="@SetCulture">
         <Options>
             @foreach (var kv in BootstrapOptions.Value.GetSupportedCultures())
@@ -14,55 +11,3 @@
         </Options>
     </Select>
 </div>
-
-@code{
-    private string? ClassString => CssBuilder.Default("culture-selector")
-        .AddClassFromAttributes(AdditionalAttributes)
-        .Build();
-
-    private string SelectedCulture { get; set; } = CultureInfo.CurrentUICulture.Name;
-
-    private async Task SetCulture(SelectedItem item)
-    {
-        if (CultureStorage.Mode == CultureStorageMode.Webapi)
-        {
-            // 使用 api 方式 适用于 Server-Side 模式
-            if (SelectedCulture != item.Value)
-            {
-                var culture = item.Value;
-                var uri = new Uri(NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
-                var query = $"?culture={Uri.EscapeDataString(culture)}&redirectUri={Uri.EscapeDataString(uri)}";
-
-                // use a path that matches your culture redirect controller from the previous steps
-                NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
-            }
-        }
-        else
-        {
-            var cultureName = item.Value;
-            if (cultureName != CultureInfo.CurrentCulture.Name)
-            {
-                await JSRuntime.InvokeVoidAsync(identifier: "$.blazorCulture.set", cultureName);
-                var culture = new CultureInfo(cultureName);
-                CultureInfo.CurrentCulture = culture;
-                CultureInfo.CurrentUICulture = culture;
-
-                NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
-            }
-        }
-    }
-
-    private string GetDisplayName(CultureInfo culture)
-    {
-        return CultureStorage.Mode switch
-        {
-            CultureStorageMode.Webapi => culture.NativeName,
-            _ => culture.Name switch
-            {
-                "zh-CN" => "中文（中国）",
-                "en-US" => "English (United States)",
-                _ => ""
-            }
-        };
-    }
-}

src/BootstrapBlazor.Shared/Pages/Components/CultureChooser.razor.cs

@@ -0,0 +1,102 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
+using Microsoft.JSInterop;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class CultureChooser
+    {
+        [Inject]
+        [NotNull]
+        private IOptions<BootstrapBlazorOptions>? BootstrapOptions { get; set; }
+
+        [Inject]
+        [NotNull]
+        private IStringLocalizer<CultureChooser>? Localizer { get; set; }
+
+        [Inject]
+        [NotNull]
+        private NavigationManager? NavigationManager { get; set; }
+
+        private string? ClassString => CssBuilder.Default("culture-selector")
+            .AddClassFromAttributes(AdditionalAttributes)
+            .Build();
+
+        private string SelectedCulture { get; set; } = CultureInfo.CurrentUICulture.Name;
+
+        [NotNull]
+        private string? Label { get; set; }
+
+        /// <summary>
+        /// OnInitialized 方法
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            Label ??= Localizer[nameof(Label)];
+        }
+
+        private async Task SetCulture(SelectedItem item)
+        {
+            if (OperatingSystem.IsBrowser())
+            {
+                var cultureName = item.Value;
+                if (cultureName != CultureInfo.CurrentCulture.Name)
+                {
+                    await JSRuntime.InvokeVoidAsync(identifier: "$.blazorCulture.set", cultureName);
+                    var culture = new CultureInfo(cultureName);
+                    CultureInfo.CurrentCulture = culture;
+                    CultureInfo.CurrentUICulture = culture;
+
+                    NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
+                }
+            }
+            else
+            {
+                // 使用 api 方式 适用于 Server-Side 模式
+                if (SelectedCulture != item.Value)
+                {
+                    var culture = item.Value;
+                    var uri = new Uri(NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
+                    var query = $"?culture={Uri.EscapeDataString(culture)}&redirectUri={Uri.EscapeDataString(uri)}";
+
+                    // use a path that matches your culture redirect controller from the previous steps
+                    NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
+                }
+            }
+        }
+
+        private static string GetDisplayName(CultureInfo culture)
+        {
+            string? ret;
+            if (OperatingSystem.IsBrowser())
+            {
+                ret = culture.Name switch
+                {
+                    "zh-CN" => "中文（中国）",
+                    "en-US" => "English (United States)",
+                    _ => ""
+                };
+            }
+            else
+            {
+                ret = culture.NativeName;
+            }
+            return ret;
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/CustomerSelectDialog.razor

@@ -1,48 +1,8 @@
-<div class="form-inline">
-    <div class="row">
-        <div class="form-group col-12 col-sm-6">
-            <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
-        </div>
-        <div class="form-group col-12 col-sm-6">
-            <Select @ref="Select2" TValue="string" Items="@Items2" />
-        </div>
+<div class="row g-3">
+    <div class="col-12 col-sm-6">
+        <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
+    </div>
+    <div class="col-12 col-sm-6">
+        <Select TValue="string" Items="@Items2" />
     </div>
 </div>
-
-@code {
-    private Select<string>? Select2;
-    private readonly List<SelectedItem> Items2 = new List<SelectedItem>();
-    private readonly IEnumerable<SelectedItem> Items3 = new SelectedItem[]
-    {
-        new SelectedItem ("", "请选择 ..."),
-        new SelectedItem ("Beijing", "北京"),
-        new SelectedItem ("Shanghai", "上海")
-    };
-
-    /// <summary>
-    /// 级联绑定菜单
-    /// </summary>
-    /// <param name="item"></param>
-    private Task OnCascadeBindSelectClick(SelectedItem item)
-    {
-        Items2.Clear();
-        if (item.Value == "Beijing")
-        {
-            Items2.AddRange(new SelectedItem[]
-            {
-                    new SelectedItem("1","朝阳区"),
-                    new SelectedItem("2","海淀区"),
-            });
-        }
-        else if (item.Value == "Shanghai")
-        {
-            Items2.AddRange(new SelectedItem[]
-            {
-                    new SelectedItem("1","静安区"),
-                    new SelectedItem("2","黄浦区"),
-            });
-        }
-        Select2?.SetItems(Items2);
-        return Task.CompletedTask;
-    }
-}

src/BootstrapBlazor.Shared/Pages/Components/CustomerSelectDialog.razor.cs

@@ -0,0 +1,56 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class CustomerSelectDialog
+    {
+        private IEnumerable<SelectedItem>? Items2;
+        private readonly IEnumerable<SelectedItem> Items3 = new SelectedItem[]
+        {
+            new SelectedItem ("", "请选择 ..."),
+            new SelectedItem ("Beijing", "北京"),
+            new SelectedItem ("Shanghai", "上海")
+        };
+
+        /// <summary>
+        /// 级联绑定菜单
+        /// </summary>
+        /// <param name="item"></param>
+        private async Task OnCascadeBindSelectClick(SelectedItem item)
+        {
+            // 模拟异步通讯获取数据
+            await Task.Delay(100);
+            if (item.Value == "Beijing")
+            {
+                Items2 = new SelectedItem[]
+                {
+                    new SelectedItem("1","朝阳区"),
+                    new SelectedItem("2","海淀区"),
+                };
+            }
+            else if (item.Value == "Shanghai")
+            {
+                Items2 = new SelectedItem[]
+                {
+                    new SelectedItem("1","静安区"),
+                    new SelectedItem("2","黄浦区"),
+                };
+            }
+            else
+            {
+                Items2 = Enumerable.Empty<SelectedItem>();
+            }
+            StateHasChanged();
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/DataDialogComponent.razor

@@ -12,17 +12,10 @@
         <EditorForm TModel="Foo">
             <FieldItems>
                 <EditorItem @bind-Field="@context.Id" Editable="false" />
-                <EditorItem @bind-Field="@context.Complete">
-                    <EditTemplate Context="value">
-                        <div class="form-group col-12 col-sm-6">
-                            <Switch @bind-Value="@(((Foo)value).Complete)" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
-                        </div>
-                    </EditTemplate>
-                </EditorItem>
-                <EditorItem @bind-Field="@context.Hobby" Data="@Hobbys" />
+                <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
             </FieldItems>
         </EditorForm>
-        <div class="modal-footer table-modal-footer">
+        <div class="modal-footer table-modal-footer mt-3">
             <button type="button" class="btn btn-secondary" @onclick="@(e => OnClose?.Invoke())">
                 <i class="fa fa-times"></i>
                 <span>关闭</span>

src/BootstrapBlazor.Shared/Pages/Components/DialogBodyFoo.razor

@@ -0,0 +1 @@
+改变标题栏中下拉框此处会更改： @Value

src/BootstrapBlazor.Shared/Pages/Components/DialogBodyFoo.razor.cs

@@ -0,0 +1,35 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class DialogBodyFoo
+    {
+        private string? Value { get; set; }
+
+        private List<SelectedItem> Items { get; } = new(new[]
+        {
+            new SelectedItem("beijing", "北京"),
+            new SelectedItem("shanghai", "上海")
+        });
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public Task UpdateAsync(string val)
+        {
+            Value = Items.First(i => i.Value == val).Text;
+            StateHasChanged();
+            return Task.CompletedTask;
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/DialogDemo.razor

@@ -0,0 +1,16 @@
+<h3>无限弹窗示例</h3>
+
+<Tab>
+    <TabItem Text="用户管理">
+        <div>我是用户管理 @Value</div>
+        <Button Text="弹窗" OnClick="@OnClickButton" />
+    </TabItem>
+    <TabItem Text="菜单管理">
+        <div>我是菜单管理</div>
+        <Button Text="弹窗" OnClick="@OnClickButton" />
+    </TabItem>
+    <TabItem Text="角色管理">
+        <div>我是角色管理</div>
+        <Button Text="弹窗" OnClick="@OnClickButton" />
+    </TabItem>
+</Tab>

src/BootstrapBlazor.Shared/Pages/Components/DialogDemo.razor.cs

@@ -0,0 +1,44 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using Microsoft.AspNetCore.Components;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class DialogDemo
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [NotNull]
+        public string? Value { get; set; }
+
+        [Inject]
+        [NotNull]
+        private DialogService? DialogService { get; set; }
+
+        /// <summary>
+        /// OnInitialized 方法
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            Value = DateTime.Now.ToString();
+        }
+
+        private Task OnClickButton() => DialogService.Show(new DialogOption()
+        {
+            Title = $"弹窗 {Value}",
+            Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
+        });
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/DialogHeaderFoo.razor

@@ -0,0 +1,4 @@
+<h5 class="modal-title">自定义 Header</h5>
+<div class="d-flex flex-fill justify-content-end me-3">
+	<Select TValue="string" Items="Items" Value="Value" OnSelectedItemChanged="OnSelectedItemChanged" style="max-width: 120px;" />
+</div>

src/BootstrapBlazor.Shared/Pages/Components/DialogHeaderFoo.razor.cs

@@ -0,0 +1,57 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using Microsoft.AspNetCore.Components;
+using System;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class DialogHeaderFoo
+    {
+        [NotNull]
+        private IEnumerable<SelectedItem>? Items { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public string? Value { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public Func<string, Task>? OnValueChanged { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            Items = new[]
+            {
+                new SelectedItem("beijing", "北京"),
+                new SelectedItem("shanghai", "上海")
+            };
+        }
+
+        private async Task OnSelectedItemChanged(SelectedItem item)
+        {
+            Value = item.Value;
+            if (OnValueChanged != null)
+            {
+                await OnValueChanged(Value);
+            }
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/EventTable.razor

@@ -1,5 +1,7 @@
-<div class="table-attr">
-    <h4>事件 Events</h4>
+@inject IStringLocalizer<EventTable> Localizer
+
+<div class="table-attr">
+    <h4>@Localizer["Title"]</h4>
 
     <Table TItem="BootstrapBlazor.Shared.Common.EventItem" Items="Items">
         <TableColumns>

src/BootstrapBlazor.Shared/Pages/Components/Foo.cs

@@ -21,6 +21,7 @@ namespace BootstrapBlazor.Shared.Pages.Components
         /// <summary>
         ///
         /// </summary>
+        [Key]
         [Display(Name = "主键")]
         [AutoGenerateColumn(Ignore = true)]
         public int Id { get; set; }
@@ -101,7 +102,7 @@ namespace BootstrapBlazor.Shared.Pages.Components
         /// 
         /// </summary>
         /// <returns></returns>
-        public static List<Foo> GenerateFoo(IStringLocalizer<Foo> localizer) => Enumerable.Range(1, 80).Select(i => new Foo()
+        public static List<Foo> GenerateFoo(IStringLocalizer<Foo> localizer, int count = 80) => Enumerable.Range(1, count).Select(i => new Foo()
         {
             Id = i,
             Name = localizer["Foo.Name", $"{i:d4}"],
@@ -116,22 +117,43 @@ namespace BootstrapBlazor.Shared.Pages.Components
         /// 
         /// </summary>
         /// <returns></returns>
-        public static List<Foo> GenerateWrapFoo(IStringLocalizer<Foo> localizer) => Enumerable.Range(1, 4).Select(i => new Foo()
-        {
-            Id = i,
-            Name = localizer["Foo.Name", $"{i:d4}"],
-            DateTime = System.DateTime.Now.AddDays(i - 1),
-            Address = localizer["Foo.Address2", $"{random.Next(1000, 2000)}"],
-            Count = random.Next(1, 100),
-            Complete = random.Next(1, 100) > 50,
-            Education = random.Next(1, 100) > 50 ? EnumEducation.Primary : EnumEducation.Middel
-        }).ToList();
+        public static IEnumerable<SelectedItem> GenerateHobbys(IStringLocalizer<Foo> localizer) => localizer["Hobbys"].Value.Split(",").Select(i => new SelectedItem(i, i)).ToList();
+
 
         /// <summary>
-        /// 
+        /// 通过 Id 获取头像链接
+        /// </summary>
+        /// <param name="id"></param>
+        /// <returns></returns>
+        public static string GetAvatarUrl(int id) => $"_content/BootstrapBlazor.Shared/images/avatars/150-{Math.Max(1, id % 25)}.jpg";
+
+        /// <summary>
+        /// 通过 Count 获得颜色
+        /// </summary>
+        /// <param name="count"></param>
+        /// <returns></returns>
+        public static Color GetProgressColor(int count) => count switch
+        {
+            >= 0 and < 10 => Color.Secondary,
+            >= 10 and < 20 => Color.Danger,
+            >= 20 and < 40 => Color.Warning,
+            >= 40 and < 50 => Color.Info,
+            >= 50 and < 70 => Color.Primary,
+            _ => Color.Success
+        };
+
+        /// <summary>
+        /// 通过 Id 获取 Title
         /// </summary>
         /// <returns></returns>
-        public static IEnumerable<SelectedItem> GenerateHobbys(IStringLocalizer<Foo> localizer) => localizer["Hobbys"].Value.Split(",").Select(i => new SelectedItem(i, i)).ToList();
+        public static string GetTitle() => random.Next(1, 80) switch
+        {
+            >= 1 and < 10 => "Clerk",
+            >= 10 and < 50 => "Engineer",
+            >= 50 and < 60 => "Manager",
+            >= 60 and < 70 => "Chief",
+            _ => "General Manager"
+        };
     }
 
     /// <summary>

src/BootstrapBlazor.Shared/Pages/Components/InstallContent.razor

@@ -1,40 +1,44 @@
 @using Microsoft.Extensions.DependencyInjection
 @inject NugetVersionService VersionManager
+@inject IStringLocalizer<InstallContent> Localizer
 
 <h3>@Title</h3>
 
-<h4>组件引用</h4>
+<h4>@Localizer["H1"]</h4>
 
-<p>组件引用有多种方法，可以参阅 <a href="install">类库安装</a></p>
+<p>@((MarkupString)Localizer["P1"].Value)</p>
 
 <div class="code-label">.NET CLI</div>
 <Pre class="no-highlight">dotnet add package BootstrapBlazor --version @Version</Pre>
 
-<h5>CSS 文件</h5>
+<h5>@Localizer["H2"]</h5>
 
-<p>将 Bootstrap 的 CSS 文件以 <code>&lt;link&gt;</code> 标签的形式添加到 <code>@HostFile</code> 文件 <code>&lt;head&gt;</code> 标签中，并放置在所有其它样式表之前。</p>
-
-<Pre>&lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"&gt;</Pre>
+<p>@((MarkupString)Localizer["P2", HostFile].Value)</p>
 
 <Tips>
-    <p>如果是使用 <code>Blazozr App</code> 模板创建的工程请移除默认的 <code>Bootstrap</code> 样式链接 <code>&lt;link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /&gt;</code></p>
+    <p>@((MarkupString)Localizer["Tips"].Value)</p>
+</Tips>
+<Pre>&lt;link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;
+&lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"&gt;</Pre>
+
+<Tips>
+    <p>@((MarkupString)Localizer["Tips2"].Value)</p>
 </Tips>
 
-<h5>JS 文件</h5>
+<h5>@Localizer["H3"]</h5>
 
-<p>Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <code>&lt;script&gt;</code> 标签放到 <code>@HostFile</code> 文件尾部且在 <code>&lt;/body&gt;</code> 标签之前即可起作用。</p>
-<Pre>&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;
-</Pre>
+<p>@((MarkupString)Localizer["P3", HostFile].Value)</p>
+<Pre>&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;</Pre>
 
-<h4>添加命名空间到 <code>_Imports.razor</code> 文件</h4>
+<h4>@((MarkupString)Localizer["H4"].Value)</h4>
 
 <Pre>@@using BootstrapBlazor.Components</Pre>
 
-<h4>注册服务</h4>
+<h4>@Localizer["H5"]</h4>
 
 @ChildContent
 
-<h4>使用组件</h4>
+<h4>@Localizer["H6"]</h4>
 
-<p>在 <code>razor</code>组件中引用 <code>BootstrapBlazor</code> 组件</p>
-<Pre>&lt;Button Color="Color.Primary"&gt;主要按钮&lt;/Button&gt;</Pre>
+<p>@((MarkupString)Localizer["P4"].Value)</p>
+<Pre>@((MarkupString)Localizer["Pre3"].Value)</Pre>

src/BootstrapBlazor.Shared/Pages/Components/Pre.razor

@@ -8,7 +8,7 @@
         <pre @attributes="@AdditionalAttributes" class="@ClassName"><code>@ChildContent</code></pre>
         @if (CanCopy)
         {
-            <button type="button" class="btn-clipboard" data-toggle="tooltip" title="点击复制代码">Copy</button>
+            <button type="button" class="btn-clipboard" data-bs-toggle="tooltip" data-bs-placement="left" title="点击复制代码">Copy</button>
         }
     }
 </div>

src/BootstrapBlazor.Shared/Pages/Components/QQGroup.razor

@@ -1,16 +1,17 @@
 @inject IOptions<WebsiteOptions> WebsiteOption
+@inject IStringLocalizer<QQGroup> Localzier
 
 <div>
-    QQ群：BootstrapAdmin & Blazor
+    @Localzier["Group"]：BootstrapAdmin & Blazor
     <a class="mx-1" target="_blank" href="@WebsiteOption.Value.QQGroup1Link">
-        <span class="text-danger fa fa-qq">
-            <span class="ml-1"><b>795206915(满)</b></span>
+        <span class="text-success fa fa-qq">
+            <span class="ms-1"><b>795206915</b></span>
         </span>
     </a>
     <a class="mx-1" target="_blank" href="@WebsiteOption.Value.QQGroup2Link">
         <span class="text-success fa fa-qq">
-            <span class="ml-1"><b>675147445</b></span>
+            <span class="ms-1"><b>675147445</b></span>
         </span>
     </a>
-    欢迎加群讨论
+    @Localzier["Welcome"]
 </div>

src/BootstrapBlazor.Shared/Pages/Components/ResultDialogDemo2.razor

@@ -1,4 +1,4 @@
-<Table TItem="Foo" Items="@Items.Take(10)" ClickToSelect="true" IsMultipleSelect="true" @bind-SelectedRows="@SelectedRows">
+<Table TItem="Foo" ClickToSelect="true" IsMultipleSelect="true" @bind-SelectedRows="@SelectedRows" OnQueryAsync="@OnQueryAsync">
     <TableColumns>
         <TableColumn @bind-Field="@context.Id" />
         <TableColumn @bind-Field="@context.Name" />

src/BootstrapBlazor.Shared/Pages/Components/ResultDialogDemo2.razor.cs

@@ -18,10 +18,10 @@ namespace BootstrapBlazor.Shared.Pages.Components
     /// </summary>
     public partial class ResultDialogDemo2 : ComponentBase, IResultDialog
     {
-        private IEnumerable<Foo> SelectedRows { get; set; } = Array.Empty<Foo>();
+        private List<Foo> SelectedRows { get; set; } = new List<Foo>();
 
         [NotNull]
-        private IEnumerable<Foo>? Items { get; set; }
+        private List<Foo>? Items { get; set; }
 
         /// <summary>
         ///
@@ -37,7 +37,7 @@ namespace BootstrapBlazor.Shared.Pages.Components
         public EventCallback<IEnumerable<string>> EmailsChanged { get; set; }
 
         [CascadingParameter(Name = "BodyContext")]
-        private object? Count { get; set; }
+        private object? BodyContext { get; set; }
 
         [Inject]
         [NotNull]
@@ -50,12 +50,19 @@ namespace BootstrapBlazor.Shared.Pages.Components
         {
             base.OnInitialized();
 
-            Items = GenerateItems((int)(Count ?? 10));
-            Emails ??= Array.Empty<string>();
+            var context = BodyContext as FooContext;
+            Items = GenerateItems(context?.Count ?? 10);
+            Emails = context?.Emails?.Split(";") ?? Array.Empty<string>();
 
-            SelectedRows = Items.Where(i => Emails.Any(mail => mail == i.Email));
+            SelectedRows = Items.Where(i => Emails.Any(mail => mail == i.Email)).ToList();
         }
 
+        private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions option) => Task.FromResult(new QueryData<Foo>()
+        {
+            TotalCount = Items.Count(),
+            Items = Items
+        });
+
         /// <summary>
         /// 
         /// </summary>
@@ -93,7 +100,7 @@ namespace BootstrapBlazor.Shared.Pages.Components
         ///
         /// </summary>
         /// <returns></returns>
-        protected static List<Foo> GenerateItems(int startId) => new List<Foo>(Enumerable.Range(startId, 10).Select(i => new Foo()
+        private static List<Foo> GenerateItems(int startId) => new(Enumerable.Range(startId, 10).Select(i => new Foo()
         {
             Id = i,
             Name = $"张三 {i:d4}",
@@ -103,7 +110,23 @@ namespace BootstrapBlazor.Shared.Pages.Components
         /// <summary>
         /// 
         /// </summary>
-        public class Foo
+        public class FooContext
+        {
+            /// <summary>
+            /// 
+            /// </summary>
+            public int Count { get; set; }
+
+            /// <summary>
+            /// 
+            /// </summary>
+            public string? Emails { get; set; }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        private class Foo
         {
             /// <summary>
             ///

src/BootstrapBlazor.Shared/Pages/Components/State.razor

@@ -1,18 +1,18 @@
-@if (Count > 0)
+@if (IsNew)
 {
-    <Badge Color="@BootstrapBlazor.Components.Color.Info" IsPill="true">
-        @Count
+    <Badge Color="Color.Danger" IsPill="true">
+        NEW
     </Badge>
 }
-@if (IsNew)
-{
-    <span class="badge badge-danger">
-        <span>NEW</span>
-    </span>
-}
 @if (IsUpdate)
 {
-    <span class="badge badge-success">
-        <span>Upd</span>
-    </span>
+    <Badge Color="Color.Success" IsPill="true">
+        Upd
+    </Badge>
+}
+@if (Count > 0)
+{
+    <Badge Color="Color.Info" IsPill="true">
+        @Count
+    </Badge>
 }

src/BootstrapBlazor.Shared/Pages/Components/ThemeChooser.razor

@@ -1,7 +1,7 @@
 @inherits BootstrapComponentBase
 
 <div @ref="@ThemeElement" class="theme">
-    <div class="btn btn-theme" data-toggle="tooltip" title="@Title" data-placement="left">
+    <div class="btn btn-theme" data-bs-toggle="tooltip" title="@Title" data-bs-placement="left">
         <div class="theme-bar">
             <span class="theme-color bg-danger"></span>
             <span class="theme-color bg-success"></span>
@@ -10,6 +10,9 @@
             <span class="theme-color bg-info"></span>
             <span class="theme-color bg-warning"></span>
         </div>
+        <div class="pulse pulse-warning">
+            <span class="pulse-ring"></span>
+        </div>
     </div>
 
     <div class="theme-list">

src/BootstrapBlazor.Shared/Pages/Components/ThemeChooser.razor.cs

@@ -56,6 +56,7 @@ namespace BootstrapBlazor.Shared.Pages.Components
             HeaderText ??= Localizer[nameof(HeaderText)];
             Themes = BootstrapOptions.Value.Themes.Select(kv => new SelectedItem(kv.Value, kv.Key));
             ThemeList = Themes.Select(t => t.Value);
+            SiteOptions.Value.CurrentTheme = Themes.FirstOrDefault(i => i.Text == "Motronic (开发中)")?.Value ?? "";
         }
 
         /// <summary>

src/BootstrapBlazor.Shared/Pages/Components/Tips.razor

@@ -1,16 +1,12 @@
 @inherits BootstrapComponentBase
+@inject IStringLocalizer<Tips> Localizer
 
 <Alert AdditionalAttributes="@AdditionalAttributes" ShowBar="true" Color="@Color">
-    <h4><i class="@Icon"></i>@Title</h4>
+    <h4><i class="@Icon"></i>@Localizer["Title"]</h4>
     @ChildContent
 </Alert>
 
 @code {
-    /// <summary>
-    /// 获得/设置 显示文本
-    /// </summary>
-    [Parameter]
-    public string Title { get; set; } = "小技巧";
 
     /// <summary>
     /// 获得/设置 图标

src/BootstrapBlazor.Shared/Pages/Components/TreeDataFoo.cs

@@ -0,0 +1,60 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Components;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace BootstrapBlazor.Shared.Pages.Components
+{
+    class TreeDataFoo
+    {
+        public string? Code { get; set; }
+
+        public string? ParentCode { get; set; }
+
+        public string? Text { get; set; }
+
+        public string Icon { get; set; } = "fa fa-fa";
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        public static List<TreeItem> GetTreeItems()
+        {
+            var items = new List<TreeDataFoo>();
+
+            items.Add(new TreeDataFoo() { Text = "导航一", Code = "1010" });
+            items.Add(new TreeDataFoo() { Text = "导航二", Code = "1020" });
+            items.Add(new TreeDataFoo() { Text = "导航三", Code = "1030" });
+
+            items.Add(new TreeDataFoo() { Text = "子菜单一", Code = "1040", ParentCode = "1020" });
+            items.Add(new TreeDataFoo() { Text = "子菜单二", Code = "1050", ParentCode = "1020" });
+            items.Add(new TreeDataFoo() { Text = "子菜单三", Code = "1060", ParentCode = "1020" });
+
+            items.Add(new TreeDataFoo() { Text = "孙菜单一", Code = "1070", ParentCode = "1050" });
+            items.Add(new TreeDataFoo() { Text = "孙菜单二", Code = "1080", ParentCode = "1050" });
+            items.Add(new TreeDataFoo() { Text = "孙菜单三", Code = "1090", ParentCode = "1050" });
+
+            items.Add(new TreeDataFoo() { Text = "曾孙菜单一", Code = "1100", ParentCode = "1080" });
+            items.Add(new TreeDataFoo() { Text = "曾孙菜单二", Code = "1110", ParentCode = "1080" });
+            items.Add(new TreeDataFoo() { Text = "曾孙菜单三", Code = "1120", ParentCode = "1080" });
+
+            items.Add(new TreeDataFoo() { Text = "曾曾孙菜单一", Code = "1130", ParentCode = "1100" });
+            items.Add(new TreeDataFoo() { Text = "曾曾孙菜单二", Code = "1140", ParentCode = "1100" });
+            items.Add(new TreeDataFoo() { Text = "曾曾孙菜单三", Code = "1150", ParentCode = "1100" });
+
+            // 算法获取属性结构数据
+            return GetSubItems(null, items).ToList();
+        }
+
+        private static List<TreeItem> GetSubItems(string? parentCode, IEnumerable<TreeDataFoo> foos)
+        {
+            var subData = foos.Where(i => i.ParentCode == parentCode);
+
+            return subData.Select(i => new TreeItem() { Text = i.Text, Items = GetSubItems(i.Code, foos) }).ToList();
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Components/Video.razor

@@ -8,7 +8,7 @@
 }
 else
 {
-    <a class="fa fa-video-camera mb-3" href="@VideoUrl" target="_blank"><span class="ml-2">[传送门]</span></a>
+    <a class="fa fa-video-camera mb-3" href="@VideoUrl" target="_blank"><span class="ms-2">[传送门]</span></a>
 }
 
 @code {

src/BootstrapBlazor.Shared/Pages/Components/Widget.razor

@@ -1,4 +1,4 @@
-<DropdownWidget class="text-right flex-fill px-3">
+<DropdownWidget class="text-end flex-fill px-3">
     <DropdownWidgetItem Icon="fa fa-envelope-o" BadgeNumber="4">
         <HeaderTemplate>
             <span>您有 4 个未读消息</span>
@@ -10,7 +10,7 @@
                     <div style="width: 40px; height: 40px;">
                         <Avatar Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" IsCircle="true" Size="Size.Small" />
                     </div>
-                    <div class="ml-2">
+                    <div class="ms-2">
                         <div class="d-flex position-relative">
                             <h4>Argo Zhang</h4>
                             <small><i class="fa fa-clock-o"></i> @(4 + index) mins</small>
@@ -33,7 +33,7 @@
             {
                 <a class="dropdown-item d-flex align-items-center" href="#" @onclick:preventDefault>
                     <i class="fa fa-users text-primary"></i>
-                    <div class="ml-2">5 new members joined</div>
+                    <div class="ms-2">5 new members joined</div>
                 </a>
             }
         </BodyTemplate>

src/BootstrapBlazor.Shared/Pages/Coms.razor

@@ -1,9 +1,11 @@
 @page "/components"
+@inject IStringLocalizer<Coms> Localizer
 
-<div class="coms-search form-inline">
-    <div class="row flex-fill">
+<div class="coms-search">
+    <div class="row">
         <div class="col-12">
-            <Search IgnoreCase="true" IsLikeMatch="true" PlaceHolder="搜索想要的组件" Items="@ComponentItems" OnSearch="@OnSearch"></Search>
+            <Search PlaceHolder="@Localizer["Search"]" IsOnInputTrigger="true" IsAutoFocus="true"
+                    Items="@ComponentItems" IsLikeMatch="true" IgnoreCase="true" OnSearch="@OnSearch"></Search>
         </div>
     </div>
     <div class="coms-search-filter">
@@ -13,95 +15,97 @@
 <CascadingValue Value="ComponentItems" IsFixed="true">
     <CascadingValue Value="@SearchText">
 
-        <ComponentCategory Text="布局组件">
-            <ComponentCard Text="分割线 Divider" Image="Divider.svg" Url="dividers"></ComponentCard>
-            <ComponentCard Text="布局组件 Layout" Image="Layout.svg" Url="layouts"></ComponentCard>
-            <ComponentCard Text="页脚组件 Footer" Image="Footer.jpg" Url="footers"></ComponentCard>
-            <ComponentCard Text="滚动条 Scroll" Image="Scroll.png" Url="scrolls"></ComponentCard>
-            <ComponentCard Text="骨架屏 Skeleton" Image="Skeleton.png" Url="skeletons"></ComponentCard>
-            <ComponentCard Text="分割面板 Split" Image="Split.png" Url="splits"></ComponentCard>
+        <ComponentCategory Text="@Localizer["Text1"]">
+            <ComponentCard Text="@Localizer["DividerText"]" Image="Divider.svg" Url="dividers"></ComponentCard>
+            <ComponentCard Text="@Localizer["LayoutText"]" Image="Layout.svg" Url="layouts"></ComponentCard>
+            <ComponentCard Text="@Localizer["FooterText"]" Image="Footer.jpg" Url="footers"></ComponentCard>
+            <ComponentCard Text="@Localizer["ScorllText"]" Image="Scroll.png" Url="scrolls"></ComponentCard>
+            <ComponentCard Text="@Localizer["SkeletonText"]" Image="Skeleton.png" Url="skeletons"></ComponentCard>
+            <ComponentCard Text="@Localizer["SplitText"]" Image="Split.png" Url="splits"></ComponentCard>
         </ComponentCategory>
 
-        <ComponentCategory Text="导航组件">
-            <ComponentCard Text="锚点 Anchor" Image="Anchor.png" Url="anchors"></ComponentCard>
-            <ComponentCard Text="面包屑 Breadcrumb" Image="Breadcrumb.png" Url="breadcrumbs"></ComponentCard>
-            <ComponentCard Text="菜单 Menu" Image="Menu.svg" Url="menus"></ComponentCard>
-            <ComponentCard Text="导航栏 Nav" Image="Space.svg" Url="navs"></ComponentCard>
-            <ComponentCard Text="下拉菜单 Dropdown" Image="Dropdown.svg" Url="dropdowns"></ComponentCard>
-            <ComponentCard Text="跳转组件 GoTop" Image="GoTop.png" Url="gotops"></ComponentCard>
-            <ComponentCard Text="分页 Pagination" Image="Pagination.svg" Url="paginations"></ComponentCard>
-            <ComponentCard Text="步骤条 Steps" Image="Steps.svg" Url="stepss"></ComponentCard>
-            <ComponentCard Text="标签页 Tab" Image="Tabs.svg" Url="tabs"></ComponentCard>
+        <ComponentCategory Text="@Localizer["Text2"]">
+            <ComponentCard Text="@Localizer["AnchorText"]" Image="Anchor.png" Url="anchors"></ComponentCard>
+            <ComponentCard Text="@Localizer["BreadcrumbText"]" Image="Breadcrumb.png" Url="breadcrumbs"></ComponentCard>
+            <ComponentCard Text="@Localizer["MenuText"]" Image="Menu.svg" Url="menus"></ComponentCard>
+            <ComponentCard Text="@Localizer["NavText"]" Image="Space.svg" Url="navs"></ComponentCard>
+            <ComponentCard Text="@Localizer["DropdownText"]" Image="Dropdown.svg" Url="dropdowns"></ComponentCard>
+            <ComponentCard Text="@Localizer["GoTopText"]" Image="GoTop.png" Url="gotops"></ComponentCard>
+            <ComponentCard Text="@Localizer["PaginationText"]" Image="Pagination.svg" Url="paginations"></ComponentCard>
+            <ComponentCard Text="@Localizer["StepsText"]" Image="Steps.svg" Url="stepss"></ComponentCard>
+            <ComponentCard Text="@Localizer["TabText"]" Image="Tabs.svg" Url="tabs"></ComponentCard>
         </ComponentCategory>
 
-        <ComponentCategory Text="表单组件">
-            <ComponentCard Text="表单组件 EditorForm" Image="EditorForm.png" Url="editorforms"></ComponentCard>
-            <ComponentCard Text="表单组件 ValidateForm" Image="ValidateForm.png" Url="validateforms"></ComponentCard>
-            <ComponentCard Text="自动完成 AutoComplete" Image="AutoComplete.svg" Url="autocompletes"></ComponentCard>
-            <ComponentCard Text="按钮 Button" Image="Button.svg" Url="buttons"></ComponentCard>
-            <ComponentCard Text="级联选择 Button" Image="Cascader.svg" Url="cascaders"></ComponentCard>
-            <ComponentCard Text="多选框 Checkbox" Image="CheckBox.svg" Url="checkboxs"></ComponentCard>
-            <ComponentCard Text="多选框组 CheckboxList" Image="CheckboxList.png" Url="checkboxlists"></ComponentCard>
-            <ComponentCard Text="时间框 DateTimePicker" Image="DatePicker.svg" Url="datetimepickers"></ComponentCard>
-            <ComponentCard Text="时间范围框 DateTimeRange" Image="DateTimeRange.png" Url="datetimeranges"></ComponentCard>
-            <ComponentCard Text="富文本框 Editor" Image="Editor.png" Url="editors"></ComponentCard>
-            <ComponentCard Text="输入框 Input" Image="Input.svg" Url="inputs"></ComponentCard>
-            <ComponentCard Text="数字框 InputNumber" Image="InputNumber.png" Url="inputnumbers"></ComponentCard>
-            <ComponentCard Text="富文本框 Markdown" Image="Markdown.png" Url="markdowns"></ComponentCard>
-            <ComponentCard Text="单选框 Radio" Image="Radio.svg" Url="radios"></ComponentCard>
-            <ComponentCard Text="评分 Rate" Image="Rate.jpg" Url="rates"></ComponentCard>
-            <ComponentCard Text="选择器 Select" Image="Select.svg" Url="selects"></ComponentCard>
-            <ComponentCard Text="多项选择器 MultiSelect" Image="MultiSelect.png" Url="multiselects"></ComponentCard>
-            <ComponentCard Text="滑块 Slider" Image="Slider.svg" Url="sliders"></ComponentCard>
-            <ComponentCard Text="开关 Switch" Image="Switch.svg" Url="switchs"></ComponentCard>
-            <ComponentCard Text="多行文本框 Textarea" Image="Textarea.png" Url="textareas"></ComponentCard>
-            <ComponentCard Text="开关 Toggle" Image="Toggle.png" Url="toggles"></ComponentCard>
-            <ComponentCard Text="穿梭框 Transfer" Image="Transfer.svg" Url="transfers"></ComponentCard>
-            <ComponentCard Text="上传组件 Upload" Image="Upload.svg" Url="uploads"></ComponentCard>
+        <ComponentCategory Text="@Localizer["Text3"]">
+            <ComponentCard Text="@Localizer["EditorFormText"]" Image="EditorForm.png" Url="editorforms"></ComponentCard>
+            <ComponentCard Text="@Localizer["ValidateFormText"]" Image="ValidateForm.png" Url="validateforms"></ComponentCard>
+            <ComponentCard Text="@Localizer["AutoCompleteText"]" Image="AutoComplete.svg" Url="autocompletes"></ComponentCard>
+            <ComponentCard Text="@Localizer["ButtonText"]" Image="Button.svg" Url="buttons"></ComponentCard>
+            <ComponentCard Text="@Localizer["CascaderText"]" Image="Cascader.png" Url="cascaders"></ComponentCard>
+            <ComponentCard Text="@Localizer["CheckboxText"]" Image="CheckBox.svg" Url="checkboxs"></ComponentCard>
+            <ComponentCard Text="@Localizer["CheckboxListText"]" Image="CheckboxList.png" Url="checkboxlists"></ComponentCard>
+            <ComponentCard Text="@Localizer["ColorPickerText"]" Image="ColorPicker.jpg" Url="colorpickers"></ComponentCard>
+            <ComponentCard Text="@Localizer["DateTimePickerText"]" Image="DatePicker.svg" Url="datetimepickers"></ComponentCard>
+            <ComponentCard Text="@Localizer["DateTimeRangeText"]" Image="DateTimeRange.png" Url="datetimeranges"></ComponentCard>
+            <ComponentCard Text="@Localizer["EditorText"]" Image="Editor.png" Url="editors"></ComponentCard>
+            <ComponentCard Text="@Localizer["InputText"]" Image="Input.svg" Url="inputs"></ComponentCard>
+            <ComponentCard Text="@Localizer["InputNumberText"]" Image="InputNumber.png" Url="inputnumbers"></ComponentCard>
+            <ComponentCard Text="@Localizer["MarkdownText"]" Image="Markdown.png" Url="markdowns"></ComponentCard>
+            <ComponentCard Text="@Localizer["RadioText"]" Image="Radio.svg" Url="radios"></ComponentCard>
+            <ComponentCard Text="@Localizer["RateText"]" Image="Rate.jpg" Url="rates"></ComponentCard>
+            <ComponentCard Text="@Localizer["SelectText"]" Image="Select.svg" Url="selects"></ComponentCard>
+            <ComponentCard Text="@Localizer["MultiSelectText"]" Image="MultiSelect.png" Url="multiselects"></ComponentCard>
+            <ComponentCard Text="@Localizer["SliderText"]" Image="Slider.svg" Url="sliders"></ComponentCard>
+            <ComponentCard Text="@Localizer["SwitchText"]" Image="Switch.svg" Url="switchs"></ComponentCard>
+            <ComponentCard Text="@Localizer["TextareaText"]" Image="Textarea.png" Url="textareas"></ComponentCard>
+            <ComponentCard Text="@Localizer["ToggleText"]" Image="Toggle.png" Url="toggles"></ComponentCard>
+            <ComponentCard Text="@Localizer["TransferText"]" Image="Transfer.svg" Url="transfers"></ComponentCard>
+            <ComponentCard Text="@Localizer["UploadText"]" Image="Upload.svg" Url="uploads"></ComponentCard>
         </ComponentCategory>
 
-        <ComponentCategory Text="数据组件">
-            <ComponentCard Text="头像框 Avatar" Image="Avatar.svg" Url="avatars"></ComponentCard>
-            <ComponentCard Text="徽章 Badge" Image="Badge.svg" Url="badges"></ComponentCard>
-            <ComponentCard Text="卡片 Card" Image="Card.svg" Url="cards"></ComponentCard>
-            <ComponentCard Text="日历框 Calendar" Image="Calendar.svg" Url="calendars"></ComponentCard>
-            <ComponentCard Text="验证码 Captcha" Image="Captcha.png" Url="captchas"></ComponentCard>
-            <ComponentCard Text="走马灯 Carousel" Image="Carousel.svg" Url="carousels"></ComponentCard>
-            <ComponentCard Text="图表 Chart" Image="Chart.png" Url="charts"></ComponentCard>
-            <ComponentCard Text="进度环 Circle" Image="Circle.png" Url="circles"></ComponentCard>
-            <ComponentCard Text="折叠 Collapse" Image="Collapse.svg" Url="collapses"></ComponentCard>
-            <ComponentCard Text="挂件 DropdownWidget" Image="DropdownWidget.png" Url="dropdownwidgets"></ComponentCard>
-            <ComponentCard Text="集合 GroupBox" Image="GroupBox.png" Url="groupboxs"></ComponentCard>
-            <ComponentCard Text="列表组件 ListView" Image="ListView.png" Url="listviews"></ComponentCard>
-            <ComponentCard Text="弹出框 Popover" Image="Popover.svg" Url="popovers"></ComponentCard>
-            <ComponentCard Text="二维码 QRCode" Image="QRCode.png" Url="qrcodes"></ComponentCard>
-            <ComponentCard Text="搜索框 Search" Image="Search.png" Url="searchs"></ComponentCard>
-            <ComponentCard Text="表格 Table" Image="Table.svg" Url="tables"></ComponentCard>
-            <ComponentCard Text="标签 Tag" Image="Tag.svg" Url="tags"></ComponentCard>
-            <ComponentCard Text="时间线 Timeline" Image="Timeline.svg" Url="timelines"></ComponentCard>
-            <ComponentCard Text="工具条 Tooltip" Image="Tooltip.svg" Url="tooltips"></ComponentCard>
-            <ComponentCard Text="树形控件 Tree" Image="Tree.svg" Url="trees"></ComponentCard>
-            <ComponentCard Text="条码扫描 BarcodeReader" Image="BarcodeReader.png" Url="barcodereaders"></ComponentCard>
-            <ComponentCard Text="摄像头组件 Camera" Image="Camera.png" Url="Cameras"></ComponentCard>
-            <ComponentCard Text="手写签名 HandwrittenPage" Image="Handwritten.jpg" Url="handwrittenPage"></ComponentCard>
+        <ComponentCategory Text="@Localizer["Text4"]">
+            <ComponentCard Text="@Localizer["AvatarText"]" Image="Avatar.svg" Url="avatars"></ComponentCard>
+            <ComponentCard Text="@Localizer["BadgeText"]" Image="Badge.svg" Url="badges"></ComponentCard>
+            <ComponentCard Text="@Localizer["CardText"]" Image="Card.svg" Url="cards"></ComponentCard>
+            <ComponentCard Text="@Localizer["CalendarText"]" Image="Calendar.svg" Url="calendars"></ComponentCard>
+            <ComponentCard Text="@Localizer["CaptchaText"]" Image="Captcha.png" Url="captchas"></ComponentCard>
+            <ComponentCard Text="@Localizer["CarouselText"]" Image="Carousel.svg" Url="carousels"></ComponentCard>
+            <ComponentCard Text="@Localizer["ChartText"]" Image="Chart.png" Url="charts"></ComponentCard>
+            <ComponentCard Text="@Localizer["CircleText"]" Image="Circle.png" Url="circles"></ComponentCard>
+            <ComponentCard Text="@Localizer["CollapseText"]" Image="Collapse.svg" Url="collapses"></ComponentCard>
+            <ComponentCard Text="@Localizer["DropdownWidgetText"]" Image="DropdownWidget.png" Url="dropdownwidgets"></ComponentCard>
+            <ComponentCard Text="@Localizer["GroupBoxText"]" Image="GroupBox.png" Url="groupboxs"></ComponentCard>
+            <ComponentCard Text="@Localizer["ListViewText"]" Image="ListView.png" Url="listviews"></ComponentCard>
+            <ComponentCard Text="@Localizer["PopoverText"]" Image="Popover.svg" Url="popovers"></ComponentCard>
+            <ComponentCard Text="@Localizer["QRCodeText"]" Image="QRCode.png" Url="qrcodes"></ComponentCard>
+            <ComponentCard Text="@Localizer["SearchText"]" Image="Search.png" Url="searchs"></ComponentCard>
+            <ComponentCard Text="@Localizer["TableText"]" Image="Table.svg" Url="tables"></ComponentCard>
+            <ComponentCard Text="@Localizer["TagText"]" Image="Tag.svg" Url="tags"></ComponentCard>
+            <ComponentCard Text="@Localizer["TimelineText"]" Image="Timeline.svg" Url="timelines"></ComponentCard>
+            <ComponentCard Text="@Localizer["TooltipText"]" Image="Tooltip.svg" Url="tooltips"></ComponentCard>
+            <ComponentCard Text="@Localizer["TreeText"]" Image="Tree.svg" Url="trees"></ComponentCard>
+            <ComponentCard Text="@Localizer["BarcodeReaderText"]" Image="BarcodeReader.png" Url="barcodereaders"></ComponentCard>
+            <ComponentCard Text="@Localizer["CameraText"]" Image="Camera.png" Url="Cameras"></ComponentCard>
+            <ComponentCard Text="@Localizer["HandwrittenPageText"]" Image="Handwritten.jpg" Url="handwrittenpage"></ComponentCard>
+            <ComponentCard Text="@Localizer["FullScreenText"]" Image="FullScreen.jpg" Url="fullscreens"></ComponentCard>
         </ComponentCategory>
 
-        <ComponentCategory Text="消息组件">
-            <ComponentCard Text="警告框 Alert" Image="Alert.svg" Url="alerts"></ComponentCard>
-            <ComponentCard Text="控制台 Console" Image="Console.png" Url="consoles"></ComponentCard>
-            <ComponentCard Text="对话框 Dialog" Image="Notification.svg" Url="dialogs"></ComponentCard>
-            <ComponentCard Text="抽屉 Drawer" Image="Drawer.svg" Url="drawers"></ComponentCard>
-            <ComponentCard Text="编辑弹窗 EditDialog" Image="Notification.svg" Url="editdialogs"></ComponentCard>
-            <ComponentCard Text="消息框 Message" Image="Message.svg" Url="messages"></ComponentCard>
-            <ComponentCard Text="模态框 Modal" Image="Modal.svg" Url="modals"></ComponentCard>
-            <ComponentCard Text="指示灯 Light" Image="Light.png" Url="lights"></ComponentCard>
-            <ComponentCard Text="确认框 Popconfirm" Image="Popconfirm.svg" Url="popconfirms"></ComponentCard>
-            <ComponentCard Text="进度条 Progress" Image="Progress.svg" Url="progresss"></ComponentCard>
-            <ComponentCard Text="旋转图标 Spinner" Image="Spinner.gif" Url="spinners"></ComponentCard>
-            <ComponentCard Text="弹窗组件 SweetAlert" Image="SweetAlert.png" Url="swals"></ComponentCard>
-            <ComponentCard Text="搜索弹窗 SearchDialog" Image="SearchDialog.png" Url="searchdialogs"></ComponentCard>
-            <ComponentCard Text="轻量弹窗 Toast" Image="Toast.png" Url="toasts"></ComponentCard>
-            <ComponentCard Text="计时器 Timer" Image="Timer.png" Url="timers"></ComponentCard>
+        <ComponentCategory Text="@Localizer["Text5"]">
+            <ComponentCard Text="@Localizer["AlertText"]" Image="Alert.svg" Url="alerts"></ComponentCard>
+            <ComponentCard Text="@Localizer["ConsoleText"]" Image="Console.png" Url="consoles"></ComponentCard>
+            <ComponentCard Text="@Localizer["DialogText"]" Image="Notification.svg" Url="dialogs"></ComponentCard>
+            <ComponentCard Text="@Localizer["DrawerText"]" Image="Drawer.svg" Url="drawers"></ComponentCard>
+            <ComponentCard Text="@Localizer["EditDialogText"]" Image="Notification.svg" Url="editdialogs"></ComponentCard>
+            <ComponentCard Text="@Localizer["MessageText"]" Image="Message.svg" Url="messages"></ComponentCard>
+            <ComponentCard Text="@Localizer["ModalText"]" Image="Modal.svg" Url="modals"></ComponentCard>
+            <ComponentCard Text="@Localizer["LightText"]" Image="Light.png" Url="lights"></ComponentCard>
+            <ComponentCard Text="@Localizer["PopconfirmText"]" Image="Popconfirm.svg" Url="popconfirms"></ComponentCard>
+            <ComponentCard Text="@Localizer["ProgressText"]" Image="Progress.svg" Url="progresss"></ComponentCard>
+            <ComponentCard Text="@Localizer["SpinnerText"]" Image="Spinner.gif" Url="spinners"></ComponentCard>
+            <ComponentCard Text="@Localizer["SweetAlertText"]" Image="SweetAlert.png" Url="swals"></ComponentCard>
+            <ComponentCard Text="@Localizer["SearchDialogText"]" Image="SearchDialog.png" Url="searchdialogs"></ComponentCard>
+            <ComponentCard Text="@Localizer["ToastText"]" Image="Toast.png" Url="toasts"></ComponentCard>
+            <ComponentCard Text="@Localizer["TimerText"]" Image="Timer.png" Url="timers"></ComponentCard>
         </ComponentCategory>
 
     </CascadingValue>

src/BootstrapBlazor.Shared/Pages/Golbalization.razor

@@ -1,7 +1,8 @@
 @page "/globalization"
+@inject IStringLocalizer<Golbalization> Localizer
 
-<h3>全球化</h3>
+<h3>@Localizer["Title"]</h3>
 
-<h4>ASP.NET Core Blazor 全球化</h4>
+<h4>@Localizer["SubTitle"]</h4>
 
-<p>阅读以下知识点前请先查看 <a href="https://docs.microsoft.com/zh-cn/aspnet/core/blazor/globalization-localization?view=aspnetcore-3.1" target="_blank">微软官方文档</a></p>
+<p>@((MarkupString)Localizer["P1"].Value)</p>

src/BootstrapBlazor.Shared/Pages/Index.razor

@@ -1,189 +1,183 @@
-@using Microsoft.Extensions.Localization
-@layout HomeLayout
+@layout HomeLayout
 @page "/"
 @page "/index"
 @page "/home"
 
 <section class="home-section">
     <div class="welcome container">
-        <div class="form-inline">
-            <div class="row">
-                <div class="col-12 col-lg-6">
-                    <div class="welcome-header">
-                        <h4>
-                            Bootstrap 风格的 Blazor UI 组件库
-                        </h4>
-                        <div>基于 <code>Bootstrap</code> 样式库精心打造，并且额外增加了 76 多种常用的组件，为您快速开发项目带来非一般的感觉</div>
-                        <div class="welcome-body">
-                            致力于打造全网<span @ref="TypeElement" class="typed"></span><span class="typed-cursor">|</span>
-                            <div>最好玩的组件库</div>
-                        </div>
-                    </div>
-                    <div class="welcome-footer">
-                        <div class="d-flex flex-wrap">
-                            <span role="alert" class="tag alert fade show alert-primary" data-toggle="tooltip" title="Tree 组件">
-                                树形组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-success" data-toggle="tooltip" title="Menu 组件">
-                                菜单组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-warning" data-toggle="tooltip" title="Tab Tag Alert 组件">
-                                标签组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-secondary" data-toggle="tooltip" title="Table 组件">
-                                表格组件
-                            </span>
-                        </div>
-                        <div class="d-flex flex-wrap">
-                            <span role="alert" class="tag alert fade show alert-danger" data-toggle="tooltip" title="Layout Split 组件">
-                                布局组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-info" data-toggle="tooltip" title="Dialog Message Toast 组件">
-                                通知组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-dark" data-toggle="tooltip" title="Upload 组件">
-                                上传组件
-                            </span>
-                            <span role="alert" class="tag alert fade show alert-success" data-toggle="tooltip" title="Swith Toogle 组件">
-                                开关组件
-                            </span>
-                        </div>
+        <div class="row g-3">
+            <div class="col-12 col-lg-6 position-relative">
+                <div class="welcome-header">
+                    <h4>
+                        @Localizer["HeaderTitle"]
+                    </h4>
+                    <div>@((MarkupString)Localizer["HeaderDesc", Options.Value.TotalCount].Value)</div>
+                    <div class="@BodyClassString">
+                        @Localizer["HeaderBody"]<span @ref="TypeElement" class="typed"></span><span class="typed-cursor">|</span>
+                        <div>@Localizer["HeaderBody1"]</div>
                     </div>
                 </div>
-                <div class="col-12 col-lg-6">
-                    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
-                        <ol class="carousel-indicators">
-                            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
-                            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
-                            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
-                            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
-                        </ol>
-                        <div class="carousel-inner">
-                            <div class="carousel-item active">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/bar.gif" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>Chart 图表组件</h5>
-                                        <p>提供常用的多种图表组件</p>
-                                    </div>
+                <div class="welcome-footer">
+                    <div class="d-flex flex-wrap">
+                        <span role="alert" class="tag alert fade show alert-primary" data-bs-toggle="tooltip" title="Tree @Localizer["TagTitle"]">
+                            @Localizer["Span1"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-success" data-bs-toggle="tooltip" title="Menu @Localizer["TagTitle"]">
+                            @Localizer["Span2"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-warning" data-bs-toggle="tooltip" title="Tab Tag Alert @Localizer["TagTitle"]">
+                            @Localizer["Span3"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-secondary" data-bs-toggle="tooltip" title="Table @Localizer["TagTitle"]">
+                            @Localizer["Span4"]
+                        </span>
+                    </div>
+                    <div class="d-flex flex-wrap">
+                        <span role="alert" class="tag alert fade show alert-danger" data-bs-toggle="tooltip" title="Layout Split @Localizer["TagTitle"]">
+                            @Localizer["Span5"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-info" data-bs-toggle="tooltip" title="Dialog Message Toast @Localizer["TagTitle"]">
+                            @Localizer["Span6"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-dark" data-bs-toggle="tooltip" title="Upload @Localizer["TagTitle"]">
+                            @Localizer["Span7"]
+                        </span>
+                        <span role="alert" class="tag alert fade show alert-success" data-bs-toggle="tooltip" title="Swith Toogle @Localizer["TagTitle"]">
+                            @Localizer["Span8"]
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-lg-6">
+                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+                    <ol class="carousel-indicators">
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
+                        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"></li>
+                    </ol>
+                    <div class="carousel-inner">
+                        <div class="carousel-item active">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/bar.gif" />
                                 </div>
-                            </div>
-                            <div class="carousel-item">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/dought.gif" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>Chart 图标组件</h5>
-                                        <p>多维度数据对比</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="carousel-item">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/table.png" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>全功能表格组件</h5>
-                                        <p>具备增删改查搜、分页、排序所有功能</p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="carousel-item">
-                                <div class="bar">
-                                    <div class="carousel-img">
-                                        <img src="_content/BootstrapBlazor.Shared/images/timeline.png" />
-                                    </div>
-                                    <div class="carousel-caption">
-                                        <h5>超强时间线功能</h5>
-                                        <p>自定义节点显示任意组件</p>
-                                    </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH1"]</h5>
+                                    <p>@Localizer["CarouselP1"]</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/dought.gif" />
+                                </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH2"]</h5>
+                                    <p>@Localizer["CarouselP2"]</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/table.png" />
+                                </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH3"]</h5>
+                                    <p>@Localizer["CarouselP3"]</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="bar">
+                                <div class="carousel-img">
+                                    <img src="_content/BootstrapBlazor.Shared/images/timeline.png" />
+                                </div>
+                                <div class="carousel-caption">
+                                    <h5>@Localizer["CarouselH4"]</h5>
+                                    <p>@Localizer["CarouselP4"]</p>
                                 </div>
                             </div>
                         </div>
-                        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
-                           data-slide="prev">
-                            <i class="fa fa-angle-left"></i>
-                            <span class="sr-only">Previous</span>
-                        </a>
-                        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
-                           data-slide="next">
-                            <i class="fa fa-angle-right"></i>
-                            <span class="sr-only">Next</span>
-                        </a>
                     </div>
+                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
+                       data-bs-slide="prev">
+                        <i class="fa fa-angle-left"></i>
+                        <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
+                       data-bs-slide="next">
+                        <i class="fa fa-angle-right"></i>
+                        <span class="sr-only">Next</span>
+                    </a>
                 </div>
             </div>
         </div>
     </div>
     <div class="intro container">
-        <div class="form-inline">
-            <div class="row">
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-success">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/components.svg" alt="components" />
-                        </p>
-                        <h3>50+ 组件</h3>
-                        <div>本套组件库包含超过 50 多个组件，从简单的按钮到复杂的整页面级别的组件</div>
-                    </div>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-success">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/components.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH1"]</h3>
+                    <div>@((MarkupString)Localizer["ContainerD1", Options.Value.TotalCount].Value)</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-primary">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/performance.svg" alt="components" />
-                        </p>
-                        <h3>性能</h3>
-                        <div>
-                            每个控件都经过微调，优化父子组件之间刷新逻辑，避免多次循环更新
-                        </div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-primary">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/performance.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH2"]</h3>
+                    <div>@Localizer["ContainerD2"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-info">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/ease-of-use.svg" alt="components" />
-                        </p>
-                        <h3>简单易用</h3>
-                        <div>轻松掌握组件使用方法，快速将 BootstrapBlazor 控件融入到项目中</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-info">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/ease-of-use.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH3"]</h3>
+                    <div>@Localizer["ContainerD3"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-danger">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/hassel-free-licensing.svg" alt="components" />
-                        </p>
-                        <h3>免费开源</h3>
-                        <div>简单、直接、免费使用、无依赖组件，依赖 jQuery Bootstrap 均已内置</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-danger">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/hassel-free-licensing.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH4"]</h3>
+                    <div>@Localizer["ContainerD4"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-warning">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/demo-and-training.svg" alt="components" />
-                        </p>
-                        <h3>演示与示例</h3>
-                        <div>详细文档与在线演示，功能设置简单，直接拷贝代码开箱即用</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-warning">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/demo-and-training.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH5"]</h3>
+                    <div>@Localizer["ContainerD5"]</div>
                 </div>
-                <div class="form-group col-12 col-sm-6 col-md-4">
-                    <div class="card border-secondary">
-                        <p class="d-none d-sm-block">
-                            <img src="_content/BootstrapBlazor.Shared/images/frequent-updates.svg" alt="components" />
-                        </p>
-                        <h3>持续更新</h3>
-                        <div>码云平台托管开源，永不闭源，持续更新，及时响应问题与反馈</div>
-                    </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="card border-secondary">
+                    <p class="d-none d-sm-block">
+                        <img src="_content/BootstrapBlazor.Shared/images/frequent-updates.svg" alt="components" />
+                    </p>
+                    <h3>@Localizer["ContainerH6"]</h3>
+                    <div>@Localizer["ContainerD6"]</div>
                 </div>
             </div>
         </div>
     </div>
     <div class="donate">
-        <h3>捐助</h3>
-        <h5 class="d-none d-sm-block mb-3">扫码捐助请作者喝一杯咖啡</h5>
+        <h3>@Localizer["DonateH1"]</h3>
+        <h5 class="d-none d-sm-block mb-3">@Localizer["DonateH2"]</h5>
         <img class="barcode" src="https://gitee.com/LongbowEnterprise/Pictures/raw/master/WeChat/BarCode@2x.png" />
+        <div class="wwads-cn wwads-horizontal" data-id="72" style="max-width:350px"></div>
     </div>
 </section>

src/BootstrapBlazor.Shared/Pages/Index.razor.cs

@@ -2,8 +2,12 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
+using BootstrapBlazor.Components;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
 using Microsoft.JSInterop;
+using System.Diagnostics.CodeAnalysis;
 using System.Threading.Tasks;
 
 namespace BootstrapBlazor.Shared.Pages
@@ -15,9 +19,20 @@ namespace BootstrapBlazor.Shared.Pages
     {
         private ElementReference TypeElement { get; set; }
 
+        private string? BodyClassString => CssBuilder.Default(Localizer["BodyClassString"])
+            .Build();
+
         [Inject]
         private IJSRuntime? JSRuntime { get; set; }
 
+        [Inject]
+        [NotNull]
+        private IStringLocalizer<Index>? Localizer { get; set; }
+
+        [Inject]
+        [NotNull]
+        private IOptions<WebsiteOptions>? Options { get; set; }
+
         /// <summary>
         /// 
         /// </summary>
@@ -27,7 +42,10 @@ namespace BootstrapBlazor.Shared.Pages
         {
             await base.OnAfterRenderAsync(firstRender);
 
-            if (firstRender && JSRuntime != null) await JSRuntime.InvokeVoidAsync("$.indexTyper", TypeElement);
+            if (firstRender && JSRuntime != null)
+            {
+                await JSRuntime.InvokeVoidAsync("$.indexTyper", TypeElement, Localizer["DynamicText"].Value.ToCharArray(), Localizer["DynamicText1"].Value.ToCharArray(), Localizer["DynamicText2"].Value.ToCharArray());
+            }
         }
     }
 }

src/BootstrapBlazor.Shared/Pages/Install.razor

@@ -1,11 +1,12 @@
 @page "/install"
 @inject NugetVersionService VersionManager
+@inject IStringLocalizer<Install> Localizer
 
-<h3>安装</h3>
+<h3>@Localizer["InstallTitle"]</h3>
 
 <h4>Git</h4>
 
-<p>Git 工具有很多种大家比较熟悉的，这里我介绍两款 Git 客户端工具</p>
+<p>@Localizer["GitP1"]</p>
 
 <div class="row mb-sm-3">
     <div class="git col-12 col-sm-6 mb-3 mb-sm-0">
@@ -19,11 +20,11 @@
     </div>
 </div>
 
-<p>推荐使用 <a href="https://fork.dev">Fork</a> 工具进行安装，它能更好地和 <a href="https://visualstudio.microsoft.com/vs/getting-started/" target="_blank">Visutal Studio</a> 开发工具配合使用。</p>
+<p>@((MarkupString)Localizer["GitP2"].Value)</p>
 
-<h4>Nuget 包安装</h4>
+<h4>@Localizer["NugetInstall"]</h4>
 
-<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor" target="_blank">nuget.org</a> 进行 BootstrapBlazor 组件的安装</p>
+<p>@((MarkupString)Localizer["NugetP1"].Value)</p>
 
 <div class="code-label">.NET CLI</div>
 <Pre class="no-highlight">dotnet add package BootstrapBlazor --version @Version</Pre>
@@ -34,12 +35,12 @@
 <div class="code-label">Package Manager</div>
 <Pre class="no-highlight">Install-Package BootstrapBlazor -Version @Version</Pre>
 
-<h4>项目环境搭建</h4>
+<h4>@Localizer["EnvBuildTitle"]</h4>
 
 <ol>
-    <li>安装 .net core sdk <a href="http://www.microsoft.com/net/download" target="_blank">官方网址</a></li>
-    <li>安装 Visual Studio 2019 以上 <a href="https://visualstudio.microsoft.com/vs/getting-started" target="_blank">官方网址</a></li>
-    <li>拉取项目代码 BootstrapBlazor <a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor" target="_blank">仓库网址</a></li>
+    <li>@((MarkupString)Localizer["EnvLi1"].Value)</li>
+    <li>@((MarkupString)Localizer["EnvLi2"].Value)</li>
+    <li>@((MarkupString)Localizer["EnvLi3"].Value)</li>
 </ol>
 
 <Pre class="no-highlight">git clone https://gitee.com/LongbowEnterprise/BootstrapBlazor</Pre>

src/BootstrapBlazor.Shared/Pages/Install_Server.razor

@@ -1,12 +1,13 @@
 @page "/install-server"
+@inject IStringLocalizer<Install_Server> Localizer
 
-<InstallContent>
+<InstallContent Title="@Localizer["Title"]">
 <Pre>public void ConfigureServices(IServiceCollection services)
 {
     services.AddRazorPages();
     services.AddServerSideBlazor();
 
-    // 添加本行代码
+    // @Localizer["CodeComment"]
     services.AddBootstrapBlazor(); 
 }</Pre>
 </InstallContent>

src/BootstrapBlazor.Shared/Pages/Install_wasm.razor

@@ -1,6 +1,7 @@
 @page "/install-wasm"
+@inject IStringLocalizer<Install_wasm> Localizer
 
-<InstallContent Title="客户端渲染模式" HostFile="wwwroot/index.html">
+<InstallContent Title="@Localizer["Title"]" HostFile="wwwroot/index.html">
 <Pre>public class Program
 {
     public static async Task Main(string[] args)
@@ -9,7 +10,7 @@
         builder.RootComponents.Add&lt;App&gt;("app");
         builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
-        // 添加本行代码
+        // @Localizer["CodeComment"]
         builder.Services.AddBootstrapBlazor();
 
         await builder.Build().RunAsync();

src/BootstrapBlazor.Shared/Pages/Introduction.razor

@@ -1,46 +1,70 @@
 @page "/docs"
 @page "/introduction"
-@inject IOptions<WebsiteOptions> WebsiteOption
-<h3>简介</h3>
 
-<p>BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。</p>
+<h3>@Localizer["Title"]</h3>
 
-<p>由于 Bootstrap UI 框架目前版本对 jQuery 有依赖，所以我们的 BootstrapBlazor 对 jQuery 也是有依赖</p>
+<p>@Localizer["P1"]</p>
 
-<p>依赖关系为：BootstrapBlazor > Bootstrap > jQuery</p>
+<p>@Localizer["P2"]</p>
 
-<p>最新 <a href="template" target="_blank">项目模板</a> 中将以上依赖进行了打包捆绑大大简化使用</p>
+<p>@((MarkupString)Localizer["P3"].Value)</p>
 
-<h3>学习资料</h3>
+<h3>@Localizer["UpdateTitle"]</h3>
+
+<p>@((MarkupString)Localizer["P4", WebsiteOption.Value.WikiUrl].Value)</p>
+
+<h3>@Localizer["LearnTitle"]</h3>
 
 <ul class="ul-demo mt-3">
-    <li><a href="https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=DT-MVP-5004174" target="_blank">Blazor 官方文档</a></li>
-    <li><a href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5004174" target="_blank">使用 Blazor WebAssembly 和 Visual Studio Code 生成 Web 应用</a></li>
+    <li><a href="https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=DT-MVP-5004174" target="_blank">@Localizer["LearnLi1"]</a></li>
+    <li><a href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5004174" target="_blank">@Localizer["LearnLi2"]</a></li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/2-understand-blazor-webassembly?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi3"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/3-exercise-configure-enviromnent?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi4"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/4-blazor-components?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi5"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/5-exercise-add-component?WT.mc_id=DT-MVP-5004174">@Localizer["Learn6"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/6-csharp-razor-binding?WT.mc_id=DT-MVP-5004174">@Localizer["LeanrnLi7"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/7-exercise-razor-binding?WT.mc_id=DT-MVP-5004174">@Localizer["LearnLi8"]</a>
+    </li>
+    <li class="learn-item">
+        <a target="_blank" href="https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/8-summary?WT.mc_id=DT-MVP-5004174">@Localizer["Summarize"]</a>
+    </li>
 </ul>
 
-<h3>作品展示</h3>
+<h3>@Localizer["ProjectsShow"]</h3>
 
-<p>国内最大代码托管协作开发平台 <b><a href="@WebsiteOption.Value.BootstrapBlazorLink" target="_blank">码云</a></b> C# 板块最高星 <a href='@WebsiteOption.Value.BootstrapAdminLink/stargazers'><img src='@WebsiteOption.Value.BootstrapAdminLink/badge/star.svg?theme=gvp' alt='star' style="margin-bottom: 1px;" /></a> 作品 <b><a href="@WebsiteOption.Value.BootstrapAdminLink" target="_blank">通用后台管理系统 BootstrapAdmin</a></b> 准备使用本组件实现全部功能</p>
+<p>@((MarkupString)Localizer["P5", LocalizerUrls].Value)</p>
 
-<p>演示网站：<a href="@($"{WebsiteOption.Value.AdminUrl}/Pages")" target="_blank">@WebsiteOption.Value.AdminUrl</a></p>
+<p>@Localizer["ShowWebSiteTitle"]：<a href="@($"{WebsiteOption.Value.AdminUrl}/Pages")" target="_blank">@WebsiteOption.Value.AdminUrl</a></p>
 
-<h4>快速上手</h4>
+<h4>@Localizer["GetStarted"]</h4>
 
-<p><a href="https://v4.bootcss.com/docs/getting-started/introduction/" target="_blank">Bootstrap 快速入门</a></p>
+<p><a href="https://v5.bootcss.com/docs/getting-started/introduction/" target="_blank">Bootstrap @Localizer["QuikStart"]</a></p>
 
-<h4>组件特色</h4>
+<h4>@Localizer["Features"]</h4>
 
-<p>Bootstrap Blazor UI 组件库提供了从基本的 <code>Button</code> 组件到高级的网页级 <code>SmartPage</code> 组件</p>
+<p>@((MarkupString)Localizer["P6"].Value)</p>
 
-<p class="code-label">优势</p>
+<p class="code-label">@Localizer["Advantage"]</p>
 
 <ul>
-    <li>使用组件无需编写 <code>Javascript</code></li>
-    <li>组件支持所有 <code>html</code> 特性</li>
-    <li>组件支持数据双向绑定</li>
-    <li>组件支持自动客户端验证</li>
-    <li>组件支持组合</li>
+    <li>@((MarkupString)Localizer["AdvantageLi1"].Value)</li>
+    <li>@((MarkupString)Localizer["AdvantageLi2"].Value)</li>
+    <li>@Localizer["AdvantageLi3"]</li>
+    <li>@Localizer["AdvantageLi4"]</li>
+    <li>@Localizer["AdvantageLi5"]</li>
 </ul>
 
-<p class="code-label">交流群</p>
+<p class="code-label">@Localizer["Community"]</p>
+
 <QQGroup />

src/BootstrapBlazor.Shared/Pages/Introduction.razor.cs

@@ -0,0 +1,88 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Options;
+using Microsoft.JSInterop;
+using System;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class Introduction : IAsyncDisposable
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Inject]
+        [NotNull]
+        private IOptions<WebsiteOptions>? WebsiteOption { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Inject]
+        [NotNull]
+        private IStringLocalizer<Introduction>? Localizer { get; set; }
+
+        [Inject]
+        [NotNull]
+        private IJSRuntime? JSRuntime { get; set; }
+
+        [NotNull]
+        private string[]? LocalizerUrls { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LocalizerUrls = new string[]
+            {
+                WebsiteOption.Value.BootstrapBlazorLink,
+                WebsiteOption.Value.BootstrapBlazorLink + "/stargazers",
+                WebsiteOption.Value.BootstrapBlazorLink + "/badge/star.svg?theme=gvp",
+                WebsiteOption.Value.BootstrapAdminLink
+            };
+        }
+
+        private bool IsRender { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        /// <returns></returns>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender)
+            {
+                IsRender = true;
+                await JSRuntime.InvokeVoidAsync("$.bb_open");
+            }
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        public async ValueTask DisposeAsync()
+        {
+            if (IsRender)
+            {
+                await JSRuntime.InvokeVoidAsync("$.bb_open", "dispose");
+            }
+            GC.SuppressFinalize(this);
+        }
+    }
+}

src/BootstrapBlazor.Shared/Pages/Localization.razor

@@ -18,7 +18,10 @@
         <code>BootstrapBlazor</code> 组件额外支持使用 <code>Json</code> 类型的键值信息作为资源文件，将其解析为 <code>UI</code> 中呈现的字符串。<a href="https://www.nuget.org/packages/BootstrapBlazor/" target="_blank">BootstrapBalzor</a> 包自带中文（zh）、英语（en）两种资源文件。组件内置本地化语言回退机制，如请求文化为 <code>zh-CN</code> 时，如未提供相对应的文化资源文件时，内置逻辑通过父级文化进行尝试本地化，以 <code>zh-CN</code> 为例回退机制如下：
     </div>
     <div>
-        <code>zh-CN</code> -> <code>zh-Hans</code> -> <code>zh</code>
+        <code>zh-CN</code> 到 <code>zh</code>
+    </div>
+    <div>
+        如果设置的本地化语言未提供资源文件回落后仍无法找到资源文件后，使用 <code>FallbackCulture</code> 参数设置的文化信息进行本地化，默认为 <code>en</code>
     </div>
 </p>
 
@@ -32,7 +35,7 @@
 
 <Pre>{
   "BootstrapBlazorOptions": {
-    "FallbackCultureName": "en-US",
+    "FallbackCultureName": "en",
     "SupportedCultures": [
       "zh-CN",
       "en-US"
@@ -203,7 +206,7 @@ public class CultureController : Controller
     builder.Services.Configure&lt;BootstrapBlazorOptions&gt;(op =>
     {
         op.ToastDelay = 4000;
-        op.SupportedCultures.AddRange(new string[] { "zh-CN", "en-US" });
+        op.SupportedCultures = new List&lt;string&gt; { "zh-CN", "en-US" };
     });
 
     var host = builder.Build();

src/BootstrapBlazor.Shared/Pages/Samples/Alerts.razor

@@ -15,16 +15,14 @@
 </Block>
 
 <Block Title="@CloseButtonUsageText" Introduction="@IntroText2">
-    <div>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
-        <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
-    </div>
-    <Logger @ref="Trace" class="mt-3" />
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Primary">@AlertPrimaryText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Secondary">@AlertSecondaryText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Success">@AlertSuccessText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Danger">@AlertDangerText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Warning">@AlertWarningText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Info">@AlertInfoText</Alert>
+    <Alert ShowDismiss="true" OnDismiss="@DismissClick" Color="Color.Dark">@AlertDarkText</Alert>
+    <BlockLogger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="@WithIconUsageText" Introduction="@IntroText3">

src/BootstrapBlazor.Shared/Pages/Samples/Alerts.razor.cs

@@ -2,10 +2,12 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
+using BootstrapBlazor.Components;
 using BootstrapBlazor.Shared.Common;
 using BootstrapBlazor.Shared.Pages.Components;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Logging;
 using System.Collections.Generic;
 using System.Diagnostics.CodeAnalysis;
 using System.Threading.Tasks;
@@ -72,10 +74,8 @@ namespace BootstrapBlazor.Shared.Pages
         [NotNull]
         private IStringLocalizer<Alerts>? Localizer { get; set; }
 
-        /// <summary>
-        /// 
-        /// </summary>
-        private Logger? Trace { get; set; }
+        [NotNull]
+        private BlockLogger? Trace { get; set; }
 
         /// <summary>
         /// OnInitialized 方法
@@ -111,7 +111,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// </summary>
         private Task DismissClick()
         {
-            Trace?.Log($"Alert Dismissed");
+            Trace.Log("Alert Dismissed");
             return Task.CompletedTask;
         }
 
@@ -119,7 +119,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// 获得事件方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<EventItem> GetEvents() => new EventItem[]
+        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
         {
             new EventItem()
             {
@@ -133,7 +133,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {

src/BootstrapBlazor.Shared/Pages/Samples/AnchorLinks.razor

@@ -0,0 +1,15 @@
+@page "/anchorlinks"
+
+<h3>AnchorLink 锚点链接</h3>
+
+<h4>应用于标题带 <b>Hash</b> 的锚点链接，点击拷贝方便分享</h4>
+
+<Block Title="普通用法" Introduction="放置标签后点击拷贝锚点链接到粘贴板">
+    <AnchorLink Text="我是一个可以点击的锚点链接" Id="AnchorLink1" class="anchor-link-demo" />
+</Block>
+
+<Tips class="mt-3">
+    <div><code>AnchorLink</code> 锚点链接组件属性 <code>Id</code> 为必填项，不填写时不提供拷贝锚点链接功能</div>
+</Tips>
+
+<AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/AnchorLinks.razor.cs

@@ -0,0 +1,45 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using BootstrapBlazor.Shared.Common;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BootstrapBlazor.Shared.Pages
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public partial class AnchorLinks
+    {
+        private IEnumerable<AttributeItem> GetAttributes() => new[]
+        {
+            // TODO: 移动到数据库中
+            new AttributeItem() {
+                Name = "Id",
+                Description = "组件 Id 必填项",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "Text",
+                Description = "组件 Text 显示文字",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "TooltipText",
+                Description = "拷贝成功后 显示文字",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            }
+        };
+    }
+}

src/BootstrapBlazor.Shared/Pages/Samples/Anchors.razor.cs

@@ -48,8 +48,8 @@ namespace BootstrapBlazor.Shared.Pages
             SubTitle ??= Localizer[nameof(SubTitle)];
             BaseUsageText ??= Localizer[nameof(BaseUsageText)];
             IntroText1 ??= Localizer[nameof(IntroText1)];
-            IntroText2 = new MarkupString(Localizer[nameof(IntroText2)] ?? "");
-            ContentText1 = new MarkupString(Localizer[nameof(ContentText1)] ?? "");
+            IntroText2 = new MarkupString(Localizer[nameof(IntroText2)]?.Value ?? "");
+            ContentText1 = new MarkupString(Localizer[nameof(ContentText1)]?.Value ?? "");
         }
 
 
@@ -57,33 +57,33 @@ namespace BootstrapBlazor.Shared.Pages
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        private IEnumerable<AttributeItem> GetAttributes() => new[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {
                 Name = "Target",
-                Description = "锚点目标 Id",
+                Description = Localizer["Desc1"]!,
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "Container",
-                Description = "滚动条所在元素 Id",
+                Description = Localizer["Desc2"]!,
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "Offset",
-                Description = "偏移量用于调整间隙使用",
+                Description = Localizer["Desc3"]!,
                 Type = "int",
                 ValueList = " — ",
                 DefaultValue = "0"
             },
             new AttributeItem() {
                 Name = "ChildContent",
-                Description = "内容",
+                Description = Localizer["Desc4"]!,
                 Type = "RenderFragment",
                 ValueList = " — ",
                 DefaultValue = " — "

src/BootstrapBlazor.Shared/Pages/Samples/AutoCompletes.razor

@@ -1,63 +1,48 @@
 @page "/autocompletes"
+@inject IStringLocalizer<AutoCompletes>  Localizer
 
-<h3>AutoComplete 自动完成</h3>
+<h3>@Localizer["Title"]</h3>
 
-<h4>输入框自动完成功能</h4>
+<h4>@Localizer["H1"]</h4>
 
-<Block Title="基础用法" Introduction="通过设置 <code>Items</code> 数据集合当用户键入信息是自动显示提示信息">
-    <p>本例中请键入 123 字符串显示查看效果，自动完成组件初始化时给了自动提示数据集并且数据集无变化</p>
+<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
+    <p>@Localizer["P1"]</p>
     <div style="width: 200px;">
         <AutoComplete Items="@StaticItems" />
     </div>
 </Block>
 
-<Block Title="模糊查询并忽略大小写" Introduction="通过设置 <code>IsLikeMatch</code> 值设置是否开启集合的模糊匹配，通过设置 <code>IgnoreCase</code> 来控制是否忽略大小写">
-    <p>本例中请键入 abc 字符串显示查看效果，会将集合中所有包含 abc 且大小写相同的匹配出来供选择</p>
+<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
+    <p>@Localizer["P2"]</p>
     <div style="width: 200px;">
         <AutoComplete Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
     </div>
 </Block>
 
-<Block Title="自定义提示消息" Introduction="通过设置 <code>NoDataTip</code> 值设置自动完成数据未找到时显示的自定义提示消息">
-    <p>本例中请键入 567 字符串由于自动完成信息中心无数据显示自定义提示信息 - <code>没有找到你想要的数据</code></p>
+<Block Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]">
+    <p>@((MarkupString)Localizer["P3"].Value)</p>
     <div style="width: 200px;">
-        <AutoComplete Items="@StaticItems" NoDataTip="没有找到你想要的数据" />
+        <AutoComplete Items="@StaticItems" NoDataTip="@Localizer["AutoTip"]" />
     </div>
 </Block>
 
-<Block Title="自定义候选项" Introduction="通过设置 <code>ValueChanged</code> 回调方法根据用户输入的数据进行重组数据集合再进行提示信息">
-    <p>本例中请键入任意字符串显示查看效果，自动完成组件根据键入的字符串从新获取提示信息数据集动态变化</p>
+<Block Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]">
+    <p>@Localizer["P4"]</p>
     <div style="width: 200px;">
         <AutoComplete Items="@Items" ValueChanged="@OnValueChanged" />
     </div>
 </Block>
 
-<Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
-    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
-    <Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
-    <ValidateForm class="form-inline" Model="@Model">
-        <div class="row">
-            <div class="form-group col-12">
-                <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
-            </div>
-        </div>
+<Block Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]">
+    <p>@((MarkupString)Localizer["P5"].Value)</p>
+    <Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
+    <ValidateForm Model="@Model">
+        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
     </ValidateForm>
-    <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
-            </div>
-        </div>
-    </div>
-    <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="自定义城市" ShowLabel="true" />
-            </div>
-        </div>
-    </div>
+    <Divider Text="@Localizer["Divider2Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
+    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
+    <Divider Text="@Localizer["Divider3Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
+    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="@Localizer["AutoText"]" ShowLabel="true" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/AutoCompletes.razor.cs

@@ -41,42 +41,49 @@ namespace BootstrapBlazor.Shared.Pages
             // TODO: 移动到数据库中
             new AttributeItem() {
                 Name = "ShowLabel",
-                Description = "是否显示前置标签",
+                Description = Localizer["Att1"]!,
                 Type = "bool",
                 ValueList = "true|false",
                 DefaultValue = "true"
             },
             new AttributeItem() {
                 Name = "ChildContent",
-                Description = "内容",
+                Description = Localizer["Att2"]!,
                 Type = "RenderFragment",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "Items",
-                Description = "内容",
+                Description = Localizer["Att3"]!,
                 Type = "IEnumerable<string>",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "NoDataTip",
-                Description = "自动完成数据无匹配项时提示信息",
+                Description = Localizer["Att4"]!,
                 Type = "string",
                 ValueList = " — ",
-                DefaultValue = "无匹配数据"
+                DefaultValue = Localizer["Att4DefaultValue"]!
+            },
+            new AttributeItem() {
+                Name = "DisplayCount",
+                Description = Localizer["Att5"]!,
+                Type = "int?",
+                ValueList = " — ",
+                DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "ValueChanged",
-                Description = "文本框值变化时回调委托方法",
+                Description = Localizer["Att6"]!,
                 Type = "Action<string>",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "IsLikeMatch",
-                Description = "是否开启模糊匹配",
+                Description = Localizer["Att7"]!,
                 Type = "bool",
                 ValueList = "true|false",
                 DefaultValue = "false"
@@ -84,11 +91,19 @@ namespace BootstrapBlazor.Shared.Pages
             new AttributeItem()
             {
                 Name = "IgnoreCase",
-                Description = "匹配时是否忽略大小写",
+                Description = Localizer["Att8"]!,
                 Type = "bool",
                 ValueList = "true|false",
                 DefaultValue = "true"
             },
+            new AttributeItem()
+            {
+                Name = "CustomFilter",
+                Description = Localizer["Att9"]!,
+                Type = "Func<Task<IEnumerable<string>>>",
+                ValueList = " — ",
+                DefaultValue = " — "
+            }
         };
     }
 }

src/BootstrapBlazor.Shared/Pages/Samples/Avatars.razor

@@ -30,7 +30,7 @@
 
 <Block Title="展示类型" Introduction="支持三种类型：图标、图片和字符">
     <div class="d-flex justify-content-between align-items-center">
-        <Avatar IsCircle="true" IsIcon="true" />
+        <Avatar IsCircle="true" IsIcon="true" Icon="fa fa-user" />
         <Avatar IsCircle="true" Url="_content/BootstrapBlazor.Shared/images/Argo-C.png" />
         <Avatar IsCircle="true" IsText="true" Text="User" />
     </div>
@@ -47,4 +47,10 @@
     <div>第二幅圆形头像加载图片路径错误，所以边框为 <b class="text-danger">红色</b>，图片显示为默认图标</div>
 </Block>
 
+<Block Title="异步加载" Introduction="适用于图片地址由 <code>webapi</code> 等接口异步获取的场景">
+    <div class="d-flex justify-content-between align-items-center">
+        <Avatar IsCircle="true" GetUrlAsync="@GetUrlAsync" />
+    </div>
+</Block>
+
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/Avatars.razor.cs

@@ -4,6 +4,7 @@
 
 using BootstrapBlazor.Shared.Common;
 using System.Collections.Generic;
+using System.Threading.Tasks;
 
 namespace BootstrapBlazor.Shared.Pages
 {
@@ -12,11 +13,17 @@ namespace BootstrapBlazor.Shared.Pages
     /// </summary>
     public sealed partial class Avatars
     {
+        private async Task<string> GetUrlAsync()
+        {
+            // 模拟异步获取图像地址
+            await Task.Delay(500);
+            return "_content/BootstrapBlazor.Shared/images/Argo-C.png";
+        }
         /// <summary>
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        private static IEnumerable<AttributeItem> GetAttributes() => new[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {
@@ -74,6 +81,13 @@ namespace BootstrapBlazor.Shared.Pages
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "GetUrlAsync",
+                Description = "获取 Image 头像路径地址异步回调委托",
+                Type = "Func<Task<string>>",
+                ValueList = " — ",
+                DefaultValue = " — "
             }
         };
     }

src/BootstrapBlazor.Shared/Pages/Samples/Badges.razor

@@ -5,53 +5,47 @@
 <h4>出现在按钮、图标旁的数字或状态标记</h4>
 
 <Block Title="基础用法" Introduction="提供各种颜色的徽章小挂件组件">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
+        <div class="row g-3">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Primary">primary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Secondary">secondary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Success">success</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Danger">danger</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Warning">warning</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Info">info</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Dark">dark</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge Color="Color.Light">light</Badge></div>
         </div>
-    </div>
 </Block>
 
 <Block Title="胶囊徽章" Introduction='通过属性 <code>IsPill="true"</code> 设置圆角的徽章挂件'>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
+        <div class="row g-3">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Primary">primary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Secondary">secondary</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Success">success</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Danger">danger</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Warning">warning</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Info">info</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Dark">dark</Badge></div>
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Badge IsPill="true" Color="Color.Light">light</Badge></div>
         </div>
-    </div>
 </Block>
 
 <Block Title="按钮内徽章" Introduction="按钮内部徽章">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+        <div class="row g-3">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                 <Button Color="Color.Primary">
                     <i class="fa fa-tv"></i>
                     <span>主要按钮</span>
                     <Badge Color="Color.Danger">1</Badge>
                 </Button>
             </div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
+            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                 <div class="badge-widget">
                     <i class="fa fa-tv"></i>
                     <Badge Color="Color.Success"><span style="padding: 0 2px;">8</span></Badge>
                 </div>
             </div>
         </div>
-    </div>
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/BarcodeReaders.razor

@@ -20,7 +20,7 @@
         <li>点击关闭按钮关闭摄像头</li>
     </ul>
     <BarcodeReader OnInit="@OnInit" OnResult="@OnResult" OnStart="@OnStart" OnClose="@OnClose" OnError="@OnError" />
-    <Logger @ref="Trace" class="mt-3" />
+    <BlockLogger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="基本用法" Introduction="通过静态图片进行扫码识别">
@@ -31,7 +31,7 @@
         <li>开始识别条码</li>
     </ul>
     <BarcodeReader ScanType="@ScanType.Image" OnResult="@OnImageResult" OnError="@OnImageError" />
-    <Logger @ref="Trace2" class="mt-3" />
+    <BlockLogger @ref="Trace2" class="mt-3" />
 </Block>
 
 <Block Title="自动开始" Introduction="通过设置 <code>AutoStart</code> 参数设置自动开启摄像头">
@@ -42,7 +42,7 @@
         <li>开始识别条码</li>
     </ul>
     <BarcodeReader OnResult="@OnImageResult" OnError="@OnImageError" AutoStart="true" />
-    <Logger @ref="Trace2" class="mt-3" />
+    <BlockLogger @ref="Trace2" class="mt-3" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/BarcodeReaders.razor.cs

@@ -16,9 +16,9 @@ namespace BootstrapBlazor.Shared.Pages
     /// </summary>
     public sealed partial class BarcodeReaders
     {
-        private Logger? Trace { get; set; }
+        private BlockLogger? Trace { get; set; }
 
-        private Logger? Trace2 { get; set; }
+        private BlockLogger? Trace2 { get; set; }
 
         private Task OnInit(IEnumerable<DeviceItem> devices)
         {

src/BootstrapBlazor.Shared/Pages/Samples/Breadcrumbs.razor

@@ -1,9 +1,10 @@
 @page "/breadcrumbs"
+@inject IStringLocalizer<Breadcrumbs> Localizer
 
-<h3>Breadcrumb 面包屑</h3>
+<h3>@Localizer["Title"]</h3>
 
-<h4>显示当前页面的路径，快速返回之前的任意页面。</h4>
+<h4>@Localizer["H1"]</h4>
 
-<Block Title="基础用法" Introduction="适用广泛的基础用法。">
+<Block Title="@Localizer["Blcok1Title"]" Introduction="@Localizer["Blcok1Intro"]">
     <Breadcrumb Value="@DataSource" />
 </Block>

src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor

@@ -1,157 +1,141 @@
 @page "/buttons"
+@inject IStringLocalizer<Buttons> Localizer
 
-<h3>Button 按钮</h3>
+<h3>@Localizer["Title"]</h3>
 
-<h4>常用的操作按钮。</h4>
+<h4>@Localizer["H1"]</h4>
 
-<Block Title="基础用法" Introduction="基础的按钮用法。">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>
-        </div>
+<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Primary">@Localizer["Button1Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Secondary">@Localizer["Button2Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Success">@Localizer["Button3Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Danger">@Localizer["Button4Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Warning">@Localizer["Button5Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Info">@Localizer["Button6Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Dark">@Localizer["Button7Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Light">@Localizer["Button8Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Link">@Localizer["Button9Text"]</Button></div>
     </div>
-    <Logger @ref="Trace" class="mt-3" />
+    <BlockLogger @ref="Trace" class="mt-3" />
 </Block>
 
-<Block Title="不同风格" Introduction="通过设置 <code>ButtonStyle</code> 来显示不同的按钮风格">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
-                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>
-            </div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
-                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">次要按钮</Button>
-            </div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
-                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">成功按钮</Button>
-            </div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
-                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">危险按钮</Button>
-            </div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
-                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">警告按钮</Button>
-            </div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
-                <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
-                </Button>
-            </div>
+<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">@Localizer["Button1Text"]</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">@Localizer["Button2Text"]</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">@Localizer["Button3Text"]</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">@Localizer["Button4Text"]</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">@Localizer["Button5Text"]</Button>
+        </div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
+            <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
+            </Button>
         </div>
     </div>
 </Block>
 
-<Block Title="Outline 按钮" Introduction='通过设置 <code>IsOutline="true"</code> 设置按钮边框颜色样式。'>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">主要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">次要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">成功按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">危险按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">警告按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">信息按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">高亮按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">链接按钮</Button></div>
-        </div>
+<Block Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]'>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">@Localizer["Button1Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">@Localizer["Button2Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">@Localizer["Button3Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">@Localizer["Button4Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">@Localizer["Button5Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">@Localizer["Button6Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">@Localizer["Button7Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">@Localizer["Button8Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">@Localizer["Button9Text"]</Button></div>
     </div>
 </Block>
 
-<Block Title="不同尺寸" Introduction='Button 组件提供除了默认值以外的多种尺寸，通过设置 <code>Size</code> 属性可以在不同场景下选择合适的按钮尺寸。'>
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">小按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">中等按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">大按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button></div>
-            <div class="form-group col-12"><Button IsBlock="true" Color="Color.Primary">Block 按钮</Button></div>
-        </div>
+<Block Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]'>
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">@Localizer["Button10Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">@Localizer["Button11Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">@Localizer["Button12Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">@Localizer["Button13Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">@Localizer["Button14Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">@Localizer["Button15Text"]</Button></div>
+        <div class="col-12"><Button IsBlock="true" Color="Color.Primary">@Localizer["Button16Text"]</Button></div>
     </div>
 </Block>
 
-<Block Title="禁用状态" Introduction="按钮不可用状态。通过设置 <code>IsDisabled</code> 属性">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">主要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">成功按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">危险按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">警告按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">信息按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">高亮按钮</Button></div>
-            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">链接按钮</Button></div>
-        </div>
+<Block Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]">
+    <div class="row g-3">
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">@Localizer["Button1Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">@Localizer["Button2Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">@Localizer["Button3Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">@Localizer["Button4Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">@Localizer["Button5Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">@Localizer["Button6Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">@Localizer["Button7Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">@Localizer["Button8Text"]</Button></div>
+        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">@Localizer["Button9Text"]</Button></div>
     </div>
 
-    <p class="mt-3">通过 <code>OnClick</code> 回调方法中设置自身 <code>IsDisabled</code> 属性，或者调用组件实例方法 <code>SetDisable</code> 均可实现按钮禁用效果</p>
-    <p>由于使用 <code>IsDisabled</code> 属性时，需要显式手动调用 <code>StateHasChanged</code> 方法，会导致按钮所在组件整体刷新，建议使用实例方法 <code>SetDisable</code> 仅对按钮进行刷新</p>
+    <p class="mt-3">@((MarkupString)Localizer["P1"].Value)</p>
+    <p>@((MarkupString)Localizer["P2"].Value)</p>
 
-    <p><b>性能比较：</b></p>
+    <p><b>@Localizer["b1"]</b></p>
     <ul class="ul-demo">
-        <li>使用 <code>IsDisabled</code> 属性设置时本页面传输量为 <code>4.8K</code></li>
-        <li>使用 <code>SetDisable</code> 方法设置时本页面传输量为 <code>280B</code></li>
+        <li>@((MarkupString)Localizer["Li1"].Value)</li>
+        <li>@((MarkupString)Localizer["Li2"].Value)</li>
     </ul>
-    <div class="form-inline">
-        <div class="form-row">
-            <div class="form-group col-12">
-                <Button Text="点击被禁用" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
-                    <Tooltip Title="点击按钮后由于被禁用 Tooltip 被销毁" Placement="Placement.Top" Trigger="hover" />
-                </Button>
-                <Button Color="Color.Info" Text="点击后使第一个按钮可用" OnClickWithoutRender="@ClickButton2" class="ml-3"></Button>
-            </div>
+    <div class="row g-3">
+        <div class="col-12">
+            <Button Text="@Localizer["Button17Text"]" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
+                <Tooltip Title="@Localizer["TooltiTitle"]" Placement="Placement.Top" Trigger="hover" />
+            </Button>
+            <Button Color="Color.Info" Text="@Localizer["Button23Text"]" OnClickWithoutRender="@ClickButton2" class="ms-3"></Button>
         </div>
     </div>
 </Block>
 
-<Block Title="按钮组" Introduction="由多个按钮组成一个组合按钮">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-auto">
-                <div class="btn-group" role="group">
-                    <Button Color="Color.Primary">按钮一</Button>
-                    <Button Color="Color.Success">按钮二</Button>
-                </div>
-            </div>
+<Block Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]">
+    <div class="btn-group" role="group">
+        <Button Color="Color.Primary">@Localizer["Button18Tetx"]</Button>
+        <Button Color="Color.Success">@Localizer["Button19Text"]</Button>
+    </div>
+</Block>
+
+<Block Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]">
+    <div class="row g-3">
+        <div class="col-auto">
+            <Button Color="Color.Primary" Icon="fa fa-fa" Text="@Localizer["Button20Text"]"></Button>
+        </div>
+        <div class="col-auto">
+            <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="@Localizer["Button21Text"]"></Button>
         </div>
     </div>
 </Block>
 
-<Block Title="带图标的按钮" Introduction="通过设置 <code>Icon</code> 属性对按钮图标进行设置，图标为字体字符串如使用 <code>font-awesome</code> 图标时 <code>fa fa-fa</code>">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-auto">
-                <Button Color="Color.Primary" Icon="fa fa-fa" Text="状态按钮"></Button>
-            </div>
-            <div class="form-group col-auto">
-                <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="进度按钮"></Button>
-            </div>
+<Block Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]">
+    <div class="row g-3">
+        <div class="col-auto">
+            <WinButton Text="@Localizer["Button18Tetx"]" OnClick="@ClickButtonShowText"></WinButton>
+        </div>
+        <div class="col-auto">
+            <WinButton Text="@Localizer["Button19Text"]" OnClick="@ClickButtonShowText"></WinButton>
+        </div>
+        <div class="col-auto">
+            @ButtonText
         </div>
     </div>
 </Block>
 
-<Block Title="二次封装按钮" Introduction="通过设置 <code>WinButton</code> 组件的 <code>Text</code> 属性对按钮显示文字进行设置，点击按钮是右侧显示被点击按钮的文字">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-auto">
-                <WinButton Text="按钮一" OnClick="@ClickButtonShowText"></WinButton>
-            </div>
-            <div class="form-group col-auto">
-                <WinButton Text="按钮二" OnClick="@ClickButtonShowText"></WinButton>
-            </div>
-            <div class="form-group col-auto">
-                @ButtonText
-            </div>
-        </div>
-    </div>
+<Block Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]">
+    <p>@((MarkupString)Localizer["P3"].Value)</p>
+    <Button Text="@Localizer["Button22Text"]" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs

@@ -20,7 +20,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// <summary>
         /// 
         /// </summary>
-        private Logger? Trace { get; set; }
+        private BlockLogger? Trace { get; set; }
 
         [NotNull]
         private Button? ButtonDisableDemo { get; set; }
@@ -58,6 +58,8 @@ namespace BootstrapBlazor.Shared.Pages
             return Task.CompletedTask;
         }
 
+        private static Task ClickAsyncButton() => Task.Delay(5000);
+
         /// <summary>
         /// 获得事件方法
         /// </summary>
@@ -67,13 +69,13 @@ namespace BootstrapBlazor.Shared.Pages
             new EventItem()
             {
                 Name = "OnClick",
-                Description="点击按钮时触发此事件",
+                Description = Localizer["EventDesc1"]!,
                 Type ="EventCallback<MouseEventArgs>"
             },
             new EventItem()
             {
                 Name = "OnClickWithoutRender",
-                Description="点击按钮时触发此事件并且不刷新当前组件，用于提高性能时使用",
+                Description = Localizer["EventDesc2"]!,
                 Type ="Func<Task>"
             }
         };
@@ -87,77 +89,91 @@ namespace BootstrapBlazor.Shared.Pages
             // TODO: 移动到数据库中
             new AttributeItem() {
                 Name = "Color",
-                Description = "颜色",
+                Description = Localizer["Att1"]!,
                 Type = "Color",
                 ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
                 DefaultValue = "Primary"
             },
             new AttributeItem() {
                 Name = "Icon",
-                Description = "图标",
+                Description = Localizer["Att2"]!,
                 Type = "string",
                 ValueList = "",
                 DefaultValue = ""
             },
+            new AttributeItem() {
+                Name = "LoadingIcon",
+                Description = Localizer["Att3"]!,
+                Type = "string",
+                ValueList = "",
+                DefaultValue = "fa fa-fw fa-spin fa-spinner"
+            },
             new AttributeItem() {
                 Name = "Text",
-                Description = "显示文字",
+                Description = Localizer["Att4"]!,
                 Type = "string",
                 ValueList = "",
                 DefaultValue = ""
             },
             new AttributeItem() {
                 Name = "Size",
-                Description = "尺寸",
+                Description = Localizer["Att5"]!,
                 Type = "Size",
                 ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
                 DefaultValue = "None"
             },
             new AttributeItem() {
                 Name = "Class",
-                Description = "样式",
+                Description = Localizer["Att6"]!,
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "IsBlock",
-                Description = "填充按钮",
+                Description = Localizer["Att7"]!,
                 Type = "boolean",
                 ValueList = " — ",
                 DefaultValue = "false"
             },
             new AttributeItem() {
                 Name = "IsDisabled",
-                Description = "是否禁用",
+                Description = Localizer["Att8"]!,
                 Type = "boolean",
                 ValueList = " — ",
                 DefaultValue = "false"
             },
             new AttributeItem() {
                 Name = "IsOutline",
-                Description = "是否边框",
+                Description = Localizer["Att9"]!,
+                Type = "boolean",
+                ValueList = " — ",
+                DefaultValue = "false"
+            },
+            new AttributeItem() {
+                Name = "IsAsync",
+                Description = Localizer["Att10"]!,
                 Type = "boolean",
                 ValueList = " — ",
                 DefaultValue = "false"
             },
             new AttributeItem() {
                 Name = "ChildContent",
-                Description = "内容",
+                Description = Localizer["Att11"]!,
                 Type = "RenderFragment",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "ButtonStyle",
-                Description = "按钮风格",
+                Description = Localizer["Att12"]!,
                 Type = "ButtonStyle",
                 ValueList = "None / Circle / Round",
                 DefaultValue = "None"
             },
             new AttributeItem() {
                 Name = "ButtonType",
-                Description = "按钮类型",
+                Description = Localizer["Att13"]!,
                 Type = "ButtonType",
                 ValueList = "Button / Submit / Reset",
                 DefaultValue = "Button"
@@ -173,7 +189,7 @@ namespace BootstrapBlazor.Shared.Pages
             new MethodItem()
             {
                 Name = "SetDisable",
-                Description = "设置按钮是否可用",
+                Description = Localizer["MethodDesc1"]!,
                 Parameters = "disable",
                 ReturnValue = " — "
             }

src/BootstrapBlazor.Shared/Pages/Samples/Calendars.razor

@@ -6,12 +6,12 @@
 
 <Block Title="基础用法" Introduction="基础的日历显示。">
     <Calendar ValueChanged="@OnValueChanged" />
-    <Logger @ref="Trace" class="mt-3" />
+    <BlockLogger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="数据双向绑定" Introduction="日历框选择时间时数据自动更新文本框">
     <Calendar @bind-Value="@BindValue" />
-    <BootstrapInput TItem="DateTime" @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
+    <BootstrapInput @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
 </Block>
 
 <Block Title="按周展示" Introduction="通过设置属性 <code></code>">

src/BootstrapBlazor.Shared/Pages/Samples/Calendars.razor.cs

@@ -17,7 +17,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// <summary>
         /// 
         /// </summary>
-        private Logger? Trace { get; set; }
+        private BlockLogger? Trace { get; set; }
 
         private DateTime BindValue { get; set; } = DateTime.Today;
 

src/BootstrapBlazor.Shared/Pages/Samples/Cameras.razor

@@ -12,7 +12,7 @@
         <li>点击关闭按钮关闭摄像头</li>
     </ul>
     <Camera OnInit="@OnInit" OnStart="@OnStart" OnClose="@OnClose" OnError="@OnError" OnCapture="@OnCapture" />
-    <Logger @ref="Trace" class="mt-3" />
+    <BlockLogger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="显示预览" Introduction="通过设置 <code>ShowPreview</code> 属性控制是否显示照片预览">

src/BootstrapBlazor.Shared/Pages/Samples/Cameras.razor.cs

@@ -6,6 +6,7 @@ using BootstrapBlazor.Components;
 using BootstrapBlazor.Shared.Common;
 using BootstrapBlazor.Shared.Pages.Components;
 using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
 using System.Linq;
 using System.Threading.Tasks;
 
@@ -16,41 +17,37 @@ namespace BootstrapBlazor.Shared.Pages
     /// </summary>
     public sealed partial class Cameras
     {
-#nullable disable
-        /// <summary>
-        /// 
-        /// </summary>
-        private Logger Trace { get; set; }
-#nullable restore
+        [NotNull]
+        private BlockLogger? Trace { get; set; }
 
         private Task OnInit(IEnumerable<DeviceItem> devices)
         {
             var cams = string.Join("", devices.Select(i => i.Label));
-            Trace?.Log($"初始化摄像头完成 {cams}");
+            Trace.Log($"初始化摄像头完成 {cams}");
             return Task.CompletedTask;
         }
 
         private Task OnError(string err)
         {
-            Trace?.Log($"发生错误 {err}");
+            Trace.Log($"发生错误 {err}");
             return Task.CompletedTask;
         }
 
         private Task OnStart()
         {
-            Trace?.Log("打开摄像头");
+            Trace.Log("打开摄像头");
             return Task.CompletedTask;
         }
 
         private Task OnClose()
         {
-            Trace?.Log("关闭摄像头");
+            Trace.Log("关闭摄像头");
             return Task.CompletedTask;
         }
 
         private Task OnCapture()
         {
-            Trace?.Log("拍照完成");
+            Trace.Log("拍照完成");
             return Task.CompletedTask;
         }
 

src/BootstrapBlazor.Shared/Pages/Samples/Captchas.razor

@@ -6,7 +6,7 @@
 
 <Block Title="基础功能" Introduction="进行简单的人机识别">
     <Captcha ImagesPath="@ImagesPath" @ref="Captcha" OnValid="@OnValid" />
-    <Logger @ref="Trace" class="mt-3" />
+    <BlockLogger @ref="Trace" class="mt-3" />
 </Block>
 
 <Block Title="指定图床路径与名称" Introduction="通过 <code>ImagesPath</code> 设置图床路径，通过 <code>ImagesName</code> 设置图片名称，后台通过计算拼接随机图片全路径名称">

src/BootstrapBlazor.Shared/Pages/Samples/Captchas.razor.cs

@@ -35,7 +35,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// <summary>
         /// 
         /// </summary>
-        private Logger? Trace { get; set; }
+        private BlockLogger? Trace { get; set; }
 
         private void OnValid(bool ret)
         {
@@ -70,7 +70,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        private static IEnumerable<AttributeItem> GetAttributes() => new[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {
@@ -149,7 +149,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// 获得事件方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<EventItem> GetEvents() => new EventItem[]
+        private static IEnumerable<EventItem> GetEvents() => new[]
         {
             new EventItem()
             {
@@ -163,7 +163,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// 获得事件方法
         /// </summary>
         /// <returns></returns>
-        private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
+        private static IEnumerable<MethodItem> GetMethods() => new[]
         {
             new MethodItem()
             {

src/BootstrapBlazor.Shared/Pages/Samples/Cards.razor

@@ -1,11 +1,11 @@
-@page "/cards"
+@page "/cards"
 
 <h3>Card 卡片</h3>
 
 <h4>将信息聚合在卡片容器中展示</h4>
 
 <Block Title="Card 卡片组件" Introduction="Card简单示例">
-    <Card style="width: 18rem;">
+    <Card>
         <CardBody>
             <h5 class="card-title">Card title</h5>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -47,70 +47,84 @@
 </Block>
 
 <Block Title="带有边框颜色的卡片" Introduction="通过设置，<code>Color</code> 使border和Body具有相应的颜色">
-    <div class="row flex">
-        <Card Color="Color.Primary" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Primary card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Secondary" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Success card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Success" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Secondary card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Warning" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Warning card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Danger" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Danger card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Info" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Info card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
-        <Card Color="Color.Dark" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
-            <CardHeader>
-                Header
-            </CardHeader>
-            <CardBody>
-                <h5 class="card-title">Dark card title</h5>
-                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            </CardBody>
-        </Card>
+    <div class="row g-3">
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Primary" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Primary card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Secondary" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Secondary card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Success" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Success card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Warning" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Warning card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Danger" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Danger card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Info" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Info card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
+        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
+            <Card Color="Color.Dark" IsCenter="true">
+                <CardHeader>
+                    Header
+                </CardHeader>
+                <CardBody>
+                    <h5 class="card-title">Dark card title</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                </CardBody>
+            </Card>
+        </div>
     </div>
 </Block>
 

src/BootstrapBlazor.Shared/Pages/Samples/Carousels.razor

@@ -5,34 +5,16 @@
 <h4>在有限空间内，循环播放同一类型的图片、文字等内容</h4>
 
 <Block Title="基础用法" Introduction="适用广泛的基础用法，通过设置 <code>Items</code> 属性值对组件进行图片的绑定，值为图片路径数组">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Carousel Images="@Images" Width="280"></Carousel>
-            </div>
-        </div>
-    </div>
+    <Carousel Images="@Images" Width="280"></Carousel>
 </Block>
 
 <Block Title="淡入淡出" Introduction="通过设置 <code>IsFade</code> 属性，图片切换时采用淡入淡出效果">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
-            </div>
-        </div>
-    </div>
+    <Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
 </Block>
 
 <Block Title="点击图片回调事件" Introduction="通过设置 <code>OnClick</code> 属性后，点击 <code>Image</code> 后触发 <code>OnClick</code> 回调委托">
-    <div class="form-inline">
-        <div class="row">
-            <div class="form-group col-12">
-                <Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
-            </div>
-        </div>
-    </div>
-    <Logger @ref="Trace" class="mt-3" />
+    <Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
+    <BlockLogger @ref="Trace" class="mt-3" />
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />