优化web库的体积

examples/components/mainContent.vue

@@ -1,14 +1,13 @@
 <template>
   <section class="mainContent">
-    <el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick"
-             @tab-remove="handleTabRemove">
-      <el-tab-pane label="默认页" class="layoutItem">
-        <ai-empty>欢迎使用村微产品库</ai-empty>
-      </el-tab-pane>
-      <el-tab-pane v-for="op in tabs" :key="op.name" :closable="op.name!='工作台'" :name="op.name" :label="op.label" lazy>
-        <router-view v-if="currentTab==op.name"/>
-      </el-tab-pane>
+    <el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick" @tab-remove="handleTabRemove">
+      <el-tab-pane label="首页" name="0"/>
+      <el-tab-pane v-for="op in tabs" :key="op.name" :name="op.name" :label="op.label" lazy closable/>
     </el-tabs>
+    <div class="fill">
+      <router-view/>
+      <ai-empty v-if="currentTab=='0'">欢迎使用村微产品库</ai-empty>
+    </div>
   </section>
 </template>
 
@@ -33,18 +32,22 @@ export default {
     $route: {
       immediate: true,
       handler() {
-        this.getTabs("route")
+        this.getTabs()
       }
     },
   },
   methods: {
     handleTabClick({name}) {
-      let {name: route, query, hash} = this.tabs.find(e => e.name == name),
-          exps = []
-      query.id && exps.push(query.id)
-      hash && exps.push(hash)
-      let reg = new RegExp(`(${exps.join("|")})`, 'g')
-      this.$router.push({name: route.replace(reg, ''), query, hash})
+      if (name == '0') {
+        this.$router.push("/")
+      } else {
+        let {name: route, query, hash} = this.tabs.find(e => e.name == name),
+            exps = []
+        query.id && exps.push(query.id)
+        hash && exps.push(hash)
+        let reg = new RegExp(`(${exps.join("|")})`, 'g')
+        this.$router.push({name: route.replace(reg, ''), query, hash})
+      }
     },
     handleTabRemove(id = this.currentTab) {
       let tabs = JSON.parse(JSON.stringify(this.tabs)),
@@ -55,9 +58,8 @@ export default {
       }
       this.tabs.splice(index, 1)
     },
-    getTabs(from) {
+    getTabs() {
       let {name, query, hash} = this.$route
-      console.log(`getTabs>>>>>>>>>%s>>>>>>>%s`, from, name)
       let tab = this.tabs.find(e => e.name == this.currentTab),
           tabName = [name, query?.id, hash].join("")
       if (tab) {
@@ -68,6 +70,9 @@ export default {
       }
     },
   },
+  beforeRouteUpdate(to, from) {
+    console.log(to, from)
+  }
 }
 </script>
 
@@ -75,9 +80,10 @@ export default {
 .mainContent {
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 
   ::v-deep.layout {
-    height: 100%;
     background: #F5F6F9;
     display: flex;
     flex-direction: column;
@@ -95,7 +101,7 @@ export default {
       }
 
       .el-tabs__item {
-        padding: 0 8px 0 12px;
+        padding: 0 8px 0 12px !important;
         text-align: left;
         min-width: 130px;
         height: 36px;
@@ -146,15 +152,6 @@ export default {
         }
       }
     }
-
-    .el-tabs__content {
-      flex: 1;
-      min-height: 0;
-
-      .el-tab-pane {
-        height: 100%;
-      }
-    }
   }
 }
 </style>