'admin-22.04.20:修复开启Tagsview图标、router.push路径找不到时报错问题'

CHANGELOG.md

@@ -14,6 +14,7 @@
 - 🎯 优化 图标选择器 [#I4YAHB](https://gitee.com/lyt-top/vue-next-admin/issues/I4YAHB)，感谢[@真有你的](https://gitee.com/sunliusen)
 - 🎯 优化 去掉开发环境 i18n 控制台警告，页面代码：[i18n/index.ts](https://gitee.com/lyt-top/vue-next-admin/blob/master/src/i18n/index.ts)
 - 🎯 优化 登录页添加 `NextLoading.start()` 方法，防止第一次进入界面时出现短暂空白
+- 🎯 优化 `SvgIcon` 组件，防止 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题
 - 🎉 新增 [vuex](https://vuex.vuejs.org/) 替换成 [pinia](https://pinia.vuejs.org/getting-started.html)
 - 🎉 新增 tagsView 支持自定义 tagsView 名称（文章详情时有用），前往体验：[路由参数/普通路由](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)
 - 🐞 修复 适配 `"element-plus": "^2.1.9"` 版本
@@ -23,6 +24,8 @@
 - 🐞 修复 [vuex 里面改了颜色 但是不生效 #I4WFMA](https://gitee.com/lyt-top/vue-next-admin/issues/I4WFMA)
 - 🐞 修复 全局主题 primary 清空颜色后报错，[#I4X0LG](https://gitee.com/lyt-top/vue-next-admin/issues/I4X0LG)，感谢[面向 BUG 编程](https://gitee.com/fhtfy)
 - 🐞 修复 [.eslintrc.js 文件 rules 标签名错误 #I53IPK](https://gitee.com/lyt-top/vue-next-admin/issues/I53IPK)，感谢[yuyong1566](https://gitee.com/yuyong1566)
+- 🐞 修复 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题
+- 🐞 修复 `router.push` 路径找不到时报错问题，`404、401 界面` 已移入到 `main` 主布局里（之前全屏）
 
 ## 2.0.2
 

src/components/svgIcon/index.vue

@@ -1,15 +1,17 @@
+<template>
+	<div class="svg-icon-container">
+		<i v-if="isShowIconSvg" class="el-icon" :style="setIconSvgStyle">
+			<component :is="getIconName" />
+		</i>
+		<img v-else-if="isShowIconImg" :src="getIconName" :style="setIconImgStyle" />
+		<i v-else :class="getIconName" :style="setIconSvgStyle" />
+	</div>
+</template>
+
 <script lang="ts">
-// 渲染函数：https://v3.cn.vuejs.org/guide/render-function.html
-import { h, resolveComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
-// 定义接口来定义对象的类型
-interface SvgIconProps {
-	name: string;
-	size: number;
-	color: string;
-}
-
-export default {
+export default defineComponent({
 	name: 'svgIcon',
 	props: {
 		// svg 图标组件名字
@@ -26,17 +28,43 @@ export default {
 			type: String,
 		},
 	},
-	setup(props: SvgIconProps) {
-		// 定义变量
-		const linesString: any[] = ['https', 'http', '/src', '/assets', import.meta.env.VITE_PUBLIC_PATH];
-		const onLineStyle: string = `font-size: ${props.size}px;color: ${props.color}`;
-		const localsStyle: string = `width: ${props.size}px;height: ${props.size}px`;
-		const eleSetStyle = { class: 'el-icon', style: onLineStyle };
+	setup(props) {
+		// 在线链接、本地引入地址前缀
+		const linesString = ['https', 'http', '/src', '/assets', import.meta.env.VITE_PUBLIC_PATH];
 
-		// 逻辑判断
-		if (props.name?.startsWith('ele-')) return () => h('i', eleSetStyle, [props.name === 'ele-' ? '' : h(resolveComponent(props.name))]);
-		else if (linesString.find((str) => props.name?.startsWith(str))) return () => h('img', { src: props.name, style: localsStyle });
-		else return () => h('i', { class: props.name, style: onLineStyle });
+		// 获取 icon 图标名称
+		const getIconName = computed(() => {
+			return props?.name;
+		});
+		// 用于判断 element plus 自带 svg 图标的显示、隐藏
+		const isShowIconSvg = computed(() => {
+			return props?.name?.startsWith('ele-');
+		});
+		// 用于判断在线链接、本地引入等图标显示、隐藏
+		const isShowIconImg = computed(() => {
+			return linesString.find((str) => props.name?.startsWith(str));
+		});
+		// 设置图标样式
+		const setIconSvgStyle = computed(() => {
+			return `font-size: ${props.size}px;color: ${props.color};height: 100%;display: flex;align-items: center;`;
+		});
+		// 设置图片样式
+		const setIconImgStyle = computed(() => {
+			return `width: ${props.size}px;height: ${props.size}px`;
+		});
+		return {
+			getIconName,
+			isShowIconSvg,
+			isShowIconImg,
+			setIconSvgStyle,
+			setIconImgStyle,
+		};
 	},
-};
+});
 </script>
+
+<style scoped lang="scss">
+.svg-icon-container {
+	display: inline-block;
+}
+</style>

src/layout/navBars/tagsView/tagsView.vue

@@ -184,6 +184,7 @@ export default defineComponent({
 			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) return false;
 				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);
@@ -228,6 +229,7 @@ export default defineComponent({
 					if (state.tagsViewList.some((v: any) => v.path === path)) return false;
 					item = state.tagsViewRoutesList.find((v: any) => v.path === path);
 				}
+				if (!item) return false
 				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;

src/router/index.ts

@@ -25,13 +25,29 @@ const router = createRouter({
 });
 
 /**
- * 定义404界面
+ * 定义404、401界面
  * @link 参考：https://next.router.vuejs.org/zh/guide/essentials/history-mode.html#netlify
  */
-const pathMatch = {
-	path: '/:path(.*)*',
-	redirect: '/404',
-};
+const notFoundAndNoPower = [
+	{
+		path: '/:path(.*)*',
+		name: 'notFound',
+		component: () => import('/@/views/error/404.vue'),
+		meta: {
+			title: 'message.staticRoutes.notFound',
+			isHide: true,
+		},
+	},
+	{
+		path: '/401',
+		name: 'noPower',
+		component: () => import('/@/views/error/401.vue'),
+		meta: {
+			title: 'message.staticRoutes.noPower',
+			isHide: true,
+		},
+	},
+];
 
 /**
  * 路由多级嵌套数组处理成一维数组
@@ -168,7 +184,7 @@ export function setFilterRoute(chil: any) {
  */
 export function setFilterRouteEnd() {
 	let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
-	filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), { ...pathMatch }];
+	filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), ...notFoundAndNoPower];
 	return filterRouteEnd;
 }
 

src/router/route.ts

@@ -1145,22 +1145,6 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 			title: '登录',
 		},
 	},
-	{
-		path: '/404',
-		name: 'notFound',
-		component: () => import('/@/views/error/404.vue'),
-		meta: {
-			title: 'message.staticRoutes.notFound',
-		},
-	},
-	{
-		path: '/401',
-		name: 'noPower',
-		component: () => import('/@/views/error/401.vue'),
-		meta: {
-			title: 'message.staticRoutes.noPower',
-		},
-	},
 	/**
 	 * 提示：写在这里的为全屏界面，不建议写在这里
 	 * 请写在 `dynamicRoutes` 路由数组中

src/views/error/401.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="error">
+	<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
 		<div class="error-flex">
 			<div class="left">
 				<div class="left-item">
@@ -21,20 +21,38 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { Session } from '/@/utils/storage';
 
 export default defineComponent({
 	name: '401',
 	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const router = useRouter();
 		const onSetAuth = () => {
 			Session.clear();
 			router.push('/login');
 		};
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
 		return {
 			onSetAuth,
+			initTagViewHeight,
 		};
 	},
 });

src/views/error/404.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="error">
+	<div class="error layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
 		<div class="error-flex">
 			<div class="left">
 				<div class="left-item">
@@ -21,18 +21,36 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 
 export default defineComponent({
 	name: '404',
 	setup() {
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const router = useRouter();
 		const onGoHome = () => {
 			router.push('/');
 		};
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = themeConfig.value;
+			if (isTagsViewCurrenFull.value) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
 		return {
 			onGoHome,
+			initTagViewHeight,
 		};
 	},
 });