From 0cafd49e3c1a57bd547fe3a11621112443ac690e Mon Sep 17 00:00:00 2001
From: liangshiwei <liangshiw@outlook.com>
Date: Wed, 26 May 2021 18:16:39 +0800
Subject: [PATCH] Move documents to setting-management.md

---
 docs/en/Modules/Setting-Management.md         | 190 ++++++++++++++++-
 docs/en/UI/Angular/Custom-Setting-Page.md     |  37 ----
 docs/en/UI/AspNetCore/Custom-Setting-Page.md  |  82 --------
 docs/en/UI/Blazor/Custom-Setting-Page.md      |  64 ------
 docs/en/docs-nav.json                         |  12 --
 .../Angular => }/images/custom-settings.png   | Bin
 docs/zh-Hans/Modules/Setting-Management.md    | 192 +++++++++++++++++-
 .../zh-Hans/UI/Angular/Custom-Setting-Page.md |  41 ----
 .../UI/AspNetCore/Custom-Setting-Page.md      |  82 --------
 docs/zh-Hans/UI/Blazor/Custom-Setting-Page.md |  64 ------
 docs/zh-Hans/docs-nav.json                    |  17 --
 .../Angular => }/images/custom-settings.png   | Bin
 12 files changed, 380 insertions(+), 401 deletions(-)
 delete mode 100644 docs/en/UI/Angular/Custom-Setting-Page.md
 delete mode 100644 docs/en/UI/AspNetCore/Custom-Setting-Page.md
 delete mode 100644 docs/en/UI/Blazor/Custom-Setting-Page.md
 rename docs/en/{UI/Angular => }/images/custom-settings.png (100%)
 delete mode 100644 docs/zh-Hans/UI/Angular/Custom-Setting-Page.md
 delete mode 100644 docs/zh-Hans/UI/AspNetCore/Custom-Setting-Page.md
 delete mode 100644 docs/zh-Hans/UI/Blazor/Custom-Setting-Page.md
 rename docs/zh-Hans/{UI/Angular => }/images/custom-settings.png (100%)

