From a56948aa37d447ab2de923f9110ba7c1aecfd85d Mon Sep 17 00:00:00 2001
From: kubbo <390378816@qq.com>
Date: Sun, 29 Jan 2023 00:18:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E5=8F=96=E9=A1=B5=E9=9D=A2tab?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/navTabs.vue | 64 ++++++++++++++++++++++++++++++++++
 web/src/utils/router.js        |  3 +-
 web/src/utils/store.js         |  9 ++++-
 web/src/views/appEntry.vue     |  4 +--
 web/src/views/home.vue         | 28 ++++++---------
 5 files changed, 86 insertions(+), 22 deletions(-)
 create mode 100644 web/src/components/navTabs.vue

diff --git a/web/src/components/navTabs.vue b/web/src/components/navTabs.vue
new file mode 100644
index 0000000..71b2c2d
--- /dev/null
+++ b/web/src/components/navTabs.vue
@@ -0,0 +1,64 @@
+<template>
+  <section class="navTabs flex pad-h8 pad-v8">
+    <div class="item pad-h8" v-text="`首页`" :class="{current:$route.name=='工作台'}" @click="$router.push({name:'工作台'})"/>
+    <div class="item pad-h8 flex center" v-for="(item,i) in tabs" :key="item.id"
+         :class="{current:item.name==$route.name}" @click="handleJump(item)">
+      <div class="mar-r8" v-text="item.label"/>
+      <el-icon @click.stop="handleClosePage(i)">
+        <Close/>
+      </el-icon>
+    </div>
+  </section>
+</template>
+
+<script>
+import {mapState} from "pinia/dist/pinia";
+import {mainStore} from "../utils/store";
+import {Close} from "@element-plus/icons-vue";
+
+export default {
+  name: "navTabs",
+  components: {Close},
+  computed: {
+    ...mapState(mainStore, ['pages']),
+    tabs: v => v.pages
+  },
+  methods: {
+    handleClosePage(index) {
+      mainStore().deletePage(index)
+      this.handleJump(this.tabs?.[index - 1] || {name: '工作台'})
+    },
+    handleJump(page) {
+      this.$router.push({name: page.name})
+    }
+  },
+  created() {
+    const currentPage = JSON.parse(localStorage.getItem("apps") || null)?.find(e => e.name == this.$route.name);
+    currentPage && mainStore().addPage(currentPage)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navTabs {
+  .item {
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    line-height: 32px;
+    font-size: 14px;
+    cursor: pointer;
+    user-select: none;
+    color: #999;
+
+    &.current {
+      color: #fff;
+      background: var(--el-color-primary);
+      border-color: transparent;
+    }
+
+    & + .item {
+      margin-left: 8px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/utils/router.js b/web/src/utils/router.js
index 8a4d67c..74f1336 100644
--- a/web/src/utils/router.js
+++ b/web/src/utils/router.js
@@ -34,7 +34,8 @@ export default loadApps().then(() => createRouter({
     if (to.name == "工作台") {
       next()
     } else if (getToken()) {
-      next({name: "工作台"})
+      if (to.name == '登录') next({name: "工作台"})
+      else next()
     } else if (to.name != '登录') {
       next({name: "登录"})
     } else next()
diff --git a/web/src/utils/store.js b/web/src/utils/store.js
index 338bcfd..146e769 100644
--- a/web/src/utils/store.js
+++ b/web/src/utils/store.js
@@ -4,7 +4,8 @@ import http from "./axios";
 export const mainStore = defineStore('main', {
   state: () => ({
     user: {},
-    token: ""
+    token: "",
+    pages: []
   }),
   actions: {
     getToken(params) {
@@ -23,6 +24,12 @@ export const mainStore = defineStore('main', {
         }
       })
     },
+    addPage(page) {
+      if (!this.pages.find(e => e.id == location.href)) this.pages.push({...page, id: location.href})
+    },
+    deletePage(i) {
+      this.pages.splice(i, 1)
+    },
     logout() {
       this.user = {}
       this.token = ""
diff --git a/web/src/views/appEntry.vue b/web/src/views/appEntry.vue
index 5b4219c..e2ef8ee 100644
--- a/web/src/views/appEntry.vue
+++ b/web/src/views/appEntry.vue
@@ -1,5 +1,5 @@
 <template>
-  <component class="appEntry" v-if="app" :is="app" :instance="axios" :dict="$dict" :permissions="$permissions"/>
+  <component class="appEntry" v-if="app" :is="app" :instance="$http"/>
 </template>
 
 <script>
@@ -21,7 +21,7 @@ export default {
       if (this.name) return this.name
       else {
         if (this.$route.name == '工作台') return Console
-        let route = this.user.info?.menuSet.find(e => e.route == this.$route.name)
+        const route = this.user.info?.menuSet.find(e => e.route == this.$route.name)
         if (route?.app.indexOf('/') > -1) {//处理历史数据,后续慢慢调整
           return () => import(`./${route.app}`)
         } else if (defineComponent(route?.app)) {
diff --git a/web/src/views/home.vue b/web/src/views/home.vue
index 00b29b5..d13e683 100644
--- a/web/src/views/home.vue
+++ b/web/src/views/home.vue
@@ -10,22 +10,13 @@
         </el-row>
       </div>
       <div class="mainContent fill">
+        <nav-tabs/>
         <div v-if="$route.name=='工作台'" class="default fill">
           <div>欢迎来到{{ $sys.title }}</div>
         </div>
-        <template v-else>
-          <el-row class="breadcrumb" align="middle">
-            <div class="iconfont icon-dangqianweizhi" v-text="' 当前位置：'"/>
-            <el-breadcrumb separator="-">
-              <el-breadcrumb-item>基础数据</el-breadcrumb-item>
-              <el-breadcrumb-item>人口基础数据</el-breadcrumb-item>
-            </el-breadcrumb>
-          </el-row>
-          <el-scrollbar class="fill">
-            <router-view class="fill"/>
-          </el-scrollbar>
-        </template>
-        <div class="copyright sub" v-text="`copyright @2022 ${$sys.title}`"/>
+        <el-scrollbar v-else class="fill">
+          <router-view class="fill"/>
+        </el-scrollbar>
       </div>
     </div>
   </el-row>
@@ -35,15 +26,18 @@
 import SliderNav from "../components/sliderNav";
 import {mapActions, mapState} from "pinia/dist/pinia";
 import {mainStore} from "../utils/store";
+import NavTabs from "../components/navTabs";
 
 export default {
   name: "home",
-  components: {SliderNav},
+  components: {NavTabs, SliderNav},
   computed: {
     ...mapState(mainStore, ['user'])
   },
   data() {
-    return {system: "1"}
+    return {
+      system: "1"
+    }
   },
   methods: {
     ...mapActions(mainStore, ['getUserInfo'])
@@ -111,11 +105,9 @@ export default {
   :deep(.mainContent) {
     display: flex;
     flex-direction: column;
-    padding-right: 20px;
 
     .el-scrollbar {
-      background: #fff;
-      box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+      background: var(--background-color);
 
       .el-scrollbar__view {
         min-height: 100%;