From 8f00712c43a7b54866df0570c4d100f9b64a3371 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Sun, 23 Oct 2022 21:48:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=88=A0=E6=8E=89=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/TagsView/betterScroll.vue |  58 -----
 src/layout/TagsView/index1.vue       | 317 ---------------------------
 2 files changed, 375 deletions(-)
 delete mode 100644 src/layout/TagsView/betterScroll.vue
 delete mode 100644 src/layout/TagsView/index1.vue

diff --git a/src/layout/TagsView/betterScroll.vue b/src/layout/TagsView/betterScroll.vue
deleted file mode 100644
index bbc1d50..0000000
--- a/src/layout/TagsView/betterScroll.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div ref="bsWrap" class="tags-scroll-wrap">
-    <div ref="bsContent" class="tags-scroll">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed, watch, onMounted, nextTick } from 'vue'
-  import { useElementSize } from '@vueuse/core'
-  import BScroll from '@better-scroll/core'
-  import type { Options } from '@better-scroll/core'
-
-  interface Props {
-    /** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
-    options: Options
-  }
-
-  const props = defineProps<Props>()
-
-  const bsWrap = ref<HTMLElement>()
-  const instance = ref<BScroll>()
-  const bsContent = ref<HTMLElement>()
-
-  function initBetterScroll() {
-    nextTick(() => {
-      instance.value = new BScroll(bsWrap.value, props.options)
-    })
-  }
-
-  // 滚动元素发生变化，刷新BS
-  const { width: wrapWidth } = useElementSize(bsWrap)
-
-  const { width, height } = useElementSize(bsContent)
-  watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
-    if (instance.value) {
-      instance.value.refresh()
-    }
-  })
-
-  onMounted(() => {
-    initBetterScroll()
-  })
-
-  defineExpose({ instance })
-</script>
-<style scoped>
-  .tags-scroll-wrap {
-    width: 100%;
-  }
-  .tags-scroll-inner {
-    /*display: flex;*/
-  }
-  .tags-scroll {
-    display: inline-block;
-  }
-</style>
diff --git a/src/layout/TagsView/index1.vue b/src/layout/TagsView/index1.vue
deleted file mode 100644
index 81e2a24..0000000
--- a/src/layout/TagsView/index1.vue
+++ /dev/null
@@ -1,317 +0,0 @@
-<template>
-  <div class="tags-wrap-container">
-    <div class="tags-view" ref="scrollContainer">
-      <better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
-        <div class="tags-scroll-inner">
-          <div
-            v-for="tag in visitedViews"
-            :ref="setTagRef"
-            :path="tag.path"
-            :data-id="tag.path"
-            :fullPath="tag.fullPath"
-            :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-            :key="tag.path"
-            class="item-tag-wrap"
-            :class="isActive(tag) ? 'active' : ''"
-            @click.stop="routerGo(tag)"
-          >
-            <div class="tags-view-item">{{ tag.title }}</div>
-            <el-icon
-                v-if="!isAffix(tag)"
-                @click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
-              <circle-close-filled
-            /></el-icon>
-          </div>
-        </div>
-      </better-scroll>
-    </div>
-
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
-  import betterScroll from './betterScroll.vue'
-  import { useRoute, useRouter } from 'vue-router'
-
-  import {useSettingStore} from "@/store/modules/setting"
-  import {useTagsViewStore} from "@/store/modules/tagsView"
-  import {usePermissionStore} from "@/store/modules/permission"
-
-  import path from 'path-browserify'
-  const route = useRoute()
-  const router = useRouter()
-  const SettingStore = useSettingStore()
-  const TagsViewStore = useTagsViewStore()
-  const PermissionStore = usePermissionStore()
-
-  const refresh = () => {
-    SettingStore.setReload()
-  }
-
-  const routes = computed(() => PermissionStore.routes)
-
-  const visitedViews = computed(() => TagsViewStore.visitedViews)
-
-  const bsScroll = ref<Expose.BetterScroll>()
-  let obj = new WeakMap()
-
-  let affixTags = ref([])
-  const tags = ref(new Map())
-  // 多个ref 添加tag
-  const setTagRef = (el) => {
-    if (el) {
-      if (!obj.get(el)) {
-        tags.value.set(el.dataset['id'], el)
-      }
-      obj.set(el, el)
-    }
-  }
-
-  const rollPane = ref()
-  const scrollContainer = ref()
-
-  function filterAffixTags(routes, basePath = '/') {
-    let tags = []
-    routes.forEach((route) => {
-      if (route.meta && route.meta.affix) {
-        const tagPath = path.resolve(basePath, route.path)
-        tags.push({
-          fullPath: tagPath,
-          path: tagPath,
-          name: route.name,
-          meta: { ...route.meta },
-        })
-      }
-      if (route.children) {
-        const tempTags = filterAffixTags(route.children, route.path)
-        if (tempTags.length >= 1) {
-          tags = [...tags, ...tempTags]
-        }
-      }
-    })
-    return tags
-  }
-
-  const initTags = () => {
-    let routesNew = routes.value
-    let affixTag = (affixTags.value = filterAffixTags(routesNew))
-    for (const tag of affixTag) {
-      if (tag.name) {
-        TagsViewStore.addVisitedView(tag)
-      }
-    }
-  }
-
-  const isActive = (rou) => {
-    return rou.path === route.path
-  }
-  const isAffix = (tag) => {
-    return tag.meta && tag.meta.affix
-  }
-  const addTags = () => {
-    const { name } = route
-    if (name === 'Login') {
-      return
-    }
-    if (name) {
-      TagsViewStore.addView(route)
-    }
-    return false
-  }
-
-  function toLastView(visitedViews, view) {
-    const latestView = visitedViews.slice(-1)[0]
-    if (latestView) {
-      router.push(latestView.fullPath)
-    } else {
-      if (view.name === 'home') {
-        router.replace({ path: '/redirect' + view.fullPath })
-      } else {
-        router.push('/')
-      }
-    }
-  }
-
-  const closeSelectedTag = async (event, view) => {
-    if (tags.value.get(view.path)) {
-      tags.value.delete(view.path)
-    }
-    let { visitedViews } = await TagsViewStore.delView(view)
-    if (isActive(view)) {
-      toLastView(visitedViews, view)
-    }
-  }
-
-  // 关闭当前
-  const closeCurrentTab = (event)=>{
-    closeSelectedTag(event,route)
-  }
-
-  // 关闭其他
-  const closeOtherTab= async ()=>{
-    const { name } = route
-    for(let item of visitedViews.value){
-      if(item.name!==name){
-        await closeSelectedTag(null,item)
-      }
-    }
-  }
-
-  // 关闭所有 去首页
-  const closeAllTab = async ()=>{
-    let visitedViews = await TagsViewStore.delAllViews()
-    toLastView(visitedViews,route)
-  }
-
-  const routerGo = (tag) => {
-    router.push({
-      path: tag.path,
-      query: tag.query,
-    })
-  }
-
-  function handleScrollAction(currentTag) {
-    const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
-    let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
-    const clientX = currx + currentWidth / 2
-    const currentX = clientX - scrollContainerRect.left
-    const deltaX = currentX - scrollContainerRect.width / 2
-    if (bsScroll.value) {
-      const { maxScrollX, x: leftX } = bsScroll.value.instance
-      const rightX = maxScrollX - leftX
-      const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
-      bsScroll.value?.instance.scrollBy(update, 0, 300)
-    }
-  }
-
-  function moveToCurrentTag() {
-    nextTick(() => {
-      for (const [key, tag] of tags.value) {
-        let path = tag.attributes.path.value
-        if (path === route.path) {
-          let fullPath = tag.attributes.fullPath.value
-          // 移动
-          handleScrollAction(tag, tags.value)
-          if (fullPath !== route.fullPath) {
-            TagsViewStore.updateVisitedView(route)
-          }
-          break
-        }
-      }
-    })
-  }
-
-  onMounted(() => {
-    initTags()
-    addTags()
-    nextTick(() => {
-      setTimeout(() => {
-        moveToCurrentTag()
-      }, 50)
-    })
-
-    watch(route, () => {
-      addTags()
-      nextTick(() => {
-        setTimeout(() => {
-          moveToCurrentTag()
-        }, 100)
-      })
-    })
-
-    router.beforeEach(async (to, from, next) => {
-      if (
-        (from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
-        to.fullPath === '/home'
-      ) {
-        let whiteList = ['/error/404', '/error/401']
-        await TagsViewStore.removeView(whiteList)
-      }
-      next()
-    })
-  })
-</script>
-
-<style lang="scss" scoped>
-  .tags-wrap-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: 10px;
-    .tags-view {
-      height: 30px;
-      background: white;
-      display: flex;
-      align-items: center;
-      flex: 1;
-      box-sizing: border-box;
-      overflow: hidden;
-    }
-    .refresh {
-      //margin-left: 20px;
-      cursor: pointer;
-      font-size: 22px;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .refresh-inner {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50px;
-        height: 100%;
-      }
-      //box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
-    }
-    //padding-right: 10px;
-  }
-  .item-tag-wrap {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 12px;
-    font-size: 14px;
-    cursor: pointer;
-    margin-right: 10px;
-    border: 1px solid #d8dce5;
-    &.active .tag-icon {
-      display: block;
-    }
-    &.active {
-      background-color: $primaryColor;
-      color: #fff;
-      border-color: $primaryColor;
-    }
-  }
-  .item-tag-wrap:hover {
-    border-color: $primaryColor;
-  }
-  .tags-scroll-inner {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-  .tag-icon {
-    margin-left: 6px;
-  }
-  .tags-view-item {
-    position: relative;
-    z-index: 2;
-    white-space: nowrap;
-    font-size: 12px;
-    .tags-inner {
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-    }
-  }
-  .more{
-    background-color: $primaryColor;
-    color: white;
-    .tags-view-item{
-      display: flex;
-      align-items: center;
-    }
-  }
-</style>