diff --git a/Web/package.json b/Web/package.json
index c51e772..d9b6637 100644
--- a/Web/package.json
+++ b/Web/package.json
@@ -21,6 +21,7 @@
     "swiper": "^6.5.0",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-color": "^2.8.1",
     "vue-highlight.js": "^3.1.0",
     "vue-router": "^3.5.1"
   },
diff --git a/Web/public/doc-code/seed/addForm.vue b/Web/public/doc-code/seed/addForm.vue
deleted file mode 100644
index 28c81b2..0000000
--- a/Web/public/doc-code/seed/addForm.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen() {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testAddApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/editForm.vue b/Web/public/doc-code/seed/editForm.vue
deleted file mode 100644
index 6f96748..0000000
--- a/Web/public/doc-code/seed/editForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testEditApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/form.vue b/Web/public/doc-code/seed/form.vue
index ab74d56..fb4579d 100644
--- a/Web/public/doc-code/seed/form.vue
+++ b/Web/public/doc-code/seed/form.vue
@@ -1,27 +1,41 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
       <div class="yo-form-group">
         <!-- 表单控件 -->
+        <!-- ... -->
       </div>
     </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
 export default {
   data() {
     return {
       /** 表单数据 */
       form: {},
       /** 验证格式 */
-      rules: {},
+      rules: {
+        /* ... */
+      },
 
       /** 加载异步数据状态 */
       loading: false,
 
       /** 其他成员属性 */
-      /** ... */
+      /* ... */
     };
   },
 
@@ -30,12 +44,13 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
       this.form = this.$_.cloneDeep({
-        ...record,
-        /** 在此处添加默认数据转换 */
-        /** ... */
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
       });
     },
 
@@ -50,7 +65,7 @@ export default {
             const record = this.$_.cloneDeep(this.form);
 
             /** 验证通过后可以对数据进行转换得到想要提交的格式 */
-            /** ... */
+            /* ... */
 
             reslove(record);
           } else {
@@ -77,7 +92,7 @@ export default {
         this.$refs.form.resetFields();
 
         /** 在这里可以初始化当前组件中其他属性 */
-        /** ... */
+        /* ... */
       }, 300);
     },
 
