调整界面和底座风格基本保持一致

examples/App.vue

@@ -5,17 +5,17 @@
       <el-button type="text" @click="showTools=false">隐藏工具栏</el-button>
       <el-button type="text" @click="handleLogin">点此登录</el-button>
     </div>
-    <el-row class="main-content" type="flex">
-      <el-scrollbar class="menu" v-if="showTools">
-        <el-input size="small" v-model="search" placeholder="应用名称或文件名" clearable @change="recordSearch"/>
-        <el-menu router>
-          <el-menu-item v-for="(menu,j) in menus" :key="j" :index="menu.path">
-            {{ menu.label }}
-          </el-menu-item>
-        </el-menu>
-      </el-scrollbar>
-      <router-view v-if="selectedApp"/>
-      <ai-empty v-else>请选择应用</ai-empty>
+    <el-row class="fill" type="flex">
+      <slider-nav v-if="showTools"/>
+      <el-tabs class="layout fill" 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/>
+        </el-tab-pane>
+      </el-tabs>
     </el-row>
     <div v-if="dialog" class="sign-box">
       <ai-sign style="margin: auto" :instance="$axios" :action="{login}"
@@ -27,9 +27,11 @@
 
 <script>
 import {mapState} from "vuex";
+import SliderNav from "./components/sliderNav";
 
 export default {
   name: 'app',
+  components: {SliderNav},
   computed: {
     ...mapState(['apps']),
     serveName() {
@@ -39,10 +41,6 @@ export default {
       }
       return names[process.env.NODE_ENV]
     },
-    menus() {
-      let reg = new RegExp(`.*${this.search.replace(/-/g,'')||''}.*`, 'gi')
-      return (this.apps || []).filter(e => !this.search || reg.test(e.name) || reg.test(e.label))
-    },
     selectedApp() {
       return this.$route.matched.length > 0
     },
@@ -50,14 +48,26 @@ export default {
       let url = '/auth/oauth/token';
       /project\/sass/g.test(location.pathname) && (url += "?corpId=ww596787bb70f08288")
       return url
+    },
+    currentTab() {
+      let {name, query, hash} = this.$route
+      return [name, query?.id, hash].join("")
     }
   },
+  watch: {
+    $route: {
+      immediate: true,
+      handler(v) {
+        this.getTabs(v)
+      }
+    },
+  },
   data() {
     return {
       token: "",
-      search: "",
       dialog: false,
-      showTools: true
+      showTools: true,
+      tabs: []
     }
   },
   methods: {
@@ -86,12 +96,37 @@ export default {
         this.dialog = true
       })
     },
-    recordSearch() {
-      localStorage.setItem("searchApp", this.search)
-    }
+    handleTabClick(tab) {
+      let to = {}, selectedTab = this.tabs.find(e => e.name == tab.name)
+      if (selectedTab) {
+        to = {...selectedTab, params: {tabclick: 1}}
+      } else {
+        let {name, query, hash} = tab
+        to = {name, query, hash, params: {tabclick: 1}}
+      }
+      this.$router.push({...to})
+    },
+    handleTabRemove(id = this.currentTab) {
+      let tabs = JSON.parse(JSON.stringify(this.tabs)),
+          index = tabs?.findIndex(e => id == e.name)
+      if (id == this.currentTab) {
+        let next = tabs?.[index + 1] || tabs?.[index - 1]
+        this.handleTabClick(next)
+      }
+      this.tabs.splice(index, 1)
+    },
+    getTabs() {
+      let {name, query, hash} = this.$route
+      let tab = this.tabs.find(e => e.name == this.currentTab)
+      if (tab) {
+      } else if (name) {
+        let menu = this.apps.find(e => e.name == name)
+        this.tabs.push({name, query, hash, label: menu?.label})
+      }
+    },
   },
   created() {
-    this.search = localStorage.getItem("searchApp") || ""
+    this.getTabs()
     this.token = localStorage.getItem("ui-token")
     if (this.token) this.getUserInfo()
     wx = jWeixin
@@ -112,35 +147,6 @@ html, body {
   margin: 0;
 }
 
-.villageFinance-autocomplete {
-  width: auto !important;
-
-  li {
-    line-height: normal !important;
-    padding: 7px !important;
-    border-bottom: 1px solid #f1f1f1;
-
-    &:hover {
-      background-color: #f4f4f4 !important;
-    }
-  }
-
-  .name {
-    text-overflow: ellipsis;
-    line-height: normal;
-    overflow: hidden;
-  }
-
-  .addr {
-    font-size: 12px;
-    color: #b4b4b4;
-  }
-
-  .highlighted .addr {
-    color: #ddd;
-  }
-}
-
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -207,18 +213,6 @@ html, body {
     }
   }
 
-  & > .main-content {
-    width: 100%;
-    flex: 1;
-    min-height: 0;
-    box-sizing: border-box;
-
-    & > *:last-child {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
   .sign-box {
     z-index: 99;
     margin: -10px;
@@ -229,5 +223,90 @@ html, body {
     height: 100%;
     background: rgba(0, 0, 0, 0.2);
   }
+
+
+}
+
+.layout {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  background: #F5F6F9;
+  display: flex;
+  flex-direction: column;
+
+  & > .el-tabs__header {
+    margin-bottom: 0;
+    background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
+    height: 40px;
+    display: flex;
+    align-items: flex-end;
+    border: none;
+
+    .el-tabs__nav {
+      border: none;
+    }
+
+    .el-tabs__item {
+      padding: 0 8px 0 12px;
+      text-align: left;
+      min-width: 130px;
+      height: 36px;
+      line-height: 36px;
+      border: none;
+      color: #555;
+      font-size: 12px;
+
+      & + .el-tabs__item {
+        margin-left: 2px;
+      }
+
+      .el-icon-close {
+        float: right;
+        width: auto;
+        height: 100%;
+        line-height: 36px;
+        background: transparent;
+        font-size: 16px;
+        color: #89b;
+
+        &:hover {
+          color: #000;
+        }
+      }
+
+      &.is-active {
+        border: 1px solid #D8DCE3;
+        border-bottom: none;
+        border-radius: 4px 4px 0 0;
+        background: #F5F6F9;
+        color: #222;
+
+        &:after {
+          display: none;
+        }
+      }
+
+      &:after {
+        position: absolute;
+        right: 0;
+        content: " ";
+        width: 1px;
+        background: #D8DCE3;
+        height: 24px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  .el-tabs__content {
+    flex: 1;
+    min-height: 0;
+
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
 }
 </style>