From 25e801e5798b721c4801ac776084609f271b17b1 Mon Sep 17 00:00:00 2001
From: 若依 <yzz_ivy@163.com>
Date: 星期三, 01 十二月 2021 17:43:19 +0800
Subject: [PATCH] Delete src/layout/components/tagsView directory
---
/dev/null | 330 -------------------------------------------------------
1 files changed, 0 insertions(+), 330 deletions(-)
diff --git a/src/layout/components/tagsView/ScrollPane.vue b/src/layout/components/tagsView/ScrollPane.vue
deleted file mode 100644
index 36171fa..0000000
--- a/src/layout/components/tagsView/ScrollPane.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/layout/components/tagsView/index.vue b/src/layout/components/tagsView/index.vue
deleted file mode 100644
index eb150d9..0000000
--- a/src/layout/components/tagsView/index.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<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>
\ No newline at end of file
--
Gitblit v1.9.3