@@ -85,16 +100,15 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit() {
+    async onInit(params) {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
-      /** ...BEGIN */
-      /** ...END */
+      /* ... */
       this.loading = false;
     },
 
     /** 当前组件的其他方法 */
-    /** ... */
+    /* ... */
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/query.vue b/Web/public/doc-code/seed/query.vue
index 72123fe..f30ce6d 100644
--- a/Web/public/doc-code/seed/query.vue
+++ b/Web/public/doc-code/seed/query.vue
@@ -1,26 +1,29 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="authCode:page">
-        <div class="yo-query-bar">
-          <a-form-model :model="query" layout="inline">
-            <!-- 此处添加查询表单控件 -->
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="onResetQuery">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
-      </Auth>
-
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="authCode:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+        </Auth>
         <Auth auth="authCode:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
+          <a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
         </Auth>
         <!-- 格式化字段内容 -->
+        <!-- ... -->
         <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
@@ -33,35 +36,52 @@
               </a-popconfirm>
             </Auth>
             <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  page: 'testPageApi',
-  delete: 'testDeleteApi',
+  page: 'testPageApi...',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
       codes: {
         code1: [],
         code2: [],
@@ -69,10 +89,11 @@ export default {
     };
   },
   created() {
+    /** 按需加载字典编码 */
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -132,10 +153,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -156,7 +179,11 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**
diff --git a/Web/public/doc-code/seed/treeLayout.vue b/Web/public/doc-code/seed/treeLayout.vue
index 53f84bb..2b360b9 100644
--- a/Web/public/doc-code/seed/treeLayout.vue
+++ b/Web/public/doc-code/seed/treeLayout.vue
@@ -1,4 +1,10 @@
 <template>
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <yo-tree-layout
     :load-data="loadTreeData"
     @select="onSelect"
@@ -7,72 +13,90 @@
   >
     <container>
       <a-card :bordered="false">
-        <Auth auth="authCode:page">
-          <div class="yo-query-bar">
-            <a-form-model :model="query" layout="inline">
-              <!-- 此处添加查询表单控件 -->
-              <a-form-model-item>
-                <a-button-group>
-                  <a-button @click="onQuery" type="primary">查询</a-button>
-                  <a-button @click="onReset">重置</a-button>
-                </a-button-group>
-              </a-form-model-item>
-            </a-form-model>
-          </div>
-
-          <yo-table :columns="columns" :load-data="loadData" ref="table">
-            <Auth auth="authCode:add" slot="operator">
-              <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
-            </Auth>
-            <!-- 格式化字段内容 -->
-            <!-- 添加操作控件 -->
-            <span slot="action" slot-scope="text, record">
-              <yo-table-actions>
-                <Auth auth="authCode:edit">
-                  <a @click="onOpen('edit-form', record)">编辑</a>
-                </Auth>
-                <Auth auth="authCode:delete">
-                  <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                    <a>删除</a>
-                  </a-popconfirm>
-                </Auth>
-                <!-- 可在此处添加其他操作控件 -->
-              </yo-table-actions>
-            </span>
-          </yo-table>
-        </Auth>
+        <yo-table
+          :columns="columns"
+          :load-data="loadData"
+          @query="onQuery"
+          @resetQuery="onResetQuery"
+          ref="table"
+        >
+          <Auth auth="authCode:page" slot="query">
+            <!-- 此处添加查询表单控件 -->
+            <!-- ... -->
+          </Auth>
+          <Auth auth="authCode:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
+          </Auth>
+          <!-- 格式化字段内容 -->
+          <!-- ... -->
+          <!-- 添加操作控件 -->
+          <span slot="action" slot-scope="text, record">
+            <yo-table-actions>
+              <Auth auth="authCode:edit">
+                <a @click="onOpen('edit-form', record)">编辑</a>
+              </Auth>
+              <Auth auth="authCode:delete">
+                <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                  <a>删除</a>
+                </a-popconfirm>
+              </Auth>
+              <!-- 可在此处添加其他操作控件 -->
+              <!-- ... -->
+            </yo-table-actions>
+          </span>
+        </yo-table>
       </a-card>
     </container>
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </yo-tree-layout>
 </template>
 <script>
 /* 需要引用YoTreeLayout组件 */
 import YoTreeLayout from '@/components/yoTreeLayout';
-
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  tree: 'testTreeApi',
-  page: 'testPageApi',
-  delete: 'testDeleteApi',
+  tree: 'testTreeApi...',
+  page: 'testPageApi...',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
     YoTreeLayout,
-    AddForm,
-    EditForm,
+    FormBody,
   },
 
   data() {
     return {
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
     };
   },
 
@@ -80,7 +104,7 @@ export default {
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -107,7 +131,7 @@ export default {
      * 选择树节点事件
      */
     onSelect([id]) {
-      /* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
       this.query = {
         pid: id,
       };
@@ -168,10 +192,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -192,7 +218,12 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.query['pid']);
+      this.$refs[formName].onOpen({
+        record,
+        pid: this.query.pid,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**
diff --git a/Web/src/assets/style/frame/dark.less b/Web/src/assets/style/frame/dark.less
index 988c16a..edb8dc2 100644
--- a/Web/src/assets/style/frame/dark.less
+++ b/Web/src/assets/style/frame/dark.less
@@ -4,12 +4,9 @@
   .main(@nav-background: @layout-header-background;
   @nav-box-shadow-color: fade(@black, 25%);
   @nav-scrollbar-background: fade(@white, 50%);
+  @nav-app-color: fade(@white, 35%);
   @logo-color: @white;
   @logo-box-shadow: none;
-  @app-selector-color: @white;
-  @app-selector-border-color: fade(@white, 10%);
-  @app-selector-background-color: fade(@white, 30%);
-  @app-selector-box-shadow-color: fade(@white, 15%);
   @header-action-color: fade(@white, 60%);
   @header-action-hover-color: @white;
   @header-action-hover-background: fade(@white, 20%);
diff --git a/Web/src/assets/style/frame/light.less b/Web/src/assets/style/frame/light.less
index f3232bf..57a78ce 100644
--- a/Web/src/assets/style/frame/light.less
+++ b/Web/src/assets/style/frame/light.less
@@ -3,12 +3,9 @@
   .main(@nav-background: @white;
   @nav-box-shadow-color: fade(@black, 5%);
   @nav-scrollbar-background: fade(@black, 30%);
+  @nav-app-color: fade(@black, 35%);
   @logo-color: @black;
   @logo-box-shadow: inset -1px -1px 1px @border-color-split;
-  @app-selector-color: @primary-6;
-  @app-selector-border-color: @primary-3;
-  @app-selector-background-color: @primary-1;
-  @app-selector-box-shadow-color: @primary-1;
   @header-action-color: fade(@black, 35%);
   @header-action-hover-color: @icon-color-hover;
   @header-action-hover-background: fade(@black, 5%);
diff --git a/Web/src/assets/style/lib/container.less b/Web/src/assets/style/lib/container.less
index fdf7179..95a5ebb 100644
--- a/Web/src/assets/style/lib/container.less
+++ b/Web/src/assets/style/lib/container.less
@@ -1,5 +1,5 @@
 @import (reference) '~@/assets/style/extend.less';
-@container-width: 1200px;
+@container-width: 1400px;
 .container {
   width: @container-width;
   margin: 0 auto;
diff --git a/Web/src/assets/style/lib/form.less b/Web/src/assets/style/lib/form.less
index 99e5ed4..e1c5a53 100644
--- a/Web/src/assets/style/lib/form.less
+++ b/Web/src/assets/style/lib/form.less
@@ -207,22 +207,34 @@
   }
 }
 .yo-drawer-form {
+  .ant-drawer-wrapper-body {
+    display: flex;
+    flex-direction: column;
+  }
   .ant-drawer-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 7;
-
-    width: 100%;
+    flex: 0 0 auto;
   }
   .ant-drawer-body {
-    padding: @padding-lg + 56px @padding-lg;
+    position: relative;
+
+    flex: 1 1 100%;
+
+    padding: 0;
+  }
+  .yo-drawer-form--body {
+    position: absolute;
+    top: 0;
+    bottom: @border-width-base + 20px + @padding-md * 2;
+
+    overflow: auto;
+
+    width: 100%;
+    padding: @padding-lg;
   }
   .ant-drawer-footer {
     position: absolute;
     left: 0;
     bottom: 0;
-    z-index: 7;
 
     width: 100%;
     padding: 10px @padding-md;
diff --git a/Web/src/assets/style/lib/visibility.less b/Web/src/assets/style/lib/visibility.less
index 8550b87..bdb76ce 100644
--- a/Web/src/assets/style/lib/visibility.less
+++ b/Web/src/assets/style/lib/visibility.less
@@ -1,3 +1,4 @@
+@import (reference) '~@/assets/style/extend.less';
 .hide {
   visibility: hidden !important;
 }
diff --git a/Web/src/assets/style/lib/width-height.css b/Web/src/assets/style/lib/width-height.css
deleted file mode 100644
index 88ed53c..0000000
--- a/Web/src/assets/style/lib/width-height.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.w-100-p {
-  width: 100%;
-}
diff --git a/Web/src/assets/style/lib/width-height.less b/Web/src/assets/style/lib/width-height.less
index 323dabc..e4633ee 100644
--- a/Web/src/assets/style/lib/width-height.less
+++ b/Web/src/assets/style/lib/width-height.less
@@ -1,3 +1,4 @@
+@import (reference) '~@/assets/style/extend.less';
 .w-100-p {
   width: 100%;
 }
diff --git a/Web/src/assets/style/main.less b/Web/src/assets/style/main.less
index 2a039d3..3992476 100644
--- a/Web/src/assets/style/main.less
+++ b/Web/src/assets/style/main.less
@@ -4,12 +4,9 @@
 .main(@nav-background: @layout-header-background,
   @nav-box-shadow-color: fade(@black, 25%),
   @nav-scrollbar-background: fade(@white, 30%),
+  @nav-app-color: fade(@white, 35%),
   @logo-color: @white,
   @logo-box-shadow: none,
-  @app-selector-color: @white,
-  @app-selector-border-color: fade(@white, 10%),
-  @app-selector-background-color: fade(@white, 30%),
-  @app-selector-box-shadow-color: fade(@white, 15%),
   @header-action-color: fade(@white, 60%),
   @header-action-hover-color: @white,
   @header-action-hover-background: fade(@white, 20%),
@@ -251,6 +248,52 @@
       border-right: 0;
     }
   }
+  .yo-nav {
+    padding-top: @padding-lg;
+    padding-bottom: @padding-lg;
+    &--row {
+      padding: 1px 0;
+
+      column-gap: @padding-md;
+      column-count: 3;
+    }
+    &--col {
+      break-inside: avoid;
+    }
+    &--sub-item {
+    }
+    &--item-group {
+      font-size: @font-size-base;
+      line-height: 1.5;
+
+      margin-bottom: @padding-xs;
+      padding-top: @padding-xs * 2;
+
+      color: fade(@black, 35%);
+      border: @border-width-base @border-style-base transparent;
+    }
+    &--item {
+      font-size: @font-size-base;
+      line-height: 1.5;
+
+      position: relative;
+
+      margin-bottom: @padding-xs;
+      padding: @padding-xs @padding-sm;
+
+      cursor: pointer;
+      transition: @animation-duration-fast;
+
+      border: @border-width-base @border-style-base @border-color-split;
+      border-radius: @border-radius-base;
+      background-color: @white;
+      &:hover {
+        color: @white;
+        border-color: @primary-color;
+        background-color: @primary-color;
+      }
+    }
+  }
   .yo-layout--left-menu,
   .yo-layout--right-menu {
     position: absolute;
@@ -345,15 +388,21 @@
           position: relative;
           z-index: 10;
 
-          display: flex;
           flex: 1 1 100%;
-          flex-direction: column;
 
           box-shadow: 2px 0 8px @nav-box-shadow-color;
+          &--app {
+            font-size: @font-size-sm;
+
+            margin-top: @padding-sm;
+            padding: 0 @padding-md;
+
+            color: @nav-app-color;
+          }
         }
         .swiper-container {
           position: absolute;
-          top: (@layout-header-height / 2) + (@padding-xxs * 2);
+          top: 0;
           left: 0;
           bottom: 0;
 
@@ -385,28 +434,6 @@
             }
           }
         }
-        .yo-apps-selector {
-          >span {
-            line-height: @layout-header-height / 2 - 2px;
-
-            display: block;
-
-            height: @layout-header-height / 2;
-            margin: @padding-xxs @padding-xs;
-
-            cursor: pointer;
-            transition: @animation-duration-slow box-shadow;
-            text-align: center;
-
-            color: @app-selector-color;
-            border: @border-width-base @border-style-base @app-selector-border-color;
-            border-radius: @border-radius-base;
-            background-color: @app-selector-background-color;
-            &:hover {
-              box-shadow: 0 0 15px @app-selector-box-shadow-color;
-            }
-          }
-        }
       }
     }
   }
diff --git a/Web/src/common/login/index.js b/Web/src/common/login/index.js
index 1ba96ca..93f80bf 100644
--- a/Web/src/common/login/index.js
+++ b/Web/src/common/login/index.js
@@ -1,6 +1,6 @@
 import { api } from '@/common/api'
 import { token } from '@/common/token'
-import { GLOBAL_INFO_KEY, ACTIVE_APP_KEY } from '@/common/storage'
+import { GLOBAL_INFO_KEY } from '@/common/storage'
 import { encryptByDES, decryptByDES } from '@/util/des'
 import app from '@/main'
 
@@ -50,7 +50,6 @@ const doLogout = () => {
             if (success) {
                 removeGlobal()
                 token.value = ''
-                window.localStorage.removeItem(ACTIVE_APP_KEY)
                 if (app.$route.path === '/') {
                     app.$router.replace('/login')
                 } else {
diff --git a/Web/src/common/storage/index.js b/Web/src/common/storage/index.js
index 8f2cc8a..0be05e6 100644
--- a/Web/src/common/storage/index.js
+++ b/Web/src/common/storage/index.js
@@ -1,11 +1,9 @@
 const SESSION_KEY = '__SESSION'
 const SETTING_KEY = '__SETTINGS'
 const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
-const ACTIVE_APP_KEY = '__ACTIVE_APP'
 
 export {
     SESSION_KEY,
     SETTING_KEY,
     GLOBAL_INFO_KEY,
-    ACTIVE_APP_KEY
 }
\ No newline at end of file
diff --git a/Web/src/components/yoModalForm/index.js b/Web/src/components/yoModalForm/index.js
new file mode 100644
index 0000000..c5f4a6b
--- /dev/null
+++ b/Web/src/components/yoModalForm/index.js
@@ -0,0 +1,148 @@
+export default {
+    props: {
+        type: {
+            type: String,
+            default: 'modal',
+            validator: function (value) {
+                return ['modal', 'drawer'].indexOf(value) > -1
+            }
+        },
+        compareOnClose: {
+            type: Boolean,
+            default: true
+        },
+        action: {
+            type: Function
+        }
+    },
+
+    data() {
+        return {
+            visible: false,
+            confirmLoading: false,
+
+            form: {}
+        }
+    },
+
+    computed: {
+        body() {
+            return this.$slots.default && this.$slots.default[0].componentInstance
+        }
+    },
+
+    created() {
+    },
+
+    methods: {
+        renderModal(props) {
+
+            const _props = {
+                ...props,
+                confirmLoading: this.confirmLoading
+            }
+
+            const _on = {
+                cancel: () => this.onClose(this.compareOnClose),
+                ok: () => this.onOk()
+            }
+
+            return (<a-modal {...{ props: _props, on: _on }} class="yo-modal-form">
+                {this.renderBody()}
+            </a-modal>)
+        },
+
+        renderDrawer(props) {
+
+            const _props = {
+                ...props
+            }
+
+            const _on = {
+                close: () => this.onClose(this.compareOnClose),
+                ok: () => this.onOk()
+            }
+
+            return (<a-drawer {...{ props: _props, on: _on }} class="yo-drawer-form">
+                <div class="yo-drawer-form--body">
+                    {this.renderBody()}
+                </div>
+                <div class="ant-drawer-footer">
+                    <a-button onClick={_on.close}>取消</a-button>
+                    <a-button loading={this.confirmLoading} onClick={_on.ok} type="primary">确定</a-button>
+                </div >
+            </a-drawer>)
+        },
+
+        renderBody() {
+            return this.$scopedSlots.default && this.$scopedSlots.default()
+        },
+
+        onOpen(data) {
+            this.visible = true
+            this.$nextTick(async () => {
+                if (!this.body) return
+
+                this.body.onInit && await this.body.onInit(data)
+                this.body.onFillData && this.body.onFillData(data)
+                this.form = this.$_.cloneDeep(this.body.form)
+            })
+        },
+
+        onClose(compare = false) {
+            const close = () => {
+                this.body
+                    && this.body.onResetFields
+                    && this.body.onResetFields()
+                this.visible = false
+            }
+
+            if (this.body) {
+                if (!this.$_.isEqual(this.form, this.body.form) && compare) {
+                    this.$confirm({
+                        title: '是否确认关闭',
+                        content: '当前内容已更改，是否确认不保存并且关闭',
+                        onOk: () => {
+                            close()
+                        }
+                    })
+                } else {
+                    close()
+                }
+            } else {
+                close()
+            }
+        },
+
+        onOk() {
+            this.body
+                && this.body.onGetData
+                && this.body.onGetData()
+                    .then((data) => {
+                        this.confirmLoading = true
+                        this.action
+                            && this.action(data)
+                                .then(({ success }) => {
+                                    if (success) {
+                                        this.$message.success('保存成功');
+                                        this.onClose();
+                                        this.$emit('ok');
+                                    }
+                                })
+                                .finally(() => {
+                                    this.confirmLoading = false
+                                })
+                    }).catch(() => { })
+        }
+    },
+
+    render() {
+        const props = {
+            ...this.$props,
+            ...this.$attrs,
+            visible: this.visible
+        }
+
+        return this.type === 'modal' ? this.renderModal(props) : this.renderDrawer(props)
+    }
+}
\ No newline at end of file
diff --git a/Web/src/components/yoTable/index.js b/Web/src/components/yoTable/index.js
index 9b80819..0348be2 100644
--- a/Web/src/components/yoTable/index.js
+++ b/Web/src/components/yoTable/index.js
@@ -151,6 +151,15 @@ export default {
       })
       return data
     },
+
+    onQuery() {
+      this.$emit('query')
+    },
+
+    onResetQuery() {
+      this.$emit('resetQuery')
+      this.$emit('reset-query')
+    }
   },
 
   render() {
@@ -161,7 +170,7 @@ export default {
       columns: this.columns.filter(p => !p.hidden),
       bordered: true,
       size: 'middle',
-      rowKey: record => record.id,
+      rowKey: record => record.id || Math.random().toString(16).slice(2),
       scroll: { x: 'max-content' }
     }
 
@@ -169,16 +178,33 @@ export default {
       change: this.onTableChange,
       ...this.$listeners
     }
+
+    const queryOn = {
+      'submit.native.prevent': () => { }
+    }
+
     return (
       <section>
         <a-alert type="warning" closable>
           <template slot="message">
-            后端没有排序参数
-             <br />
             字段固定应该遵循左侧固定到最左,右侧固定到最右(此逻辑难以实现)
             </template>
         </a-alert>
         <br />
+        {
+          this.$scopedSlots.query &&
+          <div class="yo-query-bar">
+            <a-form-model layout="inline" {...{ on: queryOn }}>
+              {this.$scopedSlots.query()}
+              <a-form-model-item>
+                <a-button-group>
+                  <a-button onClick={this.onQuery} html-type="submit" type="primary">查询</a-button>
+                  <a-button onClick={this.onResetQuery}>重置</a-button>
+                </a-button-group>
+              </a-form-model-item>
+            </a-form-model>
+          </div>
+        }
         <div class="yo-action-bar">
           <div class="yo-action-bar--actions">
             {this.$scopedSlots.operator && this.$scopedSlots.operator()}
diff --git a/Web/src/main.js b/Web/src/main.js
index 75a1e97..d5a3c78 100644
--- a/Web/src/main.js
+++ b/Web/src/main.js
@@ -78,6 +78,8 @@ import YoTable from './components/yoTable'
 Vue.component('YoTable', YoTable)
 import YoTableActions from './components/yoTableActions'
 Vue.component('YoTableActions', YoTableActions)
+import YoModalForm from './components/yoModalForm'
+Vue.component('YoModalForm', YoModalForm)
 import YoImage from './components/yoImage'
 Vue.component('YoImage', YoImage)
 
diff --git a/Web/src/pages/home/index.less b/Web/src/pages/home/index.less
index e3168fc..8f87df1 100644
--- a/Web/src/pages/home/index.less
+++ b/Web/src/pages/home/index.less
@@ -10,8 +10,10 @@
 }
 .home-header-content {
   margin-left: @padding-lg;
-  span {
-    color: @primary-color;
+  h4 {
+    span {
+      color: @primary-color;
+    }
   }
   p {
     margin: 0;
diff --git a/Web/src/pages/home/index.vue b/Web/src/pages/home/index.vue
index 9469a28..3b4f46f 100644
--- a/Web/src/pages/home/index.vue
+++ b/Web/src/pages/home/index.vue
@@ -9,11 +9,15 @@
                 <yo-image :id="$root.global.info.avatar" :size="64" icon="user" type="avatar" />
               </div>
               <div class="home-header-content">
-                <h2>
+                <h4>
                   {{ $moment().format('A') }}好，
                   <span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
-                </h2>
-                <p>上次IP：{{ $root.global.info.lastLoginIp }} 上次登录时间：{{ $root.global.info.lastLoginTime }}</p>
+                </h4>
+                <p>
+                  <span>上次IP：{{ $root.global.info.lastLoginIp }}</span>
+                  <a-divider type="vertical" />
+                  <span>上次登录时间：{{ $root.global.info.lastLoginTime }}</span>
+                </p>
               </div>
             </div>
           </a-col>
diff --git a/Web/src/pages/system/_seed/addForm.vue b/Web/src/pages/system/_seed/addForm.vue
deleted file mode 100644
index 55ed776..0000000
--- a/Web/src/pages/system/_seed/addForm.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen() {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testAddApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/_seed/editForm.vue b/Web/src/pages/system/_seed/editForm.vue
deleted file mode 100644
index 9e4dde4..0000000
--- a/Web/src/pages/system/_seed/editForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑XX"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testEditApi(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/_seed/form.vue b/Web/src/pages/system/_seed/form.vue
index 873e6f2..941cf9b 100644
--- a/Web/src/pages/system/_seed/form.vue
+++ b/Web/src/pages/system/_seed/form.vue
@@ -1,27 +1,41 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
       <div class="yo-form-group">
         <!-- 表单控件 -->
+        <!-- ... -->
       </div>
     </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
 export default {
   data() {
     return {
       /** 表单数据 */
       form: {},
       /** 验证格式 */
-      rules: {},
+      rules: {
+        /* ... */
+      },
 
       /** 加载异步数据状态 */
       loading: false,
 
       /** 其他成员属性 */
-      /** ... */
+      /* ... */
     };
   },
 
@@ -30,12 +44,13 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
       this.form = this.$_.cloneDeep({
-        ...record,
-        /** 在此处添加默认数据转换 */
-        /** ... */
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
       });
     },
 
@@ -50,7 +65,7 @@ export default {
             const record = this.$_.cloneDeep(this.form);
 
             /** 验证通过后可以对数据进行转换得到想要提交的格式 */
-            /** ... */
+            /* ... */
 
             reslove(record);
           } else {
@@ -77,7 +92,7 @@ export default {
         this.$refs.form.resetFields();
 
         /** 在这里可以初始化当前组件中其他属性 */
-        /** ... */
+        /* ... */
       }, 300);
     },
 
