回退标签

src/layout/Menu/index.vue

@@ -1,22 +1,23 @@
 <template>
   <el-menu
-      :class="isCollapse ? 'collapse' : ''"
-      :collapse="isCollapse"
-      :collapse-transition="false"
-      :default-active="activeMenu"
-      :unique-opened="expandOneMenu"
-      active-text-color="var(--system-primary-color)"
-      background-color="var(--system-menu-background)"
-      class="layout-menu system-scrollbar"
-      text-color="var(--system-menu-text-color)">
-    <menu-item v-for="(menu, key) in allRoutes" :key="key" :menu="menu"/>
+    :class="isCollapse ? 'collapse' : ''"
+    :collapse="isCollapse"
+    :collapse-transition="false"
+    :default-active="activeMenu"
+    :unique-opened="expandOneMenu"
+    active-text-color="var(--system-primary-color)"
+    background-color="var(--system-menu-background)"
+    class="layout-menu system-scrollbar"
+    text-color="var(--system-menu-text-color)"
+  >
+    <menu-item v-for="(menu, key) in allRoutes" :key="key" :menu="menu" />
   </el-menu>
 </template>
 
 <script>
-import {computed, defineComponent} from 'vue'
-import {useRoute} from 'vue-router'
-import {useStore} from 'vuex'
+import { computed, defineComponent } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import MenuItem from './MenuItem.vue'
 
 export default defineComponent({
@@ -30,7 +31,7 @@ export default defineComponent({
     const allRoutes = computed(() => store.state.user.routes)
     const route = useRoute()
     const activeMenu = computed(() => {
-      const {meta, path} = route
+      const { meta, path } = route
       if (meta.activeMenu) {
         return meta.activeMenu
       }

src/layout/Tabs/index.vue

@@ -1,392 +1,195 @@
 <template>
   <div class="tabs-box">
-    <right-click-menu :mouse-position="mousePosition"
-                      :config="opt"/>
-    <el-icon class="小手指" v-show="withScrollBar" @click="moveToTheLeft">
-      <ArrowLeft/>
-    </el-icon>
-    <div class="tag" ref="tagRef">
-      <div class="home_fixed" ref="homeRef" @click="backToTheHomepage">
-        <el-tag effect="dark" size="default" class="小手指"
-                :type="router.currentRoute.value.path === '/dashboard' ? 'success': ''">
-          首页
-        </el-tag>
+    <el-scrollbar ref="scrollbarDom" class="tab">
+      <div class="scrollbar-flex-content">
+        <Item v-for="menu in menuList" :key="menu.meta.title" :active="activeMenu === menu.path" :menu="menu"
+              @close="delMenu(menu)"/>
       </div>
-      <div style="display: inline-block;height: 100%" :style="{width: homeRef?.clientWidth + 3 + 'px'}"/>
-      <el-tag v-for="(item,index) in menuList"
-              :key="item.path"
-              effect="dark"
-              closable
-              @close="closeItem(index,item.path)"
-              @contextmenu.prevent="contextmenuItem(item,index,$event)"
-              size="default"
-              :type="routingHighlight(item,index)"
-              @click="jump(item.path)"
-              class="小手指">
-        {{ item.meta.title }}
-      </el-tag>
+    </el-scrollbar>
+    <div class="handle">
+      <el-dropdown placement="bottom">
+        <div class="el-dropdown-link">
+          <el-icon>
+            <ArrowDown/>
+          </el-icon>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item :disabled="currentDisabled" icon="CircleClose" @click="closeCurrentRoute"> 关闭当前标签
+            </el-dropdown-item>
+            <el-dropdown-item :disabled="menuList.length < 3" icon="CircleClose" @click="closeOtherRoute"> 关闭其他标签
+            </el-dropdown-item>
+            <el-dropdown-item :disabled="menuList.length <= 1" icon="CircleClose" @click="closeAllRoute"> 关闭所有标签
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
-    <el-icon class="小手指" v-show="withScrollBar" @click="moveToTheRight">
-      <ArrowRight/>
-    </el-icon>
   </div>
 </template>
 
+<script name="tabs" setup>
+import Item from './item.vue'
+import {computed, nextTick, ref, watch} from 'vue'
+import {useStore} from 'vuex'
+import {useRoute, useRouter} from 'vue-router'
+import tabsHook from './tabsHook'
+import {getScrollTop} from "@/utils/el-table-scroll";
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+const scrollbarDom = ref(null)
+const defaultMenu = {
+  path: '/dashboard',
+  meta: {title: '首页', hideClose: true},
+}
+const currentDisabled = computed(() => route.path === defaultMenu.path)
 
-<script setup name="tabs">
-import {ref} from 'vue'
-import tabsHook from "@/layout/Tabs/tabsHook";
-import router from '@/router'
-import RightClickMenu from "@/components/MenuItem/RightClickMenu.vue";
-
-
+const activeMenu = ref('')
 let menuList = ref(tabsHook.getItem())
-const itemKey = ref(tabsHook.getItemKey())
-
-const tagRef = ref(null)
-const withScrollBar = ref(false)
-const homeRef = ref(null)
-
-const modal = ref(false)
-
-
-const opt = [
-  {
-    name: '关闭', click: (data, index) => {
-      closeItem(index, data.path)
-    }
-  },
-  {
-    name: '关闭其他选项卡', click: (data, index) => {
-      router.push(data.path)
-      setLabel([data])
-    }
-  },
-  {
-    name: '关闭所有选项卡', click: (data, index) => {
-      menuList.value = []
-      itemKey.value = []
-      backToTheHomepage()
-    }
-  },
-  {
-    name: '关闭左侧选项卡', click: (data, index) => {
-      if (index === 0) return
-      if (index > pageIndex) {
-        router.push(data.path)
-      }
-      let temp = []
-      for (let i = index; i < menuList.value.length; i++) {
-        temp.push(menuList.value[i])
-      }
-      setLabel(temp)
-    }
-  },
-  {
-    name: '关闭右侧选项卡', click: (data, index) => {
-      if (index + 1 === menuList.value.length) return
-      if (index < pageIndex) {
-        router.push(data.path)
-      }
-      let temp = []
-      for (let i = 0; i < index + 1; i++) {
-        temp.push(menuList.value[i])
-      }
-      setLabel(temp)
-    }
-  }
-]
-
-watch(() => menuList.value, () => {
-  tabsHook.setItem(menuList.value)
-  nextTick(() => {
-    withScrollBar.value = tagRef.value.scrollWidth > tagRef.value.clientWidth
-  })
-}, {
-  deep: true, immediate: true
+if (menuList.value.length === 0) {
+  // 判断之前有没有调用过
+  addMenu(defaultMenu)
+}
+watch(menuList.value, (newVal) => {
+  tabsHook.setItem(newVal)
+})
+watch(menuList, (newVal) => {
+  tabsHook.setItem(newVal)
+})
+router.afterEach(() => {
+  addMenu(route)
+  initMenu(route)
 })
 
-const handleScrolling = () => {
-  if (withScrollBar.value) {
-    let itemData = tagRef.value.querySelectorAll('.el-tag')
-    let scroll = 0;
-
-    for (let i = 0; i < pageIndex; i++) {
-      let item = itemData[i]
-      scroll += item.scrollWidth
-    }
-    tagRef.value.scrollTo({top: 0, left: scroll, behavior: 'smooth'})
+// 关闭当前标签，首页不关闭
+function closeCurrentRoute() {
+  if (route.path !== defaultMenu.path) {
+    delMenu(route)
   }
 }
 
-let pageIndex = -1;
-const routingHighlight = (data, index) => {
-  if (data.path === router.currentRoute.value.meta.activeMenu) {
-    pageIndex = index
-    return "success";
-  } else if (data.path === router.currentRoute.value.path) {
-    pageIndex = index
-    return "success";
+// 关闭除了当前标签之外的所有标签
+function closeOtherRoute() {
+  menuList.value = [defaultMenu]
+  if (route.path !== defaultMenu.path) {
+    addMenu(route)
   }
+  setKeepAliveData()
 }
 
-const backToTheHomepage = () => {
-  router.push('/dashboard')
+// 关闭所有的标签，除了首页
+function closeAllRoute() {
+  menuList.value = [defaultMenu]
+  setKeepAliveData()
+  router.push(defaultMenu.path)
 }
 
-const handleAddingTags = (data) => {
-  if (!data) return
-
-  let value = {
-    path: data.path,
-    meta: data.meta
-  }
-
-  if (data.meta.activeMenu) {
-    value = {
-      path: data.meta.activeMenu,
-      meta: {
-        title: data.meta.parentName
-      }
+// 添加新的菜单项
+function addMenu(menu) {
+  let {path, meta, name} = menu
+  if (meta.activeMenu) {
+    let a = menuList.value.some((obj) => {
+      return obj.path === meta.activeMenu
+    })
+    if (!a) {
+      menuList.value.push({
+        path: meta.activeMenu,
+        meta: {title: meta.parentName},
+      })
     }
-  } else if (data.meta.hideTabs) {
-    return;
-  }
-  if (typeof value.meta.title === 'undefined') {
-    return;
-  }
-
-  let temp = JSON.stringify(value);
-
-  if (!itemKey.value.includes(temp)) {
-    menuList.value.push(value)
-    itemKey.value.push(temp)
+    return
+  } else if (meta.hideTabs) {
+    return
   }
-}
-
-watch(() => router.currentRoute.value, () => {
-  handleAddingTags(router.currentRoute.value)
-  nextTick(() => {
-    handleScrolling()
+  let hasMenu = menuList.value.some((obj) => {
+    return obj.path === path || obj.path === meta.activeMenu
   })
-}, {immediate: true})
-
-
-const mousePosition = ref()
-const contextmenuItem = async (item, index, event) => {
-  mousePosition.value = {
-    event,
-    data: item,
-    index
+  if (!hasMenu) {
+    menuList.value.push({
+      path,
+      meta,
+      name,
+    })
   }
 }
 
-const closeItem = (index, data) => {
-
-  menuList.value.splice(index, 1)
-  itemKey.value.splice(index, 1)
-
-  if (menuList.value.length === 0) {
-    router.push('/dashboard')
-  } else {
-    if (router.currentRoute.value.path === data) {
-      let temp = index === menuList.value.length ? menuList.value.length - 1 : index
-      router.push(menuList.value[temp]?.path)
+// 删除菜单项
+function delMenu(menu) {
+  if (!menu.meta.hideClose) {
+    if (menu.meta.cache && menu.name) {
+      store.commit('keepAlive/delKeepAliveComponentsName', menu.name)
     }
+    menuList.value.splice(
+        menuList.value.findIndex((item) => item.path === menu.path),
+        1
+    )
   }
-
-}
-
-
-const setLabel = (data) => {
-  menuList.value = data
-  itemKey.value = []
-  for (let i = 0, len = menuList.value.length; i < len; i++) {
-    itemKey.value.push(JSON.stringify(menuList.value[i]))
+  if (menu.path === activeMenu.value) {
+    router.push(defaultMenu.path)
   }
 }
 
-const jump = (path) => {
-  router.push(path)
+// 初始化activeMenu
+function initMenu(menu) {
+  if (menu.meta.activeMenu) {
+    activeMenu.value = menu.meta.activeMenu
+  } else {
+    activeMenu.value = menu.path
+  }
+  nextTick(() => {
+    try {
+      setPosition()
+    } catch (e) {
+      console.log(e)
+    }
+  })
 }
 
-const moveToTheLeft = () => {
-  tagRef.value.scrollTo({top: 0, left: 0, behavior: 'smooth'})
+// 设置当前滚动条应该在的位置
+function setPosition() {
+  if (scrollbarDom.value) {
+    const domBox = {
+      scrollbar: scrollbarDom.value.$el.querySelector('.el-scrollbar__wrap '),
+      activeDom: scrollbarDom.value.$el.querySelector('.active'),
+      activeFather: scrollbarDom.value.$el.querySelector('.el-scrollbar__view'),
+    }
+    for (let key in domBox) {
+      if (!domBox[key]) {
+        return
+      }
+    }
+    const domData = {
+      scrollbar: domBox.scrollbar.getBoundingClientRect(),
+      activeDom: domBox.activeDom.getBoundingClientRect(),
+      activeFather: domBox.activeFather.getBoundingClientRect(),
+    }
+    scrollbarDom.value.scrollTo({
+      top: 0,
+      left: domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width,
+      behavior: 'smooth',
+    })
+    // domBox.scrollbar.scrollLeft = domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width
+  }
 }
 
-const moveToTheRight = () => {
-  tagRef.value.scrollTo({top: 0, left: tagRef.value.clientWidth, behavior: 'smooth'})
+function setKeepAliveData() {
+  let keepAliveNames = []
+  menuList.value.forEach((menu) => {
+    menu.meta && menu.meta.cache && menu.name && keepAliveNames.push(menu.name)
+  })
+  store.commit('keepAlive/setKeepAliveComponentsName', keepAliveNames)
 }
 
-
+addMenu(route)
+initMenu(route)
 </script>
 
-<!--<script name="tabs" setup>-->
-<!--import Item from './item.vue'-->
-<!--import {computed, nextTick, ref, watch} from 'vue'-->
-<!--import {useStore} from 'vuex'-->
-<!--import {useRoute, useRouter} from 'vue-router'-->
-<!--import tabsHook from './tabsHook'-->
-<!--import {getScrollTop} from "@/utils/el-table-scroll";-->
-
-<!--const store = useStore()-->
-<!--const route = useRoute()-->
-<!--const router = useRouter()-->
-<!--const scrollbarDom = ref(null)-->
-<!--const defaultMenu = {-->
-<!--  path: '/dashboard',-->
-<!--  meta: {title: '首页', hideClose: true},-->
-<!--}-->
-<!--const currentDisabled = computed(() => route.path === defaultMenu.path)-->
-
-<!--const activeMenu = ref('')-->
-<!--let menuList = ref(tabsHook.getItem())-->
-<!--if (menuList.value.length === 0) {-->
-<!--  // 判断之前有没有调用过-->
-<!--  addMenu(defaultMenu)-->
-<!--}-->
-<!--console.log(menuList)-->
-<!--watch(menuList.value, (newVal) => {-->
-<!--  tabsHook.setItem(newVal)-->
-<!--})-->
-<!--watch(menuList, (newVal) => {-->
-<!--  tabsHook.setItem(newVal)-->
-<!--})-->
-<!--router.afterEach(() => {-->
-<!--  addMenu(route)-->
-<!--  initMenu(route)-->
-<!--})-->
-
-<!--// 关闭当前标签，首页不关闭-->
-<!--function closeCurrentRoute() {-->
-<!--  if (route.path !== defaultMenu.path) {-->
-<!--    delMenu(route)-->
-<!--  }-->
-<!--}-->
-
-<!--// 关闭除了当前标签之外的所有标签-->
-<!--function closeOtherRoute() {-->
-<!--  menuList.value = [defaultMenu]-->
-<!--  if (route.path !== defaultMenu.path) {-->
-<!--    addMenu(route)-->
-<!--  }-->
-<!--  setKeepAliveData()-->
-<!--}-->
-
-<!--// 关闭所有的标签，除了首页-->
-<!--function closeAllRoute() {-->
-<!--  menuList.value = [defaultMenu]-->
-<!--  setKeepAliveData()-->
-<!--  router.push(defaultMenu.path)-->
-<!--}-->
-
-<!--// 添加新的菜单项-->
-<!--function addMenu(menu) {-->
-<!--  let {path, meta, name} = menu-->
-<!--  if (meta.activeMenu) {-->
-<!--    let a = menuList.value.some((obj) => {-->
-<!--      return obj.path === meta.activeMenu-->
-<!--    })-->
-<!--    if (!a) {-->
-<!--      menuList.value.push({-->
-<!--        path: meta.activeMenu,-->
-<!--        meta: {title: meta.parentName},-->
-<!--      })-->
-<!--    }-->
-<!--    return-->
-<!--  } else if (meta.hideTabs) {-->
-<!--    return-->
-<!--  }-->
-<!--  let hasMenu = menuList.value.some((obj) => {-->
-<!--    return obj.path === path || obj.path === meta.activeMenu-->
-<!--  })-->
-<!--  if (!hasMenu) {-->
-<!--    menuList.value.push({-->
-<!--      path,-->
-<!--      meta,-->
-<!--      name,-->
-<!--    })-->
-<!--  }-->
-<!--}-->
-
-<!--// 删除菜单项-->
-<!--function delMenu(menu) {-->
-<!--  if (!menu.meta.hideClose) {-->
-<!--    if (menu.meta.cache && menu.name) {-->
-<!--      store.commit('keepAlive/delKeepAliveComponentsName', menu.name)-->
-<!--    }-->
-<!--    menuList.value.splice(-->
-<!--        menuList.value.findIndex((item) => item.path === menu.path),-->
-<!--        1-->
-<!--    )-->
-<!--  }-->
-<!--  if (menu.path === activeMenu.value) {-->
-<!--    router.push(defaultMenu.path)-->
-<!--  }-->
-<!--}-->
-
-<!--// 初始化activeMenu-->
-<!--function initMenu(menu) {-->
-<!--  if (menu.meta.activeMenu) {-->
-<!--    activeMenu.value = menu.meta.activeMenu-->
-<!--  } else {-->
-<!--    activeMenu.value = menu.path-->
-<!--  }-->
-<!--  nextTick(() => {-->
-<!--    try {-->
-<!--      setPosition()-->
-<!--    } catch (e) {-->
-<!--      console.log(e)-->
-<!--    }-->
-<!--  })-->
-<!--}-->
-
-<!--// 设置当前滚动条应该在的位置-->
-<!--function setPosition() {-->
-<!--  if (scrollbarDom.value) {-->
-<!--    const domBox = {-->
-<!--      scrollbar: scrollbarDom.value.$el.querySelector('.el-scrollbar__wrap '),-->
-<!--      activeDom: scrollbarDom.value.$el.querySelector('.active'),-->
-<!--      activeFather: scrollbarDom.value.$el.querySelector('.el-scrollbar__view'),-->
-<!--    }-->
-<!--    for (let key in domBox) {-->
-<!--      if (!domBox[key]) {-->
-<!--        return-->
-<!--      }-->
-<!--    }-->
-<!--    const domData = {-->
-<!--      scrollbar: domBox.scrollbar.getBoundingClientRect(),-->
-<!--      activeDom: domBox.activeDom.getBoundingClientRect(),-->
-<!--      activeFather: domBox.activeFather.getBoundingClientRect(),-->
-<!--    }-->
-<!--    scrollbarDom.value.scrollTo({-->
-<!--      top: 0,-->
-<!--      left: domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width,-->
-<!--      behavior: 'smooth',-->
-<!--    })-->
-<!--    // domBox.scrollbar.scrollLeft = domData.activeDom.x - domData.activeFather.x + (1 / 2) * domData.activeDom.width - (1 / 2) * domData.scrollbar.width-->
-<!--  }-->
-<!--}-->
-
-<!--function setKeepAliveData() {-->
-<!--  let keepAliveNames = []-->
-<!--  menuList.value.forEach((menu) => {-->
-<!--    menu.meta && menu.meta.cache && menu.name && keepAliveNames.push(menu.name)-->
-<!--  })-->
-<!--  store.commit('keepAlive/setKeepAliveComponentsName', keepAliveNames)-->
-<!--}-->
-
-<!--addMenu(route)-->
-<!--initMenu(route)-->
-<!--</script>-->
-
 <style lang="scss" scoped>
-
-
 .tabs-box {
-  position: relative;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   height: 40px;
   background: var(--system-header-background);
@@ -394,127 +197,71 @@ const moveToTheRight = () => {
   border-top: 1px solid var(--system-header-border-color);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 
-  .tag {
-    width: calc(100% - 60px);
-    overflow-x: auto;
-    white-space: nowrap;
-    margin: 0 5px;
+  .tab {
+    width: calc(100% - 40px);
+  }
 
-    .home_fixed {
-      display: inline-block;
-      position: fixed;
-      background-color: white
+  .handle {
+    min-width: 35px;
+    height: 100%;
+    background-color: rgb(234, 233, 233);
+    display: flex;
+    align-items: center;
+
+    .el-dropdown-link {
+      margin-top: 5px;
+      border-left: 1px solid var(--system-header-border-color);
+      height: 25px;
+      width: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
-    span {
-      margin: 0 3px;
+    i {
+      color: var(--system-header-text-color);
     }
-
   }
-
 }
 
-.tag::-webkit-scrollbar {
-  height: 5px;
-  background-color: #fff;
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
 }
 
-.tag:hover ::-webkit-scrollbar-track-piece {
-  /*鼠标移动上去再显示滚动条*/
-  background-color: #fff;
-  /* 滚动条的背景颜色 */
-  border-radius: 6px;
-  /* 滚动条的圆角宽度 */
+:deep(.scroll-container .el-scrollbar__bar) {
+  bottom: 0;
 }
 
+:deep(.scroll-container .el-scrollbar__wrap) {
+  height: 49px;
+}
 
-.tag:hover::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #535353;
+.tags-view-container {
+  height: 34px;
+  flex: 1;
+  width: 100%;
+  display: flex;
 }
 
-.tag:hover::-webkit-scrollbar-track { /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #EDEDED;
+.el-icon-full-screen {
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.025);
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
 
-//.tabs-box {
-//  display: flex;
-//  justify-content: space-between;
-//  align-items: center;
-//  height: 40px;
-//  background: var(--system-header-background);
-//  border-bottom: 1px solid var(--system-header-border-color);
-//  border-top: 1px solid var(--system-header-border-color);
-//  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-//
-//  .tab {
-//    width: calc(100% - 40px);
-//  }
-//
-//  .handle {
-//    min-width: 35px;
-//    height: 100%;
-//    background-color: rgb(234, 233, 233);
-//    display: flex;
-//    align-items: center;
-//
-//    .el-dropdown-link {
-//      margin-top: 5px;
-//      border-left: 1px solid var(--system-header-border-color);
-//      height: 25px;
-//      width: 40px;
-//      display: flex;
-//      justify-content: center;
-//      align-items: center;
-//    }
-//
-//    i {
-//      color: var(--system-header-text-color);
-//    }
-//  }
-//}
-//
-//.scroll-container {
-//  white-space: nowrap;
-//  position: relative;
-//  overflow: hidden;
-//  width: 100%;
-//}
-//
-//:deep(.scroll-container .el-scrollbar__bar) {
-//  bottom: 0;
-//}
-//
-//:deep(.scroll-container .el-scrollbar__wrap) {
-//  height: 49px;
-//}
-//
-//.tags-view-container {
-//  height: 34px;
-//  flex: 1;
-//  width: 100%;
-//  display: flex;
-//}
-//
-//.el-icon-full-screen {
-//  cursor: pointer;
-//
-//  &:hover {
-//    background: rgba(0, 0, 0, 0.025);
-//  }
-//
-//  &:focus {
-//    outline: none;
-//  }
-//}
-//
-//
-//.scrollbar-flex-content {
-//  display: flex;
-//  width: calc(100% - 50px);
-//  //overflow-x: scroll;
-//}
+
+.scrollbar-flex-content {
+  display: flex;
+  width: calc(100% - 50px);
+  //overflow-x: scroll;
+}
 </style>

src/layout/Tabs/tabsHook.js

@@ -1,19 +1,9 @@
-import {clone} from "@/utils/clone";
-
 const tabsHook = {
-    setItem: function (arr) {
-        localStorage.setItem('tabs', JSON.stringify(arr))
-    },
-    getItem: function () {
-        return clone(JSON.parse(localStorage.getItem('tabs') || '[]'))
-    },
-    getItemKey: function () {
-        let data = this.getItem()
-        let temp = []
-        for (let i = 0; i < data.length; i++) {
-            temp.push(JSON.stringify(data[i]))
-        }
-        return temp
-    }
+  setItem: function (arr) {
+    localStorage.setItem('tabs', JSON.stringify(arr))
+  },
+  getItem: function () {
+    return JSON.parse(localStorage.getItem('tabs') || '[]')
+  },
 }
 export default tabsHook