'admin-23.04.12:同步vue-next-admin-template分支版本内容'

CHANGELOG.md

@@ -1,6 +1,12 @@
 # <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">vue-next-admin-template-js（不带国际化） 更新日志</a>
 
-🎉🎉🔥 `vue-next-admin-template-js` 基于 （vue-next-admin-template v2.4.32 版本） vue3.x 、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
+🎉🎉🔥 `vue-next-admin-template-js` 基于 （vue-next-admin-template v2.4.33 版本） vue3.x 、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
+
+## 2.4.33
+
+`2023.04.12`
+
+- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.33 版本内容，具体查看 master 分支 CHANGELOG.md
 
 ## 2.4.32
 

README.md

@@ -26,7 +26,7 @@
 	<img src="./src/assets/ccflowRightNextAdmin.png" width="50%" height="70px">
 </a>
 
-#### 🌈 介绍 基础版 js（不带国际化，基于 vue-next-admin-template V2.4.32 版，setup 语法糖）
+#### 🌈 介绍 基础版 js（不带国际化，基于 vue-next-admin-template V2.4.33 版，setup 语法糖）
 
 基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin-template-js",
-	"version": "2.4.32",
+	"version": "2.4.33",
 	"description": "vue3 vite next admin template js setup",
 	"author": "lyt_20201208",
 	"license": "MIT",
@@ -11,13 +11,13 @@
 	},
 	"dependencies": {
 		"@element-plus/icons-vue": "^2.1.0",
-		"axios": "^1.3.4",
+		"axios": "^1.3.5",
 		"echarts": "^5.4.2",
-		"element-plus": "^2.3.1",
+		"element-plus": "^2.3.3",
 		"js-cookie": "^3.0.1",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
-		"pinia": "^2.0.33",
+		"pinia": "^2.0.34",
 		"qrcodejs2-fixes": "^0.0.2",
 		"screenfull": "^6.0.2",
 		"sortablejs": "^1.15.0",
@@ -30,15 +30,15 @@
 	"devDependencies": {
 		"@vitejs/plugin-vue": "^4.1.0",
 		"@vue/compiler-sfc": "^3.2.47",
-		"eslint": "^8.36.0",
+		"eslint": "^8.38.0",
 		"eslint-plugin-vue": "^9.10.0",
 		"prettier": "^2.8.7",
-		"sass": "^1.60.0",
+		"sass": "^1.62.0",
 		"vite": "^4.2.1",
 		"vite-plugin-cdn-import": "^0.3.5",
 		"vite-plugin-compression": "^0.5.1",
 		"vite-plugin-vue-setup-extend-plus": "^0.1.0",
-		"vue-eslint-parser": "^9.1.0"
+		"vue-eslint-parser": "^9.1.1"
 	},
 	"browserslist": [
 		"> 1%",

src/App.vue

@@ -23,8 +23,8 @@ import mittBus from './utils/mitt';
 
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
-const Setings = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/setings.vue'));
-const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/closeFull.vue'));
+const Setings = defineAsyncComponent(() => import('/@/layout/navBars/topBar/setings.vue'));
+const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/topBar/closeFull.vue'));
 const Upgrade = defineAsyncComponent(() => import('/@/layout/upgrade/index.vue'));
 const Sponsors = defineAsyncComponent(() => import('/@/layout/sponsors/index.vue'));
 

src/layout/component/aside.vue

@@ -152,4 +152,11 @@ watch(
 		deep: true,
 	}
 );
+// 监听用户权限切换，用于演示 `权限管理 -> 前端控制 -> 页面权限` 权限切换不生效
+watch(
+	() => routesList.value,
+	() => {
+		setFilterRoutes();
+	}
+);
 </script>

src/layout/component/columnsAside.vue

@@ -126,15 +126,19 @@ const onColumnsAsideDown = (k) => {
 		setColumnsAsideMove(k);
 	});
 };