diff --git a/docs/en/Modules/Setting-Management.md b/docs/en/Modules/Setting-Management.md
index dff8da3f8e..255efc9a5f 100644
--- a/docs/en/Modules/Setting-Management.md
+++ b/docs/en/Modules/Setting-Management.md
@@ -83,4 +83,192 @@ Setting Management module is extensible, just like the [setting system](../Setti
 * `TenantSettingManagementProvider`: Gets or sets the setting value for a tenant.
 * `UserSettingManagementProvider`: Gets the setting value for a user.
 
-`ISettingManager` uses the setting management providers on get/set methods. Typically, every setting management provider defines extension methods on the `ISettingManagement` service (like `SetForUserAsync` defined by the user setting management provider).
\ No newline at end of file
+`ISettingManager` uses the setting management providers on get/set methods. Typically, every setting management provider defines extension methods on the `ISettingManagement` service (like `SetForUserAsync` defined by the user setting management provider).
+
+## Setting Management UI
+
+Setting Mangement module provided the email setting UI by default, and it is extensible; You can add your tabs to this page for your application settings.
+
+### MVC UI
+
+#### Create a setting View Component
+
+Create `MySettingGroup` folder under the `Components` folder. Add a new view component. Name it as `MySettingGroupViewComponent`:
+
+![MySettingGroupViewComponent](../images/my-setting-group-view-component.png)
+
+Open the `MySettingGroupViewComponent.cs` and change the whole content as shown below:
+
+```csharp
+public class MySettingGroupViewComponent : AbpViewComponent
+{
+    public virtual IViewComponentResult Invoke()
+    {
+        return View("~/Components/MySettingGroup/Default.cshtml");
+    }
+}
+```
+
+> You can also use the `InvokeAsync` method, In this example, we use the `Invoke` method.
+
+#### Default.cshtml
+
+Create a `Default.cshtml` file under the `MySettingGroup` folder.
+
+Open the `Default.cshtml` and change the whole content as shown below:
+
+```html
+<div>
+  <p>My setting group page</p>
+</div>
+```
+
+#### BookStoreSettingPageContributor
+
+Create a `BookStoreSettingPageContributor.cs` file under the `Settings` folder:
+
+![BookStoreSettingPageContributor](../images/my-setting-group-page-contributor.png)
+
+The content of the file is shown below:
+
+```csharp
+public class BookStoreSettingPageContributor : ISettingPageContributor
+{
+    public Task ConfigureAsync(SettingPageCreationContext context)
+    {
+        context.Groups.Add(
+            new SettingPageGroup(
+                "Volo.Abp.MySettingGroup",
+                "MySettingGroup",
+                typeof(MySettingGroupViewComponent)
+            )
+        );
+
+        return Task.CompletedTask;
+    }
+
+    public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context)
+    {
+        // You can check the permissions here
+        return Task.FromResult(true);
+    }
+}
+```
+
+Open the `BookStoreWebModule.cs` file and add the following code:
+
+```csharp
+Configure<SettingManagementPageOptions>(options =>
+{
+    options.Contributors.Add(new BookStoreSettingPageContributor());
+});
+```
+
+#### Run the Application
+
+Navigate to `/SettingManagement` route to see the changes:
+
+![Custom Settings Tab](../images/my-setting-group-ui.png)
+
+### Blazor UI
+
+#### Create a Razor Component
+
+Create `MySettingGroup` folder under the `Pages` folder. Add a new razor component. Name it as `MySettingGroupComponent`:
+
+![MySettingGroupComponent](../images/my-setting-group-component.png)
+
+Open the `MySettingGroupComponent.razor` and change the whole content as shown below:
+
+```csharp
+<Row>
+    <p>my setting group</p>
+</Row>
+```
+
+#### BookStoreSettingComponentContributor
+
+Create a `BookStoreSettingComponentContributor.cs` file under the `Settings` folder:
+
+![BookStoreSettingComponentContributor](../images/my-setting-group-component-contributor.png)
+
+The content of the file is shown below:
+
+```csharp
+public class BookStoreSettingComponentContributor : ISettingComponentContributor
+{
+    public Task ConfigureAsync(SettingComponentCreationContext context)
+    {
+        context.Groups.Add(
+            new SettingComponentGroup(
+                "Volo.Abp.MySettingGroup",
+                "MySettingGroup",
+                typeof(MySettingGroupComponent)
+            )
+        );
+
+        return Task.CompletedTask;
+    }
+
+    public Task<bool> CheckPermissionsAsync(SettingComponentCreationContext context)
+    {
+        // You can check the permissions here
+        return Task.FromResult(true);
+    }
+}
+```
+
+Open the `BookStoreBlazorModule.cs` file and add the following code:
+
+```csharp
+Configure<SettingManagementComponentOptions>(options =>
+{
+    options.Contributors.Add(new BookStoreSettingComponentContributor());
+});
+```
+
+#### Run the Application
+
+Navigate to `/setting-management` route to see the changes:
+
+![Custom Settings Tab](../images/my-setting-group-blazor.png)
+
+### Angular UI
+
+#### Create a Component
+
+Create a component with the following command:
+
+```bash
+yarn ng generate component my-settings
+```
+
+Open the `app.component.ts` and modify the file as shown below:
+
+```js
+import { Component } from '@angular/core';
+import { SettingTabsService } from '@abp/ng.core'; // imported SettingTabsService
+import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent
+
+@Component(/* component metadata */)
+export class AppComponent {
+  constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent
+  {
+    // added below
+    settingTabs.add([
+      {
+        name: 'MySettings',
+        order: 1,
+        requiredPolicy: 'policy key here',
+        component: MySettingsComponent,
+      },
+    ]);
+  }
+}
+```
+
+#### Run the Application
+
+Navigate to `/setting-management` route to see the changes:
+
+![Custom Settings Tab](../images/custom-settings.png)
\ No newline at end of file
diff --git a/docs/en/UI/Angular/Custom-Setting-Page.md b/docs/en/UI/Angular/Custom-Setting-Page.md
deleted file mode 100644
index 9a17f6ad7b..0000000000
--- a/docs/en/UI/Angular/Custom-Setting-Page.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Custom Setting Page
-
-There are several settings tabs from different modules. You can add a custom setting page to your project.
-
-1. Create a component with the following command:
-
-```bash
-yarn ng generate component my-settings
-```
-
-2. Open the `app.component.ts` and modify the file as shown below:
-
-```js
-import { Component } from '@angular/core';
-import { SettingTabsService } from '@abp/ng.core'; // imported SettingTabsService
-import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent
-
-@Component(/* component metadata */)
-export class AppComponent {
-  constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent
-  {
-    // added below
-    settingTabs.add([
-      {
-        name: 'MySettings',
-        order: 1,
-        requiredPolicy: 'policy key here',
-        component: MySettingsComponent,
-      },
-    ]);
-  }
-}
-```
-
-Navigate to `/setting-management` route to see the changes:
-
-![Custom Settings Tab](./images/custom-settings.png)
diff --git a/docs/en/UI/AspNetCore/Custom-Setting-Page.md b/docs/en/UI/AspNetCore/Custom-Setting-Page.md
deleted file mode 100644
index 5a41b15dd1..0000000000
--- a/docs/en/UI/AspNetCore/Custom-Setting-Page.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Custom Setting Page
-
-There are several settings tabs from different modules. You can add a custom setting page to your project.
-
-### Create a setting View Component
-
-Create `MySettingGroup` folder under the `Components` folder. Add a new view component. Name it as `MySettingGroupViewComponent`:
-
-![MySettingGroupViewComponent](../../images/my-setting-group-view-component.png)
-
-Open the `MySettingGroupViewComponent.cs` and change the whole content as shown below:
-
-```csharp
-public class MySettingGroupViewComponent : AbpViewComponent
-{
-    public virtual IViewComponentResult Invoke()
-    {
-        return View("~/Components/MySettingGroup/Default.cshtml");
-    }
-}
-```
-
-> You can also use the `InvokeAsync` method, In this example, we use the `Invoke` method.
-
-### Default.cshtml
-
-Create a `Default.cshtml` file under the `MySettingGroup` folder.
-
-Open the `Default.cshtml` and change the whole content as shown below:
-
-```html
-<div>
-  <p>My setting group page</p>
-</div>
-```
-
-### BookStoreSettingPageContributor
-
-Create a `BookStoreSettingPageContributor.cs` file under the `Settings` folder:
-
-![BookStoreSettingPageContributor](../../images/my-setting-group-page-contributor.png)
-
-The content of the file is shown below:
-
-```csharp
-public class BookStoreSettingPageContributor : ISettingPageContributor
-{
-    public Task ConfigureAsync(SettingPageCreationContext context)
-    {
-        context.Groups.Add(
-            new SettingPageGroup(
-                "Volo.Abp.MySettingGroup",
-                "MySettingGroup",
-                typeof(MySettingGroupViewComponent)
-            )
-        );
-
-        return Task.CompletedTask;
-    }
-
-    public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context)
-    {
-        // You can check the permissions here
-        return Task.FromResult(true);
-    }
-}
-```
-
-Open the `BookStoreWebModule.cs` file and add the following code:
-
-```csharp
-Configure<SettingManagementPageOptions>(options =>
-{
-    options.Contributors.Add(new BookStoreSettingPageContributor());
-});
-```
-
-### Run the Application
-
-Navigate to `/SettingManagement` route to see the changes:
-
-![Custom Settings Tab](../../images/my-setting-group-ui.png)
\ No newline at end of file
diff --git a/docs/en/UI/Blazor/Custom-Setting-Page.md b/docs/en/UI/Blazor/Custom-Setting-Page.md
deleted file mode 100644
index 41e70d3d02..0000000000
--- a/docs/en/UI/Blazor/Custom-Setting-Page.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Custom Setting Page
-
-There are several settings tabs from different modules. You can add a custom setting page to your project.
-
-### Create a Razor Component
-
-Create `MySettingGroup` folder under the `Pages` folder. Add a new razor component. Name it as `MySettingGroupComponent`:
-
-![MySettingGroupComponent](../../images/my-setting-group-component.png)
-
-Open the `MySettingGroupComponent.razor` and change the whole content as shown below:
-
-```csharp
-<Row>
-    <p>my setting group</p>
-</Row>
-```
-
-### BookStoreSettingComponentContributor
-
-Create a `BookStoreSettingComponentContributor.cs` file under the `Settings` folder:
-
-![BookStoreSettingComponentContributor](../../images/my-setting-group-component-contributor.png)
-
-The content of the file is shown below:
-
-```csharp
-public class BookStoreSettingComponentContributor : ISettingComponentContributor
-{
-    public Task ConfigureAsync(SettingComponentCreationContext context)
-    {
-        context.Groups.Add(
-            new SettingComponentGroup(
-                "Volo.Abp.MySettingGroup",
-                "MySettingGroup",
-                typeof(MySettingGroupComponent)
-            )
-        );
-
-        return Task.CompletedTask;
-    }
-
-    public Task<bool> CheckPermissionsAsync(SettingComponentCreationContext context)
-    {
-        // You can check the permissions here
-        return Task.FromResult(true);
-    }
-}
-```
-
-Open the `BookStoreBlazorModule.cs` file and add the following code:
-
-```csharp
-Configure<SettingManagementComponentOptions>(options =>
-{
-    options.Contributors.Add(new BookStoreSettingComponentContributor());
-});
-```
-
-### Run the Application
-
-Navigate to `/setting-management` route to see the changes:
-
-![Custom Settings Tab](../../images/my-setting-group-blazor.png)
\ No newline at end of file
diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
index c07c5c6c03..869d5e8307 100644
--- a/docs/en/docs-nav.json
+++ b/docs/en/docs-nav.json
@@ -724,10 +724,6 @@
             {
               "text": "Page Toolbar Extensions",
               "path": "UI/AspNetCore/Page-Toolbar-Extensions.md"
-            },
-            {
-              "test": "Custom Setting Page",
-              "path": "UI/AspNetCore/Custom-Setting-Page.md"
             }
           ]
         },
