'admin-21.08.29:修复优化诸多内容，请查看CHANGELOG.md文件'

Merge pull request !14 from wjs0509/master

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.18
+
+`2021.08.29`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 权限组件去掉顶级 div（`/src/components/auth`）
+- 🎉 新增 布局配置添加恢复默认按钮
+- 🐞 修复 升级 <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">element plus 1.1.0-beta.7</a>后项目无法启动、el-menu 菜单
+- 🐞 修复 表格固定列时的层级、设置了相对定位时，遮挡左侧导航菜单问题
+
+## 1.0.17
+
+`2021.08.22`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 去除设置布局切换，重置主题样式（initSetLayoutChange），切换布局需手动设置样式，设置的样式自动同步各布局
+- 🎯 优化 Dropdown 下拉菜单用户账号靠边时换行问题
+- 🎯 优化 左侧导航菜单，共用菜单树，防止 `布局配置` 设置 `菜单 / 顶栏` 时，样式丢失等问题
+- 🐞 修复 固定 header 后没有回到顶部的 bug，拉取项目后运行不起来的 bug。<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/14" target="_blank">!14</a>，感谢<a href="https://gitee.com/wjs0509" target="_blank">@wjs0509</a>
+- 🐞 修复 tagView 右键全屏后，浏览器窗口大小发生任何变化都会导致左边菜单显示出来，并且可点击打开对应页面。<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I46E6T" target="_blank">I46E6T</a>
+- 🐞 修复 默认设置 `菜单 / 顶栏` 样式不生效问题（/@/src/store/modules/themeConfig.ts）
+
 ## 1.0.16
 
 `2021.08.14`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.0.16",
+	"version": "1.0.18",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -13,7 +13,7 @@
 		"echarts": "^5.1.2",
 		"echarts-gl": "^2.0.8",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.70",
+		"element-plus": "^1.1.0-beta.7",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -21,33 +21,33 @@
 		"screenfull": "^5.1.0",
 		"sortablejs": "^1.14.0",
 		"splitpanes": "^3.0.4",
-		"vue": "^3.1.5",
+		"vue": "^3.2.6",
 		"vue-clipboard3": "^1.0.1",
 		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.1.7",
-		"vue-router": "^4.0.10",
+		"vue-router": "^4.0.11",
 		"vue-web-screen-shot": "^1.2.0",
 		"vuex": "^4.0.2",
-		"wangeditor": "^4.7.6"
+		"wangeditor": "^4.7.7"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.6.1",
+		"@types/node": "^16.7.5",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.29.1",
-		"@typescript-eslint/parser": "^4.29.1",
-		"@vitejs/plugin-vue": "^1.4.0",
-		"@vue/compiler-sfc": "^3.2.2",
+		"@typescript-eslint/eslint-plugin": "^4.29.3",
+		"@typescript-eslint/parser": "^4.29.3",
+		"@vitejs/plugin-vue": "^1.6.0",
+		"@vue/compiler-sfc": "^3.2.6",
 		"dotenv": "^10.0.0",
 		"eslint": "^7.32.0",
-		"eslint-plugin-vue": "^7.16.0",
+		"eslint-plugin-vue": "^7.17.0",
 		"prettier": "^2.3.2",
-		"sass": "^1.37.5",
+		"sass": "^1.38.2",
 		"sass-loader": "^12.1.0",