@@ -85,16 +100,15 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit() {
+    async onInit(params) {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
-      /** ...BEGIN */
-      /** ...END */
+      /* ... */
       this.loading = false;
     },
 
     /** 当前组件的其他方法 */
-    /** ... */
+    /* ... */
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/_seed/index.vue b/Web/src/pages/system/_seed/index.vue
index b189e3e..f65a377 100644
--- a/Web/src/pages/system/_seed/index.vue
+++ b/Web/src/pages/system/_seed/index.vue
@@ -1,26 +1,29 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="authCode:page">
-        <div class="yo-query-bar">
-          <a-form-model :model="query" layout="inline">
-            <!-- 此处添加查询表单控件 -->
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="onResetQuery">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
-      </Auth>
-
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="authCode:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+        </Auth>
         <Auth auth="authCode:add" slot="operator">
-          <a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
+          <a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
         </Auth>
         <!-- 格式化字段内容 -->
+        <!-- ... -->
         <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
@@ -33,35 +36,52 @@
               </a-popconfirm>
             </Auth>
             <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  page: 'testPageApi',
-  delete: 'testDeleteApi',
+  page: 'testPageApi...',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
       codes: {
         code1: [],
         code2: [],
@@ -69,10 +89,11 @@ export default {
     };
   },
   created() {
+    /** 按需加载字典编码 */
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -132,10 +153,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -156,7 +179,11 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**
diff --git a/Web/src/pages/system/_seed/treeLayout.vue b/Web/src/pages/system/_seed/treeLayout.vue
index 53f84bb..2b360b9 100644
--- a/Web/src/pages/system/_seed/treeLayout.vue
+++ b/Web/src/pages/system/_seed/treeLayout.vue
@@ -1,4 +1,10 @@
 <template>
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <yo-tree-layout
     :load-data="loadTreeData"
     @select="onSelect"
@@ -7,72 +13,90 @@
   >
     <container>
       <a-card :bordered="false">
-        <Auth auth="authCode:page">
-          <div class="yo-query-bar">
-            <a-form-model :model="query" layout="inline">
-              <!-- 此处添加查询表单控件 -->
-              <a-form-model-item>
-                <a-button-group>
-                  <a-button @click="onQuery" type="primary">查询</a-button>
-                  <a-button @click="onReset">重置</a-button>
-                </a-button-group>
-              </a-form-model-item>
-            </a-form-model>
-          </div>
-
-          <yo-table :columns="columns" :load-data="loadData" ref="table">
-            <Auth auth="authCode:add" slot="operator">
-              <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
-            </Auth>
-            <!-- 格式化字段内容 -->
-            <!-- 添加操作控件 -->
-            <span slot="action" slot-scope="text, record">
-              <yo-table-actions>
-                <Auth auth="authCode:edit">
-                  <a @click="onOpen('edit-form', record)">编辑</a>
-                </Auth>
-                <Auth auth="authCode:delete">
-                  <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
-                    <a>删除</a>
-                  </a-popconfirm>
-                </Auth>
-                <!-- 可在此处添加其他操作控件 -->
-              </yo-table-actions>
-            </span>
-          </yo-table>
-        </Auth>
+        <yo-table
+          :columns="columns"
+          :load-data="loadData"
+          @query="onQuery"
+          @resetQuery="onResetQuery"
+          ref="table"
+        >
+          <Auth auth="authCode:page" slot="query">
+            <!-- 此处添加查询表单控件 -->
+            <!-- ... -->
+          </Auth>
+          <Auth auth="authCode:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
+          </Auth>
+          <!-- 格式化字段内容 -->
+          <!-- ... -->
+          <!-- 添加操作控件 -->
+          <span slot="action" slot-scope="text, record">
+            <yo-table-actions>
+              <Auth auth="authCode:edit">
+                <a @click="onOpen('edit-form', record)">编辑</a>
+              </Auth>
+              <Auth auth="authCode:delete">
+                <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                  <a>删除</a>
+                </a-popconfirm>
+              </Auth>
+              <!-- 可在此处添加其他操作控件 -->
+              <!-- ... -->
+            </yo-table-actions>
+          </span>
+        </yo-table>
       </a-card>
     </container>
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </yo-tree-layout>
 </template>
 <script>
 /* 需要引用YoTreeLayout组件 */
 import YoTreeLayout from '@/components/yoTreeLayout';
-
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 /* 在此管理整个页面需要的接口名称 */
 const api = {
-  tree: 'testTreeApi',
-  page: 'testPageApi',
-  delete: 'testDeleteApi',
+  tree: 'testTreeApi...',
+  page: 'testPageApi...',
+  add: 'testAddApi',
+  edit: 'testEditApi',
+  delete: 'testDeleteApi...',
   /* ... */
 };
 
 export default {
   components: {
     YoTreeLayout,
-    AddForm,
-    EditForm,
+    FormBody,
   },
 
   data() {
     return {
+      api,
+
+      name: '...',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [],
+
+      /* 字典编码储存格式 */
+      codes: {
+        code1: [],
+        code2: [],
+      },
     };
   },
 
@@ -80,7 +104,7 @@ export default {
     this.onLoadCodes();
 
     /** 根据权限添加操作列 */
-    const flag = this.$auth(/** ... */);
+    const flag = this.$auth(/* ... */);
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -107,7 +131,7 @@ export default {
      * 选择树节点事件
      */
     onSelect([id]) {
-      /* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
       this.query = {
         pid: id,
       };
@@ -168,10 +192,12 @@ export default {
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+          /* ... */
         ])
         .then(([code1, code2]) => {
           this.codes.code1 = code1.data;
           this.codes.code2 = code2.data;
+          /* ... */
         });
     },
 
@@ -192,7 +218,12 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.query['pid']);
+      this.$refs[formName].onOpen({
+        record,
+        pid: this.query.pid,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
     /**
diff --git a/Web/src/pages/system/app/form.vue b/Web/src/pages/system/app/form.vue
index 95bdcbc..e98639e 100644
--- a/Web/src/pages/system/app/form.vue
+++ b/Web/src/pages/system/app/form.vue
@@ -1,44 +1,119 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
-    <div class="yo-form-group">
-      <a-form-model-item label="应用名称" prop="name">
-        <a-input placeholder="请输入应用名称" v-model="form.name" />
-      </a-form-model-item>
-      <a-form-model-item label="唯一编码" prop="code">
-        <a-input placeholder="请输入唯一编码" v-model="form.code" />
-      </a-form-model-item>
-      <a-form-model-item label="排序" prop="sort">
-        <a-input-number
-          :max="1000"
-          :min="0"
-          class="w-100-p"
-          placeholder="请输入排序"
-          v-model="form.sort"
-        />
-      </a-form-model-item>
-    </div>
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <!-- ... -->
+        <a-form-model-item label="应用名称" prop="name">
+          <a-input placeholder="请输入应用名称" v-model="form.name" />
+        </a-form-model-item>
+        <a-form-model-item label="唯一编码" prop="code">
+          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="图标" prop="icon">
+          <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
+            <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
+            <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item label="图标颜色" prop="color">
+          <chrome-picker v-model="form.color" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number
+            :max="1000"
+            :min="0"
+            class="w-100-p"
+            placeholder="请输入排序"
+            v-model="form.sort"
+          />
+        </a-form-model-item>
+      </div>
+    </a-spin>
+
+    <yo-icon-selector ref="icon-selector" v-model="form.icon" />
   </a-form-model>
 </template>
 <script>
+import YoIconSelector from '@/components/yoIconSelector';
+import { Chrome } from 'vue-color';
+
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+  color: '#ffffff',
+  active: false,
+};
+
 export default {
+  components: {
+    YoIconSelector,
+    ChromePicker: Chrome,
+  },
+
   data() {
     return {
+      /** 表单数据 */
       form: {
-        active: false,
+        ...defaultForm,
       },
+      /** 验证格式 */
       rules: {
+        /* ... */
         name: [{ required: true, message: '请输入应用名称' }],
         code: [{ required: true, message: '请输入唯一编码' }],
       },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /* ... */
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
-      this.form = this.$_.cloneDeep(record);
+    onFillData(params) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+            record.color = record.color.constructor === Object ? record.color.hex : record.color;
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
     },
 
     /**
@@ -56,8 +131,28 @@ export default {
     onResetFields() {
       setTimeout(() => {
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
       }, 300);
     },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
+    onOpenSelectIcon() {
+      this.$refs['icon-selector'].onOpen(this.form.icon);
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/app/index.vue b/Web/src/pages/system/app/index.vue
index c1cf183..36aa180 100644
--- a/Web/src/pages/system/app/index.vue
+++ b/Web/src/pages/system/app/index.vue
@@ -1,30 +1,35 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysApp:page">
-        <div class="yo-query-bar">
-          <a-form-model :model="query" layout="inline">
-            <a-form-model-item label="应用名称">
-              <a-input placeholder="请输入应用名称" v-model="query.name" />
-            </a-form-model-item>
-            <a-form-model-item label="唯一编码">
-              <a-input placeholder="请输入唯一编码" v-model="query.code" />
-            </a-form-model-item>
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="() => { query = {}, onQuery() }">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
-      </Auth>
-
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysApp:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+          <a-form-model-item label="应用名称">
+            <a-input placeholder="请输入应用名称" v-model="query.name" />
+          </a-form-model-item>
+          <a-form-model-item label="唯一编码">
+            <a-input placeholder="请输入唯一编码" v-model="query.code" />
+          </a-form-model-item>
+        </Auth>
         <Auth auth="sysApp:add" slot="operator">
           <a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
         </Auth>
+        <!-- 格式化字段内容 -->
+        <!-- ... -->
         <span slot="active" slot-scope="text, record">
           {{ text ? '是' : '否' }}
           <Auth auth="sysApp:setAsDefault" v-if="!record.active">
@@ -40,7 +45,9 @@
             </yo-table-actions>
           </Auth>
         </span>
-        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span>
+        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+
+        <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
             <Auth auth="sysApp:edit">
@@ -51,27 +58,50 @@
                 <a>删除</a>
               </a-popconfirm>
             </Auth>
+            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
           </yo-table-actions>
         </span>
       </yo-table>
     </a-card>
-    <br />
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'getAppPage',
+  add: 'sysAppAdd',
+  edit: 'sysAppEdit',
+  delete: 'sysAppDelete',
+  /* ... */
+};
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
+      api,
+
+      name: '应用',
+
+      /* 查询条件 */
       query: {},
+
+      /* 表格字段 */
       columns: [
         {
           title: '应用名称',
@@ -105,25 +135,22 @@ export default {
           sorter: true,
         },
       ],
-      codes: [
-        {
-          code: 'yes_or_no',
-          values: [],
-        },
-        {
-          code: 'common_status',
-          values: [],
-        },
-      ],
+
+      /* 字典编码储存格式 */
+      codes: {
+        yesOrNo: [],
+        commonStatus: [],
+      },
     };
   },
   created() {
+    /** 按需加载字典编码 */
     this.onLoadCodes();
 
+    /** 根据权限添加操作列 */
     const flag = this.$auth({
       sysApp: [['edit'], ['delete']],
     });
-
     if (flag) {
       this.columns.push({
         title: '操作',
@@ -139,14 +166,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
-        .getAppPage({
-          ...params,
-          ...this.query,
-        })
-        .then((res) => {
-          return res.data;
-        });
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -157,6 +182,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -166,21 +201,30 @@ export default {
     },
 
     /**
-     * 加载字典数据时的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
       this.$api
         .$queue([
           this.$api.sysDictTypeDropDownAwait({ code: 'yes_or_no' }),
           this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
+          /* ... */
         ])
-        .then(([yesOrNo, commonStatus]) => {
-          this.codes.find((p) => p.code === 'yes_or_no').values = yesOrNo.data;
-          this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
+        .then(([code1, code2]) => {
+          this.codes.yesOrNo = code1.data;
+          this.codes.commonStatus = code2.data;
+          /* ... */
         });
     },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
     bindCodeValue(code, name) {
-      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -188,19 +232,41 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
     },
 
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
     onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
       }
-      this.$refs.table.onLoaded();
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
     },
 
     onSetDefault(record) {
@@ -209,13 +275,6 @@ export default {
         this.onResult(success, '设置成功');
       });
     },
-
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api.sysAppDelete(record).then(({ success }) => {
-        this.onResult(success, '删除成功');
-      });
-    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/addForm.vue b/Web/src/pages/system/dict/addForm.vue
deleted file mode 100644
index 00d6573..0000000
--- a/Web/src/pages/system/dict/addForm.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增字典类型"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen() {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictTypeAdd(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/addForm.vue b/Web/src/pages/system/dict/dictdata/addForm.vue
deleted file mode 100644
index bc1067f..0000000
--- a/Web/src/pages/system/dict/dictdata/addForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="新增字典数据"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen(record, typeId) {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-        this.formBody.onFillData(record, typeId);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictDataAdd(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/editForm.vue b/Web/src/pages/system/dict/dictdata/editForm.vue
deleted file mode 100644
index 8d40561..0000000
--- a/Web/src/pages/system/dict/dictdata/editForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑字典数据"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictDataEdit(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/dictdata/form.vue b/Web/src/pages/system/dict/dictdata/form.vue
index 930abc9..273cf2b 100644
--- a/Web/src/pages/system/dict/dictdata/form.vue
+++ b/Web/src/pages/system/dict/dictdata/form.vue
@@ -21,14 +21,16 @@
   </a-form-model>
 </template>
 <script>
+const defaultForm = {
+  typeId: '',
+  sort: 100,
+};
+
 export default {
   data() {
     return {
       /** 表单数据 */
-      form: {
-        typeId: '',
-        sort: 100,
-      },
+      form: {},
       /** 验证格式 */
       rules: {
         value: [{ required: true, message: '请输入字典值' }],
@@ -48,17 +50,15 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record, typeId) {
-      if (typeId) {
-        this.form.typeId = typeId;
-      } else {
-        /** 将默认数据覆盖到form */
-        this.form = this.$_.cloneDeep({
-          ...record,
-          /** 在此处添加默认数据转换 */
-          /** ... */
-        });
-      }
+    onFillData(params) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+        typeId: params.typeId,
+      });
     },
 
     /**
diff --git a/Web/src/pages/system/dict/dictdata/index.vue b/Web/src/pages/system/dict/dictdata/index.vue
index 42f8efd..035e821 100644
--- a/Web/src/pages/system/dict/dictdata/index.vue
+++ b/Web/src/pages/system/dict/dictdata/index.vue
@@ -1,26 +1,21 @@
 <template>
   <a-card>
-    <Auth auth="sysDictData:page">
-      <div class="yo-query-bar">
-        <a-form-model :model="query" layout="inline">
-          <!-- 此处添加查询表单控件 -->
-          <a-form-model-item label="文本">
-            <a-input placeholder="请输入文本" v-model="query.value" />
-          </a-form-model-item>
-          <a-form-model-item label="字典值">
-            <a-input placeholder="请输入字典值" v-model="query.code" />
-          </a-form-model-item>
-          <a-form-model-item>
-            <a-button-group>
-              <a-button @click="onQuery" type="primary">查询</a-button>
-              <a-button @click="onResetQuery">重置</a-button>
-            </a-button-group>
-          </a-form-model-item>
-        </a-form-model>
-      </div>
-    </Auth>
-
-    <yo-table :columns="columns" :load-data="loadData" ref="table">
+    <yo-table
+      :columns="columns"
+      :load-data="loadData"
+      @query="onQuery"
+      @resetQuery="onResetQuery"
+      ref="table"
+    >
+      <Auth auth="sysDictData:page" slot="query">
+        <!-- 此处添加查询表单控件 -->
+        <a-form-model-item label="文本">
+          <a-input placeholder="请输入文本" v-model="query.value" />
+        </a-form-model-item>
+        <a-form-model-item label="字典值">
+          <a-input placeholder="请输入字典值" v-model="query.code" />
+        </a-form-model-item>
+      </Auth>
       <Auth auth="sysDictData:add" slot="operator">
         <a-button @click="onOpen('add-form')" icon="plus">新增字典数据</a-button>
       </Auth>
@@ -42,18 +37,21 @@
       </span>
     </yo-table>
 
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <yo-modal-form :action="$api.sysDictDataAdd" @ok="onReloadData" ref="add-form" title="新增字典数据">
+      <form-body />
+    </yo-modal-form>
+
+    <yo-modal-form :action="$api.sysDictDataEdit" @ok="onReloadData" ref="edit-form" title="编辑字典数据">
+      <form-body />
+    </yo-modal-form>
   </a-card>
 </template>
 <script>
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   props: {
     type: {
@@ -187,7 +185,10 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.type.id);
+      this.$refs[formName].onOpen({
+        typeId: this.type.id,
+        record,
+      });
     },
 
     /**
diff --git a/Web/src/pages/system/dict/editForm.vue b/Web/src/pages/system/dict/editForm.vue
deleted file mode 100644
index 2c6143b..0000000
--- a/Web/src/pages/system/dict/editForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="编辑字典类型"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysDictTypeEdit(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/dict/form.vue b/Web/src/pages/system/dict/form.vue
index 6528541..a56ed6c 100644
--- a/Web/src/pages/system/dict/form.vue
+++ b/Web/src/pages/system/dict/form.vue
@@ -47,10 +47,10 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
       this.form = this.$_.cloneDeep({
-        ...record,
+        ...params.record,
         /** 在此处添加默认数据转换 */
         /** ... */
       });
diff --git a/Web/src/pages/system/dict/index.vue b/Web/src/pages/system/dict/index.vue
index cc17943..b77c892 100644
--- a/Web/src/pages/system/dict/index.vue
+++ b/Web/src/pages/system/dict/index.vue
@@ -2,27 +2,21 @@
   <container>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysDictType:page">
-        <div class="yo-query-bar">
-          <a-form-model :model="query" layout="inline">
-            <!-- 此处添加查询表单控件 -->
-            <a-form-model-item label="类型名称">
-              <a-input placeholder="请输入类型名称" v-model="query.name" />
-            </a-form-model-item>
-            <a-form-model-item label="唯一编码">
-              <a-input placeholder="请输入唯一编码" v-model="query.code" />
-            </a-form-model-item>
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="onResetQuery">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
-      </Auth>
-
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysDictType:page" slot="query">
+          <a-form-model-item label="类型名称">
+            <a-input placeholder="请输入类型名称" v-model="query.name" />
+          </a-form-model-item>
+          <a-form-model-item label="唯一编码">
+            <a-input placeholder="请输入唯一编码" v-model="query.code" />
+          </a-form-model-item>
+        </Auth>
         <Auth auth="sysDictType:add" slot="operator">
           <a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
         </Auth>
@@ -48,21 +42,25 @@
       </yo-table>
     </a-card>
     <br />
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
+      <form-body />
+    </yo-modal-form>
+
+    <yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
 import DictData from './dictdata';
 
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 export default {
   components: {
     DictData,
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
@@ -197,7 +195,9 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+      });
     },
 
     /**
diff --git a/Web/src/pages/system/doc/highlight.js b/Web/src/pages/system/doc/highlight.js
index 78919c2..9b86ab0 100644
--- a/Web/src/pages/system/doc/highlight.js
+++ b/Web/src/pages/system/doc/highlight.js
@@ -1,17 +1,23 @@
+import { template } from "lodash"
+
 export default {
     props: {
         code: {
             type: String
+        },
+        copyTemplate: {
+            type: Boolean,
+            default: false
         }
     },
 
     methods: {
-        onCopy() {
+        baseCopy(content) {
             try {
                 const $textarea = document.createElement('textarea')
                 $textarea.style = 'opacity: 0;position: fixed;top: -10000;left: -10000'
                 document.body.append($textarea)
-                $textarea.value = this.code
+                $textarea.value = content
                 $textarea.select()
                 document.execCommand('copy')
                 $textarea.remove()
@@ -21,7 +27,24 @@ export default {
             {
                 this.$message.error('复制失败')
             }
-        }
+        },
+        onCopy() {
+            this.baseCopy(this.code)
+        },
+        onCopyTemplate() {
+            const code = '"' +
+                this.code
+                    // 转义双引号 => \"
+                    .replace(/"/g, '\\"')
+                    // 转义$ => $$
+                    .replace(/\$/g, '$$$$')
+                    // 替换行首 => "
+                    .replace(/\n/g, '"')
+                    // 替换行末 = ",
+                    .replace(/\r/g, '",\r') +
+                '"'
+            this.baseCopy(code)
+        },
     },
 
     render() {
@@ -34,7 +57,26 @@ export default {
             <section>
                 <highlightjs {...{ props }} style={{ maxHeight: '400px', overflow: 'auto' }} />
                 <div class="text-right">
-                    <a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
+                    {this.$scopedSlots.actions && this.$scopedSlots.actions().map(p => {
+                        return (
+                            <span>
+                                {p}
+                                <a-divider type="vertical" />
+                            </span>
+                        )
+                    })}
+                    {
+                        this.copyTemplate &&
+                        <span>
+                            <a-tooltip title="复制用户片段模版">
+                                <a-button size="small" type="dashed" onClick={this.onCopyTemplate} class="mb-xs">Copy template</a-button>
+                            </a-tooltip>
+                            <a-divider type="vertical" />
+                        </span>
+                    }
+                    <a-tooltip title="复制内容">
+                        <a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
+                    </a-tooltip>
                 </div>
             </section>
         )
diff --git a/Web/src/pages/system/doc/index.vue b/Web/src/pages/system/doc/index.vue
index 9b5949b..ccce3fd 100644
--- a/Web/src/pages/system/doc/index.vue
+++ b/Web/src/pages/system/doc/index.vue
@@ -3,12 +3,7 @@
     <container>
       <a-row :gutter="16" type="flex">
         <a-col flex="auto">
-          <container
-            :id="`doc-${index}`"
-            :key="index"
-            mode="container"
-            v-for="(doc, index) in docs"
-          >
+          <container :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
             <section>
               <h1>{{ doc.title }}</h1>
               <component :codes="codes" :is="doc.component" v-if="doc.path" />
diff --git a/Web/src/pages/system/doc/seed/form.vue b/Web/src/pages/system/doc/seed/form.vue
index 5dc650c..c7287d0 100644
--- a/Web/src/pages/system/doc/seed/form.vue
+++ b/Web/src/pages/system/doc/seed/form.vue
@@ -1,20 +1,10 @@
 <template>
   <section>
-    <h4>
-      新增
-      <a-tag>1.0</a-tag>
-    </h4>
-    <Highlight :code="codes['/seed/addForm.vue']" language="html" />
-    <h4>
-      编辑
-      <a-tag>1.0</a-tag>
-    </h4>
-    <Highlight :code="codes['/seed/editForm.vue']" language="html" />
-    <h4>
-      表单主体
-      <a-tag>1.0</a-tag>
-    </h4>
-    <Highlight :code="codes['/seed/form.vue']" language="html" />
+    <p>
+      当前版本
+      <a-tag>1.2</a-tag>
+    </p>
+    <Highlight :code="codes['/seed/form.vue']" copy-template language="html" />
   </section>
 </template>
 <script>
@@ -30,4 +20,4 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/Web/src/pages/system/doc/seed/query.vue b/Web/src/pages/system/doc/seed/query.vue
index f772251..e9cebd3 100644
--- a/Web/src/pages/system/doc/seed/query.vue
+++ b/Web/src/pages/system/doc/seed/query.vue
@@ -2,9 +2,9 @@
   <section>
     <p>
       当前版本
-      <a-tag>1.1</a-tag>
+      <a-tag>1.2</a-tag>
     </p>
-    <Highlight :code="codes['/seed/query.vue']" language="html" />
+    <Highlight :code="codes['/seed/query.vue']" copy-template language="html" />
   </section>
 </template>
 <script>
diff --git a/Web/src/pages/system/doc/seed/treeLayout.vue b/Web/src/pages/system/doc/seed/treeLayout.vue
index 37a6fe7..6b789ea 100644
--- a/Web/src/pages/system/doc/seed/treeLayout.vue
+++ b/Web/src/pages/system/doc/seed/treeLayout.vue
@@ -2,9 +2,9 @@
   <section>
     <p>
       当前版本
-      <a-tag>1.0</a-tag>
+      <a-tag>1.1</a-tag>
     </p>
-    <Highlight :code="codes['/seed/treeLayout.vue']" language="html" />
+    <Highlight :code="codes['/seed/treeLayout.vue']" copy-template language="html" />
   </section>
 </template>
 <script>
diff --git a/Web/src/pages/system/menu/form.vue b/Web/src/pages/system/menu/form.vue
index 7ce629a..818f981 100644
--- a/Web/src/pages/system/menu/form.vue
+++ b/Web/src/pages/system/menu/form.vue
@@ -148,9 +148,7 @@ export default {
   data() {
     return {
       /** 表单数据 */
-      form: {
-        ...defaultValue,
-      },
+      form: {},
       /** 验证格式 */
       rules: {
         type: [{ required: true, message: '请选择菜单类型' }],
@@ -185,13 +183,21 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(params) {
       /** 将默认数据覆盖到form */
-      this.form = this.$_.cloneDeep({
-        ...record,
+      let form = {
+        ...defaultValue,
+        ...params.record,
         /** 在此处添加默认数据转换 */
         /** ... */
-      });
+      };
+
+      if (params.isParent) {
+        form.pid = params.parent.id;
+        form.application = params.parent.application;
+      }
+
+      this.form = this.$_.cloneDeep(form);
     },
 
     /**
@@ -244,20 +250,17 @@ export default {
      * 必要方法
      * 加载当前表单中所需要的异步数据
      */
-    async onInit(record, isParent = false) {
+    async onInit(params) {
       this.loading = true;
 
       /** 可以在这里await获取一些异步数据 */
       /** ...BEGIN */
       this.codes = await this.onLoadCodes();
       this.appList = await this.onLoadSysApplist();
-      if (record) {
-        await this.onLoadMenuTree(record.application);
-
-        if (isParent) {
-          this.$set(this.form, 'pid', record.id);
-          this.$set(this.form, 'application', record.application);
-        }
+      if (params.isParent) {
+        await this.onLoadMenuTree(params.parent.application);
+      } else if (params.record) {
+        await this.onLoadMenuTree(params.record.application);
       }
       /** ...END */
       this.loading = false;
diff --git a/Web/src/pages/system/menu/index.vue b/Web/src/pages/system/menu/index.vue
index ee64e1a..ac6a561 100644
--- a/Web/src/pages/system/menu/index.vue
+++ b/Web/src/pages/system/menu/index.vue
@@ -19,7 +19,7 @@
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
             <Auth auth="sysMenu:add" v-if="record.type < 2">
-              <a @click="onOpen('add-form', record)">新增子菜单</a>
+              <a @click="onOpen('add-form', record, true)">新增子菜单</a>
             </Auth>
             <Auth auth="sysMenu:edit">
               <a @click="onOpen('edit-form', record)">编辑</a>
@@ -33,19 +33,36 @@
         </span>
       </yo-table>
     </a-card>
-    <br />
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <yo-modal-form
+      :action="$api.sysMenuAdd"
+      :width="800"
+      @ok="onReloadData"
+      ref="add-form"
+      title="新增菜单"
+      type="drawer"
+    >
+      <form-body />
+    </yo-modal-form>
+
+    <yo-modal-form
+      :action="$api.sysMenuEdit"
+      :width="800"
+      @ok="onReloadData"
+      ref="edit-form"
+      title="编辑菜单"
+      type="drawer"
+    >
+      <form-body />
+    </yo-modal-form>
   </container>
 </template>
 <script>
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   data() {
     return {
@@ -178,8 +195,17 @@ export default {
      * 有编辑新增功能的必要方法
      * 从列表页调用窗口的打开方法
      */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+    onOpen(formName, record, isParent = false) {
+      const params = isParent
+        ? {
+            parent: record,
+            isParent,
+          }
+        : {
+            record,
+            isParent,
+          };
+      this.$refs[formName].onOpen(params);
     },
 
     onResult(success, successMessage) {
diff --git a/Web/src/pages/system/role/dataForm.vue b/Web/src/pages/system/role/dataForm.vue
index 4d26a6e..e24cca7 100644
--- a/Web/src/pages/system/role/dataForm.vue
+++ b/Web/src/pages/system/role/dataForm.vue
@@ -138,17 +138,6 @@ export default {
 
     onLoadAreaTreeData() {
       return this.$api.getAreaTree().then(({ data }) => {
-        // 为了防止出现空的层级选择,删除所有空children节点
-        const clearChiildren = (data) => {
-          data.forEach((item) => {
-            if (item.children && item.children.length) {
-              clearChiildren(item.children);
-            } else {
-              delete item.children;
-            }
-          });
-        };
-        clearChiildren(data);
         return data;
       });
     },
diff --git a/Web/src/pages/system/user/orgForm.vue b/Web/src/pages/system/user/dataForm.vue
similarity index 71%
rename from Web/src/pages/system/user/orgForm.vue
rename to Web/src/pages/system/user/dataForm.vue
index 9a037f2..8407c31 100644
--- a/Web/src/pages/system/user/orgForm.vue
+++ b/Web/src/pages/system/user/dataForm.vue
@@ -11,16 +11,27 @@
       <a-spin :spinning="loading">
         <a-icon slot="indicator" spin type="loading" />
         <div class="yo-form-group">
-          <a-form-model-item class="yo-form--fluid">
+          <a-form-model-item label="选择机构">
             <a-tree-select
               :show-checked-strategy="SHOW_PARENT"
-              :tree-data="orgList"
+              :tree-data="orgTreeData"
               placeholder="请选择机构"
               search-placeholder="请检索"
               tree-checkable
               v-model="orgs"
             />
           </a-form-model-item>
+          <a-form-model-item label="区域">
+            <a-tree-select
+              :replace-fields="{ title: 'name', value: 'code', children: 'children' }"
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="arerTreeData"
+              placeholder="请区域"
+              search-placeholder="请检索"
+              tree-checkable
+              v-model="areas"
+            />
+          </a-form-model-item>
         </div>
       </a-spin>
     </a-form-model>
@@ -40,7 +51,11 @@ export default {
 
       id: '',
       orgs: [],
-      orgList: [],
+      orgTreeData: [],
+
+      areas: [],
+      arerTreeData: [],
+
       SHOW_PARENT,
     };
   },
@@ -69,6 +84,7 @@ export default {
         .sysUserGrantData({
           id: this.id,
           grantOrgIdList: this.orgs,
+          grantAreaCodeList: this.areas,
         })
         .then(({ success }) => {
           if (success) {
@@ -90,22 +106,31 @@ export default {
       this.visible = false;
       setTimeout(() => {
         this.orgs = [];
+        this.areas = [];
       }, 300);
     },
 
     async onInit() {
       this.loading = true;
-      this.orgList = await this.onLoadOrgList();
+      this.orgTreeData = await this.onLoadOrgTreeData();
       this.orgs = await this.onLoadOrg();
+
+      this.arerTreeData = await this.onLoadAreaTreeData();
       this.loading = false;
     },
 
-    onLoadOrgList() {
+    onLoadOrgTreeData() {
       return this.$api.getOrgTree().then(({ data }) => {
         return data;
       });
     },
 
+    onLoadAreaTreeData() {
+      return this.$api.getAreaTree().then(({ data }) => {
+        return data;
+      });
+    },
+
     onLoadOrg() {
       return this.$api.sysUserOwnData({ id: this.id }).then(({ data }) => {
         return data;
diff --git a/Web/src/pages/system/user/index.vue b/Web/src/pages/system/user/index.vue
index fa6519d..644d66f 100644
--- a/Web/src/pages/system/user/index.vue
+++ b/Web/src/pages/system/user/index.vue
@@ -66,7 +66,7 @@
                   </Auth>
                   <Auth auth="sysUser:grantData">
                     <a-menu-item>
-                      <a @click="onOpen('org-form', record)">授权额外数据</a>
+                      <a @click="onOpen('data-form', record)">授权额外数据</a>
                     </a-menu-item>
                   </Auth>
                 </a-menu>
@@ -112,7 +112,7 @@
     <add-form @ok="onReloadData" ref="add-form" />
     <edit-form @ok="onReloadData" ref="edit-form" />
     <role-form @ok="onReloadData" ref="role-form" />
-    <org-form @ok="onReloadData" ref="org-form" />
+    <data-form @ok="onReloadData" ref="data-form" />
   </yo-tree-layout>
 </template>
 <script>
@@ -122,7 +122,7 @@ import YoList from '@/components/yoList';
 import AddForm from './addForm';
 import EditForm from './editForm';
 import RoleForm from './roleForm';
-import OrgForm from './orgForm';
+import DataForm from './dataForm';
 
 export default {
   components: {
@@ -131,7 +131,7 @@ export default {
     AddForm,
     EditForm,
     RoleForm,
-    OrgForm,
+    DataForm,
   },
 
   data() {
diff --git a/Web/src/views/main/_layout/header/index.vue b/Web/src/views/main/_layout/header/index.vue
index 79aae2f..50f3fa5 100644
--- a/Web/src/views/main/_layout/header/index.vue
+++ b/Web/src/views/main/_layout/header/index.vue
@@ -10,7 +10,7 @@
         >
           <a-icon :type="$root.global.settings.siderCollapsed ? 'menu-unfold' : 'menu-fold'" />
         </a>
-        <search :menus="nav.menus" />
+        <search :menus="nav.content" />
       </div>
       <div class="header-actions">
         <User />
@@ -29,9 +29,11 @@
     </section>
     <container v-else-if="$root.global.settings.layout === 'top-nav'">
       <div class="header-actions">
+        <a @click="showNav = !showNav" class="header-action mr-md">
+          <a-icon type="menu" />
+        </a>
         <Logo />
-        <Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
-        <search :menus="nav.menus" />
+        <search :menus="nav.content" />
       </div>
       <div class="header-actions">
         <User />
@@ -47,12 +49,26 @@
           <a-icon type="setting" />
         </a>
       </div>
+      <a-drawer
+        :body-style="{ padding: 0 }"
+        :closable="false"
+        :get-container="'.ant-layout-content > .ant-tabs'"
+        :visible="showNav"
+        :wrap-style="{ position: 'absolute' }"
+        @close="showNav = false"
+        placement="left"
+        width="38.2%"
+      >
+        <div @blur="showNav = false" @mouseleave="showNav = false">
+          <Nav :nav="nav" @open="showNav = false" />
+        </div>
+      </a-drawer>
     </container>
   </a-layout-header>
 </template>
 <script>
 import Logo from '../logo';
-import Sider from '../sider';
+import Nav from '../nav';
 
 import User from './user';
 import Search from './search';
@@ -60,7 +76,7 @@ import Search from './search';
 export default {
   components: {
     Logo,
-    Sider,
+    Nav,
 
     User,
     Search,
@@ -69,12 +85,16 @@ export default {
     nav: {
       default() {
         return {
-          apps: [],
-          menus: [],
+          content: [],
         };
       },
       type: Object,
     },
   },
+  data() {
+    return {
+      showNav: false,
+    };
+  },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/views/main/_layout/header/search.js b/Web/src/views/main/_layout/header/search.js
index 1e8fb2f..cae9bd6 100644
--- a/Web/src/views/main/_layout/header/search.js
+++ b/Web/src/views/main/_layout/header/search.js
@@ -46,7 +46,7 @@ export default {
         onSearch(value) {
             this.searchText = value
 
-            const menus = this.$_.cloneDeep(this.menus)
+            const menus = this.$_.concat.apply(this, this.$_.cloneDeep(this.menus.map(p => p.menu)))
 
             const search = (m) => {
                 if (!value) return []
@@ -83,12 +83,14 @@ export default {
                 return result
             }
 
-            this.searchResult = unzip(search(menus)).map(p => {
+            const result = unzip(search(menus)).filter(p => p.parents.length).map(p => {
                 return {
                     parents: p.parents.join('-'),
                     children: p.children
                 }
             })
+
+            this.searchResult = result
         },
 
         onSearchSelect(value, node) {
diff --git a/Web/src/views/main/_layout/nav/index.js b/Web/src/views/main/_layout/nav/index.js
new file mode 100644
index 0000000..cdea4d7
--- /dev/null
+++ b/Web/src/views/main/_layout/nav/index.js
@@ -0,0 +1,78 @@
+export default {
+    props: {
+        nav: {
+            type: Object,
+            default() {
+                return {
+                    content: []
+                }
+            }
+        }
+    },
+
+    methods: {
+        onOpenContentWindow(menu) {
+            this.$emit('open')
+            setTimeout(() => {
+                this.openContentWindow({
+                    key: menu.id,
+                    title: menu.meta.title,
+                    icon: menu.meta.icon,
+                    path: menu.component,
+                })
+            }, 300)
+        },
+    },
+
+    render() {
+        return (
+            <container mode="container-fluid">
+                {this.nav.content.map((item, i) => {
+                    return (
+                        <section class="yo-nav">
+                            <h5 class="yo-nav--app">{item.app.name}</h5>
+                            <div class="yo-nav--row">
+                                {
+                                    item.menu.map(sub => {
+                                        return (
+                                            <div class="yo-nav--col">
+                                                <div class="yo-nav--sub-item">
+                                                    {
+                                                        sub.children ?
+                                                            <div class="yo-nav--item-group">
+                                                                {
+                                                                    sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
+                                                                }
+                                                                {sub.meta.title}
+                                                            </div>
+                                                            :
+                                                            <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(sub)}>
+                                                                {
+                                                                    sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
+                                                                }
+                                                                {sub.meta.title}
+                                                            </div>
+                                                    }
+                                                    {
+                                                        sub.children && sub.children.map(menu => {
+                                                            return <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(menu)}>
+                                                                {
+                                                                    menu.meta.icon && <a-icon type={menu.meta.icon} class="mr-xs" />
+                                                                }
+                                                                {menu.meta.title}
+                                                            </div>
+                                                        })
+                                                    }
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </section>
+                    )
+                })}
+            </container>
+        )
+    }
+}
\ No newline at end of file
diff --git a/Web/src/views/main/_layout/sider/app.vue b/Web/src/views/main/_layout/sider/app.vue
deleted file mode 100644
index f97d621..0000000
--- a/Web/src/views/main/_layout/sider/app.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <a-popover :placement="placement" trigger="click">
-    <template slot="content">
-      <a-button-group>
-        <a-button :key="app.code" @click="onChangeApp(app)" v-for="app in apps">{{ app.name }}</a-button>
-      </a-button-group>
-    </template>
-    <div class="yo-apps-selector">
-      <span>{{ appActived.name }}</span>
-    </div>
-  </a-popover>
-</template>
-<script>
-export default {
-  props: {
-    apps: {
-      type: Array,
-      require: true,
-    },
-  },
-
-  computed: {
-    placement() {
-      const layout = this.$root.global.settings.layout;
-      switch (layout) {
-        case 'left-menu':
-          return 'right';
-        case 'right-menu':
-          return 'left';
-        default:
-          return 'bottom';
-      }
-    },
-
-    appActived() {
-      return this.apps.find((p) => p.active) || {};
-    },
-  },
-
-  methods: {
-    onChangeApp(app) {
-      this.$emit('change-app', app);
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/views/main/_layout/sider/index copy.vue b/Web/src/views/main/_layout/sider/index copy.vue
deleted file mode 100644
index 004b462..0000000
--- a/Web/src/views/main/_layout/sider/index copy.vue	
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <section>
-    <a-layout-sider
-      :collapsed="siderCollapsed === undefined ? $root.global.settings.siderCollapsed : siderCollapsed"
-      @collapse="onCollapse"
-      v-if="$root.global.settings.layout === 'left-menu' || $root.global.settings.layout === 'right-menu'"
-      width="200"
-    >
-      <Logo />
-      <div class="yo-sider-nav">
-        <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
-        <!-- <swiper :options="siderSwiperOptions" ref="sider-swiper">
-          <swiper-slide>
-            <a-spin :spinning="nav.loading">
-              <a-icon slot="indicator" spin type="loading" />
-              <Menu
-                :menu-style="{ height: '100%', borderRight: 0 }"
-                :nav="nav"
-                @openChange="onMenuOpenChange"
-                mode="inline"
-              />
-            </a-spin>
-          </swiper-slide>
-          <div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
-        </swiper>-->
-        <div class="swiper-container" id="layout--swiper-container">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <a-spin :spinning="nav.loading">
-                <a-icon slot="indicator" spin type="loading" />
-                <Menu
-                  :menu-style="{ height: '100%', borderRight: 0 }"
-                  :nav="nav"
-                  @openChange="onMenuOpenChange"
-                  mode="inline"
-                />
-              </a-spin>
-            </div>
-            <div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
-          </div>
-        </div>
-      </div>
-    </a-layout-sider>
-    <template v-else-if="$root.global.settings.layout === 'top-nav'">
-      <Menu
-        :menu-style="{ borderBottom: 0 }"
-        :nav="nav"
-        @openChange="onMenuOpenChange"
-        mode="horizontal"
-      />
-    </template>
-  </section>
-</template>
-<script>
-import Logo from '../logo';
-import App from './app';
-import Menu from './menu';
-
-import Swiper from 'swiper';
-
-let timer,
-  swiper,
-  siderSwiperOptions = {
-    direction: 'vertical',
-    slidesPerView: 'auto',
-    freeMode: true,
-    scrollbar: {
-      el: '#layout--swiper-scrollbar',
-    },
-    mousewheel: true,
-  };
-
-export default {
-  components: {
-    Logo,
-    App,
-    Menu,
-  },
-  props: {
-    nav: {
-      default() {
-        return {
-          apps: [],
-          menus: [],
-          loading: false,
-        };
-      },
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      siderCollapsed: undefined,
-    };
-  },
-  mounted() {
-    swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
-
-    window.addEventListener('resize', () => {
-      if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
-        if (!this.$root.global.settings.siderCollapsed) {
-          if (window.innerWidth < 1000) {
-            this.siderCollapsed = true;
-          } else {
-            this.siderCollapsed = undefined;
-          }
-        }
-
-        this.onUpdateSwiper();
-      }
-    });
-  },
-  methods: {
-    onUpdateSwiper() {
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        // if (this.$refs['sider-swiper']) {
-        //   this.$refs['sider-swiper'].$swiper.update();
-        // }
-        swiper.update();
-      }, 300);
-    },
-
-    onMenuOpenChange() {
-      this.onUpdateSwiper();
-    },
-
-    onCollapse() {
-      this.onUpdateSwiper();
-    },
-
-    windowTriggerResize() {
-      let e = new Event('resize');
-      window.dispatchEvent(e);
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/views/main/_layout/sider/index.vue b/Web/src/views/main/_layout/sider/index.vue
index 0acaa6c..190312e 100644
--- a/Web/src/views/main/_layout/sider/index.vue
+++ b/Web/src/views/main/_layout/sider/index.vue
@@ -8,7 +8,6 @@
     >
       <Logo />
       <div class="yo-sider-nav">
-        <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
         <div class="swiper-container" id="layout--swiper-container">
           <div class="swiper-wrapper">
             <div class="swiper-slide">
@@ -27,19 +26,10 @@
         </div>
       </div>
     </a-layout-sider>
-    <template v-else-if="$root.global.settings.layout === 'top-nav'">
-      <Menu
-        :menu-style="{ borderBottom: 0 }"
-        :nav="nav"
-        @openChange="onMenuOpenChange"
-        mode="horizontal"
-      />
-    </template>
   </section>
 </template>
 <script>
 import Logo from '../logo';
-import App from './app';
 import Menu from './menu';
 
 import Swiper from 'swiper';
@@ -59,7 +49,6 @@ let timer,
 export default {
   components: {
     Logo,
-    App,
     Menu,
   },
   props: {
diff --git a/Web/src/views/main/_layout/sider/menu.js b/Web/src/views/main/_layout/sider/menu.js
index 573f23c..8191710 100644
--- a/Web/src/views/main/_layout/sider/menu.js
+++ b/Web/src/views/main/_layout/sider/menu.js
@@ -1,10 +1,11 @@
+import { HmacMD5 } from "crypto-js"
+
 export default {
     props: {
         nav: {
             default() {
                 return {
-                    modules: [],
-                    menus: [],
+                    content: []
                 }
             },
             type: Object,
@@ -75,6 +76,17 @@ export default {
             openChange: this.onMenuOpenChange,
         }
 
-        return <a-menu {...{ props, on }}>{this.renderMenu(this.nav.menus)}</a-menu>
+        return (<section>
+            {
+                this.nav.content.map(item => {
+                    return (
+                        <section>
+                            <div class="yo-sider-nav--app">{item.app.name}</div>
+                            <a-menu {...{ props, on }}>{this.renderMenu(item.menu)}</a-menu>
+                        </section>
+                    )
+                })
+            }
+        </section>)
     },
 }
\ No newline at end of file
diff --git a/Web/src/views/main/index.vue b/Web/src/views/main/index.vue
index 7183d42..a8c3db9 100644
--- a/Web/src/views/main/index.vue
+++ b/Web/src/views/main/index.vue
@@ -6,11 +6,7 @@
           [`yo-layout--${$root.global.settings.layout}`]: true,
         }"
     >
-      <Sider
-        :nav="nav"
-        @change-app="onChangeApp"
-        v-if="$root.global.settings.layout === 'left-menu'"
-      />
+      <Sider :nav="nav" v-if="$root.global.settings.layout === 'left-menu'" />
       <a-layout>
         <Header :nav="nav" @reload="onReloadContentWindow" @setting="setting.visible = true" />
         <a-layout>
@@ -40,7 +36,6 @@ import Content from './_layout/content';
 import Setting from './setting';
 
 import { setGlobal } from '@/common/login';
-import { ACTIVE_APP_KEY } from '@/common/storage';
 
 import { EMPTY_ID } from '@/util/global';
 
@@ -65,8 +60,7 @@ export default {
       },
       nav: {
         loading: false,
-        apps: [],
-        menus: [],
+        content: [],
       },
     };
   },
@@ -77,15 +71,14 @@ export default {
 
     this.nav.loading = true;
 
-    this.$api.getLoginUser().then(({ data }) => {
+    this.$api.getLoginUser().then(async ({ data }) => {
       // 去除应用和菜单信息,存储基本信息
       const info = this.$_.cloneDeep(data);
       delete info.apps;
       delete info.menus;
       setGlobal(info);
 
-      data.apps.map((p) => (p.active = p.active));
-      this.onSetNav(data);
+      this.nav.content = await this.onSetNav(data);
       this.nav.loading = false;
 
       this.$root.global.defaultWindow.map((options) => {
@@ -206,37 +199,22 @@ export default {
       this.$refs.content.onLoadContentWindow(key);
     },
 
-    onChangeApp(app) {
-      this.nav.loading = true;
-      this.$api.sysMenuChange({ application: app.code }).then(({ data }) => {
-        this.nav.apps.map((p) => (p.active = p.code === app.code));
-        window.localStorage.removeItem(ACTIVE_APP_KEY);
-        this.onSetNav({
-          apps: this.nav.apps,
-          menus: data,
-        });
-
-        this.nav.loading = false;
-      });
-    },
-
     onSetNav(nav) {
-      // 从本地存储获取当前选中的应用及菜单
-      this.nav.apps = nav.apps;
-      const code = window.localStorage.getItem(ACTIVE_APP_KEY);
-      if (code) {
-        this.nav.apps.map((p) => (p.active = p.code === code.code));
-        this.onChangeApp({
-          code,
+      const getNav = [];
+      nav.apps.forEach((app) => {
+        getNav.push({
+          app,
+        });
+      });
+
+      return this.$api
+        .$queue(getNav.map((p) => this.$api.sysMenuChangeAwait({ application: p.app.code })))
+        .then((menus) => {
+          menus.forEach((menu, i) => {
+            getNav[i].menu = this.serializeMenu(menu.data);
+          });
+          return getNav;
         });
-      } else {
-        // 将默认选中菜单存储
-        const app = nav.apps.find((p) => p.active);
-        if (app) {
-          window.localStorage.setItem(ACTIVE_APP_KEY, app.code);
-          this.serializeMenu(nav.menus);
-        }
-      }
     },
 
     serializeMenu(menus) {
@@ -252,7 +230,7 @@ export default {
         return m;
       };
 
-      this.nav.menus = children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
+      return children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
     },
   },
 };
diff --git a/Web/yarn.lock b/Web/yarn.lock
index 436919e..43ebcb9 100644
--- a/Web/yarn.lock
+++ b/Web/yarn.lock
@@ -2478,6 +2478,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/clamp/download/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+  integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -5437,6 +5442,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.throttle@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.nlark.com/lodash.throttle/download/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.npm.taobao.org/lodash.toarray/download/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -5523,6 +5533,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.0.0:
+  version "1.2.6"
+  resolved "https://registry.npm.taobao.org/material-colors/download/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha1-bRlYhxEmmSzuzHL0vMTY8BCGX0Y=
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8105,7 +8120,7 @@ timsort@^0.3.0:
   resolved "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tinycolor2@^1.4.1:
+tinycolor2@^1.1.2, tinycolor2@^1.4.1:
   version "1.4.2"
   resolved "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz?cache=0&sync_timestamp=1601056395015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftinycolor2%2Fdownload%2Ftinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha1-P2pNEHGtB2dtf6Ry4frECnGdiAM=
@@ -8493,6 +8508,16 @@ vue-awesome-swiper@^4.1.1:
   resolved "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz#8f7ab221ad003021d756b86aa618f429924900fe"
   integrity sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4=
 
+vue-color@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.npm.taobao.org/vue-color/download/vue-color-2.8.1.tgz#a090f3dcf8ed6f07afdb865cac84b19a73302e70"
+  integrity sha1-oJDz3Pjtbwev24ZcrISxmnMwLnA=
+  dependencies:
+    clamp "^1.0.1"
+    lodash.throttle "^4.0.0"
+    material-colors "^1.0.0"
+    tinycolor2 "^1.1.2"
+
 vue-eslint-parser@^7.0.0:
   version "7.6.0"
   resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz#01ea1a2932f581ff244336565d712801f8f72561"