diff --git a/web_src/.eslintrc.js b/web_src/.eslintrc.js
index 2e2e21183..bcb68d7c8 100644
--- a/web_src/.eslintrc.js
+++ b/web_src/.eslintrc.js
@@ -20,6 +20,10 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 'off',
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'space-before-function-paren': 'off',
+    'no-undef': 'off',
+    'eqeqeq': 'off',
+    'camelcase': 'off',
   }
 }
diff --git a/web_src/src/components/Index.vue b/web_src/src/components/Index.vue
index 7e7dde628..7a88e9c07 100644
--- a/web_src/src/components/Index.vue
+++ b/web_src/src/components/Index.vue
@@ -1,194 +1,211 @@
 <template>
   <div class="hello">
-
     <div class="block">
-      <div class="row header  ">
+      <div class="row header">
         <div class="right pull-right">
           <ul class="inline pull-right">
-          <li ><router-link :to="link">{{link_text}}</router-link> &nbsp;&nbsp;&nbsp;<a target="_blank" v-if="lang =='zh-cn'" href="https://www.showdoc.cc/clients">客户端</a></li>
-                </ul>
-          </div>  
+            <li>
+              <router-link :to="link">{{link_text}}</router-link>&nbsp;&nbsp;&nbsp;
+              <a
+                target="_blank"
+                v-if="lang =='zh-cn'"
+                href="https://www.showdoc.cc/clients"
+              >客户端</a>
+            </li>
+          </ul>
         </div>
+      </div>
 
       <el-carousel :height="height" :autoplay="false" arrow="always">
         <el-carousel-item style="background-color: #1bbc9b;">
-
           <div class="slide">
-              <img src="static/logo/b_64.png" alt="">
-              <h2>{{$t("section_title1")}}</h2>
-              <p><span v-html="$t('section_description1')"></span></p>
-              <p>
-                  <a class="el-button " href="https://www.showdoc.cc/demo" target="_blank">{{$t("demo")}}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                  <a class="el-button" href="https://www.showdoc.cc/help" target="_blank" >{{$t("help")}}&nbsp;</i></a>
-              </p>
+            <img src="static/logo/b_64.png" alt />
+            <h2>{{$t("section_title1")}}</h2>
+            <p>
+              <span v-html="$t('section_description1')"></span>
+            </p>
+            <p>
+              <a class="el-button" href="https://www.showdoc.cc/demo" target="_blank">{{$t("demo")}}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="el-button"
+                href="https://www.showdoc.cc/help"
+                target="_blank"
+              >{{$t("help")}}&nbsp;</a>
+            </p>
           </div>
-
         </el-carousel-item>
 
         <el-carousel-item style="background-color: #2C606A;">
           <div class="slide">
-              <h2>{{$t("section_title2")}}</h2>
-              <p><span v-html="$t('section_description2')"></span></p>
+            <h2>{{$t("section_title2")}}</h2>
+            <p>
+              <span v-html="$t('section_description2')"></span>
+            </p>
           </div>
         </el-carousel-item>
 
         <el-carousel-item style="background-color: #f90;">
           <div class="slide">
-              <h2>{{$t("section_title3")}}</h2>
-              <p><span v-html="$t('section_description3')"></span></p>
+            <h2>{{$t("section_title3")}}</h2>
+            <p>
+              <span v-html="$t('section_description3')"></span>
+            </p>
           </div>
         </el-carousel-item>
 
         <el-carousel-item style="background-color: #7CBD9D;">
           <div class="slide">
-              <h2>{{$t("section_title4")}}</h2>
-              <p><span v-html="$t('section_description4')"></span></p>
+            <h2>{{$t("section_title4")}}</h2>
+            <p>
+              <span v-html="$t('section_description4')"></span>
+            </p>
           </div>
         </el-carousel-item>
 
         <el-carousel-item style="background-color: #A77DC2;">
           <div class="slide">
-              <h2>{{$t("section_title5")}}</h2>
-              <p><span v-html="$t('section_description5')"></span></p>
+            <h2>{{$t("section_title5")}}</h2>
+            <p>
+              <span v-html="$t('section_description5')"></span>
+            </p>
           </div>
         </el-carousel-item>
 
         <el-carousel-item style="background-color: #85CE92;">
           <div class="slide">
-              <h2>{{$t("section_title6")}}</h2>
-              <p><span v-html="$t('section_description6')"></span></p>
+            <h2>{{$t("section_title6")}}</h2>
+            <p>
+              <span v-html="$t('section_description6')"></span>
+            </p>
           </div>
         </el-carousel-item>
 
         <el-carousel-item style="background-color: #4BBFC3;">
           <div class="slide">
-              <h2>{{$t("section_title7")}}</h2>
-              <p><span v-html="$t('section_description7')"></span></p>
+            <h2>{{$t("section_title7")}}</h2>
+            <p>
+              <span v-html="$t('section_description7')"></span>
+            </p>
           </div>
         </el-carousel-item>
 
         <el-carousel-item style="background-color: #1bbc9b;">
           <div class="slide">
-              <h2></h2>
-              <p>{{$t("section_description8")}}</p>
+            <h2></h2>
+            <p>{{$t("section_description8")}}</p>
             <p>
-               <el-button><router-link to="/user/login">{{$t("section_title8")}}</router-link></el-button>
+              <el-button>
+                <router-link to="/user/login">{{$t("section_title8")}}</router-link>
+              </el-button>
             </p>
           </div>
         </el-carousel-item>
-
       </el-carousel>
     </div>
-
-
   </div>
 </template>
 
 <script>
 export default {
   name: 'Index',
-  data () {
+  data() {
     return {
       height: '',
-      link:'',
-      link_text:'',
-      lang:""
+      link: '',
+      link_text: '',
+      lang: ''
     }
   },
-  methods:{
-    getHeight(){
-       if (window.innerHeight){
-          var winHeight = window.innerHeight;
-       }   
-       else if ((document.body) && (document.body.clientHeight)){
-          var winHeight = document.body.clientHeight;
-       }
-        this.height = winHeight+'px' ;
-      },
-    homePageSetting(){
-      var url = DocConfig.server+'/api/common/homePageSetting';
-      this.axios.post(url, this.form)
-        .then( (response) =>{
-          if (response.data.error_code === 0 ) {
-            if (response.data.data.home_page == 2) {
-              //跳转到登录页面
-              this.$router.replace({
-                path: "/user/login"
-              });
-            };
-            if (response.data.data.home_page == 3 && response.data.data.home_item ) {
-              //跳转到指定项目
-              this.$router.replace({
-                path: "/"+response.data.data.home_item 
-              });
-            };
-
-          }
-          
-        });
+  methods: {
+    getHeight() {
+      var winHeight
+      if (window.innerHeight) {
+        winHeight = window.innerHeight
+      } else if (document.body && document.body.clientHeight) {
+        winHeight = document.body.clientHeight
+      }
+      this.height = winHeight + 'px'
     },
-
+    homePageSetting() {
+      var url = DocConfig.server + '/api/common/homePageSetting'
+      this.axios.post(url, this.form).then(response => {
+        if (response.data.error_code === 0) {
+          if (response.data.data.home_page == 2) {
+            // 跳转到登录页面
+            this.$router.replace({
+              path: '/user/login'
+            })
+          }
+          if (
+            response.data.data.home_page == 3 &&
+            response.data.data.home_item
+          ) {
+            // 跳转到指定项目
+            this.$router.replace({
+              path: '/' + response.data.data.home_item
+            })
+          }
+        }
+      })
+    }
   },
-  mounted () {
-    var that = this ;
-    this.lang = DocConfig.lang ;
-    this.getHeight();
-    this.homePageSetting();
-    that.link = '/user/login';
-    that.link_text = that.$t("index_login_or_register");
-    this.get_user_info(function(response){
-      if (response.data.error_code === 0 ) {
-        that.link = '/item/index';
-        that.link_text = that.$t("my_item");
+  mounted() {
+    var that = this
+    this.lang = DocConfig.lang
+    this.getHeight()
+    this.homePageSetting()
+    that.link = '/user/login'
+    that.link_text = that.$t('index_login_or_register')
+    this.get_user_info(function(response) {
+      if (response.data.error_code === 0) {
+        that.link = '/item/index'
+        that.link_text = that.$t('my_item')
       }
-    });
+    })
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.el-carousel__item {
+  text-align: center;
+  font: 25px 'Microsoft Yahei';
+  color: #fff;
+}
 
+.header {
+  padding-right: 50px;
+  padding-top: 30px;
+  font-size: 18px;
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  margin-bottom: 0;
+}
+.header a {
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+.slide {
+  width: 100%;
+  max-width: 700px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding-top: 0px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 0px;
+  box-sizing: border-box;
+}
 
-  .el-carousel__item { 
-    text-align: center; 
-    font: 25px "Microsoft Yahei"; 
-    color: #fff;
-  }
-
-  .header{
-   padding-right: 50px;
-   padding-top: 30px;
-   font-size: 18px; 
-   position: fixed;
-      right: 0;
-      left: 0;
-      z-index: 1030;
-      margin-bottom: 0;
-  }
-  .header a {
-      color: white;
-      font-size: 12px;
-      font-weight: bold;
-  }
-  .slide{
-    width:100%;
-    max-width: 700px;
-    position  : absolute;
-    top       : 50%;
-    left      : 50%;
-    transform : translate(-50%,-50%);
-    padding-top: 0px;
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-bottom: 0px;
-    box-sizing: border-box;
-  }
-
-  @media only screen and (max-width: 800px) {
-    .slide p {
-      font-size: 14px;
-    }
+@media only screen and (max-width: 800px) {
+  .slide p {
+    font-size: 14px;
   }
-
+}
 </style>
diff --git a/web_src/src/components/admin/Index.vue b/web_src/src/components/admin/Index.vue
index 591ff9f02..f668e8b40 100644
--- a/web_src/src/components/admin/Index.vue
+++ b/web_src/src/components/admin/Index.vue
@@ -1,127 +1,112 @@
 <template>
-
   <div class="hello">
-
-
     <el-container>
       <el-header>
-      <div class="header_title">ShowDoc</div>
-      <router-link class="goback" to="/item/index">{{$t('goback')}}</router-link>
-    </el-header>
+        <div class="header_title">ShowDoc</div>
+        <router-link class="goback" to="/item/index">{{$t('goback')}}</router-link>
+      </el-header>
       <el-container>
         <el-aside width="150px">
-
-        <el-menu
-          default-active="1"
-          class="el-menu-vertical-demo"
-          background-color="#545c64"
-          text-color="#fff"
-          @select="select_menu"
-          active-text-color="#ffd04b">
-          <el-menu-item index="1">
-            <i class="el-icon-info"></i>
-            <span slot="title">{{$t('user_manage')}}</span>
-          </el-menu-item>
-          <el-menu-item index="2">
-            <i class="el-icon-tickets"></i>
-            <span slot="title">{{$t('item_manage')}}</span>
-          </el-menu-item>
-          <el-menu-item index="3">
-            <i class="el-icon-tickets"></i>
-            <span slot="title">{{$t('web_setting')}}</span>
-          </el-menu-item>
-        </el-menu>
-
-      </el-aside>
+          <el-menu
+            default-active="1"
+            class="el-menu-vertical-demo"
+            background-color="#545c64"
+            text-color="#fff"
+            @select="select_menu"
+            active-text-color="#ffd04b"
+          >
+            <el-menu-item index="1">
+              <i class="el-icon-info"></i>
+              <span slot="title">{{$t('user_manage')}}</span>
+            </el-menu-item>
+            <el-menu-item index="2">
+              <i class="el-icon-tickets"></i>
+              <span slot="title">{{$t('item_manage')}}</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <i class="el-icon-tickets"></i>
+              <span slot="title">{{$t('web_setting')}}</span>
+            </el-menu-item>
+          </el-menu>
+        </el-aside>
         <el-container>
           <el-main>
-
-            <User v-if="open_menu_index == 1 "> </User>
-            <Item v-if="open_menu_index == 2 "> </Item> 
-             <Setting v-if="open_menu_index == 3 "> </Setting> 
-
-        </el-main>
+            <User v-if="open_menu_index == 1 "></User>
+            <Item v-if="open_menu_index == 2 "></Item>
+            <Setting v-if="open_menu_index == 3 "></Setting>
+          </el-main>
           <el-footer>
             <!-- something -->
-        </el-footer>
+          </el-footer>
         </el-container>
       </el-container>
     </el-container>
-
-
-    </div>
-
-
-    
   </div>
 </template>
 
 <style scoped>
-  .el-header {
-    background-color: #fff;
-    color: #333;
-    text-align: center;
-    line-height: 60px;
-    border-bottom:1px solid #ddd;
-    padding-left: 0px;
+.el-header {
+  background-color: #fff;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+  border-bottom: 1px solid #ddd;
+  padding-left: 0px;
+}
 
-  }
+.el-footer {
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
 
-   .el-footer {
-    color: #333;
-    text-align: center;
-    line-height: 60px;
-  }
+.el-aside {
+  background-color: rgb(84, 92, 100);
+  color: #333;
+  text-align: center;
+  line-height: 200px;
+  height: calc(100% - 60px);
+  position: fixed;
+}
 
+.el-menu {
+  border-right: 0px;
+}
 
-  .el-aside {
-    background-color: rgb(84, 92, 100);
-    color: #333;
-    text-align: center;
-    line-height: 200px;
-    height: calc(100% - 60px);
-    position: fixed;
-  }
+.el-main {
+  margin-left: 200px;
+  overflow: visible;
+}
 
-  .el-menu{
-    border-right: 0px;
-  }
+body > .el-container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
 
-  .el-main {
-    margin-left: 200px;
-    overflow: visible;
-  }
-  
-  body > .el-container {
-    position: absolute;
-    height: 100%;
-    width: 100%;
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
 
-  }
-  
-  .el-container:nth-child(5) .el-aside,
-  .el-container:nth-child(6) .el-aside {
-    line-height: 260px;
-  }
-  
-  .el-container:nth-child(7) .el-aside {
-    line-height: 320px;
-  }
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
 
-  .goback{
-    float: right;
-    margin-right: 20px;
-  }
+.goback {
+  float: right;
+  margin-right: 20px;
+}
 
-  .header_title{
-    float: left;
-    padding-right: 35px;
-    padding-left: 25px;
-    font-size: 20px;
-    background-color: rgb(84, 92, 100);
-    color: #fff;
-    position: fixed;
-  }
+.header_title {
+  float: left;
+  padding-right: 35px;
+  padding-left: 25px;
+  font-size: 20px;
+  background-color: rgb(84, 92, 100);
+  color: #fff;
+  position: fixed;
+}
 </style>
 
 <script>
@@ -132,47 +117,54 @@ import Setting from '@/components/admin/setting/Index'
 export default {
   data() {
     return {
-      open_menu_index:1,
-    };
+      open_menu_index: 1
+    }
   },
-  components:{
+  components: {
     Item,
     User,
-     Setting,
+    Setting
   },
-  methods:{
-    select_menu(index,indexPath){
-      this.open_menu_index = 0 ;
-      this.$nextTick(()=>{
-        this.open_menu_index = index ;
-      });
-      
-    },
-    check_upadte(){
-        var that = this ;
-        var url = DocConfig.server+'/api/adminUser/checkUpdate';
-          var params = new URLSearchParams();
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response && response.data && response.data.data && response.data.data.url) {
-                  that.$message({
-                    showClose: true,
-                    duration:10000,
-                    dangerouslyUseHTMLString: true,
-                    message: '<a target="_blank" href="'+response.data.data.url+'">'+response.data.data.title+'</a>'
-                  });
-              };
-
-            });
+  methods: {
+    select_menu(index, indexPath) {
+      this.open_menu_index = 0
+      this.$nextTick(() => {
+        this.open_menu_index = index
+      })
     },
+    check_upadte() {
+      var that = this
+      var url = DocConfig.server + '/api/adminUser/checkUpdate'
+      var params = new URLSearchParams()
+      that.axios.post(url, params).then(function(response) {
+        if (
+          response &&
+          response.data &&
+          response.data.data &&
+          response.data.data.url
+        ) {
+          that.$message({
+            showClose: true,
+            duration: 10000,
+            dangerouslyUseHTMLString: true,
+            message:
+              '<a target="_blank" href="' +
+              response.data.data.url +
+              '">' +
+              response.data.data.title +
+              '</a>'
+          })
+        }
+      })
+    }
   },
-  mounted () {
-    this.check_upadte();
-    this.unset_bg_grey();
+  mounted() {
+    this.check_upadte()
+    this.unset_bg_grey()
   },
-  beforeDestroy(){
-    this.$message.closeAll();
-    this.set_bg_grey();
+  beforeDestroy() {
+    this.$message.closeAll()
+    this.set_bg_grey()
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/admin/item/Index.vue b/web_src/src/components/admin/item/Index.vue
index c17ec55e1..959519884 100644
--- a/web_src/src/components/admin/item/Index.vue
+++ b/web_src/src/components/admin/item/Index.vue
@@ -1,228 +1,184 @@
 <template>
-
-<div class="hello">
-<el-form :inline="true"  class="demo-form-inline">
-  <el-form-item label="">
-    <el-input v-model="item_name" :placeholder="$t('item_name')"></el-input>
-  </el-form-item>
-  <el-form-item label="">
-    <el-input v-model="username" :placeholder="$t('owner')" ></el-input>
-  </el-form-item>
-<!--   <el-form-item label="活动区域">
+  <div class="hello">
+    <el-form :inline="true" class="demo-form-inline">
+      <el-form-item label>
+        <el-input v-model="item_name" :placeholder="$t('item_name')"></el-input>
+      </el-form-item>
+      <el-form-item label>
+        <el-input v-model="username" :placeholder="$t('owner')"></el-input>
+      </el-form-item>
+      <!--   <el-form-item label="活动区域">
     <el-select v-model="formInline.region" placeholder="活动区域">
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
-  </el-form-item> -->
-  <el-form-item>
-    <el-button  @click="onSubmit">{{$t('search')}}</el-button>
-  </el-form-item>
-</el-form>
+      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="onSubmit">{{$t('search')}}</el-button>
+      </el-form-item>
+    </el-form>
 
- <el-table
-      :data="itemList"
-      style="width: 100%">
-      <el-table-column
-        prop="item_name"
-        :label="$t('item_name')"
-        width="140">
-      </el-table-column>
-      <el-table-column
-        prop="item_description"
-        :label="$t('item_description')"
-        width="140">
-      </el-table-column>
-      <el-table-column
-        prop="password"
-        :label="$t('privacy')"
-        :formatter="formatPrivacy"
-        width="80">
-      </el-table-column>
+    <el-table :data="itemList" style="width: 100%">
+      <el-table-column prop="item_name" :label="$t('item_name')" width="140"></el-table-column>
+      <el-table-column prop="item_description" :label="$t('item_description')" width="140"></el-table-column>
+      <el-table-column prop="password" :label="$t('privacy')" :formatter="formatPrivacy" width="80"></el-table-column>
 
-      <el-table-column
-        prop="item_id"
-        :label="$t('link')"
-        width="100">
-          <template slot-scope="scope">
-            <el-button @click="jump_to_item(scope.row)" type="text" size="small">{{$t('link')}}</el-button>
-          </template>
-      </el-table-column>
-      <el-table-column
-        prop="username"
-        :label="$t('owner')"
-        width="160">
-      </el-table-column>
-      <el-table-column
-        :label="$t('memberCount')"
-        width="80">
+      <el-table-column prop="item_id" :label="$t('link')" width="100">
+        <template slot-scope="scope">
+          <el-button @click="jump_to_item(scope.row)" type="text" size="small">{{$t('link')}}</el-button>
+        </template>
       </el-table-column>
-      <el-table-column
-        prop="addtime"
-        :label="$t('add_time')"
-        width="160">
-      </el-table-column>
-      <el-table-column
-        prop="item_domain"
-        :label="$t('operation')">
-          <template slot-scope="scope">
-            <el-button  @click="click_attorn_item(scope.row)" type="text" size="small">{{$t('attorn')}}</el-button>
-            <el-button @click="delete_item(scope.row)" type="text" size="small">{{$t('delete')}}</el-button>
-          </template>
+      <el-table-column prop="username" :label="$t('owner')" width="160"></el-table-column>
+      <el-table-column :label="$t('memberCount')" width="80"></el-table-column>
+      <el-table-column prop="addtime" :label="$t('add_time')" width="160"></el-table-column>
+      <el-table-column prop="item_domain" :label="$t('operation')">
+        <template slot-scope="scope">
+          <el-button @click="click_attorn_item(scope.row)" type="text" size="small">{{$t('attorn')}}</el-button>
+          <el-button @click="delete_item(scope.row)" type="text" size="small">{{$t('delete')}}</el-button>
+        </template>
       </el-table-column>
     </el-table>
 
-  <div class="block">
-    <span class="demonstration"></span>
+    <div class="block">
+      <span class="demonstration"></span>
       <el-pagination
         @current-change="handleCurrentChange"
         :page-size="count"
         layout="total, prev, pager, next"
-        :total="total">
-      </el-pagination>
-  </div>
-
-  <el-dialog :visible.sync="dialogAttornVisible" :close-on-click-modal="false" width="300px">
-    <el-form >
-        <el-form-item label="" >
-          <el-input  :placeholder="$t('attorn_username')" v-model="attornForm.username"></el-input>
-        </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="dialogAttornVisible = false">{{$t('cancel')}}</el-button>
-      <el-button type="primary" @click="attorn" >{{$t('attorn')}}</el-button>
+        :total="total"
+      ></el-pagination>
     </div>
-  </el-dialog>
-
-</div>
 
+    <el-dialog :visible.sync="dialogAttornVisible" :close-on-click-modal="false" width="300px">
+      <el-form>
+        <el-form-item label>
+          <el-input :placeholder="$t('attorn_username')" v-model="attornForm.username"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogAttornVisible = false">{{$t('cancel')}}</el-button>
+        <el-button type="primary" @click="attorn">{{$t('attorn')}}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <style scoped>
-
-
-
 </style>
 
 <script>
-
 export default {
   data() {
     return {
-      page:1,
-      count:7,
-      item_name:'',
-      username:'',
-      itemList:[],
-      total:0,
-      dialogAttornVisible:false,
-      attornForm:{
-        username:'',
+      page: 1,
+      count: 7,
+      item_name: '',
+      username: '',
+      itemList: [],
+      total: 0,
+      dialogAttornVisible: false,
+      attornForm: {
+        username: ''
       },
-      attorn_item_id:''
-    };
+      attorn_item_id: ''
+    }
   },
-  methods:{
-    get_item_list(){
-        var that = this ;
-        var url = DocConfig.server+'/api/adminItem/getList';
-
-        var params = new URLSearchParams();
-        params.append('item_name', this.item_name);
-        params.append('username', this.username);
-        params.append('page', this.page);
-        params.append('count', this.count);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              var json = response.data.data ;
-              that.itemList = json.items ;
-              that.total = json.total;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
+  methods: {
+    get_item_list() {
+      var that = this
+      var url = DocConfig.server + '/api/adminItem/getList'
+
+      var params = new URLSearchParams()
+      params.append('item_name', this.item_name)
+      params.append('username', this.username)
+      params.append('page', this.page)
+      params.append('count', this.count)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("加载成功");
+          var json = response.data.data
+          that.itemList = json.items
+          that.total = json.total
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
     },
-    formatPrivacy(row, column){
-      if (row ) {
-        if (row.password.length > 0 ) {
-          return this.$t('private');
-        }else{
-          return this.$t('public');
+    formatPrivacy(row, column) {
+      if (row) {
+        if (row.password.length > 0) {
+          return this.$t('private')
+        } else {
+          return this.$t('public')
         }
-      };
+      }
     },
-    //跳转到项目
-    jump_to_item(row){
-      let url = '#/'+row.item_id;
-      window.open(url);
+    // 跳转到项目
+    jump_to_item(row) {
+      let url = '#/' + row.item_id
+      window.open(url)
     },
-    handleCurrentChange(currentPage){
-      this.page = currentPage ;
-      this.get_item_list();
+    handleCurrentChange(currentPage) {
+      this.page = currentPage
+      this.get_item_list()
     },
-    onSubmit(){
-      this.page = 1 ;
-      this.get_item_list();
+    onSubmit() {
+      this.page = 1
+      this.get_item_list()
     },
-    delete_item(row){
-        var that = this ;
-        var url = DocConfig.server+'/api/adminItem/deleteItem';
-          this.$confirm(that.$t('confirm_delete'), ' ', {
-            confirmButtonText: that.$t('confirm'),
-            cancelButtonText: that.$t('cancel'),
-            type: 'warning'
-          }).then(() => {
-            var params = new URLSearchParams();
-            params.append('item_id', row.item_id);
-            that.axios.post(url, params)
-              .then(function (response) {
-                if (response.data.error_code === 0 ) {
-                  that.$message.success("删除成功");
-                  that.get_item_list();
-                }else{
-                  that.$alert(response.data.error_message);
-                }
-                
-              });
-          })
+    delete_item(row) {
+      var that = this
+      var url = DocConfig.server + '/api/adminItem/deleteItem'
+      this.$confirm(that.$t('confirm_delete'), ' ', {
+        confirmButtonText: that.$t('confirm'),
+        cancelButtonText: that.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams()
+        params.append('item_id', row.item_id)
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.$message.success('删除成功')
+            that.get_item_list()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
     },
-    click_attorn_item(row){
-      this.dialogAttornVisible = true ;
+    click_attorn_item(row) {
+      this.dialogAttornVisible = true
       this.attorn_item_id = row.item_id
     },
-    attorn(){
-      var that = this ;
-      var url = DocConfig.server+'/api/adminItem/attorn';
-
-      var params = new URLSearchParams();
-      params.append('item_id',  that.attorn_item_id);
-      params.append('username', this.attornForm.username);
-
-      that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            that.dialogAttornVisible = false;
-              that.$message.success(that.$t("success"));
-              that.get_item_list();
-              
-          }else{
-            that.$alert(response.data.error_message);
+    attorn() {
+      var that = this
+      var url = DocConfig.server + '/api/adminItem/attorn'
+
+      var params = new URLSearchParams()
+      params.append('item_id', that.attorn_item_id)
+      params.append('username', this.attornForm.username)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.dialogAttornVisible = false
+            that.$message.success(that.$t('success'))
+            that.get_item_list()
+          } else {
+            that.$alert(response.data.error_message)
           }
-          
         })
-        .catch(function (error) {
-          console.log(error);
-        });
+        .catch(function(error) {
+          console.log(error)
+        })
     }
   },
-  mounted () {
-    this.get_item_list();
-    
+  mounted() {
+    this.get_item_list()
   },
-  beforeDestroy(){
-    this.$message.closeAll();
+  beforeDestroy() {
+    this.$message.closeAll()
   }
 }
 </script>
diff --git a/web_src/src/components/admin/setting/Index.vue b/web_src/src/components/admin/setting/Index.vue
index e8076f399..7597ca9fc 100644
--- a/web_src/src/components/admin/setting/Index.vue
+++ b/web_src/src/components/admin/setting/Index.vue
@@ -1,10 +1,6 @@
 <template>
-
-<div class="hello">
-      <el-form ref="form" :model="form" label-width="150px">
-
-      </el-form-item>
-
+  <div class="hello">
+    <el-form ref="form" :model="form" label-width="150px">
       <el-form-item :label="$t('register_open')">
         <el-switch v-model="form.register_open"></el-switch>
       </el-form-item>
@@ -12,216 +8,220 @@
       <el-form-item label="所有人可以新建项目">
         <el-switch v-model="form.register_open"></el-switch>
       </el-form-item>
-       -->
+      -->
       <el-form-item :label="$t('home_page')">
-          <el-select v-model="form.home_page" :placeholder="$t('please_choose')">
-            <el-option :label="$t('full_page')" value="1"></el-option>
-            <el-option :label="$t('login_page')" value="2"></el-option>
-            <el-option :label="$t('jump_to_an_item')" value="3"></el-option>
-            <!-- <el-option label="展示全站项目" value="4"></el-option> -->
-          </el-select>
+        <el-select v-model="form.home_page" :placeholder="$t('please_choose')">
+          <el-option :label="$t('full_page')" value="1"></el-option>
+          <el-option :label="$t('login_page')" value="2"></el-option>
+          <el-option :label="$t('jump_to_an_item')" value="3"></el-option>
+          <!-- <el-option label="展示全站项目" value="4"></el-option> -->
+        </el-select>
       </el-form-item>
 
       <el-form-item :label="$t('jump_to_item')" v-show="form.home_page == 3">
-          <el-select v-model="form.home_item" :placeholder="$t('please_choose')">
-            <el-option v-for="item in itemList" :label="item.item_name" :value="item.item_id"></el-option>
-          </el-select>
+        <el-select v-model="form.home_item" :placeholder="$t('please_choose')">
+          <el-option
+            v-for="item in itemList"
+            :label="item.item_name"
+            :value="item.item_id"
+            :key="item.item_id"
+          ></el-option>
+        </el-select>
       </el-form-item>
 
       <el-form-item :label="$t('ldap_open_label')">
         <el-switch v-model="form.ldap_open"></el-switch>
       </el-form-item>
 
-      <div v-if="form.ldap_open" style="margin-left:50px" >
-
+      <div v-if="form.ldap_open" style="margin-left:50px">
         <el-form-item label="ldap host">
-           <el-input v-model="form.ldap_form.host"   class="form-el"></el-input>
+          <el-input v-model="form.ldap_form.host" class="form-el"></el-input>
         </el-form-item>
 
         <el-form-item label="ldap port">
-          <el-input v-model="form.ldap_form.port"  style="width:90px"></el-input>
+          <el-input v-model="form.ldap_form.port" style="width:90px"></el-input>
         </el-form-item>
 
-
-
         <el-form-item label="ldap base dn ">
-          <el-input v-model="form.ldap_form.base_dn"  class="form-el" placeholder="例如 dc=showdoc,dc=com"></el-input>
+          <el-input
+            v-model="form.ldap_form.base_dn"
+            class="form-el"
+            placeholder="例如 dc=showdoc,dc=com"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="ldap bind dn ">
-          <el-input v-model="form.ldap_form.bind_dn"  class="form-el" placeholder="cn=admin,dc=showdoc,dc=com"></el-input>
+          <el-input
+            v-model="form.ldap_form.bind_dn"
+            class="form-el"
+            placeholder="cn=admin,dc=showdoc,dc=com"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="ldap bind password ">
-          <el-input v-model="form.ldap_form.bind_password"  class="form-el" placeholder="例如 123456"></el-input>
+          <el-input v-model="form.ldap_form.bind_password" class="form-el" placeholder="例如 123456"></el-input>
         </el-form-item>
 
         <el-form-item label="ldap version">
-            <el-select v-model="form.ldap_form.version"  class="form-el">
-              <el-option label="3" value="3"></el-option>
-              <el-option label="2" value="2"></el-option>
-            </el-select>
+          <el-select v-model="form.ldap_form.version" class="form-el">
+            <el-option label="3" value="3"></el-option>
+            <el-option label="2" value="2"></el-option>
+          </el-select>
         </el-form-item>
 
-        
         <el-form-item label="ldap user filed">
-          <el-input v-model="form.ldap_form.user_field" class="form-el" placeholder="例如 cn 或者 sAMAccountName"></el-input>
+          <el-input
+            v-model="form.ldap_form.user_field"
+            class="form-el"
+            placeholder="例如 cn 或者 sAMAccountName"
+          ></el-input>
         </el-form-item>
-       
       </div>
 
-      <el-form-item :label="$t('oss_open')" >
+      <el-form-item :label="$t('oss_open')">
         <el-switch v-model="form.oss_open"></el-switch>
       </el-form-item>
 
-      <div v-if="form.oss_open" style="margin-left:50px" >
-
+      <div v-if="form.oss_open" style="margin-left:50px">
         <el-form-item :label="$t('oss_server')">
-          <el-select v-model="form.oss_setting.oss_type" >
+          <el-select v-model="form.oss_setting.oss_type">
             <el-option :label="$t('aliyun')" value="aliyun"></el-option>
-            <el-option :label="$t('qiniu')"  value="qiniu"></el-option>
+            <el-option :label="$t('qiniu')" value="qiniu"></el-option>
           </el-select>
         </el-form-item>
 
         <el-form-item label="key">
-           <el-input v-model="form.oss_setting.key"   class="form-el"></el-input>
+          <el-input v-model="form.oss_setting.key" class="form-el"></el-input>
         </el-form-item>
 
         <el-form-item label="secret">
-           <el-input v-model="form.oss_setting.secret"   class="form-el"></el-input>
+          <el-input v-model="form.oss_setting.secret" class="form-el"></el-input>
         </el-form-item>
 
-        <el-form-item label="endpoint" v-if="form.oss_setting.oss_type == 'aliyun'" >
-           <el-input v-model="form.oss_setting.endpoint"   class="form-el"></el-input>
+        <el-form-item label="endpoint" v-if="form.oss_setting.oss_type == 'aliyun'">
+          <el-input v-model="form.oss_setting.endpoint" class="form-el"></el-input>
         </el-form-item>
 
         <el-form-item label="bucket">
-           <el-input v-model="form.oss_setting.bucket"   class="form-el"></el-input>
+          <el-input v-model="form.oss_setting.bucket" class="form-el"></el-input>
         </el-form-item>
 
         <el-form-item :label="$t('oss_domain')">
-          <el-select v-model="form.oss_setting.protocol" style="width:100px;" >
+          <el-select v-model="form.oss_setting.protocol" style="width:100px;">
             <el-option label="http://" value="http"></el-option>
             <el-option label="https://" value="https"></el-option>
           </el-select>
-           <el-input v-model="form.oss_setting.domain"   class="form-el"></el-input>
+          <el-input v-model="form.oss_setting.domain" class="form-el"></el-input>
         </el-form-item>
-
       </div>
 
-      <br>
-      <el-form-item >
+      <br />
+      <el-form-item>
         <el-button type="primary" @click="onSubmit">{{$t('save')}}</el-button>
         <el-button>{{$t('cancel')}}</el-button>
       </el-form-item>
     </el-form>
-</div>
-
+  </div>
 </template>
 
 <style scoped>
-  .form-el{
-    width: 230px;
-  }
-
-
+.form-el {
+  width: 230px;
+}
 </style>
 
 <script>
-
 export default {
   data() {
     return {
-      form:{
-        register_open:true,
-        ldap_open:false,
-        home_page:'1',
-        ldap_form:{
-          "host":'',
-          "port":'389',
-          "version":"3",
-          "base_dn":'',
-          "bind_dn":'',
-          "bind_password":'',
-          "user_field":'',
-        },
-        home_item:'',
-        oss_open:false,
-        oss_setting:{
-           "oss_type":"aliyun",
-           "key" : "",
-           "secret" : "",
-           "endpoint" :"",
-           "bucket" : "",
-           "protocol" : "http",
-           "domain" : ""
+      form: {
+        register_open: true,
+        ldap_open: false,
+        home_page: '1',
+        ldap_form: {
+          host: '',
+          port: '389',
+          version: '3',
+          base_dn: '',
+          bind_dn: '',
+          bind_password: '',
+          user_field: ''
         },
+        home_item: '',
+        oss_open: false,
+        oss_setting: {
+          oss_type: 'aliyun',
+          key: '',
+          secret: '',
+          endpoint: '',
+          bucket: '',
+          protocol: 'http',
+          domain: ''
+        }
       },
-      itemList:[],
-    };
+      itemList: []
+    }
   },
-  methods:{
-
-    onSubmit(){
-      var url = DocConfig.server+'/api/adminSetting/saveConfig';
-      this.axios.post(url, this.form)
-        .then( (response) =>{
-          if (response.data.error_code === 0 ) {
-              this.$alert(this.$t("success"));
-          }else{
-            this.$alert(response.data.error_message);
-          }
-          
-        });
+  methods: {
+    onSubmit() {
+      var url = DocConfig.server + '/api/adminSetting/saveConfig'
+      this.axios.post(url, this.form).then(response => {
+        if (response.data.error_code === 0) {
+          this.$alert(this.$t('success'))
+        } else {
+          this.$alert(response.data.error_message)
+        }
+      })
     },
-    loadConfig(){
-      var url = DocConfig.server+'/api/adminSetting/loadConfig';
-      this.axios.post(url, this.form)
-        .then( (response) =>{
-          if (response.data.error_code === 0 ) {
-            if (response.data.data.length === 0) {
-              return ;
-            };
-            this.form.register_open =   response.data.data.register_open > 0 ? true :false ;
-            this.form.oss_open =   response.data.data.oss_open > 0 ? true :false ;
-            this.form.ldap_open =   response.data.data.ldap_open > 0 ? true :false ;
-            this.form.home_page =   response.data.data.home_page > 0 ? response.data.data.home_page :1 ;
-            this.form.home_item =   response.data.data.home_item > 0 ? response.data.data.home_item :'' ;
-            this.form.ldap_form =   response.data.data.ldap_form ? response.data.data.ldap_form : this.form.ldap_form ;
-            this.form.oss_setting =   response.data.data.oss_setting ? response.data.data.oss_setting : this.form.oss_setting ;
-          }else{
-            this.$alert(response.data.error_message);
+    loadConfig() {
+      var url = DocConfig.server + '/api/adminSetting/loadConfig'
+      this.axios.post(url, this.form).then(response => {
+        if (response.data.error_code === 0) {
+          if (response.data.data.length === 0) {
+            return
           }
-          
-        });
+          this.form.register_open = response.data.data.register_open > 0
+          this.form.oss_open = response.data.data.oss_open > 0
+          this.form.ldap_open = response.data.data.ldap_open > 0
+          this.form.home_page =
+            response.data.data.home_page > 0 ? response.data.data.home_page : 1
+          this.form.home_item =
+            response.data.data.home_item > 0 ? response.data.data.home_item : ''
+          this.form.ldap_form = response.data.data.ldap_form
+            ? response.data.data.ldap_form
+            : this.form.ldap_form
+          this.form.oss_setting = response.data.data.oss_setting
+            ? response.data.data.oss_setting
+            : this.form.oss_setting
+        } else {
+          this.$alert(response.data.error_message)
+        }
+      })
     },
-    get_item_list(){
-        var that = this ;
-        var url = DocConfig.server+'/api/adminItem/getList';
-
-        var params = new URLSearchParams();
-        params.append('page', 1);
-        params.append('count', 1000);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              var json = response.data.data ;
-              that.itemList = json.items ;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
-    },
-
+    get_item_list() {
+      var that = this
+      var url = DocConfig.server + '/api/adminItem/getList'
+
+      var params = new URLSearchParams()
+      params.append('page', 1)
+      params.append('count', 1000)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("加载成功");
+          var json = response.data.data
+          that.itemList = json.items
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    }
   },
-  mounted () {
-    this.get_item_list();
-    this.loadConfig();
+  mounted() {
+    this.get_item_list()
+    this.loadConfig()
   },
-  beforeDestroy(){
-    this.$message.closeAll();
+  beforeDestroy() {
+    this.$message.closeAll()
   }
 }
 </script>
diff --git a/web_src/src/components/admin/user/Index.vue b/web_src/src/components/admin/user/Index.vue
index 132747962..034f652f1 100644
--- a/web_src/src/components/admin/user/Index.vue
+++ b/web_src/src/components/admin/user/Index.vue
@@ -1,263 +1,229 @@
 <template>
-
-<div class="hello">
-<el-form :inline="true"  class="demo-form-inline">
-  <el-form-item label="">
-    <el-input v-model="username" placeholder="用户名"></el-input>
-  </el-form-item>
-<!--   <el-form-item label="活动区域">
+  <div class="hello">
+    <el-form :inline="true" class="demo-form-inline">
+      <el-form-item label>
+        <el-input v-model="username" placeholder="用户名"></el-input>
+      </el-form-item>
+      <!--   <el-form-item label="活动区域">
     <el-select v-model="formInline.region" placeholder="活动区域">
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
-  </el-form-item> -->
-  <el-form-item>
-    <el-button @click="onSubmit">{{$t('search')}}</el-button>
-  </el-form-item>
-</el-form>
-  <el-button  type="primary" @click="dialogAddVisible = true" >{{$t('add_user')}}</el-button>
- <el-table
-      :data="itemList"
-      style="width: 100%">
-      <el-table-column
-        prop="username"
-        :label="$t('username')"
-        width="200">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        :label="$t('name')"
-        >
-      </el-table-column>
-      <el-table-column
-        prop="groupid"
-        :label="$t('userrole')"
-        :formatter="formatGroup"
-        width="150">
-      </el-table-column>
-      <el-table-column
-        prop="reg_time"
-        :label="$t('reg_time')"
-        width="160">
-      </el-table-column>
-      <el-table-column
-        prop="last_login_time"
-        :label="$t('last_login_time')"
-        width="160">
-      </el-table-column>
-      <el-table-column
-        prop="item_domain"
-        :label="$t('operation')">
-          <template slot-scope="scope">
-            <el-button @click="click_password(scope.row)" type="text" size="small">{{$t('modify_password')}}</el-button>
-            <el-button @click="delete_user(scope.row)" v-if="scope.row.groupid != 1" type="text" size="small">{{$t('delete')}}</el-button>
-          </template>
+      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="onSubmit">{{$t('search')}}</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button type="primary" @click="dialogAddVisible = true">{{$t('add_user')}}</el-button>
+    <el-table :data="itemList" style="width: 100%">
+      <el-table-column prop="username" :label="$t('username')" width="200"></el-table-column>
+      <el-table-column prop="name" :label="$t('name')"></el-table-column>
+      <el-table-column prop="groupid" :label="$t('userrole')" :formatter="formatGroup" width="150"></el-table-column>
+      <el-table-column prop="reg_time" :label="$t('reg_time')" width="160"></el-table-column>
+      <el-table-column prop="last_login_time" :label="$t('last_login_time')" width="160"></el-table-column>
+      <el-table-column prop="item_domain" :label="$t('operation')">
+        <template slot-scope="scope">
+          <el-button
+            @click="click_password(scope.row)"
+            type="text"
+            size="small"
+          >{{$t('modify_password')}}</el-button>
+          <el-button
+            @click="delete_user(scope.row)"
+            v-if="scope.row.groupid != 1"
+            type="text"
+            size="small"
+          >{{$t('delete')}}</el-button>
+        </template>
       </el-table-column>
     </el-table>
 
-  <div class="block">
-    <span class="demonstration"></span>
+    <div class="block">
+      <span class="demonstration"></span>
       <el-pagination
         @current-change="handleCurrentChange"
         :page-size="count"
         layout="total, prev, pager, next"
-        :total="total">
-      </el-pagination>
-  </div>
-
-  <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="300px">
-    <el-form >
-        <el-form-item label="" >
-          <el-input type="password"  :placeholder="$t('new_password')" v-model="Form.new_password"></el-input>
-        </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
-      <el-button type="primary" @click="change_password" >{{$t('confirm')}}</el-button>
+        :total="total"
+      ></el-pagination>
     </div>
-  </el-dialog>
 
-  <el-dialog :visible.sync="dialogAddVisible" :close-on-click-modal="false" width="300px">
-    <el-form >
-        <el-form-item label="" >
+    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="300px">
+      <el-form>
+        <el-form-item label>
+          <el-input type="password" :placeholder="$t('new_password')" v-model="Form.new_password"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
+        <el-button type="primary" @click="change_password">{{$t('confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogAddVisible" :close-on-click-modal="false" width="300px">
+      <el-form>
+        <el-form-item label>
           <el-input type="text" :placeholder="$t('username')" v-model="addForm.username"></el-input>
         </el-form-item>
-        <el-form-item label="" >
+        <el-form-item label>
           <el-input type="password" :placeholder="$t('password')" v-model="addForm.password"></el-input>
         </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="dialogAddVisible = false">{{$t('cancel')}}</el-button>
-      <el-button type="primary" @click="add_user" >{{$t('confirm')}}</el-button>
-    </div>
-  </el-dialog>
-
-</div>
-
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogAddVisible = false">{{$t('cancel')}}</el-button>
+        <el-button type="primary" @click="add_user">{{$t('confirm')}}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <style scoped>
-
-
-
 </style>
 
 <script>
-
 export default {
   data() {
     return {
-      itemList:[],
-      username:'',
-      page:1 ,
-      count: 7 ,
-      total:0,
-      Form:{
-        new_password:''
+      itemList: [],
+      username: '',
+      page: 1,
+      count: 7,
+      total: 0,
+      Form: {
+        new_password: ''
       },
-      addForm:{
-        username:'',
-        password:'',
+      addForm: {
+        username: '',
+        password: ''
       },
-      dialogVisible:false,
-      dialogAddVisible:false,
-      password_uid:''
-    };
+      dialogVisible: false,
+      dialogAddVisible: false,
+      password_uid: ''
+    }
   },
-  methods:{
-    get_user_list(){
-        var that = this ;
-        var url = DocConfig.server+'/api/adminUser/getList';
-
-        var params = new URLSearchParams();
-        params.append('username', this.username);
-        params.append('page', this.page);
-        params.append('count', this.count);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              var json = response.data.data ;
-              that.itemList = json.users ;
-              that.total = json.total;
-
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
-    },
-    formatGroup(row, column){
-      if (row ) {
-        if (row.groupid == 1 ) {
-          return this.$t("administrator");
-        }
-        else if (row.groupid == 2 ) {
-          return this.$t("ordinary_users");
+  methods: {
+    get_user_list() {
+      var that = this
+      var url = DocConfig.server + '/api/adminUser/getList'
+
+      var params = new URLSearchParams()
+      params.append('username', this.username)
+      params.append('page', this.page)
+      params.append('count', this.count)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("加载成功");
+          var json = response.data.data
+          that.itemList = json.users
+          that.total = json.total
+        } else {
+          that.$alert(response.data.error_message)
         }
-        else{
-          return "";
+      })
+    },
+    formatGroup(row, column) {
+      if (row) {
+        if (row.groupid == 1) {
+          return this.$t('administrator')
+        } else if (row.groupid == 2) {
+          return this.$t('ordinary_users')
+        } else {
+          return ''
         }
-      };
+      }
     },
-    //跳转到项目
-    jump_to_item(row){
-      let url = '#/'+row.item_id;
-      window.open(url);
+    // 跳转到项目
+    jump_to_item(row) {
+      let url = '#/' + row.item_id
+      window.open(url)
     },
-    handleCurrentChange(currentPage){
-      this.page = currentPage ;
-      this.get_user_list();
+    handleCurrentChange(currentPage) {
+      this.page = currentPage
+      this.get_user_list()
     },
-    onSubmit(){
-      this.page = 1 ;
-      this.get_user_list();
+    onSubmit() {
+      this.page = 1
+      this.get_user_list()
     },
-    delete_user(row){
-        var that = this ;
-        var url = DocConfig.server+'/api/adminUser/deleteUser';
-          this.$confirm(that.$t('confirm_delete'), ' ', {
-            confirmButtonText: that.$t('confirm'),
-            cancelButtonText: that.$t('cancel'),
-            type: 'warning'
-          }).then(() => {
-            var params = new URLSearchParams();
-            params.append('uid', row.uid);
-            that.axios.post(url, params)
-              .then(function (response) {
-                if (response.data.error_code === 0 ) {
-                  that.$message.success("success");
-                  that.get_user_list();
-                  that.username = '';
-                }else{
-                  that.$alert(response.data.error_message);
-                }
-                
-              });
-          })
+    delete_user(row) {
+      var that = this
+      var url = DocConfig.server + '/api/adminUser/deleteUser'
+      this.$confirm(that.$t('confirm_delete'), ' ', {
+        confirmButtonText: that.$t('confirm'),
+        cancelButtonText: that.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams()
+        params.append('uid', row.uid)
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.$message.success('success')
+            that.get_user_list()
+            that.username = ''
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
     },
-    click_password(row){
-      this.dialogVisible = true ;
+    click_password(row) {
+      this.dialogVisible = true
       this.password_uid = row.uid
     },
-    change_password(){
-      var that = this ;
-      var url = DocConfig.server+'/api/adminUser/changePassword';
-
-      var params = new URLSearchParams();
-      params.append('uid',  that.password_uid);
-      params.append('new_password', this.Form.new_password);
-
-      that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-              that.dialogVisible = false;
-              that.Form.new_password = '';
-              that.$message.success(that.$t("success"));
-
-          }else{
-            that.$alert(response.data.error_message);
+    change_password() {
+      var that = this
+      var url = DocConfig.server + '/api/adminUser/changePassword'
+
+      var params = new URLSearchParams()
+      params.append('uid', that.password_uid)
+      params.append('new_password', this.Form.new_password)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.dialogVisible = false
+            that.Form.new_password = ''
+            that.$message.success(that.$t('success'))
+          } else {
+            that.$alert(response.data.error_message)
           }
-          
         })
-        .catch(function (error) {
-          console.log(error);
-        });
+        .catch(function(error) {
+          console.log(error)
+        })
     },
-    add_user(){
-      var that = this ;
-      var url = DocConfig.server+'/api/adminUser/addUser';
-
-      var params = new URLSearchParams();
-      params.append('username',  that.addForm.username);
-      params.append('password', this.addForm.password);
-
-      that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-              that.dialogAddVisible = false;
-              that.addForm.password = '';
-              that.addForm.username = '';
-              that.$message.success(that.$t("success"));
-              that.get_user_list();
-
-          }else{
-            that.$alert(response.data.error_message);
+    add_user() {
+      var that = this
+      var url = DocConfig.server + '/api/adminUser/addUser'
+
+      var params = new URLSearchParams()
+      params.append('username', that.addForm.username)
+      params.append('password', this.addForm.password)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.dialogAddVisible = false
+            that.addForm.password = ''
+            that.addForm.username = ''
+            that.$message.success(that.$t('success'))
+            that.get_user_list()
+          } else {
+            that.$alert(response.data.error_message)
           }
-          
         })
-        .catch(function (error) {
-          console.log(error);
-        });
+        .catch(function(error) {
+          console.log(error)
+        })
     }
   },
-  mounted () {
-    this.get_user_list();
-    
+  mounted() {
+    this.get_user_list()
   },
-  beforeDestroy(){
-    this.$message.closeAll();
-
+  beforeDestroy() {
+    this.$message.closeAll()
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/catalog/Index.vue b/web_src/src/components/catalog/Index.vue
index 5f3c668f3..c3f7e080c 100644
--- a/web_src/src/components/catalog/Index.vue
+++ b/web_src/src/components/catalog/Index.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
       <el-card class="center-card">
-
         <el-row>
-          <el-button  type="text" class="add-cat" @click="add_cat()">{{$t('add_cat')}}</el-button>
+          <el-button type="text" class="add-cat" @click="add_cat()">{{$t('add_cat')}}</el-button>
           <el-button type="text" class="goback-btn" @click="goback">{{$t('goback')}}</el-button>
         </el-row>
         <p class="tips" v-if="treeData.length > 1">{{$t('cat_tips')}}</p>
@@ -17,367 +16,350 @@
           default-expand-all
           @node-drag-end="handleDragEnd"
           draggable
-          >
-
+        >
           <span class="custom-tree-node" slot-scope="{ node, data }">
             <span>{{ node.label }}</span>
             <span class="right-bar">
-
               <el-button
                 type="text"
                 size="mini"
-                 class="el-icon-edit"
-                @click.stop="edit(node, data)">
-              </el-button>
+                class="el-icon-edit"
+                @click.stop="edit(node, data)"
+              ></el-button>
               <el-button
                 type="text"
                 size="mini"
-                 class="el-icon-plus"
-                @click.stop="add_cat(node, data)">
-              </el-button>
+                class="el-icon-plus"
+                @click.stop="add_cat(node, data)"
+              ></el-button>
               <el-button
                 type="text"
                 size="mini"
-                 class="el-icon-document"
-                @click.stop="showSortPage(node, data)">
-              </el-button>
+                class="el-icon-document"
+                @click.stop="showSortPage(node, data)"
+              ></el-button>
               <el-button
                 type="text"
                 size="mini"
                 class="el-icon-delete"
-                @click.stop="delete_cat(node, data)">
-                
-              </el-button>
+                @click.stop="delete_cat(node, data)"
+              ></el-button>
             </span>
           </span>
         </el-tree>
-
-
       </el-card>
-      <el-dialog :visible.sync="dialogFormVisible"  width="300px" :close-on-click-modal="false">
-        <el-form >
-            <el-form-item :label="$t('cat_name')+' : '" >
-              <el-input  :placeholder="$t('input_cat_name')" v-model="MyForm.cat_name"></el-input>
-            </el-form-item>
-            <el-form-item :label="$t('parent_cat_name')+' : '" >
-              <el-select v-model="MyForm.parent_cat_id" :placeholder="$t('none')">
-                  <el-option
-                    v-for="item in belong_to_catalogs"
-                    :key="item.cat_id"
-                    :label="item.cat_name"
-                    :value="item.cat_id">
-                  </el-option>
-                </el-select>
-            </el-form-item>
+      <el-dialog :visible.sync="dialogFormVisible" width="300px" :close-on-click-modal="false">
+        <el-form>
+          <el-form-item :label="$t('cat_name')+' : '">
+            <el-input :placeholder="$t('input_cat_name')" v-model="MyForm.cat_name"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('parent_cat_name')+' : '">
+            <el-select v-model="MyForm.parent_cat_id" :placeholder="$t('none')">
+              <el-option
+                v-for="item in belong_to_catalogs"
+                :key="item.cat_id"
+                :label="item.cat_name"
+                :value="item.cat_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
         </el-form>
 
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
-          <el-button type="primary" @click="MyFormSubmit" >{{$t('confirm')}}</el-button>
+          <el-button type="primary" @click="MyFormSubmit">{{$t('confirm')}}</el-button>
         </div>
       </el-dialog>
     </el-container>
 
-    <SortPage :callback="insertValue" :belong_to_catalogs="belong_to_catalogs" :item_id="item_id"  :cat_id="curl_cat_id" ref="SortPage"></SortPage>
+    <SortPage
+      :callback="insertValue"
+      :belong_to_catalogs="belong_to_catalogs"
+      :item_id="item_id"
+      :cat_id="curl_cat_id"
+      ref="SortPage"
+    ></SortPage>
 
-    <Footer> </Footer>
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
 import SortPage from '@/components/page/edit/SortPage'
 export default {
   name: 'Login',
-  components : {
+  components: {
     SortPage
   },
-  data () {
+  data() {
     return {
-      MyForm:{
-        cat_id:0,
-        parent_cat_id:'',
-        cat_name:'',
-        s_number:''
+      MyForm: {
+        cat_id: 0,
+        parent_cat_id: '',
+        cat_name: '',
+        s_number: ''
       },
-      catalogs:[],
-      dialogFormVisible:false,
+      catalogs: [],
+      dialogFormVisible: false,
       treeData: [],
       defaultProps: {
         children: 'children',
         label: 'label'
       },
-      item_id:'',
-      curl_cat_id:''
+      item_id: '',
+      curl_cat_id: ''
     }
-
   },
   computed: {
-    //新建/编辑目录时供用户选择的上级目录列表
-    belong_to_catalogs:function(){
-        if (!this.catalogs || this.catalogs.length <=0 ) {
-          return [];
-        };
-        
-        var Info = this.catalogs.slice(0);
-        var cat_array = [] ;
-
-        //这个函数将递归
-        var rename = function(catalog , p_cat_name){
-          if (catalog.length > 0 ) {
-            for (var j = 0; j < catalog.length; j++) {
-
-              var cat_name = p_cat_name+' / ' + catalog[j]['cat_name'] ;
-              cat_array.push( {
-                "cat_id":catalog[j]['cat_id'] ,
-                "cat_name": cat_name 
-              });
-              if (catalog[j].sub && catalog[j].sub.length > 0) {
-                rename(catalog[j].sub , cat_name);
-              };
-            };
-          };
+    // 新建/编辑目录时供用户选择的上级目录列表
+    belong_to_catalogs: function() {
+      if (!this.catalogs || this.catalogs.length <= 0) {
+        return []
+      }
+
+      var Info = this.catalogs.slice(0)
+      var cat_array = []
+
+      // 这个函数将递归
+      var rename = function(catalog, p_cat_name) {
+        if (catalog.length > 0) {
+          for (var j = 0; j < catalog.length; j++) {
+            var cat_name = p_cat_name + ' / ' + catalog[j]['cat_name']
+            cat_array.push({
+              cat_id: catalog[j]['cat_id'],
+              cat_name: cat_name
+            })
+            if (catalog[j].sub && catalog[j].sub.length > 0) {
+              rename(catalog[j].sub, cat_name)
+            }
+          }
         }
-
-        for (var i = 0; i < Info.length; i++) {
-          cat_array.push(Info[i]);
-          rename(Info[i]['sub'] , Info[i].cat_name);
-        };
-        var no_cat = {"cat_id":0 ,"cat_name":this.$t("none")} ;
-        cat_array.push(no_cat);
-        return cat_array;
-
+      }
+
+      for (var i = 0; i < Info.length; i++) {
+        cat_array.push(Info[i])
+        rename(Info[i]['sub'], Info[i].cat_name)
+      }
+      var no_cat = { cat_id: 0, cat_name: this.$t('none') }
+      cat_array.push(no_cat)
+      return cat_array
     }
   },
   methods: {
-      get_catalog(){
-        var that = this ;
-        var url = DocConfig.server+'/api/catalog/catListGroup';
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-                var Info = response.data.data ;
-                that.catalogs =  Info;
-                that.treeData = [];
-                var duang = function(Info){
-                  var treeData = [];
-                  for (var i = 0; i < Info.length; i++) {
-                      let node = {'children':[]};
-                      node['id'] = Info[i]['cat_id'];
-                      node['label'] = Info[i]['cat_name'];
-                      if (Info[i]['sub'].length > 0 ) {
-                          node['children'] = duang(Info[i]['sub']);
-                      };
-                      treeData.push(node);
-                    };
-                    return treeData;
-                };
-                that.treeData = duang(Info) ;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-      MyFormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/catalog/save';
-
-          var params = new URLSearchParams();
-          params.append('item_id',  that.$route.params.item_id);
-          params.append('cat_id', this.MyForm.cat_id);
-          params.append('parent_cat_id', this.MyForm.parent_cat_id);
-          params.append('cat_name', this.MyForm.cat_name);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.dialogFormVisible = false;
-                that.get_catalog() ;
-                that.MyForm = [];
-              }else{
-                that.$alert(response.data.error_message);
+    get_catalog() {
+      var that = this
+      var url = DocConfig.server + '/api/catalog/catListGroup'
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var Info = response.data.data
+            that.catalogs = Info
+            that.treeData = []
+            var duang = function(Info) {
+              var treeData = []
+              for (var i = 0; i < Info.length; i++) {
+                let node = { children: [] }
+                node['id'] = Info[i]['cat_id']
+                node['label'] = Info[i]['cat_name']
+                if (Info[i]['sub'].length > 0) {
+                  node['children'] = duang(Info[i]['sub'])
+                }
+                treeData.push(node)
               }
-              
-            })
-            .catch(function (error) {
-              console.log(error);
-            });
-      },
-      edit(node, data){
+              return treeData
+            }
+            that.treeData = duang(Info)
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    MyFormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/catalog/save'
+
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      params.append('cat_id', this.MyForm.cat_id)
+      params.append('parent_cat_id', this.MyForm.parent_cat_id)
+      params.append('cat_name', this.MyForm.cat_name)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.dialogFormVisible = false
+            that.get_catalog()
+            that.MyForm = []
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    edit(node, data) {
+      this.MyForm = {
+        cat_id: data.id,
+        parent_cat_id: node.parent.data.id,
+        cat_name: data.label
+      }
+
+      this.dialogFormVisible = true
+    },
+
+    delete_cat(node, data) {
+      var that = this
+      var cat_id = data.id
+      var url = DocConfig.server + '/api/catalog/delete'
+
+      this.$confirm(that.$t('confirm_cat_delete'), ' ', {
+        confirmButtonText: that.$t('confirm'),
+        cancelButtonText: that.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams()
+        params.append('item_id', that.$route.params.item_id)
+        params.append('cat_id', cat_id)
+
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.get_catalog()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
+    },
+    add_cat(node, data) {
+      if (node && data.id) {
         this.MyForm = {
-          cat_id:data.id,
-          parent_cat_id: node.parent.data.id,
-          cat_name:data.label,
-        };
-
-        this.dialogFormVisible = true;
-      },
-
-      delete_cat(node, data){
-          var that = this ;
-          var cat_id = data.id ;
-          var url = DocConfig.server+'/api/catalog/delete';
-
-          this.$confirm(that.$t('confirm_cat_delete'), ' ', {
-            confirmButtonText: that.$t('confirm'),
-            cancelButtonText: that.$t('cancel'),
-            type: 'warning'
-          }).then(() => {
-            var params = new URLSearchParams();
-            params.append('item_id',  that.$route.params.item_id);
-            params.append('cat_id', cat_id);
-
-            that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.get_catalog() ;
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            }); 
-          })
-
-      },
-      add_cat(node, data){
-        if (node && data.id) {
-          this.MyForm = {
-            cat_id:'',
-            parent_cat_id: data.id,
-            cat_name:'',
-          };
-        }else{
-          this.MyForm = {};
+          cat_id: '',
+          parent_cat_id: data.id,
+          cat_name: ''
         }
-
-
-        this.dialogFormVisible = true;
-
-      },
-      goback(){
-        var url = '/'+this.$route.params.item_id;
-        this.$router.push({path:url})
-      },
-      handleDragEnd(node1, node2 , position , evt){
-        var that = this ;
-        let treeData2 = this.dimensionReduction(this.treeData) ;
-        var url = DocConfig.server+'/api/catalog/batUpdate';
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        params.append('cats',  JSON.stringify(treeData2));
-        that.axios.post(url, params)
-          .then( (response)=> {
-              if (response.data.error_code === 0 ) {
-
-              }else{
-                that.$alert(response.data.error_message);
-              }
-          })
-
-      },
-      //将目录数组降维
-      dimensionReduction(treeData){
-        let treeData2 = []; 
-
-        var pushTreeData = function(OneData , parent_cat_id , level , i ){
-          treeData2.push({
-            'cat_id' : OneData['id'] ,
-            'cat_name' : OneData['label'] ,
-            'parent_cat_id' : parent_cat_id ,
-            'level' : level ,
-            's_number' : (i+1) ,
-          });
-          if (OneData.hasOwnProperty('children')) {
-            for (var j = 0; j < OneData['children'].length; j++) {
-              pushTreeData( OneData['children'][j] , OneData['id']  , level + 1  , j ) ;
-            }
-          };
+      } else {
+        this.MyForm = {}
+      }
+
+      this.dialogFormVisible = true
+    },
+    goback() {
+      var url = '/' + this.$route.params.item_id
+      this.$router.push({ path: url })
+    },
+    handleDragEnd(node1, node2, position, evt) {
+      var that = this
+      let treeData2 = this.dimensionReduction(this.treeData)
+      var url = DocConfig.server + '/api/catalog/batUpdate'
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      params.append('cats', JSON.stringify(treeData2))
+      that.axios.post(url, params).then(response => {
+        if (response.data.error_code === 0) {
+        } else {
+          that.$alert(response.data.error_message)
         }
-
-        for (var i = 0; i < treeData.length; i++) {
-          pushTreeData(treeData[i] , 0 , 2 , i ) ;
+      })
+    },
+    // 将目录数组降维
+    dimensionReduction(treeData) {
+      let treeData2 = []
+
+      var pushTreeData = function(OneData, parent_cat_id, level, i) {
+        treeData2.push({
+          cat_id: OneData['id'],
+          cat_name: OneData['label'],
+          parent_cat_id: parent_cat_id,
+          level: level,
+          s_number: i + 1
+        })
+        if (OneData.hasOwnProperty('children')) {
+          for (var j = 0; j < OneData['children'].length; j++) {
+            pushTreeData(OneData['children'][j], OneData['id'], level + 1, j)
+          }
         }
-        return treeData2 ;
-      },
-      //展示页面排序
-      showSortPage(node, data){
-          this.curl_cat_id = data.id;
-          let childRef = this.$refs.SortPage ;//获取子组件
-          childRef.show() ; 
-      },
-
+      }
+
+      for (var i = 0; i < treeData.length; i++) {
+        pushTreeData(treeData[i], 0, 2, i)
+      }
+      return treeData2
+    },
+    // 展示页面排序
+    showSortPage(node, data) {
+      this.curl_cat_id = data.id
+      let childRef = this.$refs.SortPage // 获取子组件
+      childRef.show()
+    }
   },
 
-  mounted(){
-    this.get_catalog();
-    this.item_id = this.$route.params.item_id ;
+  mounted() {
+    this.get_catalog()
+    this.item_id = this.$route.params.item_id
   },
-  
-  beforeDestroy(){
 
-  }
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.hello{
+.hello {
   text-align: left;
 }
 
-.add-cat{
+.add-cat {
   margin-left: 10px;
 }
 
-.center-card{
+.center-card {
   text-align: left;
   width: 600px;
   min-height: 500px;
   max-height: 90%;
-  overflow-y:auto; 
+  overflow-y: auto;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 400px;
 }
 
-.cat-box{
-  background-color:rgb(250, 250, 250);
+.cat-box {
+  background-color: rgb(250, 250, 250);
   width: 100%;
   height: 40px;
   margin-bottom: 10px;
   border: 1px solid #d9d9d9;
   border-radius: 2px;
 }
-.cat-name{
+.cat-name {
   line-height: 40px;
   margin-left: 20px;
   color: #262626;
 }
-.tree-node{
+.tree-node {
   margin-top: 20px;
 }
-.custom-tree-node{
+.custom-tree-node {
   width: 100%;
 }
-.right-bar{
+.right-bar {
   float: right;
   margin-right: 20px;
 }
 
-.tips{
+.tips {
   margin-left: 10px;
   color: #9ea1a6;
   font-size: 11px;
-
 }
-
 </style>
diff --git a/web_src/src/components/common/BackToTop.vue b/web_src/src/components/common/BackToTop.vue
index 57dd88f59..0f92c3d70 100644
--- a/web_src/src/components/common/BackToTop.vue
+++ b/web_src/src/components/common/BackToTop.vue
@@ -1,56 +1,56 @@
 
 <template>
-  <div class="gotop-box" 
-    v-show="status" 
-    @click="gototop">
-    	<i class="el-icon-caret-top" :title="$t('back_to_top')"></i>
+  <div class="gotop-box" v-show="status" @click="gototop">
+    <i class="el-icon-caret-top" :title="$t('back_to_top')"></i>
   </div>
 </template>
 <script>
 export default {
-
-  data () {
+  data() {
     return {
       status: false,
       scrollTop: 0,
       timer: null,
-      speed:50
+      speed: 50
     }
   },
-  mounted () {
-    let _t = this;
-    window.onscroll = function () {
-      _t.scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : null
-      _t.status = _t.scrollTop && _t.scrollTop > 0;
+  mounted() {
+    let _t = this
+    window.onscroll = function() {
+      _t.scrollTop = document.body.scrollTop
+        ? document.body.scrollTop
+        : document.documentElement && document.documentElement.scrollTop
+        ? document.documentElement.scrollTop
+        : null
+      _t.status = _t.scrollTop && _t.scrollTop > 0
     }
   },
   methods: {
-    gototop () {
-      let _t = this;
-      _t.timer = setInterval(function(){
+    gototop() {
+      let _t = this
+      _t.timer = setInterval(function() {
         _t.scrollTop -= 2000
         if (_t.scrollTop < 100) {
-          _t.scrollTop = 0;
-          _t.status = false;
-          clearInterval(_t.timer);
+          _t.scrollTop = 0
+          _t.status = false
+          clearInterval(_t.timer)
         }
         scrollTo(0, _t.scrollTop)
       }, this.speed)
     }
   },
-  destroyed () {
+  destroyed() {
     clearInterval(this.timer)
   }
 }
 </script>
 <style  scoped>
 .gotop-box {
-	position: fixed; 
-	cursor: pointer; 
-	bottom: 50px; 
-	right: 5%; 
-	font-size: 50px;
-	color: #409EFF;
+  position: fixed;
+  cursor: pointer;
+  bottom: 50px;
+  right: 5%;
+  font-size: 50px;
+  color: #409eff;
 }
-
 </style>
diff --git a/web_src/src/components/common/BigImg.vue b/web_src/src/components/common/BigImg.vue
index 7ebb818ad..ed24eb478 100644
--- a/web_src/src/components/common/BigImg.vue
+++ b/web_src/src/components/common/BigImg.vue
@@ -1,61 +1,64 @@
 <template>
-    <!-- 过渡动画 -->
-    <transition name="fade">
-   　　 <div class="img-view" @click="bigImg">
-   　　　　 <!-- 遮罩层 -->
-   　　　　 <div class="img-layer"></div>
-   　　　　 <div class="img">
-   　　　　　　 <img :src="imgSrc">
-   　　　　 </div>
-    　　</div>
-　　</transition>
+  <!-- 过渡动画 -->
+  <transition name="fade">
+    <div class="img-view" @click="bigImg">
+      <!-- 遮罩层 -->
+      <div class="img-layer"></div>
+      <div class="img">
+        <img :src="imgSrc" />
+      </div>
+    </div>
+  </transition>
 </template>
 <script>
-　　export default {
-　　　　props: ['imgSrc'],//接受图片地址
-　　　　methods: {
-　　　　　　bigImg() {
-　　　　　　// 发送事件
-　　　　　　　　this.$emit('clickit')
-　　　　　　}
-　　　　}
-　　}
+export default {
+  props: ['imgSrc'], // 接受图片地址
+  methods: {
+    bigImg() {
+      // 发送事件
+      this.$emit('clickit')
+    }
+  }
+}
 </script>
 <style scoped>
-.fade-enter-active,.fade-leave-active {
-	ransition: all .2s linear;
-transform: translate3D(0, 0, 0);
+.fade-enter-active,
+.fade-leave-active {
+  ransition: all 0.2s linear;
+  transform: translate3D(0, 0, 0);
 }
-.fade-enter,.fade-leave-active {
-transform: translate3D(100%, 0, 0);
+.fade-enter,
+.fade-leave-active {
+  transform: translate3D(100%, 0, 0);
 }
 /* bigimg */
 .img-view {
-position: inherit;
-width: 100%;
-height: 100%;
+  position: inherit;
+  width: 100%;
+  height: 100%;
 }
-/*遮罩层样式*/.img-view .img-layer {
-position: fixed;
-z-index: 999;
-top: 0;
-left: 0;
-background: rgba(0, 0, 0, 0.7);
-width: 100%;
-height: 100%;
-overflow: hidden;
+/*遮罩层样式*/
+.img-view .img-layer {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.7);
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 /*不限制图片大小，实现居中*/
 .img-view .img img {
-max-width: 100%;
-max-height: 100%;
-display: block;
-position: fixed;
-left: 0;
-right: 0;
-bottom: 0;
-top: 0;
-margin: auto;
-z-index: 1000;
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  z-index: 1000;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web_src/src/components/common/Editormd.vue b/web_src/src/components/common/Editormd.vue
index f44e2909d..2c5fcd8f2 100644
--- a/web_src/src/components/common/Editormd.vue
+++ b/web_src/src/components/common/Editormd.vue
@@ -1,38 +1,35 @@
 <template>
-  
   <div :id="id" class="main-editor">
-    <link href="static/editor.md/css/editormd.min.css" rel="stylesheet">
+    <link href="static/editor.md/css/editormd.min.css" rel="stylesheet" />
 
     <textarea v-html="content" style="display:none;"></textarea>
 
-        <!-- 放大图片 -->
-        <BigImg v-if="showImg" @clickit="showImg = false" :imgSrc="imgSrc"></BigImg>
-
+    <!-- 放大图片 -->
+    <BigImg v-if="showImg" @clickit="showImg = false" :imgSrc="imgSrc"></BigImg>
   </div>
 </template>
 <style>
-
-.editormd-preview-container{
+.editormd-preview-container {
   min-height: 60%;
 }
 
 .markdown-body .kwd {
-    color: #8959a8;
-  }
+  color: #8959a8;
+}
 .markdown-body .com {
-    color: #8e908c;
-  }
+  color: #8e908c;
+}
 .markdown-body .str {
-    color: #718c00;
-  }
-.markdown-body code{
-    color:#d14;
+  color: #718c00;
 }
-.markdown-body .pln{
-    color:#4d4d4c;
+.markdown-body code {
+  color: #d14;
 }
-.markdown-body .typ{
-    color:#4271ae;
+.markdown-body .pln {
+  color: #4d4d4c;
+}
+.markdown-body .typ {
+  color: #4271ae;
 }
 
 .markdown-body h1 {
@@ -51,24 +48,23 @@
 <script>
 import BigImg from '@/components/common/BigImg'
 if (typeof window !== 'undefined') {
-  var $s = require('scriptjs');
+  var $s = require('scriptjs')
 }
 
-
 export default {
   name: 'Editor',
   props: {
     width: '',
-    content:{
+    content: {
       type: String,
       default: '###初始化成功'
     },
     type: {
-      type:String,
+      type: String,
       default: 'editor'
     },
     keyword: {
-      type:String,
+      type: String,
       default: ''
     },
     id: {
@@ -77,351 +73,427 @@ export default {
     },
     editorPath: {
       type: String,
-      default: 'static/editor.md',
+      default: 'static/editor.md'
     },
     editorConfig: {
       type: Object,
       default() {
         return {
-        path: 'static/editor.md/lib/', 
-        height: 1000,
-	      taskList        : true,
-	      tex             : true,  // 默认不解析
-	      flowChart       : true,  // 默认不解析
-	      sequenceDiagram : true,  // 默认不解析
-        syncScrolling: "single",
-        htmlDecode: 'style,script,iframe|filterXSS',
-        imageUpload: true,
-        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
-        imageUploadURL: DocConfig.server+"/api/page/uploadImg",
-        onload: () => {
-            console.log('onload');
+          path: 'static/editor.md/lib/',
+          height: 1000,
+          taskList: true,
+          tex: true, // 默认不解析
+          flowChart: true, // 默认不解析
+          sequenceDiagram: true, // 默认不解析
+          syncScrolling: 'single',
+          htmlDecode: 'style,script,iframe|filterXSS',
+          imageUpload: true,
+          imageFormats: [
+            'jpg',
+            'jpeg',
+            'gif',
+            'png',
+            'bmp',
+            'webp',
+            'JPG',
+            'JPEG',
+            'GIF',
+            'PNG',
+            'BMP',
+            'WEBP'
+          ],
+          imageUploadURL: DocConfig.server + '/api/page/uploadImg',
+          onload: () => {
+            console.log('onload')
           },
-          toolbarIcons : function() {
-              // Or return editormd.toolbarModes[name]; // full, simple, mini
-              // Using "||" set icons align right.
-              return ["undo", "redo", "|", 
-                  "bold", "del", "italic", "quote", "|", 
-                  "toc","h1", "h2", "h3", "h4", "h5", "h6", "|", 
-                  "list-ul", "list-ol", "hr", "center", "|",
-                  "link", "reference-link", "image","video", "code", "code-block", "table", "datetime",  "html-entities", "pagebreak", "|",
-                  "watch", "preview", "fullscreen", "clear", "search","|",
-                  "help", "info"
-              ]
+          toolbarIcons: function() {
+            // Or return editormd.toolbarModes[name]; // full, simple, mini
+            // Using "||" set icons align right.
+            return [
+              'undo',
+              'redo',
+              '|',
+              'bold',
+              'del',
+              'italic',
+              'quote',
+              '|',
+              'toc',
+              'h1',
+              'h2',
+              'h3',
+              'h4',
+              'h5',
+              'h6',
+              '|',
+              'list-ul',
+              'list-ol',
+              'hr',
+              'center',
+              '|',
+              'link',
+              'reference-link',
+              'image',
+              'video',
+              'code',
+              'code-block',
+              'table',
+              'datetime',
+              'html-entities',
+              'pagebreak',
+              '|',
+              'watch',
+              'preview',
+              'fullscreen',
+              'clear',
+              'search',
+              '|',
+              'help',
+              'info'
+            ]
           },
-          toolbarIconsClass : {
-              toc : "fa-bars " , // 指定一个FontAawsome的图标类
-              video :"fa-file-video-o",
-              center :"fa-align-center",
+          toolbarIconsClass: {
+            toc: 'fa-bars ', // 指定一个FontAawsome的图标类
+            video: 'fa-file-video-o',
+            center: 'fa-align-center'
           },
           // 自定义工具栏按钮的事件处理
-          toolbarHandlers : {
-            toc : function(cm, icon, cursor, selection){
-                cm.setCursor(0, 0);
-                cm.replaceSelection("[TOC]\r\n\r\n");
+          toolbarHandlers: {
+            toc: function(cm, icon, cursor, selection) {
+              cm.setCursor(0, 0)
+              cm.replaceSelection('[TOC]\r\n\r\n')
             },
-            video : function(cm, icon, cursor, selection){
-                // 替换选中文本，如果没有选中文本，则直接插入
-                cm.replaceSelection('\r\n<video src="http://your-site.com/your.mp4" style="width: 100%; height: 100%;" controls="controls"></video>\r\n');
-
-                // 如果当前没有选中的文本，将光标移到要输入的位置
-                if(selection === "") {
-                    cm.setCursor(cursor.line, cursor.ch + 1);
-                }
+            video: function(cm, icon, cursor, selection) {
+              // 替换选中文本，如果没有选中文本，则直接插入
+              cm.replaceSelection(
+                '\r\n<video src="http://your-site.com/your.mp4" style="width: 100%; height: 100%;" controls="controls"></video>\r\n'
+              )
+
+              // 如果当前没有选中的文本，将光标移到要输入的位置
+              if (selection === '') {
+                cm.setCursor(cursor.line, cursor.ch + 1)
+              }
             },
-            center: function(cm, icon, cursor, selection){
+            center: function(cm, icon, cursor, selection) {
+              // 替换选中文本，如果没有选中文本，则直接插入
+              cm.replaceSelection('<center>' + selection + '</center>')
 
-                // 替换选中文本，如果没有选中文本，则直接插入
-                cm.replaceSelection("<center>" + selection + "</center>");
-
-                // 如果当前没有选中的文本，将光标移到要输入的位置
-                if(selection === "") {
-                    cm.setCursor(cursor.line, cursor.ch + 1);
-                }
+              // 如果当前没有选中的文本，将光标移到要输入的位置
+              if (selection === '') {
+                cm.setCursor(cursor.line, cursor.ch + 1)
+              }
             }
           },
-          lang : {
-              toolbar : {
-                  toc : "在最开头插入TOC，自动生成标题目录",
-                  video : "插入视频",
-                  center : "居中",
-              }
+          lang: {
+            toolbar: {
+              toc: '在最开头插入TOC，自动生成标题目录',
+              video: '插入视频',
+              center: '居中'
+            }
           },
-          onchange : ()=>{
-            this.deal_with_content();
+          onchange: () => {
+            this.deal_with_content()
           }
-        };
-      },
-    },
-
+        }
+      }
+    }
   },
-  components:{
+  components: {
     BigImg
   },
   data() {
     return {
       instance: null,
-      showImg:false,
+      showImg: false,
       imgSrc: ''
-    };
-  },
-  computed: {
+    }
   },
+  computed: {},
   mounted() {
-    
-    //加载依赖""
-    $s([`${this.editorPath}/../jquery.min.js`,
-    	`${this.editorPath}/lib/raphael.min.js`,
-    	`${this.editorPath}/lib/flowchart.min.js`,
-
-    	],()=>{
-	    $s([
-	      `${this.editorPath}/../xss.min.js`,
-	      `${this.editorPath}/lib/marked.min.js`,
-	      `${this.editorPath}/lib/prettify.min.js`,
-	      `${this.editorPath}/lib/underscore.min.js`,
-		    `${this.editorPath}/lib/sequence-diagram.min.js`,
-		    `${this.editorPath}/lib/jquery.flowchart.min.js`,
-        `${this.editorPath}/lib/jquery.mark.min.js`,
-        `${this.editorPath}/lib/plantuml.js`,
-	    ], () => {
-	       
-	      $s(`${this.editorPath}/editormd.js`, () => {
-	        this.initEditor();
-	      });
-
-	      $s(`${this.editorPath}/../highlight/highlight.min.js`, () => {
-	        hljs.initHighlightingOnLoad();
-	      });
-
-    });
-    
-    
-    });
-
+    // 加载依赖""
+    $s(
+      [
+        `${this.editorPath}/../jquery.min.js`,
+        `${this.editorPath}/lib/raphael.min.js`,
+        `${this.editorPath}/lib/flowchart.min.js`
+      ],
+      () => {
+        $s(
+          [
+            `${this.editorPath}/../xss.min.js`,
+            `${this.editorPath}/lib/marked.min.js`,
+            `${this.editorPath}/lib/prettify.min.js`,
+            `${this.editorPath}/lib/underscore.min.js`,
+            `${this.editorPath}/lib/sequence-diagram.min.js`,
+            `${this.editorPath}/lib/jquery.flowchart.min.js`,
+            `${this.editorPath}/lib/jquery.mark.min.js`,
+            `${this.editorPath}/lib/plantuml.js`
+          ],
+          () => {
+            $s(`${this.editorPath}/editormd.js`, () => {
+              this.initEditor()
+            })
+
+            $s(`${this.editorPath}/../highlight/highlight.min.js`, () => {
+              hljs.initHighlightingOnLoad()
+            })
+          }
+        )
+      }
+    )
   },
   beforeDestroy() {
+    // 清理所有定时器
+    for (var i = 1; i < 999; i++) {
+      window.clearInterval(i)
+    }
 
-    //清理所有定时器
-    for (var i = 1; i < 999; i++){
-      window.clearInterval(i);
-    };
-
-    //window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    // window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
   },
   methods: {
     initEditor() {
       this.$nextTick((editorMD = window.editormd) => {
         if (editorMD) {
-          if (this.type == 'editor'){
-            this.instance = editorMD(this.id, this.editorConfig);
-            //草稿
-            //this.draft(); 鉴于草稿功能未完善。先停掉。
-            //window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
+          if (this.type == 'editor') {
+            this.instance = editorMD(this.id, this.editorConfig)
+            // 草稿
+            // this.draft(); 鉴于草稿功能未完善。先停掉。
+            // window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
           } else {
-            this.instance = editorMD.markdownToHTML(this.id, this.editorConfig);
+            this.instance = editorMD.markdownToHTML(this.id, this.editorConfig)
           }
-          this.deal_with_content();
-        } 
-      });
+          this.deal_with_content()
+        }
+      })
     },
 
-    //插入数据到编辑器中。插入到光标处
-    insertValue(insertContent){
-      this.instance.insertValue(this.html_decode(insertContent));
+    // 插入数据到编辑器中。插入到光标处
+    insertValue(insertContent) {
+      this.instance.insertValue(this.html_decode(insertContent))
     },
 
-    getMarkdown(){
-      return this.instance.getMarkdown();
+    getMarkdown() {
+      return this.instance.getMarkdown()
     },
-    editor_unwatch(){
-      return this.instance.unwatch();
+    editor_unwatch() {
+      return this.instance.unwatch()
     },
 
-    editor_watch(){
-      return this.instance.watch();
+    editor_watch() {
+      return this.instance.watch()
     },
-    clear(){
-      return this.instance.clear();
+    clear() {
+      return this.instance.clear()
     },
 
-    //草稿
-    draft(){
-      var that = this ;
-        //定时保存文本内容到localStorage
-        setInterval(()=>{
-            localStorage.page_content= that.getMarkdown() ;
-        }, 60000);
+    // 草稿
+    draft() {
+      var that = this
+      // 定时保存文本内容到localStorage
+      setInterval(() => {
+        localStorage.page_content = that.getMarkdown()
+      }, 60000)
 
-      //检测是否有定时保存的内容
-      var page_content = localStorage.page_content ;
+      // 检测是否有定时保存的内容
+      var page_content = localStorage.page_content
       if (page_content && page_content.length > 0) {
-        localStorage.removeItem("page_content");
-        that.$confirm(that.$t('draft_tips'),'',{
-          showClose:false
-        }
-        ).then(()=>{
-            that.clear() ;
-            that.insertValue(page_content) ;
-            localStorage.removeItem("page_content");
-          }).catch(()=>{
-            localStorage.removeItem("page_content");
-          });
-      };
-
-    },
-    //关闭前提示
-    beforeunloadHandler(e){
-        e = e || window.event;  
-        
-        // 兼容IE8和Firefox 4之前的版本  
-        if (e) {  
-          e.returnValue = '提示';  
-        }  
-        
-        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+  
-        return '提示';  
+        localStorage.removeItem('page_content')
+        that
+          .$confirm(that.$t('draft_tips'), '', {
+            showClose: false
+          })
+          .then(() => {
+            that.clear()
+            that.insertValue(page_content)
+            localStorage.removeItem('page_content')
+          })
+          .catch(() => {
+            localStorage.removeItem('page_content')
+          })
+      }
     },
+    // 关闭前提示
+    beforeunloadHandler(e) {
+      e = e || window.event
 
-    //对内容做些定制化改造
-    deal_with_content(){
-      var that = this ;
-        //当表格列数过长时将自动出现滚动条
-        $.each($("#"+this.id+' table'), function() {
-            $(this).prop('outerHTML', '<div style="width: 100%;overflow-x: auto;">'+$(this).prop('outerHTML')+'</div>');
-        });
+      // 兼容IE8和Firefox 4之前的版本
+      if (e) {
+        e.returnValue = '提示'
+      }
 
-        //默认超链接都在新窗口打开。但如果是本项目的页面链接，则在本窗口打开。
-        $("#"+this.id+' a[href^="http"]').click(function() {
-            var url = $(this).attr('href');
-            var obj = that.parseURL(url);
-            if (window.location.hostname == obj.hostname && window.location.pathname == obj.pathname) {
-                window.location.href = url;
-                if (obj.hash) {
-                  window.location.reload();
-                };
-            }else{
-              window.open(url) ;
-            }
-            return false ;
-        });
+      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
+      return '提示'
+    },
 
-        //对表格进行一些改造
-        $("#"+this.id+" table tbody tr").each(function(){
-          var tr_this = $(this) ;
-          var td1 =  tr_this.find("td").eq(1).html() ;
-          var td2 =  tr_this.find("td").eq(2).html() ;
-          if(td1 =="object" || td1 =="array[object]" || td2 =="object" || td2 =="array[object]"){
-            tr_this.css({"background-color":"#F8F8F8"});
-          }else{
-            tr_this.css("background-color","#fff"); 
+    // 对内容做些定制化改造
+    deal_with_content() {
+      var that = this
+      // 当表格列数过长时将自动出现滚动条
+      $.each($('#' + this.id + ' table'), function() {
+        $(this).prop(
+          'outerHTML',
+          '<div style="width: 100%;overflow-x: auto;">' +
+            $(this).prop('outerHTML') +
+            '</div>'
+        )
+      })
+
+      // 默认超链接都在新窗口打开。但如果是本项目的页面链接，则在本窗口打开。
+      $('#' + this.id + ' a[href^="http"]').click(function() {
+        var url = $(this).attr('href')
+        var obj = that.parseURL(url)
+        if (
+          window.location.hostname == obj.hostname &&
+          window.location.pathname == obj.pathname
+        ) {
+          window.location.href = url
+          if (obj.hash) {
+            window.location.reload()
           }
-          //设置表格hover
-          tr_this.hover(function(){
-              tr_this.css("background-color","#F8F8F8");
-          },function(){
-            if(td1 =="object" || td1 =="array[object]" || td2 =="object" || td2 =="array[object]"){
-              tr_this.css({"background-color":"#F8F8F8"});
-            }else{
-              tr_this.css("background-color","#fff"); 
+        } else {
+          window.open(url)
+        }
+        return false
+      })
+
+      // 对表格进行一些改造
+      $('#' + this.id + ' table tbody tr').each(function() {
+        var tr_this = $(this)
+        var td1 = tr_this
+          .find('td')
+          .eq(1)
+          .html()
+        var td2 = tr_this
+          .find('td')
+          .eq(2)
+          .html()
+        if (
+          td1 == 'object' ||
+          td1 == 'array[object]' ||
+          td2 == 'object' ||
+          td2 == 'array[object]'
+        ) {
+          tr_this.css({ 'background-color': '#F8F8F8' })
+        } else {
+          tr_this.css('background-color', '#fff')
+        }
+        // 设置表格hover
+        tr_this.hover(
+          function() {
+            tr_this.css('background-color', '#F8F8F8')
+          },
+          function() {
+            if (
+              td1 == 'object' ||
+              td1 == 'array[object]' ||
+              td2 == 'object' ||
+              td2 == 'array[object]'
+            ) {
+              tr_this.css({ 'background-color': '#F8F8F8' })
+            } else {
+              tr_this.css('background-color', '#fff')
             }
-          });
-
-        });
-
-        //获取内容总长度
-        var contentWidth = $("#"+this.id+" p").width() ;
-        contentWidth = contentWidth ? contentWidth : 722;
-        //表格列 的宽度
-        $("#"+this.id+" table").each(function(i){
-          var $v =$(this).get(0) ;//原生dom对象
-          var num = $v.rows.item(0).cells.length ; //表格的列数
-          var colWidth = Math.floor(contentWidth/num) -2 ;
-          if (num <= 5) {
-            $(this).find("th").css("width",colWidth.toString()+"px");
           }
-          
-        });
-
-        
-        //图片点击放大
-        $("#"+this.id+" img").click(function(){
-          var  img_url = $(this).attr("src");
-          that.showImg = true;
-　　　　　　// 获取当前图片地址
-          that.imgSrc = img_url;
-        });
-        
-        //表格头颜色
-        $("#"+this.id+" table thead tr").css("background-color","#409eff") ;
-        $("#"+this.id+" table thead tr").css("color","#fff") ;
+        )
+      })
+
+      // 获取内容总长度
+      var contentWidth = $('#' + this.id + ' p').width()
+      contentWidth = contentWidth || 722
+      // 表格列 的宽度
+      $('#' + this.id + ' table').each(function(i) {
+        var $v = $(this).get(0) // 原生dom对象
+        var num = $v.rows.item(0).cells.length // 表格的列数
+        var colWidth = Math.floor(contentWidth / num) - 2
+        if (num <= 5) {
+          $(this)
+            .find('th')
+            .css('width', colWidth.toString() + 'px')
+        }
+      })
+
+      // 图片点击放大
+      $('#' + this.id + ' img').click(function() {
+        var img_url = $(this).attr('src')
+        that.showImg = true // 获取当前图片地址
+        that.imgSrc = img_url
+      })
+
+      // 表格头颜色
+      $('#' + this.id + ' table thead tr').css('background-color', '#409eff')
+      $('#' + this.id + ' table thead tr').css('color', '#fff')
+
+      // 代码块美化
+      $('#' + this.id + ' .linenums').css('padding-left', '5px')
+      // $("#"+this.id+" .linenums li").css("list-style-type","none") ; //这句代码的副作用是把代码块里的换行符也去掉了
+      // 为了弥补上面那句代码失去换行符的漏洞，所以用这个补丁代替
+      $('#' + this.id + ' .linenums li code').each(function() {
+        if (
+          $(this)
+            .find('span')
+            .text()
+        ) {
+          // 假如子元素非空，那就不是换行，从而设置style none。这样就不会误伤把换行符所在的li也设置none了。
+          $(this)
+            .parent()
+            .css('list-style-type', 'none')
+        }
+      })
 
-        //代码块美化
-        $("#"+this.id+" .linenums").css("padding-left","5px") ;
-        //$("#"+this.id+" .linenums li").css("list-style-type","none") ; //这句代码的副作用是把代码块里的换行符也去掉了
-        //为了弥补上面那句代码失去换行符的漏洞，所以用这个补丁代替
-        $("#"+this.id+" .linenums li code").each(function(){
-          if($(this).find("span").text()){
-            //假如子元素非空，那就不是换行，从而设置style none。这样就不会误伤把换行符所在的li也设置none了。
-            $(this).parent().css("list-style-type","none") ;
-          }
-        });
-        
-        $("#"+this.id+" .linenums li").css("background-color","#fcfcfc") ;
-        $(".markdown-body pre").css("background-color","#fcfcfc") ;
-        $(".markdown-body pre").css("border","1px solid #e1e1e8") ;
-        
+      $('#' + this.id + ' .linenums li').css('background-color', '#fcfcfc')
+      $('.markdown-body pre').css('background-color', '#fcfcfc')
+      $('.markdown-body pre').css('border', '1px solid #e1e1e8')
 
-        //高亮关键字
-        if(this.keyword)$("#"+this.id).mark(this.keyword);
-        
+      // 高亮关键字
+      if (this.keyword) $('#' + this.id).mark(this.keyword)
     },
 
-
-    //转义
-    html_decode(str){   
-      var s = "";   
-      if (str.length == 0) return "";   
-      s = str.replace(/&gt;/g, "&");   
-      s = s.replace(/&lt;/g, "<");   
-      s = s.replace(/&gt;/g, ">");   
-      s = s.replace(/&nbsp;/g, " ");   
-      s = s.replace(/&#39;/g, "\'");   
-      s = s.replace(/&quot;/g, "\"");   
-      //s = s.replace(/<br>/g, "\n");   
-      return s;   
+    // 转义
+    html_decode(str) {
+      var s = ''
+      if (str.length == 0) return ''
+      s = str.replace(/&gt;/g, '&')
+      s = s.replace(/&lt;/g, '<')
+      s = s.replace(/&gt;/g, '>')
+      s = s.replace(/&nbsp;/g, ' ')
+      s = s.replace(/&#39;/g, "'")
+      s = s.replace(/&quot;/g, '"')
+      // s = s.replace(/<br>/g, "\n");
+      return s
     },
 
     parseURL(url) {
-        var a = document.createElement('a');
-        a.href = url;
-        // var a = new URL(url);
-        return {
-          source: url,
-          protocol: a.protocol.replace(':', ''), 
-          host: a.hostname,
-          hostname: a.hostname,
-          port: a.port,
-          query: a.search,
-          params: (function() {
-            var params = {},
-                seg = a.search.replace(/^\?/, '').split('&'),
-                len = seg.length,
-                p;
-            for (var i = 0; i < len; i++) {
-              if (seg[i]) {
-                 p = seg[i].split('=');
-                 params[p[0]] = p[1];   
-              }
+      var a = document.createElement('a')
+      a.href = url
+      // var a = new URL(url);
+      return {
+        source: url,
+        protocol: a.protocol.replace(':', ''),
+        host: a.hostname,
+        hostname: a.hostname,
+        port: a.port,
+        query: a.search,
+        params: (function() {
+          // eslint-disable-next-line one-var
+          var params = {},
+            seg = a.search.replace(/^\?/, '').split('&'),
+            len = seg.length,
+            p
+          for (var i = 0; i < len; i++) {
+            if (seg[i]) {
+              p = seg[i].split('=')
+              params[p[0]] = p[1]
             }
-            return params;
-         })(),
-         hash: a.hash.replace('#', ''),
-         path: a.pathname.replace(/^([^\/])/, '/$1'),
-         pathname: a.pathname.replace(/^([^\/])/, '/$1'),
-        };
+          }
+          return params
+        })(),
+        hash: a.hash.replace('#', ''),
+        // eslint-disable-next-line no-useless-escape
+        path: a.pathname.replace(/^([^\/])/, '/$1'),
+        // eslint-disable-next-line no-useless-escape
+        pathname: a.pathname.replace(/^([^\/])/, '/$1')
+      }
     }
-
   }
-};
+}
 </script>
diff --git a/web_src/src/components/common/Footer.vue b/web_src/src/components/common/Footer.vue
index b5b9a47a9..f09cf073e 100644
--- a/web_src/src/components/common/Footer.vue
+++ b/web_src/src/components/common/Footer.vue
@@ -1,13 +1,11 @@
 <template>
-	<div>
-
-	</div>
+  <div></div>
 </template>
 
 <script>
 export default {
   name: 'Footer',
-  data () {
+  data() {
     return {
       msg: '尾部'
     }
@@ -17,5 +15,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>
diff --git a/web_src/src/components/common/Header.vue b/web_src/src/components/common/Header.vue
index 6b444dd22..d6111cde2 100644
--- a/web_src/src/components/common/Header.vue
+++ b/web_src/src/components/common/Header.vue
@@ -1,11 +1,9 @@
-<template>
-
-</template>
+<template></template>
 
 <script>
 export default {
   name: 'Header',
-  data () {
+  data() {
     return {
       msg: '头部'
     }
@@ -15,5 +13,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>
diff --git a/web_src/src/components/common/JsonBeautify.vue b/web_src/src/components/common/JsonBeautify.vue
index 76b83e8a6..a44ea6b42 100644
--- a/web_src/src/components/common/JsonBeautify.vue
+++ b/web_src/src/components/common/JsonBeautify.vue
@@ -1,55 +1,58 @@
 <template>
-	<div>
-		<el-dialog :title="$t('beautify_json')" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
-		  <el-form >
-		  	<el-input type="textarea" class="dialoContent" :placeholder="$t('beautify_json_description')" :rows="10" v-model="content"></el-input>
-		  </el-form>
-		  <div slot="footer" class="dialog-footer">
-		    <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
-		    <el-button type="primary" @click="transform">{{$t('confirm')}}</el-button>
-		  </div>
-		</el-dialog>
-	</div>
-
-
+  <div>
+    <el-dialog
+      :title="$t('beautify_json')"
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
+      <el-form>
+        <el-input
+          type="textarea"
+          class="dialoContent"
+          :placeholder="$t('beautify_json_description')"
+          :rows="10"
+          v-model="content"
+        ></el-input>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
+        <el-button type="primary" @click="transform">{{$t('confirm')}}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'JsonBeautify',
-  props:{
-  	
-  	formLabelWidth: '120px',
-  	callback:'',
+  props: {
+    formLabelWidth: '120px',
+    callback: ''
   },
-  data () {
+  data() {
     return {
-    	content:'',
-    	json_table_data:'',
-    	dialogFormVisible:false,
+      content: '',
+      json_table_data: '',
+      dialogFormVisible: false
     }
   },
-  methods:{
-  	transform(){
-  		var data = this.content;
-		try {
-		  var formattedStr = JSON.stringify(JSON.parse(data), null, 2);
-		  var text = "\n ``` \n " + formattedStr + " \n\n ```\n\n"; //
-		  this.callback(text);
-		} catch (e) {
-		  //非json数据直接显示
-		  this.callback(data);
-		}
-  		this.dialogFormVisible = false;
-  	}
+  methods: {
+    transform() {
+      var data = this.content
+      try {
+        var formattedStr = JSON.stringify(JSON.parse(data), null, 2)
+        var text = '\n ``` \n ' + formattedStr + ' \n\n ```\n\n' //
+        this.callback(text)
+      } catch (e) {
+        // 非json数据直接显示
+        this.callback(data)
+      }
+      this.dialogFormVisible = false
+    }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.dialoContent{
-	
-}
 </style>
diff --git a/web_src/src/components/common/JsonToTable.vue b/web_src/src/components/common/JsonToTable.vue
index ed6d54dbf..f88808f49 100644
--- a/web_src/src/components/common/JsonToTable.vue
+++ b/web_src/src/components/common/JsonToTable.vue
@@ -1,85 +1,89 @@
 <template>
-	<div>
-		<el-dialog :title="$t('json_to_table')" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
-		  <el-form >
-		  	<el-input type="textarea" class="dialoContent" :placeholder="$t('json_to_table_description')" :rows="10" v-model="content"></el-input>
-		  </el-form>
-		  <div slot="footer" class="dialog-footer">
-		    <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
-		    <el-button type="primary" @click="transform">{{$t('confirm')}}</el-button>
-		  </div>
-		</el-dialog>
-	</div>
-
-
+  <div>
+    <el-dialog
+      :title="$t('json_to_table')"
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
+      <el-form>
+        <el-input
+          type="textarea"
+          class="dialoContent"
+          :placeholder="$t('json_to_table_description')"
+          :rows="10"
+          v-model="content"
+        ></el-input>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
+        <el-button type="primary" @click="transform">{{$t('confirm')}}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'JsonToTable',
-  props:{
-  	formLabelWidth: '120px',
-  	callback:'',
+  props: {
+    formLabelWidth: '120px',
+    callback: ''
   },
-  data () {
+  data() {
     return {
-    	content:'',
-    	json_table_data:'',
-    	dialogFormVisible:false,
+      content: '',
+      json_table_data: '',
+      dialogFormVisible: false
     }
   },
-  methods:{
-  	transform(){
-
-	    try {
-	      var jsonData = JSON.parse(this.content);
-	      this.json_table_data = '|参数|类型|描述|\n|:-------|:-------|:-------|\n';
-	      this.Change(jsonData);
-	      this.callback(this.json_table_data);
-	    } catch (e) {
-	      this.$alert("Json解析失败");
-	    }
-  		this.dialogFormVisible = false;
-  	},
-  	Change(data){
-  		var that =  this;
-	    var level_str = "- ";
-	    if (arguments.length > 1) {
-	      var level;
-	      arguments[1] > 0 ? level = arguments[1] : level = 1;
-	      for (var i = 0; i < level; i++) {
-	        level_str += "- ";
-	      }
-	    }
-
-	    for (var key in data) {
-	      var value = data[key];
-	      var type = typeof(value);
-	      if (type == "object") {
-	        that.json_table_data += '| ' + level_str + key + ' |' + type + '  | 无 |\n';
-	        if (value instanceof Array) {
-	          var j = level + 1;
-	          this.Change(value[0], j);
-	          continue;
-	        }
-	        //else
-	        //{
-	        this.Change(value, level);
-	        //}
+  methods: {
+    transform() {
+      try {
+        var jsonData = JSON.parse(this.content)
+        this.json_table_data =
+          '|参数|类型|描述|\n|:-------|:-------|:-------|\n'
+        this.Change(jsonData)
+        this.callback(this.json_table_data)
+      } catch (e) {
+        this.$alert('Json解析失败')
+      }
+      this.dialogFormVisible = false
+    },
+    Change(data) {
+      var that = this
+      var level_str = '- '
+      if (arguments.length > 1) {
+        var level
+        arguments[1] > 0 ? (level = arguments[1]) : (level = 1)
+        for (var i = 0; i < level; i++) {
+          level_str += '- '
+        }
+      }
 
-	      } else {
-	        that.json_table_data += '| ' + key + ' | ' + type + '| 无 |\n';
-	      }
-	  }
-  	}
+      for (var key in data) {
+        var value = data[key]
+        var type = typeof value
+        if (type == 'object') {
+          that.json_table_data +=
+            '| ' + level_str + key + ' |' + type + '  | 无 |\n'
+          if (value instanceof Array) {
+            var j = level + 1
+            this.Change(value[0], j)
+            continue
+          }
+          // else
+          // {
+          this.Change(value, level)
+          // }
+        } else {
+          that.json_table_data += '| ' + key + ' | ' + type + '| 无 |\n'
+        }
+      }
+    }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.dialoContent{
-	
-}
 </style>
diff --git a/web_src/src/components/common/Toc.vue b/web_src/src/components/common/Toc.vue
index 643e4dd72..a045fa9ad 100644
--- a/web_src/src/components/common/Toc.vue
+++ b/web_src/src/components/common/Toc.vue
@@ -1,175 +1,175 @@
 
 <template>
-  <div> 
-
-  </div>
+  <div></div>
 </template>
 <script>
 export default {
-
-  data () {
-    return {
-
-    }
+  data() {
+    return {}
   },
-  mounted () {
-    var that = this ; 
-    //循环检测jq有没有加载成功
+  mounted() {
+    var that = this
+    // 循环检测jq有没有加载成功
     var check_jQuery_is_load = setInterval(function() {
-        try{
-            if ($ != undefined) {
-                clearInterval(check_jQuery_is_load);
-                that.toc_main_script();
-            }
-        } catch(e) {}
-    },200);
-
+      try {
+        if ($ != undefined) {
+          clearInterval(check_jQuery_is_load)
+          that.toc_main_script()
+        }
+      } catch (e) {}
+    }, 200)
   },
   methods: {
-  toc_main_script() {
-
-        //监听点击事件并滑动到相应位置
-        $(document).on('click', '.markdown-toc-list a[href]', function(event) {
-            event.preventDefault();
-            var name = $(this).attr('href').substring(1);
-            var top_at_window = $('[name="'+name+'"]').offset().top;
-            $("html, body").animate({scrollTop: top_at_window}, 300)
-        });
-        //监听展开事件
-        $(document).on('click', '.markdown-toc', function(event) {
-            if (!$(event.target).is("a")) {
-                $('.markdown-toc').toggleClass('open-list');
-            }
-        });
-        //监听鼠标滚动事件给与颜色加亮
-        $(window).scroll(function(event) {
-            var activeName = "";
-            $('.markdown-toc-list a[href]').each(function(index, el) {
-                var name = $(el).attr('href').substring(1);
-                if ($('[name="'+name+'"]').offset().top - $(window).scrollTop() < 1) {
-                    activeName = name;
-                } else {
-                    return false;
-                }
-            });
-            $('.markdown-toc-list a').removeClass('current');
-            $('.markdown-toc-list a[href="#'+activeName+'"]').addClass('current');
-        });
-
-        //不是移动设备并且不是其他小屏设备，则自动展开目录
-        if( !this.isMobile() &&  window.screen.width > 1000){
-            this.$nextTick(() => {
-                setTimeout(function(){
-                    $(".markdown-toc").click();
-                },500);
-            });
+    toc_main_script() {
+      // 监听点击事件并滑动到相应位置
+      $(document).on('click', '.markdown-toc-list a[href]', function(event) {
+        event.preventDefault()
+        var name = $(this)
+          .attr('href')
+          .substring(1)
+        var top_at_window = $('[name="' + name + '"]').offset().top
+        $('html, body').animate({ scrollTop: top_at_window }, 300)
+      })
+      // 监听展开事件
+      $(document).on('click', '.markdown-toc', function(event) {
+        if (!$(event.target).is('a')) {
+          $('.markdown-toc').toggleClass('open-list')
         }
+      })
+      // 监听鼠标滚动事件给与颜色加亮
+      $(window).scroll(function(event) {
+        var activeName = ''
+        $('.markdown-toc-list a[href]').each(function(index, el) {
+          var name = $(el)
+            .attr('href')
+            .substring(1)
+          if (
+            $('[name="' + name + '"]').offset().top - $(window).scrollTop() <
+            1
+          ) {
+            activeName = name
+          } else {
+            return false
+          }
+        })
+        $('.markdown-toc-list a').removeClass('current')
+        $('.markdown-toc-list a[href="#' + activeName + '"]').addClass(
+          'current'
+        )
+      })
 
-
-
-    },
+      // 不是移动设备并且不是其他小屏设备，则自动展开目录
+      if (!this.isMobile() && window.screen.width > 1000) {
+        this.$nextTick(() => {
+          setTimeout(function() {
+            $('.markdown-toc').click()
+          }, 500)
+        })
+      }
+    }
   },
-  destroyed () {
-    //把那些监听了的事件去掉
-    $(document).off('click', '.markdown-toc-list a[href]');
-    $(document).off('click', '.markdown-toc');
-    $(".markdown-toc").remove();
-
+  destroyed() {
+    // 把那些监听了的事件去掉
+    $(document).off('click', '.markdown-toc-list a[href]')
+    $(document).off('click', '.markdown-toc')
+    $('.markdown-toc').remove()
   }
 }
 </script>
 <!-- 注意，这里是全局css -->
 <style >
 .page_content_main .markdown-toc {
-    position: fixed;
-    top: 230px;
-    margin-left: 800px;
-    min-width: 32px;
-    min-height: 32px;
-    cursor: pointer;
-    z-index: 1;
+  position: fixed;
+  top: 230px;
+  margin-left: 800px;
+  min-width: 32px;
+  min-height: 32px;
+  cursor: pointer;
+  z-index: 1;
 }
 .page_content_main .markdown-toc:before {
-    content:"\e63f";
-    font-family: element-icons !important;
-    color: #909399;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    background: #fff;
-    border: 1px solid #DCDFE6;
-    border-radius: 5px;
-    cursor: pointer;
-    box-shadow: 0 5px 5px #F2F6FC;
-    transition: .25s;
+  content: '\e63f';
+  font-family: element-icons !important;
+  color: #909399;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: 0 5px 5px #f2f6fc;
+  transition: 0.25s;
 }
 .page_content_main .markdown-toc.open-list:before {
-    border: 1px solid #40a9ff;
-    color: #40a9ff;
-    border-radius: 50%;
+  border: 1px solid #40a9ff;
+  color: #40a9ff;
+  border-radius: 50%;
 }
 .page_content_main .markdown-toc > .markdown-toc-list {
-    position: relative;
-    z-index: 999;
-    margin: 0;
-    list-style: none;
-    min-width: 150px;
-    max-width: 230px;
-    padding: 5px 0;
-    background: #fff;
-    border: 1px solid #DCDFE6;
-    border-radius: 5px;
-    box-shadow: 0 5px 5px #F2F6FC;
-    max-height: 400px;
-    overflow-y: auto;
-    transform: scale(0);
-    margin-right: -230px;
-    margin-bottom: -270px;
-    opacity: 0;
-    visibility: hidden;
-    transform-origin: bottom right;
-    transition: .25s ease 0s, margin-right 0s ease .25s, margin-bottom 0s ease .25s;
+  position: relative;
+  z-index: 999;
+  margin: 0;
+  list-style: none;
+  min-width: 150px;
+  max-width: 230px;
+  padding: 5px 0;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 5px;
+  box-shadow: 0 5px 5px #f2f6fc;
+  max-height: 400px;
+  overflow-y: auto;
+  transform: scale(0);
+  margin-right: -230px;
+  margin-bottom: -270px;
+  opacity: 0;
+  visibility: hidden;
+  transform-origin: bottom right;
+  transition: 0.25s ease 0s, margin-right 0s ease 0.25s,
+    margin-bottom 0s ease 0.25s;
 }
 .page_content_main .markdown-toc.open-list .markdown-toc-list {
-    margin-right: 0px;
-    margin-bottom: 0px;
-    transform: scale(1) translateY(-44px);
-    opacity: 1;
-    visibility: visible;
-    transition: .5s cubic-bezier(0.4,1.7,0.6,1), margin-right 0s, margin-bottom 0s;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  transform: scale(1) translateY(-44px);
+  opacity: 1;
+  visibility: visible;
+  transition: 0.5s cubic-bezier(0.4, 1.7, 0.6, 1), margin-right 0s,
+    margin-bottom 0s;
 }
 .page_content_main .markdown-toc li {
-    list-style: none !important;
+  list-style: none !important;
 }
 .page_content_main .markdown-toc li a {
-    display: block;
-    padding: 3px 15px;
-    font-size: 14px;
-    color: #606266;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow:hidden;
-    transition: .15s;
+  display: block;
+  padding: 3px 15px;
+  font-size: 14px;
+  color: #606266;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  transition: 0.15s;
 }
 .page_content_main .markdown-toc li a.current {
-    background: #ecf5ff;
-    color: #40a9ff;
-    box-shadow: 2px 0px #40a9ff inset;
+  background: #ecf5ff;
+  color: #40a9ff;
+  box-shadow: 2px 0px #40a9ff inset;
 }
 .page_content_main .markdown-toc li a:hover {
-    background: #d9ecff;
-    text-decoration: none;
-    color: #40a9ff;
-    transition: 0s;
+  background: #d9ecff;
+  text-decoration: none;
+  color: #40a9ff;
+  transition: 0s;
 }
 .page_content_main .markdown-toc li ul {
-    padding: 0;
+  padding: 0;
 }
 .page_content_main .markdown-toc li li a {
-    padding-left: 30px;
+  padding-left: 30px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web_src/src/components/item/Index.vue b/web_src/src/components/item/Index.vue
index c32a6afd6..4c466ad05 100644
--- a/web_src/src/components/item/Index.vue
+++ b/web_src/src/components/item/Index.vue
@@ -1,449 +1,495 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container class="container-narrow">
-
       <el-row class="masthead">
-
-          <div class="logo-title ">
-              <h2 class="muted"><img src="static/logo/b_64.png" style="width:50px;height:50px;margin-bottom:-10px;" alt="">ShowDoc</h2>
-          </div>
-          <div class="header-btn-group pull-right">
-                <el-tooltip class="item" effect="dark" :content="$t('feedback')" placement="top">
-                      <router-link to="" ><i @click="feedback" class="el-icon-phone-outline" ></i></router-link>
-                </el-tooltip>
-
-                <el-tooltip v-if="lang =='zh-cn'" class="item" effect="dark" content="客户端" placement="top">
-                  <a target="_blank"  href="https://www.showdoc.cc/clients"><i class="el-icon-mobile-phone" ></i></a>
-                </el-tooltip>
-
-                <el-tooltip class="item" effect="dark" :content="$t('team_mamage')" placement="top">
-                      <router-link to="/team/index"><i class="el-icon-s-flag" ></i></router-link>
-                </el-tooltip>
-
-                <el-tooltip v-if="isAdmin" class="item" effect="dark" :content="$t('background')" placement="top">
-                      <router-link to="/admin/index" ><i class="el-icon-s-tools" ></i></router-link>
-                </el-tooltip>
-
-              &nbsp;&nbsp;
-              <el-tooltip class="item" effect="dark" :content="$t('more')" placement="top">
-                <el-dropdown @command="dropdown_callback" trigger="click">
-                  <span class="el-dropdown-link">
-                    <i class="el-icon-caret-bottom el-icon--right"></i>
-                  </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item><router-link to="/user/setting">{{$t("personal_setting")}}</router-link></el-dropdown-item>
-                    <el-dropdown-item><a target="_blank" v-if="lang =='zh-cn'" href="http://runapi.showdoc.cc/">RunApi</a></el-dropdown-item>
-                    <el-dropdown-item :command="logout">{{$t("logout")}}</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              </el-tooltip>
-
-          </div>
-
-        
+        <div class="logo-title">
+          <h2 class="muted">
+            <img src="static/logo/b_64.png" style="width:50px;height:50px;margin-bottom:-10px;" alt />ShowDoc
+          </h2>
+        </div>
+        <div class="header-btn-group pull-right">
+          <el-tooltip class="item" effect="dark" :content="$t('feedback')" placement="top">
+            <router-link to>
+              <i @click="feedback" class="el-icon-phone-outline"></i>
+            </router-link>
+          </el-tooltip>
+
+          <el-tooltip
+            v-if="lang =='zh-cn'"
+            class="item"
+            effect="dark"
+            content="客户端"
+            placement="top"
+          >
+            <a target="_blank" href="https://www.showdoc.cc/clients">
+              <i class="el-icon-mobile-phone"></i>
+            </a>
+          </el-tooltip>
+
+          <el-tooltip class="item" effect="dark" :content="$t('team_mamage')" placement="top">
+            <router-link to="/team/index">
+              <i class="el-icon-s-flag"></i>
+            </router-link>
+          </el-tooltip>
+
+          <el-tooltip
+            v-if="isAdmin"
+            class="item"
+            effect="dark"
+            :content="$t('background')"
+            placement="top"
+          >
+            <router-link to="/admin/index">
+              <i class="el-icon-s-tools"></i>
+            </router-link>
+          </el-tooltip>&nbsp;&nbsp;
+          <el-tooltip class="item" effect="dark" :content="$t('more')" placement="top">
+            <el-dropdown @command="dropdown_callback" trigger="click">
+              <span class="el-dropdown-link">
+                <i class="el-icon-caret-bottom el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <router-link to="/user/setting">{{$t("personal_setting")}}</router-link>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <a target="_blank" v-if="lang =='zh-cn'" href="http://runapi.showdoc.cc/">RunApi</a>
+                </el-dropdown-item>
+                <el-dropdown-item :command="logout">{{$t("logout")}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+        </div>
       </el-row>
+    </el-container>
 
-      </el-container>
-
-      <el-container class="container-narrow">
-
-        <div class="container-thumbnails">
-
-          <div class="search-box-div" v-if="itemList.length > 9">
-              <div class="search-box el-input el-input--prefix">
-                <input autocomplete="off" type="text" rows="2" validateevent="true" class="el-input__inner" v-model="keyword">
-                <span class="el-input__prefix">
-                  <i class="el-input__icon el-icon-search"></i>
-                </span>
-              </div>
+    <el-container class="container-narrow">
+      <div class="container-thumbnails">
+        <div class="search-box-div" v-if="itemList.length > 9">
+          <div class="search-box el-input el-input--prefix">
+            <input
+              autocomplete="off"
+              type="text"
+              rows="2"
+              validateevent="true"
+              class="el-input__inner"
+              v-model="keyword"
+            />
+            <span class="el-input__prefix">
+              <i class="el-input__icon el-icon-search"></i>
+            </span>
           </div>
-
-          <ul class="thumbnails" id="item-list" v-if="itemListByKeyword">
-                <draggable v-model="itemListByKeyword" tag="span" group="item"  @end="endMove" ghostClass="sortable-chosen">
-                  <li class=" text-center"  v-for="item in itemListByKeyword"
-                     v-dragging="{ item: item, list: itemListByKeyword, group: 'item' }"
-                  >
-                    <router-link class="thumbnail item-thumbnail"  :to="'/' +  (item.item_domain ? item.item_domain:item.item_id )" title="">
-                      <!-- 自己创建的话显示项目设置按钮 -->
-                      <span class="item-setting " @click.prevent="click_item_setting(item.item_id)" :title="$t('item_setting')" v-if="item.creator" >
-                        <i class="el-icon-setting"></i>
-                      </span>
-                       <!-- 如果是加入的项目的话，这里显示退出按钮 -->
-                      <span class="item-exit" @click.prevent="click_item_exit(item.item_id)" :title="$t('item_exit')" v-if="! item.creator">
-                        <i class="el-icon-close"></i>
-                      </span>
-                      <p class="my-item">{{item.item_name}}</p>
-                      <!-- 如果是加密项目的话，这里显示一个加密图标 -->
-                        <span class="item-private" v-if="item.is_private" >
-                          <el-tooltip class="item" effect="dark"  :content="$t('private_tips')" placement="right">
-                            <i class="el-icon-lock"></i>
-                          </el-tooltip>
-                        </span>
-
-                    </router-link>
-                  </li>
-                </draggable>
-                <li class=" text-center"  >
-                  <router-link class="thumbnail item-thumbnail"  to="/item/add" title="">
-                    <p class="my-item">{{$t('new_item')}}<i class="el-icon-plus"></i></p>
-                  </router-link>
-                </li>
-
-          </ul>
         </div>
 
+        <ul class="thumbnails" id="item-list" v-if="itemListByKeyword">
+          <draggable
+            v-model="itemListByKeyword"
+            tag="span"
+            group="item"
+            @end="endMove"
+            ghostClass="sortable-chosen"
+          >
+            <li
+              class="text-center"
+              v-for="item in itemListByKeyword"
+              v-dragging="{ item: item, list: itemListByKeyword, group: 'item' }"
+              :key="item.item_id"
+            >
+              <router-link
+                class="thumbnail item-thumbnail"
+                :to="'/' +  (item.item_domain ? item.item_domain:item.item_id )"
+                title
+              >
+                <!-- 自己创建的话显示项目设置按钮 -->
+                <span
+                  class="item-setting"
+                  @click.prevent="click_item_setting(item.item_id)"
+                  :title="$t('item_setting')"
+                  v-if="item.creator"
+                >
+                  <i class="el-icon-setting"></i>
+                </span>
+                <!-- 如果是加入的项目的话，这里显示退出按钮 -->
+                <span
+                  class="item-exit"
+                  @click.prevent="click_item_exit(item.item_id)"
+                  :title="$t('item_exit')"
+                  v-if="! item.creator"
+                >
+                  <i class="el-icon-close"></i>
+                </span>
+                <p class="my-item">{{item.item_name}}</p>
+                <!-- 如果是加密项目的话，这里显示一个加密图标 -->
+                <span class="item-private" v-if="item.is_private">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    :content="$t('private_tips')"
+                    placement="right"
+                  >
+                    <i class="el-icon-lock"></i>
+                  </el-tooltip>
+                </span>
+              </router-link>
+            </li>
+          </draggable>
+          <li class="text-center">
+            <router-link class="thumbnail item-thumbnail" to="/item/add" title>
+              <p class="my-item">
+                {{$t('new_item')}}
+                <i class="el-icon-plus"></i>
+              </p>
+            </router-link>
+          </li>
+        </ul>
+      </div>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <style scoped>
+.container-narrow {
+  margin: 0 auto;
+  max-width: 930px;
+}
 
+.masthead {
+  width: 100%;
+  margin-top: 30px;
+}
 
-  .container-narrow{
-    margin: 0 auto;
-    max-width: 930px;
-  }
-
-  .masthead{
-    width: 100%;
-    margin-top: 30px;
-  }
-
-  .header-btn-group{
-   margin-top: -38px;
-   font-size: 18px;
-  }
-
-  .header-btn-group a{
-    color: #333;
-    margin-left: 25px;
-  }
+.header-btn-group {
+  margin-top: -38px;
+  font-size: 18px;
+}
 
-  .el-dropdown{
-      font-size: 18px;
-  }
-  .el-dropdown-link , a {
-    color: #333;
-  }
+.header-btn-group a {
+  color: #333;
+  margin-left: 25px;
+}
 
+.el-dropdown {
+  font-size: 18px;
+}
+.el-dropdown-link,
+a {
+  color: #333;
+}
 
-  .logo-title{
-    margin-left: 0px;
-  }
+.logo-title {
+  margin-left: 0px;
+}
 
-  .container-thumbnails{
-    margin-top: 30px;
-    max-width: 1000px;
-  }
+.container-thumbnails {
+  margin-top: 30px;
+  max-width: 1000px;
+}
 
-  .my-item{
-    margin: 40px 5px;
-  }
+.my-item {
+  margin: 40px 5px;
+}
 
-  .thumbnails li {
-      float: left;
-      margin-bottom: 20px;
-      margin-left: 20px;
-    }
+.thumbnails li {
+  float: left;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
 
-  .thumbnails li a{
-    color: #444;
-    font-weight: bold;
-    height: 100px;
-    width: 180px;
-  }
-  .thumbnails li a:hover,
-  .thumbnails li a:focus{
-    border-color:#f2f5e9;
-    -webkit-box-shadow:none;
-    box-shadow:none;
-    text-decoration: none;
-    background-color: #f2f5e9;
-  }
+.thumbnails li a {
+  color: #444;
+  font-weight: bold;
+  height: 100px;
+  width: 180px;
+}
+.thumbnails li a:hover,
+.thumbnails li a:focus {
+  border-color: #f2f5e9;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  text-decoration: none;
+  background-color: #f2f5e9;
+}
 
-  .thumbnail {
-    display: block;
-    padding: 4px;
-    line-height: 20px;
-    border: 1px solid #ddd;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.055);
-    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.055);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.055);
-    -webkit-transition: all .2s ease-in-out;
-    -moz-transition: all .2s ease-in-out;
-    -o-transition: all .2s ease-in-out;
-    transition: all .2s ease-in-out;
-    list-style: none;
-    background-color: #ffffff;
-  }
+.thumbnail {
+  display: block;
+  padding: 4px;
+  line-height: 20px;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  list-style: none;
+  background-color: #ffffff;
+}
 
-  .item-setting{
-    float:right;
-    margin-right:15px;
-    margin-top:5px;
-    display: none;
-  }
+.item-setting {
+  float: right;
+  margin-right: 15px;
+  margin-top: 5px;
+  display: none;
+}
 
-  .item-exit{
-    float:right;
-    margin-right:5px;
-    margin-top:5px;
-    display: none;
-  }
-  .item-private{
-    float:right;
-    margin-right:15px;
-    margin-top: -20px;
-    display: none;
-    cursor:default;
-  }
+.item-exit {
+  float: right;
+  margin-right: 5px;
+  margin-top: 5px;
+  display: none;
+}
+.item-private {
+  float: right;
+  margin-right: 15px;
+  margin-top: -20px;
+  display: none;
+  cursor: default;
+}
 
-  .thumbnails li a i{
-    color: #777;
-    font-weight: bold;
-    margin-left: 5px;
-  }
+.thumbnails li a i {
+  color: #777;
+  font-weight: bold;
+  margin-left: 5px;
+}
 
-  .item-thumbnail:hover .item-setting {
-    display: block;
-  }
-  .item-thumbnail:hover .item-exit {
-    display: block;
-  }
-  .item-thumbnail:hover .item-private {
-    display: block;
-  }
-  
-  .search-box-div{
-    width: 190px;
-    margin-left: 60px;
-  }
+.item-thumbnail:hover .item-setting {
+  display: block;
+}
+.item-thumbnail:hover .item-exit {
+  display: block;
+}
+.item-thumbnail:hover .item-private {
+  display: block;
+}
 
-  .sortable-chosen .item-thumbnail{
-    color: #ffffff;
-    background-color: #ffffff;
-  }
+.search-box-div {
+  width: 190px;
+  margin-left: 60px;
+}
 
+.sortable-chosen .item-thumbnail {
+  color: #ffffff;
+  background-color: #ffffff;
+}
 </style>
 
 <script>
 import draggable from 'vuedraggable'
 if (typeof window !== 'undefined') {
-  var $s = require('scriptjs');
+  var $s = require('scriptjs')
 }
 export default {
   components: {
-      draggable,
+    draggable
   },
   data() {
     return {
       currentDate: new Date(),
-      itemList:{},
-      isAdmin:false,
-      keyword:'',
-      lang:''
-    };
+      itemList: {},
+      isAdmin: false,
+      keyword: '',
+      lang: ''
+    }
   },
-  computed:{
-    itemListByKeyword:function(){
+  computed: {
+    itemListByKeyword: function() {
       if (!this.keyword) {
-        return this.itemList ;
-      };
-      let itemListByKeyword = [] ;
+        return this.itemList
+      }
+      let itemListByKeyword = []
       for (var i = 0; i < this.itemList.length; i++) {
-        if (this.itemList[i]['item_name'].indexOf(this.keyword) > -1 ) {
-          itemListByKeyword.push(this.itemList[i]);
-        };
-        
-      };
-      return itemListByKeyword ;
+        if (this.itemList[i]['item_name'].indexOf(this.keyword) > -1) {
+          itemListByKeyword.push(this.itemList[i])
+        }
+      }
+      return itemListByKeyword
     }
   },
-  methods:{
-    get_item_list(){
-        var that = this ;
-        var url = DocConfig.server+'/api/item/myList';
-
-        var params = new URLSearchParams();
-
-        that.axios.get(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              var json = response.data.data ;
-              that.itemList = json ;
-              //that.bind_item_even();
-            }else{
-              //that.$alert(response.data.error_message);
-            }
-            
-          });
+  methods: {
+    get_item_list() {
+      var that = this
+      var url = DocConfig.server + '/api/item/myList'
+
+      var params = new URLSearchParams()
+
+      that.axios.get(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("加载成功");
+          var json = response.data.data
+          that.itemList = json
+          // that.bind_item_even();
+        } else {
+          // that.$alert(response.data.error_message);
+        }
+      })
     },
-    feedback(){
-      if (DocConfig.lang =='en') {
-        window.open('https://github.com/star7th/showdoc/issues');
-      }else{
-        var msg = "你正在使用免费开源版showdoc，如有问题或者建议，请到github提issue：";
-        msg += "<a href='https://github.com/star7th/showdoc/issues' target='_blank'>https://github.com/star7th/showdoc/issues</a><br>";
-        msg += "如果你觉得showdoc好用，不妨给开源项目点一个star。良好的关注度和参与度有助于开源项目的长远发展。";
+    feedback() {
+      if (DocConfig.lang == 'en') {
+        window.open('https://github.com/star7th/showdoc/issues')
+      } else {
+        var msg =
+          '你正在使用免费开源版showdoc，如有问题或者建议，请到github提issue：'
+        msg +=
+          "<a href='https://github.com/star7th/showdoc/issues' target='_blank'>https://github.com/star7th/showdoc/issues</a><br>"
+        msg +=
+          '如果你觉得showdoc好用，不妨给开源项目点一个star。良好的关注度和参与度有助于开源项目的长远发展。'
         this.$alert(msg, {
-            dangerouslyUseHTMLString: true
-        });
+          dangerouslyUseHTMLString: true
+        })
       }
-
     },
-    item_top_class(top){
+    item_top_class(top) {
       if (top) {
-        return 'el-icon-arrow-down';
-      };
-      return 'el-icon-arrow-up';
+        return 'el-icon-arrow-down'
+      }
+      return 'el-icon-arrow-up'
     },
 
-    bind_item_even(){
-
-      //这里偷个懒，直接用jquery来操作DOM。因为老版本的代码就是基于jquery的，所以复制过来稍微改下
-      $s(["static/jquery.min.js"],()=>{
-
-          //当鼠标放在项目上时将浮现设置和置顶图标
-          $(".item-thumbnail").mouseover(function(){
-            $(this).find(".item-setting").show();
-            //$(this).find(".item-top").show();
-            //$(this).find(".item-down").show();
-          });
-
-          //当鼠标离开项目上时将隐藏设置和置顶图标
-          $(".item-thumbnail").mouseout(function(){
-            $(this).find(".item-setting").hide();
-            $(this).find(".item-top").hide();
-            $(this).find(".item-down").hide();
-          });
-      });
+    bind_item_even() {
+      // 这里偷个懒，直接用jquery来操作DOM。因为老版本的代码就是基于jquery的，所以复制过来稍微改下
+      $s(['static/jquery.min.js'], () => {
+        // 当鼠标放在项目上时将浮现设置和置顶图标
+        $('.item-thumbnail').mouseover(function() {
+          $(this)
+            .find('.item-setting')
+            .show()
+          // $(this).find(".item-top").show();
+          // $(this).find(".item-down").show();
+        })
+
+        // 当鼠标离开项目上时将隐藏设置和置顶图标
+        $('.item-thumbnail').mouseout(function() {
+          $(this)
+            .find('.item-setting')
+            .hide()
+          $(this)
+            .find('.item-top')
+            .hide()
+          $(this)
+            .find('.item-down')
+            .hide()
+        })
+      })
     },
 
-    //进入项目设置页
-    click_item_setting(item_id){
-       this.$router.push({path:'/item/setting/'+item_id});
+    // 进入项目设置页
+    click_item_setting(item_id) {
+      this.$router.push({ path: '/item/setting/' + item_id })
     },
-    click_item_exit(item_id){
-      var that = this ;
+    click_item_exit(item_id) {
+      var that = this
       this.$confirm(that.$t('confirm_exit_item'), ' ', {
         confirmButtonText: that.$t('confirm'),
         cancelButtonText: that.$t('cancel'),
         type: 'warning'
       }).then(() => {
-        var url = DocConfig.server+'/api/item/exitItem';
-        var params = new URLSearchParams();
-        params.append('item_id', item_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              window.location.reload();
-            }else{
-              that.$alert(response.data.error_message);
-            }
-          });
+        var url = DocConfig.server + '/api/item/exitItem'
+        var params = new URLSearchParams()
+        params.append('item_id', item_id)
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            window.location.reload()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
       })
     },
-    logout(){
-        var that = this ;
-        var url = DocConfig.server+'/api/user/logout';
-
-        var params = new URLSearchParams();
-
-        that.axios.get(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              that.$router.push({
-                  path: '/'
-                });
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
+    logout() {
+      var that = this
+      var url = DocConfig.server + '/api/user/logout'
+
+      var params = new URLSearchParams()
+
+      that.axios.get(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.$router.push({
+            path: '/'
+          })
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
     },
-    
-    user_info(){
-        var that = this ;
-        this.get_user_info(function(response){
-          if (response.data.error_code === 0 ) {
-            if (response.data.data.groupid == 1 ) {
-              that.isAdmin = true ;
-            };
-          }
-        });
 
+    user_info() {
+      var that = this
+      this.get_user_info(function(response) {
+        if (response.data.error_code === 0) {
+          if (response.data.data.groupid == 1) {
+            that.isAdmin = true
+          }
+        }
+      })
     },
-    dropdown_callback(data){
+    dropdown_callback(data) {
       if (data) {
-        data();
-      };
+        data()
+      }
     },
 
-
-    sort_item(data){
-      var that = this ;
-      var url = DocConfig.server+'/api/item/sort';
-      var params = new URLSearchParams();
-      params.append('data', JSON.stringify(data));
-      that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            that.get_item_list();
-            //window.location.reload();
-
-          }else{
-            that.$alert(response.data.error_message,'',{
-              callback:function(){
-                window.location.reload();
-              }
-            });
-            
-          }
-          
-        });
+    sort_item(data) {
+      var that = this
+      var url = DocConfig.server + '/api/item/sort'
+      var params = new URLSearchParams()
+      params.append('data', JSON.stringify(data))
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.get_item_list()
+          // window.location.reload();
+        } else {
+          that.$alert(response.data.error_message, '', {
+            callback: function() {
+              window.location.reload()
+            }
+          })
+        }
+      })
     },
-    exchangeArray( data ,  oldIndex , newIndex ){
-      let tmp = data[oldIndex];
-      data.splice(oldIndex,1);
-      data.splice(newIndex , 0, tmp);
-      return data;
+    exchangeArray(data, oldIndex, newIndex) {
+      let tmp = data[oldIndex]
+      data.splice(oldIndex, 1)
+      data.splice(newIndex, 0, tmp)
+      return data
     },
-    endMove(evt){
-      let data = {} ;
-      let list = this.exchangeArray( this.itemList , evt['oldIndex'] , evt['newIndex']  ) ;
-      this.itemList = [] ;
-      this.$nextTick(()=>{
-        this.itemList = list ;
-      });
+    endMove(evt) {
+      let data = {}
+      let list = this.exchangeArray(
+        this.itemList,
+        evt['oldIndex'],
+        evt['newIndex']
+      )
+      this.itemList = []
+      this.$nextTick(() => {
+        this.itemList = list
+      })
       for (var i = 0; i < list.length; i++) {
-        let key = list[i]['item_id'] ;
-        data[key] = i + 1  ;
-      };
-      this.sort_item(data);
+        let key = list[i]['item_id']
+        data[key] = i + 1
+      }
+      this.sort_item(data)
     },
-    script_cron(){
-      var url = DocConfig.server+'/api/ScriptCron/run';
-      this.axios.get(url);
+    script_cron() {
+      var url = DocConfig.server + '/api/ScriptCron/run'
+      this.axios.get(url)
     }
-
   },
-  mounted () {
-    this.get_item_list();
-    this.user_info();
-    this.lang = DocConfig.lang ;
-    this.script_cron();
+  mounted() {
+    this.get_item_list()
+    this.user_info()
+    this.lang = DocConfig.lang
+    this.script_cron()
   },
-  beforeDestroy(){
-    this.$message.closeAll();
+  beforeDestroy() {
+    this.$message.closeAll()
   }
 }
 </script>
diff --git a/web_src/src/components/item/Password.vue b/web_src/src/components/item/Password.vue
index 95a64b7a3..c05ce4a2a 100644
--- a/web_src/src/components/item/Password.vue
+++ b/web_src/src/components/item/Password.vue
@@ -1,112 +1,113 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card" onkeydown="if(event.keyCode==13)return false;" >
-            <el-form  status-icon  label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
-              <h2>{{$t('input_visit_password')}}</h2>
-
-              <el-form-item label="" >
-                <el-input type="password" auto-complete="off" v-model="password" :placeholder="$t('password')"></el-input>
-              </el-form-item>
-
-              <el-form-item label="" v-if="show_v_code">
-                <el-input type="text" auto-complete="off" v-model="v_code" :placeholder="$t('verification_code')"></el-input>
-                <img v-bind:src="v_code_img"  class="v_code_img" v-on:click="change_v_code_img" >
-
-              </el-form-item>
-
-               <el-form-item label="" >
-                <el-button type="primary" style="width:100%;" @click="onSubmit" >{{$t('submit')}}</el-button>
-              </el-form-item>
-
-              <el-form-item label="" >
-                  <router-link to="/user/login">{{$t('login')}}</router-link>
-                  &nbsp;&nbsp;&nbsp;
-
-              </el-form-item>
-            </el-form>
-          </el-card>
+      <el-card class="center-card" onkeydown="if(event.keyCode==13)return false;">
+        <el-form status-icon label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
+          <h2>{{$t('input_visit_password')}}</h2>
+
+          <el-form-item label>
+            <el-input
+              type="password"
+              auto-complete="off"
+              v-model="password"
+              :placeholder="$t('password')"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label v-if="show_v_code">
+            <el-input
+              type="text"
+              auto-complete="off"
+              v-model="v_code"
+              :placeholder="$t('verification_code')"
+            ></el-input>
+            <img v-bind:src="v_code_img" class="v_code_img" v-on:click="change_v_code_img" />
+          </el-form-item>
+
+          <el-form-item label>
+            <el-button type="primary" style="width:100%;" @click="onSubmit">{{$t('submit')}}</el-button>
+          </el-form-item>
+
+          <el-form-item label>
+            <router-link to="/user/login">{{$t('login')}}</router-link>
+&nbsp;&nbsp;&nbsp;
+          </el-form-item>
+        </el-form>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
       password: '',
       v_code: '',
-      v_code_img:DocConfig.server+'/api/common/verify',
-      show_v_code:false
+      v_code_img: DocConfig.server + '/api/common/verify',
+      show_v_code: false
     }
-
   },
   methods: {
-      onSubmit() {
-          var item_id = this.$route.params.item_id ? this.$route.params.item_id : 0;
-          var page_id = this.$route.query.page_id ? this.$route.query.page_id : 0  ;
-          var that = this ;
-          var url = DocConfig.server+'/api/item/pwd';
-
-          var params = new URLSearchParams();
-          params.append('item_id', item_id );
-          params.append('page_id', page_id );
-          params.append('password', this.password);
-          params.append('v_code', this.v_code);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                let redirect = decodeURIComponent(that.$route.query.redirect || ('/'+item_id));
-                that.$router.replace({
-                  path: redirect
-                });
-              }else{
-                if (response.data.error_code === 10206 || response.data.error_code === 10308) {
-                  that.show_v_code = true ;
-                  that.change_v_code_img() ;
-                };
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
-      change_v_code_img(){
-        var rand = '&rand='+Math.random();
-        this.v_code_img += rand ;
-      }
-  },
-  mounted() {
+    onSubmit() {
+      var item_id = this.$route.params.item_id ? this.$route.params.item_id : 0
+      var page_id = this.$route.query.page_id ? this.$route.query.page_id : 0
+      var that = this
+      var url = DocConfig.server + '/api/item/pwd'
+
+      var params = new URLSearchParams()
+      params.append('item_id', item_id)
+      params.append('page_id', page_id)
+      params.append('password', this.password)
+      params.append('v_code', this.v_code)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          let redirect = decodeURIComponent(
+            that.$route.query.redirect || '/' + item_id
+          )
+          that.$router.replace({
+            path: redirect
+          })
+        } else {
+          if (
+            response.data.error_code === 10206 ||
+            response.data.error_code === 10308
+          ) {
+            that.show_v_code = true
+            that.change_v_code_img()
+          }
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    change_v_code_img() {
+      var rand = '&rand=' + Math.random()
+      this.v_code_img += rand
+    }
   },
-  beforeDestroy(){
-  }
+  mounted() {},
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
 }
 
-.v_code_img{
+.v_code_img {
   margin-top: 20px;
 }
-
 </style>
diff --git a/web_src/src/components/item/add/Copy.vue b/web_src/src/components/item/add/Copy.vue
index 68aae0e5a..6d416f2f6 100644
--- a/web_src/src/components/item/add/Copy.vue
+++ b/web_src/src/components/item/add/Copy.vue
@@ -1,136 +1,129 @@
 <template>
   <div class="hello">
     <p class="tips">{{$t('copy_item_tips1')}}</p>
-    <el-form  status-icon  label-width="100px" class="infoForm" v-model="infoForm">
-        <el-form-item label="" class="text-left">
-           <el-select style="width:100%;" v-model="copy_item_id" :placeholder="$t('please_choose')"  @change="choose_copy_item">
-              <el-option
-                v-for="item in itemList"
-                :key="item.item_id"
-                :label="item.item_name"
-                :value="item.item_id">
-              </el-option>
-            </el-select>
-
-        </el-form-item>
+    <el-form status-icon label-width="100px" class="infoForm" v-model="infoForm">
+      <el-form-item label class="text-left">
+        <el-select
+          style="width:100%;"
+          v-model="copy_item_id"
+          :placeholder="$t('please_choose')"
+          @change="choose_copy_item"
+        >
+          <el-option
+            v-for="item in itemList"
+            :key="item.item_id"
+            :label="item.item_name"
+            :value="item.item_id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
 
-      <el-form-item  >
+      <el-form-item>
         <el-tooltip class="item" effect="dark" :content="$t('copy_item_tips2')" placement="right">
-          <el-input type="text" auto-complete="off" v-model="item_name" :placeholder="$t('copy_item_tips2')" ></el-input>
+          <el-input
+            type="text"
+            auto-complete="off"
+            v-model="item_name"
+            :placeholder="$t('copy_item_tips2')"
+          ></el-input>
         </el-tooltip>
       </el-form-item>
 
-       <el-form-item label="" >
-        <el-button type="primary" style="width:100%;" @click="FormSubmit" >{{$t('submit')}}</el-button>
+      <el-form-item label>
+        <el-button type="primary" style="width:100%;" @click="FormSubmit">{{$t('submit')}}</el-button>
       </el-form-item>
-
     </el-form>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      infoForm:{
-
-      },
-      isOpenItem:true,
-      itemList:{},
-      copy_item_id:"",
-      item_name:"",
-      item_description:"",
+      infoForm: {},
+      isOpenItem: true,
+      itemList: {},
+      copy_item_id: '',
+      item_name: '',
+      item_description: ''
     }
-
   },
   methods: {
-      get_item_list(){
-          var that = this ;
-          var url = DocConfig.server+'/api/item/myList';
-
-          var params = new URLSearchParams();
-
-          that.axios.get(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                //that.$message.success("加载成功");
-                var json = response.data.data ;
-                that.itemList = json ;
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
-      choose_copy_item(item_id){
-        for (var i = 0; i < this.itemList.length; i++) {
-          if (item_id == this.itemList[i].item_id) {
-              this.item_name = this.itemList[i].item_name+'--copy';
-              this.item_description = this.itemList[i].item_description;
-          };
-        };
-      },
-      FormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/item/add';
-          if (!this.isOpenItem && !this.infoForm.password) {
-            that.$alert(that.$t("private_item_passwrod"));
-            return false;
-          };
-          if (this.isOpenItem) {
-            this.infoForm.password = '';
-          };
-          var params = new URLSearchParams();
-          params.append('copy_item_id', this.copy_item_id);
-          params.append('item_name', this.item_name);
-          params.append('item_description', this.item_description);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.$router.push({path:'/item/index'});
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
+    get_item_list() {
+      var that = this
+      var url = DocConfig.server + '/api/item/myList'
+
+      var params = new URLSearchParams()
+
+      that.axios.get(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("加载成功");
+          var json = response.data.data
+          that.itemList = json
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    choose_copy_item(item_id) {
+      for (var i = 0; i < this.itemList.length; i++) {
+        if (item_id == this.itemList[i].item_id) {
+          this.item_name = this.itemList[i].item_name + '--copy'
+          this.item_description = this.itemList[i].item_description
+        }
+      }
+    },
+    FormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/item/add'
+      if (!this.isOpenItem && !this.infoForm.password) {
+        that.$alert(that.$t('private_item_passwrod'))
+        return false
+      }
+      if (this.isOpenItem) {
+        this.infoForm.password = ''
+      }
+      var params = new URLSearchParams()
+      params.append('copy_item_id', this.copy_item_id)
+      params.append('item_name', this.item_name)
+      params.append('item_description', this.item_description)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.$router.push({ path: '/item/index' })
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    }
   },
 
-  mounted(){
-    this.get_item_list();
+  mounted() {
+    this.get_item_list()
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-
-.infoForm{
-  width:400px;
+.infoForm {
+  width: 400px;
   margin-top: 50px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
 
-.tips{
+.tips {
   margin-left: 10px;
   color: #9ea1a6;
-
 }
-
 </style>
diff --git a/web_src/src/components/item/add/Import.vue b/web_src/src/components/item/add/Import.vue
index 464e7fc73..b5aed09b4 100644
--- a/web_src/src/components/item/add/Import.vue
+++ b/web_src/src/components/item/add/Import.vue
@@ -1,86 +1,76 @@
 <template>
   <div class="hello">
-      <p class="tips"><span v-html="$t('import_file_tips1')"></span></p>
-      
-      <p >
-        <el-upload
-          class="upload-demo"
-          drag
-          name="file"
-          :action="upload_url"
-          :on-success="success"
-          :before-upload="beforeUpload"
-          :show-file-list="false"
-          >
-          <i class="el-icon-upload"></i>
-          <div class="el-upload__text"><span v-html="$t('import_file_tips2')"></span></div>
-        </el-upload>
-      </p>
-      <p >
-      </p>
-      <p >
-       
-      </p>
+    <p class="tips">
+      <span v-html="$t('import_file_tips1')"></span>
+    </p>
+
+    <p>
+      <el-upload
+        class="upload-demo"
+        drag
+        name="file"
+        :action="upload_url"
+        :on-success="success"
+        :before-upload="beforeUpload"
+        :show-file-list="false"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          <span v-html="$t('import_file_tips2')"></span>
+        </div>
+      </el-upload>
+    </p>
+    <p></p>
+    <p></p>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      api_key:'',
-      api_token:'',
-      loading:'',
-      upload_url:DocConfig.server+'/api/import/auto'
+      api_key: '',
+      api_token: '',
+      loading: '',
+      upload_url: DocConfig.server + '/api/import/auto'
     }
-
   },
   methods: {
-
-      success(data){
-        this.loading.close();
-        if (data.error_code === 0 ) {
-          this.$router.push({path:'/item/index'});
-        }else{
-          this.$alert(data.error_message);
-        }
-      },
-      beforeUpload(){
-        this.loading = this.$loading();
+    success(data) {
+      this.loading.close()
+      if (data.error_code === 0) {
+        this.$router.push({ path: '/item/index' })
+      } else {
+        this.$alert(data.error_message)
       }
+    },
+    beforeUpload() {
+      this.loading = this.$loading()
+    }
   },
 
-  mounted(){
-
-  }
+  mounted() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.hello {
+  text-align: left;
+  margin-left: 50px;
+  margin-top: 50px;
+}
 
-
-  .hello{
-    text-align: left;
-    margin-left: 50px;
-    margin-top: 50px;
-  }
-
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
 
-.tips{
+.tips {
   margin-left: 10px;
   margin-bottom: 50px;
   color: #9ea1a6;
-
 }
 </style>
diff --git a/web_src/src/components/item/add/Index.vue b/web_src/src/components/item/add/Index.vue
index 80103ef7f..6a6d163ef 100644
--- a/web_src/src/components/item/add/Index.vue
+++ b/web_src/src/components/item/add/Index.vue
@@ -1,61 +1,44 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-          <template>
-            <el-button type="text" @click="goback" class="goback-btn " ><i class="el-icon-back" ></i></el-button>
-            
-            <el-tabs  value="first" type="card">
-              <el-tab-pane :label="$t('regular_item')" name="first">
-
-                <Regular> </Regular>
-
+      <el-card class="center-card">
+        <template>
+          <el-button type="text" @click="goback" class="goback-btn">
+            <i class="el-icon-back"></i>
+          </el-button>
+
+          <el-tabs value="first" type="card">
+            <el-tab-pane :label="$t('regular_item')" name="first">
+              <Regular></Regular>
             </el-tab-pane>
 
-
             <el-tab-pane :label="$t('single_item')" name="second">
-
-                <Single> </Single>
-
+              <Single></Single>
             </el-tab-pane>
 
             <el-tab-pane :label="$t('copy_item')" name="third">
-
-                <Copy> </Copy>
-
+              <Copy></Copy>
             </el-tab-pane>
 
             <el-tab-pane :label="$t('import_file')" name="four">
-
-                  <Import> </Import>
-                  
-                </el-form>
-
+              <Import></Import>
             </el-tab-pane>
 
             <el-tab-pane :label="$t('auto_item')" name="five">
-
-                  <OpenApi > </OpenApi >
-                  
-                </el-form>
-
+              <OpenApi></OpenApi>
             </el-tab-pane>
-
-
-            </el-tabs>
-          </template>
-          </el-card>
+          </el-tabs>
+        </template>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
 import Regular from '@/components/item/add/Regular'
 import Single from '@/components/item/add/Single'
 import Copy from '@/components/item/add/Copy'
@@ -64,71 +47,62 @@ import Import from '@/components/item/add/Import'
 
 export default {
   name: 'Login',
-  components : {
+  components: {
     Regular,
     Single,
     Copy,
     OpenApi,
     Import
   },
-  data () {
+  data() {
     return {
-      userInfo:{
-
-      }
+      userInfo: {}
     }
-
   },
   methods: {
-
-      get_item_info(){
-        var that = this ;
-        var url = DocConfig.server+'/api/item/detail';
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data
-              that.infoForm =  Info;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-      goback(){
-        this.$router.go(-1);
-      }
-
+    get_item_info() {
+      var that = this
+      var url = DocConfig.server + '/api/item/detail'
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var Info = response.data.data
+            that.infoForm = Info
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
   },
 
-  mounted(){
-  },
-  beforeDestroy(){
-  }
+  mounted() {},
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
   width: 560px;
   min-height: 600px;
   max-height: 800px;
 }
 
-
-.goback-btn{
+.goback-btn {
   font-size: 18px;
   margin-right: 800px;
   margin-bottom: 15px;
diff --git a/web_src/src/components/item/add/OpenApi.vue b/web_src/src/components/item/add/OpenApi.vue
index 791ec48b6..be6130770 100644
--- a/web_src/src/components/item/add/OpenApi.vue
+++ b/web_src/src/components/item/add/OpenApi.vue
@@ -1,58 +1,45 @@
 <template>
   <div class="hello">
-
-      <p >
-         <span v-html="$t('open_api_tips1')"></span>
-      </p>
-      <p >
-        <span v-html="$t('open_api_tips2')"></span>
-      </p>
-      <p >
-        <span v-html="$t('open_api_tips3')"></span>
-      </p>
-      <p >
-        <span v-html="$t('open_api_tips4')"></span>
-      </p>
+    <p>
+      <span v-html="$t('open_api_tips1')"></span>
+    </p>
+    <p>
+      <span v-html="$t('open_api_tips2')"></span>
+    </p>
+    <p>
+      <span v-html="$t('open_api_tips3')"></span>
+    </p>
+    <p>
+      <span v-html="$t('open_api_tips4')"></span>
+    </p>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      api_key:'',
-      api_token:''
+      api_key: '',
+      api_token: ''
     }
-
   },
-  methods: {
-
+  methods: {},
 
-  },
-
-  mounted(){
-
-  }
+  mounted() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.hello {
+  text-align: left;
+  margin-left: 50px;
+  margin-top: 80px;
+}
 
-
-  .hello{
-    text-align: left;
-    margin-left: 50px;
-    margin-top: 80px;
-  }
-
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
diff --git a/web_src/src/components/item/add/Regular.vue b/web_src/src/components/item/add/Regular.vue
index bd041062f..690dbb975 100644
--- a/web_src/src/components/item/add/Regular.vue
+++ b/web_src/src/components/item/add/Regular.vue
@@ -1,107 +1,108 @@
 <template>
   <div class="hello">
-    <el-form  status-icon  label-width="100px" class="infoForm" v-model="infoForm">
-      <el-form-item  >
+    <el-form status-icon label-width="100px" class="infoForm" v-model="infoForm">
+      <el-form-item>
         <el-tooltip class="item" effect="dark" :content="$t('item_name')" placement="right">
-          <el-input type="text" auto-complete="off" v-model="infoForm.item_name" :placeholder="$t('item_name')" ></el-input>
+          <el-input
+            type="text"
+            auto-complete="off"
+            v-model="infoForm.item_name"
+            :placeholder="$t('item_name')"
+          ></el-input>
         </el-tooltip>
       </el-form-item>
 
-      <el-form-item  >
+      <el-form-item>
         <el-tooltip class="item" effect="dark" :content="$t('item_description')" placement="right">
-          <el-input type="text" auto-complete="off" v-model="infoForm.item_description" :placeholder="$t('item_description')" ></el-input>
+          <el-input
+            type="text"
+            auto-complete="off"
+            v-model="infoForm.item_description"
+            :placeholder="$t('item_description')"
+          ></el-input>
         </el-tooltip>
       </el-form-item>
 
-      <el-form-item label="" >
+      <el-form-item label>
         <el-radio v-model="isOpenItem" :label="true">{{$t('Open_item')}}</el-radio>
         <el-radio v-model="isOpenItem" :label="false">{{$t('private_item')}}</el-radio>
       </el-form-item>
 
-      <el-form-item  v-show="!isOpenItem">
-            <el-input type="password" auto-complete="off"  v-model="infoForm.password" :placeholder="$t('visit_password')" ></el-input>
+      <el-form-item v-show="!isOpenItem">
+        <el-input
+          type="password"
+          auto-complete="off"
+          v-model="infoForm.password"
+          :placeholder="$t('visit_password')"
+        ></el-input>
       </el-form-item>
 
-       <el-form-item label="" >
-        <el-button type="primary" style="width:100%;" @click="FormSubmit" >{{$t('submit')}}</el-button>
+      <el-form-item label>
+        <el-button type="primary" style="width:100%;" @click="FormSubmit">{{$t('submit')}}</el-button>
       </el-form-item>
-
     </el-form>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      infoForm:{
-        item_name:'',
-        item_description:'',
-        item_domain:'',
-        password:'',
+      infoForm: {
+        item_name: '',
+        item_description: '',
+        item_domain: '',
+        password: ''
       },
-      isOpenItem:true,
+      isOpenItem: true
     }
-
   },
   methods: {
-
-      FormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/item/add';
-          if (!this.isOpenItem && !this.infoForm.password) {
-            that.$alert(that.$t("private_item_passwrod"));
-            return false;
-          };
-          if (this.isOpenItem) {
-            this.infoForm.password = '';
-          };
-          var params = new URLSearchParams();
-          params.append('item_type', 1);
-          params.append('item_name', this.infoForm.item_name);
-          params.append('item_description', this.infoForm.item_description);
-          params.append('item_domain', this.infoForm.item_domain);
-          params.append('password', this.infoForm.password);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.$router.push({path:'/item/index'});
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
+    FormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/item/add'
+      if (!this.isOpenItem && !this.infoForm.password) {
+        that.$alert(that.$t('private_item_passwrod'))
+        return false
+      }
+      if (this.isOpenItem) {
+        this.infoForm.password = ''
+      }
+      var params = new URLSearchParams()
+      params.append('item_type', 1)
+      params.append('item_name', this.infoForm.item_name)
+      params.append('item_description', this.infoForm.item_description)
+      params.append('item_domain', this.infoForm.item_domain)
+      params.append('password', this.infoForm.password)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.$router.push({ path: '/item/index' })
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    }
   },
 
-  mounted(){
-
-
-  }
+  mounted() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-
-.infoForm{
-  width:400px;
+.infoForm {
+  width: 400px;
   margin-top: 60px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
diff --git a/web_src/src/components/item/add/Single.vue b/web_src/src/components/item/add/Single.vue
index 071f04182..81962f3c7 100644
--- a/web_src/src/components/item/add/Single.vue
+++ b/web_src/src/components/item/add/Single.vue
@@ -1,115 +1,115 @@
 <template>
   <div class="hello">
     <p class="tips">{{$t('single_item_tips')}}</p>
-    <el-form  status-icon  label-width="100px" class="infoForm" v-model="infoForm">
-      <el-form-item  >
+    <el-form status-icon label-width="100px" class="infoForm" v-model="infoForm">
+      <el-form-item>
         <el-tooltip class="item" effect="dark" :content="$t('item_name')" placement="right">
-          <el-input type="text" auto-complete="off" v-model="infoForm.item_name" :placeholder="$t('item_name')" ></el-input>
+          <el-input
+            type="text"
+            auto-complete="off"
+            v-model="infoForm.item_name"
+            :placeholder="$t('item_name')"
+          ></el-input>
         </el-tooltip>
       </el-form-item>
 
-      <el-form-item  >
+      <el-form-item>
         <el-tooltip class="item" effect="dark" :content="$t('item_description')" placement="right">
-          <el-input type="text" auto-complete="off" v-model="infoForm.item_description" :placeholder="$t('item_description')" ></el-input>
+          <el-input
+            type="text"
+            auto-complete="off"
+            v-model="infoForm.item_description"
+            :placeholder="$t('item_description')"
+          ></el-input>
         </el-tooltip>
       </el-form-item>
 
-
-      <el-form-item label="" >
+      <el-form-item label>
         <el-radio v-model="isOpenItem" :label="true">{{$t('Open_item')}}</el-radio>
         <el-radio v-model="isOpenItem" :label="false">{{$t('private_item')}}</el-radio>
       </el-form-item>
 
-      <el-form-item  v-show="!isOpenItem">
-            <el-input type="password" auto-complete="off"  v-model="infoForm.password" :placeholder="$t('visit_password')" ></el-input>
+      <el-form-item v-show="!isOpenItem">
+        <el-input
+          type="password"
+          auto-complete="off"
+          v-model="infoForm.password"
+          :placeholder="$t('visit_password')"
+        ></el-input>
       </el-form-item>
 
-       <el-form-item label="" >
-        <el-button type="primary" style="width:100%;" @click="FormSubmit" >{{$t('submit')}}</el-button>
+      <el-form-item label>
+        <el-button type="primary" style="width:100%;" @click="FormSubmit">{{$t('submit')}}</el-button>
       </el-form-item>
-
     </el-form>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      infoForm:{
-        item_name:'',
-        item_description:'',
-        item_domain:'',
-        password:'',
+      infoForm: {
+        item_name: '',
+        item_description: '',
+        item_domain: '',
+        password: ''
       },
-      isOpenItem:true,
+      isOpenItem: true
     }
-
   },
   methods: {
-
-      FormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/item/add';
-          if (!this.isOpenItem && !this.infoForm.password) {
-            that.$alert(that.$t("private_item_passwrod"));
-            return false;
-          };
-          if (this.isOpenItem) {
-            this.infoForm.password = '';
-          };
-          var params = new URLSearchParams();
-          params.append('item_type', 2);
-          params.append('item_name', this.infoForm.item_name);
-          params.append('item_description', this.infoForm.item_description);
-          params.append('item_domain', this.infoForm.item_domain);
-          params.append('password', this.infoForm.password);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.$router.push({path:'/item/index'});
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
+    FormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/item/add'
+      if (!this.isOpenItem && !this.infoForm.password) {
+        that.$alert(that.$t('private_item_passwrod'))
+        return false
+      }
+      if (this.isOpenItem) {
+        this.infoForm.password = ''
+      }
+      var params = new URLSearchParams()
+      params.append('item_type', 2)
+      params.append('item_name', this.infoForm.item_name)
+      params.append('item_description', this.infoForm.item_description)
+      params.append('item_domain', this.infoForm.item_domain)
+      params.append('password', this.infoForm.password)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.$router.push({ path: '/item/index' })
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    }
   },
 
-  mounted(){
-
-  }
+  mounted() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-
-.infoForm{
-  width:400px;
+.infoForm {
+  width: 400px;
   margin-top: 20px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
 
-.tips{
+.tips {
   margin-left: 10px;
   color: #9ea1a6;
-
 }
 </style>
diff --git a/web_src/src/components/item/export/Index.vue b/web_src/src/components/item/export/Index.vue
index 5581ec912..200e823cd 100644
--- a/web_src/src/components/item/export/Index.vue
+++ b/web_src/src/components/item/export/Index.vue
@@ -1,169 +1,171 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-            <el-form  status-icon  label-width="0px" class="demo-ruleForm">
-              <h2></h2>
-              <el-form-item label="" >
-
-                <el-radio-group v-model="export_format">
-                  <el-radio-button   label="word" >{{$t('export_format_word')}}</el-radio-button>
-                  <el-radio-button  label="markdown">{{$t('export_format_markdown')}}</el-radio-button>
-                </el-radio-group>
-
-              </el-form-item>
-
-              <el-form-item label="" v-if="export_format == 'word'" >
-                <el-radio v-model="export_type"  label="1">{{$t('export_all')}}</el-radio>
-                <el-radio v-model="export_type" label="2">{{$t('export_cat')}}</el-radio>
-              </el-form-item>
-
-              <el-form-item label="" v-if="export_format == 'markdown'" >
-                <p class="markdown-tips">{{$t('export_markdown_tips')}}</p>
-              </el-form-item>
-
-              <el-form-item label="" v-if="export_format == 'word' && export_type == 2" >
-                  <el-select  :placeholder="$t('catalog')" class="cat" v-model="cat_id" >
-                    <el-option  v-if="computed_catalogs" v-for="cat in computed_catalogs " :key="cat.cat_name" :label="cat.cat_name" :value="cat.cat_id"></el-option>
-                  </el-select>
-              </el-form-item>
-
-
-
-               <el-form-item label="" >
-                <el-button type="primary" style="width:100%;" @click="onSubmit" >{{$t('begin_export')}}</el-button>
-              </el-form-item>
-
-              <el-form-item label=""  >
-                  <el-button type="text" @click="goback" class="goback-btn " >{{$t('goback')}}</el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
+      <el-card class="center-card">
+        <el-form status-icon label-width="0px" class="demo-ruleForm">
+          <h2></h2>
+          <el-form-item label>
+            <el-radio-group v-model="export_format">
+              <el-radio-button label="word">{{$t('export_format_word')}}</el-radio-button>
+              <el-radio-button label="markdown">{{$t('export_format_markdown')}}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label v-if="export_format == 'word'">
+            <el-radio v-model="export_type" label="1">{{$t('export_all')}}</el-radio>
+            <el-radio v-model="export_type" label="2">{{$t('export_cat')}}</el-radio>
+          </el-form-item>
+
+          <el-form-item label v-if="export_format == 'markdown'">
+            <p class="markdown-tips">{{$t('export_markdown_tips')}}</p>
+          </el-form-item>
+
+          <el-form-item label v-if="export_format == 'word' && export_type == 2">
+            <el-select
+              :placeholder="$t('catalog')"
+              class="cat"
+              v-model="cat_id"
+              v-if="computed_catalogs"
+            >
+              <el-option
+                v-for="cat in computed_catalogs "
+                :key="cat.cat_name"
+                :label="cat.cat_name"
+                :value="cat.cat_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-button type="primary" style="width:100%;" @click="onSubmit">{{$t('begin_export')}}</el-button>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-button type="text" @click="goback" class="goback-btn">{{$t('goback')}}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      catalogs:[],
-      cat_id:'',
-      export_type:'1',
-      item_id:0,
-      export_format:'word'
-
+      catalogs: [],
+      cat_id: '',
+      export_type: '1',
+      item_id: 0,
+      export_format: 'word'
     }
-
   },
   computed: {
-
-    //新建/编辑页面时供用户选择的归属目录列表
-    computed_catalogs:function(){
-        var Info = this.catalogs.slice(0);
-        var cat_array = [] ;
-        for (var i = 0; i < Info.length; i++) {
-          cat_array.push(Info[i]);
-          var sub = Info[i]['sub'] ;
-          if (sub.length > 0 ) {
-            for (var j = 0; j < sub.length; j++) {
-              cat_array.push( {
-                "cat_id":sub[j]['cat_id'] ,
-                "cat_name":Info[i]['cat_name']+' / ' + sub[j]['cat_name']
-              });
-
-              var sub_sub = sub[j]['sub'] ;
-              if (sub_sub.length > 0 ) {
-                for (var k = 0; k < sub_sub.length; k++) {
-                  cat_array.push( {
-                    "cat_id":sub_sub[k]['cat_id'] ,
-                    "cat_name":Info[i]['cat_name']+' / ' + sub[j]['cat_name']+' / ' + sub_sub[k]['cat_name']
-                  });
-                };
-              };
-
-            };
-          };
-        };
-        var no_cat = {"cat_id":'' ,"cat_name":this.$t("none")} ;
-        cat_array.unshift(no_cat);
-        return cat_array;
-
+    // 新建/编辑页面时供用户选择的归属目录列表
+    computed_catalogs: function() {
+      var Info = this.catalogs.slice(0)
+      var cat_array = []
+      for (var i = 0; i < Info.length; i++) {
+        cat_array.push(Info[i])
+        var sub = Info[i]['sub']
+        if (sub.length > 0) {
+          for (var j = 0; j < sub.length; j++) {
+            cat_array.push({
+              cat_id: sub[j]['cat_id'],
+              cat_name: Info[i]['cat_name'] + ' / ' + sub[j]['cat_name']
+            })
+
+            var sub_sub = sub[j]['sub']
+            if (sub_sub.length > 0) {
+              for (var k = 0; k < sub_sub.length; k++) {
+                cat_array.push({
+                  cat_id: sub_sub[k]['cat_id'],
+                  cat_name:
+                    Info[i]['cat_name'] +
+                    ' / ' +
+                    sub[j]['cat_name'] +
+                    ' / ' +
+                    sub_sub[k]['cat_name']
+                })
+              }
+            }
+          }
+        }
+      }
+      var no_cat = { cat_id: '', cat_name: this.$t('none') }
+      cat_array.unshift(no_cat)
+      return cat_array
     }
   },
   methods: {
-    //获取所有目录
-    get_catalog(item_id){
-      var that = this ;
-      var url = DocConfig.server+'/api/catalog/catListGroup';
-      var params = new URLSearchParams();
-      params.append('item_id',  item_id);
-      that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            var Info = response.data.data ;
-
-            that.catalogs =  Info;
-          }else{
-            that.$alert(response.data.error_message);
+    // 获取所有目录
+    get_catalog(item_id) {
+      var that = this
+      var url = DocConfig.server + '/api/catalog/catListGroup'
+      var params = new URLSearchParams()
+      params.append('item_id', item_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var Info = response.data.data
+
+            that.catalogs = Info
+          } else {
+            that.$alert(response.data.error_message)
           }
-          
         })
-        .catch(function (error) {
-          console.log(error);
-        });
+        .catch(function(error) {
+          console.log(error)
+        })
     },
     onSubmit() {
-        if (this.export_type ==1 ) {
-          this.cat_id = ''
-        };
-        var url = DocConfig.server+'/api/export/word&item_id='+this.item_id+'&cat_id='+this.cat_id ;
-        if (this.export_format == 'markdown') {
-          url = DocConfig.server+'/api/export/markdown&item_id='+this.item_id;
-        };
-        window.location.href = url;
-      },
-    goback(){
-      this.$router.go(-1);
+      if (this.export_type == 1) {
+        this.cat_id = ''
+      }
+      var url =
+        DocConfig.server +
+        '/api/export/word&item_id=' +
+        this.item_id +
+        '&cat_id=' +
+        this.cat_id
+      if (this.export_format == 'markdown') {
+        url = DocConfig.server + '/api/export/markdown&item_id=' + this.item_id
+      }
+      window.location.href = url
+    },
+    goback() {
+      this.$router.go(-1)
     }
-
   },
   mounted() {
-    this.get_catalog(this.$route.params.item_id);
-    this.item_id = this.$route.params.item_id ;
+    this.get_catalog(this.$route.params.item_id)
+    this.item_id = this.$route.params.item_id
   },
-  beforeDestroy(){
-  }
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
   width: 400px;
 }
 
-.markdown-tips{
+.markdown-tips {
   text-align: left;
   margin-left: 25px;
   font-size: 12px;
 }
-
 </style>
diff --git a/web_src/src/components/item/setting/Advanced.vue b/web_src/src/components/item/setting/Advanced.vue
index 80388a8ea..04c9c49dd 100644
--- a/web_src/src/components/item/setting/Advanced.vue
+++ b/web_src/src/components/item/setting/Advanced.vue
@@ -3,196 +3,207 @@
     <p style="height:40px;"></p>
     <p>
       <el-tooltip :content="$t('attorn_tips')" placement="top-start">
-        <el-button class="a_button"  @click="dialogAttornVisible = true" >{{$t('attorn')}}</el-button>
-      </el-tooltip>   
+        <el-button class="a_button" @click="dialogAttornVisible = true">{{$t('attorn')}}</el-button>
+      </el-tooltip>
     </p>
     <p>
       <el-tooltip :content="$t('archive_tips')" placement="top-start">
-        <el-button class="a_button"  @click="dialogArchiveVisible = true" >{{$t('archive')}}</el-button>
-      </el-tooltip>   
+        <el-button class="a_button" @click="dialogArchiveVisible = true">{{$t('archive')}}</el-button>
+      </el-tooltip>
     </p>
 
     <p>
       <el-tooltip :content="$t('delete_tips')" placement="top-start">
-        <el-button class="a_button"  @click="dialogDeleteVisible = true" >{{$t('delete')}}</el-button>
-      </el-tooltip>   
-    </p>  
-
-    <el-dialog :visible.sync="dialogAttornVisible" :modal="false"  width="300px" :close-on-click-modal="false">
-      <el-form >
-          <el-form-item label="" >
-            <el-input  :placeholder="$t('attorn_username')" v-model="attornForm.username"></el-input>
-          </el-form-item>
-          <el-form-item label="" >
-            <el-input type="password" :placeholder="$t('input_login_password')"  v-model="attornForm.password" ></el-input>
-          </el-form-item>
+        <el-button class="a_button" @click="dialogDeleteVisible = true">{{$t('delete')}}</el-button>
+      </el-tooltip>
+    </p>
+
+    <el-dialog
+      :visible.sync="dialogAttornVisible"
+      :modal="false"
+      width="300px"
+      :close-on-click-modal="false"
+    >
+      <el-form>
+        <el-form-item label>
+          <el-input :placeholder="$t('attorn_username')" v-model="attornForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label>
+          <el-input
+            type="password"
+            :placeholder="$t('input_login_password')"
+            v-model="attornForm.password"
+          ></el-input>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogAttornVisible = false">{{$t('cancel')}}</el-button>
-        <el-button type="primary" @click="attorn" >{{$t('attorn')}}</el-button>
+        <el-button type="primary" @click="attorn">{{$t('attorn')}}</el-button>
       </div>
     </el-dialog>
 
-    <el-dialog :visible.sync="dialogArchiveVisible" :modal="false"  width="300px" :close-on-click-modal="false">
-      <el-form >
-          <el-form-item label="" >
-            <el-input type="password" :placeholder="$t('input_login_password')" v-model="archiveForm.password"></el-input>
-          </el-form-item>
+    <el-dialog
+      :visible.sync="dialogArchiveVisible"
+      :modal="false"
+      width="300px"
+      :close-on-click-modal="false"
+    >
+      <el-form>
+        <el-form-item label>
+          <el-input
+            type="password"
+            :placeholder="$t('input_login_password')"
+            v-model="archiveForm.password"
+          ></el-input>
+        </el-form-item>
       </el-form>
 
-      <p class="tips">
-        {{$t('archive_tips2')}}
-
-      </p>
+      <p class="tips">{{$t('archive_tips2')}}</p>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogArchiveVisible = false">{{$t('cancel')}}</el-button>
-        <el-button type="primary" @click="archive" >{{$t('archive')}}</el-button>
+        <el-button type="primary" @click="archive">{{$t('archive')}}</el-button>
       </div>
     </el-dialog>
 
-    <el-dialog :visible.sync="dialogDeleteVisible" :modal="false"  width="300px" :close-on-click-modal="false">
-      <el-form >
-          <el-form-item label="" >
-            <el-input type="password" :placeholder="$t('input_login_password')"  v-model="deleteForm.password">></el-input>
-          </el-form-item>
+    <el-dialog
+      :visible.sync="dialogDeleteVisible"
+      :modal="false"
+      width="300px"
+      :close-on-click-modal="false"
+    >
+      <el-form>
+        <el-form-item label>
+          <el-input
+            type="password"
+            :placeholder="$t('input_login_password')"
+            v-model="deleteForm.password"
+          >></el-input>
+        </el-form-item>
       </el-form>
 
       <p class="tips">
-        <el-tag type="danger">{{$t('delete_tips')}}</el-tag>  
-          </p>
+        <el-tag type="danger">{{$t('delete_tips')}}</el-tag>
+      </p>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogDeleteVisible = false">{{$t('cancel')}}</el-button>
-        <el-button type="primary" @click="deleteItem" >{{$t('delete')}}</el-button>
+        <el-button type="primary" @click="deleteItem">{{$t('delete')}}</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      dialogAttornVisible:false,
-      dialogArchiveVisible:false,
-      dialogDeleteVisible:false,
-      attornForm:{
-        username:'',
-        password:''
+      dialogAttornVisible: false,
+      dialogArchiveVisible: false,
+      dialogDeleteVisible: false,
+      attornForm: {
+        username: '',
+        password: ''
       },
-      archiveForm:{
-        password:''
+      archiveForm: {
+        password: ''
       },
-      deleteForm:{
-        password:''
+      deleteForm: {
+        password: ''
       }
     }
-
   },
   methods: {
-
-      deleteItem(){
-        var that = this ;
-        var url = DocConfig.server+'/api/item/delete';
-
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        params.append('password',this.deleteForm.password );
-
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              that.dialogDeleteVisible = false;
-              that.$message.success(that.$t("success_jump"));
-              setTimeout(function(){
-                that.$router.push({path:'/item/index'});
-              },2000);
-                
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-      archive() {
-        var that = this ;
-        var url = DocConfig.server+'/api/item/archive';
-
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        params.append('password',this.archiveForm.password );
-
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              that.dialogArchiveVisible = false;
-                that.$message.success(that.$t("success_jump"));
-                setTimeout(function(){
-                  that.$router.push({path:'/item/index'});
-                },2000);
-                
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-
-      attorn(){
-        var that = this ;
-        var url = DocConfig.server+'/api/item/attorn';
-
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        params.append('username', this.attornForm.username);
-        params.append('password',this.attornForm.password );
-
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              that.dialogAttornVisible = false;
-                that.$message.success(that.$t("success_jump"));
-                setTimeout(function(){
-                  that.$router.push({path:'/item/index'});
-                },2000);
-                
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      }
+    deleteItem() {
+      var that = this
+      var url = DocConfig.server + '/api/item/delete'
+
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      params.append('password', this.deleteForm.password)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.dialogDeleteVisible = false
+            that.$message.success(that.$t('success_jump'))
+            setTimeout(function() {
+              that.$router.push({ path: '/item/index' })
+            }, 2000)
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    archive() {
+      var that = this
+      var url = DocConfig.server + '/api/item/archive'
+
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      params.append('password', this.archiveForm.password)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.dialogArchiveVisible = false
+            that.$message.success(that.$t('success_jump'))
+            setTimeout(function() {
+              that.$router.push({ path: '/item/index' })
+            }, 2000)
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+
+    attorn() {
+      var that = this
+      var url = DocConfig.server + '/api/item/attorn'
+
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      params.append('username', this.attornForm.username)
+      params.append('password', this.attornForm.password)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.dialogAttornVisible = false
+            that.$message.success(that.$t('success_jump'))
+            setTimeout(function() {
+              that.$router.push({ path: '/item/index' })
+            }, 2000)
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    }
   },
 
-  mounted(){
-   
-  }
+  mounted() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.a_button{
+.a_button {
   width: 30%;
 }
 
-.a_button:first-child{
+.a_button:first-child {
   margin-top: 30px;
 }
 </style>
diff --git a/web_src/src/components/item/setting/Index.vue b/web_src/src/components/item/setting/Index.vue
index 7a6750fb6..f2efb2111 100644
--- a/web_src/src/components/item/setting/Index.vue
+++ b/web_src/src/components/item/setting/Index.vue
@@ -1,60 +1,43 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-          <template>
-            <el-button type="text" @click="goback" class="goback-btn " ><i class="el-icon-back" ></i></el-button>
-            <el-tabs  value="first" type="card">
-              <el-tab-pane :label="$t('base_info')" name="first">
-
-                <Info> </Info>
-
+      <el-card class="center-card">
+        <template>
+          <el-button type="text" @click="goback" class="goback-btn">
+            <i class="el-icon-back"></i>
+          </el-button>
+          <el-tabs value="first" type="card">
+            <el-tab-pane :label="$t('base_info')" name="first">
+              <Info></Info>
             </el-tab-pane>
 
-
             <el-tab-pane :label="$t('member_manage')" name="second">
-
-                <Member> </Member>
-
+              <Member></Member>
             </el-tab-pane>
 
             <el-tab-pane :label="$t('advance_setting')" name="third">
-
-                <Advanced> </Advanced>
-
+              <Advanced></Advanced>
             </el-tab-pane>
 
             <el-tab-pane :label="$t('open_api')" name="four">
-
-                  <OpenApi> </OpenApi>
-                  
-                </el-form>
-
+              <OpenApi></OpenApi>
             </el-tab-pane>
 
             <el-tab-pane :label="$t('recycle')" name="five">
-
-                  <Recycle > </Recycle >
-                  
-                </el-form>
-
+              <Recycle></Recycle>
             </el-tab-pane>
-
-
-            </el-tabs>
-          </template>
-          </el-card>
+          </el-tabs>
+        </template>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
 import Info from '@/components/item/setting/Info'
 import Member from '@/components/item/setting/Member'
 import Advanced from '@/components/item/setting/Advanced'
@@ -63,76 +46,68 @@ import Recycle from '@/components/item/setting/Recycle'
 
 export default {
   name: 'Login',
-  components : {
+  components: {
     Info,
     Member,
     Advanced,
     OpenApi,
     Recycle
   },
-  data () {
+  data() {
     return {
-      userInfo:{
-
-      }
+      userInfo: {}
     }
-
   },
   methods: {
-
-      get_item_info(){
-        var that = this ;
-        var url = DocConfig.server+'/api/item/detail';
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data
-              that.infoForm =  Info;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-      goback(){
-        this.$router.go(-1);
-      }
-
+    get_item_info() {
+      var that = this
+      var url = DocConfig.server + '/api/item/detail'
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var Info = response.data.data
+            that.infoForm = Info
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    goback() {
+      this.$router.go(-1)
+    }
   },
 
-  mounted(){
-  },
-  beforeDestroy(){
-  }
+  mounted() {},
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
   width: 555px;
   min-height: 600px;
   max-height: 800px;
 }
 
-.infoForm{
-  width:350px;
+.infoForm {
+  width: 350px;
   margin-left: 60px;
   margin-top: 30px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   font-size: 18px;
   margin-right: 800px;
diff --git a/web_src/src/components/item/setting/Info.vue b/web_src/src/components/item/setting/Info.vue
index 39bf3e05e..51ad4b977 100644
--- a/web_src/src/components/item/setting/Info.vue
+++ b/web_src/src/components/item/setting/Info.vue
@@ -1,130 +1,130 @@
 <template>
   <div class="hello">
-    <el-form  status-icon  label-width="100px" class="infoForm" v-model="infoForm">
-      <el-form-item >
-        <el-input type="text" auto-complete="off" v-model="infoForm.item_name" placeholder="" ></el-input>
+    <el-form status-icon label-width="100px" class="infoForm" v-model="infoForm">
+      <el-form-item>
+        <el-input type="text" auto-complete="off" v-model="infoForm.item_name" placeholder></el-input>
       </el-form-item>
 
-      <el-form-item  >
-        <el-input type="text" auto-complete="off" v-model="infoForm.item_description":placeholder="$t('item_description')"></el-input>
+      <el-form-item>
+        <el-input
+          type="text"
+          auto-complete="off"
+          v-model="infoForm.item_description"
+          :placeholder="$t('item_description')"
+        ></el-input>
       </el-form-item>
 
-      <el-form-item label="" >
+      <el-form-item label>
         <el-radio v-model="isOpenItem" :label="true">{{$t('Open_item')}}</el-radio>
         <el-radio v-model="isOpenItem" :label="false">{{$t('private_item')}}</el-radio>
       </el-form-item>
 
-      <el-form-item  v-show="!isOpenItem">
-            <el-input type="password" auto-complete="off"  v-model="infoForm.password" :placeholder="$t('visit_password')"></el-input>
+      <el-form-item v-show="!isOpenItem">
+        <el-input
+          type="password"
+          auto-complete="off"
+          v-model="infoForm.password"
+          :placeholder="$t('visit_password')"
+        ></el-input>
       </el-form-item>
 
-       <el-form-item label="" >
-        <el-button type="primary" style="width:100%;" @click="FormSubmit" >{{$t('submit')}}</el-button>
+      <el-form-item label>
+        <el-button type="primary" style="width:100%;" @click="FormSubmit">{{$t('submit')}}</el-button>
       </el-form-item>
-
     </el-form>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      infoForm:{
-
-      },
-      isOpenItem:true,
+      infoForm: {},
+      isOpenItem: true
     }
-
   },
   methods: {
-
-      get_item_info(){
-        var that = this ;
-        var url = DocConfig.server+'/api/item/detail';
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data
-              if (Info.password) {
-                that.isOpenItem = false;
-              };
-              that.infoForm =  Info;
-            }else{
-              that.$alert(response.data.error_message);
+    get_item_info() {
+      var that = this
+      var url = DocConfig.server + '/api/item/detail'
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var Info = response.data.data
+            if (Info.password) {
+              that.isOpenItem = false
             }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-      FormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/item/update';
-          if (!this.isOpenItem && !this.infoForm.password) {
-            that.$alert(that.$t("private_item_passwrod"));
-            return false;
-          };
-          if (this.isOpenItem) {
-            this.infoForm.password = '';
-          };
-          var params = new URLSearchParams();
-          params.append('item_id',  that.$route.params.item_id);
-          params.append('item_name', this.infoForm.item_name);
-          params.append('item_description', this.infoForm.item_description);
-          params.append('item_domain', this.infoForm.item_domain);
-          params.append('password', this.infoForm.password);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.$message.success(that.$t("modify_success"));
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            })
-            .catch(function (error) {
-              console.log(error);
-            });
-      },
+            that.infoForm = Info
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    FormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/item/update'
+      if (!this.isOpenItem && !this.infoForm.password) {
+        that.$alert(that.$t('private_item_passwrod'))
+        return false
+      }
+      if (this.isOpenItem) {
+        this.infoForm.password = ''
+      }
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      params.append('item_name', this.infoForm.item_name)
+      params.append('item_description', this.infoForm.item_description)
+      params.append('item_domain', this.infoForm.item_domain)
+      params.append('password', this.infoForm.password)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.$message.success(that.$t('modify_success'))
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    }
   },
 
-  mounted(){
-    this.get_item_info();
+  mounted() {
+    this.get_item_info()
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
   width: 600px;
   height: 500px;
 }
 
-.infoForm{
-  width:350px;
+.infoForm {
+  width: 350px;
   margin-left: 20px;
   margin-top: 60px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
diff --git a/web_src/src/components/item/setting/OpenApi.vue b/web_src/src/components/item/setting/OpenApi.vue
index c4d7c131c..0d3f863ed 100644
--- a/web_src/src/components/item/setting/OpenApi.vue
+++ b/web_src/src/components/item/setting/OpenApi.vue
@@ -1,119 +1,109 @@
 <template>
   <div class="hello">
-    <el-form  status-icon  label-width="100px" class="infoForm" >
-      <el-form-item label="api_key：" >
-        <el-input type="text" auto-complete="off" :readonly="true" v-model="api_key" placeholder="" ></el-input>
+    <el-form status-icon label-width="100px" class="infoForm">
+      <el-form-item label="api_key：">
+        <el-input type="text" auto-complete="off" :readonly="true" v-model="api_key" placeholder></el-input>
       </el-form-item>
 
-      <el-form-item label="api_token" >
-        <el-input type="text" auto-complete="off" :readonly="true" v-model="api_token" placeholder="" ></el-input>
+      <el-form-item label="api_token">
+        <el-input type="text" auto-complete="off" :readonly="true" v-model="api_token" placeholder></el-input>
       </el-form-item>
 
-        <el-button type="primary" style="width:100%;" @click="resetKey" >{{$t('reset_token')}}</el-button>
-
-
+      <el-button type="primary" style="width:100%;" @click="resetKey">{{$t('reset_token')}}</el-button>
     </el-form>
 
-      <p >
-         <span v-html="$t('open_api_tips1')"></span>
-      </p>
-      <p >
-        <span v-html="$t('open_api_tips2')"></span>
-      </p>
-      <p >
-        <span v-html="$t('open_api_tips3')"></span>
-      </p>
-      <p >
-        <span v-html="$t('open_api_tips4')"></span>
-      </p>
+    <p>
+      <span v-html="$t('open_api_tips1')"></span>
+    </p>
+    <p>
+      <span v-html="$t('open_api_tips2')"></span>
+    </p>
+    <p>
+      <span v-html="$t('open_api_tips3')"></span>
+    </p>
+    <p>
+      <span v-html="$t('open_api_tips4')"></span>
+    </p>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      api_key:'',
-      api_token:''
+      api_key: '',
+      api_token: ''
     }
-
   },
   methods: {
-
-      get_key_info(){
-        var that = this ;
-        var url = DocConfig.server+'/api/item/getKey';
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data
-              that.api_key =  Info.api_key;
-              that.api_token =  Info.api_token;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-      resetKey() {
-          var that = this ;
-          var url = DocConfig.server+'/api/item/resetKey';
-
-          var params = new URLSearchParams();
-          params.append('item_id',  that.$route.params.item_id);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.get_key_info();
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            })
-            .catch(function (error) {
-              console.log(error);
-            });
-      },
+    get_key_info() {
+      var that = this
+      var url = DocConfig.server + '/api/item/getKey'
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var Info = response.data.data
+            that.api_key = Info.api_key
+            that.api_token = Info.api_token
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    resetKey() {
+      var that = this
+      var url = DocConfig.server + '/api/item/resetKey'
+
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.get_key_info()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    }
   },
 
-  mounted(){
-    this.get_key_info();
+  mounted() {
+    this.get_key_info()
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: left;
   width: 600px;
   height: 500px;
 }
 
-.infoForm{
-  width:470px;
+.infoForm {
+  width: 470px;
   margin-top: 30px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
diff --git a/web_src/src/components/item/setting/Recycle.vue b/web_src/src/components/item/setting/Recycle.vue
index 5277c1f8b..6cb41e63d 100644
--- a/web_src/src/components/item/setting/Recycle.vue
+++ b/web_src/src/components/item/setting/Recycle.vue
@@ -2,127 +2,97 @@
   <div class="hello">
     <p class="tips">{{$t("recycle_tips")}}</p>
     <!-- 页面列表 -->
-     <el-table align="left"
-           class="recycle-table"
-          v-if="lists.length>0"
-          :data="lists"
-          style="width: 100%">
-          <el-table-column
-            prop="page_title"
-            :label="$t('page_title')"
-            >
-          </el-table-column>
-          <el-table-column
-            prop="del_by_username"
-            :label="$t('deleter')"
-            >
-          </el-table-column>
-          <el-table-column
-            prop="del_time"
-            :label="$t('del_time')"
-            >
-          </el-table-column>
-          <el-table-column
-            prop=""
-            :label="$t('operation')">
-            <template slot-scope="scope">
-              <el-button @click="recover(scope.row.page_id)" type="text" size="small">{{$t("recover")}}</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-
-
-
-
+    <el-table
+      align="left"
+      class="recycle-table"
+      v-if="lists.length>0"
+      :data="lists"
+      style="width: 100%"
+    >
+      <el-table-column prop="page_title" :label="$t('page_title')"></el-table-column>
+      <el-table-column prop="del_by_username" :label="$t('deleter')"></el-table-column>
+      <el-table-column prop="del_time" :label="$t('del_time')"></el-table-column>
+      <el-table-column prop :label="$t('operation')">
+        <template slot-scope="scope">
+          <el-button @click="recover(scope.row.page_id)" type="text" size="small">{{$t("recover")}}</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      MyForm:{
-        username:'',
-        is_readonly:false
+      MyForm: {
+        username: '',
+        is_readonly: false
       },
-      MyForm2:{
-        team_id:'',
+      MyForm2: {
+        team_id: ''
       },
-      lists:[],
+      lists: []
     }
-
   },
   methods: {
-
-      get_list(){
-        var that = this ;
-        var url = DocConfig.server+'/api/recycle/getList';
-        var params = new URLSearchParams();
-        params.append('item_id',  that.$route.params.item_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data
-              that.lists =  Info;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
-      },
-      recover(page_id){
-          var that = this ;
-          var url = DocConfig.server+'/api/recycle/recover';
-
-          this.$confirm(this.$t("recover_tips"), ' ', {
-            confirmButtonText: that.$t('confirm'),
-            cancelButtonText: that.$t('cancel'),
-            type: 'warning'
-          }).then(() => {
-            var params = new URLSearchParams();
-            params.append('item_id',  that.$route.params.item_id);
-            params.append('page_id', page_id);
-
-            that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.get_list() ;
-              }else{
-                that.$alert(response.data.error_message);
-              }
-            }); 
-          })
-      }
-
+    get_list() {
+      var that = this
+      var url = DocConfig.server + '/api/recycle/getList'
+      var params = new URLSearchParams()
+      params.append('item_id', that.$route.params.item_id)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          var Info = response.data.data
+          that.lists = Info
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    recover(page_id) {
+      var that = this
+      var url = DocConfig.server + '/api/recycle/recover'
+
+      this.$confirm(this.$t('recover_tips'), ' ', {
+        confirmButtonText: that.$t('confirm'),
+        cancelButtonText: that.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams()
+        params.append('item_id', that.$route.params.item_id)
+        params.append('page_id', page_id)
+
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.get_list()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
+    }
   },
 
-  mounted(){
-    this.get_list();
+  mounted() {
+    this.get_list()
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.hello{
+.hello {
   text-align: left;
 }
-.tips{
+.tips {
   margin-left: 10px;
   color: #9ea1a6;
-
 }
-.recycle-table{
+.recycle-table {
   max-height: 400px;
   overflow: auto;
 }
-
-
 </style>
diff --git a/web_src/src/components/item/show/Index.vue b/web_src/src/components/item/show/Index.vue
index c1e045a59..298a234f9 100644
--- a/web_src/src/components/item/show/Index.vue
+++ b/web_src/src/components/item/show/Index.vue
@@ -1,114 +1,113 @@
 <template>
   <div class="hello">
-    <Header> </Header>
-    
+    <Header></Header>
+
     <!-- 展示常规项目 -->
-    <ShowRegularItem :item_info="item_info" :search_item="search_item" :keyword="keyword" v-if="item_info && item_info.item_type == 1 "> 
+    <ShowRegularItem
+      :item_info="item_info"
+      :search_item="search_item"
+      :keyword="keyword"
+      v-if="item_info && item_info.item_type == 1 "
+    ></ShowRegularItem>
 
-    </ShowRegularItem>
-    
     <!-- 展示单页项目 -->
-    <ShowSinglePageItem :item_info="item_info" v-if="item_info && item_info.item_type == 2 ">
-    
-    </ShowSinglePageItem>
+    <ShowSinglePageItem :item_info="item_info" v-if="item_info && item_info.item_type == 2 "></ShowSinglePageItem>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 
 
 <script>
-  import ShowRegularItem from '@/components/item/show/show_regular_item/Index'
-  import ShowSinglePageItem from '@/components/item/show/show_single_page_item/Index'
-  export default {
-    data() {
-      return {
-        item_info:'' ,
-        keyword:'',
-      }
-    },
-  components:{
+import ShowRegularItem from '@/components/item/show/show_regular_item/Index'
+import ShowSinglePageItem from '@/components/item/show/show_single_page_item/Index'
+export default {
+  data() {
+    return {
+      item_info: '',
+      keyword: ''
+    }
+  },
+  components: {
     ShowRegularItem,
     ShowSinglePageItem
   },
-  methods:{
-    //获取菜单
-    get_item_menu(keyword){
-        if (!keyword) {
-          keyword = '' ;
-        };  
-        var that = this ; 
-        var loading = that.$loading();
-        var item_id = this.$route.params.item_id ? this.$route.params.item_id : 0;
-        var page_id = this.$route.query.page_id ? this.$route.query.page_id : 0  ;
-        
-        var url = DocConfig.server+'/api/item/info';
+  methods: {
+    // 获取菜单
+    get_item_menu(keyword) {
+      if (!keyword) {
+        keyword = ''
+      }
+      var that = this
+      var loading = that.$loading()
+      var item_id = this.$route.params.item_id ? this.$route.params.item_id : 0
+      var page_id = this.$route.query.page_id ? this.$route.query.page_id : 0
 
-        var params = new URLSearchParams();
-        params.append('item_id',  item_id);
-        params.append('keyword',  keyword);
-        if ( !that.keyword) {
-          params.append('default_page_id',page_id  );
-        };
-        that.axios.post(url, params)
-          .then(function (response) {
-            loading.close();
-            if (response.data.error_code === 0 ) {
-              var json = response.data.data ;
-              if (json.default_page_id <= 0 ) {
-                if (json.menu.pages[0]) {
-                  json.default_page_id = json.menu.pages[0].page_id
-                };
-              };
-              that.item_info = json ;
-              document.title = that.item_info.item_name +"--ShowDoc";
-              if (json.unread_count > 0 ) {
-                that.$message({
-                  showClose: true,
-                  duration:10000,
-                  dangerouslyUseHTMLString: true,
-                  message: '<a href="#/notice/index">你有新的未读消息，点击查看</a>'
-                });
-              };
+      var url = DocConfig.server + '/api/item/info'
 
+      var params = new URLSearchParams()
+      params.append('item_id', item_id)
+      params.append('keyword', keyword)
+      if (!that.keyword) {
+        params.append('default_page_id', page_id)
+      }
+      that.axios.post(url, params).then(function(response) {
+        loading.close()
+        if (response.data.error_code === 0) {
+          var json = response.data.data
+          if (json.default_page_id <= 0) {
+            if (json.menu.pages[0]) {
+              json.default_page_id = json.menu.pages[0].page_id
             }
-            else if (response.data.error_code === 10307 || response.data.error_code === 10303 ) {
-              //需要输入密码
-              that.$router.replace({
-                  path: '/item/password/'+item_id,
-                  query: {page_id: page_id,redirect: that.$router.currentRoute.fullPath}
-              });
-            }
-            else{
-              that.$alert(response.data.error_message);
+          }
+          that.item_info = json
+          document.title = that.item_info.item_name + '--ShowDoc'
+          if (json.unread_count > 0) {
+            that.$message({
+              showClose: true,
+              duration: 10000,
+              dangerouslyUseHTMLString: true,
+              message: '<a href="#/notice/index">你有新的未读消息，点击查看</a>'
+            })
+          }
+        } else if (
+          response.data.error_code === 10307 ||
+          response.data.error_code === 10303
+        ) {
+          // 需要输入密码
+          that.$router.replace({
+            path: '/item/password/' + item_id,
+            query: {
+              page_id: page_id,
+              redirect: that.$router.currentRoute.fullPath
             }
-            
-          });
-        //设置一个最长关闭时间
-        setTimeout(() => {
-          loading.close();
-        }, 20000);
+          })
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+      // 设置一个最长关闭时间
+      setTimeout(() => {
+        loading.close()
+      }, 20000)
     },
-    search_item(keyword){
-      this.item_info = '';
-      this.keyword = keyword ;
-      this.get_item_menu(keyword);
+    search_item(keyword) {
+      this.item_info = ''
+      this.keyword = keyword
+      this.get_item_menu(keyword)
     }
   },
-  mounted () {
-    this.get_item_menu();
-
+  mounted() {
+    this.get_item_menu()
   },
-  beforeDestroy(){
-    this.$message.closeAll();
-    document.title = "ShowDoc" ;
+  beforeDestroy() {
+    this.$message.closeAll()
+    document.title = 'ShowDoc'
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>
diff --git a/web_src/src/components/item/show/show_regular_item/Index.vue b/web_src/src/components/item/show/show_regular_item/Index.vue
index ff5ca4684..ef2b627ff 100644
--- a/web_src/src/components/item/show/show_regular_item/Index.vue
+++ b/web_src/src/components/item/show/show_regular_item/Index.vue
@@ -1,83 +1,97 @@
 <template>
   <div class="hello">
-    <Header> </Header>
-      <div id="header"></div>
-
-
-
-      <div class="container doc-container" id="doc-container">
-
-
-        <div id="left-side">
-            <LeftMenu  ref="leftMenu" :get_page_content="get_page_content" :keyword="keyword" :item_info="item_info" :search_item="search_item" v-if="item_info" ></LeftMenu>
-        </div>
-
-
-        <div id="right-side" >
-            <div id="p-content">
-                 <div class="doc-title-box" id="doc-title-box">
-                    <span id="doc-title-span" class="dn"></span>
-                    <h2 id="doc-title">{{page_title}}</h2>
-                    <el-badge :value="attachment_count" class="item"  id="attachment" v-if="attachment_count"   @click.native="ShowAttachment" >
-                      <i class="el-icon-upload"></i> 
-                    </el-badge>
-                </div>
-                <div id="doc-body" >
-
-                <div id="page_md_content" class="page_content_main"><Editormd v-bind:content="content" v-if="page_id" type="html" :keyword="keyword"></Editormd></div>
-                </div>
-              </div>
-
-            <OpBar   :page_id="page_id" :item_id='item_info.item_id' :item_info='item_info'  :page_info="page_info"  > </OpBar>
+    <Header></Header>
+    <div id="header"></div>
+
+    <div class="container doc-container" id="doc-container">
+      <div id="left-side">
+        <LeftMenu
+          ref="leftMenu"
+          :get_page_content="get_page_content"
+          :keyword="keyword"
+          :item_info="item_info"
+          :search_item="search_item"
+          v-if="item_info"
+        ></LeftMenu>
+      </div>
 
+      <div id="right-side">
+        <div id="p-content">
+          <div class="doc-title-box" id="doc-title-box">
+            <span id="doc-title-span" class="dn"></span>
+            <h2 id="doc-title">{{page_title}}</h2>
+            <el-badge
+              :value="attachment_count"
+              class="item"
+              id="attachment"
+              v-if="attachment_count"
+              @click.native="ShowAttachment"
+            >
+              <i class="el-icon-upload"></i>
+            </el-badge>
+          </div>
+          <div id="doc-body">
+            <div id="page_md_content" class="page_content_main">
+              <Editormd v-bind:content="content" v-if="page_id" type="html" :keyword="keyword"></Editormd>
+            </div>
+          </div>
         </div>
 
-
+        <OpBar
+          :page_id="page_id"
+          :item_id="item_info.item_id"
+          :item_info="item_info"
+          :page_info="page_info"
+        ></OpBar>
       </div>
+    </div>
 
-      <BackToTop  > </BackToTop>
-      <Toc  v-if="page_id" > </Toc>
-
-
-        <!-- 附件列表 -->
-        <AttachmentList callback="" :item_id="page_info.item_id" :manage="false" :page_id="page_info.page_id" ref="AttachmentList"></AttachmentList>
+    <BackToTop></BackToTop>
+    <Toc v-if="page_id"></Toc>
 
+    <!-- 附件列表 -->
+    <AttachmentList
+      callback
+      :item_id="page_info.item_id"
+      :manage="false"
+      :page_id="page_info.page_id"
+      ref="AttachmentList"
+    ></AttachmentList>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 
 
 <script>
-  import Editormd from '@/components/common/Editormd'
-  import BackToTop from '@/components/common/BackToTop'
-  import Toc from '@/components/item/show/show_regular_item/Toc'
-  import LeftMenu from '@/components/item/show/show_regular_item/LeftMenu'
-  import OpBar from '@/components/item/show/show_regular_item/OpBar'
-  import AttachmentList from '@/components/page/edit/AttachmentList'
-
-  export default {
-    props:{
-      item_info:'',
-      search_item:'',
-      keyword:''
-    },
-    data() {
-      return {
-        content:"###正在加载...",
-        page_id:'',
-        page_title:'',
-        dialogVisible:false,
-        share_item_link:'',
-        qr_item_link:'',
-        page_info:'',
-        copyText:"",
-        attachment_count:'',
-      }
-    },
-  components:{
+import Editormd from '@/components/common/Editormd'
+import BackToTop from '@/components/common/BackToTop'
+import Toc from '@/components/item/show/show_regular_item/Toc'
+import LeftMenu from '@/components/item/show/show_regular_item/LeftMenu'
+import OpBar from '@/components/item/show/show_regular_item/OpBar'
+import AttachmentList from '@/components/page/edit/AttachmentList'
+
+export default {
+  props: {
+    item_info: '',
+    search_item: '',
+    keyword: ''
+  },
+  data() {
+    return {
+      content: '###正在加载...',
+      page_id: '',
+      page_title: '',
+      dialogVisible: false,
+      share_item_link: '',
+      qr_item_link: '',
+      page_info: '',
+      copyText: '',
+      attachment_count: ''
+    }
+  },
+  components: {
     Editormd,
     LeftMenu,
     OpBar,
@@ -85,187 +99,180 @@
     Toc,
     AttachmentList
   },
-  methods:{
-    //获取页面内容
-    get_page_content(page_id){
-      if (page_id <= 0 ) {return;};
-        this.adaptScreen();
-        var that = this ;
-        var url = DocConfig.server+'/api/page/info';
-        //var loading = that.$loading({target:".page_content_main",fullscreen:false});
-        var params = new URLSearchParams();
-        params.append('page_id',  page_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            //loading.close();
-            if (response.data.error_code === 0 ) {
-              that.content = response.data.data.page_content ;
-              
-              that.page_title = response.data.data.page_title ;
-              that.page_info = response.data.data ;
-              that.attachment_count = response.data.data.attachment_count > 0 ?  response.data.data.attachment_count  :'' ;
-              //切换变量让它重新加载、渲染子组件
-              that.page_id = 0 ;
-              that.$nextTick(() => {
-                that.page_id = page_id ;
-                //页面回到顶部
-                 document.body.scrollTop = document.documentElement.scrollTop = 0;
-                 document.title = that.page_title +"--ShowDoc";
-              });
-              
-            }else{
-              //that.$alert(response.data.error_message);
-            }
-            
-          });
+  methods: {
+    // 获取页面内容
+    get_page_content(page_id) {
+      if (page_id <= 0) {
+        return
+      }
+      this.adaptScreen()
+      var that = this
+      var url = DocConfig.server + '/api/page/info'
+      // var loading = that.$loading({target:".page_content_main",fullscreen:false});
+      var params = new URLSearchParams()
+      params.append('page_id', page_id)
+      that.axios.post(url, params).then(function(response) {
+        // loading.close();
+        if (response.data.error_code === 0) {
+          that.content = response.data.data.page_content
+
+          that.page_title = response.data.data.page_title
+          that.page_info = response.data.data
+          that.attachment_count =
+            response.data.data.attachment_count > 0
+              ? response.data.data.attachment_count
+              : ''
+          // 切换变量让它重新加载、渲染子组件
+          that.page_id = 0
+          that.$nextTick(() => {
+            that.page_id = page_id
+            // 页面回到顶部
+            document.body.scrollTop = document.documentElement.scrollTop = 0
+            document.title = that.page_title + '--ShowDoc'
+          })
+        } else {
+          // that.$alert(response.data.error_message);
+        }
+      })
     },
-    //根据屏幕宽度进行响应(应对移动设备的访问)
-    adaptToMobile(){
-      let childRef = this.$refs.leftMenu ;//获取子组件
-      childRef.hide_menu();
-      this.show_page_bar = false;
-      var doc_container = document.getElementById('doc-container') ;
-      doc_container.style.width = '95%';
-      doc_container.style.padding = '5px';
-      var header = document.getElementById('header') ;
-      header.style.height = '10px';
-      var docTitle = document.getElementById('doc-title-box') ;
-      docTitle.style.marginTop = '40px';
+    // 根据屏幕宽度进行响应(应对移动设备的访问)
+    adaptToMobile() {
+      let childRef = this.$refs.leftMenu // 获取子组件
+      childRef.hide_menu()
+      this.show_page_bar = false
+      var doc_container = document.getElementById('doc-container')
+      doc_container.style.width = '95%'
+      doc_container.style.padding = '5px'
+      var header = document.getElementById('header')
+      header.style.height = '10px'
+      var docTitle = document.getElementById('doc-title-box')
+      docTitle.style.marginTop = '40px'
     },
-    //根据屏幕宽度进行响应。应对小屏幕pc设备(如笔记本)的访问
-    adaptToSmallpc(){
-      var doc_container = document.getElementById('doc-container') ;
-      doc_container.style.width = 'calc( 95% - 300px )';
-      doc_container.style.marginLeft = '300px';
-      doc_container.style.padding = '20px';
-      var header = document.getElementById('header') ;
-      header.style.height = '20px';
-      var docTitle = document.getElementById('doc-title-box') ;
-      docTitle.style.marginTop = '30px';
+    // 根据屏幕宽度进行响应。应对小屏幕pc设备(如笔记本)的访问
+    adaptToSmallpc() {
+      var doc_container = document.getElementById('doc-container')
+      doc_container.style.width = 'calc( 95% - 300px )'
+      doc_container.style.marginLeft = '300px'
+      doc_container.style.padding = '20px'
+      var header = document.getElementById('header')
+      header.style.height = '20px'
+      var docTitle = document.getElementById('doc-title-box')
+      docTitle.style.marginTop = '30px'
     },
-    //响应式
-    adaptScreen(){
+    // 响应式
+    adaptScreen() {
       this.$nextTick(() => {
-        //根据屏幕宽度进行响应(应对移动设备的访问)
-        if( this.isMobile() ||  window.innerWidth < 1300){
+        // 根据屏幕宽度进行响应(应对移动设备的访问)
+        if (this.isMobile() || window.innerWidth < 1300) {
           if (window.innerWidth < 1300 && window.innerWidth > 1100) {
-            this.adaptToSmallpc();
-          }else{
-            this.adaptToMobile();
+            this.adaptToSmallpc()
+          } else {
+            this.adaptToMobile()
           }
         }
-      });
-    },
-    onCopy(){
-      this.$message(this.$t("copy_success"));
+      })
     },
-    ShowAttachment(){
-        let childRef = this.$refs.AttachmentList ;//获取子组件
-        childRef.show() ; 
+    onCopy() {
+      this.$message(this.$t('copy_success'))
     },
+    ShowAttachment() {
+      let childRef = this.$refs.AttachmentList // 获取子组件
+      childRef.show()
+    }
   },
-  mounted () {
-
-    this.adaptScreen();
-    this.set_bg_grey();
+  mounted() {
+    this.adaptScreen()
+    this.set_bg_grey()
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-  .page_content_main{
-    width:800px;
-    margin: 0 auto ;
-    height: 50%;
-    overflow: visible;
-  }
-
-  .editormd-html-preview{
-    width: 95%;
-    font-size: 16px;
-    overflow-y: hidden;
-  }
-
-  #attachment{
-    float: right;
-    font-size: 25px;
-    margin-top: -40px;
-    margin-right: 5px;
-    cursor:pointer;
-    color: #abd1f1;
-  }
-
-  #page_md_content{
-      padding: 10px 10px 90px 10px;
-      overflow: hidden;
-      font-size: 11pt;
-      line-height: 1.7;
-      color: #333;
-  }
-
-  .doc-container {
-      position: static;
-      -webkit-box-shadow: 0px 1px 6px #ccc;
-      -moz-box-shadow: 0px 1px 6px #ccc;
-      -ms-box-shadow: 0px 1px 6px #ccc;
-      -o-box-shadow: 0px 1px 6px #ccc;
-      box-shadow: 0px 1px 6px #ccc;
-      background-color: #fff;
-      border-bottom: 1px solid #d9d9d9;
-      margin-bottom: 20px;
-      width: 800px;
-      min-height: 750px;
-      margin-left: auto;
-      margin-right: auto;
-      padding: 20px;
-  }
-
-  #header{
-    height: 80px;
-  }
-
-  #doc-body{
-    width: 95%;
-    margin: 0 auto;
-    background-color: #fff;
-  }
-
-  .doc-title-box{
-      height: auto;
-      width: auto;
-      border-bottom: 1px solid #ebebeb;
-      padding-bottom: 10px;
-      width: 100%;
-      margin: 10px auto;
-      text-align: center;
-  }
-
-
-  pre ol{
-    list-style: none;
-  }
-
-  .markdown-body pre {
-    background-color: #f7f7f9;
-    border: 1px solid #e1e1e8;
-  }
-  .hljs{
-    background-color: #f7f7f9;
-  }
-  .tool-bar{
-    margin-top: -38px;
-  }
-  .editormd-html-preview, .editormd-preview-container{
-    padding: 0px;
-    font-size: 14px;
-  }
-
-
-
-
-
-
-
+.page_content_main {
+  width: 800px;
+  margin: 0 auto;
+  height: 50%;
+  overflow: visible;
+}
+
+.editormd-html-preview {
+  width: 95%;
+  font-size: 16px;
+  overflow-y: hidden;
+}
+
+#attachment {
+  float: right;
+  font-size: 25px;
+  margin-top: -40px;
+  margin-right: 5px;
+  cursor: pointer;
+  color: #abd1f1;
+}
+
+#page_md_content {
+  padding: 10px 10px 90px 10px;
+  overflow: hidden;
+  font-size: 11pt;
+  line-height: 1.7;
+  color: #333;
+}
+
+.doc-container {
+  position: static;
+  -webkit-box-shadow: 0px 1px 6px #ccc;
+  -moz-box-shadow: 0px 1px 6px #ccc;
+  -ms-box-shadow: 0px 1px 6px #ccc;
+  -o-box-shadow: 0px 1px 6px #ccc;
+  box-shadow: 0px 1px 6px #ccc;
+  background-color: #fff;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+  width: 800px;
+  min-height: 750px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+}
+
+#header {
+  height: 80px;
+}
+
+#doc-body {
+  width: 95%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+.doc-title-box {
+  height: auto;
+  width: auto;
+  border-bottom: 1px solid #ebebeb;
+  padding-bottom: 10px;
+  width: 100%;
+  margin: 10px auto;
+  text-align: center;
+}
+
+pre ol {
+  list-style: none;
+}
+
+.markdown-body pre {
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.hljs {
+  background-color: #f7f7f9;
+}
+.tool-bar {
+  margin-top: -38px;
+}
+.editormd-html-preview,
+.editormd-preview-container {
+  padding: 0px;
+  font-size: 14px;
+}
 </style>
diff --git a/web_src/src/components/item/show/show_regular_item/LeftMenu.vue b/web_src/src/components/item/show/show_regular_item/LeftMenu.vue
index 204e8433a..79b849542 100644
--- a/web_src/src/components/item/show/show_regular_item/LeftMenu.vue
+++ b/web_src/src/components/item/show/show_regular_item/LeftMenu.vue
@@ -1,38 +1,51 @@
 <template>
   <div :class=" hideScrollbar ? 'hide-scrollbar' : 'normal-scrollbar' ">
-    <i class="el-icon-menu header-left-btn" v-if="show_menu_btn" id="header-left-btn" @click="show_menu"></i>
-    <i class="el-icon-menu header-left-btn" v-if="show_menu_btn" id="header-left-btn" @click="show_menu"></i>
-    <el-aside  :class="menuMarginLeft"  id="left-side-menu" :width="asideWidth"
-     @mouseenter.native="hideScrollbar = false" @mouseleave.native="hideScrollbar = true" 
-     >
-      <el-menu  @select="select_menu"
+    <i
+      class="el-icon-menu header-left-btn"
+      v-if="show_menu_btn"
+      id="header-left-btn"
+      @click="show_menu"
+    ></i>
+    <i
+      class="el-icon-menu header-left-btn"
+      v-if="show_menu_btn"
+      id="header-left-btn"
+      @click="show_menu"
+    ></i>
+    <el-aside
+      :class="menuMarginLeft"
+      id="left-side-menu"
+      :width="asideWidth"
+      @mouseenter.native="hideScrollbar = false"
+      @mouseleave.native="hideScrollbar = true"
+    >
+      <el-menu
+        @select="select_menu"
         background-color="#fafafa"
-        text-color=""
-        active-text-color="#008cff" 
+        text-color
+        active-text-color="#008cff"
         :default-active="item_info.default_page_id"
-        :default-openeds='openeds'
+        :default-openeds="openeds"
       >
-
-            <el-input 
-              @keyup.enter.native="input_keyword"
-              :placeholder="$t('input_keyword')"
-              class="search-box"
-              :clearable="true"
-              @clear="search_item()"
-              v-model="keyword">
-             
-            </el-input>
-
+        <el-input
+          @keyup.enter.native="input_keyword"
+          :placeholder="$t('input_keyword')"
+          class="search-box"
+          :clearable="true"
+          @clear="search_item()"
+          v-model="keyword"
+        ></el-input>
 
         <!-- 一级页面 -->
-          <el-menu-item  v-if="menu.pages.length " v-for="(page ,index) in menu.pages" :index="page.page_id" :key="page.page_id" >
+        <template v-if="menu.pages.length ">
+          <el-menu-item v-for="(page ) in menu.pages" :index="page.page_id" :key="page.page_id">
             <i class="el-icon-document"></i>
-             <span :title="page.page_title">{{page.page_title}}</span> 
+            <span :title="page.page_title">{{page.page_title}}</span>
           </el-menu-item>
+        </template>
 
-          <!-- 目录开始 -->
-          <LeftMenuSub v-if="menu.catalogs && menu.catalogs.length" :catalog="menu.catalogs" ></LeftMenuSub>
-
+        <!-- 目录开始 -->
+        <LeftMenuSub v-if="menu.catalogs && menu.catalogs.length" :catalog="menu.catalogs"></LeftMenuSub>
       </el-menu>
     </el-aside>
   </div>
@@ -40,166 +53,171 @@
 
 
 <script>
-  import LeftMenuSub from './LeftMenuSub.vue'
-
-  export default {
-  props:{
-    get_page_content:'',
-    item_info:'',
-    search_item:'',
-    keyword:'',
+import LeftMenuSub from './LeftMenuSub.vue'
+
+export default {
+  props: {
+    get_page_content: '',
+    item_info: '',
+    search_item: '',
+    keyword: ''
   },
-    data() {
-      return {
-        openeds:[],
-        menu:'',
-          show_menu_btn:false,
-          hideScrollbar:true,
-          asideWidth:"250px",
-          menuMarginLeft:"menu-margin-left1"
-      }
-    },
-  components:{
+  data() {
+    return {
+      openeds: [],
+      menu: '',
+      show_menu_btn: false,
+      hideScrollbar: true,
+      asideWidth: '250px',
+      menuMarginLeft: 'menu-margin-left1'
+    }
+  },
+  components: {
     LeftMenuSub
   },
-  methods:{
-    //选中菜单的回调
-    select_menu(index, indexPath){
-      this.change_url(index);
-      this.get_page_content(index);
+  methods: {
+    // 选中菜单的回调
+    select_menu(index, indexPath) {
+      this.change_url(index)
+      this.get_page_content(index)
     },
-    new_page(){
-      var url = '/page/edit/'+this.item_info.item_id+'/0';
-      this.$router.push({path:url});
+    new_page() {
+      var url = '/page/edit/' + this.item_info.item_id + '/0'
+      this.$router.push({ path: url })
     },
 
-    mamage_catalog(){
-      var url = '/catalog/'+this.item_info.item_id;
-      this.$router.push({path:url});
+    mamage_catalog() {
+      var url = '/catalog/' + this.item_info.item_id
+      this.$router.push({ path: url })
     },
 
-    //改变url
-    change_url(page_id){
-        var base_url = '';
-        var item_domain = '';
-        var domain = this.item_info.item_domain ? this.item_info.item_domain : this.item_info.item_id ;
-        this.$router.replace({
-            path: '/'+domain,
-            query: {page_id:page_id}
-        });
+    // 改变url
+    change_url(page_id) {
+      var domain = this.item_info.item_domain
+        ? this.item_info.item_domain
+        : this.item_info.item_id
+      this.$router.replace({
+        path: '/' + domain,
+        query: { page_id: page_id }
+      })
     },
 
-    input_keyword(){
-      this.search_item(this.keyword);
-    },
-    show_menu(){
-        this.show_menu_btn = false;
-        var element = document.getElementById('left-side-menu') ;
-        element.style.display = 'block' ;
-        element.style.marginLeft = '0px'; 
-        element.style.marginTop = '0px'; 
-        element.style.position = 'static'; 
-        var element = document.getElementById('p-content') ;
-        element.style.display = 'none'; 
+    input_keyword() {
+      this.search_item(this.keyword)
     },
-    hide_menu(){
-        this.show_menu_btn = true;
-        var element = document.getElementById('left-side-menu') ;
-        element.style.display = 'none';
-        var element = document.getElementById('p-content') ;
-        element.style.marginLeft = '0px';
-        element.style.display = 'block'; 
-        var element = document.getElementById('page_md_content') ;
-        element.style.width = '95%' ; 
+    show_menu() {
+      this.show_menu_btn = false
+      var element = document.getElementById('left-side-menu')
+      element.style.display = 'block'
+      element.style.marginLeft = '0px'
+      element.style.marginTop = '0px'
+      element.style.position = 'static'
+      element = document.getElementById('p-content')
+      element.style.display = 'none'
     },
-
-
+    hide_menu() {
+      this.show_menu_btn = true
+      var element = document.getElementById('left-side-menu')
+      element.style.display = 'none'
+      element = document.getElementById('p-content')
+      element.style.marginLeft = '0px'
+      element.style.display = 'block'
+      element = document.getElementById('page_md_content')
+      element.style.width = '95%'
+    }
   },
-  mounted () {
-    var that = this ;
-    this.menu = this.item_info.menu ;
-    var item_info = this.item_info ;
-    //默认展开页面
-    if (item_info.default_page_id > 0 ) {
-      that.select_menu(item_info.default_page_id);
+  mounted() {
+    var that = this
+    this.menu = this.item_info.menu
+    var item_info = this.item_info
+    // 默认展开页面
+    if (item_info.default_page_id > 0) {
+      that.select_menu(item_info.default_page_id)
       if (item_info.default_cat_id4) {
-        that.openeds = [ item_info.default_cat_id4,item_info.default_cat_id3, item_info.default_cat_id2, item_info.default_page_id]; 
-      }
-      else if (item_info.default_cat_id3) {
-        that.openeds = [ item_info.default_cat_id3, item_info.default_cat_id2, item_info.default_page_id]; 
+        that.openeds = [
+          item_info.default_cat_id4,
+          item_info.default_cat_id3,
+          item_info.default_cat_id2,
+          item_info.default_page_id
+        ]
+      } else if (item_info.default_cat_id3) {
+        that.openeds = [
+          item_info.default_cat_id3,
+          item_info.default_cat_id2,
+          item_info.default_page_id
+        ]
+      } else if (item_info.default_cat_id2) {
+        that.openeds = [item_info.default_cat_id2, item_info.default_page_id]
       }
-      else if (item_info.default_cat_id2) {
-        that.openeds = [ item_info.default_cat_id2, item_info.default_page_id];
-      };
     }
 
-    //如果是大屏幕且存在目录，则把侧边栏调大
-    if ( window.screen.width >= 1600  && this.menu.catalogs && this.menu.catalogs.length > 0 ) {
-        this.asideWidth = "300px";
-        this.menuMarginLeft = 'menu-margin-left2';
-    };
-
-
+    // 如果是大屏幕且存在目录，则把侧边栏调大
+    if (
+      window.screen.width >= 1600 &&
+      this.menu.catalogs &&
+      this.menu.catalogs.length > 0
+    ) {
+      this.asideWidth = '300px'
+      this.menuMarginLeft = 'menu-margin-left2'
+    }
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.el-header {
+  color: #333;
+  line-height: 60px;
+}
 
-  .el-header {
-    color: #333;
-    line-height: 60px;
-  }
-  
-  #left-side-menu {
-    color: #333;
-    position: fixed;
-    margin-top: -20px;
-    height: calc(100% - 90px);
-
-  }
-  .menu-margin-left1{
-    margin-left: -273px;
-  }
-  .menu-margin-left2{
-    margin-left: -323px;
-  }
-
-.el-input-group__append button.el-button{
-    background-color: #ffffffa3;
+#left-side-menu {
+  color: #333;
+  position: fixed;
+  margin-top: -20px;
+  height: calc(100% - 90px);
+}
+.menu-margin-left1 {
+  margin-left: -273px;
+}
+.menu-margin-left2 {
+  margin-left: -323px;
+}
 
-  }
+.el-input-group__append button.el-button {
+  background-color: #ffffffa3;
+}
 
-.el-menu{
-  border-right:none;
+.el-menu {
+  border-right: none;
 }
 
-.icon-folder{
+.icon-folder {
   width: 18px;
   height: 15px;
   cursor: pointer;
 }
 
-.menu-icon-folder{
+.menu-icon-folder {
   margin-right: 5px;
   margin-top: -5px;
 }
 
-.el-menu-item, .el-submenu__title{
-    height: 46px;
-    line-height: 46px;
+.el-menu-item,
+.el-submenu__title {
+  height: 46px;
+  line-height: 46px;
 }
 .el-submenu .el-menu-item {
-    height: 40px;
-    line-height: 40px;
+  height: 40px;
+  line-height: 40px;
 }
 .el-menu-item {
   line-height: 40px;
   height: 40px;
   font-size: 12px;
 }
-.el-menu-item [class^=el-icon-] {
+.el-menu-item [class^='el-icon-'] {
   font-size: 17px;
   margin-bottom: 4px;
 }
@@ -211,62 +229,54 @@
   margin-bottom: 4px;
 }
 .search-box {
-    padding: 0px 20px 0px 20px;
-    box-sizing: border-box;
-
+  padding: 0px 20px 0px 20px;
+  box-sizing: border-box;
 }
 
 /*隐藏滚动条*/
-.hide-scrollbar ::-webkit-scrollbar
-{
-   display: none;
+.hide-scrollbar ::-webkit-scrollbar {
+  display: none;
 }
 /*隐藏滚动条*/
-.hide-scrollbar
-{ 
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
-
-.header-left-btn{
+.header-left-btn {
   font-size: 20px;
   margin-top: 5px;
   cursor: pointer;
   position: fixed;
 }
-
-
-
 </style>
 <style type="text/css">
-  #left-side-menu .el-input__inner{
-      background-color: #fafafa !important;
-      padding-right:10px;
-  }
+#left-side-menu .el-input__inner {
+  background-color: #fafafa !important;
+  padding-right: 10px;
+}
 
-  .hide-scrollbar .el-submenu__title{
-    font-size: 12px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .hide-scrollbar li{
-   /* white-space: normal;*/
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+.hide-scrollbar .el-submenu__title {
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hide-scrollbar li {
+  /* white-space: normal;*/
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .normal-scrollbar .el-submenu__title{
-    font-size: 12px;
-  }
-  .normal-scrollbar li{
-    font-size: 12px;
-  }
-  
-  #left-side-menu .el-input__suffix{
-    right: 25px;
-    padding-right:10px;
-  }
+.normal-scrollbar .el-submenu__title {
+  font-size: 12px;
+}
+.normal-scrollbar li {
+  font-size: 12px;
+}
 
+#left-side-menu .el-input__suffix {
+  right: 25px;
+  padding-right: 10px;
+}
 </style>
diff --git a/web_src/src/components/item/show/show_regular_item/LeftMenuSub.vue b/web_src/src/components/item/show/show_regular_item/LeftMenuSub.vue
index e01cac24a..13595eb1a 100644
--- a/web_src/src/components/item/show/show_regular_item/LeftMenuSub.vue
+++ b/web_src/src/components/item/show/show_regular_item/LeftMenuSub.vue
@@ -1,71 +1,76 @@
 <template>
-    <div>
-      <el-submenu  v-if="catalog.length" v-for="(catalog2 ,catalog_index2) in catalog" :index="catalog2.cat_id" :key="catalog2.cat_id">
-        <template slot="title"><img src="static/images/folder.png">{{catalog2.cat_name}}</template>
+  <div>
+    <template v-if="catalog.length">
+      <el-submenu v-for="(catalog2 ) in catalog" :index="catalog2.cat_id" :key="catalog2.cat_id">
+        <template slot="title">
+          <img src="static/images/folder.png" />
+          {{catalog2.cat_name}}
+        </template>
         <!-- 三级目录的页面 -->
-        <el-menu-item  v-if="catalog2.pages" v-for="(page3 ,page3_index) in catalog2.pages"  :index="page3.page_id" :key="page3.page_id"><i class="el-icon-document"></i><span :title="page3.page_title">{{page3.page_title}}</span> </el-menu-item>
-
-          <!-- 子目录 -->
-          <LeftMenuSub v-if="catalog2.catalogs.length" :catalog="catalog2.catalogs" ></LeftMenuSub>
+        <template v-if="catalog2.pages">
+          <el-menu-item
+            v-for="(page3 ) in catalog2.pages"
+            :index="page3.page_id"
+            :key="page3.page_id"
+          >
+            <i class="el-icon-document"></i>
+            <span :title="page3.page_title">{{page3.page_title}}</span>
+          </el-menu-item>
+        </template>
 
+        <!-- 子目录 -->
+        <LeftMenuSub v-if="catalog2.catalogs.length" :catalog="catalog2.catalogs"></LeftMenuSub>
       </el-submenu>
+    </template>
   </div>
 </template>
 
 
 <script>
-  export default {
-  name:'LeftMenuSub',
-  props:{
-    catalog:[]
-  },
-    data() {
-      return {
-
-      }
-    },
-  components:{
-    
+export default {
+  name: 'LeftMenuSub',
+  props: {
+    catalog: []
   },
-  methods:{
-
-
+  data() {
+    return {}
   },
-  mounted () {
+  components: {},
+  methods: {},
+  mounted() {
     // console.log(this.catalog)
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-
-.icon-folder{
+.icon-folder {
   width: 18px;
   height: 15px;
   cursor: pointer;
 }
 
-.menu-icon-folder{
+.menu-icon-folder {
   margin-right: 5px;
   margin-top: -5px;
 }
 
-.el-menu-item, .el-submenu__title{
-    height: 46px;
-    line-height: 46px;
+.el-menu-item,
+.el-submenu__title {
+  height: 46px;
+  line-height: 46px;
 }
 .el-submenu .el-menu-item {
-    height: 40px;
-    line-height: 40px;
+  height: 40px;
+  line-height: 40px;
 }
 .el-menu-item {
   line-height: 40px;
   height: 40px;
   font-size: 12px;
 }
-.el-menu-item [class^=el-icon-] {
+.el-menu-item [class^='el-icon-'] {
   font-size: 17px;
   margin-bottom: 4px;
 }
@@ -76,5 +81,4 @@
   margin-right: 10px;
   margin-bottom: 4px;
 }
-
 </style>
diff --git a/web_src/src/components/item/show/show_regular_item/OpBar.vue b/web_src/src/components/item/show/show_regular_item/OpBar.vue
index 53aac71e3..4fd426368 100644
--- a/web_src/src/components/item/show/show_regular_item/OpBar.vue
+++ b/web_src/src/components/item/show/show_regular_item/OpBar.vue
@@ -1,400 +1,462 @@
 <template>
   <div class="hello">
-        <div v-if="show_menu_btn" id="header-right-btn" >
-            <el-dropdown  trigger="click" @command="handleCommand">
-              <span class="el-dropdown-link">
-                <i class="el-icon-caret-bottom el-icon--right"></i>
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="goback">{{$t('goback')}}</el-dropdown-item>
-                <el-dropdown-item command="share">{{$t('share')}}</el-dropdown-item>
-                <el-dropdown-item v-if="item_info.ItemPermn" command="new_page">{{$t('new_page')}}</el-dropdown-item>
-                <el-dropdown-item v-if="item_info.ItemPermn" command="new_catalog">{{$t('new_catalog')}}</el-dropdown-item>
-                <el-dropdown-item v-if="item_info.ItemPermn" command="edit_page">{{$t('edit_page')}}</el-dropdown-item>
-                <el-dropdown-item v-if="item_info.ItemPermn" command="copy">{{$t('copy')}}</el-dropdown-item>
-                <el-dropdown-item v-if="item_info.ItemPermn" command="ShowHistoryVersion">{{$t('history_version')}}</el-dropdown-item>
-                <el-dropdown-item v-if="item_info.ItemPermn" command="export">{{$t('export')}}</el-dropdown-item>
-                <el-dropdown-item v-if="item_info.ItemPermn" command="delete_page">{{$t('delete_interface')}}</el-dropdown-item>
-
-              </el-dropdown-menu>
-            </el-dropdown>
-        </div>
-
-        <div class="op-bar" v-if="show_op_bar">
-
-             <span v-if="!item_info.is_login">
-                <el-tooltip class="item" effect="dark" :content="$t('index_login_or_register')" placement="top">
-                      <router-link to="/user/login"><i class="el-icon-user" ></i></router-link>
-                </el-tooltip>
-                <el-tooltip class="item" effect="dark" :content="$t('detail')" placement="top">
-                      <i class="el-icon-info" @click="show_page_info"></i>
-                </el-tooltip>
-                <el-tooltip class="item" effect="dark" v-if="lang =='zh-cn'" :content="$t('about_showdoc')" placement="top">
-                <a href="https://www.showdoc.cc/help" target="_blank"><i class="el-icon-arrow-right" ></i></a>
-                </el-tooltip>
-
-
-
-             </span>
-
-             <span v-if="item_info.is_login">
-                <el-tooltip class="item" effect="dark" :content="$t('goback')" placement="left">
-                      <router-link to="/item/index"><i class="el-icon-back" ></i></router-link>
-                </el-tooltip>
-
-                <el-tooltip class="item" effect="dark" :content="$t('share')" placement="top">
-                      <i class="el-icon-share" @click="share_page"></i>
-                </el-tooltip>
-                
-                <el-tooltip v-if="! item_info.ItemPermn" class="item" effect="dark" :content="$t('detail')" placement="top">
-                      <i class="el-icon-info" @click="show_page_info"></i>
-                </el-tooltip>
-
-             </span>
-
-            <span v-if="item_info.ItemPermn">
-              <el-tooltip class="item" effect="dark" :content="$t('new_page')" placement="top">
-                    <i class="el-icon-plus" @click="new_page"></i>
-              </el-tooltip>
-              <el-tooltip class="item" effect="dark" :content="$t('new_catalog')" placement="left">
-                    <i class="el-icon-folder" @click="mamage_catalog"></i>
-              </el-tooltip>
-              <el-tooltip class="item" effect="dark" :content="$t('edit_page')" placement="top">
-                    <i class="el-icon-edit" @click="edit_page"></i>
-              </el-tooltip> 
-
-
-              <el-tooltip v-show="!showMore" class="item" effect="dark" :content="$t('more')" placement="top">
-                    <i class="el-icon-caret-top" @click="showMoreAction"></i>
-              </el-tooltip>
-              <el-tooltip v-show="showMore" class="item" effect="dark" :content="$t('more')" placement="top">
-                    <i class="el-icon-caret-bottom" @click="hideMoreAction"></i>
-              </el-tooltip>
-
-              <span v-show="showMore">
-                  <el-tooltip class="item" effect="dark" :content="$t('copy')" placement="left"> 
-                    <router-link :to="'/page/edit/'+item_id+'/0?copy_page_id='+page_id"><i class="el-icon-document" ></i></router-link>
-                  </el-tooltip>
-                  <el-tooltip class="item" effect="dark" :content="$t('history_version')" placement="top">
-                        <i class="el-icon-goods" @click="ShowHistoryVersion"></i>
-                  </el-tooltip>
-                  <el-tooltip class="item" effect="dark" :content="$t('detail')" placement="top">
-                        <i class="el-icon-info" @click="show_page_info"></i>
-                  </el-tooltip>
-                  <el-tooltip class="item" effect="dark" :content="$t('export')" placement="left">
-                      <router-link :to="'/item/export/'+item_info.item_id" v-if="item_info.ItemPermn"><i class="el-icon-download"></i></router-link>
-                  </el-tooltip>
-                  <el-tooltip class="item" effect="dark" :content="$t('delete_interface')" placement="top">
-                        <i class="el-icon-delete" @click="delete_page"></i>
-                  </el-tooltip>
-
-                  <span v-if="item_info.ItemCreator">
-
-                      <el-tooltip class="item" effect="dark" :content="$t('item_setting')" placement="top">
-                        <router-link :to="'/item/setting/'+item_info.item_id"  v-if="item_info.ItemCreator"><i class="el-icon-setting"></i></router-link>
-                      </el-tooltip>
-                    </span>
-              </span>
-
-
-
-            </span>
-
-
-
-
-        </div>
-
-
-  <el-dialog
-    :title="$t('share_page')"
-    :visible.sync="dialogVisible"
-    width="600px"
-    :close-on-click-modal="false"
+    <div v-if="show_menu_btn" id="header-right-btn">
+      <el-dropdown trigger="click" @command="handleCommand">
+        <span class="el-dropdown-link">
+          <i class="el-icon-caret-bottom el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="goback">{{$t('goback')}}</el-dropdown-item>
+          <el-dropdown-item command="share">{{$t('share')}}</el-dropdown-item>
+          <el-dropdown-item v-if="item_info.ItemPermn" command="new_page">{{$t('new_page')}}</el-dropdown-item>
+          <el-dropdown-item v-if="item_info.ItemPermn" command="new_catalog">{{$t('new_catalog')}}</el-dropdown-item>
+          <el-dropdown-item v-if="item_info.ItemPermn" command="edit_page">{{$t('edit_page')}}</el-dropdown-item>
+          <el-dropdown-item v-if="item_info.ItemPermn" command="copy">{{$t('copy')}}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="item_info.ItemPermn"
+            command="ShowHistoryVersion"
+          >{{$t('history_version')}}</el-dropdown-item>
+          <el-dropdown-item v-if="item_info.ItemPermn" command="export">{{$t('export')}}</el-dropdown-item>
+          <el-dropdown-item
+            v-if="item_info.ItemPermn"
+            command="delete_page"
+          >{{$t('delete_interface')}}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+
+    <div class="op-bar" v-if="show_op_bar">
+      <span v-if="!item_info.is_login">
+        <el-tooltip
+          class="item"
+          effect="dark"
+          :content="$t('index_login_or_register')"
+          placement="top"
+        >
+          <router-link to="/user/login">
+            <i class="el-icon-user"></i>
+          </router-link>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="$t('detail')" placement="top">
+          <i class="el-icon-info" @click="show_page_info"></i>
+        </el-tooltip>
+        <el-tooltip
+          class="item"
+          effect="dark"
+          v-if="lang =='zh-cn'"
+          :content="$t('about_showdoc')"
+          placement="top"
+        >
+          <a href="https://www.showdoc.cc/help" target="_blank">
+            <i class="el-icon-arrow-right"></i>
+          </a>
+        </el-tooltip>
+      </span>
+
+      <span v-if="item_info.is_login">
+        <el-tooltip class="item" effect="dark" :content="$t('goback')" placement="left">
+          <router-link to="/item/index">
+            <i class="el-icon-back"></i>
+          </router-link>
+        </el-tooltip>
+
+        <el-tooltip class="item" effect="dark" :content="$t('share')" placement="top">
+          <i class="el-icon-share" @click="share_page"></i>
+        </el-tooltip>
+
+        <el-tooltip
+          v-if="! item_info.ItemPermn"
+          class="item"
+          effect="dark"
+          :content="$t('detail')"
+          placement="top"
+        >
+          <i class="el-icon-info" @click="show_page_info"></i>
+        </el-tooltip>
+      </span>
+
+      <span v-if="item_info.ItemPermn">
+        <el-tooltip class="item" effect="dark" :content="$t('new_page')" placement="top">
+          <i class="el-icon-plus" @click="new_page"></i>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="$t('new_catalog')" placement="left">
+          <i class="el-icon-folder" @click="mamage_catalog"></i>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="$t('edit_page')" placement="top">
+          <i class="el-icon-edit" @click="edit_page"></i>
+        </el-tooltip>
+
+        <el-tooltip
+          v-show="!showMore"
+          class="item"
+          effect="dark"
+          :content="$t('more')"
+          placement="top"
+        >
+          <i class="el-icon-caret-top" @click="showMoreAction"></i>
+        </el-tooltip>
+        <el-tooltip
+          v-show="showMore"
+          class="item"
+          effect="dark"
+          :content="$t('more')"
+          placement="top"
+        >
+          <i class="el-icon-caret-bottom" @click="hideMoreAction"></i>
+        </el-tooltip>
+
+        <span v-show="showMore">
+          <el-tooltip class="item" effect="dark" :content="$t('copy')" placement="left">
+            <router-link :to="'/page/edit/'+item_id+'/0?copy_page_id='+page_id">
+              <i class="el-icon-document"></i>
+            </router-link>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="$t('history_version')" placement="top">
+            <i class="el-icon-goods" @click="ShowHistoryVersion"></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="$t('detail')" placement="top">
+            <i class="el-icon-info" @click="show_page_info"></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="$t('export')" placement="left">
+            <router-link :to="'/item/export/'+item_info.item_id" v-if="item_info.ItemPermn">
+              <i class="el-icon-download"></i>
+            </router-link>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="$t('delete_interface')" placement="top">
+            <i class="el-icon-delete" @click="delete_page"></i>
+          </el-tooltip>
+
+          <span v-if="item_info.ItemCreator">
+            <el-tooltip class="item" effect="dark" :content="$t('item_setting')" placement="top">
+              <router-link :to="'/item/setting/'+item_info.item_id" v-if="item_info.ItemCreator">
+                <i class="el-icon-setting"></i>
+              </router-link>
+            </el-tooltip>
+          </span>
+        </span>
+      </span>
+    </div>
+
+    <el-dialog
+      :title="$t('share_page')"
+      :visible.sync="dialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
     >
-    
-    <p>{{$t('item_page_address')}} : <code >{{share_page_link}}</code>
-    </p>
-      <p v-if="false" style="border-bottom: 1px solid #eee;"><img  id="qr-page-link" style="width:114px;height:114px;" :src="qr_page_link"> </p>
-      
-      <div v-show="item_info.ItemPermn">
-        <el-checkbox v-model="isCreateSiglePage" @change="CreateSiglePage">{{$t('create_sigle_page')}}</el-checkbox>
+      <p>
+        {{$t('item_page_address')}} :
+        <code>{{share_page_link}}</code>
+      </p>
+      <p v-if="false" style="border-bottom: 1px solid #eee;">
+        <img id="qr-page-link" style="width:114px;height:114px;" :src="qr_page_link" />
+      </p>
 
-        <p v-if="isCreateSiglePage">{{$t('single_page_address')}} : <code >{{share_single_link}}</code> <p>
-
-        <p>
-          {{$t('create_sigle_page_tips')}}
+      <div v-show="item_info.ItemPermn">
+        <el-checkbox
+          v-model="isCreateSiglePage"
+          @change="CreateSiglePage"
+        >{{$t('create_sigle_page')}}</el-checkbox>
+
+        <p v-if="isCreateSiglePage">
+          {{$t('single_page_address')}} :
+          <code>{{share_single_link}}</code>
         </p>
+        <p></p>
+        <p>{{$t('create_sigle_page_tips')}}</p>
       </div>
 
-
-
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="dialogVisible = false">{{$t('confirm')}}</el-button>
-    </span>
-  </el-dialog>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">{{$t('confirm')}}</el-button>
+      </span>
+    </el-dialog>
 
     <!-- 历史版本 -->
-    <HistoryVersion :page_id="page_id" :is_show_recover_btn="false" :is_modal="false" callback="insertValue" ref="HistoryVersion"></HistoryVersion>
-
+    <HistoryVersion
+      :page_id="page_id"
+      :is_show_recover_btn="false"
+      :is_modal="false"
+      callback="insertValue"
+      ref="HistoryVersion"
+    ></HistoryVersion>
   </div>
 </template>
 
 
 <style scoped>
-
-  .op-bar{
-    color: #333;
-    position: fixed;
-    top: 110px;
-    margin-left: 840px;
-    max-width: 250px;
-
-  }
-  .op-bar i{
-    cursor:pointer ;
-    font-size: 16px;
-    margin-right: 55px;
-    margin-bottom: 30px;
-  }
-
-
-  .icon-folder{
-    width: 15px;
-    height: 12px;
-    cursor: pointer;
-    margin-right: 55px;
-  }
-
-  a{
-    color: #333;
-  }
-
-  #header-right-btn{
-    font-size: 20px;
-    top: 15px;
-    right: 5%;
-    cursor: pointer;
-    position: fixed;
-  }
-
-  .el-dropdown-link{
-    color: #000;
-    font-size: 18px;
-    font-weight: bolder;
-  }
-
+.op-bar {
+  color: #333;
+  position: fixed;
+  top: 110px;
+  margin-left: 840px;
+  max-width: 250px;
+}
+.op-bar i {
+  cursor: pointer;
+  font-size: 16px;
+  margin-right: 55px;
+  margin-bottom: 30px;
+}
+
+.icon-folder {
+  width: 15px;
+  height: 12px;
+  cursor: pointer;
+  margin-right: 55px;
+}
+
+a {
+  color: #333;
+}
+
+#header-right-btn {
+  font-size: 20px;
+  top: 15px;
+  right: 5%;
+  cursor: pointer;
+  position: fixed;
+}
+
+.el-dropdown-link {
+  color: #000;
+  font-size: 18px;
+  font-weight: bolder;
+}
 </style>
 
 <script>
-  import HistoryVersion from '@/components/page/edit/HistoryVersion'
-  export default {
-  props:{
-    item_id:'',
-    item_domain:'',
-    page_id:'',
-    item_info:'',
-    page_info:{}
+import HistoryVersion from '@/components/page/edit/HistoryVersion'
+export default {
+  props: {
+    item_id: '',
+    item_domain: '',
+    page_id: '',
+    item_info: '',
+    page_info: {}
   },
-    data() {
-      return {
-        menu: [],
-        dialogVisible:false,
-        qr_page_link:"#",
-        qr_single_link:"#",
-        share_page_link:"",
-        share_single_link:"",
-        copyText1:'',
-        copyText2:'',
-        isCreateSiglePage:false,
-        showMore:false,
-        lang:"",
-        show_menu_btn:false,
-        show_op_bar:true
-      }
-    },
-  components:{
+  data() {
+    return {
+      menu: [],
+      dialogVisible: false,
+      qr_page_link: '#',
+      qr_single_link: '#',
+      share_page_link: '',
+      share_single_link: '',
+      copyText1: '',
+      copyText2: '',
+      isCreateSiglePage: false,
+      showMore: false,
+      lang: '',
+      show_menu_btn: false,
+      show_op_bar: true
+    }
+  },
+  components: {
     HistoryVersion
   },
-  methods:{
-    edit_page(){
-      var page_id = this.page_id > 0 ? this.page_id : 0 ;
-      var url = '/page/edit/'+this.item_id+'/'+page_id;
-      this.$router.push({path:url}) ;
+  methods: {
+    edit_page() {
+      var page_id = this.page_id > 0 ? this.page_id : 0
+      var url = '/page/edit/' + this.item_id + '/' + page_id
+      this.$router.push({ path: url })
     },
-    share_page(){
-      var page_id = this.page_id > 0 ? this.page_id : 0 ;
-      let path = this.item_domain ? this.item_domain : this.item_id ;
-      this.share_page_link = this.getRootPath()+"#/"+path+'?page_id='+page_id ;
-      //this.share_single_link= this.getRootPath()+"/page/"+page_id ;
-      this.qr_page_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_page_link);
-      //this.qr_single_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_single_link);
-      this.dialogVisible = true;
-      this.copyText1 = this.item_info.item_name+' - '+this.page_info.page_title+"\r\n"+ this.share_page_link;
-      this.copyText2 = this.page_info.page_title+"\r\n"+ this.share_single_link;
+    share_page() {
+      var page_id = this.page_id > 0 ? this.page_id : 0
+      let path = this.item_domain ? this.item_domain : this.item_id
+      this.share_page_link =
+        this.getRootPath() + '#/' + path + '?page_id=' + page_id
+      // this.share_single_link= this.getRootPath()+"/page/"+page_id ;
+      this.qr_page_link =
+        DocConfig.server +
+        '/api/common/qrcode&size=3&url=' +
+        encodeURIComponent(this.share_page_link)
+      // this.qr_single_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_single_link);
+      this.dialogVisible = true
+      this.copyText1 =
+        this.item_info.item_name +
+        ' - ' +
+        this.page_info.page_title +
+        '\r\n' +
+        this.share_page_link
+      this.copyText2 =
+        this.page_info.page_title + '\r\n' + this.share_single_link
     },
-    dropdown_callback(data){
+    dropdown_callback(data) {
       if (data) {
-        data();
-      };
+        data()
+      }
     },
-    show_page_info(){
-      var html ="本页面由 "+this.page_info.author_username+' 于 '+this.page_info.addtime+' 更新';
-      this.$alert(html);
+    show_page_info() {
+      var html =
+        '本页面由 ' +
+        this.page_info.author_username +
+        ' 于 ' +
+        this.page_info.addtime +
+        ' 更新'
+      this.$alert(html)
     },
 
-    //展示历史版本
-    ShowHistoryVersion(){
-        let childRef = this.$refs.HistoryVersion ;//获取子组件
-        childRef.show() ; 
+    // 展示历史版本
+    ShowHistoryVersion() {
+      let childRef = this.$refs.HistoryVersion // 获取子组件
+      childRef.show()
     },
 
-    delete_page(){
-      var page_id = this.page_id > 0 ? this.page_id : 0 ;
-      var that = this ;
-      var url = DocConfig.server+'/api/page/delete';
+    delete_page() {
+      var page_id = this.page_id > 0 ? this.page_id : 0
+      var that = this
+      var url = DocConfig.server + '/api/page/delete'
 
       this.$confirm(that.$t('comfirm_delete'), ' ', {
         confirmButtonText: that.$t('confirm'),
         cancelButtonText: that.$t('cancel'),
         type: 'warning'
       }).then(() => {
-        var params = new URLSearchParams();
-        params.append('page_id',  page_id);
-        that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            window.location.reload() 
-          }else{
-            that.$alert(response.data.error_message);
+        var params = new URLSearchParams()
+        params.append('page_id', page_id)
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            window.location.reload()
+          } else {
+            that.$alert(response.data.error_message)
           }
-        }); 
-      });
+        })
+      })
     },
-    onCopy(){
-      this.$message(this.$t("copy_success"));
+    onCopy() {
+      this.$message(this.$t('copy_success'))
     },
-    CreateSiglePage(){
-        var page_id = this.page_id > 0 ? this.page_id : 0 ;
-        var that = this ;
-        var url = DocConfig.server+'/api/page/createSinglePage';
-        var params = new URLSearchParams();
-        params.append('page_id',  page_id);
-        params.append('isCreateSiglePage',  this.isCreateSiglePage);
-
-        that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            var unique_key = response.data.data.unique_key ;
-            if (unique_key) {
-              that.share_single_link = that.getRootPath()+"#/p/"+unique_key ;
-            }else{
-              that.share_single_link = '';
-            }
-            
-
-          }else{
-            that.$alert(response.data.error_message);
+    CreateSiglePage() {
+      var page_id = this.page_id > 0 ? this.page_id : 0
+      var that = this
+      var url = DocConfig.server + '/api/page/createSinglePage'
+      var params = new URLSearchParams()
+      params.append('page_id', page_id)
+      params.append('isCreateSiglePage', this.isCreateSiglePage)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          var unique_key = response.data.data.unique_key
+          if (unique_key) {
+            that.share_single_link = that.getRootPath() + '#/p/' + unique_key
+          } else {
+            that.share_single_link = ''
           }
-        });
-
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
     },
-    new_page(){
-      var url = '/page/edit/'+this.item_info.item_id+'/0';
-      this.$router.push({path:url});
+    new_page() {
+      var url = '/page/edit/' + this.item_info.item_id + '/0'
+      this.$router.push({ path: url })
     },
 
-    mamage_catalog(){
-      var url = '/catalog/'+this.item_info.item_id;
-      this.$router.push({path:url});
+    mamage_catalog() {
+      var url = '/catalog/' + this.item_info.item_id
+      this.$router.push({ path: url })
     },
-    showMoreAction(){
-      this.showMore = true ;
-      var element = document.getElementById('page_md_content').getElementsByClassName('open-list');
-      element[0].style.top = '330px';
+    showMoreAction() {
+      this.showMore = true
+      var element = document
+        .getElementById('page_md_content')
+        .getElementsByClassName('open-list')
+      element[0].style.top = '330px'
     },
-    hideMoreAction(){
-      this.showMore = false ;
-      var element = document.getElementById('page_md_content').getElementsByClassName('open-list');
-      element[0].style.top = '230px';
+    hideMoreAction() {
+      this.showMore = false
+      var element = document
+        .getElementById('page_md_content')
+        .getElementsByClassName('open-list')
+      element[0].style.top = '230px'
     },
     handleCommand(command) {
-      switch(command){
+      switch (command) {
         case 'goback':
-            this.$router.push({path:"/item/index"})
-            break;
+          this.$router.push({ path: '/item/index' })
+          break
         case 'share':
-            this.share_page();
-            break;
+          this.share_page()
+          break
         case 'new_page':
-            this.new_page();
-            break;
+          this.new_page()
+          break
         case 'new_catalog':
-            this.mamage_catalog();
-            break;
+          this.mamage_catalog()
+          break
         case 'edit_page':
-            this.edit_page();
-            break;
+          this.edit_page()
+          break
         case 'ShowHistoryVersion':
-            this.ShowHistoryVersion();
-            break;
+          this.ShowHistoryVersion()
+          break
         case 'copy':
-            this.$router.push({path:'/page/edit/'+this.item_info.item_id+'/0?copy_page_id='+this.page_id})
-            break; 
+          this.$router.push({
+            path:
+              '/page/edit/' +
+              this.item_info.item_id +
+              '/0?copy_page_id=' +
+              this.page_id
+          })
+          break
         case 'export':
-            this.$router.push({path:"/item/export/"+this.item_info.item_id})
-            break;
+          this.$router.push({ path: '/item/export/' + this.item_info.item_id })
+          break
         case 'delete_page':
-            this.delete_page();
-            break;    
+          this.delete_page()
+          break
       }
     }
-    
   },
-  mounted () {
-    var that = this ;
-    this.lang = DocConfig.lang ;
+  mounted() {
+    var that = this
+    this.lang = DocConfig.lang
     if (this.page_info.unique_key) {
-      this.isCreateSiglePage = true ;
-      this.share_single_link = this.getRootPath()+"#/p/"+this.page_info.unique_key ;
-    };
-    document.onkeydown=function(e){  //对整个页面文档监听 其键盘快捷键
-      var keyNum=window.event ? e.keyCode :e.which;  //获取被按下的键值 
-      if (keyNum == 69 && e.ctrlKey) {  //Ctrl +e 为编辑
-        that.edit_page();
-        e.preventDefault();
-      };
-
-      if (keyNum == 46 && e.ctrlKey) {  //Ctrl +del 为删除
-        that.delete_page();
-        e.preventDefault();
-      };
+      this.isCreateSiglePage = true
+      this.share_single_link =
+        this.getRootPath() + '#/p/' + this.page_info.unique_key
+    }
+    document.onkeydown = function(e) {
+      // 对整个页面文档监听 其键盘快捷键
+      var keyNum = window.event ? e.keyCode : e.which // 获取被按下的键值
+      if (keyNum == 69 && e.ctrlKey) {
+        // Ctrl +e 为编辑
+        that.edit_page()
+        e.preventDefault()
+      }
 
+      if (keyNum == 46 && e.ctrlKey) {
+        // Ctrl +del 为删除
+        that.delete_page()
+        e.preventDefault()
+      }
     }
 
-    if ( this.isMobile() || ( window.innerWidth< 1300 && !this.item_info.is_login ) ) {
-        this.show_menu_btn = false ;
-        this.show_op_bar = false;
+    if (
+      this.isMobile() ||
+      (window.innerWidth < 1300 && !this.item_info.is_login)
+    ) {
+      this.show_menu_btn = false
+      this.show_op_bar = false
     }
-    if (this.isMobile() || ( window.innerWidth< 1300 && this.item_info.is_login ) ) {
-        this.show_menu_btn = true ;
-        this.show_op_bar = false;
+    if (
+      this.isMobile() ||
+      (window.innerWidth < 1300 && this.item_info.is_login)
+    ) {
+      this.show_menu_btn = true
+      this.show_op_bar = false
     }
-
-
-
   },
-  watch:{
-    page_info:function(){
+  watch: {
+    page_info: function() {
       if (this.page_info.unique_key) {
-        this.isCreateSiglePage = true ;
-        this.share_single_link = this.getRootPath()+"#/p/"+this.page_info.unique_key ;
-      }else{
-        this.isCreateSiglePage = false ;
-        this.share_single_link = '' ;
+        this.isCreateSiglePage = true
+        this.share_single_link =
+          this.getRootPath() + '#/p/' + this.page_info.unique_key
+      } else {
+        this.isCreateSiglePage = false
+        this.share_single_link = ''
       }
     }
   }
-  
-};
+}
 </script>
diff --git a/web_src/src/components/item/show/show_regular_item/Toc.vue b/web_src/src/components/item/show/show_regular_item/Toc.vue
index 82f07def9..7e7600f87 100644
--- a/web_src/src/components/item/show/show_regular_item/Toc.vue
+++ b/web_src/src/components/item/show/show_regular_item/Toc.vue
@@ -1,176 +1,176 @@
 
 <template>
-  <div> 
-
-  </div>
+  <div></div>
 </template>
 <script>
 export default {
-
-  data () {
-    return {
-
-    }
+  data() {
+    return {}
   },
-  mounted () {
-    var that = this ; 
-    //循环检测jq有没有加载成功
+  mounted() {
+    var that = this
+    // 循环检测jq有没有加载成功
     var check_jQuery_is_load = setInterval(function() {
-        try{
-            if ($ != undefined) {
-                clearInterval(check_jQuery_is_load);
-                that.toc_main_script();
-            }
-        } catch(e) {}
-    },200);
-
+      try {
+        if ($ != undefined) {
+          clearInterval(check_jQuery_is_load)
+          that.toc_main_script()
+        }
+      } catch (e) {}
+    }, 200)
   },
   methods: {
-  toc_main_script() {
-
-        //监听点击事件并滑动到相应位置
-        $(document).on('click', '.markdown-toc-list a[href]', function(event) {
-            event.preventDefault();
-            var name = $(this).attr('href').substring(1);
-            var top_at_window = $('[name="'+name+'"]').offset().top;
-            $("html, body").animate({scrollTop: top_at_window}, 300)
-        });
-        //监听展开事件
-        $(document).on('click', '.markdown-toc', function(event) {
-            if (!$(event.target).is("a")) {
-                $('.markdown-toc').toggleClass('open-list');
-            }
-        });
-        //监听鼠标滚动事件给与颜色加亮
-        $(window).scroll(function(event) {
-            var activeName = "";
-            $('.markdown-toc-list a[href]').each(function(index, el) {
-                var name = $(el).attr('href').substring(1);
-                if ($('[name="'+name+'"]').offset().top - $(window).scrollTop() < 1) {
-                    activeName = name;
-                } else {
-                    return false;
-                }
-            });
-            $('.markdown-toc-list a').removeClass('current');
-            $('.markdown-toc-list a[href="#'+activeName+'"]').addClass('current');
-        });
-
-        //不是移动设备并且不是其他小屏设备，则自动展开目录
-        if( !this.isMobile() &&  window.screen.width > 1000){
-            this.$nextTick(() => {
-                setTimeout(function(){
-                    $(".markdown-toc").click();
-                },200);
-            });
+    toc_main_script() {
+      // 监听点击事件并滑动到相应位置
+      $(document).on('click', '.markdown-toc-list a[href]', function(event) {
+        event.preventDefault()
+        var name = $(this)
+          .attr('href')
+          .substring(1)
+        var top_at_window = $('[name="' + name + '"]').offset().top
+        $('html, body').animate({ scrollTop: top_at_window }, 300)
+      })
+      // 监听展开事件
+      $(document).on('click', '.markdown-toc', function(event) {
+        if (!$(event.target).is('a')) {
+          $('.markdown-toc').toggleClass('open-list')
         }
+      })
+      // 监听鼠标滚动事件给与颜色加亮
+      $(window).scroll(function(event) {
+        var activeName = ''
+        $('.markdown-toc-list a[href]').each(function(index, el) {
+          var name = $(el)
+            .attr('href')
+            .substring(1)
+          if (
+            $('[name="' + name + '"]').offset().top - $(window).scrollTop() <
+            1
+          ) {
+            activeName = name
+          } else {
+            return false
+          }
+        })
+        $('.markdown-toc-list a').removeClass('current')
+        $('.markdown-toc-list a[href="#' + activeName + '"]').addClass(
+          'current'
+        )
+      })
 
-
-
-    },
+      // 不是移动设备并且不是其他小屏设备，则自动展开目录
+      if (!this.isMobile() && window.screen.width > 1000) {
+        this.$nextTick(() => {
+          setTimeout(function() {
+            $('.markdown-toc').click()
+          }, 200)
+        })
+      }
+    }
   },
-  destroyed () {
-    //把那些监听了的事件去掉
-    $(document).off('click', '.markdown-toc-list a[href]');
-    $(document).off('click', '.markdown-toc');
-    $(".markdown-toc").remove();
-
+  destroyed() {
+    // 把那些监听了的事件去掉
+    $(document).off('click', '.markdown-toc-list a[href]')
+    $(document).off('click', '.markdown-toc')
+    $('.markdown-toc').remove()
   }
 }
 </script>
 <!-- 注意，这里是全局css -->
 <style >
 .page_content_main .markdown-toc {
-    position: fixed;
-    top: 230px;
-    margin-left: 800px;
-    min-width: 32px;
-    min-height: 32px;
-    cursor: pointer;
-    z-index: 1;
+  position: fixed;
+  top: 230px;
+  margin-left: 800px;
+  min-width: 32px;
+  min-height: 32px;
+  cursor: pointer;
+  z-index: 1;
 }
 .page_content_main .markdown-toc:before {
-    display: none; /*先隐藏*/
-    content:"\e63f";
-    font-family: element-icons !important;
-    color: #909399;
-    position: absolute;
-    top: 0;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    background: #fafafa;
-    border: 1px solid #DCDFE6;
-    border-radius: 5px;
-    cursor: pointer;
-    box-shadow: 0 5px 5px #F2F6FC;
-    transition: .25s;
+  display: none; /*先隐藏*/
+  content: '\e63f';
+  font-family: element-icons !important;
+  color: #909399;
+  position: absolute;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background: #fafafa;
+  border: 1px solid #dcdfe6;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: 0 5px 5px #f2f6fc;
+  transition: 0.25s;
 }
 .page_content_main .markdown-toc.open-list:before {
-    border: 1px solid #DCDFE6;
-    color: #909399;
-    border-radius: 50%;
+  border: 1px solid #dcdfe6;
+  color: #909399;
+  border-radius: 50%;
 }
 .page_content_main .markdown-toc > .markdown-toc-list {
-    position: relative;
-    z-index: 999;
-    margin: 0;
-    margin-top: 20px;
-    list-style: none;
-    min-width: 150px;
-    max-width: 200px;
-    padding: 5px 0;
-    background: #fafafa;
-    border: 1px solid #DCDFE6;
-    border-radius: 5px;
-    box-shadow: 0 5px 5px #F2F6FC;
-    max-height: 320px;
-    overflow-y: auto;
-    transform: scale(0);
-    margin-right: -230px;
-    margin-bottom: -270px;
-    opacity: 0;
-    visibility: hidden;
-    transform-origin: top left;
-    transition: .25s ease 0s, margin-right 0s ease .25s, margin-bottom 0s ease .25s;
+  position: relative;
+  z-index: 999;
+  margin: 0;
+  margin-top: 20px;
+  list-style: none;
+  min-width: 150px;
+  max-width: 200px;
+  padding: 5px 0;
+  background: #fafafa;
+  border: 1px solid #dcdfe6;
+  border-radius: 5px;
+  box-shadow: 0 5px 5px #f2f6fc;
+  max-height: 320px;
+  overflow-y: auto;
+  transform: scale(0);
+  margin-right: -230px;
+  margin-bottom: -270px;
+  opacity: 0;
+  visibility: hidden;
+  transform-origin: top left;
+  transition: 0.25s ease 0s, margin-right 0s ease 0.25s,
+    margin-bottom 0s ease 0.25s;
 }
 .page_content_main .markdown-toc.open-list .markdown-toc-list {
-    margin-right: 0px;
-    margin-bottom: 0px;
-    transform: scale(1) translateY(-44px);
-    opacity: 1;
-    visibility: visible;
-    transition: .5s cubic-bezier(0.4,1.7,0.6,1), margin-right 0s, margin-bottom 0s;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  transform: scale(1) translateY(-44px);
+  opacity: 1;
+  visibility: visible;
+  transition: 0.5s cubic-bezier(0.4, 1.7, 0.6, 1), margin-right 0s,
+    margin-bottom 0s;
 }
 .page_content_main .markdown-toc li {
-    list-style: none !important;
+  list-style: none !important;
 }
 .page_content_main .markdown-toc li a {
-    display: block;
-    padding: 3px 15px;
-    font-size: 12px;
-    color: #606266;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow:hidden;
-    transition: .15s;
+  display: block;
+  padding: 3px 15px;
+  font-size: 12px;
+  color: #606266;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  transition: 0.15s;
 }
 .page_content_main .markdown-toc li a.current {
-    background: #ecf5ff;
-    color: #40a9ff;
-    box-shadow: 2px 0px #40a9ff inset;
+  background: #ecf5ff;
+  color: #40a9ff;
+  box-shadow: 2px 0px #40a9ff inset;
 }
 .page_content_main .markdown-toc li a:hover {
-    background: #d9ecff;
-    text-decoration: none;
-    color: #40a9ff;
-    transition: 0s;
+  background: #d9ecff;
+  text-decoration: none;
+  color: #40a9ff;
+  transition: 0s;
 }
 .page_content_main .markdown-toc li ul {
-    padding: 0;
+  padding: 0;
 }
 .page_content_main .markdown-toc li li a {
-    padding-left: 30px;
+  padding-left: 30px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web_src/src/components/item/show/show_single_page_item/Index.vue b/web_src/src/components/item/show/show_single_page_item/Index.vue
index cb84130fb..0501cbc9c 100644
--- a/web_src/src/components/item/show/show_single_page_item/Index.vue
+++ b/web_src/src/components/item/show/show_single_page_item/Index.vue
@@ -1,131 +1,148 @@
 <template>
   <div class="hello grey-bg">
-    <Header> </Header>
-
-      <div id="header"></div>
-      <div class="container doc-container" id="doc-container">
-         <div class="doc-title-box">
-            <span id="doc-title-span" class="dn"></span>
-            <h2 id="doc-title">{{page_title}}</h2>
-
-            <div class="tool-bar pull-right">
-
-                <el-button type="text"   @click="share_item">{{$t('share')}}</el-button>
-                <el-button type="text" @click="edit_page"  v-if="item_info.ItemPermn && item_info.is_archived < 1" >{{$t('edit')}}</el-button>
-                  &nbsp;&nbsp;&nbsp;
-                <el-dropdown>
-                  <span class="el-dropdown-link">
-                    {{$t('item')}}<i class="el-icon-arrow-down el-icon--right"></i>
-                  </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <router-link :to="'/item/export/'+item_info.item_id"  v-if="item_info.ItemPermn"><el-dropdown-item>{{$t('export')}}</el-dropdown-item></router-link>
-                    <router-link :to="'/item/setting/'+item_info.item_id"  v-if="item_info.ItemCreator"><el-dropdown-item>{{$t('item_setting')}}</el-dropdown-item></router-link>
-                    <router-link to="/item/index"><el-dropdown-item >{{$t('goback')}}</el-dropdown-item></router-link>
-                  </el-dropdown-menu>
-                  </el-dropdown-menu>
-                </el-dropdown>
-            </div>
-
+    <Header></Header>
+
+    <div id="header"></div>
+    <div class="container doc-container" id="doc-container">
+      <div class="doc-title-box">
+        <span id="doc-title-span" class="dn"></span>
+        <h2 id="doc-title">{{page_title}}</h2>
+
+        <div class="tool-bar pull-right">
+          <el-button type="text" @click="share_item">{{$t('share')}}</el-button>
+          <el-button
+            type="text"
+            @click="edit_page"
+            v-if="item_info.ItemPermn && item_info.is_archived < 1"
+          >{{$t('edit')}}</el-button>&nbsp;&nbsp;&nbsp;
+          <el-dropdown>
+            <span class="el-dropdown-link">
+              {{$t('item')}}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <router-link :to="'/item/export/'+item_info.item_id" v-if="item_info.ItemPermn">
+                <el-dropdown-item>{{$t('export')}}</el-dropdown-item>
+              </router-link>
+              <router-link :to="'/item/setting/'+item_info.item_id" v-if="item_info.ItemCreator">
+                <el-dropdown-item>{{$t('item_setting')}}</el-dropdown-item>
+              </router-link>
+              <router-link to="/item/index">
+                <el-dropdown-item>{{$t('goback')}}</el-dropdown-item>
+              </router-link>
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
-        <div id="doc-body" >
-
-        <div id="page_md_content"  class="page_content_main"><Editormd v-bind:content="content" v-if="content" type="html"></Editormd></div>
+      </div>
+      <div id="doc-body">
+        <div id="page_md_content" class="page_content_main">
+          <Editormd v-bind:content="content" v-if="content" type="html"></Editormd>
         </div>
-
       </div>
-  <el-dialog
-    :title="$t('share')"
-    :visible.sync="dialogVisible"
-    width="600px"
-    :close-on-click-modal="false"
-    class="text-center"
+    </div>
+    <el-dialog
+      :title="$t('share')"
+      :visible.sync="dialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      class="text-center"
     >
-    
-    <p>{{$t('item_address')}} :  <code >{{share_item_link}}</code></p>
-    <p><a href="javascript:;" class="home-phone-butt" v-clipboard:copyhttplist="copyText" v-clipboard:success="onCopy">{{$t('copy_link')}}</a></p>
-        <p style="border-bottom: 1px solid #eee;"><img   id="" style="width:114px;height:114px;" :src="qr_item_link"> </p>
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="dialogVisible = false">{{$t('confirm')}}</el-button>
-    </span>
-  </el-dialog>
-  <BackToTop></BackToTop>
-    <Footer> </Footer>
-    <div class=""></div>
+      <p>
+        {{$t('item_address')}} :
+        <code>{{share_item_link}}</code>
+      </p>
+      <p>
+        <a
+          href="javascript:;"
+          class="home-phone-butt"
+          v-clipboard:copyhttplist="copyText"
+          v-clipboard:success="onCopy"
+        >{{$t('copy_link')}}</a>
+      </p>
+      <p style="border-bottom: 1px solid #eee;">
+        <img id style="width:114px;height:114px;" :src="qr_item_link" />
+      </p>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">{{$t('confirm')}}</el-button>
+      </span>
+    </el-dialog>
+    <BackToTop></BackToTop>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style scoped>
+#page_md_content {
+  padding: 10px 10px 90px 10px;
+  overflow: hidden;
+  font-size: 11pt;
+  line-height: 1.7;
+  color: #333;
+}
 
-  #page_md_content{
-    
-       padding: 10px 10px 90px 10px;
-      overflow: hidden;
-      font-size: 11pt;
-      line-height: 1.7;
-      color: #333;
-  }
-
-  .doc-container {
-      position: static;
-      -webkit-box-shadow: 0px 1px 6px #ccc;
-      -moz-box-shadow: 0px 1px 6px #ccc;
-      -ms-box-shadow: 0px 1px 6px #ccc;
-      -o-box-shadow: 0px 1px 6px #ccc;
-      box-shadow: 0px 1px 6px #ccc;
-      background-color: #fff;
-      border-bottom: 1px solid #d9d9d9;
-      margin-bottom: 20px;
-      width: 800px;
-      min-height: 500px;
-      margin-left: auto;
-      margin-right: auto;
-      padding: 20px;
-  }
+.doc-container {
+  position: static;
+  -webkit-box-shadow: 0px 1px 6px #ccc;
+  -moz-box-shadow: 0px 1px 6px #ccc;
+  -ms-box-shadow: 0px 1px 6px #ccc;
+  -o-box-shadow: 0px 1px 6px #ccc;
+  box-shadow: 0px 1px 6px #ccc;
+  background-color: #fff;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+  width: 800px;
+  min-height: 500px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+}
 
-  #header{
-    height: 80px;
-  }
+#header {
+  height: 80px;
+}
 
-  #doc-body{
-    width: 90%;
-    margin: 0 auto;
-    background-color: #fff;
-  }
+#doc-body {
+  width: 90%;
+  margin: 0 auto;
+  background-color: #fff;
+}
 
-  .doc-title-box{
-      height: auto;
-      margin: 30px 100px 10px 100px;
-      width: auto;
-      border-bottom: 1px solid #ebebeb;
-      padding-bottom: 10px;
-      width: 90%;
-      margin: 10px auto;
-  }
-  #footer{
-      margin: 0 auto;
-      width: 180px;
-      font-size: 8px;
-      color: #959595;
-  }
+.doc-title-box {
+  height: auto;
+  margin: 30px 100px 10px 100px;
+  width: auto;
+  border-bottom: 1px solid #ebebeb;
+  padding-bottom: 10px;
+  width: 90%;
+  margin: 10px auto;
+}
+#footer {
+  margin: 0 auto;
+  width: 180px;
+  font-size: 8px;
+  color: #959595;
+}
 
-  pre ol{
-    list-style: none;
-  }
+pre ol {
+  list-style: none;
+}
 
-  .markdown-body pre {
-    background-color: #f7f7f9;
-    border: 1px solid #e1e1e8;
-  }
-  .hljs{
-    background-color: #f7f7f9;
-  }
-  .tool-bar{
-    margin-top: -38px;
-  }
-  .editormd-html-preview, .editormd-preview-container{
-    padding: 0px;
-    font-size: 16px;
-  }
+.markdown-body pre {
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.hljs {
+  background-color: #f7f7f9;
+}
+.tool-bar {
+  margin-top: -38px;
+}
+.editormd-html-preview,
+.editormd-preview-container {
+  padding: 0px;
+  font-size: 16px;
+}
 </style>
 
 <script>
@@ -134,86 +151,88 @@ import BackToTop from '@/components/common/BackToTop'
 import Toc from '@/components/common/Toc'
 
 export default {
-  props:{
-    item_info:'',
+  props: {
+    item_info: ''
   },
-  data () {
+  data() {
     return {
-      menu:'',
-      content:"",
-      page_title:'',
-      page_id:'',
-      dialogVisible:false,
-      share_item_link:'',
-      qr_item_link:'',
-      copyText:'',
-    };
+      menu: '',
+      content: '',
+      page_title: '',
+      page_id: '',
+      dialogVisible: false,
+      share_item_link: '',
+      qr_item_link: '',
+      copyText: ''
+    }
   },
-  components:{
+  components: {
     Editormd,
     BackToTop,
     Toc
   },
-  methods:{
-
-    get_page_content(page_id){
-        var that = this ;
-        var url = DocConfig.server+'/api/page/info';
-        if (! page_id) {
-          page_id = that.page_id;
-        };
-        var params = new URLSearchParams();
-        params.append('page_id',  page_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              that.content = response.data.data.page_content ;
-              that.page_title = response.data.data.page_title ;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
+  methods: {
+    get_page_content(page_id) {
+      var that = this
+      var url = DocConfig.server + '/api/page/info'
+      if (!page_id) {
+        page_id = that.page_id
+      }
+      var params = new URLSearchParams()
+      params.append('page_id', page_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            // that.$message.success("加载成功");
+            that.content = response.data.data.page_content
+            that.page_title = response.data.data.page_title
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
     },
 
-    edit_page(){
-      var page_id = this.page_id > 0 ? this.page_id : 0 ;
-      var url = '/page/edit/'+this.item_info.item_id+'/'+page_id;
-      this.$router.push({path:url}) ;
+    edit_page() {
+      var page_id = this.page_id > 0 ? this.page_id : 0
+      var url = '/page/edit/' + this.item_info.item_id + '/' + page_id
+      this.$router.push({ path: url })
     },
-    share_item(){
-      this.share_item_link =  this.getRootPath()+"#/"+this.item_info.item_id  ;
-      this.qr_item_link = DocConfig.server +'/api/common/qrcode&size=3&url='+encodeURIComponent(this.share_item_link);
-      this.dialogVisible = true;
-      this.copyText = this.item_info.item_name+"  -- ShowDoc \r\n"+ this.share_item_link;
+    share_item() {
+      this.share_item_link = this.getRootPath() + '#/' + this.item_info.item_id
+      this.qr_item_link =
+        DocConfig.server +
+        '/api/common/qrcode&size=3&url=' +
+        encodeURIComponent(this.share_item_link)
+      this.dialogVisible = true
+      this.copyText =
+        this.item_info.item_name + '  -- ShowDoc \r\n' + this.share_item_link
     },
-    AdaptToMobile(){
-      var doc_container = document.getElementById('doc-container') ;
-      doc_container.style.width = '95%';
-      doc_container.style.padding = '5px';
-      var header = document.getElementById('header') ;
-      header.style.height = '10px';
+    AdaptToMobile() {
+      var doc_container = document.getElementById('doc-container')
+      doc_container.style.width = '95%'
+      doc_container.style.padding = '5px'
+      var header = document.getElementById('header')
+      header.style.height = '10px'
     },
-    onCopy(){
-      this.$message(this.$t("copy_success"));
+    onCopy() {
+      this.$message(this.$t('copy_success'))
     }
   },
-  mounted () {
-    this.menu = this.item_info.menu ;
-    this.page_id = this.menu.pages.page_id ;
-    this.get_page_content();
+  mounted() {
+    this.menu = this.item_info.menu
+    this.page_id = this.menu.pages.page_id
+    this.get_page_content()
 
-    //根据屏幕宽度进行响应(应对移动设备的访问)
-    if( this.isMobile() ||  window.screen.width< 1000){
+    // 根据屏幕宽度进行响应(应对移动设备的访问)
+    if (this.isMobile() || window.screen.width < 1000) {
       this.$nextTick(() => {
-        this.AdaptToMobile();
-      });
+        this.AdaptToMobile()
+      })
     }
-
   }
 }
 </script>
diff --git a/web_src/src/components/notice/Index.vue b/web_src/src/components/notice/Index.vue
index b8028a010..7f9f3dcdb 100644
--- a/web_src/src/components/notice/Index.vue
+++ b/web_src/src/components/notice/Index.vue
@@ -1,192 +1,158 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-          <template>
-            <el-button type="text" class="goback-btn "  @click="feedback" ><span class="feedback">反馈</span></el-button><router-link to="/item/index">返回</router-link>
-            <el-tabs  value="first" type="card">
-              <el-tab-pane label="我的消息" name="first">
-
-               <el-table align="left"
-                    :data="allList"
-                     height="350"
-                     :default-expand-all="false"
-                    style="width: 100%">
-
-                    <el-table-column
-                      prop="notice_title"
-                      label="标题"
-                      >
-                    <template slot-scope="props" >
-
-                      <span v-html="props.row.notice_title"></span>
-                      <el-badge class="mark" value="未读" v-if="props.row.is_read == 0"/>
-                    </template>
-
-                    </el-table-column>
-                    <el-table-column
-                      prop="from_name"
-                      label="发送人">
-                    </el-table-column>
-                    <el-table-column
-                      prop="notice_time"
-                      label="时间"
-                      width="100">
-                    </el-table-column>
-                    <el-table-column
-                      prop=""
-                      label="操作">
-                      <template slot-scope="scope">
-                        <el-button @click="show_notice(scope.row)" type="text" size="small">查看</el-button>
-                        <el-button @click="delete_notice(scope.row)" type="text" size="small">删除</el-button>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-
+      <el-card class="center-card">
+        <template>
+          <el-button type="text" class="goback-btn" @click="feedback">
+            <span class="feedback">反馈</span>
+          </el-button>
+          <router-link to="/item/index">返回</router-link>
+          <el-tabs value="first" type="card">
+            <el-tab-pane label="我的消息" name="first">
+              <el-table
+                align="left"
+                :data="allList"
+                height="350"
+                :default-expand-all="false"
+                style="width: 100%"
+              >
+                <el-table-column prop="notice_title" label="标题">
+                  <template slot-scope="props">
+                    <span v-html="props.row.notice_title"></span>
+                    <el-badge class="mark" value="未读" v-if="props.row.is_read == 0" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="from_name" label="发送人"></el-table-column>
+                <el-table-column prop="notice_time" label="时间" width="100"></el-table-column>
+                <el-table-column prop label="操作">
+                  <template slot-scope="scope">
+                    <el-button @click="show_notice(scope.row)" type="text" size="small">查看</el-button>
+                    <el-button @click="delete_notice(scope.row)" type="text" size="small">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
             </el-tab-pane>
-
-
-            </el-tabs>
-          </template>
-          </el-card>
+          </el-tabs>
+        </template>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      unreadList:[],
-      allList:[]
+      unreadList: [],
+      allList: []
     }
-
   },
   methods: {
-
-      getList(notice_type){
-        if (!notice_type) {
-          notice_type = 'all';
-        };
-        var that = this ;
-        var url = DocConfig.server+'/api/notice/getList';
-        var params = new URLSearchParams();
-        params.append('notice_type',  notice_type);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data
-              if (notice_type == 'unread') {
-                that.unreadList =  Info;
-              }else{
-                that.allList =  Info;
-              }
-              
-            }else{
-              that.$alert(response.data.error_message);
-            } 
-          });
-      },
-
-      show_notice(row){
-        var notice_id = row.notice_id ;
-        row.is_read = 1 ;
-        var that = this ;
-
-        that.$alert(row.notice_content, '', {
-          dangerouslyUseHTMLString: true
-        });
-
-        var url = DocConfig.server+'/api/notice/setRead';
-        var params = new URLSearchParams();
-        params.append('notice_id',  notice_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data ;
-            }else{
-              that.$alert(response.data.error_message);
-            } 
-          });
-      },
-      delete_notice(row){
-        var notice_id = row.notice_id ;
-        var that = this ;
-        var url = DocConfig.server+'/api/notice/delete';
-
-        this.$confirm('确认删除吗?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          var params = new URLSearchParams();
-          params.append('notice_id',  notice_id);
-          that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              that.getList() ;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-          }); 
-        });
-      },
-      feedback(){
-        this.$alert("对showdoc.cc的任何疑问、建议都可以反馈到 xing7th@gmail.com");
+    getList(notice_type) {
+      if (!notice_type) {
+        notice_type = 'all'
       }
-
-
-  },
-
-  mounted(){
-    this.getList() ;
+      var that = this
+      var url = DocConfig.server + '/api/notice/getList'
+      var params = new URLSearchParams()
+      params.append('notice_type', notice_type)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          var Info = response.data.data
+          if (notice_type == 'unread') {
+            that.unreadList = Info
+          } else {
+            that.allList = Info
+          }
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+
+    show_notice(row) {
+      var notice_id = row.notice_id
+      row.is_read = 1
+      var that = this
+
+      that.$alert(row.notice_content, '', {
+        dangerouslyUseHTMLString: true
+      })
+
+      var url = DocConfig.server + '/api/notice/setRead'
+      var params = new URLSearchParams()
+      params.append('notice_id', notice_id)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    delete_notice(row) {
+      var notice_id = row.notice_id
+      var that = this
+      var url = DocConfig.server + '/api/notice/delete'
+
+      this.$confirm('确认删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams()
+        params.append('notice_id', notice_id)
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.getList()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
+    },
+    feedback() {
+      this.$alert('对showdoc.cc的任何疑问、建议都可以反馈到 xing7th@gmail.com')
+    }
   },
 
-  beforeCreate() {
-
+  mounted() {
+    this.getList()
   },
-  beforeDestroy(){
 
-  }
-  
+  beforeCreate() {},
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
   width: 650px;
   height: 500px;
 }
 
-.infoForm{
-  width:350px;
+.infoForm {
+  width: 350px;
   margin-left: 60px;
   margin-top: 30px;
 }
 
-.goback-btn{
+.goback-btn {
   margin-left: 500px;
 }
 
-.feedback{
+.feedback {
   font-size: 12px;
   margin-right: 30px;
 }
diff --git a/web_src/src/components/page/Diff.vue b/web_src/src/components/page/Diff.vue
index e6f64ba35..9225c11d5 100644
--- a/web_src/src/components/page/Diff.vue
+++ b/web_src/src/components/page/Diff.vue
@@ -1,26 +1,24 @@
 <!-- 更多模板 -->
 <template>
   <div class="hello">
-    <Header> </Header>
-    <link href="static/diff/diffview.css" rel="stylesheet">
+    <Header></Header>
+    <link href="static/diff/diffview.css" rel="stylesheet" />
     <el-container class="container-narrow">
-        <div class="textInput">
-          <textarea id="baseText" v-html="content" style="display:none;">    </textarea>
-        </div>
-        <div class="textInput spacer">
-          <textarea id="newText" v-html="historyContent" style="display:none;">    </textarea>
-        </div>
+      <div class="textInput">
+        <textarea id="baseText" v-html="content" style="display:none;"></textarea>
+      </div>
+      <div class="textInput spacer">
+        <textarea id="newText" v-html="historyContent" style="display:none;"></textarea>
+      </div>
 
-        <div id="diffoutput"> </div>
-
-      </el-container>
-    <Footer> </Footer>
-    <div class=""></div>
+      <div id="diffoutput"></div>
+    </el-container>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style scoped>
-
 .top {
   text-align: center;
 }
@@ -31,8 +29,8 @@
   display: none;
 }
 textarea {
-  width:100%;
-  height:300px;
+  width: 100%;
+  height: 300px;
 }
 label:hover {
   text-decoration: underline;
@@ -48,91 +46,82 @@ label:hover {
   padding: 1em;
 }
 #diffoutput {
-    margin: 0 auto;
+  margin: 0 auto;
 }
-
-
 </style>
 
 <script>
 if (typeof window !== 'undefined') {
-  var $s = require('scriptjs');
+  var $s = require('scriptjs')
 }
 export default {
-  props:{
-    callback:'',
+  props: {
+    callback: ''
   },
-  data () {
+  data() {
     return {
       content: '',
-      historyContent:''
-    };
-  },
-  components:{
-    
+      historyContent: ''
+    }
   },
-  methods:{
-    get_content(){
-        var that = this ;
-        var url = DocConfig.server+'/api/page/diff';
-        var params = new URLSearchParams();
-        params.append('page_id',  that.$route.params.page_id);
-        params.append('page_history_id',  that.$route.params.page_history_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var json = response.data.data ;
-              that.content = json.page.page_content ;
-              that.historyContent = json.history_page.page_content ;
-              that.$nextTick(()=>{
-                that.diffUsingJS(0);
-              });
-            
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
+  components: {},
+  methods: {
+    get_content() {
+      var that = this
+      var url = DocConfig.server + '/api/page/diff'
+      var params = new URLSearchParams()
+      params.append('page_id', that.$route.params.page_id)
+      params.append('page_history_id', that.$route.params.page_history_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var json = response.data.data
+            that.content = json.page.page_content
+            that.historyContent = json.history_page.page_content
+            that.$nextTick(() => {
+              that.diffUsingJS(0)
+            })
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
     },
     diffUsingJS(viewType) {
-      "use strict";
-      var that = this ;
-      var byId = function (id) { return document.getElementById(id); },
-        base = difflib.stringAsLines(byId("baseText").value),
-        newtxt = difflib.stringAsLines(byId("newText").value),
+      'use strict'
+      var that = this
+      // eslint-disable-next-line one-var
+      var byId = function(id) {
+          return document.getElementById(id)
+        },
+        base = difflib.stringAsLines(byId('baseText').value),
+        newtxt = difflib.stringAsLines(byId('newText').value),
         sm = new difflib.SequenceMatcher(base, newtxt),
         opcodes = sm.get_opcodes(),
-        diffoutputdiv = byId("diffoutput")
+        diffoutputdiv = byId('diffoutput')
 
-      diffoutputdiv.innerHTML = "";
+      diffoutputdiv.innerHTML = ''
 
-      diffoutputdiv.appendChild(diffview.buildView({
-        baseTextLines: base,
-        newTextLines: newtxt,
-        opcodes: opcodes,
-        baseTextName: that.$t('cur_page_content'),
-        newTextName: that.$t('history_version'),
-        viewType: viewType
-      }));
+      diffoutputdiv.appendChild(
+        diffview.buildView({
+          baseTextLines: base,
+          newTextLines: newtxt,
+          opcodes: opcodes,
+          baseTextName: that.$t('cur_page_content'),
+          newTextName: that.$t('history_version'),
+          viewType: viewType
+        })
+      )
     }
-
   },
-  mounted () {
-    $s([
-      `static/diff/difflib.js`,
-      `static/diff/diffview.js`,
-      ],()=>{
-
-      this.get_content();
-      
+  mounted() {
+    $s([`static/diff/difflib.js`, `static/diff/diffview.js`], () => {
+      this.get_content()
     })
-
   },
-  beforeDestroy(){
-  }
-  
+  beforeDestroy() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/page/Index.vue b/web_src/src/components/page/Index.vue
index f40381a3d..bc292bdb5 100644
--- a/web_src/src/components/page/Index.vue
+++ b/web_src/src/components/page/Index.vue
@@ -1,97 +1,95 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
-      <div id="header"></div>
-      <div class="container doc-container" id="doc-container">
-         <div class="doc-title-box">
-            <span id="doc-title-span" class="dn"></span>
-            <h2 id="doc-title">{{page_title}}</h2>
-        </div>
-        <div id="doc-body" >
-
-        <div id="page_md_content"  class="page_content_main" ><Editormd v-bind:content="content" v-if="content" type="html"></Editormd></div>
+    <div id="header"></div>
+    <div class="container doc-container" id="doc-container">
+      <div class="doc-title-box">
+        <span id="doc-title-span" class="dn"></span>
+        <h2 id="doc-title">{{page_title}}</h2>
+      </div>
+      <div id="doc-body">
+        <div id="page_md_content" class="page_content_main">
+          <Editormd v-bind:content="content" v-if="content" type="html"></Editormd>
         </div>
-
       </div>
-      <BackToTop></BackToTop>
-      <Toc  v-if="page_id" > </Toc>
-    <Footer> </Footer>
-    <div class=""></div>
+    </div>
+    <BackToTop></BackToTop>
+    <Toc v-if="page_id"></Toc>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style scoped>
+#page_md_content {
+  padding: 10px 10px 90px 10px;
+  overflow: hidden;
+  font-size: 11pt;
+  line-height: 1.7;
+  color: #333;
+}
 
+.doc-container {
+  position: static;
+  -webkit-box-shadow: 0px 1px 6px #ccc;
+  -moz-box-shadow: 0px 1px 6px #ccc;
+  -ms-box-shadow: 0px 1px 6px #ccc;
+  -o-box-shadow: 0px 1px 6px #ccc;
+  box-shadow: 0px 1px 6px #ccc;
+  background-color: #fff;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+  width: 800px;
+  min-height: 500px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+}
 
-  #page_md_content{
-    
-      padding: 10px 10px 90px 10px;
-      overflow: hidden;
-      font-size: 11pt;
-      line-height: 1.7;
-      color: #333;
-  }
-
-  .doc-container {
-      position: static;
-      -webkit-box-shadow: 0px 1px 6px #ccc;
-      -moz-box-shadow: 0px 1px 6px #ccc;
-      -ms-box-shadow: 0px 1px 6px #ccc;
-      -o-box-shadow: 0px 1px 6px #ccc;
-      box-shadow: 0px 1px 6px #ccc;
-      background-color: #fff;
-      border-bottom: 1px solid #d9d9d9;
-      margin-bottom: 20px;
-      width: 800px;
-      min-height: 500px;
-      margin-left: auto;
-      margin-right: auto;
-      padding: 20px;
-  }
-
-  #header{
-    height: 80px;
-  }
+#header {
+  height: 80px;
+}
 
-  #doc-body{
-    width: 90%;
-    margin: 0 auto;
-    background-color: #fff;
-  }
+#doc-body {
+  width: 90%;
+  margin: 0 auto;
+  background-color: #fff;
+}
 
-  .doc-title-box{
-      height: auto;
-      margin: 30px 100px 10px 100px;
-      width: auto;
-      border-bottom: 1px solid #ebebeb;
-      padding-bottom: 10px;
-      width: 90%;
-      margin: 10px auto;
-  }
-  #footer{
-      margin: 0 auto;
-      width: 180px;
-      font-size: 8px;
-      color: #959595;
-  }
+.doc-title-box {
+  height: auto;
+  margin: 30px 100px 10px 100px;
+  width: auto;
+  border-bottom: 1px solid #ebebeb;
+  padding-bottom: 10px;
+  width: 90%;
+  margin: 10px auto;
+}
+#footer {
+  margin: 0 auto;
+  width: 180px;
+  font-size: 8px;
+  color: #959595;
+}
 
-  pre ol{
-    list-style: none;
-  }
+pre ol {
+  list-style: none;
+}
 
-  .markdown-body pre {
-    background-color: #f7f7f9;
-    border: 1px solid #e1e1e8;
-  }
-  .hljs{
-    background-color: #f7f7f9;
-  }
+.markdown-body pre {
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.hljs {
+  background-color: #f7f7f9;
+}
 
-  .editormd-html-preview, .editormd-preview-container{
-    padding: 0px;
-    font-size: 16px;
-  }
+.editormd-html-preview,
+.editormd-preview-container {
+  padding: 0px;
+  font-size: 16px;
+}
 </style>
 
 
@@ -101,77 +99,75 @@ import BackToTop from '@/components/common/BackToTop'
 import Toc from '@/components/common/Toc'
 
 export default {
-  data () {
+  data() {
     return {
       currentDate: new Date(),
-      itemList:{},
-      content:"",
-      page_title:'',
-      page_id:0,
-    };
+      itemList: {},
+      content: '',
+      page_title: '',
+      page_id: 0
+    }
   },
-  components:{
+  components: {
     Editormd,
     BackToTop,
     Toc
   },
-  methods:{
-    get_page_content(){
-        var that = this ;
-        var page_id = that.$route.params.page_id ;
-        var unique_key = that.$route.params.unique_key ;
-        if (unique_key) {
-          var url = DocConfig.server+'/api/page/infoByKey';
-        }else{
-          var url = DocConfig.server+'/api/page/info';
-        }
-        
-        var params = new URLSearchParams();
-        params.append('page_id', page_id );
-        params.append('unique_key', unique_key );
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              that.content = response.data.data.page_content ;
-              that.page_title = response.data.data.page_title ;
-              that.page_id = response.data.data.page_id ;
-            }
-            else if (response.data.error_code === 10307 || response.data.error_code === 10303 ) {
-              //需要输入密码
-              that.$router.replace({
-                  path: '/item/password/0',
-                  query: {page_id: page_id,redirect: that.$router.currentRoute.fullPath}
-              });
+  methods: {
+    get_page_content() {
+      var that = this
+      var url
+      var page_id = that.$route.params.page_id
+      var unique_key = that.$route.params.unique_key
+      if (unique_key) {
+        url = DocConfig.server + '/api/page/infoByKey'
+      } else {
+        url = DocConfig.server + '/api/page/info'
+      }
+
+      var params = new URLSearchParams()
+      params.append('page_id', page_id)
+      params.append('unique_key', unique_key)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("加载成功");
+          that.content = response.data.data.page_content
+          that.page_title = response.data.data.page_title
+          that.page_id = response.data.data.page_id
+        } else if (
+          response.data.error_code === 10307 ||
+          response.data.error_code === 10303
+        ) {
+          // 需要输入密码
+          that.$router.replace({
+            path: '/item/password/0',
+            query: {
+              page_id: page_id,
+              redirect: that.$router.currentRoute.fullPath
             }
-            else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
+          })
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
     },
-    AdaptToMobile(){
-      var doc_container = document.getElementById('doc-container') ;
-      doc_container.style.width = '95%';
-      doc_container.style.padding = '5px';
-      var header = document.getElementById('header') ;
-      header.style.height = '10px';
+    AdaptToMobile() {
+      var doc_container = document.getElementById('doc-container')
+      doc_container.style.width = '95%'
+      doc_container.style.padding = '5px'
+      var header = document.getElementById('header')
+      header.style.height = '10px'
     }
-
   },
-  mounted () {
-    this.get_page_content();
-    //根据屏幕宽度进行响应(应对移动设备的访问)
-    if( this.isMobile() ||  window.screen.width< 1000){
+  mounted() {
+    this.get_page_content()
+    // 根据屏幕宽度进行响应(应对移动设备的访问)
+    if (this.isMobile() || window.screen.width < 1000) {
       this.$nextTick(() => {
-        this.AdaptToMobile();
-      });
+        this.AdaptToMobile()
+      })
     }
-
-
   },
-  beforeDestroy(){
-
-  }
+  beforeDestroy() {}
 }
 </script>
diff --git a/web_src/src/components/page/edit/AttachmentList.vue b/web_src/src/components/page/edit/AttachmentList.vue
index d20fbf27e..ef06deb8b 100644
--- a/web_src/src/components/page/edit/AttachmentList.vue
+++ b/web_src/src/components/page/edit/AttachmentList.vue
@@ -1,11 +1,14 @@
 <!-- 附件 -->
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container class="container-narrow">
-
-      <el-dialog :title="$t('attachment')" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
+      <el-dialog
+        :title="$t('attachment')"
+        :visible.sync="dialogTableVisible"
+        :close-on-click-modal="false"
+      >
         <el-upload
           class="upload-file"
           :action="uploadUrl"
@@ -14,138 +17,135 @@
           :data="uploadData"
           ref="uploadFile"
           v-if="manage"
-          >
-          <el-button size="small" type="primary">{{$t('upload_file')}}</el-button><small>&nbsp;&nbsp;&nbsp;{{$t('file_size_tips')}}</small>
+        >
+          <el-button size="small" type="primary">{{$t('upload_file')}}</el-button>
+          <small>&nbsp;&nbsp;&nbsp;{{$t('file_size_tips')}}</small>
         </el-upload>
 
         <el-table :data="content">
           <el-table-column property="addtime" :label="$t('add_time')" width="170"></el-table-column>
-          <el-table-column property="display_name" :label="$t('file_name')" ></el-table-column>
-          <el-table-column
-            :label="$t('operation')"
-            width="150">
+          <el-table-column property="display_name" :label="$t('file_name')"></el-table-column>
+          <el-table-column :label="$t('operation')" width="150">
             <template slot-scope="scope">
-              <el-button @click="downloadFile(scope.row)" type="text" size="small">{{$t('download')}}</el-button>
-              <el-button @click="insertFile(scope.row)" type="text" size="small" v-if="manage" >{{$t('insert')}}</el-button>
-              <el-button type="text" size="small" @click="deleteFile(scope.row)" v-if="manage">{{$t('delete')}}</el-button>
+              <el-button
+                @click="downloadFile(scope.row)"
+                type="text"
+                size="small"
+              >{{$t('download')}}</el-button>
+              <el-button
+                @click="insertFile(scope.row)"
+                type="text"
+                size="small"
+                v-if="manage"
+              >{{$t('insert')}}</el-button>
+              <el-button
+                type="text"
+                size="small"
+                @click="deleteFile(scope.row)"
+                v-if="manage"
+              >{{$t('delete')}}</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-dialog>
-
-      </el-container>
-    <Footer> </Footer>
-    <div class=""></div>
+    </el-container>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style>
-
-
 </style>
 
 <script>
-
 export default {
-  props:{
-    callback:'',
-    page_id:'',
-    item_id:'',
-    manage:true,
+  props: {
+    callback: '',
+    page_id: '',
+    item_id: '',
+    manage: true
   },
-  data () {
+  data() {
     return {
       currentDate: new Date(),
       content: [],
       dialogTableVisible: false,
-      uploadUrl:DocConfig.server+'/api/page/upload',
-    };
-  },
-  components:{
-    
+      uploadUrl: DocConfig.server + '/api/page/upload'
+    }
   },
-  computed:{
-    uploadData:function(){
+  components: {},
+  computed: {
+    uploadData: function() {
       return {
-        page_id:this.page_id,
-        item_id:this.item_id,
+        page_id: this.page_id,
+        item_id: this.item_id
       }
     }
   },
-  methods:{
-    get_content(){
-        var that = this ;
-        var url = DocConfig.server+'/api/page/uploadList';
-        var params = new URLSearchParams();
-        params.append('page_id',  this.page_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              that.dialogTableVisible = true ;
-              //that.$message.success("加载成功");
-              var json = response.data.data ;
-              that.content = response.data.data ;
-              
-            }else{
-              that.dialogTableVisible = false;
-              that.$alert(response.data.error_message);
-            }
-            
-          });
+  methods: {
+    get_content() {
+      var that = this
+      var url = DocConfig.server + '/api/page/uploadList'
+      var params = new URLSearchParams()
+      params.append('page_id', this.page_id)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.dialogTableVisible = true
+          // that.$message.success("加载成功");
+          that.content = response.data.data
+        } else {
+          that.dialogTableVisible = false
+          that.$alert(response.data.error_message)
+        }
+      })
     },
-    show(){
-      this.get_content();
-
+    show() {
+      this.get_content()
     },
-    downloadFile(row){
-      var url  = row.url ;
-      window.open(url);
+    downloadFile(row) {
+      var url = row.url
+      window.open(url)
     },
 
-    deleteFile(row){
-      var that = this ;
+    deleteFile(row) {
+      var that = this
       this.$confirm(that.$t('comfirm_delete'), ' ', {
         confirmButtonText: that.$t('confirm'),
         cancelButtonText: that.$t('cancel'),
         type: 'warning'
       }).then(() => {
-
-        var file_id = row['file_id'] ;
-        var that = this ;
-        var url = DocConfig.server+'/api/page/deleteUploadFile';
-        var params = new URLSearchParams();
-        params.append('file_id',  file_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-                that.get_content();
-              
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-
-      });
-
-
-
+        var file_id = row['file_id']
+        var that = this
+        var url = DocConfig.server + '/api/page/deleteUploadFile'
+        var params = new URLSearchParams()
+        params.append('file_id', file_id)
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.get_content()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
     },
-    clearFiles(){
-        let childRef = this.$refs.uploadFile ;//获取子组件
-        childRef.clearFiles() ; 
-        this.get_content();
+    clearFiles() {
+      let childRef = this.$refs.uploadFile // 获取子组件
+      childRef.clearFiles()
+      this.get_content()
     },
-    insertFile(row){
-        var val = '['+row['display_name']+']('+row['url']+' "['+row['display_name']+'")';
-        this.callback(val);
-        this.dialogTableVisible = false;
+    insertFile(row) {
+      var val =
+        '[' +
+        row['display_name'] +
+        '](' +
+        row['url'] +
+        ' "[' +
+        row['display_name'] +
+        '")'
+      this.callback(val)
+      this.dialogTableVisible = false
     }
-
   },
-  mounted () {
-    
-
-  }
+  mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/page/edit/HistoryVersion.vue b/web_src/src/components/page/edit/HistoryVersion.vue
index 38d8e9670..01802316c 100644
--- a/web_src/src/components/page/edit/HistoryVersion.vue
+++ b/web_src/src/components/page/edit/HistoryVersion.vue
@@ -1,105 +1,104 @@
 <!-- 更多模板 -->
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container class="container-narrow">
-
-      <el-dialog :title="$t('history_version')" :modal="is_modal"  :visible.sync="dialogTableVisible" :close-on-click-modal="false">
+      <el-dialog
+        :title="$t('history_version')"
+        :modal="is_modal"
+        :visible.sync="dialogTableVisible"
+        :close-on-click-modal="false"
+      >
         <el-table :data="content">
           <el-table-column property="addtime" :label="$t('update_time')" width="170"></el-table-column>
-          <el-table-column property="author_username" :label="$t('update_by_who')" ></el-table-column>
-          <el-table-column
-            label="操作"
-            width="150">
+          <el-table-column property="author_username" :label="$t('update_by_who')"></el-table-column>
+          <el-table-column label="操作" width="150">
             <template slot-scope="scope">
-              <el-button @click="preview_diff(scope.row)" type="text" size="small">{{$t('overview')}}</el-button>
-              <el-button v-if="is_show_recover_btn"  type="text" size="small" @click="recover(scope.row)">{{$t('recover_to_this_version')}}</el-button>
+              <el-button
+                @click="preview_diff(scope.row)"
+                type="text"
+                size="small"
+              >{{$t('overview')}}</el-button>
+              <el-button
+                v-if="is_show_recover_btn"
+                type="text"
+                size="small"
+                @click="recover(scope.row)"
+              >{{$t('recover_to_this_version')}}</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-dialog>
-
-      </el-container>
-    <Footer> </Footer>
-    <div class=""></div>
+    </el-container>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style>
-
-
 </style>
 
 <script>
-
 export default {
-  props:{
-    callback:'',
-    page_id:'',
-    is_modal:true,
-    is_show_recover_btn:true,
+  props: {
+    callback: '',
+    page_id: '',
+    is_modal: true,
+    is_show_recover_btn: true
   },
-  data () {
+  data() {
     return {
       currentDate: new Date(),
       content: [],
-      dialogTableVisible: false,
-    };
-  },
-  components:{
-    
+      dialogTableVisible: false
+    }
   },
-  methods:{
-    get_content(){
-        var that = this ;
-        var url = DocConfig.server+'/api/page/history';
-        var params = new URLSearchParams();
-        let page_id = this.page_id ? this.page_id: that.$route.params.page_id ;
-        params.append('page_id',  page_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              var json = response.data.data ;
-              if (json.length > 0 ) {
-                that.content = response.data.data ;
-                that.dialogTableVisible = true ;
-              }else{
-                that.dialogTableVisible = false;
-                that.$alert('no data');
-              }
-              
-            }else{
-              that.dialogTableVisible = false;
-              that.$alert(response.data.error_message);
+  components: {},
+  methods: {
+    get_content() {
+      var that = this
+      var url = DocConfig.server + '/api/page/history'
+      var params = new URLSearchParams()
+      let page_id = this.page_id ? this.page_id : that.$route.params.page_id
+      params.append('page_id', page_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            // that.$message.success("加载成功");
+            var json = response.data.data
+            if (json.length > 0) {
+              that.content = response.data.data
+              that.dialogTableVisible = true
+            } else {
+              that.dialogTableVisible = false
+              that.$alert('no data')
             }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
+          } else {
+            that.dialogTableVisible = false
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
     },
-    show(){
-      this.get_content();
-
+    show() {
+      this.get_content()
     },
-    recover(row){
-      this.callback(row.page_content,true);
-      this.dialogTableVisible = false;
+    recover(row) {
+      this.callback(row.page_content, true)
+      this.dialogTableVisible = false
     },
 
-    preview_diff(row){
-      var page_history_id = row['page_history_id'] ;
-      let page_id = this.page_id ? this.page_id: this.$route.params.page_id ;
-      var url = '#/page/diff/'+page_id+'/'+page_history_id;
-      window.open(url);
+    preview_diff(row) {
+      var page_history_id = row['page_history_id']
+      let page_id = this.page_id ? this.page_id : this.$route.params.page_id
+      var url = '#/page/diff/' + page_id + '/' + page_history_id
+      window.open(url)
     }
-
   },
-  mounted () {
-    
-
-  }
+  mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/page/edit/PasteTable.vue b/web_src/src/components/page/edit/PasteTable.vue
index c5c087685..2bbd51119 100644
--- a/web_src/src/components/page/edit/PasteTable.vue
+++ b/web_src/src/components/page/edit/PasteTable.vue
@@ -1,72 +1,72 @@
 <!-- 更多模板 -->
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container class="container-narrow">
-
-      <el-dialog :title="$t('paste_insert_table')" :modal="is_modal"  :visible.sync="dialogFormVisible" :close-on-click-modal="false">
-        <el-form >
-		  	<el-input type="textarea" class="dialoContent" :placeholder="$t('paste_insert_table_tips')" :rows="10" v-model="content"></el-input>
-		  </el-form>
-		  <div slot="footer" class="dialog-footer">
-		    <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
-		    <el-button type="primary" @click="transform">{{$t('confirm')}}</el-button>
-		  </div>
+      <el-dialog
+        :title="$t('paste_insert_table')"
+        :modal="is_modal"
+        :visible.sync="dialogFormVisible"
+        :close-on-click-modal="false"
+      >
+        <el-form>
+          <el-input
+            type="textarea"
+            class="dialoContent"
+            :placeholder="$t('paste_insert_table_tips')"
+            :rows="10"
+            v-model="content"
+          ></el-input>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
+          <el-button type="primary" @click="transform">{{$t('confirm')}}</el-button>
+        </div>
       </el-dialog>
-
-      </el-container>
-    <Footer> </Footer>
-    <div class=""></div>
+    </el-container>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style>
-
-
 </style>
 
 <script>
-
 export default {
-  props:{
-    callback:'',
-    page_id:'',
-    is_modal:true,
-    is_show_recover_btn:true,
+  props: {
+    callback: '',
+    page_id: '',
+    is_modal: true,
+    is_show_recover_btn: true
   },
-  data () {
+  data() {
     return {
       currentDate: new Date(),
       content: '',
-      dialogFormVisible: false,
-    };
-  },
-  components:{
-    
+      dialogFormVisible: false
+    }
   },
-  methods:{
-    transform: function (){
-      var md=this.content;
-      var sheet_str="\n\n";
-      for (const [index,row] of md.split("\n").entries()){
-        var cols=row.split("\t");
-        sheet_str += '| ' + cols.join(" | ") +" |\n";
-        if (index ==0){
-          for (var i=0;i<cols.length;i++){
-            sheet_str+='|:--- ';
+  components: {},
+  methods: {
+    transform: function() {
+      var md = this.content
+      var sheet_str = '\n\n'
+      for (const [index, row] of md.split('\n').entries()) {
+        var cols = row.split('\t')
+        sheet_str += '| ' + cols.join(' | ') + ' |\n'
+        if (index == 0) {
+          for (var i = 0; i < cols.length; i++) {
+            sheet_str += '|:--- '
           }
-          sheet_str+=" |\n";
+          sheet_str += ' |\n'
         }
       }
-      this.callback(sheet_str+"\n\n");
-      this.dialogFormVisible=false;
+      this.callback(sheet_str + '\n\n')
+      this.dialogFormVisible = false
     }
-
   },
-  mounted () {
-    
-
-  }
+  mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/page/edit/SortPage.vue b/web_src/src/components/page/edit/SortPage.vue
index 01e8b9e24..84a3aa466 100644
--- a/web_src/src/components/page/edit/SortPage.vue
+++ b/web_src/src/components/page/edit/SortPage.vue
@@ -1,151 +1,151 @@
 <!-- 页面排序 -->
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container class="container-narrow">
-
-      <el-dialog :title="$t('sort_pages')" :modal="is_modal" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
+      <el-dialog
+        :title="$t('sort_pages')"
+        :modal="is_modal"
+        :visible.sync="dialogTableVisible"
+        :close-on-click-modal="false"
+      >
         <div class="dialog-body">
-          <p class="tips" >{{$t('sort_pages_tips')}}</p>
-          <el-select  :placeholder="$t('optional')" class="select-cat" v-model="cat_id">
-            <el-option v-if="belong_to_catalogs" v-for="cat in belong_to_catalogs " :key="cat.cat_name" :label="cat.cat_name" :value="cat.cat_id"></el-option>
+          <p class="tips">{{$t('sort_pages_tips')}}</p>
+          <el-select
+            :placeholder="$t('optional')"
+            class="select-cat"
+            v-model="cat_id"
+            v-if="belong_to_catalogs"
+          >
+            <el-option
+              v-for="cat in belong_to_catalogs "
+              :key="cat.cat_name"
+              :label="cat.cat_name"
+              :value="cat.cat_id"
+            ></el-option>
           </el-select>
-          <draggable v-model="pages" tag="div" group="page"  @end="endMove">
-            <div class="page-box" v-for="page in pages">
-              <span class='page-name'>{{page.page_title}}</span>
+          <draggable v-model="pages" tag="div" group="page" @end="endMove">
+            <div class="page-box" v-for="page in pages" :key="page.page_id">
+              <span class="page-name">{{page.page_title}}</span>
             </div>
-
           </draggable>
         </div>
-
-
       </el-dialog>
-
-      </el-container>
-    <Footer> </Footer>
-    <div class=""></div>
+    </el-container>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style scoped>
-.dialog-body{
+.dialog-body {
   min-height: 400px;
   max-height: 90%;
-  overflow-x:hidden;
-  overflow-y:auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
-.page-box{
-  background-color:rgb(250, 250, 250);
+.page-box {
+  background-color: rgb(250, 250, 250);
   width: 98%;
   height: 40px;
   margin-top: 10px;
   border: 1px solid #d9d9d9;
   border-radius: 2px;
 }
-.page-name{
+.page-name {
   line-height: 40px;
   margin-left: 20px;
   color: #262626;
 }
-.tips{
+.tips {
   margin-left: 10px;
   color: #9ea1a6;
   font-size: 11px;
-
 }
-
 </style>
 
 <script>
 import draggable from 'vuedraggable'
 export default {
-  props:{
-    callback:'',
-    page_id:'',
-    item_id:'',
-    is_modal:true,
-    belong_to_catalogs:[],
-    cat_id:''
+  props: {
+    callback: '',
+    page_id: '',
+    item_id: '',
+    is_modal: true,
+    belong_to_catalogs: [],
+    cat_id: ''
   },
-  data () {
+  data() {
     return {
       currentDate: new Date(),
       dialogTableVisible: false,
-      pages:[]
-    };
+      pages: []
+    }
   },
-  components:{
+  components: {
     draggable
   },
-  methods:{
-
-    show(){
-      this.dialogTableVisible = true ;
+  methods: {
+    show() {
+      this.dialogTableVisible = true
     },
-    //获取某目录下的所有页面
-    get_pages(){
-      var that = this ;
-      var url = DocConfig.server+'/api/catalog/getPagesBycat';
-      var params = new URLSearchParams();
-      params.append('item_id',  this.item_id);
-      params.append('cat_id',  this.cat_id);
-      that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            that.pages = response.data.data ;
-          }else{
-            that.$alert(response.data.error_message);
+    // 获取某目录下的所有页面
+    get_pages() {
+      var that = this
+      var url = DocConfig.server + '/api/catalog/getPagesBycat'
+      var params = new URLSearchParams()
+      params.append('item_id', this.item_id)
+      params.append('cat_id', this.cat_id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.pages = response.data.data
+          } else {
+            that.$alert(response.data.error_message)
           }
-          
         })
-        .catch(function (error) {
-          console.log(error);
-        });
+        .catch(function(error) {
+          console.log(error)
+        })
     },
-    endMove(evt){
-      let data = {} ;
+    endMove(evt) {
+      let data = {}
       for (var i = 0; i < this.pages.length; i++) {
-        let key = this.pages[i]['page_id'] ;
-        data[key] = i + 1  ;
-      };
-      this.sort_page(data);
+        let key = this.pages[i]['page_id']
+        data[key] = i + 1
+      }
+      this.sort_page(data)
     },
-    sort_page(data){
-      var that = this ;
-      var url = DocConfig.server+'/api/page/sort';
-      var params = new URLSearchParams();
-      params.append('pages', JSON.stringify(data));
-      params.append('item_id', this.item_id);
-      that.axios.post(url, params)
-        .then(function (response) {
-          if (response.data.error_code === 0 ) {
-            that.get_pages();
-            //window.location.reload();
-
-          }else{
-            that.$alert(response.data.error_message,'',{
-              callback:function(){
-                window.location.reload();
-              }
-            });
-            
-          }
-          
-        });
-    },
-
+    sort_page(data) {
+      var that = this
+      var url = DocConfig.server + '/api/page/sort'
+      var params = new URLSearchParams()
+      params.append('pages', JSON.stringify(data))
+      params.append('item_id', this.item_id)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.get_pages()
+          // window.location.reload();
+        } else {
+          that.$alert(response.data.error_message, '', {
+            callback: function() {
+              window.location.reload()
+            }
+          })
+        }
+      })
+    }
   },
-  watch:{
-    cat_id:function(){
-      this.get_pages();
+  watch: {
+    cat_id: function() {
+      this.get_pages()
     },
-    dialogTableVisible:function(){
-      this.get_pages();
+    dialogTableVisible: function() {
+      this.get_pages()
     }
   },
-  mounted () {
-    
-  }
+  mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/page/edit/TemplateList.vue b/web_src/src/components/page/edit/TemplateList.vue
index 338c70f8e..bd96698b1 100644
--- a/web_src/src/components/page/edit/TemplateList.vue
+++ b/web_src/src/components/page/edit/TemplateList.vue
@@ -1,115 +1,111 @@
 <!-- 更多模板 -->
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container class="container-narrow">
-
-      <el-dialog :title="$t('templ_list')" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
+      <el-dialog
+        :title="$t('templ_list')"
+        :visible.sync="dialogTableVisible"
+        :close-on-click-modal="false"
+      >
         <el-table :data="content">
           <el-table-column property="addtime" :label="$t('save_time')" width="170"></el-table-column>
-          <el-table-column property="template_title" :label="$t('templ_title')" ></el-table-column>
-          <el-table-column
-            :label="$t('operation')"
-            width="150">
+          <el-table-column property="template_title" :label="$t('templ_title')"></el-table-column>
+          <el-table-column :label="$t('operation')" width="150">
             <template slot-scope="scope">
-              <el-button @click="insertTemplate(scope.row)" type="text" size="small">{{$t('insert_templ')}}</el-button>
-              <el-button type="text" size="small" @click="deleteTemplate(scope.row)">{{$t('delete_templ')}}</el-button>
+              <el-button
+                @click="insertTemplate(scope.row)"
+                type="text"
+                size="small"
+              >{{$t('insert_templ')}}</el-button>
+              <el-button
+                type="text"
+                size="small"
+                @click="deleteTemplate(scope.row)"
+              >{{$t('delete_templ')}}</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-dialog>
-
-      </el-container>
-    <Footer> </Footer>
-    <div class=""></div>
+    </el-container>
+    <Footer></Footer>
+    <div class></div>
   </div>
 </template>
 
 <style>
-
-
 </style>
 
 <script>
-
 export default {
-  props:{
-    callback:'',
+  props: {
+    callback: ''
   },
-  data () {
+  data() {
     return {
       currentDate: new Date(),
       content: [],
-      dialogTableVisible: false,
-    };
-  },
-  components:{
-    
+      dialogTableVisible: false
+    }
   },
-  methods:{
-    get_content(){
-        var that = this ;
-        var url = DocConfig.server+'/api/template/getList';
-        var params = new URLSearchParams();
-        //params.append('page_id',  that.$route.params.page_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              //that.$message.success("加载成功");
-              var json = response.data.data ;
-              if (json.length > 0 ) {
-                that.content = response.data.data ;
-                that.dialogTableVisible = true ;
-              }else{
-                that.dialogTableVisible = false;
-                that.$alert(that.$t('no_templ_text'));
-              }
-              
-            }else{
-              that.dialogTableVisible = false;
-              that.$alert(response.data.error_message);
+  components: {},
+  methods: {
+    get_content() {
+      var that = this
+      var url = DocConfig.server + '/api/template/getList'
+      var params = new URLSearchParams()
+      // params.append('page_id',  that.$route.params.page_id);
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            // that.$message.success("加载成功");
+            var json = response.data.data
+            if (json.length > 0) {
+              that.content = response.data.data
+              that.dialogTableVisible = true
+            } else {
+              that.dialogTableVisible = false
+              that.$alert(that.$t('no_templ_text'))
             }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
+          } else {
+            that.dialogTableVisible = false
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
     },
-    show(){
-      this.get_content();
-
+    show() {
+      this.get_content()
     },
-    insertTemplate(row){
-      this.callback(row.template_content);
-      this.dialogTableVisible = false;
+    insertTemplate(row) {
+      this.callback(row.template_content)
+      this.dialogTableVisible = false
     },
 
-    deleteTemplate(row){
-      var id = row['id'] ;
-        var that = this ;
-        var url = DocConfig.server+'/api/template/delete';
-        var params = new URLSearchParams();
-        params.append('id',  id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-                that.get_content();
-              
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
+    deleteTemplate(row) {
+      var id = row['id']
+      var that = this
+      var url = DocConfig.server + '/api/template/delete'
+      var params = new URLSearchParams()
+      params.append('id', id)
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            that.get_content()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
     }
-
   },
-  mounted () {
-    
-
-  }
+  mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/web_src/src/components/team/Index.vue b/web_src/src/components/team/Index.vue
index d68de916f..6ec024b31 100644
--- a/web_src/src/components/team/Index.vue
+++ b/web_src/src/components/team/Index.vue
@@ -1,248 +1,237 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
       <el-card class="center-card">
-
-      <el-button  type="text" class="add-cat" @click="addTeam">{{$t('add_team')}}</el-button>
-      <el-button type="text" class="goback-btn" @click="goback">{{$t('goback')}}</el-button>
-       <el-table align="left"
-            :empty-text="$t('empty_team_tips')"
-            :data="list"
-             height="400"
-            style="width: 100%">
-            <el-table-column
-              prop="team_name"
-              :label="$t('team_name')"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="memberCount"
-              :label="$t('memberCount')"
-              >
-              <template slot-scope="scope">
-                  <router-link :to="'/team/member/'+scope.row.id" >{{scope.row.memberCount}}</router-link>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="itemCount"
-              :label="$t('itemCount')">
-              <template slot-scope="scope">
-                  <router-link :to="'/team/item/'+scope.row.id" >{{scope.row.itemCount}}</router-link>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop=""
-              :label="$t('operation')">
-              <template slot-scope="scope">
-                <el-button @click="$router.push({path:'/team/member/'+scope.row.id})" type="text" size="small">{{$t('member')}}</el-button>
-                <el-button @click="$router.push({path:'/team/item/'+scope.row.id})"  type="text" size="small">{{$t('team_item')}}</el-button>
-                <el-button @click="edit(scope.row)" type="text" size="small">{{$t('edit')}}</el-button>
-                <br>
-                <el-button @click="attornDialog(scope.row)" type="text" size="small">{{$t('attorn')}}</el-button>
-                <el-button @click="deleteTeam(scope.row.id)" type="text" size="small">{{$t('delete')}}</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-
-
-            </el-card>
-            <el-dialog :visible.sync="dialogFormVisible"  width="300px" :close-on-click-modal="false">
-              <el-form >
-                  <el-form-item :label="$t('team_name')+':'" >
-                     <el-input   v-model="MyForm.team_name"></el-input>
-                  </el-form-item>
-              </el-form>
-
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
-                <el-button type="primary" @click="MyFormSubmit" >{{$t('confirm')}}</el-button>
-              </div>
-            </el-dialog>
-
-
-            <el-dialog :visible.sync="dialogAttornVisible" :modal="false" width="300px" :close-on-click-modal="false" >
-              <el-form >
-                  <el-form-item label="" >
-                    <el-input  :placeholder="$t('attorn_username')" auto-complete="new-password" v-model="attornForm.username"></el-input>
-                  </el-form-item>
-                  <el-form-item label="" >
-                    <el-input type="password" auto-complete="new-password" :placeholder="$t('input_login_password')"  v-model="attornForm.password" ></el-input>
-                  </el-form-item>
-              </el-form>
-             <p class="tips">
-                {{$t('attornTeamTips')}}
-            </p>
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogAttornVisible = false">{{$t('cancel')}}</el-button>
-                <el-button type="primary" @click="attorn" >{{$t('attorn')}}</el-button>
-              </div>
-            </el-dialog>
-
-
+        <el-button type="text" class="add-cat" @click="addTeam">{{$t('add_team')}}</el-button>
+        <el-button type="text" class="goback-btn" @click="goback">{{$t('goback')}}</el-button>
+        <el-table
+          align="left"
+          :empty-text="$t('empty_team_tips')"
+          :data="list"
+          height="400"
+          style="width: 100%"
+        >
+          <el-table-column prop="team_name" :label="$t('team_name')"></el-table-column>
+          <el-table-column prop="memberCount" :label="$t('memberCount')">
+            <template slot-scope="scope">
+              <router-link :to="'/team/member/'+scope.row.id">{{scope.row.memberCount}}</router-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop="itemCount" :label="$t('itemCount')">
+            <template slot-scope="scope">
+              <router-link :to="'/team/item/'+scope.row.id">{{scope.row.itemCount}}</router-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop :label="$t('operation')">
+            <template slot-scope="scope">
+              <el-button
+                @click="$router.push({path:'/team/member/'+scope.row.id})"
+                type="text"
+                size="small"
+              >{{$t('member')}}</el-button>
+              <el-button
+                @click="$router.push({path:'/team/item/'+scope.row.id})"
+                type="text"
+                size="small"
+              >{{$t('team_item')}}</el-button>
+              <el-button @click="edit(scope.row)" type="text" size="small">{{$t('edit')}}</el-button>
+              <br />
+              <el-button @click="attornDialog(scope.row)" type="text" size="small">{{$t('attorn')}}</el-button>
+              <el-button @click="deleteTeam(scope.row.id)" type="text" size="small">{{$t('delete')}}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+      <el-dialog :visible.sync="dialogFormVisible" width="300px" :close-on-click-modal="false">
+        <el-form>
+          <el-form-item :label="$t('team_name')+':'">
+            <el-input v-model="MyForm.team_name"></el-input>
+          </el-form-item>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
+          <el-button type="primary" @click="MyFormSubmit">{{$t('confirm')}}</el-button>
+        </div>
+      </el-dialog>
+
+      <el-dialog
+        :visible.sync="dialogAttornVisible"
+        :modal="false"
+        width="300px"
+        :close-on-click-modal="false"
+      >
+        <el-form>
+          <el-form-item label>
+            <el-input
+              :placeholder="$t('attorn_username')"
+              auto-complete="new-password"
+              v-model="attornForm.username"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label>
+            <el-input
+              type="password"
+              auto-complete="new-password"
+              :placeholder="$t('input_login_password')"
+              v-model="attornForm.password"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <p class="tips">{{$t('attornTeamTips')}}</p>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogAttornVisible = false">{{$t('cancel')}}</el-button>
+          <el-button type="primary" @click="attorn">{{$t('attorn')}}</el-button>
+        </div>
+      </el-dialog>
     </el-container>
 
-    <Footer> </Footer>
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
 export default {
-  components : {
- 
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      MyForm:{
-        id:'',
-        team_name:''
+      MyForm: {
+        id: '',
+        team_name: ''
       },
-      list:[],
-      dialogFormVisible:false,
-      dialogMemberVisible:false,
-      dialogAttornVisible:false,
-      attornForm :{
-        team_id:'',
-        username:'',
-        password:''
+      list: [],
+      dialogFormVisible: false,
+      dialogMemberVisible: false,
+      dialogAttornVisible: false,
+      attornForm: {
+        team_id: '',
+        username: '',
+        password: ''
       }
     }
-  }, 
+  },
   methods: {
-
-
-      geList(){
-        var that = this ;
-        var url = DocConfig.server+'/api/team/getList';
-        var params = new URLSearchParams();
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data ;
-
-              that.list =  Info;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
-      },
-      MyFormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/team/save';
-
-          var params = new URLSearchParams();
-          params.append('id', this.MyForm.id);
-          params.append('team_name', this.MyForm.team_name);
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.dialogFormVisible = false;
-                that.geList() ;
-                that.MyForm = {
-                  id:'',
-                  team_name:''
-                };
-              }else{
-                that.$alert(response.data.error_message);
-              }
-            });
-      },
-      edit(row){
-        this.MyForm.id = row.id;
-        this.MyForm.team_name = row.team_name;
-        this.dialogFormVisible = true;
-      },
-
-      deleteTeam(id){
-          var that = this ;
-          var url = DocConfig.server+'/api/team/delete';
-
-          this.$confirm(that.$t('confirm_delete'), ' ', {
-            confirmButtonText: that.$t('confirm'),
-            cancelButtonText: that.$t('cancel'),
-            type: 'warning'
-          }).then(() => {
-            var params = new URLSearchParams();
-            params.append('id', id);
-
-            that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.geList() ;
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            }); 
-          })
-
-      },
-      addTeam(){
-        this.MyForm = {
-           id:'',
-           team_name:''
-        } ;
-        this.dialogFormVisible = true;
-
-      },
-      goback(){
-        this.$router.push({path:"/item/index"})
-      },
-      attornDialog(row){
-        this.attornForm.team_id = row.id; 
-        this.dialogAttornVisible = true ;
-      },
-      attorn(){
-        var that = this ;
-        var url = DocConfig.server+'/api/team/attorn';
-
-        var params = new URLSearchParams();
-        params.append('team_id',  this.attornForm.team_id);
-        params.append('username', this.attornForm.username);
-        params.append('password',this.attornForm.password );
-
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              that.dialogAttornVisible = false;
-              that.geList();
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
+    geList() {
+      var that = this
+      var url = DocConfig.server + '/api/team/getList'
+      var params = new URLSearchParams()
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          var Info = response.data.data
+
+          that.list = Info
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    MyFormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/team/save'
+
+      var params = new URLSearchParams()
+      params.append('id', this.MyForm.id)
+      params.append('team_name', this.MyForm.team_name)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.dialogFormVisible = false
+          that.geList()
+          that.MyForm = {
+            id: '',
+            team_name: ''
+          }
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    edit(row) {
+      this.MyForm.id = row.id
+      this.MyForm.team_name = row.team_name
+      this.dialogFormVisible = true
+    },
+
+    deleteTeam(id) {
+      var that = this
+      var url = DocConfig.server + '/api/team/delete'
+
+      this.$confirm(that.$t('confirm_delete'), ' ', {
+        confirmButtonText: that.$t('confirm'),
+        cancelButtonText: that.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams()
+        params.append('id', id)
+
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.geList()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
+    },
+    addTeam() {
+      this.MyForm = {
+        id: '',
+        team_name: ''
       }
+      this.dialogFormVisible = true
+    },
+    goback() {
+      this.$router.push({ path: '/item/index' })
+    },
+    attornDialog(row) {
+      this.attornForm.team_id = row.id
+      this.dialogAttornVisible = true
+    },
+    attorn() {
+      var that = this
+      var url = DocConfig.server + '/api/team/attorn'
+
+      var params = new URLSearchParams()
+      params.append('team_id', this.attornForm.team_id)
+      params.append('username', this.attornForm.username)
+      params.append('password', this.attornForm.password)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.dialogAttornVisible = false
+          that.geList()
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    }
   },
 
-  mounted(){
-    this.geList();
+  mounted() {
+    this.geList()
   },
-  beforeDestroy(){
-  }
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.hello{
+.hello {
   text-align: left;
 }
 
-.add-cat{
+.add-cat {
   margin-left: 10px;
 }
 
-.center-card{
+.center-card {
   text-align: left;
   width: 800px;
   height: 600px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 600px;
 }
@@ -254,10 +243,9 @@ export default {
   background: #f0f9eb;
 }
 
-.el-table__empty-text{
+.el-table__empty-text {
   text-align: left;
   line-height: 30px !important;
   margin-top: 20px;
 }
-
 </style>
diff --git a/web_src/src/components/team/Item.vue b/web_src/src/components/team/Item.vue
index fd1a7d7a2..3068835d3 100644
--- a/web_src/src/components/team/Item.vue
+++ b/web_src/src/components/team/Item.vue
@@ -1,296 +1,259 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
       <el-card class="center-card">
-      <el-button  type="text" class="add-cat" @click="addTeamItem">{{$t('distribution_to_team')}}</el-button>
-      <el-button type="text" class="goback-btn" @click="goback">{{$t('back_to_team')}}</el-button>
-       <el-table align="left"
-            :data="list"
-             height="400"
-            style="width: 100%">
-            <el-table-column
-              prop="item_name"
-              :label="$t('item_name')"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="addtime"
-              :label="$t('Join_time')"
-              >
-            </el-table-column>
-
-            <el-table-column
-              prop=""
-              width="210"
-              :label="$t('operation')">
-              <template slot-scope="scope">
-                <router-link :to="'/'+scope.row.item_id" target="_blank">{{$t('check_item')}}</router-link>
-               
-              <el-button @click="getTeamItemMember(scope.row.item_id)" type="text" size="small">{{$t('member_authority')}}</el-button>
-
-                <el-button @click="deleteTeamItem(scope.row.id)" type="text" size="small">{{$t('unassign')}}</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-
-
-            </el-card>
-
-            <el-dialog :visible.sync="dialogFormVisible"  width="300px" :close-on-click-modal="false">
-                    <el-form >
-                        <el-select multiple v-model="MyForm.item_id"  :placeholder="$t('please_choose')">
-                          <el-option
-                            v-for="item in itemList"
-                            :key="item.item_id"
-                            :label="item.item_name"
-                            :value="item.item_id"
-                            
-                            >
-                          </el-option>
-                        </el-select>
-                    </el-form>
-                    <br>
-                    <router-link to="/item/index" target="_blank">{{$t('go_to_new_an_item')}}</router-link>
-                    <div slot="footer" class="dialog-footer">
-                      <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
-                      <el-button type="primary" @click="MyFormSubmit" >{{$t('confirm')}}</el-button>
-                    </div>
-            </el-dialog>
+        <el-button type="text" class="add-cat" @click="addTeamItem">{{$t('distribution_to_team')}}</el-button>
+        <el-button type="text" class="goback-btn" @click="goback">{{$t('back_to_team')}}</el-button>
+        <el-table align="left" :data="list" height="400" style="width: 100%">
+          <el-table-column prop="item_name" :label="$t('item_name')"></el-table-column>
+          <el-table-column prop="addtime" :label="$t('Join_time')"></el-table-column>
+
+          <el-table-column prop width="210" :label="$t('operation')">
+            <template slot-scope="scope">
+              <router-link :to="'/'+scope.row.item_id" target="_blank">{{$t('check_item')}}</router-link>
+
+              <el-button
+                @click="getTeamItemMember(scope.row.item_id)"
+                type="text"
+                size="small"
+              >{{$t('member_authority')}}</el-button>
+
+              <el-button
+                @click="deleteTeamItem(scope.row.id)"
+                type="text"
+                size="small"
+              >{{$t('unassign')}}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <el-dialog :visible.sync="dialogFormVisible" width="300px" :close-on-click-modal="false">
+        <el-form>
+          <el-select multiple v-model="MyForm.item_id" :placeholder="$t('please_choose')">
+            <el-option
+              v-for="item in itemList"
+              :key="item.item_id"
+              :label="item.item_name"
+              :value="item.item_id"
+            ></el-option>
+          </el-select>
+        </el-form>
+        <br />
+        <router-link to="/item/index" target="_blank">{{$t('go_to_new_an_item')}}</router-link>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
+          <el-button type="primary" @click="MyFormSubmit">{{$t('confirm')}}</el-button>
+        </div>
+      </el-dialog>
 
       <!-- 成员权限弹窗 -->
-      <el-dialog :visible.sync="dialogFormTeamMemberVisible"  top="10vh" :title="$t('adjust_member_authority')" :close-on-click-modal="false">
-
-           <el-table align="left"
-                :empty-text="$t('team_member_empty_tips')"
-                :data="teamItemMembers"
-                style="width: 100%">
-                <el-table-column
-                  prop="member_username"
-                  :label="$t('username')"
-                 >
-                </el-table-column>
-                <el-table-column
-                  prop="member_group_id"
-                  :label="$t('authority')"
-                  width="130"
-                  >
-                  <template slot-scope="scope">
-                    <el-select size="mini" v-model="scope.row.member_group_id" @change="changeTeamItemMemberGroup($event,scope.row.id)" :placeholder="$t('please_choose')">
-                      <el-option
-                        v-for="item in authorityOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                        
-                        >
-                      </el-option>
-                    </el-select>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="addtime"
-                  :label="$t('add_time')"
-                  >
-                </el-table-column>
-
-              </el-table>
-        <br>
-        <p class="tips">
-          {{$t('team_member_authority_tips')}}
-        </p>
+      <el-dialog
+        :visible.sync="dialogFormTeamMemberVisible"
+        top="10vh"
+        :title="$t('adjust_member_authority')"
+        :close-on-click-modal="false"
+      >
+        <el-table
+          align="left"
+          :empty-text="$t('team_member_empty_tips')"
+          :data="teamItemMembers"
+          style="width: 100%"
+        >
+          <el-table-column prop="member_username" :label="$t('username')"></el-table-column>
+          <el-table-column prop="member_group_id" :label="$t('authority')" width="130">
+            <template slot-scope="scope">
+              <el-select
+                size="mini"
+                v-model="scope.row.member_group_id"
+                @change="changeTeamItemMemberGroup($event,scope.row.id)"
+                :placeholder="$t('please_choose')"
+              >
+                <el-option
+                  v-for="item in authorityOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="addtime" :label="$t('add_time')"></el-table-column>
+        </el-table>
+        <br />
+        <p class="tips">{{$t('team_member_authority_tips')}}</p>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormTeamMemberVisible = false">{{$t('close')}}</el-button>
         </div>
       </el-dialog>
-
     </el-container>
 
-
-
-    <Footer> </Footer>
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      MyForm:{
-        item_id:''
+      MyForm: {
+        item_id: ''
       },
-      list:[],
-      dialogFormVisible:false,
-      team_id:'',
-      itemList:[],
-      teamItemMembers:[],
-      dialogFormTeamMemberVisible:false,
-      authorityOptions:[
-          {
-            label:"编辑",
-            value:'1',
-          },
-          {
-            label:"只读",
-            value:'0',
-          }
+      list: [],
+      dialogFormVisible: false,
+      team_id: '',
+      itemList: [],
+      teamItemMembers: [],
+      dialogFormTeamMemberVisible: false,
+      authorityOptions: [
+        {
+          label: '编辑',
+          value: '1'
+        },
+        {
+          label: '只读',
+          value: '0'
+        }
       ]
     }
-  }, 
+  },
   methods: {
-      geList(){
-        var that = this ;
-        var url = DocConfig.server+'/api/teamItem/getListByTeam';
-        var params = new URLSearchParams();
-        params.append('team_id', this.team_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data ;
-
-              that.list =  Info;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          });
-      },
-      getItemList(){
-          var that = this ;
-          var url = DocConfig.server+'/api/item/myList';
-          var params = new URLSearchParams();
-          that.axios.get(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                var json = response.data.data ;
-                that.itemList = json ;
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
-      MyFormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/teamItem/save';
-
-          var params = new URLSearchParams();
-          params.append('team_id', this.team_id);
-          params.append('item_id', this.MyForm.item_id);
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.dialogFormVisible = false;
-                that.geList() ;
-                that.MyForm = {};
-              }else{
-                that.$alert(response.data.error_message);
-              }
-            });
-      },
-
-      deleteTeamItem(id){
-          var that = this ;
-          var url = DocConfig.server+'/api/teamItem/delete';
-
-          this.$confirm(that.$t('confirm_unassign'), ' ', {
-            confirmButtonText: that.$t('confirm'),
-            cancelButtonText: that.$t('cancel'),
-            type: 'warning'
-          }).then(() => {
-            var params = new URLSearchParams();
-            params.append('id', id);
-
-            that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.geList() ;
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            }); 
-          })
-
-      },
-      addTeamItem(){
-        this.MyForm = [] ;
-        this.dialogFormVisible = true;
-
-      },
-      goback(){
-        this.$router.push({path:"/team/index"})
-      },
-      getTeamItemMember(item_id){
-        var that = this ;
-        this.dialogFormTeamMemberVisible = true;
-        var url = DocConfig.server+'/api/teamItemMember/getList';
-        var params = new URLSearchParams();
-        params.append('item_id',  item_id);
-        params.append('team_id',  this.team_id);
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var Info = response.data.data
-              that.teamItemMembers =  Info;
-            }else{
-              that.$alert(response.data.error_message);
-            }
-            
-          })
-      },
-      changeTeamItemMemberGroup(member_group_id,id){
-          var that = this ;
-          var url = DocConfig.server+'/api/teamItemMember/save';
-
-          var params = new URLSearchParams();
-          params.append('member_group_id',  member_group_id);
-          params.append('id', id);
-
-          that.axios.post(url, params)
-          .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                 that.$message('权限保存成功');
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-          });
-      }
+    geList() {
+      var that = this
+      var url = DocConfig.server + '/api/teamItem/getListByTeam'
+      var params = new URLSearchParams()
+      params.append('team_id', this.team_id)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          var Info = response.data.data
+
+          that.list = Info
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    getItemList() {
+      var that = this
+      var url = DocConfig.server + '/api/item/myList'
+      var params = new URLSearchParams()
+      that.axios.get(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          var json = response.data.data
+          that.itemList = json
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    MyFormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/teamItem/save'
+
+      var params = new URLSearchParams()
+      params.append('team_id', this.team_id)
+      params.append('item_id', this.MyForm.item_id)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.dialogFormVisible = false
+          that.geList()
+          that.MyForm = {}
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+
+    deleteTeamItem(id) {
+      var that = this
+      var url = DocConfig.server + '/api/teamItem/delete'
+
+      this.$confirm(that.$t('confirm_unassign'), ' ', {
+        confirmButtonText: that.$t('confirm'),
+        cancelButtonText: that.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        var params = new URLSearchParams()
+        params.append('id', id)
+
+        that.axios.post(url, params).then(function(response) {
+          if (response.data.error_code === 0) {
+            that.geList()
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+      })
+    },
+    addTeamItem() {
+      this.MyForm = []
+      this.dialogFormVisible = true
+    },
+    goback() {
+      this.$router.push({ path: '/team/index' })
+    },
+    getTeamItemMember(item_id) {
+      var that = this
+      this.dialogFormTeamMemberVisible = true
+      var url = DocConfig.server + '/api/teamItemMember/getList'
+      var params = new URLSearchParams()
+      params.append('item_id', item_id)
+      params.append('team_id', this.team_id)
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          var Info = response.data.data
+          that.teamItemMembers = Info
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    changeTeamItemMemberGroup(member_group_id, id) {
+      var that = this
+      var url = DocConfig.server + '/api/teamItemMember/save'
+
+      var params = new URLSearchParams()
+      params.append('member_group_id', member_group_id)
+      params.append('id', id)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.$message('权限保存成功')
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    }
   },
 
-  mounted(){
-    this.team_id = this.$route.params.team_id; 
-    this.geList();
-    this.getItemList() ;
+  mounted() {
+    this.team_id = this.$route.params.team_id
+    this.geList()
+    this.getItemList()
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
-.hello{
+.hello {
   text-align: left;
 }
 
-.add-cat{
+.add-cat {
   margin-left: 10px;
 }
 
-.center-card{
+.center-card {
   text-align: left;
   width: 800px;
   height: 600px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   margin-left: 500px;
 }
@@ -301,5 +264,4 @@ export default {
 .el-table .success-row {
   background: #f0f9eb;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/web_src/src/components/team/Member.vue b/web_src/src/components/team/Member.vue
index 0f7a3b98d..272a983f0 100644
--- a/web_src/src/components/team/Member.vue
+++ b/web_src/src/components/team/Member.vue
@@ -209,4 +209,4 @@ export default {
 .el-table .success-row {
   background: #f0f9eb;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web_src/src/components/user/Login.vue b/web_src/src/components/user/Login.vue
index 4bfa0c769..40c606631 100644
--- a/web_src/src/components/user/Login.vue
+++ b/web_src/src/components/user/Login.vue
@@ -1,138 +1,149 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-            <el-form  status-icon  label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
-              <h2>{{$t("login")}}</h2>
-              <el-form-item label="" >
-                <el-input type="text" auto-complete="off" :placeholder="$t('username_description')" v-model="username"></el-input>
-              </el-form-item>
-
-              <el-form-item label="" >
-                <el-input type="password" auto-complete="off" v-model="password" :placeholder="$t('password')"></el-input>
-              </el-form-item>
-
-              <el-form-item label="" v-if="show_v_code">
-                <el-input type="text" auto-complete="off" v-model="v_code" :placeholder="$t('verification_code')"></el-input>
-                <img v-bind:src="v_code_img"  class="v_code_img" v-on:click="change_v_code_img" >
-
-              </el-form-item>
-
-               <el-form-item label="" >
-                <el-button type="primary" style="width:100%;" @click="onSubmit" >{{$t("login")}}</el-button>
-              </el-form-item>
-
-              <el-form-item label="" >
-                  <router-link to="/user/register">{{$t("register_new_account")}}</router-link>
-                  &nbsp;&nbsp;&nbsp;
-
-              </el-form-item>
-            </el-form>
-          </el-card>
+      <el-card class="center-card">
+        <el-form status-icon label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
+          <h2>{{$t("login")}}</h2>
+          <el-form-item label>
+            <el-input
+              type="text"
+              auto-complete="off"
+              :placeholder="$t('username_description')"
+              v-model="username"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-input
+              type="password"
+              auto-complete="off"
+              v-model="password"
+              :placeholder="$t('password')"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label v-if="show_v_code">
+            <el-input
+              type="text"
+              auto-complete="off"
+              v-model="v_code"
+              :placeholder="$t('verification_code')"
+            ></el-input>
+            <img v-bind:src="v_code_img" class="v_code_img" v-on:click="change_v_code_img" />
+          </el-form-item>
+
+          <el-form-item label>
+            <el-button type="primary" style="width:100%;" @click="onSubmit">{{$t("login")}}</el-button>
+          </el-form-item>
+
+          <el-form-item label>
+            <router-link to="/user/register">{{$t("register_new_account")}}</router-link>
+&nbsp;&nbsp;&nbsp;
+          </el-form-item>
+        </el-form>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
       username: '',
       password: '',
       v_code: '',
-      v_code_img:DocConfig.server+'/api/common/verify',
-      show_v_code:false,
-      is_show_alert:false
+      v_code_img: DocConfig.server + '/api/common/verify',
+      show_v_code: false,
+      is_show_alert: false
     }
-
   },
   methods: {
-      onSubmit() {
-          if (this.is_show_alert) { return ;};
-          //this.$message.success(this.username);
-          var that = this ;
-          var url = DocConfig.server+'/api/user/login';
-          var params = new URLSearchParams();
-          params.append('username', this.username);
-          params.append('password', this.password);
-          params.append('v_code', this.v_code);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                //that.$message.success("登录成功");
-                let redirect = decodeURIComponent(that.$route.query.redirect || '/item/index');
-                that.$router.replace({
-                  path: redirect
-                });
-              }else{
-                if (response.data.error_code === 10206 || response.data.error_code === 10210) {
-                  that.show_v_code = true ;
-                  that.change_v_code_img() ;
-                };
-                that.is_show_alert = true ;
-                that.$alert(response.data.error_message,{callback:function(){
-                 setTimeout(function(){
-                    that.is_show_alert = false;
-                 },500);
-                 
-                }});
-              }
-              
-            });
-      },
-      change_v_code_img(){
-        var rand = '&rand='+Math.random();
-        this.v_code_img += rand ;
-      },
-      script_cron(){
-        var url = DocConfig.server+'/api/ScriptCron/run';
-        this.axios.get(url);
+    onSubmit() {
+      if (this.is_show_alert) {
+        return
       }
-
+      // this.$message.success(this.username);
+      var that = this
+      var url = DocConfig.server + '/api/user/login'
+      var params = new URLSearchParams()
+      params.append('username', this.username)
+      params.append('password', this.password)
+      params.append('v_code', this.v_code)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("登录成功");
+          let redirect = decodeURIComponent(
+            that.$route.query.redirect || '/item/index'
+          )
+          that.$router.replace({
+            path: redirect
+          })
+        } else {
+          if (
+            response.data.error_code === 10206 ||
+            response.data.error_code === 10210
+          ) {
+            that.show_v_code = true
+            that.change_v_code_img()
+          }
+          that.is_show_alert = true
+          that.$alert(response.data.error_message, {
+            callback: function() {
+              setTimeout(function() {
+                that.is_show_alert = false
+              }, 500)
+            }
+          })
+        }
+      })
+    },
+    change_v_code_img() {
+      var rand = '&rand=' + Math.random()
+      this.v_code_img += rand
+    },
+    script_cron() {
+      var url = DocConfig.server + '/api/ScriptCron/run'
+      this.axios.get(url)
+    }
   },
   mounted() {
-    var that = this ;
-    this.get_user_info(function(response){
-      if (response.data.error_code === 0 ) {
-        let redirect = decodeURIComponent(that.$route.query.redirect || '/item/index');
+    var that = this
+    this.get_user_info(function(response) {
+      if (response.data.error_code === 0) {
+        let redirect = decodeURIComponent(
+          that.$route.query.redirect || '/item/index'
+        )
         that.$router.replace({
           path: redirect
-        });
+        })
       }
-    });
+    })
 
-    this.script_cron();
+    this.script_cron()
   },
-  beforeDestroy(){
-  }
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
 }
 
-.v_code_img{
+.v_code_img {
   margin-top: 20px;
 }
-
 </style>
diff --git a/web_src/src/components/user/Register.vue b/web_src/src/components/user/Register.vue
index 65d284af7..7c472ac25 100644
--- a/web_src/src/components/user/Register.vue
+++ b/web_src/src/components/user/Register.vue
@@ -1,113 +1,120 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-            <el-form  status-icon  label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
-              <h2>{{$t("register")}}</h2>
-              <el-form-item label="" >
-                <el-input type="text" auto-complete="off" :placeholder="$t('username_description')" v-model="username"></el-input>
-              </el-form-item>
-
-              <el-form-item label="" >
-                <el-input type="password" auto-complete="off" v-model="password" :placeholder="$t('password')"></el-input>
-              </el-form-item>
-
-              <el-form-item label="" >
-                <el-input type="password" auto-complete="off" v-model="confirm_password" :placeholder="$t('password_again')"></el-input>
-              </el-form-item>
-
-              <el-form-item label="" >
-                <el-input type="text" auto-complete="off" v-model="v_code" :placeholder="$t('verification_code')" ></el-input>
-                <img v-bind:src="v_code_img" class="v_code_img"   v-on:click="change_v_code_img" >
-
-              </el-form-item>
-
-               <el-form-item label="" >
-                <el-button type="primary" style="width:100%;" @click="onSubmit" >{{$t("register")}}</el-button>
-              </el-form-item>
-
-              <el-form-item label="" >
-                  <router-link to="/user/login">{{$t("login")}}</router-link>
-                  &nbsp;&nbsp;&nbsp;
-
-              </el-form-item>
-            </el-form>
-          </el-card>
+      <el-card class="center-card">
+        <el-form status-icon label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
+          <h2>{{$t("register")}}</h2>
+          <el-form-item label>
+            <el-input
+              type="text"
+              auto-complete="off"
+              :placeholder="$t('username_description')"
+              v-model="username"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-input
+              type="password"
+              auto-complete="off"
+              v-model="password"
+              :placeholder="$t('password')"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-input
+              type="password"
+              auto-complete="off"
+              v-model="confirm_password"
+              :placeholder="$t('password_again')"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-input
+              type="text"
+              auto-complete="off"
+              v-model="v_code"
+              :placeholder="$t('verification_code')"
+            ></el-input>
+            <img v-bind:src="v_code_img" class="v_code_img" v-on:click="change_v_code_img" />
+          </el-form-item>
+
+          <el-form-item label>
+            <el-button type="primary" style="width:100%;" @click="onSubmit">{{$t("register")}}</el-button>
+          </el-form-item>
+
+          <el-form-item label>
+            <router-link to="/user/login">{{$t("login")}}</router-link>
+&nbsp;&nbsp;&nbsp;
+          </el-form-item>
+        </el-form>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Register',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
       username: '',
       password: '',
-      confirm_password:'',
+      confirm_password: '',
       v_code: '',
-      v_code_img:DocConfig.server+'/api/common/verify'
+      v_code_img: DocConfig.server + '/api/common/verify'
     }
-
   },
   methods: {
-      onSubmit() {
-          //this.$message.success(this.username);
-          var that = this ;
-          var url = DocConfig.server+'/api/user/register';
-
-          var params = new URLSearchParams();
-          params.append('username', this.username);
-          params.append('password', this.password);
-          params.append('confirm_password', this.confirm_password);
-          params.append('v_code', this.v_code);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                //that.$message.success("注册成功");
-                that.$router.push({path:'/item/index'});
-              }else{
-                that.change_v_code_img() ;
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
-      change_v_code_img(){
-        var rand = '&rand='+Math.random();
-        this.v_code_img += rand ;
-      }
-  },
-  mounted() {
+    onSubmit() {
+      // this.$message.success(this.username);
+      var that = this
+      var url = DocConfig.server + '/api/user/register'
+
+      var params = new URLSearchParams()
+      params.append('username', this.username)
+      params.append('password', this.password)
+      params.append('confirm_password', this.confirm_password)
+      params.append('v_code', this.v_code)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          // that.$message.success("注册成功");
+          that.$router.push({ path: '/item/index' })
+        } else {
+          that.change_v_code_img()
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    change_v_code_img() {
+      var rand = '&rand=' + Math.random()
+      this.v_code_img += rand
+    }
   },
-  beforeDestroy(){
-  }
+  mounted() {},
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
 }
 
-.v_code_img{
+.v_code_img {
   margin-top: 20px;
 }
 </style>
diff --git a/web_src/src/components/user/ResetPassword.vue b/web_src/src/components/user/ResetPassword.vue
index 5bdf5f095..4265ff3cc 100644
--- a/web_src/src/components/user/ResetPassword.vue
+++ b/web_src/src/components/user/ResetPassword.vue
@@ -1,98 +1,85 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-            <el-form  status-icon  label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
-              <h2>重置密码</h2>
-              <el-form-item label="" >
-                <el-input type="text" auto-complete="off" placeholder="绑定的邮箱" v-model="email"></el-input>
-              </el-form-item>
-
-              <el-form-item label="" >
-                <el-input type="text" auto-complete="off" v-model="v_code" placeholder="验证码"></el-input>
-                <img v-bind:src="v_code_img" class="v_code_img"   v-on:click="change_v_code_img" >
-
-              </el-form-item>
-
-               <el-form-item label="" >
-                <el-button type="primary" style="width:100%;" @click="onSubmit" >提交</el-button>
-              </el-form-item>
-
-              <el-form-item label="" >
-                  <router-link to="/user/login">想起密码了？去登录</router-link>
-                  &nbsp;&nbsp;&nbsp;
-              </el-form-item>
-            </el-form>
-          </el-card>
+      <el-card class="center-card">
+        <el-form status-icon label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
+          <h2>重置密码</h2>
+          <el-form-item label>
+            <el-input type="text" auto-complete="off" placeholder="绑定的邮箱" v-model="email"></el-input>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-input type="text" auto-complete="off" v-model="v_code" placeholder="验证码"></el-input>
+            <img v-bind:src="v_code_img" class="v_code_img" v-on:click="change_v_code_img" />
+          </el-form-item>
+
+          <el-form-item label>
+            <el-button type="primary" style="width:100%;" @click="onSubmit">提交</el-button>
+          </el-form-item>
+
+          <el-form-item label>
+            <router-link to="/user/login">想起密码了？去登录</router-link>&nbsp;&nbsp;&nbsp;
+          </el-form-item>
+        </el-form>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: '',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
       email: '',
       v_code: '',
-      v_code_img:DocConfig.server+'/api/common/verify'
+      v_code_img: DocConfig.server + '/api/common/verify'
     }
-
   },
   methods: {
-      onSubmit() {
-          //this.$message.success(this.username);
-          var that = this ;
-          var url = DocConfig.server+'/api/user/resetPasswordEmail';
-
-          var params = new URLSearchParams();
-          params.append('email', this.email);
-          params.append('v_code', this.v_code);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.$alert("已成功发送重置密码邮件到你的邮箱中。请登录并查看邮件");
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
-      change_v_code_img(){
-        var rand = '&rand='+Math.random();
-        this.v_code_img += rand ;
-      }
-  },
-  mounted() {
+    onSubmit() {
+      // this.$message.success(this.username);
+      var that = this
+      var url = DocConfig.server + '/api/user/resetPasswordEmail'
+
+      var params = new URLSearchParams()
+      params.append('email', this.email)
+      params.append('v_code', this.v_code)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.$alert('已成功发送重置密码邮件到你的邮箱中。请登录并查看邮件')
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    change_v_code_img() {
+      var rand = '&rand=' + Math.random()
+      this.v_code_img += rand
+    }
   },
-  beforeDestroy(){
-  }
+  mounted() {},
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
 }
 
-.v_code_img{
+.v_code_img {
   margin-top: 20px;
 }
 </style>
diff --git a/web_src/src/components/user/ResetPasswordByUrl.vue b/web_src/src/components/user/ResetPasswordByUrl.vue
index dd9a1dc2a..dc8dfe744 100644
--- a/web_src/src/components/user/ResetPasswordByUrl.vue
+++ b/web_src/src/components/user/ResetPasswordByUrl.vue
@@ -1,92 +1,86 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-            <el-form  status-icon  label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
-              <h2>重置密码</h2>
-              <el-form-item label="" >
-                <el-input type="password" auto-complete="off" placeholder="请输入新密码" v-model="new_password"></el-input>
-              </el-form-item>
-
-
-               <el-form-item label="" >
-                <el-button type="primary" style="width:100%;" @click="onSubmit" >提交</el-button>
-              </el-form-item>
-
-              <el-form-item label="" >
-                  <router-link to="/user/login">去登录</router-link>
-                  &nbsp;&nbsp;&nbsp;
-              </el-form-item>
-            </el-form>
-          </el-card>
+      <el-card class="center-card">
+        <el-form status-icon label-width="0px" class="demo-ruleForm" @keyup.enter.native="onSubmit">
+          <h2>重置密码</h2>
+          <el-form-item label>
+            <el-input
+              type="password"
+              auto-complete="off"
+              placeholder="请输入新密码"
+              v-model="new_password"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label>
+            <el-button type="primary" style="width:100%;" @click="onSubmit">提交</el-button>
+          </el-form-item>
+
+          <el-form-item label>
+            <router-link to="/user/login">去登录</router-link>&nbsp;&nbsp;&nbsp;
+          </el-form-item>
+        </el-form>
+      </el-card>
     </el-container>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: '',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      new_password: '',
+      new_password: ''
     }
-
   },
   methods: {
-      onSubmit() {
-          //this.$message.success(this.username);
-          var that = this ;
-          var url = DocConfig.server+'/api/user/resetPasswordByUrl';
-
-          var params = new URLSearchParams();
-          params.append('new_password', this.new_password);
-          params.append('uid', this.$route.query.uid);
-          params.append('email', this.$route.query.email);
-          params.append('token', this.$route.query.token);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                let redirect = decodeURIComponent(that.$route.query.redirect || '/item/index');
-                that.$router.replace({
-                  path: redirect
-                });
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      }
-  },
-  mounted() {
+    onSubmit() {
+      // this.$message.success(this.username);
+      var that = this
+      var url = DocConfig.server + '/api/user/resetPasswordByUrl'
+
+      var params = new URLSearchParams()
+      params.append('new_password', this.new_password)
+      params.append('uid', this.$route.query.uid)
+      params.append('email', this.$route.query.email)
+      params.append('token', this.$route.query.token)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          let redirect = decodeURIComponent(
+            that.$route.query.redirect || '/item/index'
+          )
+          that.$router.replace({
+            path: redirect
+          })
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    }
   },
-  beforeDestroy(){
-  }
+  mounted() {},
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
 }
 
-.v_code_img{
+.v_code_img {
   margin-top: 20px;
 }
 </style>
diff --git a/web_src/src/components/user/Setting.vue b/web_src/src/components/user/Setting.vue
index 9a6d1aab9..0010c7921 100644
--- a/web_src/src/components/user/Setting.vue
+++ b/web_src/src/components/user/Setting.vue
@@ -1,232 +1,255 @@
 <template>
   <div class="hello">
-    <Header> </Header>
+    <Header></Header>
 
     <el-container>
-          <el-card class="center-card">
-            <el-button type="text" @click="goback" class="goback-btn " ><i class="el-icon-back" ></i></el-button>
-                <el-form  status-icon  label-width="75px" class="infoForm" v-model="infoForm">
-                  <el-form-item :label="$t('username')+':'" >
-                      <el-input type="text" auto-complete="off" v-model="infoForm.username" :disabled="true" placeholder="" ></el-input>
-                  </el-form-item>
-                  <!-- 
+      <el-card class="center-card">
+        <el-button type="text" @click="goback" class="goback-btn">
+          <i class="el-icon-back"></i>
+        </el-button>
+        <el-form status-icon label-width="75px" class="infoForm" v-model="infoForm">
+          <el-form-item :label="$t('username')+':'">
+            <el-input
+              type="text"
+              auto-complete="off"
+              v-model="infoForm.username"
+              :disabled="true"
+              placeholder
+            ></el-input>
+          </el-form-item>
+          <!--
                   <el-form-item :label="$t('email')+':'" >
                        <span>{{emailForm.email}}({{emailForm.status}})</span> <a href="javascript:;" @click="dialogEmailFormVisible = true">{{$t("modify")}}</a>
                   </el-form-item>
-                  -->
-                  <el-form-item :label="$t('name')+':'" >
-                      <el-input type="text" auto-complete="off" v-model="infoForm.name" :placeholder="$t('name_tips')" ></el-input>
-                  </el-form-item>
-
-                  <el-form-item :label="$t('password')+':'">
-                      <a href="javascript:;" @click="dialogPasswordFormVisible = true">{{$t("modify")}}</a>
-                  </el-form-item>
-
-                    <el-button type="primary" style="width:100%;" @click="formSubmit" >{{$t('submit')}}</el-button>
+          -->
+          <el-form-item :label="$t('name')+':'">
+            <el-input
+              type="text"
+              auto-complete="off"
+              v-model="infoForm.name"
+              :placeholder="$t('name_tips')"
+            ></el-input>
+          </el-form-item>
 
+          <el-form-item :label="$t('password')+':'">
+            <a href="javascript:;" @click="dialogPasswordFormVisible = true">{{$t("modify")}}</a>
+          </el-form-item>
 
-                </el-form>
-          </el-card>
+          <el-button type="primary" style="width:100%;" @click="formSubmit">{{$t('submit')}}</el-button>
+        </el-form>
+      </el-card>
     </el-container>
 
     <!-- 修改email弹窗 -->
-    <el-dialog :visible.sync="dialogEmailFormVisible" top="10vh" width="300px" :close-on-click-modal="false">
+    <el-dialog
+      :visible.sync="dialogEmailFormVisible"
+      top="10vh"
+      width="300px"
+      :close-on-click-modal="false"
+    >
       <el-form class="emailForm">
-          <el-form-item label="" >
-            <el-input type="text" auto-complete="off" :placeholder="$t('input_email')" v-model="emailForm.email"></el-input>
-          </el-form-item>
+        <el-form-item label>
+          <el-input
+            type="text"
+            auto-complete="off"
+            :placeholder="$t('input_email')"
+            v-model="emailForm.email"
+          ></el-input>
+        </el-form-item>
 
-          <el-form-item label="" >
-            <el-input type="password" auto-complete="off" v-model="emailForm.password" :placeholder="$t('input_login_password')"></el-input>
-          </el-form-item>
+        <el-form-item label>
+          <el-input
+            type="password"
+            auto-complete="off"
+            v-model="emailForm.password"
+            :placeholder="$t('input_login_password')"
+          ></el-input>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogEmailFormVisible = false">{{$t('cancel')}}</el-button>
-        <el-button type="primary" @click="emailFormSubmit" >{{$t('confirm')}}</el-button>
+        <el-button type="primary" @click="emailFormSubmit">{{$t('confirm')}}</el-button>
       </div>
     </el-dialog>
 
     <!-- 修改密码弹窗 -->
-    <el-dialog :visible.sync="dialogPasswordFormVisible" top="10vh" width="300px" :close-on-click-modal="false">
+    <el-dialog
+      :visible.sync="dialogPasswordFormVisible"
+      top="10vh"
+      width="300px"
+      :close-on-click-modal="false"
+    >
       <el-form class="emailForm">
-            <el-form-item label="" >
-              <el-input type="password" auto-complete="off" :placeholder="$t('old_password')" v-model="passwordForm.password"></el-input>
-            </el-form-item>
+        <el-form-item label>
+          <el-input
+            type="password"
+            auto-complete="off"
+            :placeholder="$t('old_password')"
+            v-model="passwordForm.password"
+          ></el-input>
+        </el-form-item>
 
-            <el-form-item label="" >
-              <el-input type="password" auto-complete="off" v-model="passwordForm.new_password" :placeholder="$t('new_password')"></el-input>
-            </el-form-item>
+        <el-form-item label>
+          <el-input
+            type="password"
+            auto-complete="off"
+            v-model="passwordForm.new_password"
+            :placeholder="$t('new_password')"
+          ></el-input>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogPasswordFormVisible = false">{{$t('cancel')}}</el-button>
-        <el-button type="primary" @click="passwordFormSubmit" >{{$t('confirm')}}</el-button>
+        <el-button type="primary" @click="passwordFormSubmit">{{$t('confirm')}}</el-button>
       </div>
     </el-dialog>
 
-    <Footer> </Footer>
-    
+    <Footer></Footer>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: 'Login',
-  components : {
-
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      infoForm:{
-        username:'',
-        name:'',
-      },
-      userInfo:{
-
+      infoForm: {
+        username: '',
+        name: ''
       },
-      emailForm:{
-        email:'',
-        status:'',
+      userInfo: {},
+      emailForm: {
+        email: '',
+        status: ''
       },
-      passwordForm:{
-        password:'',
-        new_password:'',
+      passwordForm: {
+        password: '',
+        new_password: ''
       },
-      dialogEmailFormVisible:false,
-      dialogPasswordFormVisible:false,
+      dialogEmailFormVisible: false,
+      dialogPasswordFormVisible: false
     }
-
   },
   methods: {
-
-      get_user_info(){
-        var that = this ;
-        var url = DocConfig.server+'/api/user/info';
-        var params = new URLSearchParams();
-        that.axios.post(url, params)
-          .then(function (response) {
-            if (response.data.error_code === 0 ) {
-              var userInfo = response.data.data
-              that.userInfo =  userInfo;
-              that.passwordForm.username = userInfo.username;
-              that.emailForm.email = userInfo.email ;
-              that.infoForm.username = userInfo.username ;
-              that.infoForm.name = userInfo.name ;
-              if (userInfo.email.length > 0 ) {
-                that.emailForm.submit_text =that.$t("modify") ;
-                if (userInfo.email_verify > 0 ) {
-                  status = that.$t("status_1");
-
-                }else{
-                  status = that.$t("status_2");
-                }
-              }else{
-                status = that.$t("status_3");
-                that.emailForm.submit_text =that.$t("binding") ;
+    get_user_info() {
+      var that = this
+      var url = DocConfig.server + '/api/user/info'
+      var params = new URLSearchParams()
+      that.axios
+        .post(url, params)
+        .then(function(response) {
+          if (response.data.error_code === 0) {
+            var status
+            var userInfo = response.data.data
+            that.userInfo = userInfo
+            that.passwordForm.username = userInfo.username
+            that.emailForm.email = userInfo.email
+            that.infoForm.username = userInfo.username
+            that.infoForm.name = userInfo.name
+            if (userInfo.email.length > 0) {
+              that.emailForm.submit_text = that.$t('modify')
+              if (userInfo.email_verify > 0) {
+                status = that.$t('status_1')
+              } else {
+                status = that.$t('status_2')
               }
-              that.emailForm.status = status ;
-            }else{
-              that.$alert(response.data.error_message);
+            } else {
+              status = that.$t('status_3')
+              that.emailForm.submit_text = that.$t('binding')
             }
-            
-          })
-          .catch(function (error) {
-            console.log(error);
-          });
-      },
-      passwordFormSubmit() {
-          var that = this ;
-          var url = DocConfig.server+'/api/user/resetPassword';
-
-          var params = new URLSearchParams();
-          params.append('new_password', this.passwordForm.new_password);
-          params.append('password', this.passwordForm.password);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.dialogPasswordFormVisible = false;
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
-      emailFormSubmit(){
-          var that = this ;
-          var url = DocConfig.server+'/api/user/updateEmail';
-
-          var params = new URLSearchParams();
-          params.append('email', this.emailForm.email);
-          params.append('password', this.emailForm.password);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.dialogEmailFormVisible = false;
-                this.get_user_info();
-              }else{
-                that.$alert(response.data.error_message);
-              }
-            });
-      },
-      formSubmit(){
-          var that = this ;
-          var url = DocConfig.server+'/api/user/updateInfo';
-
-          var params = new URLSearchParams();
-          params.append('name', this.infoForm.name);
-
-          that.axios.post(url, params)
-            .then(function (response) {
-              if (response.data.error_code === 0 ) {
-                that.$message.success(that.$t("modify_success"));
-                this.get_user_info();
-              }else{
-                that.$alert(response.data.error_message);
-              }
-              
-            });
-      },
-      goback(){
-        this.$router.push({path:"/item/index"})
-      }
+            that.emailForm.status = status
+          } else {
+            that.$alert(response.data.error_message)
+          }
+        })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    passwordFormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/user/resetPassword'
+
+      var params = new URLSearchParams()
+      params.append('new_password', this.passwordForm.new_password)
+      params.append('password', this.passwordForm.password)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.dialogPasswordFormVisible = false
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    emailFormSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/user/updateEmail'
+
+      var params = new URLSearchParams()
+      params.append('email', this.emailForm.email)
+      params.append('password', this.emailForm.password)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.dialogEmailFormVisible = false
+          this.get_user_info()
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    formSubmit() {
+      var that = this
+      var url = DocConfig.server + '/api/user/updateInfo'
+
+      var params = new URLSearchParams()
+      params.append('name', this.infoForm.name)
+
+      that.axios.post(url, params).then(function(response) {
+        if (response.data.error_code === 0) {
+          that.$message.success(that.$t('modify_success'))
+          this.get_user_info()
+        } else {
+          that.$alert(response.data.error_message)
+        }
+      })
+    },
+    goback() {
+      this.$router.push({ path: '/item/index' })
+    }
   },
 
-  mounted(){
-    
-    this.get_user_info();
+  mounted() {
+    this.get_user_info()
   },
 
-  beforeDestroy(){
-  }
-  
+  beforeDestroy() {}
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .center-card a {
   font-size: 12px;
 }
 
-.center-card{
+.center-card {
   text-align: center;
   width: 500px;
   height: 400px;
 }
 
-.goback-btn{
+.goback-btn {
   z-index: 999;
   font-size: 18px;
   margin-right: 800px;
 }
 
-.infoForm{
+.infoForm {
   width: 350px;
-  margin: 0 auto ;
+  margin: 0 auto;
   margin-top: 50px;
   text-align: left;
 }
diff --git a/web_src/src/http.js b/web_src/src/http.js
index 06f7743e9..2bd881364 100644
--- a/web_src/src/http.js
+++ b/web_src/src/http.js
@@ -6,38 +6,37 @@ import axios from 'axios'
 import router from '@/router/index'
 
 // axios 配置
-axios.defaults.timeout = 20000;
-axios.defaults.baseURL = DocConfig.server;
+axios.defaults.timeout = 20000
+axios.defaults.baseURL = DocConfig.server
 
 // http request 拦截器
 axios.interceptors.request.use(
-    config => {
-        //if (store.state.token) {
-           // config.headers.Authorization = `token ${store.state.token}`;
-        //}
-        return config;
-    },
-    err => {
-        return Promise.reject(err);
-    });
+  config => {
+    // if (store.state.token) {
+    // config.headers.Authorization = `token ${store.state.token}`;
+    // }
+    return config
+  },
+  err => {
+    return Promise.reject(err)
+  })
 
 // http response 拦截器
 axios.interceptors.response.use(
-    response => {
-        if (response.config.data && response.config.data.indexOf("redirect_login=false") > -1 ) {
-            //不跳转到登录
-        }
-        else if (response.data.error_code === 10102 ) {
-            router.replace({
-                path: '/user/login',
-                query: {redirect: router.currentRoute.fullPath}
-            });
-        }
-        return response;
-    },
-    error => {
-        // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
-        return Promise.reject(error.response.data)
-    });
+  response => {
+    if (response.config.data && response.config.data.indexOf('redirect_login=false') > -1) {
+      // 不跳转到登录
+    } else if (response.data.error_code === 10102) {
+      router.replace({
+        path: '/user/login',
+        query: { redirect: router.currentRoute.fullPath }
+      })
+    }
+    return response
+  },
+  error => {
+    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
+    return Promise.reject(error.response.data)
+  })
 
-export default axios;
\ No newline at end of file
+export default axios
diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js
index 442235e46..c5bc4fcd1 100644
--- a/web_src/src/router/index.js
+++ b/web_src/src/router/index.js
@@ -125,7 +125,7 @@ export default new Router({
       path: '/team/index',
       name: 'Team',
       component: Team
-    }, 
+    },
     {
       path: '/team/member/:team_id',
       name: 'TeamMember',
@@ -135,6 +135,6 @@ export default new Router({
       path: '/team/item/:team_id',
       name: 'TeamItem',
       component: TeamItem
-    },
+    }
   ]
 })