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-part/use/a.js b/Web/public/doc-part/use/a.js
new file mode 100644
index 0000000..19cff95
--- /dev/null
+++ b/Web/public/doc-part/use/a.js
@@ -0,0 +1,2 @@
+const a = 2;
+const b = 3;
\ No newline at end of file
diff --git a/Web/public/doc-part/use/test.vue b/Web/public/doc-part/use/test.vue
new file mode 100644
index 0000000..83e6095
--- /dev/null
+++ b/Web/public/doc-part/use/test.vue
@@ -0,0 +1,53 @@
+<template>
+  <container>
+    <template v-for="(doc, index) in docs">
+      <component :codes="codes" :is="doc.component" :key="index" />
+    </template>
+    <a-anchor>
+      <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
+      <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
+      <a-anchor-link
+        href="#components-anchor-demo-basic"
+        target="_blank"
+        title="Basic demo with Target"
+      />
+      <a-anchor-link href="#API" title="API">
+        <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
+        <a-anchor-link href="#Link-Props" title="Link Props" />
+      </a-anchor-link>
+    </a-anchor>
+  </container>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      docs: [
+        {
+          title: '开始使用',
+          name: 'use',
+        },
+      ],
+      codes: {},
+    };
+  },
+  mounted() {
+    this.docs.forEach((doc) => {
+      this.$set(doc, 'component', () => import(`./${doc.name}`));
+    });
+
+    const files = require.context('@/../public/doc-part', true, /\.(js|html)(\?.*)?$/);
+    const codes = {};
+    files.keys().forEach((p) => {
+      const fileName = p.slice(1);
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', `./doc-part${fileName}`, false);
+      xhr.overrideMimeType('text/plain;charset=utf-8');
+      xhr.send(null);
+      codes[fileName] = xhr.responseText;
+    });
+
+    this.codes = codes;
+  },
+};
+</script>
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/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..50d6be0 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/github.css'
+Vue.use(hljs.vuePlugin);
+
 /**
  * api全局化
  */
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/system/doc/highlight.js b/Web/src/pages/system/doc/highlight.js
new file mode 100644
index 0000000..9a89b01
--- /dev/null
+++ b/Web/src/pages/system/doc/highlight.js
@@ -0,0 +1,16 @@
+export default {
+    props: {
+        code: {
+            type: String
+        }
+    },
+
+    render() {
+        const props = {
+            ...this.$props,
+            ...this.$attrs
+        }
+
+        return props.code && <highlightjs {...{ props }} />
+    }
+}
\ 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..f968fac
--- /dev/null
+++ b/Web/src/pages/system/doc/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <container>
+    <template v-for="(doc, index) in docs">
+      <component :codes="codes" :is="doc.component" :key="index" />
+    </template>
+    <a-anchor>
+      <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
+      <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
+      <a-anchor-link
+        href="#components-anchor-demo-basic"
+        target="_blank"
+        title="Basic demo with Target"
+      />
+      <a-anchor-link href="#API" title="API">
+        <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
+        <a-anchor-link href="#Link-Props" title="Link Props" />
+      </a-anchor-link>
+    </a-anchor>
+  </container>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      docs: [
+        {
+          title: '开始使用',
+          name: 'use',
+        },
+      ],
+      codes: {},
+    };
+  },
+  mounted() {
+    this.docs.forEach((doc) => {
+      this.$set(doc, 'component', () => import(`./${doc.name}`));
+    });
+
+    const files = require.context('@/../public/doc-part', true, /\.(js|html|vue|css|less)(\?.*)?$/);
+    const codes = {};
+    files.keys().forEach((p) => {
+      const fileName = p.slice(1);
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', `./doc-part${fileName}`, false);
+      xhr.overrideMimeType('text/plain;charset=utf-8');
+      xhr.send(null);
+      codes[fileName] = xhr.responseText;
+    });
+    console.log(codes);
+    this.codes = codes;
+  },
+};
+</script>
diff --git a/Web/src/pages/system/doc/use.vue b/Web/src/pages/system/doc/use.vue
new file mode 100644
index 0000000..de1c1dd
--- /dev/null
+++ b/Web/src/pages/system/doc/use.vue
@@ -0,0 +1,21 @@
+<template>
+  <section>
+    <h3>开始使用</h3>
+    <Highlight :code="codes['/use/a.js'] || ''" language="javascript" />
+    <Highlight :code="codes['/use/test.vue'] || ''" language="javascript" />
+  </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/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"