-		"typescript": "^4.3.5",
-		"vite": "^2.4.4",
+		"typescript": "^4.4.2",
+		"vite": "^2.5.1",
 		"vue-eslint-parser": "^7.10.0"
 	},
 	"browserslist": [

src/components/auth/auth.vue

@@ -1,7 +1,5 @@
 <template>
-	<div v-if="getUserAuthBtnList">
-		<slot />
-	</div>
+	<slot v-if="getUserAuthBtnList" />
 </template>
 
 <script lang="ts">

src/components/auth/authAll.vue

@@ -1,7 +1,5 @@
 <template>
-	<div v-if="getUserAuthBtnList">
-		<slot />
-	</div>
+	<slot v-if="getUserAuthBtnList" />
 </template>
 
 <script lang="ts">

src/components/auth/auths.vue

@@ -1,7 +1,5 @@
 <template>
-	<div v-if="getUserAuthBtnList">
-		<slot />
-	</div>
+	<slot v-if="getUserAuthBtnList" />
 </template>
 
 <script lang="ts">

src/i18n/lang/en.ts

@@ -167,6 +167,7 @@ export default {
 		sixColumns: 'Four',
 		tipText: 'Click the button below to copy the layout configuration to `/src/store/modules/themeConfig.ts` It has been modified in.',
 		copyText: 'replication configuration',
+		resetText: 'restore default',
 		copyTextSuccess: 'Copy succeeded!',
 		copyTextError: 'Copy failed!',
 	},

src/i18n/lang/zh-cn.ts

@@ -167,6 +167,7 @@ export default {
 		sixColumns: '分栏',
 		tipText: '点击下方按钮，复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。',
 		copyText: '一键复制配置',
+		resetText: '一键恢复默认',
 		copyTextSuccess: '复制成功！',
 		copyTextError: '复制失败！',
 	},

src/i18n/lang/zh-tw.ts

@@ -167,6 +167,7 @@ export default {
 		sixColumns: '分欄',
 		tipText: '點擊下方按鈕，複製佈局配寘去`src/store/modules/themeConfig.ts`中修改。',
 		copyText: '一鍵複製配寘',
+		resetText: '一鍵恢復默認',
 		copyTextSuccess: '複製成功！',
 		copyTextError: '複製失敗！',
 	},

src/layout/component/aside.vue

@@ -1,20 +1,12 @@
 <template>
-	<template v-if="clientWidth > 1000">
-		<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>
-	<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
-		<el-aside class="layout-aside w100 h100">
+	<div class="h100" v-show="!isTagsViewCurrenFull">
+		<el-aside class="layout-aside" :class="setCollapseStyle">
 			<Logo v-if="setShowLogo" />
 			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
 				<Vertical :menuList="menuList" />
 			</el-scrollbar>
 		</el-aside>
-	</el-drawer>
+	</div>
 </template>
 
 <script lang="ts">
@@ -41,25 +33,50 @@ export default {
 			return store.state.tagsViewRoutes.isTagsViewCurrenFull;
 		});
 		// 设置菜单展开/收起时的宽度
