From b8ced8ec593ad002e06173952acf73f405926bd9 Mon Sep 17 00:00:00 2001
From: AliooWang <64893838+AliooWang@users.noreply.github.com>
Date: 星期一, 14 四月 2025 16:56:43 +0800
Subject: [PATCH] Merge pull request #60 from zhitan-cloud/jiayu1.0
---
zhitan-vue/src/layout/components/TagsView/index.vue | 336 ++++++++++++++++++++++++-------------------------------
1 files changed, 145 insertions(+), 191 deletions(-)
diff --git a/zhitan-vue/src/layout/components/TagsView/index.vue b/zhitan-vue/src/layout/components/TagsView/index.vue
index 02baf0f..87edcf4 100644
--- a/zhitan-vue/src/layout/components/TagsView/index.vue
+++ b/zhitan-vue/src/layout/components/TagsView/index.vue
@@ -1,59 +1,58 @@
<template>
- <div id="tags-view-container" class="tags-view-container">
+ <div id="tags-view-container" class="tags-view-container" :class="{'theme-dark': sideTheme === 'theme-dark', 'theme-light': sideTheme === 'theme-light'}">
<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)">
+ <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;" />
+ <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 @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;" /> 鍏抽棴褰撳墠
+ <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>
+ <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'
-import useTagsViewStore from '@/store/modules/tagsView'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import ScrollPane from "./ScrollPane"
+import { getNormalPath } from "@/utils/ruoyi"
+import useTagsViewStore from "@/store/modules/tagsView"
+import useSettingsStore from "@/store/modules/settings"
+import usePermissionStore from "@/store/modules/permission"
-const visible = ref(false);
-const top = ref(0);
-const left = ref(0);
-const selectedTag = ref({});
-const affixTags = ref([]);
-const scrollPaneRef = ref(null);
+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 route = useRoute();
-const router = useRouter();
+const { proxy } = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
-const visitedViews = computed(() => useTagsViewStore().visitedViews);
-const routes = computed(() => usePermissionStore().routes);
-const theme = computed(() => useSettingsStore().theme);
+const visitedViews = computed(() => useTagsViewStore().visitedViews)
+const routes = computed(() => usePermissionStore().routes)
+const theme = computed(() => useSettingsStore().theme)
+const sideTheme = computed(() => useSettingsStore().sideTheme)
watch(route, () => {
addTags()
@@ -61,9 +60,9 @@
})
watch(visible, (value) => {
if (value) {
- document.body.addEventListener('click', closeMenu)
+ document.body.addEventListener("click", closeMenu)
} else {
- document.body.removeEventListener('click', closeMenu)
+ document.body.removeEventListener("click", closeMenu)
}
})
onMounted(() => {
@@ -75,18 +74,18 @@
return r.path === route.path
}
function activeStyle(tag) {
- if (!isActive(tag)) return {};
+ if (!isActive(tag)) return {}
return {
"background-color": theme.value,
- "border-color": theme.value
- };
+ "border-color": theme.value,
+ }
}
function isAffix(tag) {
return tag.meta && tag.meta.affix
}
function isFirstView() {
try {
- return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath
+ return selectedTag.value.fullPath === "/index" || selectedTag.value.fullPath === visitedViews.value[1].fullPath
} catch (err) {
return false
}
@@ -98,16 +97,16 @@
return false
}
}
-function filterAffixTags(routes, basePath = '') {
+function filterAffixTags(routes, basePath = "") {
let tags = []
- routes.forEach(route => {
+ routes.forEach((route) => {
if (route.meta && route.meta.affix) {
- const tagPath = getNormalPath(basePath + '/' + route.path)
+ const tagPath = getNormalPath(basePath + "/" + route.path)
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
- meta: { ...route.meta }
+ meta: { ...route.meta },
})
}
if (route.children) {
@@ -120,8 +119,8 @@
return tags
}
function initTags() {
- const res = filterAffixTags(routes.value);
- affixTags.value = res;
+ const res = filterAffixTags(routes.value)
+ affixTags.value = res
for (const tag of res) {
// Must have tag name
if (tag.name) {
@@ -134,7 +133,7 @@
if (name) {
useTagsViewStore().addView(route)
if (route.meta.link) {
- useTagsViewStore().addIframeView(route);
+ useTagsViewStore().addIframeView(route)
}
}
return false
@@ -143,7 +142,7 @@
nextTick(() => {
for (const r of visitedViews.value) {
if (r.path === route.path) {
- scrollPaneRef.value.moveToTarget(r);
+ scrollPaneRef.value.moveToTarget(r)
// when query is different then update
if (r.fullPath !== route.fullPath) {
useTagsViewStore().updateVisitedView(route)
@@ -153,9 +152,9 @@
})
}
function refreshSelectedTag(view) {
- proxy.$tab.refreshPage(view);
+ proxy.$tab.refreshPage(view)
if (route.meta.link) {
- useTagsViewStore().delIframeView(route);
+ useTagsViewStore().delIframeView(route)
}
}
function closeSelectedTag(view) {
@@ -166,28 +165,28 @@
})
}
function closeRightTags() {
- proxy.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
- if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
+ 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)) {
+ proxy.$tab.closeLeftPage(selectedTag.value).then((visitedViews) => {
+ if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
toLastView(visitedViews)
}
})
}
function closeOthersTags() {
- router.push(selectedTag.value).catch(() => { });
+ 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)) {
+ if (affixTags.value.some((tag) => tag.path === route.path)) {
return
}
toLastView(visitedViews, view)
@@ -200,11 +199,11 @@
} 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') {
+ if (view.name === "Dashboard") {
// to reload home page
- router.replace({ path: '/redirect' + view.fullPath })
+ router.replace({ path: "/redirect" + view.fullPath })
} else {
- router.push('/')
+ router.push("/")
}
}
}
@@ -233,142 +232,97 @@
}
</script>
-<style lang='scss' scoped>
-.themeDark {
- .tags-view-container {
- height: 50px;
- width: 100%;
- background: #1a235d;
- // 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: 34px;
- line-height: 34px;
- border: 1px solid #203a81;
- color: #c1c1c1;
- background: #3271eb;
- padding: 0 8px;
- font-size: 15px;
- margin-left: 5px;
- margin-top: 6px;
- border-radius: 5px;
- font-family: OPPOSans, OPPOSans;
- &: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: 5px;
- }
- }
+<style lang="scss" scoped>
+.tags-view-container {
+ height: 34px;
+ width: calc(100% - 42px);
+ margin-top: 10px;
+ margin-left: 14px;
+ box-sizing: border-box;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+
+ &.theme-dark {
+ background: #0A3465;
+ .tags-view-item {
+ color: #fff;
+ border: 1px solid #0c4685;
+ background: rgba(10, 52, 101, .48);
+ border-radius: 5px;
+
+ &.active {
+ background-color: var(--el-color-primary) !important;
+ color: #fff !important;
}
}
- .contextmenu {
- margin: 0;
+ }
+
+ &.theme-light {
+ background: #fff;
+ .tags-view-item {
+ color: #495060;
background: #fff;
- z-index: 3000;
- position: absolute;
- list-style-type: none;
- padding: 5px 0;
- border-radius: 4px;
+ border: 1px solid #d8dce5;
+
+ &.active {
+ background-color: var(--el-color-primary) !important;
+ color: #fff !important;
+ }
+ }
+ }
+
+ .tags-view-wrapper {
+ .tags-view-item {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ height: 26px;
+ line-height: 26px;
+ border-radius: 3px;
+ padding: 0 10px;
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;
+ margin-left: 5px;
+ margin-top: 4px;
+ &:first-of-type {
+ margin-left: 5px;
+ }
+ &:last-of-type {
+ margin-right: 5px;
+ }
+ &.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;
}
}
}
}
-}
-
-.themeLight {
- .tags-view-container {
- height: 50px;
- width: 100%;
+ .contextmenu {
+ margin: 0;
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: 34px;
- line-height: 34px;
- border: 1px solid #d8dce5;
- color: #495060;
- background: #fff;
- padding: 0 8px;
- font-size: 15px;
- margin-left: 5px;
- margin-top: 6px;
- border-radius: 5px;
- font-family: OPPOSans, OPPOSans;
- &: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: 5px;
- }
- }
- }
- }
- .contextmenu {
+ 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;
- 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;
- }
+ padding: 7px 16px;
+ cursor: pointer;
+ &:hover {
+ background: #eee;
}
}
}
@@ -403,6 +357,6 @@
}
.scroll-container .el-scrollbar__wrap {
- height: 50px !important;
+ height: 34px !important;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3