+// 设置只有一个路由时设置自动收起菜单
+// https://gitee.com/lyt-top/vue-next-admin/issues/I6UW2I
+const setMenuAutoCollaps = (path) => {
+	const resData = setSendChildren(path);
+	// https://gitee.com/lyt-top/vue-next-admin/issues/I6HW7H
+	resData.children.length <= 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false);
+	return resData;
+};
 // 设置/过滤路由（非静态路由/是否显示在菜单中）
 const setFilterRoutes = () => {
 	state.columnsAsideList = filterRoutesFun(routesList.value);
-	const resData = setSendChildren(route.path);
-	if (Object.keys(resData).length <= 0) return false;
+	const resData = setMenuAutoCollaps(route.path);
 	onColumnsAsideDown(resData.item?.k);
-	// 刷新时，初始化一个路由设置自动收起菜单
-	// https://gitee.com/lyt-top/vue-next-admin/issues/I6HW7H
-	resData.children.length <= 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false);
 	// 延迟 500 毫秒更新，防止 aside.vue 组件 setSendColumnsChildren 还没有注册
 	setTimeout(() => {
 		mittBus.emit('setSendColumnsChildren', resData);
@@ -191,8 +195,9 @@ onUnmounted(() => {
 });
 // 路由更新时
 onBeforeRouteUpdate((to) => {
+	const resData = setMenuAutoCollaps(to.path);
 	setColumnsMenuHighlight(to.path);
-	mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
+	mittBus.emit('setSendColumnsChildren', resData);
 });
 // 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
 watch(

src/layout/navBars/index.vue

@@ -11,7 +11,7 @@ import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 
 // 引入组件
-const BreadcrumbIndex = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/index.vue'));
+const BreadcrumbIndex = defineAsyncComponent(() => import('/@/layout/navBars/topBar/index.vue'));
 const TagsView = defineAsyncComponent(() => import('/@/layout/navBars/tagsView/tagsView.vue'));
 
 // 定义变量内容

src/layout/navBars/topBar/index.vue

@@ -16,8 +16,8 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 import mittBus from '/@/utils/mitt';
 
 // 引入组件
-const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
-const User = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/user.vue'));
+const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/topBar/breadcrumb.vue'));
+const User = defineAsyncComponent(() => import('/@/layout/navBars/topBar/user.vue'));
 const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
 const Horizontal = defineAsyncComponent(() => import('/@/layout/navMenu/horizontal.vue'));
 

src/layout/navBars/topBar/user.vue

@@ -20,20 +20,25 @@
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
 			<i class="icon-skin iconfont" title="布局配置"></i>
 		</div>
-		<div class="layout-navbars-breadcrumb-user-icon">
-			<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
-				<template #reference>
-					<el-badge :is-dot="true">
-						<el-icon title="消息">
-							<ele-Bell />
-						</el-icon>
-					</el-badge>
-				</template>
-				<template #default>
-					<UserNews />
-				</template>
-			</el-popover>
+		<div class="layout-navbars-breadcrumb-user-icon" ref="userNewsBadgeRef" v-click-outside="onUserNewsClick">
+			<el-badge :is-dot="true">
+				<el-icon title="消息">
+					<ele-Bell />
+				</el-icon>
+			</el-badge>
 		</div>
+		<el-popover
+			ref="userNewsRef"
+			:virtual-ref="userNewsBadgeRef"
+			placement="bottom"
+			trigger="click"
+			transition="el-zoom-in-top"
+			virtual-triggering
+			:width="300"
+			:persistent="false"
+		>
+			<UserNews />
+		</el-popover>
 		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
 			<i
 				class="iconfont"
@@ -64,9 +69,9 @@
 </template>
 
 <script setup name="layoutBreadcrumbUser">
-import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
+import { defineAsyncComponent, ref, unref, computed, reactive, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { ElMessageBox, ElMessage } from 'element-plus';
+import { ElMessageBox, ElMessage, ClickOutside as vClickOutside } from 'element-plus';
 import screenfull from 'screenfull';
 import { storeToRefs } from 'pinia';
 import { useUserInfo } from '/@/stores/userInfo';
@@ -75,10 +80,12 @@ import mittBus from '/@/utils/mitt';
 import { Session, Local } from '/@/utils/storage';
 
 // 引入组件
-const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
-const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
+const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/topBar/userNews.vue'));
+const Search = defineAsyncComponent(() => import('/@/layout/navBars/topBar/search.vue'));
 
 // 定义变量内容
+const userNewsRef = ref();
+const userNewsBadgeRef = ref();
 const router = useRouter();
 const stores = useUserInfo();
 const storesThemeConfig = useThemeConfig();
@@ -111,6 +118,10 @@ const onScreenfullClick = () => {
 		else state.isScreenfull = false;
 	});
 };
+// 消息通知点击时
+const onUserNewsClick = () => {
+	unref(userNewsRef).popperRef?.delayHide?.();
+};
 // 布局配置 icon 点击时
 const onLayoutSetingClick = () => {
 	mittBus.emit('openSetingsDrawer');

src/router/backEnd.js

@@ -52,7 +52,7 @@ export async function initBackEndControlRoutes() {
 	// 添加动态路由
 	await setAddRoute();
 	// 设置路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
-	await setFilterMenuAndCacheTagsViewRoutes();
+	setFilterMenuAndCacheTagsViewRoutes();
 }
 
 /**

src/router/frontEnd.js

@@ -31,7 +31,7 @@ export async function initFrontEndControlRoutes() {
 	// 添加动态路由
 	await setAddRoute();
 	// 设置递归过滤有权限的路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
-	await setFilterMenuAndCacheTagsViewRoutes();
+	setFilterMenuAndCacheTagsViewRoutes();
 }
 
 /**

src/stores/themeConfig.js

@@ -121,7 +121,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 
 			/**
 			 * 布局切换
-			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
+			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/topBar/setings.vue
 			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
 			 */
 			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults

src/theme/element.scss

@@ -188,6 +188,18 @@
 		color: var(--next-bg-topBarColor);
 	}
 }
+// 菜单收起时，图标不居中问题
+.el-menu--collapse {
+	.el-menu-item .iconfont,
+	.el-sub-menu .iconfont,
+	.el-menu-item .fa,
+	.el-sub-menu .fa {
+		margin-right: 0 !important;
+	}
+	.el-sub-menu__title {
+		padding-right: 0 !important;
+	}
+}
 
 /* Tabs 标签页
 ------------------------------- */

vite.config.js

@@ -47,11 +47,11 @@ const viteConfig = defineConfig((mode) => {
 					assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
 					manualChunks(id) {
 						if (id.includes('node_modules')) {
-							return id.toString().split('node_modules/')[1].split('/')[0].toString();
+							return id.toString().match(/\/node_modules\/(?!.pnpm)(?<moduleName>[^\/]*)\//).groups.moduleName ?? 'vender';
 						}
 					},
 				},
-				external: JSON.parse(env.VITE_OPEN_CDN) ? buildConfig.external : [],
+				...(JSON.parse(env.VITE_OPEN_CDN) ? { external: buildConfig.external } : {}),
 			},
 		},
 		css: { preprocessorOptions: { css: { charset: false } } },