diff --git a/Web/public/doc-code/seed/query.vue b/Web/public/doc-code/seed/query.vue
index 6d561bc..72123fe 100644
--- a/Web/public/doc-code/seed/query.vue
+++ b/Web/public/doc-code/seed/query.vue
@@ -46,6 +46,13 @@
 import AddForm from './addForm';
 import EditForm from './editForm';
 
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'testPageApi',
+  delete: 'testDeleteApi',
+  /* ... */
+};
+
 export default {
   components: {
     AddForm,
@@ -81,17 +88,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return (
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testGetApi({
-            ...params,
-            ...this.query,
-          })
-          .then((res) => {
-            return res.data;
-          })
-      );
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -174,9 +176,7 @@ export default {
      */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api
-        /** !!此处必须修改调用的接口方法 */
-        .testDeleteApi(record)
+      this.$api[api.delete](record)
         .then(({ success }) => {
           this.onResult(success, '删除成功');
         })
diff --git a/Web/public/doc-code/seed/treeLayout.vue b/Web/public/doc-code/seed/treeLayout.vue
new file mode 100644
index 0000000..53f84bb
--- /dev/null
+++ b/Web/public/doc-code/seed/treeLayout.vue
@@ -0,0 +1,225 @@
+<template>
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    @select="onSelect"
+    default-expanded-keys
+    ref="tree-layout"
+  >
+    <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>
+      </a-card>
+    </container>
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </yo-tree-layout>
+</template>
+<script>
+/* 需要引用YoTreeLayout组件 */
+import YoTreeLayout from '@/components/yoTreeLayout';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  tree: 'testTreeApi',
+  page: 'testPageApi',
+  delete: 'testDeleteApi',
+  /* ... */
+};
+
+export default {
+  components: {
+    YoTreeLayout,
+    AddForm,
+    EditForm,
+  },
+
+  data() {
+    return {
+      query: {},
+      columns: [],
+    };
+  },
+
+  created() {
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+
+  methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api[api.tree]().then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 树形选择界面必要的方法
+     * 选择树节点事件
+     */
+    onSelect([id]) {
+      /* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      this.query = {
+        pid: id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReset() {
+      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+        ])
+        .then(([code1, code2]) => {
+          this.codes.code1 = code1.data;
+          this.codes.code2 = code2.data;
+        });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record, this.query['pid']);
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/assets/style/lib/form.less b/Web/src/assets/style/lib/form.less
index 70a423c..6766c00 100644
--- a/Web/src/assets/style/lib/form.less
+++ b/Web/src/assets/style/lib/form.less
@@ -5,12 +5,27 @@
     margin: 0 auto;
   }
   h1,
+  .h1,
   h2,
+  .h2,
   h3,
+  .h3,
   h4,
-  h5 {
+  .h4,
+  h5,
+  .h5,
+  h6,
+  .h6 {
     color: darken(@white, 40%);
   }
+  h3,
+  .h3 {
+    font-size: 16px;
+  }
+  h4,
+  .h4 {
+    font-size: 15px;
+  }
   .yo-form-group {
     margin-bottom: @padding-md;
   }
diff --git a/Web/src/pages/home/index.vue b/Web/src/pages/home/index.vue
index b5ccad3..9f98893 100644
--- a/Web/src/pages/home/index.vue
+++ b/Web/src/pages/home/index.vue
@@ -6,7 +6,7 @@
           <a-col>
             <div class="home-header-row">
               <div class="home-header-avatar">
-                <yo-image :id="$root.global.info.avatar" :size="64" type="avatar" />
+                <yo-image :id="$root.global.info.avatar" :size="64" icon="user" type="avatar" />
               </div>
               <div class="home-header-content">
                 <h2>
diff --git a/Web/src/pages/system/_seed/index.vue b/Web/src/pages/system/_seed/index.vue
index 9d2d8bc..b189e3e 100644
--- a/Web/src/pages/system/_seed/index.vue
+++ b/Web/src/pages/system/_seed/index.vue
@@ -46,6 +46,13 @@
 import AddForm from './addForm';
 import EditForm from './editForm';
 
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'testPageApi',
+  delete: 'testDeleteApi',
+  /* ... */
+};
+
 export default {
   components: {
     AddForm,
@@ -81,17 +88,12 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return (
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .testGetApi({
-            ...params,
-            ...this.query,
-          })
-          .then((res) => {
-            return res.data;
-          })
-      );
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
     },
 
     /**
@@ -174,9 +176,7 @@ export default {
      */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api
-        /** !!此处必须修改调用的接口方法 */
-        .testDeleteApi(record)
+      this.$api[api.delete](record)
         .then(({ success }) => {
           this.onResult(success, '删除成功');
         })
diff --git a/Web/src/pages/system/_seed/treeLayout.vue b/Web/src/pages/system/_seed/treeLayout.vue
new file mode 100644
index 0000000..53f84bb
--- /dev/null
+++ b/Web/src/pages/system/_seed/treeLayout.vue
@@ -0,0 +1,225 @@
+<template>
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    @select="onSelect"
+    default-expanded-keys
+    ref="tree-layout"
+  >
+    <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>
+      </a-card>
+    </container>
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </yo-tree-layout>
+</template>
+<script>
+/* 需要引用YoTreeLayout组件 */
+import YoTreeLayout from '@/components/yoTreeLayout';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  tree: 'testTreeApi',
+  page: 'testPageApi',
+  delete: 'testDeleteApi',
+  /* ... */
+};
+
+export default {
+  components: {
+    YoTreeLayout,
+    AddForm,
+    EditForm,
+  },
+
+  data() {
+    return {
+      query: {},
+      columns: [],
+    };
+  },
+
+  created() {
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+
+  methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api[api.tree]().then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 树形选择界面必要的方法
+     * 选择树节点事件
+     */
+    onSelect([id]) {
+      /* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
+      this.query = {
+        pid: id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReset() {
+      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
+        ])
+        .then(([code1, code2]) => {
+          this.codes.code1 = code1.data;
+          this.codes.code2 = code2.data;
+        });
+    },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
+    bindCodeValue(code, name) {
+      const c = this.codes[name].find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record, this.query['pid']);
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/doc/index.vue b/Web/src/pages/system/doc/index.vue
index c31f41f..9b5949b 100644
--- a/Web/src/pages/system/doc/index.vue
+++ b/Web/src/pages/system/doc/index.vue
@@ -123,6 +123,10 @@ const docs = [
         title: '编辑窗口',
         path: '/seed/form',
       },
+      {
+        title: '树-查询表格',
+        path: '/seed/treeLayout',
+      },
     ],
   },
   {
diff --git a/Web/src/pages/system/doc/seed/query.vue b/Web/src/pages/system/doc/seed/query.vue
index 596ee01..f772251 100644
--- a/Web/src/pages/system/doc/seed/query.vue
+++ b/Web/src/pages/system/doc/seed/query.vue
@@ -2,7 +2,7 @@
   <section>
     <p>
       当前版本
-      <a-tag>1.0</a-tag>
+      <a-tag>1.1</a-tag>
     </p>
     <Highlight :code="codes['/seed/query.vue']" language="html" />
   </section>
diff --git a/Web/src/pages/system/doc/seed/treeLayout.vue b/Web/src/pages/system/doc/seed/treeLayout.vue
new file mode 100644
index 0000000..37a6fe7
--- /dev/null
+++ b/Web/src/pages/system/doc/seed/treeLayout.vue
@@ -0,0 +1,23 @@
+<template>
+  <section>
+    <p>
+      当前版本
+      <a-tag>1.0</a-tag>
+    </p>
+    <Highlight :code="codes['/seed/treeLayout.vue']" language="html" />
+  </section>
+</template>
+<script>
+import Highlight from '../highlight';
+
+export default {
+  components: {
+    Highlight,
+  },
+  props: {
+    codes: {
+      type: Object,
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/doc/usage.vue b/Web/src/pages/system/doc/usage.vue
deleted file mode 100644
index 383e738..0000000
--- a/Web/src/pages/system/doc/usage.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <section></section>
-</template>
-<script>
-import Highlight from './highlight';
-
-export default {
-  components: {
-    Highlight,
-  },
-  props: {
-    codes: {
-      type: Object,
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/Web/src/pages/system/menu/form.vue b/Web/src/pages/system/menu/form.vue
index 6b4b32d..dbe65fa 100644
--- a/Web/src/pages/system/menu/form.vue
+++ b/Web/src/pages/system/menu/form.vue
@@ -13,10 +13,15 @@
           <a-form-model-item label="菜单类型" prop="type">
             <template slot="help">
               目录：默认添加在顶级
-              <br />菜单： <br />按钮：
+              <br />菜单：
+              <br />按钮：
             </template>
             <a-radio-group @change="onTypeChange" v-model="form.type">
-              <a-radio-button :key="type.code" :value="type.code" v-for="type in codes.menuType">{{ type.value }}</a-radio-button>
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.menuType"
+              >{{ type.value }}</a-radio-button>
             </a-radio-group>
           </a-form-model-item>
           <a-form-model-item label="名称" prop="name">
@@ -27,12 +32,21 @@
           </a-form-model-item>
           <a-form-model-item label="所属应用" prop="application">
             <a-select @change="onLoadMenuTree" placeholder="请选择所属应用" v-model="form.application">
-              <a-select-option :key="item.code" :value="item.code" v-for="item in appList">{{ item.name }}</a-select-option>
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                v-for="item in appList"
+              >{{ item.name }}</a-select-option>
             </a-select>
           </a-form-model-item>
           <!-- 父级菜单只有[目录]不可用 -->
           <a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
-            <a-tree-select :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :tree-data="parentTreeData" placeholder="请选择父级菜单" v-model="form.pid" />
+            <a-tree-select
+              :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
+              :tree-data="parentTreeData"
+              placeholder="请选择父级菜单"
+              v-model="form.pid"
+            />
           </a-form-model-item>
         </div>
 
@@ -40,11 +54,20 @@
         <div class="yo-form-group">
           <a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
             <a-radio-group @change="onOpenTypeChange" v-model="form.openType">
-              <a-radio-button :key="type.code" :value="type.code" v-for="type in codes.openType">{{ type.value }}</a-radio-button>
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.openType"
+              >{{ type.value }}</a-radio-button>
             </a-radio-group>
           </a-form-model-item>
           <!-- 前端组件只有[菜单]及[组件]可用 -->
-          <a-form-model-item label="前端组件" prop="component" v-if="form.type == 1 && form.openType == 1" v-show="form.type == 1 && form.openType == 1">
+          <a-form-model-item
+            label="前端组件"
+            prop="component"
+            v-if="form.type == 1 && form.openType == 1"
+            v-show="form.type == 1 && form.openType == 1"
+          >
             <a-input placeholder="请输入前端组件" v-model="form.component" />
           </a-form-model-item>
           <!-- 内链地址只有[菜单]及[内链]可用 -->
@@ -82,7 +105,13 @@
             </a-input>
           </a-form-model-item>
           <a-form-model-item label="排序">
-            <a-input-number :max="1000" :min="0" class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
+            <a-input-number
+              :max="1000"
+              :min="0"
+              class="w-100-p"
+              placeholder="请输入排序"
+              v-model="form.sort"
+            />
           </a-form-model-item>
           <a-form-model-item label="备注信息">
             <a-textarea placeholder="请输入备注信息" v-model="form.remark" />
@@ -233,13 +262,19 @@ export default {
     /** 当前组件的其他方法 */
     /** ... */
     onLoadCodes() {
-      return this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }), this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }), this.$api.sysDictTypeDropDownAwait({ code: 'open_type' })]).then(([menuType, menuWerght, openType]) => {
-        return {
-          menuType: menuType.data,
-          menuWerght: menuWerght.data,
-          openType: openType.data,
-        };
-      });
+      return this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
+        ])
+        .then(([menuType, menuWerght, openType]) => {
+          return {
+            menuType: menuType.data,
+            menuWerght: menuWerght.data,
+            openType: openType.data,
+          };
+        });
     },
 
     onLoadSysApplist() {