'admin-23.03.10:同步vue-next-admin-template分支v2.4.31版本内容'

2023-03-10 23:58:38 +08:00 · 2023-03-10 23:58:38 +08:00 · 9fe10aa2c0
parent 1e78522b9f
commit 9fe10aa2c0
14 changed files with 258 additions and 2344 deletions
--- a/CHANGELOG.md
+++ b/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.3 版本） vue3.x 、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
+🎉🎉🔥 `vue-next-admin-template-js` 基于 （vue-next-admin-template v2.4.31 版本） vue3.x 、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
+
+## 2.4.31
+
+`2023.03.10`
+
+- 🎉 同步 vue-next-admin-template 基础版本（不带国际化） 分支 v2.4.31 版本内容，具体查看 master 分支 CHANGELOG.md

 ## 2.4.3

--- a/README.md
+++ b/README.md
@ -26,7 +26,7 @@
 	<img src="./src/assets/ccflowRightNextAdmin.png" width="50%" height="70px">
 </a>

-#### 🌈 介绍 基础版 js（不带国际化，基于 vue-next-admin-template V2.4.3 版，setup 语法糖）
+#### 🌈 介绍 基础版 js（不带国际化，基于 vue-next-admin-template V2.4.31 版，setup 语法糖）

 基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。

@ -34,6 +34,7 @@

 - vue3.x 版本预览（vue-next-admin）<a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank">https://lyt-top.gitee.io/vue-next-admin-preview/#/login</a>
 - vue2.x 版本预览（vue-prev-admin）<a href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank">https://lyt-top.gitee.io/vue-prev-admin-preview/#/login</a>
+- vue3.x + uni-app 商城 H5（vue-next-admin-shop）<a href="https://lyt-top.gitee.io/vue-next-admin-shop-preview" target="_blank">https://lyt-top.gitee.io/vue-next-admin-shop-preview</a>

 #### 💒 代码仓库

@ -85,25 +86,11 @@ cnpm run build

 #### 💯 学习交流加 QQ 群

- 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。建议勿加多群，可能会误伤！微信群由于只有 `7天有效` 就不放这里了。
+> 1 - 4 交流群已满，请加 vue-next-admin 交流群 5

- 1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
- 2 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">766356862</a>
- 3 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">795345435</a>
- 4 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0gTFO04WwkeZZ6R4lju6gucbeXHK-wNd&jump_from=webapi">736626228</a>
+群号：556254895

