'admin-21.08.01:更新修复请查看CHANGELOG.md文件或查看标签'

.env

@@ -4,5 +4,5 @@ VITE_PORT = 8888
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN = false
 
-# public path 配置线上环境路径（打包）
+# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
 VITE_PUBLIC_PATH = /vue-next-admin-preview/

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.14
+
+`2021.07.29`
+
+- 🌟 更新 依赖更新最新版本（vue、vuex、vue-router）,出现问题，请手动降级。版本查看：<a href="https://www.npmjs.com/" target="_blank">vnpm</a>
+- 🎯 优化 数据可视化图表演示加载卡顿问题、优化有图表的演示界面
+- 🎯 优化 路由参数演示界面
+- 🎯 优化 tagsView 操作演示界面，由于存在相同路由多标签，必须要传全部参数值（query 或者 params）
+- 🎉 新增 开启 TagsView 共用，开启时：（多个路由菜单共用一个详情组件（参数为后点击的覆盖前面点击的），tagsView 中只会出现一个（不支持同时出现多个 tagsView 标签））。关闭时：（多个路由菜单共用一个详情组件，参数不同，会同时出现多个 tagsView 标签）
+- 🐞 修复 tagsView 共用（单标签）时，右键菜单功能点击，参数不对的问题（第 2n+个参数未覆盖第一个参数值）
+- 🐞 修复 多 tagsView 标签（参数不同）、单个 tagsView 标签公用（参数不同）所带来的刷新功能、横向自动滚动等问题
+- 🐞 修复 处理全屏若干问题，<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/12" target="_blank">pr!12</a>，感谢群友@另一个前端
+
 ## 1.0.13
 
 `2021.07.25`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.0.13",
