文件夹目录大写

RuoYi

2021-12-01 3ddb5e9b38c0d07a50aa2957c201553478fa25fc

文件夹目录大写

 src/components/RuoYi/Doc/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>

  <div>

    <svg-icon icon-class="question" @click="goto" />

  </div>

</template>



<script setup>

const url = ref('http://doc.ruoyi.vip/ruoyi-vue');



function goto() {

  window.open(url.value)

}

</script>

 src/components/RuoYi/Git/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>

  <div>

    <svg-icon icon-class="github" @click="goto" />

  </div>

</template>



<script setup>

const url = ref('https://gitee.com/y_project/RuoYi-Vue');



function goto() {

  window.open(url.value)

}

</script>


 src/layout/components/TagsView/ScrollPane.vue

对比新文件
@@ -0,0 +1,103 @@
<template>

  <el-scrollbar

    ref="scrollContainer"

    :vertical="false"

    class="scroll-container"

    @wheel.prevent="handleScroll"

  >

    <slot />

  </el-scrollbar>

</template>



<script setup>

const tagAndTagSpacing = ref(4);

const { proxy } = getCurrentInstance();



const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap);



onMounted(() => {

  scrollWrapper.value.addEventListener('scroll', emitScroll, true)

})

onBeforeUnmount(() => {

  scrollWrapper.value.removeEventListener('scroll', emitScroll)

})



function handleScroll(e) {

  const eventDelta = e.wheelDelta || -e.deltaY * 40

  const $scrollWrapper = scrollWrapper.value;

  $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4

}

const emits = defineEmits()

const emitScroll = () => {

  emits('scroll')

}



const store = useStore();

const visitedViews = computed(() => store.state.tagsView.visitedViews);



