diff --git a/Web/package.json b/Web/package.json
index 7c932a7..c51e772 100644
--- a/Web/package.json
+++ b/Web/package.json
@@ -13,6 +13,7 @@
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "echarts": "^5.0.2",
+    "highlight.js": "^10.7.2",
     "less": "^3.12.2",
     "less-loader": "4.1.0",
     "lodash": "^4.17.21",
@@ -20,6 +21,7 @@
     "swiper": "^6.5.0",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-highlight.js": "^3.1.0",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {
diff --git a/Web/public/doc-code/seed/addForm.vue b/Web/public/doc-code/seed/addForm.vue
new file mode 100644
index 0000000..28c81b2
--- /dev/null
+++ b/Web/public/doc-code/seed/addForm.vue
@@ -0,0 +1,78 @@
+<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
new file mode 100644
index 0000000..6f96748
--- /dev/null
+++ b/Web/public/doc-code/seed/editForm.vue
@@ -0,0 +1,79 @@
+<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
new file mode 100644
index 0000000..ab74d56
--- /dev/null
+++ b/Web/public/doc-code/seed/form.vue
@@ -0,0 +1,100 @@
+<template>
+  <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>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
+      rules: {},
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      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
new file mode 100644
index 0000000..c88a70c
--- /dev/null
+++ b/Web/public/doc-code/seed/query.vue
@@ -0,0 +1,189 @@
+<template>
+  <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">
+        <Auth auth="authCode:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增XX</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>
+    <br />
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    AddForm,
+    EditForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [],
+      codes: {
+        code1: [],
+        code2: [],
+      },
+    };
+  },
+  created() {
+    this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .testGetApi({
+            ...params,
+            ...this.query,
+          })
+          .then((res) => {
+            return res.data;
+          })
+      );
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'code1' }),
+          this.$api.sysDictTypeDropDownWait({ 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);
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      }
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .testDeleteApi(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/public/doc-code/seed/vue.json b/Web/public/doc-code/seed/vue.json
new file mode 100644
index 0000000..6ff84f8
--- /dev/null
+++ b/Web/public/doc-code/seed/vue.json
@@ -0,0 +1,9 @@
+{
+    "seed-index.vue": {
+        "prefix": "seed.index",
+        "body": [
+            "<template>",
+            "</template>"
+        ]
+    }
+}
\ No newline at end of file
diff --git a/Web/src/App.vue b/Web/src/App.vue
index 67822e7..bd456df 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -9,10 +9,6 @@
 <script>
 import zh_CN from 'ant-design-vue/es/locale/zh_CN';
 
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-moment.locale('zh-cn');
-
 export default {
   name: 'App',
   data() {
diff --git a/Web/src/assets/style/lib/font-size.less b/Web/src/assets/style/lib/font-size.less
index 15316f9..06b98ff 100644
--- a/Web/src/assets/style/lib/font-size.less
+++ b/Web/src/assets/style/lib/font-size.less
@@ -1 +1,25 @@
 @import (reference) '~@/assets/style/extend.less';
+h1,
+.h1 {
+  font-size: 36px;
+}
+h2,
+.h2 {
+  font-size: 32px;
+}
+h3,
+.h3 {
+  font-size: 24px;
+}
+h4,
+.h4 {
+  font-size: 18px;
+}
+h5,
+.h5 {
+  font-size: 14px;
+}
+h6,
+.h6 {
+  font-size: 12px;
+}
diff --git a/Web/src/assets/style/lib/font-weight.css b/Web/src/assets/style/lib/font-weight.css
deleted file mode 100644
index 9f97552..0000000
--- a/Web/src/assets/style/lib/font-weight.css
+++ /dev/null
@@ -1,17 +0,0 @@
-body {
-  font-weight: 100;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 300;
-}
-.ant-card-meta-title {
-  font-weight: inherit;
-}
-.ant-table-thead > tr > th {
-  font-weight: 500;
-}
diff --git a/Web/src/assets/style/lib/modal.less b/Web/src/assets/style/lib/modal.less
index 4a0fb66..e7a5ce3 100644
--- a/Web/src/assets/style/lib/modal.less
+++ b/Web/src/assets/style/lib/modal.less
@@ -1,30 +1,20 @@
 @import (reference) '~@/assets/style/extend.less';
 .ant-modal-content {
-  background-color: fade(@primary-color, 20%);
+  background-color: fade(@white, 90%);
 
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(5px);
 }
 .ant-modal-header {
   padding: @padding-sm @padding-md;
 
   background-color: transparent;
 }
-.ant-modal-title {
-  color: fade(@white, 85%);
-}
 .ant-modal-body {
   background-color: @white;
 }
 .ant-modal-footer {
   background-color: @white;
 }
-.ant-modal-close {
-  color: fade(@white, 45%);
-  &:focus,
-  &:hover {
-    color: fade(@white, 75%);
-  }
-}
 .ant-modal-close-x {
   line-height: 46px;
 
diff --git a/Web/src/assets/style/lib/tree-layout.less b/Web/src/assets/style/lib/tree-layout.less
index 723a6c3..8974a44 100644
--- a/Web/src/assets/style/lib/tree-layout.less
+++ b/Web/src/assets/style/lib/tree-layout.less
@@ -29,7 +29,7 @@
     }
     .swiper-container {
       position: absolute;
-      top: @layout-header-height - 20px;
+      top: @layout-header-height;
       left: 0;
       bottom: 0;
 
@@ -38,6 +38,32 @@
         height: auto;
         min-height: 100%;
       }
+      .swiper-scrollbar {
+        transition: @animation-duration-slow opacity;
+
+        opacity: 0;
+      }
+      &:hover {
+        .swiper-scrollbar {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  &--bar {
+    line-height: 20px;
+
+    height: 20px;
+    padding: 0 @padding-md;
+
+    text-align: right;
+    >.anticon {
+      cursor: pointer;
+
+      color: fade(@black, 50%);
+      &:hover {
+        color: fade(@black, 80%);
+      }
     }
   }
 }
diff --git a/Web/src/components/container/index.vue b/Web/src/components/container/index.vue
index 1b13d7a..86c6c8b 100644
--- a/Web/src/components/container/index.vue
+++ b/Web/src/components/container/index.vue
@@ -1,5 +1,14 @@
 <template>
-  <section :class="$root.global.settings.container || 'container-fluid'">
+  <section :class="mode || $root.global.settings.container || 'container-fluid'">
     <slot />
   </section>
-</template>
\ No newline at end of file
+</template>
+<script>
+export default {
+  props: {
+    mode: {
+      type: String,
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Web/src/components/yoTreeLayout/index.js b/Web/src/components/yoTreeLayout/index.js
index 2cdac96..e50a0d8 100644
--- a/Web/src/components/yoTreeLayout/index.js
+++ b/Web/src/components/yoTreeLayout/index.js
@@ -122,6 +122,10 @@ export default {
       this.onUpdateSwiper()
     },
 
+    onUnexpandAll() {
+      this.expandedKeys = []
+    },
+
     onSearch(value) {
       const expandedKeys = this.list
         .map(p => {
@@ -136,6 +140,10 @@ export default {
       this.expandedKeys = expandedKeys
       this.autoExpandParent = true
 
+      this.$nextTick(() => {
+        this.onUpdateSwiper()
+      })
+
     },
 
     onSelect(selectedKeys) {
@@ -238,6 +246,11 @@ export default {
               <a-input-search allowClear={true} placeholder="请输入检索关键字" onSearch={this.onSearch} />
             </div>
           </a-layout-header>
+          <div class="yo-tree-layout--bar">
+            <a-tooltip placement="bottom" title="折叠全部">
+              <a-icon type="switcher" onClick={this.onUnexpandAll} />
+            </a-tooltip>
+          </div>
           <div class="swiper-container" ref="swiper">
             <div class="swiper-wrapper">
               <div class="swiper-slide">
diff --git a/Web/src/main.js b/Web/src/main.js
index a4b1f0f..731d3a5 100644
--- a/Web/src/main.js
+++ b/Web/src/main.js
@@ -25,6 +25,10 @@ import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
 SwiperClass.use([Pagination, Mousewheel, Autoplay, Scrollbar])
 Vue.use(getAwesomeSwiper(SwiperClass))
 
+import hljs from 'highlight.js'
+import 'highlight.js/styles/vs2015.css'
+Vue.use(hljs.vuePlugin);
+
 /**
  * api全局化
  */
@@ -36,7 +40,30 @@ Vue.prototype.$api = api
  */
 import _ from 'lodash'
 Vue.prototype.$_ = _
-
+/**
+ * moment全局化
+ */
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+moment.updateLocale('zh-cn', {
+  meridiem: function (hour, minute, isLowercase) {
+    if (hour < 9) {
+      return '早上'
+    } else if (hour < 11) {
+      return '上午'
+    } else if (hour < 13) {
+      return '中午'
+    } else if (hour < 18) {
+      return '下午'
+    } else {
+      return '晚上'
+    }
+  }
+})
+Vue.prototype.$moment = moment
+/**
+ * 权限验证全局化
+ */
 import { auth } from './components/authorized'
 Vue.prototype.$auth = auth
 
diff --git a/Web/src/pages/css/app.css b/Web/src/pages/css/app.css
deleted file mode 100644
index e69de29..0000000
diff --git a/Web/src/pages/doc/use.vue b/Web/src/pages/doc/use.vue
deleted file mode 100644
index 0bc6fc9..0000000
--- a/Web/src/pages/doc/use.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div></div>
-</template>
\ No newline at end of file
diff --git a/Web/src/pages/home/index.vue b/Web/src/pages/home/index.vue
index 493baf3..b5ccad3 100644
--- a/Web/src/pages/home/index.vue
+++ b/Web/src/pages/home/index.vue
@@ -6,17 +6,14 @@
           <a-col>
             <div class="home-header-row">
               <div class="home-header-avatar">
-                <a-avatar
-                  :size="64"
-                  src="https://gss0.baidu.com/7Ls0a8Sm2Q5IlBGlnYG/sys/portraith/item/tb.1.9f0e4392.Q2njD2SGV-9wBUKqKFoQqA?t=1507123743"
-                />
+                <yo-image :id="$root.global.info.avatar" :size="64" type="avatar" />
               </div>
               <div class="home-header-content">
                 <h2>
-                  上午好，
-                  <span>软件开发人员</span>，欢迎您登录系统！
+                  {{ $moment().format('A') }}好，
+                  <span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
                 </h2>
-                <p>上次IP：115.217.160.156 上次登录时间：2021-04-06 13:10:13</p>
+                <p>上次IP：{{ $root.global.info.lastLoginIp }} 上次登录时间：{{ $root.global.info.lastLoginTime }}</p>
               </div>
             </div>
           </a-col>
diff --git a/Web/src/pages/home/notice.vue b/Web/src/pages/home/notice.vue
index 205f806..1e7144c 100644
--- a/Web/src/pages/home/notice.vue
+++ b/Web/src/pages/home/notice.vue
@@ -3,7 +3,10 @@
     <a href="#" slot="extra">更多</a>
     <a-list :data-source="data" item-layout="horizontal">
       <a-list-item slot="renderItem" slot-scope="item">
-        <a-list-item-meta :description="moment().format('YYYY-MM-DD HH:mm:ss')" :title="item.title">
+        <a-list-item-meta
+          :description="$moment().format('YYYY-MM-DD HH:mm:ss')"
+          :title="item.title"
+        >
           <a-icon :style="{ fontSize: '18px' }" slot="avatar" theme="twoTone" type="message" />
         </a-list-item-meta>
       </a-list-item>
@@ -11,8 +14,6 @@
   </a-card>
 </template>
 <script>
-import moment from 'moment';
-
 export default {
   data() {
     return {
@@ -23,8 +24,5 @@ export default {
       ],
     };
   },
-  methods: {
-    moment,
-  },
 };
 </script>
\ No newline at end of file
diff --git a/Web/src/pages/system/config/form.vue b/Web/src/pages/system/config/form.vue
index 16e8277..e12a41f 100644
--- a/Web/src/pages/system/config/form.vue
+++ b/Web/src/pages/system/config/form.vue
@@ -37,7 +37,6 @@
   </a-form-model>
 </template>
 <script>
-import moment from 'moment';
 export default {
   data() {
     return {
@@ -56,7 +55,6 @@ export default {
     };
   },
   methods: {
-      moment,
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
diff --git a/Web/src/pages/system/doc/highlight.js b/Web/src/pages/system/doc/highlight.js
new file mode 100644
index 0000000..78919c2
--- /dev/null
+++ b/Web/src/pages/system/doc/highlight.js
@@ -0,0 +1,42 @@
+export default {
+    props: {
+        code: {
+            type: String
+        }
+    },
+
+    methods: {
+        onCopy() {
+            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.select()
+                document.execCommand('copy')
+                $textarea.remove()
+                this.$message.success('已复制到剪贴板')
+            }
+            catch
+            {
+                this.$message.error('复制失败')
+            }
+        }
+    },
+
+    render() {
+        const props = {
+            ...this.$props,
+            ...this.$attrs,
+        }
+
+        return props.code && (
+            <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>
+                </div>
+            </section>
+        )
+    }
+}
\ No newline at end of file
diff --git a/Web/src/pages/system/doc/index.vue b/Web/src/pages/system/doc/index.vue
new file mode 100644
index 0000000..aa6ca76
--- /dev/null
+++ b/Web/src/pages/system/doc/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <a-card :bordered="false" class="mb-none">
+    <container>
+      <a-row :gutter="16" type="flex">
+        <a-col flex="auto">
+          <container mode="container">
+            <section :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
+              <h1>{{ doc.title }}</h1>
+              <component :codes="codes" :is="doc.component" v-if="doc.name" />
+              <template v-if="doc.children">
+                <section
+                  :id="`doc-${index}-${_index}`"
+                  :key="_index"
+                  v-for="(_doc, _index) in doc.children"
+                >
+                  <h3>{{ _doc.title }}</h3>
+                  <component :codes="codes" :is="_doc.component" v-if="_doc.name" />
+                </section>
+              </template>
+            </section>
+          </container>
+        </a-col>
+        <a-col flex="240px">
+          <a-anchor
+            :get-container="()=> $el.parentNode"
+            :offset-top="24"
+            :wrapper-style="{ backgroundColor: 'transparent' }"
+          >
+            <a-anchor-link
+              :href="`#doc-${index}`"
+              :key="index"
+              :title="doc.title"
+              v-for="(doc, index) in docs"
+            >
+              <template v-if="doc.children">
+                <a-anchor-link
+                  :href="`#doc-${index}-${_index}`"
+                  :key="_index"
+                  :title="_doc.title"
+                  v-for="(_doc, _index) in doc.children"
+                />
+              </template>
+            </a-anchor-link>
+          </a-anchor>
+        </a-col>
+      </a-row>
+    </container>
+  </a-card>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      docs: [
+        {
+          title: '开始使用',
+          name: '/usage',
+        },
+        {
+          title: '窗口',
+        },
+        {
+          title: '种子',
+          name: '/seed',
+          children: [
+            {
+              title: '查询表格',
+              name: '/seed/query',
+            },
+            {
+              title: '编辑窗口',
+              name: '/seed/form',
+            },
+          ],
+        },
+      ],
+      codes: {},
+    };
+  },
+  mounted() {
+    this.docs.forEach((doc) => {
+      if (doc.name) {
+        this.$set(doc, 'component', () => import(`.${doc.name}`));
+      }
+      if (doc.children) {
+        doc.children.forEach((_doc) => {
+          this.$set(_doc, 'component', () => import(`.${_doc.name}`));
+        });
+      }
+    });
+
+    // 读取doc-code下所有文件内容
+    const files = require.context('@/../public/doc-code', true, /\.(js|html|vue|css|less|json)(\?.*)?$/);
+    const codes = {};
+    files.keys().forEach((p) => {
+      const fileName = p.slice(1);
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', `./doc-code${fileName}`, false);
+      xhr.overrideMimeType('text/plain;charset=utf-8');
+      xhr.send(null);
+      codes[fileName] = xhr.responseText;
+    });
+    console.log(codes);
+    this.codes = codes;
+  },
+  methods: {
+    container() {
+      return this.$el;
+    },
+  },
+};
+</script>
diff --git a/Web/src/pages/system/doc/seed/form.vue b/Web/src/pages/system/doc/seed/form.vue
new file mode 100644
index 0000000..5dc650c
--- /dev/null
+++ b/Web/src/pages/system/doc/seed/form.vue
@@ -0,0 +1,33 @@
+<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" />
+  </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/seed/index.vue b/Web/src/pages/system/doc/seed/index.vue
new file mode 100644
index 0000000..ac99884
--- /dev/null
+++ b/Web/src/pages/system/doc/seed/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <section>
+    <p>种子文件已经提供了业务组件通用的架构，可以通过以下几种方式快速获取架构代码。</p>
+    <ul>
+      <li>
+        <p>
+          从
+          <a-tag class="mr-none" color="orange">@/src/pages/system/_seed</a-tag>中找到，并复制内容。
+        </p>
+      </li>
+      <li>
+        <p>
+          <b>用户片段</b>达到快速生成的目的。
+        </p>
+        <p>
+          在VSCode中，选择
+          <a-breadcrumb separator=">">
+            <a-breadcrumb-item>文件</a-breadcrumb-item>
+            <a-breadcrumb-item>首选项</a-breadcrumb-item>
+            <a-breadcrumb-item>用户片段</a-breadcrumb-item>
+          </a-breadcrumb>输入
+          <a-tag class="mr-none" color="orange">vue.json</a-tag>并回车，将会打开针对vue文件的用户片段配置JSON。
+        </p>
+      </li>
+    </ul>
+    <Highlight :code="codes['/seed/vue.json']" language="json" />
+    <ul>
+      <li>在下方直接复制代码。</li>
+    </ul>
+  </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/seed/query.vue b/Web/src/pages/system/doc/seed/query.vue
new file mode 100644
index 0000000..6d2555f
--- /dev/null
+++ b/Web/src/pages/system/doc/seed/query.vue
@@ -0,0 +1,19 @@
+<template>
+  <section>
+    <Highlight :code="codes['/seed/query.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
new file mode 100644
index 0000000..383e738
--- /dev/null
+++ b/Web/src/pages/system/doc/usage.vue
@@ -0,0 +1,17 @@
+<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/log/oplog/index.vue b/Web/src/pages/system/log/oplog/index.vue
index cb37a3b..38ffa4f 100644
--- a/Web/src/pages/system/log/oplog/index.vue
+++ b/Web/src/pages/system/log/oplog/index.vue
@@ -44,7 +44,7 @@
               <a-range-picker
                 :show-time="{
                       hideDisabledOptions: true,
-                      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+                      defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
                     }"
                 format="YYYY-MM-DD HH:mm:ss"
                 v-model="query.dates"
@@ -84,8 +84,6 @@
   </container>
 </template>
 <script>
-import moment from 'moment';
-
 export default {
   data() {
     return {
@@ -133,8 +131,6 @@ export default {
     this.onLoadCodes();
   },
   methods: {
-    moment,
-
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
@@ -142,8 +138,8 @@ export default {
     loadData(params) {
       const query = this.$_.cloneDeep(this.query);
       if (query.dates && query.dates.length) {
-        query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
-        query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+        query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+        query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
         delete query.dates;
       }
 
diff --git a/Web/src/pages/system/log/vislog/index.vue b/Web/src/pages/system/log/vislog/index.vue
index 18fccb5..a6b1f3c 100644
--- a/Web/src/pages/system/log/vislog/index.vue
+++ b/Web/src/pages/system/log/vislog/index.vue
@@ -41,7 +41,7 @@
               <a-range-picker
                 :show-time="{
                       hideDisabledOptions: true,
-                      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+                      defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
                     }"
                 format="YYYY-MM-DD HH:mm:ss"
                 v-model="query.dates"
@@ -76,8 +76,6 @@
   </container>
 </template>
 <script>
-import moment from 'moment';
-
 export default {
   data() {
     return {
@@ -125,8 +123,6 @@ export default {
     this.onLoadCodes();
   },
   methods: {
-    moment,
-
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
@@ -134,8 +130,8 @@ export default {
     loadData(params) {
       const query = this.$_.cloneDeep(this.query);
       if (query.dates && query.dates.length) {
-        query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
-        query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+        query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+        query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
         delete query.dates;
       }
 
diff --git a/Web/src/pages/system/user/form.vue b/Web/src/pages/system/user/form.vue
index f35bba0..63eb789 100644
--- a/Web/src/pages/system/user/form.vue
+++ b/Web/src/pages/system/user/form.vue
@@ -25,7 +25,7 @@
             </a-form-model-item>
             <a-form-model-item label="生日">
               <a-date-picker
-                @change="(date) => form.birthday = date ? moment(date).format('YYYY-MM-DD') : undefined"
+                @change="(date) => form.birthday = date ? $moment(date).format('YYYY-MM-DD') : undefined"
                 class="w-100-p"
                 placeholder="请选择生日"
                 v-model="form.birthday"
@@ -120,8 +120,6 @@
   </a-form-model>
 </template>
 <script>
-import moment from 'moment';
-
 const validateToNextPassword = (rule, value, callback) => {
   callback();
 };
@@ -179,8 +177,6 @@ export default {
     };
   },
   methods: {
-    moment,
-
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
@@ -189,7 +185,7 @@ export default {
       const form = this.$_.cloneDeep(record || {});
       // 日期特殊处理
       if (form.birthday) {
-        form.birthday = moment(form.birthday).format('YYYY-MM-DD');
+        form.birthday = this.$moment(form.birthday).format('YYYY-MM-DD');
       }
       // 提交的时候是"param",而获取下来却是"info",在这里转换一下
       if (form.sysEmpInfo) {
diff --git a/Web/src/pages/system/user/index.vue b/Web/src/pages/system/user/index.vue
index 52b2eaf..127e7e9 100644
--- a/Web/src/pages/system/user/index.vue
+++ b/Web/src/pages/system/user/index.vue
@@ -260,6 +260,9 @@ export default {
           } else {
             this.$message.error(message);
           }
+        })
+        .finally(() => {
+          record.statusChanging = false;
         });
     },
 
diff --git a/Web/src/views/main/_layout/header/search.js b/Web/src/views/main/_layout/header/search.js
index 0273a15..1e8fb2f 100644
--- a/Web/src/views/main/_layout/header/search.js
+++ b/Web/src/views/main/_layout/header/search.js
@@ -127,7 +127,7 @@ export default {
                 <template slot="dataSource">
                     {this.renderSelect(this.searchResult)}
                 </template>
-                <a-input>
+                <a-input allow-clear>
                     <a-icon slot="suffix" type="search" class="certain-category-icon" />
                 </a-input>
             </a-auto-complete>
diff --git a/Web/yarn.lock b/Web/yarn.lock
index 7d085f2..436919e 100644
--- a/Web/yarn.lock
+++ b/Web/yarn.lock
@@ -3241,6 +3241,11 @@ destroy@~1.0.4:
   resolved "https://registry.npm.taobao.org/destroy/download/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detect-indent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.nlark.com/detect-indent/download/detect-indent-5.0.0.tgz?cache=0&sync_timestamp=1618847240598&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdetect-indent%2Fdownload%2Fdetect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
+  integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
+
 detect-node@^2.0.4:
   version "2.0.5"
   resolved "https://registry.npm.taobao.org/detect-node/download/detect-node-2.0.5.tgz#9d270aa7eaa5af0b72c4c9d9b814e7f4ce738b79"
@@ -4418,6 +4423,11 @@ highlight.js@^10.0.0:
   resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.7.1.tgz#a8ec4152db24ea630c90927d6cae2a45f8ecb955"
   integrity sha1-qOxBUtsk6mMMkJJ9bK4qRfjsuVU=
 
+highlight.js@^10.7.2:
+  version "10.7.2"
+  resolved "https://registry.nlark.com/highlight.js/download/highlight.js-10.7.2.tgz?cache=0&sync_timestamp=1619160938319&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhighlight.js%2Fdownload%2Fhighlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
+  integrity sha1-iTGbhh7cZsSIVO0ebaIeqJ+Ec2A=
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4688,6 +4698,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.npm.taobao.org/imurmurhash/download/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/indent-string/download/indent-string-3.2.0.tgz?cache=0&sync_timestamp=1618679561483&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Findent-string%2Fdownload%2Findent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npm.taobao.org/indent-string/download/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -7054,6 +7069,14 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/redent/download/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npm.taobao.org/regenerate-unicode-properties/download/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -8169,7 +8192,7 @@ tslib@2.0.3:
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz?cache=0&sync_timestamp=1617647442601&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha1-jgdBrEX8DCJuWKF7/D5kubxsphw=
 
-tslib@^1.10.0, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.14.1.tgz?cache=0&sync_timestamp=1609887785854&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=
@@ -8482,6 +8505,15 @@ vue-eslint-parser@^7.0.0:
     esquery "^1.4.0"
     lodash "^4.17.15"
 
+vue-highlight.js@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/vue-highlight.js/download/vue-highlight.js-3.1.0.tgz#87b60b4931fd310b318f2b2c9116fe71b69dd053"
+  integrity sha1-h7YLSTH9MQsxjysskRb+cbad0FM=
+  dependencies:
+    detect-indent "^5.0.0"
+    redent "^2.0.0"
+    tslib "^1.9.3"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"