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`:
+
+
+
+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
+
+
My setting group page
+
+ my setting group
+
+```
+
+#### BookStoreSettingComponentContributor
+
+Create a `BookStoreSettingComponentContributor.cs` file under the `Settings` folder:
+
+
+
+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 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(options =>
+{
+ options.Contributors.Add(new BookStoreSettingComponentContributor());
+});
+```
+
+#### Run the Application
+
+Navigate to `/setting-management` route to see the changes:
+
+
+
+### 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:
+
+
\ 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:
-
-
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`:
-
-
-
-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
-
-
My setting group page
-
- my setting group
-
-```
-
-### BookStoreSettingComponentContributor
-
-Create a `BookStoreSettingComponentContributor.cs` file under the `Settings` folder:
-
-
-
-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 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(options =>
-{
- options.Contributors.Add(new BookStoreSettingComponentContributor());
-});
-```
-
-### Run the Application
-
-Navigate to `/setting-management` route to see the changes:
-
-
\ 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.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
+
+
My setting group page
+
+ my setting group
+
+```
+
+#### BookStoreSettingComponentContributor
+
+在 `Settings` 目录下创建 `BookStoreSettingComponentContributor.cs` 文件.
+
+
+
+文件内容如下:
+
+```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 CheckPermissionsAsync(SettingComponentCreationContext context)
+ {
+ // You can check the permissions here
+ return Task.FromResult(true);
+ }
+}
+```
+
+打开 `BookStoreBlazorModule.cs` 文件添加以下代码:
+
+```csharp
+Configure(options =>
+{
+ options.Contributors.Add(new BookStoreSettingComponentContributor());
+});
+```
+
+#### 运行应用程序
+
+导航到 `/setting-management` 路由查看更改:
+
+
+
+### 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` 路由你会看到以下变化:
+
+
\ 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` 路由你会看到以下变化:
-
-
-
-## 下一步是什么?
-
-- [懒加载 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.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
-
-
My setting group page
-
- my setting group
-
-```
-
-### BookStoreSettingComponentContributor
-
-在 `Settings` 目录下创建 `BookStoreSettingComponentContributor.cs` 文件.
-
-
-
-文件内容如下:
-
-```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 CheckPermissionsAsync(SettingComponentCreationContext context)
- {
- // You can check the permissions here
- return Task.FromResult(true);
- }
-}
-```
-
-打开 `BookStoreBlazorModule.cs` 文件添加以下代码:
-
-```csharp
-Configure(options =>
-{
- options.Contributors.Add(new BookStoreSettingComponentContributor());
-});
-```
-
-### 运行应用程序
-
-导航到 `/setting-management` 路由查看更改:
-
-
\ 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