-		const setCollapseWidth = computed(() => {
-			let { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
-			let asideBrColor = menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
-			if (layout === 'columns') {
-				// 分栏布局，菜单收起时宽度给 1px
+		const setCollapseStyle = computed(() => {
+			const { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
+			const asideBrColor =
+				menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
+			// 判断是否是手机端
+			if (state.clientWidth <= 1000) {
 				if (isCollapse) {
-					return ['layout-aside-width1', asideBrColor];
+					document.body.setAttribute('class', 'el-popup-parent--hidden');
+					const asideEle = document.querySelector('.layout-container') as HTMLElement;
+					const modeDivs = document.createElement('div');
+					modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
+					asideEle.appendChild(modeDivs);
+					modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
+					return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
 				} else {
-					return ['layout-aside-width-default', asideBrColor];
+					// 关闭弹窗
+					closeLayoutAsideMobileMode();
+					return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
 				}
 			} else {
-				// 其它布局给 64px
-				if (isCollapse) {
-					return ['layout-aside-width64', asideBrColor];
+				if (layout === 'columns') {
+					// 分栏布局，菜单收起时宽度给 1px
+					if (isCollapse) {
+						return [asideBrColor, 'layout-aside-pc-1'];
+					} else {
+						return [asideBrColor, 'layout-aside-pc-220'];
+					}
 				} else {
-					return ['layout-aside-width-default', asideBrColor];
+					// 其它布局给 64px
+					if (isCollapse) {
+						return [asideBrColor, 'layout-aside-pc-64'];
+					} else {
+						return [asideBrColor, 'layout-aside-pc-220'];
+					}
 				}
 			}
 		});
+		// 关闭移动端蒙版
+		const closeLayoutAsideMobileMode = () => {
+			const el = document.querySelector('.layout-aside-mobile-mode');
+			el && el.parentNode?.removeChild(el);
+			store.state.themeConfig.themeConfig.isCollapse = false;
+			document.body.setAttribute('class', '');
+		};
 		// 设置显示/隐藏 logo
 		const setShowLogo = computed(() => {
 			let { layout, isShowLogo } = store.state.themeConfig.themeConfig;
@@ -118,10 +135,11 @@ export default {
 			});
 			proxy.mittBus.on('layoutMobileResize', (res: any) => {
 				initMenuFixed(res.clientWidth);
+				closeLayoutAsideMobileMode();
 			});
 		});
 		return {
-			setCollapseWidth,
+			setCollapseStyle,
 			setShowLogo,
 			getThemeConfig,
 			isTagsViewCurrenFull,

src/layout/main/columns.vue

@@ -3,9 +3,9 @@
 		<ColumnsAside />
 		<div class="layout-columns-warp">
 			<Aside />
-			<el-container class="flex-center layout-backtop">
+			<el-container class="flex-center layout-backtop" :class="{ 'layout-backtop': !isFixedHeader }">
 				<Header v-if="isFixedHeader" />
-				<el-scrollbar>
+				<el-scrollbar :class="{ 'layout-backtop': isFixedHeader }">
 					<Header v-if="!isFixedHeader" />
 					<Main />
 				</el-scrollbar>

src/layout/main/defaults.vue

@@ -1,9 +1,9 @@
 <template>
 	<el-container class="layout-container">
 		<Aside />
-		<el-container class="flex-center layout-backtop">
+		<el-container class="flex-center" :class="{ 'layout-backtop': !isFixedHeader }">
 			<Header v-if="isFixedHeader" />
-			<el-scrollbar ref="layoutDefaultsScrollbarRef">
+			<el-scrollbar ref="layoutDefaultsScrollbarRef" :class="{ 'layout-backtop': isFixedHeader }">
 				<Header v-if="!isFixedHeader" />
 				<Main />
 			</el-scrollbar>
@@ -23,7 +23,7 @@ export default {
 	name: 'layoutDefaults',
 	components: { Aside, Header, Main },
 	setup() {
-		const { proxy } = getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const route = useRoute();
 		const isFixedHeader = computed(() => {

src/layout/navBars/breadcrumb/index.vue

@@ -109,7 +109,6 @@ export default {
 	align-items: center;
 	padding-right: 15px;
 	background: var(--bg-topBar);
-	overflow: hidden;
 	border-bottom: 1px solid #f1f2f3;
 }
 </style>

src/layout/navBars/breadcrumb/setings.vue

@@ -365,6 +365,9 @@
 						@click="onCopyConfigClick"
 						>{{ $t('message.layout.copyText') }}
 					</el-button>
+					<el-button size="small" class="copy-config-btn-reset" icon="el-icon-refresh-right" type="info" @click="onResetConfigClick"
+						>{{ $t('message.layout.resetText') }}
+					</el-button>
 				</div>
 			</el-scrollbar>
 		</el-drawer>
@@ -518,38 +521,9 @@ export default defineComponent({
 			if (getThemeConfig.value.layout === layout) return false;
 			getThemeConfig.value.layout = layout;
 			getThemeConfig.value.isDrawer = false;
-			initSetLayoutChange();
+			initLayoutChangeFun();
 			onMenuBarHighlightChange();
 		};
-		// 设置布局切换，重置主题样式
-		const initSetLayoutChange = () => {
-			if (getThemeConfig.value.layout === 'classic') {
-				getThemeConfig.value.menuBar = '#FFFFFF';
-				getThemeConfig.value.menuBarColor = '#606266';
-				getThemeConfig.value.topBar = '#ffffff';
-				getThemeConfig.value.topBarColor = '#606266';
-				initLayoutChangeFun();
-			} else if (getThemeConfig.value.layout === 'transverse') {
-				getThemeConfig.value.menuBarColor = '#FFFFFF';
-				getThemeConfig.value.topBar = '#545c64';
-				getThemeConfig.value.topBarColor = '#FFFFFF';
-				initLayoutChangeFun();
-			} else if (getThemeConfig.value.layout === 'columns') {
-				// 1.0.11 更新日志
-				getThemeConfig.value.isShowLogo = false;
-				getThemeConfig.value.menuBar = '#FFFFFF';
-				getThemeConfig.value.menuBarColor = '#606266';
-				getThemeConfig.value.topBar = '#ffffff';
-				getThemeConfig.value.topBarColor = '#606266';
-				initLayoutChangeFun();
-			} else {
-				getThemeConfig.value.menuBar = '#545c64';
-				getThemeConfig.value.menuBarColor = '#eaeaea';
-				getThemeConfig.value.topBar = '#FFFFFF';
-				getThemeConfig.value.topBarColor = '#606266';
-				initLayoutChangeFun();
-			}
-		};
 		// 设置布局切换函数
 		const initLayoutChangeFun = () => {
 			onBgColorPickerChange('menuBar');
@@ -590,6 +564,11 @@ export default defineComponent({
 				getThemeConfig.value.isDrawer = false;
 			});
 		};
+		// 一键恢复默认
+		const onResetConfigClick = () => {
+			Local.clear();
+			window.location.reload();
+		};
 		// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
 		const initSetStyle = () => {
 			setTimeout(() => {
@@ -606,7 +585,7 @@ export default defineComponent({
 		onMounted(() => {
 			nextTick(() => {
 				// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
-				if (!Local.get('frequency')) initSetLayoutChange();
+				if (!Local.get('frequency')) initLayoutChangeFun();
 				Local.set('frequency', 1);
 				// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
 				proxy.mittBus.on('onSignInClick', () => {
@@ -618,10 +597,9 @@ export default defineComponent({
 				});
 				// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
 				proxy.mittBus.on('layoutMobileResize', (res: any) => {
-					if (getThemeConfig.value.layout === res.layout) return false;
 					getThemeConfig.value.layout = res.layout;
 					getThemeConfig.value.isDrawer = false;
-					initSetLayoutChange();
+					initLayoutChangeFun();
 					onMenuBarHighlightChange();
 				});
 				setTimeout(() => {
@@ -667,6 +645,7 @@ export default defineComponent({
 			onSortableTagsViewChange,
 			onShareTagsViewChange,
 			onCopyConfigClick,
+			onResetConfigClick,
 		};
 	},
 });
@@ -803,7 +782,8 @@ export default defineComponent({
 			width: 100%;
 			margin-top: 15px;
 		}
-		.copy-config-last-btn {
+		.copy-config-btn-reset {
+			width: 100%;
 			margin: 10px 0 0;
 		}
 	}

src/layout/navMenu/horizontal.vue

@@ -3,13 +3,13 @@
 		<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
 			<el-menu router :default-active="defaultActive" background-color="transparent" mode="horizontal">
 				<template v-for="val in menuLists">
-					<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
+					<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 						<template #title>
 							<i :class="val.meta.icon ? val.meta.icon : ''"></i>
 							<span>{{ $t(val.meta.title) }}</span>
 						</template>
 						<SubItem :chil="val.children" />
-					</el-submenu>
+					</el-sub-menu>
 					<el-menu-item :index="val.path" :key="val.path" v-else>
 						<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 							<i :class="val.meta.icon ? val.meta.icon : ''"></i>

src/layout/navMenu/subItem.vue

@@ -1,12 +1,12 @@
 <template>
 	<template v-for="val in chils">
-		<el-submenu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
+		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
 				<i :class="val.meta.icon"></i>
 				<span>{{ $t(val.meta.title) }}</span>
 			</template>
 			<sub-item :chil="val.children" />
-		</el-submenu>
+		</el-sub-menu>
 		<el-menu-item :index="val.path" :key="val.path" v-else>
 			<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 				<i :class="val.meta.icon ? val.meta.icon : ''"></i>

src/layout/navMenu/vertical.vue

@@ -3,18 +3,18 @@
 		router
 		:default-active="defaultActive"
 		background-color="transparent"
-		:collapse="setIsCollapse"
+		:collapse="isCollapse"
 		:unique-opened="getThemeConfig.isUniqueOpened"
 		:collapse-transition="false"
 	>
 		<template v-for="val in menuLists">
-			<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
+			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
 					<i :class="val.meta.icon ? val.meta.icon : ''"></i>
 					<span>{{ $t(val.meta.title) }}</span>
 				</template>
 				<SubItem :chil="val.children" />
-			</el-submenu>
+			</el-sub-menu>
 			<el-menu-item :index="val.path" :key="val.path" v-else>
 				<i :class="val.meta.icon ? val.meta.icon : ''"></i>
 				<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted } from 'vue';
+import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, watch } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useStore } from '/@/store/index';
 import SubItem from '/@/layout/navMenu/subItem.vue';
@@ -49,6 +49,7 @@ export default defineComponent({
 		const state = reactive({
 			// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
 			defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
+			isCollapse: false,
 		});
 		// 获取父级菜单数据
 		const menuLists = computed(() => {
@@ -58,10 +59,6 @@ export default defineComponent({
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
 		});
-		// 设置菜单的收起/展开
-		const setIsCollapse = computed(() => {
-			return document.body.clientWidth < 1000 ? false : getThemeConfig.value.isCollapse;
-		});
 		// 菜单高亮（详情时，父级高亮）
 		const setParentHighlight = (currentRoute) => {
 			const { path, meta } = currentRoute;
@@ -69,6 +66,16 @@ export default defineComponent({
 			if (pathSplit.length >= 4 && meta.isHide) return pathSplit.splice(0, 3).join('/');
 			else return path;
 		};
+		// 设置菜单的收起/展开
+		watch(
+			store.state.themeConfig.themeConfig,
+			() => {
+				document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = getThemeConfig.value.isCollapse);
+			},
+			{
+				immediate: true,
+			}
+		);
 		// 页面加载时
 		onMounted(() => {
 			state.defaultActive = setParentHighlight(route);
@@ -84,7 +91,6 @@ export default defineComponent({
 		return {
 			menuLists,
 			getThemeConfig,
-			setIsCollapse,
 			...toRefs(state),
 		};
 	},

src/main.ts

@@ -7,7 +7,7 @@ import { i18n } from '/@/i18n/index';
 import { globalComponentSize } from '/@/utils/componentSize';
 
 import ElementPlus from 'element-plus';
-import 'element-plus/lib/theme-chalk/index.css';
+import 'element-plus/dist/index.css';
 import '/@/theme/index.scss';
 import mitt from 'mitt';
 import screenShort from 'vue-web-screen-shot';

src/store/modules/themeConfig.ts

@@ -5,6 +5,7 @@ import { ThemeConfigState, RootStateTypes } from '/@/store/interface/index';
 /**
  * 2020.05.28 by lyt 优化
  * 修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效
+ * 哪个大佬有解决办法，欢迎pr，感谢💕！
  */
 const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 	namespaced: true,
@@ -29,8 +30,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 
 			/**
 			 * 菜单 / 顶栏
-			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
-			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
+			 * 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
+			 * 切换布局需手动设置样式，设置的样式自动同步各布局，
+			 * 代码位置：/@/layout/navBars/breadcrumb/setings.vue
 			 */
 			// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
 			topBar: '#ffffff',

src/store/modules/userInfos.ts

@@ -1,5 +1,5 @@
 import { Module } from 'vuex';
-import { Session } from '/@/utils/storage.ts';
+import { Session } from '/@/utils/storage';
 // 此处加上 `.ts` 后缀报错，具体原因不详
 import { UserInfosState, RootStateTypes } from '/@/store/interface/index';
 

src/theme/app.scss

@@ -65,18 +65,45 @@ body,
 	.layout-el-aside-br-color {
 		border-right: 1px solid rgb(238, 238, 238);
 	}
-	.layout-aside-width-default {
+	// pc端左侧导航样式
+	.layout-aside-pc-220 {
 		width: 220px !important;
 		transition: width 0.3s ease;
 	}
-	.layout-aside-width64 {
+	.layout-aside-pc-64 {
 		width: 64px !important;
 		transition: width 0.3s ease;
 	}
-	.layout-aside-width1 {
+	.layout-aside-pc-1 {
 		width: 1px !important;
 		transition: width 0.3s ease;
 	}
+	// 手机端左侧导航样式
+	.layout-aside-mobile {
+		position: fixed;
+		top: 0;
+		left: -220px;
+		width: 220px;
+		z-index: 9999999;
+	}
+	.layout-aside-mobile-close {
+		left: -220px;
+		transition: all 0.3s cubic-bezier(1, -0.04, 0, 1.32);
+	}
+	.layout-aside-mobile-open {
+		left: 0;
+		transition: all 0.3s cubic-bezier(0.53, -0.26, 0.42, 1.18);
+	}
+	.layout-aside-mobile-mode {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 9999998;
+	}
 	.layout-scrollbar {
 		@extend .el-scrollbar;
 		padding: 15px;

src/theme/element.scss

@@ -747,9 +747,14 @@
 // 默认样式修改
 .el-menu {
 	border-right: none !important;
+	width: 220px;
+}
+// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
+.el-menu--collapse {
+	width: 64px !important;
 }
 .el-menu-item,
-.el-submenu__title {
+.el-sub-menu__title {
 	height: 50px !important;
 	line-height: 50px !important;
 	color: var(--bg-menuBarColor);
@@ -757,31 +762,31 @@
 }
 // horizontal 水平方向时
 .el-menu--horizontal > .el-menu-item.is-active,
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom: 3px solid !important;
 	border-bottom-color: set-color(primary);
 	color: set-color(primary) !important;
 }
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
+.el-menu--horizontal > .el-sub-menu:focus .el-sub-menu__title,
+.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title,
 .el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
 	color: set-color(primary) !important;
 }
 .el-menu.el-menu--horizontal {
 	border-bottom: none !important;
 }
 .el-menu--horizontal > .el-menu-item,
-.el-menu--horizontal > .el-submenu .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
 	color: var(--bg-topBarColor);
 }
 // 外部链接时
 .el-menu-item a,
 .el-menu-item a:hover,
 .el-menu-item i,
-.el-submenu__title i {
+.el-sub-menu__title i {
 	color: inherit;
 	text-decoration: none;
 }
@@ -791,7 +796,7 @@
 }
 // 默认 hover 时
 .el-menu-item:hover,
-.el-submenu__title:hover {
+.el-sub-menu__title:hover {
 	color: set-color(primary) !important;
 	background-color: transparent !important;
 	i {
@@ -800,7 +805,7 @@
 }
 // 高亮时/菜单收起时
 .el-menu-item.is-active,
-.el-menu--collapse .el-submenu.is-active i {
+.el-menu--collapse .el-sub-menu.is-active i {
 	color: set-color(primary);
 }
 .el-active-extend {
@@ -829,22 +834,22 @@
 	.el-menu--horizontal {
 		background: var(--bg-topBar);
 		.el-menu-item,
-		.el-submenu__title {
+		.el-sub-menu__title {
 			color: var(--bg-topBarColor);
 		}
 	}
 }
 // 第三方图标字体间距/大小设置
 .el-menu-item .iconfont,
-.el-submenu .iconfont {
+.el-sub-menu .iconfont {
 	@include generalIcon;
 }
 .el-menu-item .fa,
-.el-submenu .fa {
+.el-sub-menu .fa {
 	@include generalIcon;
 }
 // element plus 本身字体图标
-.el-submenu [class^='el-icon-'] {
+.el-sub-menu [class^='el-icon-'] {
 	font-size: 14px !important;
 }
 // 去掉离开浏览器时，菜单的默认高亮
@@ -886,6 +891,9 @@
 	color: set-color(primary);
 	background-color: set-color(primary-light-9);
 }
+.el-dropdown-menu .el-dropdown-menu__item {
+	white-space: nowrap;
+}
 
 /* Steps 步骤条
 ------------------------------- */

src/views/system/user/index.vue

@@ -30,9 +30,9 @@
 				class="mt15"
 				:pager-count="5"
 				:page-sizes="[10, 20, 30]"
-				:current-page="tableData.param.pageNum"
+				v-model:current-page="tableData.param.pageNum"
 				background
-				:page-size="tableData.param.pageSize"
+				v-model:page-size="tableData.param.pageSize"
 				layout="total, sizes, prev, pager, next, jumper"
 				:total="tableData.total"
 			>
@@ -84,7 +84,7 @@ export default {
 		};
 		// 分页改变
 		const onHandleCurrentChange = (val: number) => {
-			state.tableData.param.pageSize = val;
+			state.tableData.param.pageNum = val;
 		};
 		// 页面加载时
 		onMounted(() => {

vite.config.ts

@@ -10,7 +10,7 @@ const pathResolve = (dir: string): any => {
 const { VITE_PORT, VITE_OPEN, VITE_PUBLIC_PATH } = loadEnv();
 
 const alias: Record<string, string> = {
-	'/@': pathResolve('/src/'),
+	'/@': pathResolve('./src/'),
 	'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
 };