@@ -841,10 +837,6 @@
             {
               "text": "Routing",
               "path": "UI/Blazor/Routing.md"
-            },
-            {
-              "test": "Custom Setting Page",
-              "path": "UI/Blazor/Custom-Setting-Page.md"
             }
           ]
         },
@@ -1013,10 +1005,6 @@
                   "text": "Component Replacement",
                   "path": "UI/Angular/Component-Replacement.md"
                 },
-                {
-                  "text": "Custom Setting Page",
-                  "path": "UI/Angular/Custom-Setting-Page.md"
-                },
                 {
                   "text": "Extensions",
                   "items": [
diff --git a/docs/en/UI/Angular/images/custom-settings.png b/docs/en/images/custom-settings.png
similarity index 100%
rename from docs/en/UI/Angular/images/custom-settings.png
rename to docs/en/images/custom-settings.png
diff --git a/docs/zh-Hans/Modules/Setting-Management.md b/docs/zh-Hans/Modules/Setting-Management.md
index fd87dd734c..acb4469fea 100644
--- a/docs/zh-Hans/Modules/Setting-Management.md
+++ b/docs/zh-Hans/Modules/Setting-Management.md
@@ -83,4 +83,194 @@ namespace Demo
 * `TenantSettingManagementProvider`: 获取或设定租户的设置值.
 * `UserSettingManagementProvider`: 获取或设定用户的设置值.
 
-`ISettingManager` 在 `get/set` 方法中使用设置管理提供程序. 通常每个设置程序提供程序都在 `ISettingManagement` 服务上定义了模块方法 (比如用户设置管理程序提供定义了 `SetForUserAsync` 方法).
\ No newline at end of file
+`ISettingManager` 在 `get/set` 方法中使用设置管理提供程序. 通常每个设置程序提供程序都在 `ISettingManagement` 服务上定义了模块方法 (比如用户设置管理程序提供定义了 `SetForUserAsync` 方法).
+
+## Setting Management UI.
+
+设置管理模块默认提供了邮件设置页面并且它是可扩展的; 你可以为你的应用程序设置添加设置标签到设置页面.
+
+### MVC UI
+
+#### 创建视图组件
+
+在 `Components` 目录下创建 `MySettingGroup` 文件夹, 添加一个名为 `MySettingGroupViewComponent` 的视图组件:
+
+![MySettingGroupViewComponent](../images/my-setting-group-view-component.png)
+
+打开 `MySettingGroupViewComponent.cs` 替换为以下内容:
+
+```csharp
+public class MySettingGroupViewComponent : AbpViewComponent
+{
+    public virtual IViewComponentResult Invoke()
+    {
+        return View("~/Components/MySettingGroup/Default.cshtml");
+    }
+}
+```
+
+> 你还可以使用 `InvokeAsync` 方法,在这个示例中我们使用 `Invoke` 方法.
+
+#### Default.cshtml
+
+在 `MySettingGroup` 目录下创建 `Default.cshtml` 文件.
+
+打开 `Default.cshtml` 替换为以下内容:
+
+```html
+<div>
+  <p>My setting group page</p>
+</div>
+```
+
+#### BookStoreSettingPageContributor
+
+在 `Settings` 目录下创建 `BookStoreSettingPageContributor.cs` 文件.
+
+![BookStoreSettingPageContributor](../images/my-setting-group-page-contributor.png)
+
+文件内容如下:
+
+```csharp
+public class BookStoreSettingPageContributor : ISettingPageContributor
+{
+    public Task ConfigureAsync(SettingPageCreationContext context)
+    {
+        context.Groups.Add(
+            new SettingPageGroup(
+                "Volo.Abp.MySettingGroup",
+                "MySettingGroup",
+                typeof(MySettingGroupViewComponent)
+            )
+        );
+
+        return Task.CompletedTask;
+    }
+
+    public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context)
+    {
+        // You can check the permissions here
+        return Task.FromResult(true);
+    }
+}
+```
+
+打开 `BookStoreWebModule.cs` 文件添加以下代码:
+
+```csharp
+Configure<SettingManagementPageOptions>(options =>
+{
+    options.Contributors.Add(new BookStoreSettingPageContributor());
+});
+```
+
+#### 运行应用程序
+
+导航到 `/SettingManagement` 路由查看更改:
+
+![Custom Settings Tab](../images/my-setting-group-ui.png)
+
+### Blazor UI
+
+#### 创建 Razor 组件
+
+在 `Pages` 目录下创建 `MySettingGroup` 文件夹, 添加一个名为 `MySettingGroupComponent` 的Razor组件:
+
+![MySettingGroupComponent](../images/my-setting-group-component.png)
+
+打开 `MySettingGroupComponent.razor` 替换为以下内容:
+
+```csharp
+<Row>
+    <p>my setting group</p>
+</Row>
+```
+
+#### BookStoreSettingComponentContributor
+
+在 `Settings` 目录下创建 `BookStoreSettingComponentContributor.cs` 文件.
+
+![BookStoreSettingComponentContributor](../images/my-setting-group-component-contributor.png)
+
+文件内容如下:
+
+```csharp
+public class BookStoreSettingComponentContributor : ISettingComponentContributor
+{
+    public Task ConfigureAsync(SettingComponentCreationContext context)
+    {
+        context.Groups.Add(
+            new SettingComponentGroup(
+                "Volo.Abp.MySettingGroup",
+                "MySettingGroup",
+                typeof(MySettingGroupComponent)
+            )
+        );
+
+        return Task.CompletedTask;
+    }
+
+    public Task<bool> CheckPermissionsAsync(SettingComponentCreationContext context)
+    {
+        // You can check the permissions here
+        return Task.FromResult(true);
+    }
+}
+```
+
+打开 `BookStoreBlazorModule.cs` 文件添加以下代码:
+
+```csharp
+Configure<SettingManagementComponentOptions>(options =>
+{
+    options.Contributors.Add(new BookStoreSettingComponentContributor());
+});
+```
+
+#### 运行应用程序
+
+导航到 `/setting-management` 路由查看更改:
+
+![Custom Settings Tab](../images/my-setting-group-blazor.png)
+
+### Angular UI
+
+不同的模块提供它们的设置选项卡. 你可以通过3个步骤在项目中自定义设置页面.
+
+#### 创建组件
+
+使用以下命令创建一个组件
+
+```bash
+yarn ng generate component my-settings
+```
+
+打开 `app.component.ts` 做以下修改:
+
+```js
+import { Component } from '@angular/core';
+import { SettingTabsService } from '@abp/ng.core'; // imported SettingTabsService
+import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent
+
+@Component(/* component metadata */)
+export class AppComponent {
+  constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent
+  {
+    // added below
+    settingTabs.add([
+      {
+        name: 'MySettings',
+        order: 1,
+        requiredPolicy: 'policy key here',
+        component: MySettingsComponent,
+      },
+    ]);
+  }
+}
+```
+
+#### 运行应用程序
+
+导航到 `/setting-management` 路由你会看到以下变化:
+
+![Custom Settings Tab](../images/custom-settings.png)
\ No newline at end of file
diff --git a/docs/zh-Hans/UI/Angular/Custom-Setting-Page.md b/docs/zh-Hans/UI/Angular/Custom-Setting-Page.md
deleted file mode 100644
index 2b888e8d75..0000000000
--- a/docs/zh-Hans/UI/Angular/Custom-Setting-Page.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# 自定义设置页面
-
-不同的模块提供它们的设置选项卡. 你可以通过3个步骤在项目中自定义设置页面.
-
-1. 使用以下命令创建一个组件
-
-```bash
-yarn ng generate component my-settings
-```
-
-2. 打开 `app.component.ts` 做以下修改:
-
-```js
-import { Component } from '@angular/core';
-import { SettingTabsService } from '@abp/ng.core'; // imported SettingTabsService
-import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent
-
-@Component(/* component metadata */)
-export class AppComponent {
-  constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent
-  {
-    // added below
-    settingTabs.add([
-      {
-        name: 'MySettings',
-        order: 1,
-        requiredPolicy: 'policy key here',
-        component: MySettingsComponent,
-      },
-    ]);
-  }
-}
-```
-
-导航到 `/setting-management` 路由你会看到以下变化:
-
-![Custom Settings Tab](./images/custom-settings.png)
-
-## 下一步是什么?
-
-- [懒加载 Scripts 与 Styles](./Lazy-Load-Service.md)
diff --git a/docs/zh-Hans/UI/AspNetCore/Custom-Setting-Page.md b/docs/zh-Hans/UI/AspNetCore/Custom-Setting-Page.md
deleted file mode 100644
index 2d852417cd..0000000000
--- a/docs/zh-Hans/UI/AspNetCore/Custom-Setting-Page.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# 自定义设置页面
-
-一些模块内置了设置页面,你也可以在项目中添加自己的设置页面.
-
-### 创建视图组件
-
-在 `Components` 目录下创建 `MySettingGroup` 文件夹, 添加一个名为 `MySettingGroupViewComponent` 的视图组件:
-
-![MySettingGroupViewComponent](../../images/my-setting-group-view-component.png)
-
-打开 `MySettingGroupViewComponent.cs` 替换为以下内容:
-
-```csharp
-public class MySettingGroupViewComponent : AbpViewComponent
-{
-    public virtual IViewComponentResult Invoke()
-    {
-        return View("~/Components/MySettingGroup/Default.cshtml");
-    }
-}
-```
-
-> 你还可以使用 `InvokeAsync` 方法,在这个示例中我们使用 `Invoke` 方法.
-
-### Default.cshtml
-
-在 `MySettingGroup` 目录下创建 `Default.cshtml` 文件.
-
-打开 `Default.cshtml` 替换为以下内容:
-
-```html
-<div>
-  <p>My setting group page</p>
-</div>
-```
-
-### BookStoreSettingPageContributor
-
-在 `Settings` 目录下创建 `BookStoreSettingPageContributor.cs` 文件.
-
-![BookStoreSettingPageContributor](../../images/my-setting-group-page-contributor.png)
-
-文件内容如下:
-
-```csharp
-public class BookStoreSettingPageContributor : ISettingPageContributor
-{
-    public Task ConfigureAsync(SettingPageCreationContext context)
-    {
-        context.Groups.Add(
-            new SettingPageGroup(
-                "Volo.Abp.MySettingGroup",
-                "MySettingGroup",
-                typeof(MySettingGroupViewComponent)
-            )
-        );
-
-        return Task.CompletedTask;
-    }
-
-    public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context)
-    {
-        // You can check the permissions here
-        return Task.FromResult(true);
-    }
-}
-```
-
-打开 `BookStoreWebModule.cs` 文件添加以下代码:
-
-```csharp
-Configure<SettingManagementPageOptions>(options =>
-{
-    options.Contributors.Add(new BookStoreSettingPageContributor());
-});
-```
-
-### 运行应用程序
-
-导航到 `/SettingManagement` 路由查看更改:
-
-![Custom Settings Tab](../../images/my-setting-group-ui.png)
\ No newline at end of file
diff --git a/docs/zh-Hans/UI/Blazor/Custom-Setting-Page.md b/docs/zh-Hans/UI/Blazor/Custom-Setting-Page.md
deleted file mode 100644
index ac49c29532..0000000000
--- a/docs/zh-Hans/UI/Blazor/Custom-Setting-Page.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# 自定义设置页面
-
-一些模块内置了设置页面,你也可以在项目中添加自己的设置页面.
-
-### 创建 Razor 组件
-
-在 `Pages` 目录下创建 `MySettingGroup` 文件夹, 添加一个名为 `MySettingGroupComponent` 的Razor组件:
-
-![MySettingGroupComponent](../../images/my-setting-group-component.png)
-
-打开 `MySettingGroupComponent.razor` 替换为以下内容:
-
-```csharp
-<Row>
-    <p>my setting group</p>
-</Row>
-```
-
-### BookStoreSettingComponentContributor
-
-在 `Settings` 目录下创建 `BookStoreSettingComponentContributor.cs` 文件.
-
-![BookStoreSettingComponentContributor](../../images/my-setting-group-component-contributor.png)
-
-文件内容如下:
-
-```csharp
-public class BookStoreSettingComponentContributor : ISettingComponentContributor
-{
-    public Task ConfigureAsync(SettingComponentCreationContext context)
-    {
-        context.Groups.Add(
-            new SettingComponentGroup(
-                "Volo.Abp.MySettingGroup",
-                "MySettingGroup",
-                typeof(MySettingGroupComponent)
-            )
-        );
-
-        return Task.CompletedTask;
-    }
-
-    public Task<bool> CheckPermissionsAsync(SettingComponentCreationContext context)
-    {
-        // You can check the permissions here
-        return Task.FromResult(true);
-    }
-}
-```
-
-打开 `BookStoreBlazorModule.cs` 文件添加以下代码:
-
-```csharp
-Configure<SettingManagementComponentOptions>(options =>
-{
-    options.Contributors.Add(new BookStoreSettingComponentContributor());
-});
-```
-
-### 运行应用程序
-
-导航到 `/setting-management` 路由查看更改:
-
-![Custom Settings Tab](../../images/my-setting-group-blazor.png)
\ No newline at end of file
diff --git a/docs/zh-Hans/docs-nav.json b/docs/zh-Hans/docs-nav.json
index cfc5fa3f9d..28ce41cdb1 100644
--- a/docs/zh-Hans/docs-nav.json
+++ b/docs/zh-Hans/docs-nav.json
@@ -464,19 +464,6 @@
             {
               "text": "主题化",
               "path": "UI/AspNetCore/Theming.md"
-            },
-            {
-              "test": "自定义设置页面",
-              "path": "UI/AspNetCore/Custom-Setting-Page.md"
-            }
-          ]
-        },
-        {
-          "text": "Blazor",
-          "items": [
-            {
-              "test": "自定义设置页面",
-              "path": "UI/Blazor/Custom-Setting-Page.md"
             }
           ]
         },
@@ -531,10 +518,6 @@
               "text": "替换组件",
               "path": "UI/Angular/Component-Replacement.md"
             },
-            {
-              "text": "自定义设置页",
-              "path": "UI/Angular/Custom-Setting-Page.md"
-            },
             {
               "text": "懒加载Scripts与Styles",
               "path": "UI/Angular/Lazy-Load-Service.md"
diff --git a/docs/zh-Hans/UI/Angular/images/custom-settings.png b/docs/zh-Hans/images/custom-settings.png
similarity index 100%
rename from docs/zh-Hans/UI/Angular/images/custom-settings.png
rename to docs/zh-Hans/images/custom-settings.png