|
@@ -1,15 +1,20 @@
|
|
|
<template>
|
|
|
<div class="tags-container">
|
|
|
<el-scrollbar class="scroll-container" :vertical="false" @wheel.prevent="handleScroll">
|
|
|
- <router-link ref="tagRef" v-for="tag in visitedViews" :key="tag.fullPath"
|
|
|
- :class="'tags-item ' + (isActive(tag) ? 'active' : '')" :to="{ path: tag.path, query: tag.query }"
|
|
|
- @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openContentMenu(tag, $event)">
|
|
|
- {{ get(tag, 'title') }}
|
|
|
- <SvgIcon class="close-icon" icon-class="close" v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
|
|
- </SvgIcon>
|
|
|
+ <router-link
|
|
|
+ ref="tagRef"
|
|
|
+ v-for="tag in visitedViews"
|
|
|
+ :key="tag.fullPath"
|
|
|
+ :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
|
|
|
+ :to="{ path: tag.path, query: tag.query }"
|
|
|
+ @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
|
|
+ @contextmenu.prevent="openContentMenu(tag, $event)"
|
|
|
+ >
|
|
|
+ {{ tag.title }}
|
|
|
+ <SvgIcon class="close-icon" icon-class="close" v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)"></SvgIcon>
|
|
|
</router-link>
|
|
|
</el-scrollbar>
|
|
|
- <!-- tag标签操作菜单 -->
|
|
|
+ <!-- tag标签操作目录 -->
|
|
|
<ul v-show="contentMenuVisible" class="contextmenu" :style="{ left: left + 'px', top: top + 'px' }">
|
|
|
<li @click="refreshSelectedTag(selectedTag)">
|
|
|
<SvgIcon icon-class="refresh"></SvgIcon>
|
|
@@ -45,15 +50,13 @@ import { useRoute, useRouter } from 'vue-router'
|
|
|
import defaultSettings from '@/settings'
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
import { resolve } from 'path-browserify'
|
|
|
-import { useTagsViewStore, useAppStore } from '@/store'
|
|
|
-import {get} from 'lodash-es'
|
|
|
+import { useTagsViewStore } from '@/store'
|
|
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
const router = useRouter()
|
|
|
const route = useRoute()
|
|
|
|
|
|
const tagsViewStore = useTagsViewStore()
|
|
|
-const appStore = useAppStore()
|
|
|
|
|
|
const { visitedViews } = storeToRefs(tagsViewStore)
|
|
|
const layout = computed(() => defaultSettings.layout)
|
|
@@ -81,7 +84,7 @@ watch(
|
|
|
}
|
|
|
)
|
|
|
|
|
|
-const contentMenuVisible = ref(false) // 右键菜单是否显示
|
|
|
+const contentMenuVisible = ref(false) // 右键目录是否显示
|
|
|
watch(contentMenuVisible, (value) => {
|
|
|
if (value) {
|
|
|
document.body.addEventListener('click', closeContentMenu)
|
|
@@ -171,7 +174,7 @@ function isAffix(tag) {
|
|
|
|
|
|
function isFirstView() {
|
|
|
try {
|
|
|
- return selectedTag.value.path === '/dashboard' || selectedTag.value.fullPath === tagsViewStore.visitedViews[1].fullPath
|
|
|
+ return selectedTag.value.path === '/home' || selectedTag.value.fullPath === tagsViewStore.visitedViews[1].fullPath
|
|
|
} catch (err) {
|
|
|
return false
|
|
|
}
|
|
@@ -243,7 +246,7 @@ function closeAllTags(view) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 打开右键菜单
|
|
|
+ * 打开右键目录
|
|
|
*/
|
|
|
function openContentMenu(tag, e) {
|
|
|
const menuMinWidth = 105
|
|
@@ -258,7 +261,7 @@ function openContentMenu(tag, e) {
|
|
|
left.value = l
|
|
|
}
|
|
|
|
|
|
- // 混合模式下,需要减去顶部菜单(fixed)的高度
|
|
|
+ // 混合模式下,需要减去顶部目录(fixed)的高度
|
|
|
if (layout.value === 'mix') {
|
|
|
top.value = e.clientY - 50
|
|
|
} else {
|
|
@@ -270,7 +273,7 @@ function openContentMenu(tag, e) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 关闭右键菜单
|
|
|
+ * 关闭右键目录
|
|
|
*/
|
|
|
function closeContentMenu() {
|
|
|
contentMenuVisible.value = false
|
|
@@ -339,11 +342,9 @@ onMounted(() => {
|
|
|
background: #fff;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
-
|
|
|
.close-icon {
|
|
|
color: #fff;
|
|
|
}
|
|
|
-
|
|
|
.close-icon:hover {
|
|
|
color: var(--el-color-primary);
|
|
|
background-color: var(--el-fill-color-light);
|