-  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">
-  	<img src="https://img-blog.csdnimg.cn/35e00f12a3fe4820892ec630ca72f15f.png" width="220" height="220" alt="vue-next-admin 讨论群1" title="vue-next-admin 讨论群1"/>
-  </a>
-  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">
-  	<img src="https://img-blog.csdnimg.cn/5f1b548abd9f434eb41edde31d1c1fa9.png" width="220" height="220" alt="vue-next-admin 讨论群2" title="vue-next-admin 讨论群2"/>
-  </a>
-  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">
-  	<img src="https://img-blog.csdnimg.cn/70c8a012dd304246bddeac2184c4ab3a.png" width="220" height="220" alt="vue-next-admin 讨论群3" title="vue-next-admin 讨论群3"/>
-  </a>
-  <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0gTFO04WwkeZZ6R4lju6gucbeXHK-wNd&jump_from=webapi">
-  	<img src="https://img-blog.csdnimg.cn/e5c9704eed1342bc9d9e74b37203402d.png" width="220" height="220" alt="vue-next-admin 讨论群4" title="vue-next-admin 讨论群4"/>
-  </a>
+其它交流群请查看文档首页 [vueNextAdmin 解疑问](https://lyt-top.gitee.io/vue-next-admin-doc-preview/)

 #### 💒 集成后端

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin-template-js",
-	"version": "2.4.3",
+	"version": "2.4.31",
 	"description": "vue3 vite next admin template js setup",
 	"author": "lyt_20201208",
 	"license": "MIT",
@ -10,30 +10,30 @@
 		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
 	},
 	"dependencies": {
-		"@element-plus/icons-vue": "^2.0.10",
-		"axios": "^1.3.3",
+		"@element-plus/icons-vue": "^2.1.0",
+		"axios": "^1.3.4",
 		"echarts": "^5.4.1",
-		"element-plus": "^2.2.32",
+		"element-plus": "^2.2.36",
 		"js-cookie": "^3.0.1",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
-		"pinia": "^2.0.32",
+		"pinia": "^2.0.33",
 		"qrcodejs2-fixes": "^0.0.2",
 		"screenfull": "^6.0.2",
 		"sortablejs": "^1.15.0",
 		"vue": "^3.2.47",
 		"vue-clipboard3": "^2.0.0",
-		"qs": "^6.11.0",
+		"qs": "^6.11.1",
 		"vue-router": "^4.1.6"
 	},
 	"devDependencies": {
 		"@vitejs/plugin-vue": "^4.0.0",
 		"@vue/compiler-sfc": "^3.2.47",
-		"eslint": "^8.34.0",
+		"eslint": "^8.35.0",
 		"eslint-plugin-vue": "^9.9.0",
 		"prettier": "^2.8.4",
 		"sass": "^1.58.3",
-		"unplugin-auto-import": "^0.14.4",
+		"unplugin-auto-import": "^0.15.1",
 		"vite": "^4.1.4",
 		"vite-plugin-vue-setup-extend": "^0.4.0",
 		"vue-eslint-parser": "^9.1.0"
--- a/src/layout/main/classic.vue
+++ b/src/layout/main/classic.vue
@ -40,8 +40,7 @@ const initScrollBarHeight = () => {
 	nextTick(() => {
 		setTimeout(() => {
 			updateScrollbar();
-			// '!' not null 断言操作符，不执行运行时检查
-			layoutMainRef.value.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
+			if (layoutMainRef.value) layoutMainRef.value.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
 		}, 500);
 	});
 };
--- a/src/layout/navBars/breadcrumb/search.vue
+++ b/src/layout/navBars/breadcrumb/search.vue
@ -103,6 +103,7 @@ defineExpose({
 			display: none;
 		}
 		.el-dialog__footer {
+			width: 100%;
 			position: absolute;
 			left: 50%;
 			transform: translateX(-50%);
--- a/src/layout/navBars/breadcrumb/setings.vue
+++ b/src/layout/navBars/breadcrumb/setings.vue
@ -482,14 +482,16 @@ const onColumnsMenuBarGradualChange = () => {
 };
 // 2、菜单 / 顶栏 --> 背景渐变函数
 const setGraduaFun = (el, bool, color) => {
-	setTimeout(() => {
-		let els = document.querySelector(el);
-		if (!els) return false;
-		document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'));
-		if (bool) els.setAttribute('style', `background:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)}) !important;`);
-		else els.setAttribute('style', ``);
-		setLocalThemeConfig();
-	}, 200);
+	nextTick(() => {
+		setTimeout(() => {
+			let els = document.querySelector(el);
+			if (!els) return false;
+			document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'));
+			if (bool) els.setAttribute('style', `background:linear-gradient(to bottom , ${color}, ${getLightColor(color, 0.5)})`);
+			else els.setAttribute('style', ``);
+			setLocalThemeConfig();
+		}, 300);
+	});
 };
 // 2、分栏设置 ->
 const onColumnsMenuHoverPreloadChange = () => {
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@ -55,6 +55,7 @@ import pinia from '/@/stores/index';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useKeepALiveNames } from '/@/stores/keepAliveNames';
+import { useRoutesList } from '/@/stores/routesList';
 import { Session } from '/@/utils/storage';
 import { isObjectValueEqual } from '/@/utils/arrayOperation';
 import other from '/@/utils/other';
@ -71,8 +72,10 @@ const tagsUlRef = ref();
 const stores = useTagsViewRoutes();
 const storesThemeConfig = useThemeConfig();
 const storesTagsViewRoutes = useTagsViewRoutes();
+const storesRoutesList = useRoutesList();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
+const { routesList } = storeToRefs(storesRoutesList);
 const storesKeepALiveNames = useKeepALiveNames();
 const route = useRoute();
 const router = useRouter();
@ -381,6 +384,11 @@ const onMousedownMenu = (v, e) => {
 const onTagsClick = (v, k) => {
 	state.tagsRefsIndex = k;
 	router.push(v);
+	// 分栏布局时，收起/展开菜单
+	if (getThemeConfig.value.layout === 'columns') {
+		const item = routesList.value.find((r) => r.path.indexOf(`/${v.path.split('/')[1]}`) > -1);
+		!item.children ? (getThemeConfig.value.isCollapse = true) : (getThemeConfig.value.isCollapse = false);
+	}
 };
 // 处理 url，地址栏链接有参数时，tagsview 右键菜单刷新功能失效问题，感谢 @ZzZz-RIPPER、@dejavuuuuu
 // https://gitee.com/lyt-top/vue-next-admin/issues/I5K3YO
--- a/src/layout/navMenu/horizontal.vue
+++ b/src/layout/navMenu/horizontal.vue
@ -1,32 +1,30 @@
 <template>
 	<div class="el-menu-horizontal-warp">
-		<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
-			<el-menu router :default-active="state.defaultActive" :ellipsis="false" background-color="transparent" mode="horizontal">
-				<template v-for="val in menuLists">
-					<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
-						<template #title>
+		<el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal">
+			<template v-for="val in menuLists">
+				<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
+					<template #title>
+						<SvgIcon :name="val.meta.icon" />
+						<span>{{ val.meta.title }}</span>
+					</template>
+					<SubItem :chil="val.children" />
+				</el-sub-menu>
+				<template v-else>
+					<el-menu-item :index="val.path" :key="val.path">
+						<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 							<SvgIcon :name="val.meta.icon" />
-							<span>{{ val.meta.title }}</span>
+							{{ val.meta.title }}
 						</template>
-						<SubItem :chil="val.children" />
-					</el-sub-menu>
-					<template v-else>
-						<el-menu-item :index="val.path" :key="val.path">
-							<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
+						<template #title v-else>
+							<a class="w100" @click.prevent="onALinkClick(val)">
 								<SvgIcon :name="val.meta.icon" />
 								{{ val.meta.title }}
-							</template>
-							<template #title v-else>
-								<a class="w100" @click.prevent="onALinkClick(val)">
-									<SvgIcon :name="val.meta.icon" />
-									{{ val.meta.title }}
-								</a>
-							</template>
-						</el-menu-item>
-					</template>
+							</a>
+						</template>
+					</el-menu-item>
 				</template>
-			</el-menu>
-		</el-scrollbar>
+			</template>
+		</el-menu>
 	</div>
 </template>

@ -51,7 +49,6 @@ const props = defineProps({
 });

 // 定义变量内容
-const elMenuHorizontalScrollRef = ref();
 const stores = useRoutesList();
 const storesThemeConfig = useThemeConfig();
 const { routesList } = storeToRefs(stores);
@ -65,19 +62,6 @@ const state = reactive({
 const menuLists = computed(() => {
 	return props.menuList;
 });
-// 设置横向滚动条可以鼠标滚轮滚动
-const onElMenuHorizontalScroll = (e) => {
-	const eventDelta = e.wheelDelta || -e.deltaY * 40;
-	elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft + eventDelta / 4;
-};
-// 初始化数据，页面刷新时，滚动条滚动到对应位置
-const initElMenuOffsetLeft = () => {
-	nextTick(() => {
-		let els = document.querySelector('.el-menu.el-menu--horizontal li.is-active');
-		if (!els) return false;
-		elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = els.offsetLeft;
-	});
-};
 // 路由过滤递归函数
 const filterRoutesFun = (arr) => {
 	return arr
@ -121,10 +105,6 @@ const onALinkClick = (val) => {
 onBeforeMount(() => {
 	setCurrentRouterHighlight(route);
 });
-// 页面加载时
-onMounted(() => {
-	initElMenuOffsetLeft();
-});
 // 路由更新时
 onBeforeRouteUpdate((to) => {
 	// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
--- a/src/main.js
+++ b/src/main.js
@ -1,12 +1,11 @@
 import { createApp } from 'vue';
 import pinia from './stores/index';
-import App from './App.vue';
-import router from './router';
+import App from '/@/App.vue';
+import router from '/@/router';
 import { directive } from '/@/directive/index';
 import other from '/@/utils/other';

 import ElementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
 import '/@/theme/index.scss';

 const app = createApp(App);
--- a/src/theme/dark.scss
+++ b/src/theme/dark.scss
@ -106,9 +106,15 @@
 		background-color: var(--next-color-disabled) !important;
 	}

+	// topBar
+	.layout-navbars-breadcrumb-index {
+		background: none !important;
+	}
+
 	// menu
 	.layout-aside {
 		border-right: 1px solid var(--next-border-color-light) !important;
+		@extend .layout-navbars-breadcrumb-index;
 	}

 	// colorPicker
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@ -148,12 +148,12 @@
 		background: var(--next-bg-topBar);
 		.el-menu-item,
 		.el-sub-menu {
-			height: 50px !important;
-			line-height: 50px !important;
+			height: 48px !important;
+			line-height: 48px !important;
 			color: var(--next-bg-topBarColor);
 			.el-sub-menu__title {
-				height: 50px !important;
-				line-height: 50px !important;
+				height: 48px !important;
+				line-height: 48px !important;
 				color: var(--next-bg-topBarColor);
 			}
 			.el-popper.is-pure.is-light {
@ -180,7 +180,7 @@
 	width: 100% !important;
 	.el-menu-item,
 	.el-sub-menu__title {
-		height: 50px !important;
+		height: 48px !important;
 		color: var(--next-bg-topBarColor);
 	}
 	.el-menu-item:not(.is-active):hover,
--- a/src/theme/index.scss
+++ b/src/theme/index.scss
@ -1,3 +1,4 @@
+@import 'element-plus/dist/index.css';
@import './app.scss';
@import 'common/transition.scss';
@import './other.scss';
--- a/src/views/system/menu/dialog.vue
+++ b/src/views/system/menu/dialog.vue
@ -56,7 +56,7 @@
 						</el-col>
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 							<el-form-item label="组件路径">
-								<el-input v-model="state.ruleForm.component" placeholder="组件路径" clearable></el-input>
+								<el-input v-model="state.ruleForm.componentAlias" placeholder="组件路径" clearable></el-input>
 							</el-form-item>
 						</el-col>
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@ -167,6 +167,7 @@ const state = reactive({
 		menuType: 'menu', // 菜单类型
 		name: '', // 路由名称
 		component: '', // 组件路径
+		componentAlias: '', // 组件路径别名
 		isLink: false, // 是否外链
 		menuSort: 0, // 菜单排序
 		path: '', // 路由路径
@ -207,12 +208,8 @@ const openDialog = (type, row) => {
 	if (type === 'edit') {
 		// 模拟数据，实际请走接口
 		row.menuType = 'menu';
-		row.menuSort = Math.random();
-		row.component = `${row.component} `
-			.match(/\'(.+)\'/g)
-			?.join('')
-			.replace(/\'/g, '');
-		state.ruleForm = row;
+		row.menuSort = Math.floor(Math.random() * 100);
+		state.ruleForm = JSON.parse(JSON.stringify(row));
 		state.dialog.title = '修改菜单';
 		state.dialog.submitTxt = '修 改';
 	} else {