|
@@ -61,29 +61,29 @@
|
|
|
`${prefixCls}__item`,
|
|
|
item?.meta?.affix ? `${prefixCls}__item--affix` : '',
|
|
|
{
|
|
|
- 'is-active': isActive(item)
|
|
|
+ 'is-route-tag-active': isActive(item)
|
|
|
}
|
|
|
]"
|
|
|
@visible-change="visibleChange"
|
|
|
>
|
|
|
<li>
|
|
|
- <router-link :to="{ ...item }" exact v-slot="{ navigate }" v-if="index == 0">
|
|
|
+ <router-link :to="{ ...item }" exact v-slot="{ navigate }" v-if="index === 0">
|
|
|
<div class="homeBox" @click="navigate">
|
|
|
- <div @click="tagsHomeClick()" class="tagsFlex">
|
|
|
- <Icon :icon="item.meta.icon || ''" />
|
|
|
- <p>{{ item.meta.title }}</p>
|
|
|
- </div>
|
|
|
+ <Icon :icon="item.meta.icon || ''" />
|
|
|
+ <p>{{ item.meta.title }}</p>
|
|
|
</div>
|
|
|
</router-link>
|
|
|
<router-link :to="{ ...item }" exact v-slot="{ navigate }" v-else>
|
|
|
<div class="fhomeBox" @click="navigate">
|
|
|
- <div class="tagsFlex">
|
|
|
- <div class="pBox">
|
|
|
- <p>{{ item.meta.title }}</p>
|
|
|
- </div>
|
|
|
- <div @click.stop.prevent="closeSelectedTag(item)" class="close">
|
|
|
- <span>×</span>
|
|
|
- </div>
|
|
|
+ <div class="pBox">
|
|
|
+ <p>
|
|
|
+ {{ item.meta.title }}
|
|
|
+ <!-- 用于多开页面的区分展示(例如详情页)-->
|
|
|
+ {{ (item?.query?.name ?? '') !== '' ? `(${item?.query?.name})` : '' }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div @click.stop.prevent="closeSelectedTag(item)" class="close">
|
|
|
+ <span>×</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</router-link>
|
|
@@ -94,16 +94,18 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
+import { computed, onMounted, nextTick, ref, watch } from 'vue'
|
|
|
import { Icon } from '@/components/Icon'
|
|
|
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import { usePermissionStore } from '@/store/modules/permission'
|
|
|
-import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
|
+import { isSameRouteTag, useTagsViewStore } from '@/store/modules/tagsView'
|
|
|
import { filterAffixTags } from './helper'
|
|
|
import { useTemplateRefsList } from '@vueuse/core'
|
|
|
import { ContextMenu, ContextMenuExpose } from '@/layout/components/ContextMenu'
|
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
|
+
|
|
|
const { getPrefixCls } = useDesign()
|
|
|
const prefixCls = getPrefixCls('tags-view')
|
|
|
const { t } = useI18n()
|
|
@@ -165,7 +167,7 @@ const closeLeftTags = () => {
|
|
|
const closeRightTags = () => {
|
|
|
tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
|
|
|
}
|
|
|
-const tagsHomeClick = () => {}
|
|
|
+
|
|
|
// 新增tag
|
|
|
const addTags = () => {
|
|
|
const { name } = unref(currentRoute)
|
|
@@ -186,7 +188,7 @@ const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
|
|
|
|
|
|
// 是否是当前tag
|
|
|
const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
|
|
|
- return route.path === unref(currentRoute).path
|
|
|
+ return isSameRouteTag(route, unref(currentRoute))
|
|
|
}
|
|
|
|
|
|
// 跳转到最后一个
|
|
@@ -233,6 +235,7 @@ ul,
|
|
|
li {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
._tagList {
|
|
|
width: 100%;
|
|
|
height: 36px;
|
|
@@ -240,20 +243,25 @@ li {
|
|
|
align-items: center;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
border-radius: 10px;
|
|
|
+
|
|
|
.tag-view {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+
|
|
|
ul {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
li {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
a {
|
|
|
+ width: 100%;
|
|
|
display: block;
|
|
|
- width: auto;
|
|
|
height: 100%;
|
|
|
border-radius: 10px;
|
|
|
color: inherit;
|
|
@@ -261,6 +269,7 @@ li {
|
|
|
padding: 2px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.homeBox {
|
|
|
width: 70px;
|
|
|
height: 16px;
|
|
@@ -268,53 +277,52 @@ li {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- .tagsFlex {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+
|
|
|
p {
|
|
|
margin-left: 5px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.fhomeBox {
|
|
|
+ width: 100%;
|
|
|
height: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding: 0 15px;
|
|
|
+ padding: 0 10px;
|
|
|
border-right: 2px solid rgb(209, 197, 197);
|
|
|
- .tagsFlex {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
+
|
|
|
.pBox {
|
|
|
+ width: calc(100% - 17px);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+
|
|
|
p {
|
|
|
+ overflow: hidden;
|
|
|
font-size: 16px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.close {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
background-color: #878b91;
|
|
|
border-radius: 50%;
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: 5px;
|
|
|
+
|
|
|
span {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
cursor: pointer;
|
|
|
margin-top: 4px;
|
|
@@ -326,20 +334,29 @@ li {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-::v-deep .router-link-active {
|
|
|
- // border: 2px solid #2e77e6;
|
|
|
+.is-route-tag-active {
|
|
|
p {
|
|
|
color: #2e77e6;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
+
|
|
|
.el-icon {
|
|
|
color: #2e77e6;
|
|
|
}
|
|
|
+
|
|
|
.close {
|
|
|
background-color: #2e77e6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.el-dropdown {
|
|
|
+ min-width: 60px;
|
|
|
+
|
|
|
+ &.v-tags-view__item--affix {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.el-dropdown:hover {
|
|
|
p {
|
|
|
color: #2e77e6;
|
|
@@ -354,6 +371,7 @@ li {
|
|
|
border-left: 2px solid rgb(209, 197, 197);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.el-dropdown:last-child {
|
|
|
.fhomeBox {
|
|
|
border-right: 0;
|