<script setup>
|
import { ref, reactive, onMounted, nextTick, watch } from "vue";
|
import { useRoute, useRouter } from "vue-router";
|
import { storeToRefs } from "pinia";
|
|
import ScrollPane from "./ScrollPane.vue";
|
// import Hamburger from "../Hamburger.vue";
|
import { useMenuStore } from "@/stores/menu.js";
|
import { useTagsViewStore } from "@/stores/tagsView.js";
|
import iconNav from "@/components/icons/iconNav.vue";
|
import { routes } from "@/router/routes.js";
|
|
const tagsViewStore = useTagsViewStore();
|
const menuStroe = useMenuStore();
|
const { isOpen } = storeToRefs(menuStroe);
|
const wraper = ref();
|
|
const { visitedViews, cachedViews } = storeToRefs(tagsViewStore);
|
const {
|
addVisitedView,
|
addView,
|
delCachedView,
|
delView,
|
delOthersViews,
|
delAllViews,
|
} = tagsViewStore;
|
|
const $router = useRouter();
|
const $route = useRoute();
|
|
const visible = ref(false);
|
const top = ref(0);
|
const left = ref(0);
|
const gData = reactive({ selectedTag: {}, affixTags: [] });
|
const tagRefs = reactive([]);
|
const scrollPane = ref();
|
|
watch($route, (val) => {
|
console.log("val,", $route, "=============");
|
addTags();
|
});
|
|
function isActive(route) {
|
return route.path === $route.path;
|
}
|
function isAffix(tag) {
|
return tag.meta && tag.meta.affix;
|
}
|
function resolvePath(base, ...parts) {
|
return base + (base.endsWith("/") ? "" : "/") + parts.join("/");
|
}
|
function filterAffixTags(routes, basePath = "/") {
|
let tags = [];
|
routes.forEach((route) => {
|
if (route.meta && route.meta.affix) {
|
// const tagPath = resolvePath(basePath, route.path);
|
// const tagPath = resolvePath(basePath, route.path);
|
const tagPath = 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() {
|
gData.affixTags.length = 0;
|
gData.affixTags.push(...filterAffixTags(routes));
|
for (const tag of gData.affixTags) {
|
// Must have tag name
|
if (tag.name) {
|
addVisitedView(tag);
|
}
|
}
|
}
|
function addTags() {
|
const { name } = $route;
|
if (name) {
|
addView($route);
|
}
|
return false;
|
}
|
function moveToCurrentTag() {
|
nextTick(() => {
|
for (const tag of tagRefs) {
|
if (tag.to.path === $route.path) {
|
$refs.scrollPane.moveToTarget(tag);
|
if (tag.to.fullPath !== $route.fullPath) {
|
// $store.dispatch("tagsView/updateVisitedView", $route);
|
}
|
break;
|
}
|
}
|
});
|
}
|
function refreshSelectedTag(view) {
|
delCachedView(view).then(() => {
|
const fullPath = view.fullPath;
|
nextTick(() => {
|
$router.replace({
|
path: "/redirect" + fullPath,
|
});
|
});
|
});
|
}
|
function closeSelectedTag(view) {
|
delView(view).then(() => {
|
if (isActive(view)) {
|
toLastView(view);
|
}
|
});
|
}
|
function closeOthersTags() {
|
$router.push(gData.selectedTag);
|
delOthersViews(gData.selectedTag).then(() => {
|
moveToCurrentTag();
|
});
|
}
|
function closeAllTags(view) {
|
delAllViews().then(() => {
|
if (gData.affixTags.some((tag) => tag.path === view.path)) {
|
return;
|
}
|
toLastView(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 === "home") {
|
// to reload home page
|
$router.replace({
|
path: "/redirect" + view.fullPath,
|
});
|
} else {
|
$router.push("/");
|
}
|
}
|
}
|
function openMenu(tag, e) {
|
const menuMinWidth = 105;
|
const offsetLeft = wraper.value.getBoundingClientRect().left; // container margin left
|
const offsetWidth = wraper.value.offsetWidth; // container width
|
const maxLeft = offsetWidth - menuMinWidth; // left boundary
|
let left = e.clientX - offsetLeft + 15; // 15: margin right
|
|
if (left > maxLeft) {
|
left = maxLeft;
|
} else {
|
left = left;
|
}
|
|
top.value = 10;
|
visible.value = true;
|
gData.selectedTag = tag;
|
}
|
function closeMenu() {
|
visible.value = false;
|
}
|
function handleScroll() {
|
closeMenu();
|
}
|
|
function toggle() {
|
isOpen.value = !isOpen.value;
|
}
|
|
onMounted(() => {
|
initTags();
|
addTags();
|
});
|
</script>
|
|
<template>
|
<div id="tags-view-container" class="tags-view-container" ref="wraper">
|
<el-icon class="nav" :size="38" color="#0ff" @click="toggle">
|
<icon-nav></icon-nav>
|
</el-icon>
|
<!-- <hamburger :is-active="menu.opened" @toggleClick="toggleSideBar" /> -->
|
<scroll-pane
|
ref="scrollPane"
|
class="tags-view-wrapper"
|
@scroll="handleScroll"
|
>
|
<!-- tag="span" -->
|
<router-link
|
v-for="(tag, idx) in visitedViews"
|
:ref="(el) => (tagRefs[idx] = el)"
|
:key="tag.path"
|
:class="isActive(tag) ? 'active' : ''"
|
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
class="tags-view-item"
|
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
@contextmenu.prevent="openMenu(tag, $event)"
|
>
|
{{ tag.title }}
|
<el-icon
|
v-if="!isAffix(tag)"
|
class="el-icon-close"
|
@click.prevent.stop="closeSelectedTag(tag)"
|
><Close
|
/></el-icon>
|
</router-link>
|
</scroll-pane>
|
<ul
|
v-show="visible"
|
:style="{ left: left + 'px', top: top + 'px' }"
|
class="contextmenu"
|
>
|
<li @click="refreshSelectedTag(gData.selectedTag)">刷新</li>
|
<li
|
v-if="!isAffix(gData.selectedTag)"
|
@click="closeSelectedTag(gData.selectedTag)"
|
>
|
关闭当前
|
</li>
|
<li @click="closeOthersTags">关闭其他</li>
|
<li @click="closeAllTags(gData.selectedTag)">关闭所有</li>
|
</ul>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.tags-view-container {
|
width: 100%;
|
// padding-left: 48px;
|
position: relative;
|
display: flex;
|
border: 1px solid #0ff;
|
.nav {
|
float: left;
|
}
|
:deep(.el-scrollbar__view) {
|
display: flex;
|
align-items: center;
|
overflow-y: hidden;
|
}
|
.tags-view-wrapper {
|
// width: calc(100% - 48px);
|
// background: gray;
|
.tags-view-item {
|
display: inline-block;
|
position: relative;
|
cursor: pointer;
|
height: 40px;
|
line-height: 40px;
|
padding: 0 20px;
|
font-size: 12px;
|
background: transparent;
|
color: #fff;
|
&:hover {
|
color: #0ff;
|
}
|
&.active {
|
background-color: #00feff;
|
border-color: #00feff;
|
color: #041f6c;
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
|
.tags-view-wrapper {
|
.tags-view-item {
|
.el-icon-close {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
text-align: center;
|
transform: translate(0, -30%);
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
transform-origin: 100% 50%;
|
|
|
&:hover {
|
background-color: #b4bccc;
|
color: #fff;
|
}
|
}
|
}
|
}
|
</style>
|
