CodeMaster/node_modules/.cache/vue-loader/33d91cb244f6d4818be33da65c587414.json

{"remainingRequest":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/layouts/TabLayout.vue?vue&type=style&index=0&id=76d05bf0&scoped=true&lang=css","dependencies":[{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/layouts/TabLayout.vue","mtime":1742646402773},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/css-loader/dist/cjs.js","mtime":1743264596127},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1743264597030},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/postcss-loader/src/index.js","mtime":1743264596321},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js","mtime":1743264596512}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci50YWItYmFyID4+PiAuYW50LXRhYnMtYmFyIHsKICBtYXJnaW4tYm90dG9tOiAwOwp9CgouYnJlYWRjcnVtYiB7CiAgbWFyZ2luLWJvdHRvbTogMTBweDsKfQo="},{"version":3,"sources":["TabLayout.vue"],"names":[],"mappings":";AAiMA;AACA;AACA;;AAEA;AACA;AACA","file":"TabLayout.vue","sourceRoot":"src/layouts","sourcesContent":["<template>\n  <div class=\"tab-layout\">\n    <a-tabs\n      type=\"editable-card\"\n      class=\"tab-bar\"\n      :hide-add=\"true\"\n      :active-key=\"activePage\"\n      @change=\"changePage\"\n      @edit=\"editPage\"\n      @contextmenu=\"onContextmenu\"\n    >\n      <a-tab-pane v-for=\"page in pageList\" :key=\"page.fullPath\">\n        <template #tab>\n          <span :data-key=\"page.fullPath\">\n            {{ page.meta.title }}\n          </span>\n        </template>\n      </a-tab-pane>\n    </a-tabs>\n    <PageToggleTransition name=\"fadeIn\">\n      <keep-alive :exclude=\"dustbin\">\n        <router-view />\n      </keep-alive>\n    </PageToggleTransition>\n    <ContextMenu\n      :list=\"menuItems\"\n      :visible.sync=\"menuVisible\"\n      @select=\"onMenuSelect\"\n    />\n  </div>\n</template>\n\n<script>\nimport { message } from 'ant-design-vue';\nimport { last } from 'lodash-es';\nimport ContextMenu from '../components/common/ContextMenu';\nimport PageToggleTransition from '../components/transition/PageToggleTransition';\n\nexport default {\n  name: 'TabLayout',\n  components: { PageToggleTransition, ContextMenu },\n  data() {\n    return {\n      pageList: [],\n      dustbin: [],\n      activePage: '',\n      menuVisible: false,\n      menuItems: [\n        { key: '1', icon: 'arrow-left', text: '关闭左侧' },\n        { key: '2', icon: 'arrow-right', text: '关闭右侧' },\n        { key: '3', icon: 'close', text: '关闭其它' },\n      ],\n    };\n  },\n  watch: {\n    $route: {\n      immediate: true,\n      handler(route) {\n        this.activePage = route.fullPath;\n        this.putCache(route);\n        const index = this.pageList.findIndex(item => item.fullPath === route.fullPath);\n        if (index === -1) {\n          this.pageList.push(route);\n        }\n      },\n    },\n  },\n  methods: {\n    log(data) {\n      console.log(data);\n    },\n    changePage(key) {\n      this.activePage = key;\n      this.$router.push(key);\n    },\n    editPage(key, action) {\n      if (action === 'remove') {\n        this.remove(key);\n      }\n    },\n    remove(key) {\n      if (this.pageList.length <= 1) {\n        return message.info('最后一页了哦~');\n      }\n      let curIndex = this.pageList.findIndex(item => item.fullPath === key);\n      const { matched } = this.pageList[curIndex];\n      const componentName = last(matched).components.default.name;\n      this.dustbin.push(componentName);\n      this.pageList.splice(curIndex, 1);\n      // 如果删除的是当前页才需要跳转\n      if (key === this.activePage) {\n        // 判断向左跳还是向右跳\n        curIndex = curIndex >= this.pageList.length ? this.pageList.length - 1 : curIndex;\n        const page = this.pageList[curIndex];\n        this.$router.push(page.fullPath).finally(() => {\n          this.dustbin.splice(0); // 重置，否则会影响到某些组件的缓存\n        });\n      }\n    },\n    /**\n     * 右键菜单\n     */\n    onContextmenu(e) {\n      const key = getTabKey(e.target);\n      if (!key) return;\n\n      e.preventDefault();\n      this.menuVisible = true;\n    },\n    onMenuSelect(key, target) {\n      const tabKey = getTabKey(target);\n      switch (key) {\n        case '1': this.closeLeft(tabKey); break;\n        case '2': this.closeRight(tabKey); break;\n        case '3': this.closeOthers(tabKey); break;\n        default: break;\n      }\n    },\n    closeOthers(tabKey) {\n      const index = this.pageList.findIndex(item => item.fullPath === tabKey);\n      for (const route of this.pageList) {\n        if (route.fullPath !== tabKey) {\n          this.clearCache(route);\n        }\n      }\n      const page = this.pageList[index];\n      this.pageList = [page];\n      this.activePage = page.fullPath;\n      this.$router.push(this.activePage).catch(e => e);\n    },\n    closeLeft(tabKey) {\n      const index = this.pageList.findIndex(item => item.fullPath === tabKey);\n      this.pageList.forEach((route, i) => {\n        if (i < index) {\n          this.clearCache(route);\n        }\n      });\n      const restPages = this.pageList.slice(index);\n      this.pageList = restPages;\n      // 判断当前activePage是否在将要删除的页面中\n      const curActivePage = restPages.find(item => item.fullPath === this.activePage);\n      if (!curActivePage) {\n        this.activePage = restPages[0].fullPath;\n        this.$router.push(this.activePage).catch(e => e);\n      }\n    },\n    closeRight(tabKey) {\n      const index = this.pageList.findIndex(item => item.fullPath === tabKey);\n      this.pageList.forEach((route, i) => {\n        if (i > index) {\n          this.clearCache(route);\n        }\n      });\n      const restPages = this.pageList.slice(0, index + 1);\n      this.pageList = restPages;\n      // 判断当前activePage是否在将要删除的页面中\n      const curActivePage = restPages.find(item => item.fullPath === this.activePage);\n      if (!curActivePage) {\n        this.activePage = last(restPages).fullPath;\n        this.$router.push(this.activePage).catch(e => e);\n      }\n    },\n    /**\n     * 缓存控制\n     */\n    clearCache(route) {\n      const componentName = last(route.matched).components.default.name;\n      this.dustbin.push(componentName); // 清除\n    },\n    putCache(route) {\n      const componentName = last(route.matched).components.default.name;\n      if (this.dustbin.includes(componentName)) {\n        this.dustbin = this.dustbin.filter(item => item !== componentName);\n      }\n    },\n  },\n};\n\n/**\n * 获取Tab标签下dom节点中自定义的数据，递归向下查找最多3层（观察Tab组件渲染后的DOM得出）\n * 该方式属于hack手段，不得已为之\n * @param{HTMLElement} target event.target\n * @param depth 深度\n */\nfunction getTabKey(target, depth = 0) {\n  if (depth > 2 || !target) {\n    return null;\n  }\n  return target.dataset.key || getTabKey(target.firstElementChild, ++depth);\n}\n</script>\n\n<style scoped>\n.tab-bar >>> .ant-tabs-bar {\n  margin-bottom: 0;\n}\n\n.breadcrumb {\n  margin-bottom: 10px;\n}\n</style>\n\n"]}]}