From aa5530f51b733c6550dba59877a0301763be3d21 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Sun, 22 Mar 2026 15:03:02 +0800
Subject: [PATCH] 优化页签功能&支持全屏按钮操作
---
ruoyi-ui/src/layout/components/AppMain.vue | 206 +++++++++++++++++++++++----------------------------
1 files changed, 93 insertions(+), 113 deletions(-)
diff --git a/ruoyi-ui/src/layout/components/AppMain.vue b/ruoyi-ui/src/layout/components/AppMain.vue
index 8da5714..e8dfc93 100644
--- a/ruoyi-ui/src/layout/components/AppMain.vue
+++ b/ruoyi-ui/src/layout/components/AppMain.vue
@@ -1,128 +1,47 @@
-<!-- @author ruoyi 20201128 支持三级以上菜单缓存 -->
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
- <keep-alive :max="20" :exclude="notCacheName">
- <router-view :key="key" />
+ <keep-alive :include="cachedViews">
+ <router-view v-if="!$route.meta.link" :key="key" />
</keep-alive>
</transition>
+ <iframe-toggle />
+ <copyright />
</section>
</template>
<script>
-import Global from "@/layout/components/global.js";
+import copyright from "./Copyright/index"
+import iframeToggle from "./IframeToggle/index"
export default {
name: 'AppMain',
+ components: { iframeToggle, copyright },
computed: {
- notCacheName() {
- var visitedViews = this.$store.state.tagsView.visitedViews;
- var noCacheViews = [];
- Object.keys(visitedViews).some((index) => {
- if (visitedViews[index].meta.noCache) {
- noCacheViews.push(visitedViews[index].name);
- }
- });
- return noCacheViews;
+ cachedViews() {
+ return this.$store.state.tagsView.cachedViews
},
key() {
- return this.$route.path;
- },
+ return this.$route.path
+ }
+ },
+ watch: {
+ $route() {
+ this.addIframe()
+ }
},
mounted() {
- // 关闭标签触发
- Global.$on("removeCache", (name, view) => {
- this.removeCache(name, view);
- });
+ this.addIframe()
},
methods: {
- // 获取有keep-alive子节点的Vnode
- getVnode() {
- // 判断子集非空
- if (this.$children.length == 0) return false;
- let vnode;
- for (let item of this.$children) {
- // 如果data中有key则代表找到了keep-alive下面的子集，这个key就是router-view上的key
- if (item.$vnode.data.key) {
- vnode = item.$vnode;
- break;
- }
+ addIframe() {
+ const { name } = this.$route
+ if (name && this.$route.meta.link) {
+ this.$store.dispatch('tagsView/addIframeView', this.$route)
}
- return vnode ? vnode : false;
- },
- // 移除keep-alive缓存
- removeCache(name, view = {}) {
- let vnode = this.getVnode();
- if (!vnode) return false;
- let componentInstance = vnode.parent.componentInstance;
- // 这个key是用来获取前缀用来后面正则匹配用的
- let keyStart = vnode.key.split("/")[0];
- let thisKey = `${keyStart}${view.fullPath}`;
- let regKey = `${keyStart}${view.path}`;
-
- this[name]({ componentInstance, thisKey, regKey });
- },
- // 移除其他
- closeOthersTags({ componentInstance, thisKey }) {
- Object.keys(componentInstance.cache).forEach((key, index) => {
- if (key != thisKey) {
- // 销毁实例(这里存在多个key指向一个缓存的情况可能前面一个已经清除掉了所有要加判断)
- if (componentInstance.cache[key]) {
- componentInstance.cache[key].componentInstance.$destroy();
- }
- // 删除缓存
- delete componentInstance.cache[key];
- // 移除key中对应的key
- componentInstance.keys.splice(index, 1);
- }
- });
- },
- // 移除所有缓存
- closeAllTags({ componentInstance }) {
- // 销毁实例
- Object.keys(componentInstance.cache).forEach((key) => {
- if (componentInstance.cache[key]) {
- componentInstance.cache[key].componentInstance.$destroy();
- }
- });
- // 删除缓存
- componentInstance.cache = {};
- // 移除key中对应的key
- componentInstance.keys = [];
- },
- // 移除单个缓存
- closeSelectedTag({ componentInstance, regKey }) {
- let reg = new RegExp(`^${regKey}`);
- Object.keys(componentInstance.cache).forEach((key, i) => {
- if (reg.test(key)) {
- // 销毁实例
- if (componentInstance.cache[key]) {
- componentInstance.cache[key].componentInstance.$destroy();
- }
- // 删除缓存
- delete componentInstance.cache[key];
- // 移除key中对应的key
- componentInstance.keys.splice(i, 1);
- }
- });
- },
- // 刷新单个缓存
- refreshSelectedTag({ componentInstance, thisKey }) {
- Object.keys(componentInstance.cache).forEach((key, index) => {
- if (null != thisKey && key.replace("/redirect", "") == thisKey) {
- // 1 销毁实例(这里存在多个key指向一个缓存的情况可能前面一个已经清除掉了所有要加判断)
- if (componentInstance.cache[key]) {
- componentInstance.cache[key].componentInstance.$destroy();
- }
- // 2 删除缓存
- delete componentInstance.cache[key];
- // 3 移除key中对应的key
- componentInstance.keys.splice(index, 1);
- }
- });
- },
- },
-};
+ }
+ }
+}
</script>
<style lang="scss" scoped>
@@ -132,10 +51,29 @@
width: 100%;
position: relative;
overflow: hidden;
+
+ &:fullscreen,
+ &:-webkit-full-screen,
+ &:-moz-full-screen,
+ &:-ms-fullscreen {
+ background: #fff;
+ overflow-y: auto;
+ }
}
.fixed-header + .app-main {
- padding-top: 50px;
+ overflow-y: auto;
+ scrollbar-gutter: auto;
+ height: calc(100vh - 50px);
+ min-height: 0px;
+}
+
+.app-main:has(.copyright) {
+ padding-bottom: 36px;
+}
+
+.fixed-header + .app-main {
+ margin-top: 50px;
}
.hasTagsView {
@@ -145,16 +83,58 @@
}
.fixed-header + .app-main {
- padding-top: 84px;
+ margin-top: 84px;
+ height: calc(100vh - 84px);
+ min-height: 0px;
+ }
+}
+
+/* 移动端fixed-header优化 */
+@media screen and (max-width: 991px) {
+ .fixed-header + .app-main {
+ padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
+ padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
+ overscroll-behavior-y: none;
+ }
+
+ .hasTagsView .fixed-header + .app-main {
+ padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
+ padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
+ overscroll-behavior-y: none;
+ }
+}
+
+@supports (-webkit-touch-callout: none) {
+ @media screen and (max-width: 991px) {
+ .fixed-header + .app-main {
+ padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
+ padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
+ height: calc(100svh - 50px);
+ height: calc(100dvh - 50px);
+ }
+
+ .hasTagsView .fixed-header + .app-main {
+ padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
+ padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
+ height: calc(100svh - 84px);
+ height: calc(100dvh - 84px);
+ }
}
}
</style>
<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
- .fixed-header {
- padding-right: 15px;
- }
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
}
-</style>
+
+::-webkit-scrollbar-track {
+ background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #c0c0c0;
+ border-radius: 3px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3