Merge pull request #8908 from abpframework/liangshiwei/docs

Add custom setting page document

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).
+`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)

docs/en/UI/Angular/Custom-Setting-Page.md

@@ -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)

docs/en/docs-nav.json

@@ -1027,10 +1027,6 @@
                   "text": "Component Replacement",
                   "path": "UI/Angular/Component-Replacement.md"
                 },
-                {
-                  "text": "Custom Setting Page",
-                  "path": "UI/Angular/Custom-Setting-Page.md"
-                },
                 {
                   "text": "Extensions",
                   "items": [

docs/zh-Hans/Modules/Setting-Management.md

@@ -83,4 +83,194 @@ namespace Demo
 * `TenantSettingManagementProvider`: 获取或设定租户的设置值.
 * `UserSettingManagementProvider`: 获取或设定用户的设置值.
 
-`ISettingManager` 在 `get/set` 方法中使用设置管理提供程序. 通常每个设置程序提供程序都在 `ISettingManagement` 服务上定义了模块方法 (比如用户设置管理程序提供定义了 `SetForUserAsync` 方法).
+`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)

docs/zh-Hans/UI/Angular/Custom-Setting-Page.md

@@ -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)

docs/zh-Hans/docs-nav.json

@@ -518,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"