diff --git a/docs/en/UI/Angular/Toaster-Service.md b/docs/en/UI/Angular/Toaster-Service.md
index 191f0b34fd4..b194811d9ae 100644
--- a/docs/en/UI/Angular/Toaster-Service.md
+++ b/docs/en/UI/Angular/Toaster-Service.md
@@ -150,6 +150,7 @@ clear(): void
 Removes all open toasts.
 
 ## See Also
+
 - [Confirmation Popup](./Confirmation-Service.md)
 
 ## What's Next?
diff --git a/docs/zh-Hans/UI/Angular/Confirmation-Service.md b/docs/zh-Hans/UI/Angular/Confirmation-Service.md
new file mode 100644
index 00000000000..d6ff4bc3c5d
--- /dev/null
+++ b/docs/zh-Hans/UI/Angular/Confirmation-Service.md
@@ -0,0 +1,159 @@
+# 确认弹层
+
+你可以使用@abp/ng.theme.shared包中提供 `ConfirmationService` 放置在你项目的级别来显示确认弹层
+
+## 入门
+
+你不必在模块或组件级别提供 `ConfirmationService`,它已经在**根**级别提供,你可以在你的组件,指令或服务直接注入并使用它.
+
+```js
+import { ConfirmationService } from '@abp/ng.theme.shared';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private confirmation: ConfirmationService) {}
+}
+```
+
+## 用法
+
+你可以使用 `ConfirmationService` 的 `success`, `warn`, `error` 和 `info` 方法显示一个确认弹层.
+
+### 如何显示一个确认弹层
+
+```js
+const confirmationStatus$ = this.confirmation.success('Message', 'Title');
+```
+
+- `ConfirmationService` 方法接收三个参数,分别是 `message`, `title`, 和 `options`.
+- `success`, `warn`, `error`, 和 `info` 方法返回一个[RxJS Subject](https://rxjs-dev.firebaseapp.com/guide/subject)监听确认弹层关闭事件. 事件值类型是 [`Confirmation.Status`](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts#L24)枚举.
+
+### 如何监听关闭事件
+
+你可以订阅确认弹层关闭事件,例:
+
+```js
+import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
+
+constructor(private confirmation: ConfirmationService) {}
+
+this.confirmation
+  .warn('::WillBeDeleted', { key: '::AreYouSure', defaultValue: 'Are you sure?' })
+  .subscribe((status: Confirmation.Status) => {
+    // your code here
+  });
+```
+
+- `message` 和 `title` 参数接收字符串,本地化Key或本地化对象. 参阅[本地化文档](./Localization.md)
+- `Confirmation.Status` 是一个枚举,具有三个属性;
+    - `Confirmation.Status.confirm` 是一个关闭事件值,当通过确认按钮关闭弹出窗口时触发此事件.
+    - `Confirmation.Status.reject` 是一个关闭事件值,当通过“取消”按钮关闭弹出窗口时触发此事件.
+    - `Confirmation.Status.dismiss` 是一个关闭事件值,当通过按Escape键关闭弹出窗口时触发此事件.
+
+如果你对确认状态不感兴趣,则不必订阅返回的observable:
+
+```js
+this.confirmation.error('You are not authorized.', 'Error');
+```
+
+### 如何显示具有给定选项的确认弹层
+
+选项可以作为第三个参数传递给`success`, `warn`, `error`, 和 `info` 方法:
+
+```js
+const options: Partial<Confirmation.Options> = {
+  hideCancelBtn: false,
+  hideYesBtn: false,
+  cancelText: 'Close',
+  yesText: 'Confirm',
+  messageLocalizationParams: ['Demo'],
+  titleLocalizationParams: [],
+};
+
+this.confirmation.warn(
+  'AbpIdentity::RoleDeletionConfirmationMessage',
+  'Are you sure?',
+  options,
+);
+```
+
+- `hideCancelBtn` 选项为 `true` 时隐藏取消按钮. 默认值为 `false`.
+- `hideYesBtn` 选项为 `true` 时隐藏确认按钮. 默认值为 `false`.
+- `cancelText` 是取消按钮的文本,可以传递本地化键或本地化对象. 默认值是 `AbpUi::Cancel`.
+- `yesText` 是确定按钮的文本,可以传递本地化键或本地化对象. 默认值是 `AbpUi::Yes`.
+- `messageLocalizationParams`是用于消息本地化的插值参数.
+- `titleLocalizationParams` 是标题本地化的插值参数.
+
+With the options above, the confirmation popup looks like this:
+
+![confirmation](./images/confirmation.png)
+
+### 如何删除一个确认弹层
+
+打开的确认弹出窗口可以通过 `clear` 方法手动删除:
+
+```js
+this.confirmation.clear();
+```
+
+## API
+
+### success
+
+```js
+success(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Confirmation.Options>,
+): Observable<Confirmation.Status>
+```
+
+> 请参见[`Config.LocalizationParam`类型](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46)和[Confirmation名称空间](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts)
+
+
+### warn
+
+```js
+warn(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Confirmation.Options>,
+): Observable<Confirmation.Status>
+```
+
+### error
+
+```js
+error(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Confirmation.Options>,
+): Observable<Confirmation.Status>
+```
+
+### info
+
+```js
+info(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Confirmation.Options>,
+): Observable<Confirmation.Status>
+```
+
+### clear
+
+```js
+clear(
+  status: Confirmation.Status = Confirmation.Status.dismiss
+): void
+```
+
+- `status` 参数是确认关闭事件的值.
+
+
+## 下一步是什么?
+
+- [Toast Overlay](./Toaster-Service.md)
diff --git a/docs/zh-Hans/UI/Angular/Permission-Management.md b/docs/zh-Hans/UI/Angular/Permission-Management.md
index 67ec1b787ed..3a50da9591f 100644
--- a/docs/zh-Hans/UI/Angular/Permission-Management.md
+++ b/docs/zh-Hans/UI/Angular/Permission-Management.md
@@ -76,4 +76,4 @@ const routes: Routes = [
 
 ## 下一步是什么?
 
-* [Config State](./Config-State.md)
\ No newline at end of file
+* [确认弹层](./Confirmation-Service.md)
\ No newline at end of file
diff --git a/docs/zh-Hans/UI/Angular/Toaster-Service.md b/docs/zh-Hans/UI/Angular/Toaster-Service.md
new file mode 100644
index 00000000000..045cf9f2cfc
--- /dev/null
+++ b/docs/zh-Hans/UI/Angular/Toaster-Service.md
@@ -0,0 +1,155 @@
+# Toast Overlay
+
+你可以通常将@abp/ng.theme.shared包提供的 `ToasterService` 放置在你项目的根级别下以覆盖显示消息.
+
+## 入门
+
+你不必在模块或组件级别提供 `ToasterService`,它已经在**根**级别提供,你可以在你的组件,指令或服务直接注入并使用它.
+
+```js
+import { ToasterService } from '@abp/ng.theme.shared';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private toaster: ToasterService) {}
+}
+```
+
+## 用法
+
+你可以使用 `ToasterService` 的 `success`, `warn`, `error` 和 `info` 方法显示一个overlay.
+
+### 如何显示一个Toast Overlay
+
+```js
+this.toast.success('Message', 'Title');
+```
+
+- `ToasterService` 方法接收三个参数,分别是 `message`, `title`, 和 `options`.
+- `success`, `warn`, `error`, 和 `info` 方法返回一个已打开的 toast overlay Id. 可以使用此id删除toast.
+
+### 如何显示具有给定选项的Toast Overlay
+
+选项可以作为第三个参数传递给`success`, `warn`, `error`, 和 `info` 方法:
+
+```js
+import { Toaster, ToasterService } from '@abp/ng.theme.shared';
+//...
+
+constructor(private toaster: ToasterService) {}
+
+//...
+const options: Partial<Toaster.ToastOptions> = {
+    life: 10000,
+    sticky: false,
+    closable: true,
+    tapToDismiss: true,
+    messageLocalizationParams: ['Demo', '1'],
+    titleLocalizationParams: []
+  };
+
+  this.toaster.error('AbpUi::EntityNotFoundErrorMessage', 'AbpUi::Error', options);
+```
+
+- `life` 选项是关闭的时间毫秒数. 默认值是 `5000`.
+- `sticky` 选项为 `true` 时忽略 `life` 选项,将toast overlay留在屏幕上. 默认值是 `false`.
+- `closable` 选项为 `true` 时在toast overlay上显示关闭图标. 默认值是 `true`.
+- `tapToDismiss` 选项为 `true` 允许通过单击关闭toast overlay. 默认值是 `false`.
+- `yesText` 是确定按钮的文本,可以传递本地化键或本地化对象. 默认值是 `AbpUi::Yes`.
+- `messageLocalizationParams` 是用于消息本地化的插值参数.
+- `titleLocalizationParams` 是标题本地化的插值参数.
+
+使用上面的选项,toast overlay看起来像这样:
+
+![toast](./images/toast.png)
+
+### 如何删除 Toast Overlay
+
+已打开的toast overlay可以通过手动调用 `remove` 方法传递指定的 toast `id`删除.
+
+```js
+const toastId = this.toast.success('Message', 'Title')
+
+this.toast.remove(toastId);
+```
+
+### 如何删除所有的Toasts
+
+可以手动调用 `clear` 方法删除所有的已打开的toasts.
+
+```js
+this.toast.clear();
+```
+
+## API
+
+### success
+
+```js
+success(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+- `Config` 命令空间可以从 `@abp/ng.core` 导入.
+- `Toaster` 命令空间可以从 `@abp/ng.theme.shared` 导入.
+
+> 请参见[`Config.LocalizationParam`类型](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46)和[`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts)
+
+### warn
+
+```js
+warn(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+### error
+
+```js
+error(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+### info
+
+```js
+info(
+  message: Config.LocalizationParam,
+  title: Config.LocalizationParam,
+  options?: Partial<Toaster.ToastOptions>,
+): number
+```
+
+### remove
+
+```js
+remove(id: number): void
+```
+
+按给定的id移除打开的toast.
+
+### clear
+
+```js
+clear(): void
+```
+
+删除所有打开的toasts.
+
+## 另请参阅
+
+- [Confirmation Popup](./Confirmation-Service.md)
+
+## 确认弹层?
+
+- [Config State](./Config-State.md)
diff --git a/docs/zh-Hans/UI/Angular/images/confirmation.png b/docs/zh-Hans/UI/Angular/images/confirmation.png
new file mode 100644
index 00000000000..efe4c98ea77
Binary files /dev/null and b/docs/zh-Hans/UI/Angular/images/confirmation.png differ
diff --git a/docs/zh-Hans/UI/Angular/images/toast.png b/docs/zh-Hans/UI/Angular/images/toast.png
new file mode 100644
index 00000000000..24cdd0fe0cc
Binary files /dev/null and b/docs/zh-Hans/UI/Angular/images/toast.png differ
diff --git a/docs/zh-Hans/docs-nav.json b/docs/zh-Hans/docs-nav.json
index 384c4064751..240c42dc998 100644
--- a/docs/zh-Hans/docs-nav.json
+++ b/docs/zh-Hans/docs-nav.json
@@ -218,8 +218,11 @@
     },
     {
       "text": "领域驱动设计",
-      "path": "Domain-Driven-Design.md",
       "items": [
+        {
+          "text": "概述",
+          "path": "Domain-Driven-Design.md"
+        },
         {
           "text": "领域层",
           "items": [
@@ -324,6 +327,14 @@
               "text": "权限管理",
               "path": "UI/Angular/Permission-Management.md"
             },
+            {
+              "text": "确认弹层",
+              "path": "UI/Angular/Confirmation-Service.md"
+            },
+            {
+              "text": "Toast Overlay",
+              "path": "UI/Angular/Toaster-Service.md"
+            },
             {
               "text": "配置状态",
               "path": "UI/Angular/Config-State.md"
@@ -372,8 +383,11 @@
     },
     {
       "text": "数据访问",
-      "path":"Data-Access.md",
       "items": [
+        {
+          "text": "概述", 
+          "path": "Data-Access.md"
+        },
         {
           "text": "连接字符串",
           "path": "Connection-Strings.md"
@@ -457,8 +471,11 @@
     },
     {
       "text": "启动模板",
-      "path": "Startup-Templates/Index.md",
       "items": [
+        {
+          "text": "概述",
+          "path": "Startup-Templates/Index.md"
+        },
         {
           "text": "应用程序",
           "path": "Startup-Templates/Application.md"