+	"version": "1.0.14",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -8,12 +8,12 @@
 	},
 	"dependencies": {
 		"axios": "^0.21.1",
-		"countup.js": "^2.0.7",
+		"countup.js": "^2.0.8",
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.1.2",
-		"echarts-gl": "^2.0.6",
+		"echarts-gl": "^2.0.7",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.57",
+		"element-plus": "^1.0.2-beta.65",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -21,34 +21,34 @@
 		"screenfull": "^5.1.0",
 		"sortablejs": "^1.14.0",
 		"splitpanes": "^3.0.4",
-		"vue": "^3.0.11",
+		"vue": "^3.1.5",
 		"vue-clipboard3": "^1.0.1",
 		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.1.7",
-		"vue-router": "^4.0.8",
+		"vue-router": "^4.0.10",
 		"vue-web-screen-shot": "^1.2.0",
-		"vuex": "^4.0.1",
+		"vuex": "^4.0.2",
-		"wangeditor": "^4.7.5"
+		"wangeditor": "^4.7.6"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.4.1",
+		"@types/node": "^16.4.9",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.28.4",
+		"@typescript-eslint/eslint-plugin": "^4.28.5",
-		"@typescript-eslint/parser": "^4.28.4",
+		"@typescript-eslint/parser": "^4.28.5",
-		"@vitejs/plugin-vue": "^1.2.5",
+		"@vitejs/plugin-vue": "^1.3.0",
 		"@vue/compiler-sfc": "^3.1.5",
 		"dotenv": "^10.0.0",
-		"eslint": "^7.31.0",
+		"eslint": "^7.32.0",
-		"eslint-plugin-vue": "^7.14.0",
+		"eslint-plugin-vue": "^7.15.0",
 		"prettier": "^2.3.2",
-		"sass": "^1.36.0",
+		"sass": "^1.37.0",
 		"sass-loader": "^12.1.0",
 		"typescript": "^4.3.5",
-		"vite": "^2.4.3",
+		"vite": "^2.4.4",
-		"vue-eslint-parser": "^7.9.0"
+		"vue-eslint-parser": "^7.10.0"
 	},
 	"browserslist": [
 		"> 1%",

src/App.vue

@@ -2,6 +2,7 @@
 	<router-view v-show="getThemeConfig.lockScreenTime !== 0" />
 	<LockScreen v-if="getThemeConfig.isLockScreen" />
 	<Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
+	<CloseFull />
 </template>
 
 <script lang="ts">
@@ -13,9 +14,10 @@ import { Local } from '/@/utils/storage';
 import setIntroduction from '/@/utils/setIconfont';
 import LockScreen from '/@/layout/lockScreen/index.vue';
 import Setings from '/@/layout/navBars/breadcrumb/setings.vue';
+import CloseFull from '/@/layout/navBars/breadcrumb/closeFull.vue';
 export default defineComponent({
 	name: 'app',
-	components: { LockScreen, Setings },
+	components: { LockScreen, Setings, CloseFull },
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const setingsRef = ref();

src/i18n/lang/en.ts

@@ -107,6 +107,7 @@ export default {
 		closeOther: 'closeOther',
 		closeAll: 'closeAll',
 		fullscreen: 'fullscreen',
+		closeFullscreen: 'closeFullscreen',
 	},
 	notFound: {
 		foundTitle: 'Wrong address input, please re-enter the address~',
@@ -147,6 +148,7 @@ export default {
 		fourIsTagsviewIcon: 'Open tagsview Icon',
 		fourIsCacheTagsView: 'Enable tagsview cache',
 		fourIsSortableTagsView: 'Enable tagsview drag',
+		fourIsShareTagsView: 'Enable tagsview sharing',
 		fourIsFooter: 'Open footer',
 		fourIsGrayscale: 'Grey model',
 		fourIsInvert: 'Color weak mode',

src/i18n/lang/zh-cn.ts

@@ -107,6 +107,7 @@ export default {
 		closeOther: '关闭其它',
 		closeAll: '全部关闭',
 		fullscreen: '当前页全屏',
+		closeFullscreen: '关闭全屏',
 	},
 	notFound: {
 		foundTitle: '地址输入错误，请重新输入地址~',
@@ -147,6 +148,7 @@ export default {
 		fourIsTagsviewIcon: '开启 Tagsview 图标',
 		fourIsCacheTagsView: '开启 TagsView 缓存',
 		fourIsSortableTagsView: '开启 TagsView 拖拽',
+		fourIsShareTagsView: '开启 TagsView 共用',
 		fourIsFooter: '开启 Footer',
 		fourIsGrayscale: '灰色模式',
 		fourIsInvert: '色弱模式',

src/i18n/lang/zh-tw.ts

@@ -107,6 +107,7 @@ export default {
 		closeOther: '關閉其它',
 		closeAll: '全部關閉',
 		fullscreen: '當前頁全屏',
+		closeFullscreen: '關閉全屏',
 	},
 	notFound: {
 		foundTitle: '地址輸入錯誤，請重新輸入地址~',
@@ -147,6 +148,7 @@ export default {
 		fourIsTagsviewIcon: '開啟 Tagsview 圖標',
 		fourIsCacheTagsView: '開啟 TagsView 緩存',
 		fourIsSortableTagsView: '開啟 TagsView 拖拽',
+		fourIsShareTagsView: '開啟 TagsView 共用',
 		fourIsFooter: '開啟 Footer',
 		fourIsGrayscale: '灰色模式',
 		fourIsInvert: '色弱模式',

src/layout/component/aside.vue

@@ -1,22 +1,20 @@
 <template>
 	<template v-if="clientWidth > 1000">
-		<el-aside class="layout-aside" :class="setCollapseWidth" v-show="!isCurrenFullscreen">
+		<el-aside class="layout-aside" :class="setCollapseWidth" v-show="!isTagsViewCurrenFull">
 			<Logo v-if="setShowLogo" />
 			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
 				<Vertical :menuList="menuList" :class="setCollapseWidth" />
 			</el-scrollbar>
 		</el-aside>
 	</template>
-	<template v-else>
+	<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
-		<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px">
+		<el-aside class="layout-aside w100 h100">
-			<el-aside class="layout-aside w100 h100">
+			<Logo v-if="setShowLogo" />
-				<Logo v-if="setShowLogo" />
+			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
-				<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
+				<Vertical :menuList="menuList" />
-					<Vertical :menuList="menuList" />
+			</el-scrollbar>
-				</el-scrollbar>
+		</el-aside>
-			</el-aside>
+	</el-drawer>
-		</el-drawer>
-	</template>
 </template>
 
 <script lang="ts">
@@ -39,8 +37,8 @@ export default {
 			return store.state.themeConfig.themeConfig;
 		});
 		// 获取卡片全屏信息
-		const isCurrenFullscreen = computed(() => {
+		const isTagsViewCurrenFull = computed(() => {
-			return store.state.tagsViewRoutes.isCurrenFullscreen;
+			return store.state.tagsViewRoutes.isTagsViewCurrenFull;
 		});
 		// 设置菜单展开/收起时的宽度
 		const setCollapseWidth = computed(() => {
@@ -126,7 +124,7 @@ export default {
 			setCollapseWidth,
 			setShowLogo,
 			getThemeConfig,
-			isCurrenFullscreen,
+			isTagsViewCurrenFull,
 			...toRefs(state),
 		};
 	},

src/layout/component/columnsAside.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-columns-aside" v-show="!isCurrenFullscreen">
+	<div class="layout-columns-aside">
 		<el-scrollbar>
 			<ul>
 				<li
@@ -70,10 +70,6 @@ export default {
 		const setColumnsAsidelayout = computed(() => {
 			return store.state.themeConfig.themeConfig.columnsAsideLayout;
 		});
-		// 获取卡片全屏信息
-		const isCurrenFullscreen = computed(() => {
-			return store.state.tagsViewRoutes.isCurrenFullscreen;
-		});
 		// 设置菜单高亮位置移动
 		const setColumnsAsideMove = (k: number) => {
 			state.liIndex = k;
@@ -156,7 +152,6 @@ export default {
 			setColumnsAsideStyle,
 			setColumnsAsidelayout,
 			onColumnsAsideMenuClick,
-			isCurrenFullscreen,
 			...toRefs(state),
 		};
 	},
@@ -216,8 +211,8 @@ export default {
 			position: absolute;
 			left: 50%;
 			top: 2px;
-			height: 50px;
+			height: 44px;
-			width: 60px;
+			width: 65px;
 			transform: translateX(-50%);
 			z-index: 0;
 			transition: 0.3s ease-in-out;
@@ -226,6 +221,7 @@ export default {
 		.columns-card {
 			@extend .columns-round;
 			top: 0;
+			height: 50px;
 			width: 100%;
 			border-radius: 0;
 		}

src/layout/component/header.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-header class="layout-header" :height="setHeaderHeight" v-show="!isCurrenFullscreen">
+	<el-header class="layout-header" :height="setHeaderHeight" v-show="!isTagsViewCurrenFull">
 		<NavBarsIndex />
 	</el-header>
 </template>
@@ -20,12 +20,12 @@ export default {
 			else return '50px';
 		});
 		// 获取卡片全屏信息
-		const isCurrenFullscreen = computed(() => {
+		const isTagsViewCurrenFull = computed(() => {
-			return store.state.tagsViewRoutes.isCurrenFullscreen;
+			return store.state.tagsViewRoutes.isTagsViewCurrenFull;
 		});
 		return {
 			setHeaderHeight,
-			isCurrenFullscreen,
+			isTagsViewCurrenFull,
 		};
 	},
 };

src/layout/navBars/breadcrumb/closeFull.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="layout-navbars-close-full" v-if="isTagsViewCurrenFull">
+		<div class="layout-navbars-close-full-box" :title="$t('message.tagsView.closeFullscreen')" @click="onCloseFullscreen">
+			<i class="el-icon-close"></i>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed } from 'vue';
+import { useStore } from '/@/store/index';
+export default {
+	name: 'layoutCloseFull',
+	setup() {
+		const store = useStore();
+		const state: any = reactive({});
+		// 获取卡片全屏信息
+		const isTagsViewCurrenFull = computed(() => {
+			return store.state.tagsViewRoutes.isTagsViewCurrenFull;
+		});
+		// 关闭当前全屏
+		const onCloseFullscreen = () => {
+			store.dispatch('tagsViewRoutes/setCurrenFullscreen', false);
+		};
+		return {
+			isTagsViewCurrenFull,
+			onCloseFullscreen,
+			...toRefs(state),
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-close-full {
+	position: fixed;
+	z-index: 9999999999;
+	right: -30px;
+	top: -30px;
+	.layout-navbars-close-full-box {
+		width: 60px;
+		height: 60px;
+		border-radius: 100%;
+		position: relative;
+		cursor: pointer;
+		background: rgba(0, 0, 0, 0.1);
+		transition: all 0.3s ease;
+		i {
+			position: absolute;
+			left: 11px;
+			top: 35px;
+			color: #333333;
+			transition: all 0.3s ease;
+		}
+		&:hover {
+			background: rgba(0, 0, 0, 0.2);
+			transition: all 0.3s ease;
+			i {
+				color: var(--color-primary);
+				transition: all 0.3s ease;
+			}
+		}
+	}
+}
+</style>

src/layout/navBars/breadcrumb/setings.vue

@@ -207,6 +207,12 @@
 						<el-switch v-model="getThemeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
 					</div>
 				</div>
+				<div class="layout-breadcrumb-seting-bar-flex mt15">
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShareTagsView') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isShareTagsView" @change="onShareTagsViewChange"></el-switch>
+					</div>
+				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsFooter') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
@@ -476,6 +482,11 @@ export default defineComponent({
 			proxy.mittBus.emit('openOrCloseSortable');
 			setLocalThemeConfig();
 		};
+		// 4、界面显示 --> 开启 TagsView 共用
+		const onShareTagsViewChange = () => {
+			proxy.mittBus.emit('openShareTagsView');
+			setLocalThemeConfig();
+		};
 		// 4、界面显示 --> 灰色模式/色弱模式
 		const onAddFilterChange = (attr: string) => {
 			if (attr === 'grayscale') {
@@ -654,6 +665,7 @@ export default defineComponent({
 			onClassicSplitMenuChange,
 			onIsBreadcrumbChange,
 			onSortableTagsViewChange,
+			onShareTagsViewChange,
 			onCopyConfigClick,
 		};
 	},

src/layout/navBars/breadcrumb/user.vue

@@ -225,31 +225,12 @@ export default {
 					break;
 			}
 		};
-		// 阻止F11全屏
-		const initOnkeydown = () => {
-			document.onkeydown = (event) => {
-				var e = event || window.event || arguments.callee.caller.arguments[0];
-				if (e && e.keyCode === 122 && !state.isScreenfull) {
-					e.preventDefault();
-					onScreenfullClick();
-				}
-			};
-		};
 		// 页面加载时
 		onMounted(() => {
-			initOnkeydown();
 			if (Local.get('themeConfig')) {
 				initI18n();
 				initComponentSize();
 			}
-			document.onkeydown = (event) => {
-				var e = event || window.event || arguments.callee.caller.arguments[0];
-				// 阻止F11全屏
-				if (e && e.keyCode === 122 && !state.isScreenfull) {
-					e.preventDefault();
-					onScreenfullClick();
-				}
-			};
 		});
 		return {
 			getUserInfos,

src/layout/navBars/tagsView/contextmenu.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 					icon: 'iconfont icon-fullscreen',
 				},
 			],
-			path: {},
+			item: {},
 		});
 		// 父级传过来的坐标 x,y 值
 		const dropdowns = computed(() => {
@@ -54,11 +54,11 @@ export default defineComponent({
 		});
 		// 当前项菜单点击
 		const onCurrentContextmenuClick = (id: number) => {
-			emit('currentContextmenuClick', { id, path: state.path });
+			emit('currentContextmenuClick', Object.assign({}, { id }, state.item));
 		};
 		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
 		const openContextmenu = (item: any) => {
-			state.path = item.path;
+			state.item = item;
 			item.meta.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
 			closeContextmenu();
 			setTimeout(() => {

src/layout/navBars/tagsView/tagsView.vue

@@ -1,9 +1,5 @@
 <template>
-	<div
+	<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }">
-		class="layout-navbars-tagsview"
-		:class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }"
-		v-show="!isCurrenFullscreen"
-	>
 		<el-scrollbar ref="scrollbarRef" @wheel.native.prevent="onHandleScroll">
 			<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
 				<li
@@ -11,7 +7,7 @@
 					:key="k"
 					class="layout-navbars-tagsview-ul-li"
 					:data-name="v.name"
-					:class="{ 'is-active': isActive(v.path) }"
+					:class="{ 'is-active': isActive(v) }"
 					@contextmenu.prevent="onContextmenu(v, $event)"
 					@click="onTagsClick(v, k)"
 					:ref="
@@ -20,21 +16,21 @@
 						}
 					"
 				>
-					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v.path)"></i>
+					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)"></i>
-					<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon" v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
+					<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon"></i>
 					<span>{{ $t(v.meta.title) }}</span>
-					<template v-if="isActive(v.path)">
+					<template v-if="isActive(v)">
-						<i class="el-icon-refresh-right ml5" @click.stop="refreshCurrentTagsView(v.path)"></i>
+						<i class="el-icon-refresh-right ml5" @click.stop="refreshCurrentTagsView($route.fullPath)"></i>
 						<i
 							class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"
 							v-if="!v.meta.isAffix"
-							@click.stop="closeCurrentTagsView(v.path)"
+							@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
 						></i>
 					</template>
 					<i
 						class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"
 						v-if="!v.meta.isAffix"
-						@click.stop="closeCurrentTagsView(v.path)"
+						@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
 					></i>
 				</li>
 			</ul>
@@ -46,9 +42,12 @@
 <script lang="ts">
 import { toRefs, reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, getCurrentInstance, watch } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+import Sortable from 'sortablejs';
+import { ElMessage } from 'element-plus';
 import { useStore } from '/@/store/index';
 import { Session } from '/@/utils/storage';
-import Sortable from 'sortablejs';
+import { NextLoading } from '/@/utils/loading';
+import { isObjectValueEqual } from '/@/utils/arrayOperation';
 import Contextmenu from '/@/layout/navBars/tagsView/contextmenu.vue';
 export default {
 	name: 'layoutTagsView',
@@ -63,6 +62,7 @@ export default {
 		const route = useRoute();
 		const router = useRouter();
 		const state: any = reactive({
+			routeActive: '',
 			routePath: route.path,
 			dropdown: { x: '', y: '' },
 			tagsRefsIndex: 0,
@@ -78,66 +78,120 @@ export default {
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
 		});
-		// 获取卡片全屏信息
+		// 设置 tagsView 高亮
-		const isCurrenFullscreen = computed(() => {
+		const isActive = (v) => {
-			return store.state.tagsViewRoutes.isCurrenFullscreen;
+			if (getThemeConfig.value.isShareTagsView) {
-		});
+				return v.path === state.routePath;
+			} else {
+				return v.url === state.routeActive;
+			}
+		};
 		// 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
 		const addBrowserSetSession = (tagsViewList: Array<object>) => {
 			Session.set('tagsViewList', tagsViewList);
 		};
 		// 获取 vuex 中的 tagsViewRoutes 列表
-		const getTagsViewRoutes = () => {
+		const getTagsViewRoutes = async () => {
-			state.routePath = route.meta.isDynamic ? route.meta.isDynamicPath : route.path;
+			state.routeActive = await setTagsViewHighlight(route);
+			state.routePath = (await route.meta.isDynamic) ? route.meta.isDynamicPath : route.path;
 			state.tagsViewList = [];
-			if (!store.state.themeConfig.themeConfig.isCacheTagsView) Session.remove('tagsViewList');
 			state.tagsViewRoutesList = store.state.tagsViewRoutes.tagsViewRoutes;
 			initTagsView();
 		};
 		// vuex 中获取路由信息：如果是设置了固定的（isAffix），进行初始化显示
-		const initTagsView = () => {
+		const initTagsView = async () => {
-			if (Session.get('tagsViewList') && store.state.themeConfig.themeConfig.isCacheTagsView) {
+			if (Session.get('tagsViewList') && getThemeConfig.value.isCacheTagsView) {
-				state.tagsViewList = Session.get('tagsViewList');
+				state.tagsViewList = await Session.get('tagsViewList');
 			} else {
-				state.tagsViewRoutesList.map((v: any) => {
+				await state.tagsViewRoutesList.map((v: any) => {
-					if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
+					if (v.meta.isAffix && !v.meta.isHide) {
+						v.url = setTagsViewHighlight(v);
+						state.tagsViewList.push({ ...v });
+					}
 				});
-				addTagsView(route.path, route);
+				await addTagsView(route.path, route);
 			}
 			// 初始化当前元素(li)的下标
-			getTagsRefsIndex(route.path);
+			getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
-			// 添加初始化横向滚动条移动到对应位置
-			tagsViewmoveToCurrentTag();
 		};
-		// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
+		// 处理可开启多标签详情，单标签详情（动态路由（xxx/:id/:name"），普通路由处理）
-		const addTagsView = (path: string, to?: any) => {
+		const solveAddTagsView = async (path: string, to?: any) => {
-			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+			let isDynamicPath = to.meta.isDynamic ? to.meta.isDynamicPath : path;
-			let item = '';
+			let current = state.tagsViewList.filter(
-			if (to && to.meta.isDynamic) {
+				(v: any) =>
-				if (state.tagsViewList.some((v: any) => v.path === to.meta.isDynamicPath)) return false;
+					v.path === isDynamicPath &&
-				item = state.tagsViewRoutesList.find((v: any) => v.path === to.meta.isDynamicPath);
+					isObjectValueEqual(
-			} else {
+						to.meta.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
-				if (state.tagsViewList.some((v: any) => v.path === path)) return false;
+						to.meta.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null
-				item = state.tagsViewRoutesList.find((v: any) => v.path === path);
+					)
+			);
+			if (current.length <= 0) {
+				// 防止：Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.
+				let findItem = state.tagsViewRoutesList.find((v: any) => v.path === isDynamicPath);
+				if (findItem.meta.isAffix) return false;
+				if (findItem.meta.isLink && !findItem.meta.isIframe) return false;
+				to.meta.isDynamic ? (findItem.params = to.params) : (findItem.query = to.query);
+				findItem.url = setTagsViewHighlight(findItem);
+				state.tagsViewList.push({ ...findItem });
+				addBrowserSetSession(state.tagsViewList);
 			}
-			if (item.meta.isLink && !item.meta.isIframe) return false;
+		};
-			if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params;
+		// 处理单标签时，第二次的值未覆盖第一次的 tagsViewList 值（Session Storage）
-			else item.query = to?.query ? to?.query : route.query;
+		const singleAddTagsView = (path: string, to?: any) => {
-			state.tagsViewList.push({ ...item });
+			let isDynamicPath = to.meta.isDynamic ? to.meta.isDynamicPath : path;
-			addBrowserSetSession(state.tagsViewList);
+			state.tagsViewList.forEach((v) => {
+				if (
+					v.path === isDynamicPath &&
+					!isObjectValueEqual(
+						to.meta.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
+						to.meta.isDynamic ? (to?.params ? to?.params : null) : to?.query ? to?.query : null
+					)
+				) {
+					to.meta.isDynamic ? (v.params = to.params) : (v.query = to.query);
+					v.url = setTagsViewHighlight(v);
+					addBrowserSetSession(state.tagsViewList);
+				}
+			});
+		};
+		// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中（可开启多标签详情，单标签详情）
+		const addTagsView = (path: string, to?: any) => {
+			// 防止拿取不到路由信息
+			nextTick(async () => {
+				// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+				let item = '';
+				if (to && to.meta.isDynamic) {
+					// 动态路由（xxx/:id/:name"）：参数不同，开启多个 tagsview
+					if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
+					else await singleAddTagsView(path, to);
+					if (state.tagsViewList.some((v: any) => v.path === to.meta.isDynamicPath)) return false;
+					item = state.tagsViewRoutesList.find((v: any) => v.path === to.meta.isDynamicPath);
+				} else {
+					// 普通路由：参数不同，开启多个 tagsview
+					if (!getThemeConfig.value.isShareTagsView) await solveAddTagsView(path, to);
+					else await singleAddTagsView(path, to);
+					if (state.tagsViewList.some((v: any) => v.path === path)) return false;
+					item = state.tagsViewRoutesList.find((v: any) => v.path === path);
+				}
+				if (item.meta.isLink && !item.meta.isIframe) return false;
+				if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params;
+				else item.query = to?.query ? to?.query : route.query;
+				item.url = setTagsViewHighlight(item);
+				await state.tagsViewList.push({ ...item });
+				await addBrowserSetSession(state.tagsViewList);
+			});
 		};
 		// 2、刷新当前 tagsView：
-		const refreshCurrentTagsView = (path: string) => {
+		const refreshCurrentTagsView = (fullPath: string) => {
-			proxy.mittBus.emit('onTagsViewRefreshRouterView', path);
+			proxy.mittBus.emit('onTagsViewRefreshRouterView', fullPath);
 		};
 		// 3、关闭当前 tagsView：如果是设置了固定的（isAffix），不可以关闭
 		const closeCurrentTagsView = (path: string) => {
 			state.tagsViewList.map((v: any, k: number, arr: any) => {
 				if (!v.meta.isAffix) {
-					if (v.path === path) {
+					if (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path) {
 						state.tagsViewList.splice(k, 1);
 						setTimeout(() => {
-							if (state.tagsViewList.length === k && state.routePath === path) {
+							if (state.tagsViewList.length === k && getThemeConfig.value.isShareTagsView ? state.routePath === path : state.routeActive === path) {
 								// 最后一个且高亮时
 								if (arr[arr.length - 1].meta.isDynamic) {
 									// 动态路由（xxx/:id/:name"）
@@ -148,7 +202,7 @@ export default {
 								}
 							} else {
 								// 非最后一个且高亮时，跳转到下一个
-								if (state.tagsViewList.length !== k && state.routePath === path) {
+								if (state.tagsViewList.length !== k && getThemeConfig.value.isShareTagsView ? state.routePath === path : state.routeActive === path) {
 									if (arr[k].meta.isDynamic) {
 										// 动态路由（xxx/:id/:name"）
 										router.push({ name: arr[k].name, params: arr[k].params });
@@ -173,62 +227,85 @@ export default {
 			addTagsView(path, route);
 		};
 		// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
-		const closeAllTagsView = (path: string) => {
+		const closeAllTagsView = () => {
 			state.tagsViewList = [];
 			state.tagsViewRoutesList.map((v: any) => {
 				if (v.meta.isAffix && !v.meta.isHide) {
 					state.tagsViewList.push({ ...v });
-					if (state.tagsViewList.some((v: any) => v.path === path)) router.push({ path, query: route.query });
+					router.push({ path: state.tagsViewList[state.tagsViewList.length - 1].path });
-					else router.push({ path: v.path, query: route.query });
 				}
 			});
 			addBrowserSetSession(state.tagsViewList);
 		};
 		// 6、开启当前页面全屏
-		const openCurrenFullscreen = (path: string, currentRouteInfo: object) => {
+		const openCurrenFullscreen = async (path: string) => {
-			nextTick(() => {
+			const item = state.tagsViewList.find((v: any) => (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path));
-				const { meta, name, params, query } = currentRouteInfo;
+			if (item.meta.isDynamic) await router.push({ name: item.name, params: item.params });
-				if (meta.isDynamic) router.push({ name, params });
+			else await router.push({ name: item.name, query: item.query });
-				else router.push({ path, query });
+			NextLoading.start();
-				store.dispatch('tagsViewRoutes/setCurrenFullscreen', 500);
+			setTimeout(() => {
-			});
+				nextTick(() => {
+					store.dispatch('tagsViewRoutes/setCurrenFullscreen', true);
+					if (store.state.tagsViewRoutes.isTagsViewCurrenFull) {
+						const element = document.querySelector('.layout-main .layout-view-bg-white') as HTMLElement;
+						if (!element) return false;
+						// 非当前页开启 iframes 高度会有问题
+						if (route.path === '/iframes') element.style.height = `100vh`;
+						else element.style.height = `calc(100vh - 30px)`;
+					}
+				});
+			}, 1000);
 		};
 		// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
-		const getCurrentRouteItem = (path: string) => {
+		// 防止 tagsView 非当前页演示时，操作异常
-			if (!Session.get('tagsViewList')) return state.tagsViewList.find((v: any) => v.path === path);
+		const getCurrentRouteItem = (path: string, cParams: { [key: string]: any }) => {
-			return Session.get('tagsViewList').find((v: any) => v.path === path);
+			const itemRoute = Session.get('tagsViewList') ? Session.get('tagsViewList') : state.tagsViewList;
+			return itemRoute.find((v: any) => {
+				if (
+					v.path === path &&
+					isObjectValueEqual(
+						v.meta.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
+						cParams && Object.keys(cParams ? cParams : {}).length > 0 ? cParams : null
+					)
+				) {
+					return v;
+				} else if (v.path === path && Object.keys(cParams ? cParams : {}).length <= 0) {
+					return v;
+				}
+			});
 		};
 		// 当前项右键菜单点击
-		const onCurrentContextmenuClick = (item) => {
+		const onCurrentContextmenuClick = async (item) => {
-			const { id, path } = item;
+			const cParams = item.meta.isDynamic ? item.params : item.query;
-			const currentRouteInfo = getCurrentRouteItem(path);
+			if (!getCurrentRouteItem(item.path, cParams)) return ElMessage({ type: 'warning', message: '请正确输入路径及完整参数（query、params）' });
-			const { meta, name, params, query } = currentRouteInfo;
+			const { path, name, params, query, meta, url } = getCurrentRouteItem(item.path, cParams);
-			switch (id) {
+			switch (item.id) {
 				case 0:
-					refreshCurrentTagsView(path);
+					// 刷新当前
-					if (meta.isDynamic) router.push({ name, params });
+					if (meta.isDynamic) await router.push({ name, params });
-					else router.push({ path, query });
+					else await router.push({ path, query });
+					refreshCurrentTagsView(route.fullPath);
 					break;
 				case 1:
-					closeCurrentTagsView(path);
+					// 关闭当前
+					closeCurrentTagsView(getThemeConfig.value.isShareTagsView ? path : url);
 					break;
 				case 2:
-					if (meta.isDynamic) router.push({ name, params });
+					// 关闭其它
-					else router.push({ path, query });
+					if (meta.isDynamic) await router.push({ name, params });
+					else await router.push({ path, query });
 					closeOtherTagsView(path);
 					break;
 				case 3:
-					closeAllTagsView(path);
+					// 关闭全部
+					closeAllTagsView();
 					break;
 				case 4:
-					openCurrenFullscreen(path, currentRouteInfo);
+					// 开启当前页面全屏
+					openCurrenFullscreen(getThemeConfig.value.isShareTagsView ? path : url);
 					break;
 			}
 		};
-		// 判断页面高亮（修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G）
-		const isActive = (path: string) => {
-			return path === state.routePath;
-		};
 		// 右键点击时：传 x,y 坐标值到子组件中（props）
 		const onContextmenu = (v: any, e: any) => {
 			const { clientX, clientY } = e;
@@ -238,10 +315,20 @@ export default {
 		};
 		// 当前的 tagsView 项点击时
 		const onTagsClick = (v: any, k: number) => {
-			state.routePath = v.path;
 			state.tagsRefsIndex = k;
 			router.push(v);
 		};
+		// 处理 tagsView 高亮（多标签详情时使用，单标签详情未使用）
+		const setTagsViewHighlight = (v: any) => {
+			let params = v.query && Object.keys(v.query).length > 0 ? v.query : v.params;
+			if (!params || Object.keys(params).length <= 0) return v.path;
+			let path = '';
+			for (let i in params) {
+				path += params[i];
+			}
+			// 判断是否是动态路由（xxx/:id/:name"）
+			return `${v.meta.isDynamic ? v.meta.isDynamicPath : v.path}-${path}`;
+		};
 		// 更新滚动条显示
 		const updateScrollbar = () => {
 			proxy.$refs.scrollbarRef.update();
@@ -304,9 +391,19 @@ export default {
 		};
 		// 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
 		const getTagsRefsIndex = (path: string) => {
-			if (state.tagsViewList.length > 0) {
+			nextTick(async () => {
-				state.tagsRefsIndex = state.tagsViewList.findIndex((item: any) => item.path === path);
+				// await 使用该写法，防止拿取不到 tagsViewList 列表数据不完整
-			}
+				let tagsViewList = await state.tagsViewList;
+				state.tagsRefsIndex = tagsViewList.findIndex((v: any) => {
+					if (getThemeConfig.value.isShareTagsView) {
+						return v.path === path;
+					} else {
+						return v.url === path;
+					}
+				});
+				// 添加初始化横向滚动条移动到对应位置
+				tagsViewmoveToCurrentTag();
+			});
 		};
 		// 设置 tagsView 可以进行拖拽
 		const initSortable = () => {
@@ -335,11 +432,6 @@ export default {
 			else getThemeConfig.value.isSortableTagsView = true;
 			initSortable();
 		};
-		// 监听路由的变化，动态赋值给 tagsView
-		watch(store.state, (val) => {
-			if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
-			getTagsViewRoutes();
-		});
 		// 页面加载前
 		onBeforeMount(() => {
 			// 初始化，防止手机端直接访问时还可以拖拽
@@ -354,6 +446,19 @@ export default {
 			proxy.mittBus.on('openOrCloseSortable', () => {
 				initSortable();
 			});
+			// 监听布局配置开启 TagsView 共用，为了演示还原默认值
+			proxy.mittBus.on('openShareTagsView', () => {
+				if (getThemeConfig.value.isShareTagsView) {
+					router.push('/home');
+					state.tagsViewList = [];
+					state.tagsViewRoutesList.map((v: any) => {
+						if (v.meta.isAffix && !v.meta.isHide) {
+							v.url = setTagsViewHighlight(v);
+							state.tagsViewList.push({ ...v });
+						}
+					});
+				}
+			});
 		});
 		// 页面卸载时
 		onUnmounted(() => {
@@ -361,6 +466,8 @@ export default {
 			proxy.mittBus.off('onCurrentContextmenuClick');
 			// 取消监听布局配置界面开启/关闭拖拽
 			proxy.mittBus.off('openOrCloseSortable');
+			// 取消监听布局配置开启 TagsView 共用
+			proxy.mittBus.off('openShareTagsView');
 			// 取消窗口 resize 监听
 			window.removeEventListener('resize', onSortableResize);
 		});
@@ -375,11 +482,16 @@ export default {
 			initSortable();
 		});
 		// 路由更新时
-		onBeforeRouteUpdate((to) => {
+		onBeforeRouteUpdate(async (to) => {
+			state.routeActive = setTagsViewHighlight(to);
 			state.routePath = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
-			addTagsView(to.path, to);
+			await addTagsView(to.path, to);
-			getTagsRefsIndex(to.path);
+			getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
-			tagsViewmoveToCurrentTag();
+		});
+		// 监听路由的变化，动态赋值给 tagsView
+		watch(store.state, (val) => {
+			if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
+			getTagsViewRoutes();
 		});
 		return {
 			isActive,
@@ -392,7 +504,6 @@ export default {
 			tagsUlRef,
 			onHandleScroll,
 			getThemeConfig,
-			isCurrenFullscreen,
 			setTagsStyle,
 			refreshCurrentTagsView,
 			closeCurrentTagsView,

src/layout/routerView/parent.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, toRefs, reactive, getCurrentInstance, onBeforeMount, onUnmounted, nextTick } from 'vue';
+import { computed, defineComponent, toRefs, reactive, getCurrentInstance, onBeforeMount, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
 export default defineComponent({
@@ -40,19 +40,11 @@ export default defineComponent({
 		// 页面加载前，处理缓存，页面刷新时路由缓存处理
 		onBeforeMount(() => {
 			state.keepAliveNameList = getKeepAliveNames.value;
-			proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
+			proxy.mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
-				// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
-				if (route.meta.isDynamic) {
-					// 动态路由（xxx/:id/:name）
-					if (route.meta.isDynamicPath !== path) return false;
-				} else {
-					// 普通路由
-					if (route.path !== path) return false;
-				}
 				state.keepAliveNameList = getKeepAliveNames.value.filter((name: string) => route.name !== name);
-				state.refreshRouterViewKey = route.meta.isDynamic ? route.meta.isDynamicPath : route.path;
+				state.refreshRouterViewKey = null;
 				nextTick(() => {
-					state.refreshRouterViewKey = null;
+					state.refreshRouterViewKey = fullPath;
 					state.keepAliveNameList = getKeepAliveNames.value;
 				});
 			});
@@ -61,6 +53,13 @@ export default defineComponent({
 		onUnmounted(() => {
 			proxy.mittBus.off('onTagsViewRefreshRouterView');
 		});
+		// 监听路由变化，防止 tagsView 多标签时，切换动画消失
+		watch(
+			() => route.fullPath,
+			() => {
+				state.refreshRouterViewKey = route.fullPath;
+			}
+		);
 		return {
 			getThemeConfig,
 			getKeepAliveNames,

src/store/interface/index.ts

@@ -34,6 +34,7 @@ export interface ThemeConfigState {
 		isTagsviewIcon: boolean;
 		isCacheTagsView: boolean;
 		isSortableTagsView: boolean;
+		isShareTagsView: boolean;
 		isFooter: boolean;
 		isGrayscale: boolean;
 		isInvert: boolean;
@@ -65,7 +66,7 @@ export interface KeepAliveNamesState {
 // TagsView 路由列表
 export interface TagsViewRoutesState {
 	tagsViewRoutes: Array<object>;
-	isCurrenFullscreen: boolean;
+	isTagsViewCurrenFull: Boolean;
 }
 
 // 用户信息

src/store/modules/tagsViewRoutes.ts

@@ -1,7 +1,4 @@
 import { Module } from 'vuex';
-import { ElMessage } from 'element-plus';
-import screenfull from 'screenfull';
-import { Local } from '/@/utils/storage';
 // 此处加上 `.ts` 后缀报错，具体原因不详
 import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
 
@@ -9,7 +6,7 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 	namespaced: true,
 	state: {
 		tagsViewRoutes: [],
-		isCurrenFullscreen: false,
+		isTagsViewCurrenFull: false,
 	},
 	mutations: {
 		// 设置 TagsView 路由
@@ -17,8 +14,8 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 			state.tagsViewRoutes = data;
 		},
 		// 设置卡片全屏
-		getCurrenFullscreen(state: any, data: boolean) {
+		getCurrenFullscreen(state: any, bool: boolean) {
-			state.isCurrenFullscreen = data;
+			state.isTagsViewCurrenFull = bool;
 		},
 	},
 	actions: {
@@ -27,34 +24,8 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 			commit('getTagsViewRoutes', data);
 		},
 		// 设置卡片全屏
-		setCurrenFullscreen({ commit }, timeout: number = 0) {
+		setCurrenFullscreen({ commit }, bool: Boolean) {
-			const screenfulls: any = screenfull;
+			commit('getCurrenFullscreen', bool);
-			if (!screenfulls.isEnabled) {
-				ElMessage.warning('暂不不支持全屏');
-				return false;
-			}
-			setTimeout(() => {
-				const currenFullscreenChange = () => {
-					const layoutViewBgWhite = document.querySelector('.layout-view-bg-white') as HTMLElement;
-					if (screenfulls.isFullscreen) {
-						commit('getCurrenFullscreen', true);
-						// 设置全屏时，设置有 `layout-view-bg-white` 类的高度
-						if (layoutViewBgWhite) layoutViewBgWhite.style.height = `calc(100vh - 30px)`;
-					} else {
-						screenfulls.off('change', currenFullscreenChange);
-						commit('getCurrenFullscreen', false);
-						if (!layoutViewBgWhite) return false;
-						const getThemeConfig = Local.get('themeConfig');
-						if (getThemeConfig) {
-							let { isTagsview } = getThemeConfig;
-							if (isTagsview) layoutViewBgWhite.style.height = `calc(100vh - 114px)`;
-							else layoutViewBgWhite.style.height = `calc(100vh - 80px)`;
-						}
-					}
-				};
-				screenfulls.on('change', currenFullscreenChange);
-				screenfulls.toggle();
-			}, timeout);
 		},
 	},
 };

src/store/modules/themeConfig.ts

@@ -91,6 +91,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			isCacheTagsView: false,
 			// 是否开启 TagsView 拖拽
 			isSortableTagsView: true,
+			// 是否开启 TagsView 共用
+			isShareTagsView: false,
 			// 是否开启 Footer 底部版权信息
 			isFooter: false,
 			// 是否开启灰色模式

src/theme/app.scss

@@ -54,7 +54,7 @@ body,
 	.el-scrollbar {
 		width: 100%;
 	}
-	// 此字段多次用到，不可删除，如需修改，请重写覆盖样式
+	// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
 	.layout-view-bg-white {
 		background: white;
 		width: 100%;

src/utils/arrayOperation.ts

@@ -14,3 +14,28 @@ export function judementSameArr(news: Array<string>, old: Array<string>): boolea
 	}
 	return count === leng ? true : false;
 }
+
+/**
+ * 判断两个对象是否相同
+ * @param a 要比较的对象一
+ * @param b 要比较的对象二
+ * @returns 相同返回 true，反之则反
+ */
+export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
+	if (!a || !b) return false;
+	let aProps = Object.getOwnPropertyNames(a);
+	let bProps = Object.getOwnPropertyNames(b);
+	if (aProps.length != bProps.length) return false;
+	for (let i = 0; i < aProps.length; i++) {
+		let propName = aProps[i];
+		let propA = a[propName];
+		let propB = b[propName];
+		if (!b.hasOwnProperty(propName)) return false;
+		if (propA instanceof Object) {
+			if (!isObjectValueEqual(propA, propB)) return false;
+		} else if (propA !== propB) {
+			return false;
+		}
+	}
+	return true;
+}

src/views/chart/index.vue

@@ -202,7 +202,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted, getCurrentInstance } from 'vue';
+import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick } from 'vue';
 import { useStore } from '/@/store/index';
 import ChartHead from '/@/views/chart/head.vue';
 import * as echarts from 'echarts';
@@ -220,6 +220,7 @@ export default {
 			dBtnList,
 			chartData4List,
 			earth3DBtnList,
+			myCharts: [],
 		});
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {
@@ -286,9 +287,7 @@ export default {
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 初始化近7天产品追溯扫码统计
 		const initChartsSevenDays = () => {
@@ -333,9 +332,7 @@ export default {
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 初始化近30天预警总数
 		const initChartsWarning = () => {
@@ -370,9 +367,7 @@ export default {
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 初始化当前设备监测
 		const initChartsMonitor = () => {
@@ -412,9 +407,7 @@ export default {
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 初始化近7天投入品记录
 		const initChartsInvestment = () => {
@@ -444,8 +437,14 @@ export default {
 				],
 			};
 			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
 			window.addEventListener('resize', () => {
-				myChart.resize();
+				for (let i = 0; i < state.myCharts.length; i++) {
+					state.myCharts[i].resize();
+				}
 			});
 		};
 		// 页面加载时
@@ -455,7 +454,19 @@ export default {
 			initChartsWarning();
 			initChartsMonitor();
 			initChartsInvestment();
+			initEchartsResize();
 		});
+		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+		watch(
+			() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
+			() => {
+				nextTick(() => {
+					for (let i = 0; i < state.myCharts.length; i++) {
+						state.myCharts[i].resize();
+					}
+				});
+			}
+		);
 		return {
 			initTagViewHeight,
 			...toRefs(state),

src/views/fun/tagsView/index.vue

@@ -1,28 +1,10 @@
 <template>
 	<div class="fun-tagsview">
-		<el-card shadow="hover" header="tagsView 非当前页演示">
+		<NoticeBar
-			<el-form :model="formInline" size="small" label-width="40px" class="tags-view-form">
+			text="已删除非当前页 tagsView 演示，后续有时间可以再加回来！，tagsview 支持多标签（参数不同）、单标签共用（参数不同）"
-				<el-row :gutter="35">
+			background="#ecf5ff"
-					<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4" class="tags-view-form-col">
+			color="#409eff"
-						<el-form-item label="功能">
+		/>
-							<el-select v-model="formInline.selectId" placeholder="请选择" class="w100">
-								<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4" class="tags-view-form-col">
-						<el-form-item label="路径">
-							<el-input v-model="formInline.path" placeholder="路径如：/fun/tagsView"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="4">
-						<el-form-item class="fun-tagsview-from-item">
-							<el-button type="primary" @click="onImplementClick" icon="el-icon-thumb">点击执行</el-button>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-		</el-card>
 		<el-card shadow="hover" header="tagsView 当前页演示" class="mt15">
 			<div class="flex-warp">
 				<div class="flex-warp-item">
@@ -57,82 +39,35 @@
 
 <script lang="ts">
 import { getCurrentInstance, reactive, toRefs } from 'vue';
+import NoticeBar from '/@/components/noticeBar/index.vue';
 import { useRoute } from 'vue-router';
 export default {
 	name: 'funTagsView',
+	components: { NoticeBar },
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
-		const state = reactive({
+		const state = reactive({});
-			formInline: {
-				path: '',
-				selectId: 0,
-			},
-			selectOptions: [
-				{
-					value: 0,
-					label: '刷新当前',
-				},
-				{
-					value: 1,
-					label: '关闭当前',
-				},
-				{
-					value: 2,
-					label: '关闭其它',
-				},
-				{
-					value: 3,
-					label: '关闭全部',
-				},
-				{
-					value: 4,
-					label: '当前页全屏',
-				},
-			],
-		});
 		// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
 		// 1、刷新当前 tagsView
 		const refreshCurrentTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 0, ...route }));
-				id: 0,
-				path: route.path,
-			});
 		};
 		// 2、关闭当前 tagsView
 		const closeCurrentTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 1, ...route }));
-				id: 1,
-				path: route.path,
-			});
 		};
 		// 3、关闭其它 tagsView
 		const closeOtherTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 2, ...route }));
-				id: 2,
-				path: route.path,
-			});
 		};
 		// 4、关闭全部 tagsView
 		const closeAllTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 3, ...route }));
-				id: 3,
-				path: route.path,
-			});
 		};
 		// 5、开启当前页面全屏
 		const openCurrenFullscreen = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', {
+			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 4, ...route }));
-				id: 4,
-				path: route.path,
-			});
-		};
-		// 执行点击
-		const onImplementClick = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', {
-				id: state.formInline.selectId,
-				path: state.formInline.path,
-			});
 		};
 		return {
 			refreshCurrentTagsView,
@@ -140,7 +75,6 @@ export default {
 			closeOtherTagsView,
 			closeAllTagsView,
 			openCurrenFullscreen,
-			onImplementClick,
 			...toRefs(state),
 		};
 	},

src/views/home/index.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance } from 'vue';
+import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance, watch } from 'vue';
 import * as echarts from 'echarts';
 import { CountUp } from 'countup.js';
 import { formatAxis } from '/@/utils/formatTime';
@@ -130,6 +130,7 @@ export default {
 					},
 				],
 			},
+			myCharts: [],
 		});
 		// 获取用户信息 vuex
 		const getUserInfos = computed(() => {
@@ -234,9 +235,7 @@ export default {
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 履约超时预警
 		const initHomeOvertime = () => {
@@ -288,8 +287,14 @@ export default {
 				],
 			};
 			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
 			window.addEventListener('resize', () => {
-				myChart.resize();
+				for (let i = 0; i < state.myCharts.length; i++) {
+					state.myCharts[i].resize();
+				}
 			});
 		};
 		// 页面加载时
@@ -297,7 +302,19 @@ export default {
 			initNumCountUp();
 			initHomeLaboratory();
 			initHomeOvertime();
+			initEchartsResize();
 		});
+		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+		watch(
+			() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
+			() => {
+				nextTick(() => {
+					for (let i = 0; i < state.myCharts.length; i++) {
+						state.myCharts[i].resize();
+					}
+				});
+			}
+		);
 		return {
 			getUserInfos,
 			currentTime,

src/views/login/index.vue

@@ -120,7 +120,7 @@ export default {
 			position: absolute;
 			top: 0;
 			right: 0;
-			width: 51px;
+			width: 50px;
 			height: 50px;
 			overflow: hidden;
 			cursor: pointer;
@@ -134,19 +134,22 @@ export default {
 				border-bottom: 50px solid #ffffff;
 				border-right: 50px solid transparent;
 				z-index: 2;
+				top: 0;
+				right: 0;
 			}
 			&:hover {
 				opacity: 1;
 				transition: all ease 0.3s;
+				color: var(--color-primary);
 			}
 			i {
 				content: '';
-				width: 50px;
+				width: 48px;
 				height: 50px;
 				position: absolute;
-				top: -2px;
+				top: 0px;
 				right: 0px;
-				font-size: 50px;
+				font-size: 47px;
 				z-index: 1;
 			}
 		}

src/views/params/common/index.vue

@@ -1,9 +1,10 @@
 <template>
 	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
 		<div class="flex-margin">
-			<el-result icon="success" title="普通路由" subTitle="请根据提示进行操作">
+			<el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
 				<template #extra>
-					<el-button type="primary" size="small" icon="iconfont icon-putong" @click="onGoDetailsClick">点击测试普通路由传参</el-button>
+					<el-input v-model="value" placeholder="请输入路由参数id值" clearable></el-input>
+					<el-button type="primary" size="small" icon="iconfont icon-putong" class="mt15" @click="onGoDetailsClick">普通路由传参</el-button>
 				</template>
 			</el-result>
 		</div>
@@ -18,7 +19,9 @@ export default defineComponent({
 	name: 'paramsCommon',
 	setup() {
 		const store = useStore();
-		const state = reactive({});
+		const state = reactive({
+			value: '',
+		});
 		const router = useRouter();
 		// 设置 view 的高度
 		const setViewHeight = computed(() => {
@@ -30,11 +33,9 @@ export default defineComponent({
 		const onGoDetailsClick = () => {
 			router.push({
 				path: '/params/common/details',
-				query: {
+				query: { id: state.value, name: 'vue-next-admin' },
-					t: new Date().getTime(),
-					id: Math.random(),
-				},
 			});
+			state.value = '';
 		};
 		return {
 			setViewHeight,

src/views/params/dynamic/index.vue

@@ -1,9 +1,10 @@
 <template>
 	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
 		<div class="flex-margin">
-			<el-result icon="warning" title="动态路由" subTitle="请根据提示进行操作">
+			<el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
 				<template #extra>
-					<el-button type="primary" size="small" icon="iconfont icon-dongtai" @click="onGoDetailsClick">点击测试动态路由传参</el-button>
+					<el-input v-model="value" placeholder="请输入路由参数id值" clearable></el-input>
+					<el-button type="primary" size="small" icon="iconfont icon-dongtai" class="mt15" @click="onGoDetailsClick">动态路由传参</el-button>
 				</template>
 			</el-result>
 		</div>
@@ -18,7 +19,9 @@ export default defineComponent({
 	name: 'paramsDynamic',
 	setup() {
 		const store = useStore();
-		const state = reactive({});
+		const state = reactive({
+			value: '',
+		});
 		const router = useRouter();
 		// 设置 view 的高度
 		const setViewHeight = computed(() => {
@@ -29,15 +32,14 @@ export default defineComponent({
 		// 跳转到详情
 		const onGoDetailsClick = () => {
 			// name 值为路由中的 name
-			const t = new Date().getTime();
-			const id = Math.random();
 			router.push({
 				name: 'paramsDynamicDetails',
 				params: {
-					t,
+					t: 'vue-next-admin',
-					id,
+					id: state.value,
 				},
 			});
+			state.value = '';
 		};
 		return {
 			setViewHeight,

src/views/visualizing/demo1.vue

@@ -106,6 +106,7 @@ export default defineComponent({
 				txt: '',
 				fun: 0,
 			},
+			myCharts: [],
 		});
 		// 初始化时间
 		const initTime = () => {
@@ -233,9 +234,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 
 			// 地图
 			const map = myChart.getModel().getComponent('bmap').getBMap();
@@ -355,9 +354,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// A级风景区对比
 		const initVisualizingContentLeftBottom = () => {
@@ -473,9 +470,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 游客过夜情况
 		const initVisualizingContentCenterTop = () => {
@@ -603,9 +598,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 游客驻留时长
 		const initVisualizingContentCenterBottom = () => {
@@ -702,9 +695,7 @@ export default defineComponent({
 				},
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 当日游客趋势分析
 		const initVisualizingContentRightTop = () => {
@@ -839,9 +830,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 当月游客趋势分析
 		const initVisualizingContentRightBottom = () => {
@@ -923,20 +912,27 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
+			state.myCharts.push(myChart);
+		};
+		// 批量设置 echarts resize
+		const initEchartsResize = () => {
 			window.addEventListener('resize', () => {
-				myChart.resize();
+				for (let i = 0; i < state.myCharts.length; i++) {
+					state.myCharts[i].resize();
+				}
 			});
 		};
 		// 页面加载时
-		onMounted(() => {
+		onMounted(async () => {
 			initTime();
-			initEchartsMap();
+			await initEchartsMap();
-			initVisualizingContentLeftTop();
+			await initVisualizingContentLeftTop();
-			initVisualizingContentLeftBottom();
+			await initVisualizingContentLeftBottom();
-			initVisualizingContentCenterTop();
+			await initVisualizingContentCenterTop();
-			initVisualizingContentCenterBottom();
+			await initVisualizingContentCenterBottom();
-			initVisualizingContentRightTop();
+			await initVisualizingContentRightTop();
-			initVisualizingContentRightBottom();
+			await initVisualizingContentRightBottom();
+			await initEchartsResize();
 		});
 		// 页面卸载时
 		onUnmounted(() => {

src/views/visualizing/demo2.vue

@@ -253,6 +253,7 @@ export default defineComponent({
 			dBtnActive: 0,
 			earth3DBtnList,
 			chartData4List,
+			myCharts: [],
 		});
 		// 初始化时间
 		const initTime = () => {
@@ -291,9 +292,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 当前设备监测
 		const initRightChartData4 = () => {
@@ -381,9 +380,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 近7天产品追溯扫码统计
 		const initRightChartData3 = () => {
@@ -462,9 +459,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 当前任务统计
 		const initRightChartData6 = () => {
@@ -478,7 +473,7 @@ export default defineComponent({
 				},
 				grid: {
 					top: 20,
-					right: 42,
+					right: 50,
 					bottom: 0,
 					left: 80,
 				},
@@ -508,7 +503,7 @@ export default defineComponent({
 						data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'],
 						axisLabel: {
 							color: '#A7D6F4',
-							fontSize: 10,
+							fontSize: 12,
 						},
 					},
 				],
@@ -516,12 +511,12 @@ export default defineComponent({
 					{
 						name: '标准化',
 						type: 'bar',
-						barWidth: 12, // 柱子宽度
+						barWidth: 10, // 柱子宽度
 						label: {
 							show: true,
 							position: 'right', // 位置
 							color: '#A7D6F4',
-							fontSize: 10,
+							fontSize: 12,
 							distance: 15, // 距离
 							formatter: '{c}%', // 这里是数据展示的时候显示的数据
 						}, // 柱子上方的数值
@@ -551,9 +546,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 近7天投入品记录
 		const initRightChartData2 = () => {
@@ -686,9 +679,7 @@ export default defineComponent({
 				],
 			};
 			myChart.setOption(option);
-			window.addEventListener('resize', () => {
+			state.myCharts.push(myChart);
-				myChart.resize();
-			});
 		};
 		// 3DEarth 地图
 		const init3DEarth = (globeRadius) => {
@@ -751,7 +742,7 @@ export default defineComponent({
 			myChart.setOption(option);
 		};
 		// 监听地球大小变化
-		const initAddEventListener3DEarthFun = () => {
+		const initAddEventListener3DEarth = () => {
 			let w = document.body.clientWidth;
 			let globeRadius = 0;
 			if (w >= 1920) globeRadius = 100;
@@ -761,22 +752,25 @@ export default defineComponent({
 			else if (w < 768) globeRadius = 20;
 			init3DEarth(globeRadius);
 		};
-		// 监听地球大小变化
+		// 批量设置 echarts resize
-		const initAddEventListener3DEarth = () => {
+		const initEchartsResize = () => {
-			initAddEventListener3DEarthFun();
+			initAddEventListener3DEarth();
 			window.addEventListener('resize', () => {
-				initAddEventListener3DEarthFun();
+				for (let i = 0; i < state.myCharts.length; i++) {
+					state.myCharts[i].resize();
+				}
+				initAddEventListener3DEarth();
 			});
 		};
 		// 页面加载时
-		onMounted(() => {
+		onMounted(async () => {
-			initAddEventListener3DEarth();
 			initTime();
-			initRightChartData1();
+			await initRightChartData1();
-			initRightChartData4();
+			await initRightChartData4();
-			initRightChartData3();
+			await initRightChartData3();
-			initRightChartData2();
+			await initRightChartData2();
-			initRightChartData6();
+			await initRightChartData6();
+			await initEchartsResize();
 		});
 		// 页面卸载时
 		onUnmounted(() => {
@@ -841,7 +835,7 @@ export default defineComponent({
 				left: 50%;
 				transform: translateX(-50%);
 				border: 1px transparent solid;
-				border-image: linear-gradient(to right, #000718, #43bdf0) 1 10;
+				border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
 			}
 			span {
 				cursor: pointer;