function moveToTarget(currentTag) {

  const $container = proxy.$refs.scrollContainer.$el

  const $containerWidth = $container.offsetWidth

  const $scrollWrapper = scrollWrapper.value;



  let firstTag = null

  let lastTag = null



  // find first tag and last tag

  if (visitedViews.value.length > 0) {

    firstTag = visitedViews.value[0]

    lastTag = visitedViews.value[visitedViews.value.length - 1]

  }



  if (firstTag === currentTag) {

    $scrollWrapper.scrollLeft = 0

  } else if (lastTag === currentTag) {

    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth

  } else {

    const tagListDom = document.getElementsByClassName('tags-view-item');

    const currentIndex = visitedViews.value.findIndex(item => item === currentTag)

    let prevTag = null

    let nextTag = null

    for (const k in tagListDom) {

      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {

        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {

          prevTag = tagListDom[k];

        }

        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {

          nextTag = tagListDom[k];

        }

      }

    }



    // the tag's offsetLeft after of nextTag

    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value



    // the tag's offsetLeft before of prevTag

    const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value

    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {

      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth

    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {

      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft

    }

  }

}



defineExpose({

  moveToTarget,

})

</script>



<style lang='scss' scoped>

.scroll-container {

  white-space: nowrap;

  position: relative;

  overflow: hidden;

  width: 100%;

  :deep(.el-scrollbar__bar) {

    bottom: 0px;

  }

  :deep(.el-scrollbar__wrap) {

    height: 49px;

  }

}

</style>

 src/layout/components/TagsView/index.vue

对比新文件
@@ -0,0 +1,330 @@
<template>

  <div id="tags-view-container" class="tags-view-container">

    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">

      <router-link

        v-for="tag in visitedViews"

        :key="tag.path"

        :data-path="tag.path"

        :class="isActive(tag) ? 'active' : ''"

        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"

        class="tags-view-item"

        :style="activeStyle(tag)"

        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"

        @contextmenu.prevent="openMenu(tag, $event)"

      >

        {{ tag.title }}

        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">

          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />

        </span>

      </router-link>

    </scroll-pane>

    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">

      <li @click="refreshSelectedTag(selectedTag)">

        <refresh-right style="width: 1em; height: 1em;" /> 鍒锋柊椤甸潰

      </li>

      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">

        <close style="width: 1em; height: 1em;" /> 鍏抽棴褰撳墠

      </li>

      <li @click="closeOthersTags">

        <circle-close style="width: 1em; height: 1em;" /> 鍏抽棴鍏朵粬

      </li>

      <li v-if="!isFirstView()" @click="closeLeftTags">

        <back style="width: 1em; height: 1em;" /> 鍏抽棴宸︿晶

      </li>

      <li v-if="!isLastView()" @click="closeRightTags">

        <right style="width: 1em; height: 1em;" /> 鍏抽棴鍙充晶

      </li>

      <li @click="closeAllTags(selectedTag)">

        <circle-close style="width: 1em; height: 1em;" /> 鍏ㄩ儴鍏抽棴

      </li>

    </ul>

  </div>

</template>



<script setup>

import ScrollPane from './ScrollPane'

import { getNormalPath } from '@/utils/ruoyi'



const visible = ref(false);

const top = ref(0);

const left = ref(0);

const selectedTag = ref({});

const affixTags = ref([]);

const scrollPaneRef = ref(null);



const { proxy } = getCurrentInstance();

const store = useStore();

const route = useRoute();

const router = useRouter();



const visitedViews = computed(() => store.state.tagsView.visitedViews);

const routes = computed(() => store.state.permission.routes);

const theme = computed(() => store.state.settings.theme);



watch(route, () => {

  addTags()

  moveToCurrentTag()

})

watch(visible, (value) => {

  if (value) {

    document.body.addEventListener('click', closeMenu)

  } else {

    document.body.removeEventListener('click', closeMenu)

  }

})

onMounted(() => {

  initTags()

  addTags()

})



function isActive(r) {

  return r.path === route.path

}

function activeStyle(tag) {

  if (!isActive(tag)) return {};

  return {

    "background-color": theme.value,

    "border-color": theme.value

  };

}

function isAffix(tag) {

  return tag.meta && tag.meta.affix

}

function isFirstView() {

  try {

    return selectedTag.value.fullPath === visitedViews.value[1].fullPath || selectedTag.value.fullPath === '/index'

  } catch (err) {

    return false

  }

}

function isLastView() {

  try {

    return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath

  } catch (err) {

    return false

  }

}

function filterAffixTags(routes, basePath = '') {

  let tags = []

  routes.forEach(route => {

    if (route.meta && route.meta.affix) {

      const tagPath = getNormalPath(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

}

function initTags() {

  const res = filterAffixTags(routes.value);

  affixTags.value = res;

  for (const tag of res) {

    // Must have tag name

    if (tag.name) {

      store.dispatch('tagsView/addVisitedView', tag)

    }

  }

}

function addTags() {

  const { name } = route

  if (name) {

    store.dispatch('tagsView/addView', route)

  }

  return false

}

function moveToCurrentTag() {

  nextTick(() => {

    for (const r of visitedViews.value) {

      if (r.path === route.path) {

        scrollPaneRef.value.moveToTarget(r);

        // when query is different then update

        if (r.fullPath !== route.fullPath) {

          store.dispatch('tagsView/updateVisitedView', route)

        }

      }

    }

  })

}

function refreshSelectedTag(view) {

  proxy.$tab.refreshPage(view);

}

function closeSelectedTag(view) {

  proxy.$tab.closePage(view).then(({ visitedViews }) => {

    if (isActive(view)) {

      toLastView(visitedViews, view)

    }

  })

}

function closeRightTags() {

  proxy.$tab.closeRightPage(selectedTag.value).then(visitedViews => {

    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {

      toLastView(visitedViews)

    }

  })

}

function closeLeftTags() {

  proxy.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {

    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {

      toLastView(visitedViews)

    }

  })

}

function closeOthersTags() {

  router.push(selectedTag.value).catch(() => { });

  proxy.$tab.closeOtherPage(selectedTag.value).then(() => {

    moveToCurrentTag()

  })

}

function closeAllTags(view) {

  proxy.$tab.closeAllPage().then(({ visitedViews }) => {

    if (affixTags.value.some(tag => tag.path === route.path)) {

      return

    }

    toLastView(visitedViews, view)

  })

}

function toLastView(visitedViews, view) {

  const latestView = visitedViews.slice(-1)[0]

  if (latestView) {

    router.push(latestView.fullPath)

  } else {

    // now the default is to redirect to the home page if there is no tags-view,

    // you can adjust it according to your needs.

    if (view.name === 'Dashboard') {

      // to reload home page

      router.replace({ path: '/redirect' + view.fullPath })

    } else {

      router.push('/')

    }

  }

}

function openMenu(tag, e) {

  const menuMinWidth = 105

  const offsetLeft = proxy.$el.getBoundingClientRect().left // container margin left

  const offsetWidth = proxy.$el.offsetWidth // container width

  const maxLeft = offsetWidth - menuMinWidth // left boundary

  const l = e.clientX - offsetLeft + 15 // 15: margin right



  if (l > maxLeft) {

    left.value = maxLeft

  } else {

    left.value = l

  }



  top.value = e.clientY

  visible.value = true

  selectedTag.value = tag

}

function closeMenu() {

  visible.value = false

}

function handleScroll() {

  closeMenu()

}

</script>



<style lang='scss' scoped>

.tags-view-container {

  height: 34px;

  width: 100%;

  background: #fff;

  border-bottom: 1px solid #d8dce5;

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);

  .tags-view-wrapper {

    .tags-view-item {

      display: inline-block;

      position: relative;

      cursor: pointer;

      height: 26px;

      line-height: 26px;

      border: 1px solid #d8dce5;

      color: #495060;

      background: #fff;

      padding: 0 8px;

      font-size: 12px;

      margin-left: 5px;

      margin-top: 4px;

      &:first-of-type {

        margin-left: 15px;

      }

      &:last-of-type {

        margin-right: 15px;

      }

      &.active {

        background-color: #42b983;

        color: #fff;

        border-color: #42b983;

        &::before {

          content: "";

          background: #fff;

          display: inline-block;

          width: 8px;

          height: 8px;

          border-radius: 50%;

          position: relative;

          margin-right: 2px;

        }

      }

    }

  }

  .contextmenu {

    margin: 0;

    background: #fff;

    z-index: 3000;

    position: absolute;

    list-style-type: none;

    padding: 5px 0;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 400;

    color: #333;

    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

    li {

      margin: 0;

      padding: 7px 16px;

      cursor: pointer;

      &:hover {

        background: #eee;

      }

    }

  }

}

</style>



<style lang="scss">

//reset element css of el-icon-close

.tags-view-wrapper {

  .tags-view-item {

    .el-icon-close {

      width: 16px;

      height: 16px;

      vertical-align: 2px;

      border-radius: 50%;

      text-align: center;

      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

      transform-origin: 100% 50%;

      &:before {

        transform: scale(0.6);

        display: inline-block;

        vertical-align: -3px;

      }

      &:hover {

        background-color: #b4bccc;

        color: #fff;

        width: 12px !important;

        height: 12px !important;

      }

    }

  }

}

</style>