Skip to content

Commit

Permalink
fix the issue already known
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzfai
jzfai committed Feb 21, 2024
1 parent 28eba32 commit 8aeb6f8
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 86 deletions.
1 change: 1 addition & 0 deletions .npmrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ strict-peer-dependencies=false
registry = https://registry.npmmirror.com



7 changes: 4 additions & 3 deletions src/layout/app-main/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<!-- 下拉操作菜单 -->
<div v-if="settings.ShowDropDown" class="right-menu rowSC">
<ScreenFull />
<ScreenLock />
<ScreenLock/>
<ThemeSelect />
<SizeSelect />
<LangSelect />
Expand Down Expand Up @@ -45,6 +45,7 @@
</template>
</el-dropdown>
</div>

</div>
</template>

Expand Down Expand Up @@ -73,7 +74,7 @@ const toggleSideBar = () => {
const router = useRouter()
const route = useRoute()
const loginOut = () => {
elMessage('退出登录成功', 'success')
elMessage('退出登录成功')
router.push(`/login?redirect=${route.path}`)
nextTick(() => {
resetState()
Expand All @@ -88,7 +89,7 @@ const loginOut = () => {
position: relative;
background: var(--nav-bar-background);
box-shadow: var(--nav-bar-box-shadow);
z-index: 1;
z-index: 0;
}
//logo
Expand Down
87 changes: 52 additions & 35 deletions src/layout/app-main/TagsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,36 @@
<div id="tags-view-container" class="tags-view-container">
<div class="tags-view-wrapper">
<router-link
v-for="tag in visitedViews"
ref="refTag"
:key="tag.path"
v-slot="{ navigate }"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
custom
v-for="tag in visitedViews"
ref="refTag"
:key="tag.path"
v-slot="{ navigate }"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
custom
>
<div
class="tags-view-item"
:class="isActive(tag) ? 'active' : ''"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)"
@click="navigate"
class="tags-view-item"
:class="isActive(tag) ? 'active' : ''"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)"
@click="navigate"
>
{{ langTitle(tag.title) }}
<Close v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</div>
</router-link>
</div>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">{{ langTitle('Refresh') }}</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">{{ langTitle('Close') }}</li>
<li @click="closeOthersTags">{{ langTitle('Close Others') }}</li>
<li @click="closeAllTags(selectedTag)">{{ langTitle('Close All') }}</li>
</ul>
<div style="position:relative;top:-6px">
<div v-show="visible" class="triangle" :style="{left: left + 'px'}"/>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">

<li @click="refreshSelectedTag(selectedTag)">{{ langTitle('Refresh') }}</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">{{ langTitle('Close') }}</li>
<li @click="closeOthersTags">{{ langTitle('Close Others') }}</li>
<li @click="closeAllTags(selectedTag)">{{ langTitle('Close All') }}</li>
</ul>
</div>

</div>
</template>

Expand All @@ -53,21 +58,21 @@ const state = reactive({
const { visitedViews } = storeToRefs(useTagsViewStore())
watch(
() => route.path,
() => {
addTags()
}
() => route.path,
() => {
addTags()
}
)
watch(
() => state.visible,
(value) => {
if (value) {
document.body.addEventListener('click', closeMenu)
} else {
document.body.removeEventListener('click', closeMenu)
() => state.visible,
(value) => {
if (value) {
document.body.addEventListener('click', closeMenu)
} else {
document.body.removeEventListener('click', closeMenu)
}
}
}
)
onMounted(() => {
initTags()
Expand Down Expand Up @@ -140,7 +145,7 @@ const openMenu = (tag, e) => {
} else {
state.left = left
}
state.top = e.clientY
state.top =16
state.visible = true
state.selectedTag = tag
}
Expand All @@ -159,9 +164,9 @@ const closeSelectedTag = (view) => {
if (routerLevel === 2) {
basicStore.delCachedView(view.name)
}
// if (routerLevel === 3) {
// basicStore.setCacheViewDeep(view.name)
// }
if (routerLevel === 3) {
basicStore.delCacheViewDeep(view.name)
}
}
})
}
Expand Down Expand Up @@ -215,14 +220,24 @@ const { visible, top, left, selectedTag } = toRefs(state)
</script>

<style lang="scss" scoped>
//三角形汽包
.triangle {
position: relative;
width: 0;
height: 0;
left: 10px;
z-index: 100;
border: 8px solid transparent;
border-bottom-color: #eee;
opacity:0.4;
}
.tags-view-container {
height: var(--tag-view-height);
width: 100%;
position: relative;
background: var(--tags-view-background);
border-bottom: 1px solid var(--tags-view-border-bottom);
box-shadow: var(--tags-view-box-shadow);
position: relative;
z-index: 10;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
Expand Down Expand Up @@ -261,9 +276,9 @@ const { visible, top, left, selectedTag } = toRefs(state)
}
}
.contextmenu {
z-index: 100;
margin: 0;
background: var(--tags-view-contextmenu-background);
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
Expand All @@ -285,6 +300,8 @@ const { visible, top, left, selectedTag } = toRefs(state)
</style>

<style lang="scss">
//reset element css of el-icon-close
.tags-view-wrapper {
.tags-view-item {
Expand Down
33 changes: 17 additions & 16 deletions src/layout/app-main/component/ScreenLock.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<template>
<svg-icon icon-class="lock" style="width: 18px; height: 19px" class="mr-12px" @click="open = true" />
<transition enter-active-class="screen-locker-lock" leave-active-class="screen-locker-unlock">
<div v-if="open" class="screen-locker">
<div class="screen-avatar">
<el-avatar round :size="128" src="https://github.jzfai.top/file/images/nav-right-logo.gif" />
<div class="screen-nickname">Vue3 Admin Plus</div>
</div>
<div ref="slider" class="screen-slider">
<div class="screen-locker-placeholder">滑动解锁</div>
<div ref="sliderButton" class="screen-slider-button" @mousedown="onMousedown">
<el-icon :size="25">
<icon />
</el-icon>
<Teleport to="body">
<transition enter-active-class="screen-locker-lock" append-to-body leave-active-class="screen-locker-unlock">
<div v-if="open" class="screen-locker">
<div class="screen-avatar">
<el-avatar round :size="128" src="https://github.jzfai.top/file/images/nav-right-logo.gif" />
<div class="screen-nickname">Vue3 Admin Plus</div>
</div>
<div ref="slider" class="screen-slider">
<div class="screen-locker-placeholder">滑动解锁</div>
<div ref="sliderButton" class="screen-slider-button" @mousedown="onMousedown">
<el-icon :size="25">
<icon />
</el-icon>
</div>
</div>
</div>
</div>
</transition>
</transition>
</Teleport>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
Expand Down Expand Up @@ -102,7 +104,7 @@ const icon = computed(() => {
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
z-index: 100;
background-color: rgba(0, 0, 0, 0.3);
/* backdrop-filter暂不兼容firefox */
backdrop-filter: blur(10px);
Expand Down Expand Up @@ -188,7 +190,6 @@ const icon = computed(() => {
border-radius: 60px;
background-image: linear-gradient(to right, rgb(72 168 237 / 25%), rgba(255, 255, 255, 0.4), rgb(72 168 237 / 25%));
background-size: 200%;
z-index: -1;
/* 设置模糊度 显示发光效果 */
filter: blur(10px);
opacity: 0.5;
Expand Down
56 changes: 42 additions & 14 deletions src/layout/app-main/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { storeToRefs } from 'pinia/dist/pinia'
import { useRoute } from 'vue-router'
import type { rawConfig } from '~/basic'
Expand All @@ -29,8 +28,14 @@ const key = computed(() => route.path)
// cachePage: is true, keep-alive this Page
// leaveRmCachePage: is true, keep-alive remote when page leave
let oldRoute: rawConfig = {}
// let deepOldRouter: RouteLocationMatched | null = null
let cacheGroup: any = []
const basicStore = useBasicStore()
// const removeDeepChildren = (deepOldRouter) => {
// deepOldRouter.children?.forEach((fItem) => {
// basicStore.delCacheViewDeep(fItem.name)
// })
// }
watch(
() => route.name,
() => {
Expand All @@ -54,17 +59,42 @@ watch(
}
//二级路由处理
if (oldRoute?.name) {
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
basicStore.delCachedView(oldRoute.name)
if (routerLevel === 2) {
if (oldRoute?.name) {
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
basicStore.delCachedView(oldRoute.name)
}
}
}
if (route.name) {
if (route.meta?.cachePage) {
basicStore.addCachedView(route.name)
if (route.name) {
if (route.meta?.cachePage) {
basicStore.addCachedView(route.name)
}
}
}
//warning remove the third routerLevel cache func
//三级路由处理
// if (routerLevel === 3) {
// //三级时存储当前路由对象的上一级
// const parentRoute = route.matched[1]
// //否则走正常两级路由处理流程
// if (oldRoute?.name) {
// if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
// basicStore.delCacheViewDeep(oldRoute.name)
// }
// }
//
// //取的是第二级的name
// if (parentRoute.name && parentRoute.meta?.cachePage) {
// deepOldRouter = parentRoute
// basicStore.addCachedView(deepOldRouter.name)
// if (route.name) {
// if (route.meta?.cachePage) {
// //和第三级的name进行缓存
// basicStore.addCachedViewDeep(route.name)
// }
// }
// }
// }
oldRoute = cloneDeep({ name: route.name, meta: route.meta })
},
{ immediate: true }
Expand All @@ -74,15 +104,13 @@ watch(
<style scoped lang="scss">
.app-main {
padding: var(--app-main-padding);
/*50 = navbar */
z-index: 0;
position: relative;
overflow-y: auto;
overflow: hidden;
background-color: var(--app-main-background);
height: calc(100vh - #{var(--nav-bar-height)}) !important;
min-height: calc(100vh - #{var(--nav-bar-height)}) !important;
}
.show-tag-view {
height: calc(100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)}) !important;
min-height: calc(100vh - #{var(--nav-bar-height)} - #{var(--tag-view-height)}) !important;
}
.fixed-header + .app-main {
padding-top: 50px;
Expand Down
2 changes: 0 additions & 2 deletions src/layout/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ resizeHandler()
transition: margin-left var(--sideBar-switch-duration);
margin-left: var(--side-bar-width);
position: relative;
overflow: hidden;
}
.sidebar-container {
transition: width var(--sideBar-switch-duration);
Expand All @@ -46,7 +45,6 @@ resizeHandler()
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
border-right: 0.5px solid var(--side-bar-border-right-color);
}
Expand Down
2 changes: 1 addition & 1 deletion src/layout/sidebar/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</div>
</template>

<script setup lang="ts">
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia/dist/pinia'
import { useRoute } from 'vue-router'
Expand Down
2 changes: 0 additions & 2 deletions src/views/dashboard/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,4 @@ import {useConfigStore} from '@/store/config'
const {setTheme, theme, setSize, size, setLanguage} = useConfigStore()
const route = useRoute()
</script>
Loading

0 comments on commit 8aeb6f8

Please sign in to comment.