1、前端框架升级(与官方仓库同步) v2.4.1 2、升级nuget包

Admin.NET/Admin.NET.Core/Admin.NET.Core.csproj

@@ -16,9 +16,9 @@
     <PackageReference Include="AngleSharp" Version="0.17.1" />
     <PackageReference Include="AspNetCoreRateLimit" Version="4.0.2" />
     <PackageReference Include="DotNetCore.Natasha.CSharp" Version="5.0.2" />
-    <PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="4.8.2.3" />
-    <PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="4.8.2.3" />
-    <PackageReference Include="Furion.Pure" Version="4.8.2.3" />
+    <PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="4.8.2.8" />
+    <PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="4.8.2.8" />
+    <PackageReference Include="Furion.Pure" Version="4.8.2.8" />
     <PackageReference Include="Lazy.Captcha.Core" Version="1.1.6" />
     <PackageReference Include="Magicodes.IE.Excel" Version="2.7.0" />
     <PackageReference Include="Magicodes.IE.Pdf" Version="2.7.0" />

Web/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 2.4.1
+
+`2022.11.30`
+
+- 🎉 新增 版本升级提示
+- 🐞 修复 [先打开 F12 再登录进去，然后改变浏览器大小 js 报错](https://gitee.com/lyt-top/vue-next-admin/issues/I63ZZT)，感谢[@Quber](https://gitee.com/quber)
+
 ## 2.4.0
 
 `2022.11.29`

Web/README.md

@@ -43,13 +43,13 @@
 
 | Edge      | Firefox      | Chrome      | Safari      |
 | --------- | ------------ | ----------- | ----------- |
-| Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 72 | Safari ≥ 12 |
+| Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 76 | Safari ≥ 12 |
 
 > 由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。
 
 #### ⚡ 使用说明
 
-建议使用 cnpm，因为 yarn 有时会报错。<a href="http://nodejs.cn/" target="_blank">node 版本 > 12xx.xx.x</a>
+建议使用 cnpm，因为 yarn 有时会报错。<a href="http://nodejs.cn/" target="_blank">node 版本 > 14xx.xx.x</a>
 
 ```bash
 # 克隆项目

Web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "2.4.0",
+	"version": "2.4.1",
 	"description": "vue3 vite next admin template",
 	"author": "lyt_20201208",
 	"license": "MIT",
@@ -52,12 +52,10 @@
 		"@typescript-eslint/parser": "^5.45.0",
 		"@vitejs/plugin-vue": "^3.2.0",
 		"@vue/compiler-sfc": "^3.2.45",
-		"dotenv": "^16.0.3",
 		"eslint": "^8.28.0",
 		"eslint-plugin-vue": "^9.8.0",
 		"prettier": "^2.8.0",
 		"sass": "^1.56.1",
-		"sass-loader": "^13.2.0",
 		"typescript": "^4.9.3",
 		"vite": "^3.2.4",
 		"vite-plugin-vue-setup-extend": "^0.4.0",
@@ -72,8 +70,8 @@
 		"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
 	},
 	"engines": {
-		"node": ">=12.0.0",
-		"npm": ">= 6.0.0"
+		"node": ">=14.0.0",
+		"npm": ">= 7.0.0"
 	},
 	"keywords": [
 		"vue",

Web/src/App.vue

@@ -4,6 +4,7 @@
 		<LockScreen v-if="themeConfig.isLockScreen" />
 		<Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
 		<CloseFull v-if="!themeConfig.isLockScreen" />
+		<Upgrade v-if="getVersion" />
 	</el-config-provider>
 </template>
 
@@ -23,6 +24,7 @@ import setIntroduction from '/@/utils/setIconfont';
 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 Upgrade = defineAsyncComponent(() => import('/@/layout/upgrade/index.vue'));
 
 // 定义变量内容
 const { messages, locale } = useI18n();
@@ -32,6 +34,15 @@ const stores = useTagsViewRoutes();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 
+// 获取版本号
+const getVersion = computed(() => {
+	let isVersion = false;
+	if (route.path !== '/login') {
+		// @ts-ignore
+		if ((Local.get('version') && Local.get('version') !== __VERSION__) || !Local.get('version')) isVersion = true;
+	}
+	return isVersion;
+});
 // 获取全局组件大小
 const getGlobalComponentSize = computed(() => {
 	return other.globalComponentSize();

Web/src/components/iconSelector/index.vue

@@ -1,13 +1,6 @@
 <template>
 	<div class="icon-selector w100 h100">
-		<el-popover
-			placement="bottom"
-			:width="state.fontIconWidth"
-			trigger="click"
-			transition="el-zoom-in-top"
-			popper-class="icon-selector-popper"
-			@show="onPopoverShow"
-		>
+		<el-popover placement="bottom" :width="state.fontIconWidth" trigger="click" transition="el-zoom-in-top" popper-class="icon-selector-popper" @show="onPopoverShow">
 			<template #reference>
 				<el-input
 					v-model="state.fontIconSearch"
@@ -35,15 +28,9 @@
 					<div class="icon-selector-warp-title flex">
 						<div class="flex-auto">{{ title }}</div>
 						<div class="icon-selector-warp-title-tab" v-if="type === 'all'">
-							<span :class="{ 'span-active': state.fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标">
-								ali
-							</span>
-							<span :class="{ 'span-active': state.fontIconType === 'ele' }" @click="onIconChange('ele')" class="ml10" title="elementPlus 图标">
-								ele
-							</span>
-							<span :class="{ 'span-active': state.fontIconType === 'awe' }" @click="onIconChange('awe')" class="ml10" title="fontawesome 图标">
-								awe
-							</span>
+							<span :class="{ 'span-active': state.fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标"> ali </span>
+							<span :class="{ 'span-active': state.fontIconType === 'ele' }" @click="onIconChange('ele')" class="ml10" title="elementPlus 图标"> ele </span>
+							<span :class="{ 'span-active': state.fontIconType === 'awe' }" @click="onIconChange('awe')" class="ml10" title="fontawesome 图标"> awe </span>
 						</div>
 					</div>
 					<div class="icon-selector-warp-row">
@@ -71,6 +58,7 @@
 <script setup lang="ts" name="iconSelector">
 import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
 import initIconfont from '/@/utils/getStyleSheets';
+import '/@/theme/iconSelector.scss';
 
 // 定义父组件传过来的值
 const props = defineProps({

Web/src/components/table/index.vue

@@ -1,27 +1,11 @@
 <template>
 	<div class="table-container">
-		<el-table
-			:data="data"
-			:border="setBorder"
-			v-bind="$attrs"
-			row-key="id"
-			stripe
-			style="width: 100%"
-			v-loading="config.loading"
-			@selection-change="onSelectionChange"
-		>
+		<el-table :data="data" :border="setBorder" v-bind="$attrs" row-key="id" stripe style="width: 100%" v-loading="config.loading" @selection-change="onSelectionChange">
 			<el-table-column type="selection" :reserve-selection="true" width="30" v-if="config.isSelection" />
 			<el-table-column type="index" label="序号" width="60" v-if="config.isSerialNo" />
-			<el-table-column
-				v-for="(item, index) in setHeader"
-				:key="index"
-				show-overflow-tooltip
-				:prop="item.key"
-				:width="item.colWidth"
-				:label="item.title"
-			>
+			<el-table-column v-for="(item, index) in setHeader" :key="index" show-overflow-tooltip :prop="item.key" :width="item.colWidth" :label="item.title">
 				<template v-slot="scope">
-					<template v-if="item.key === 'image'">
+					<template v-if="item.type === 'image'">
 						<img :src="scope.row[item.key]" :width="item.width" :height="item.height" />
 					</template>
 					<template v-else>
@@ -58,15 +42,7 @@
 			<div class="table-footer-tool">
 				<SvgIcon name="iconfont icon-yunxiazai_o" :size="22" title="导出" @click="onImportTable" />
 				<SvgIcon name="iconfont icon-shuaxin" :size="22" title="刷新" @click="onRefreshTable" />
-				<el-popover
-					placement="top-end"
-					trigger="click"
-					transition="el-zoom-in-top"
-					popper-class="table-tool-popper"
-					:width="300"
-					:persistent="false"
-					@show="onSetTable"
-				>
+				<el-popover placement="top-end" trigger="click" transition="el-zoom-in-top" popper-class="table-tool-popper" :width="300" :persistent="false" @show="onSetTable">
 					<template #reference>
 						<SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
 					</template>
@@ -76,13 +52,7 @@
 								<el-tooltip content="拖动进行排序" placement="top-start">
 									<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
 								</el-tooltip>
-								<el-checkbox
-									v-model="state.checkListAll"
-									:indeterminate="state.checkListIndeterminate"
-									class="ml10 mr1"
-									label="列显示"
-									@change="onCheckAllChange"
-								/>
+								<el-checkbox v-model="state.checkListAll" :indeterminate="state.checkListIndeterminate" class="ml10 mr1" label="列显示" @change="onCheckAllChange" />
 								<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
 								<el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
 							</div>

Web/src/i18n/lang/en.ts

@@ -180,4 +180,12 @@ export default {
 		copyTextSuccess: 'Copy succeeded!',
 		copyTextError: 'Copy failed!',
 	},
+	upgrade: {
+		title: 'New version',
+		msg: 'The new version is available, please update it now! Dont worry, the update is fast!',
+		desc: 'Prompt: Update will restore the default configuration',
+		btnOne: 'Cruel refusal',
+		btnTwo: 'Update now',
+		btnTwoLoading: 'Updating',
+	},
 };

Web/src/i18n/lang/zh-cn.ts

@@ -180,4 +180,12 @@ export default {
 		copyTextSuccess: '复制成功！',
 		copyTextError: '复制失败！',
 	},
+	upgrade: {
+		title: '新版本升级',
+		msg: '新版本来啦，马上更新尝鲜吧！不用担心，更新很快的哦！',
+		desc: '提示：更新会还原默认配置',
+		btnOne: '残忍拒绝',
+		btnTwo: '马上更新',
+		btnTwoLoading: '更新中',
+	},
 };

Web/src/i18n/lang/zh-tw.ts

@@ -180,4 +180,12 @@ export default {
 		copyTextSuccess: '複製成功！',
 		copyTextError: '複製失敗！',
 	},
+	upgrade: {
+		title: '新版本陞級',
+		msg: '新版本來啦，馬上更新嘗鮮吧！ 不用擔心，更新很快的哦！',
+		desc: '提示：更新會還原默認配寘',
+		btnOne: '殘忍拒絕',
+		btnTwo: '馬上更新',
+		btnTwoLoading: '更新中',
+	},
 };

Web/src/layout/navBars/breadcrumb/setings.vue

@@ -577,6 +577,8 @@ const onCopyConfigClick = () => {
 const onResetConfigClick = () => {
 	Local.clear();
 	window.location.reload();
+	// @ts-ignore
+	Local.set('version', __VERSION__);
 };
 // 初始化菜单样式等
 const initSetStyle = () => {

Web/src/layout/upgrade/index.vue

@@ -0,0 +1,138 @@
+<template>
+	<div class="upgrade-dialog">
+		<el-dialog
+			v-model="state.isUpgrade"
+			width="300px"
+			destroy-on-close
+			:show-close="false"
+			:close-on-click-modal="false"
+			:close-on-press-escape="false"
+		>
+			<div class="upgrade-title">
+				<div class="upgrade-title-warp">
+					<span class="upgrade-title-warp-txt">{{ $t('message.upgrade.title') }}</span>
+					<span class="upgrade-title-warp-version">v{{ state.version }}</span>
+				</div>
+			</div>
+			<div class="upgrade-content">
+				{{ getThemeConfig.globalTitle }} {{ $t('message.upgrade.msg') }}
+				<div class="upgrade-content-desc mt5">{{ $t('message.upgrade.desc') }}</div>
+			</div>
+			<div class="upgrade-btn">
+				<el-button round size="default" type="info" text @click="onCancel">{{ $t('message.upgrade.btnOne') }}</el-button>
+				<el-button type="primary" round size="default" @click="onUpgrade" :loading="state.isLoading">{{ state.btnTxt }}</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="layoutUpgrade">
+import { reactive, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { Local } from '/@/utils/storage';
+
+// 定义变量内容
+const { t } = useI18n();
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const state = reactive({
+	isUpgrade: true,
+	// @ts-ignore
+	version: __VERSION__,
+	isLoading: false,
+	btnTxt: '',
+});
+
+// 获取布局配置信息
+const getThemeConfig = computed(() => {
+	return themeConfig.value;
+});
+// 残忍拒绝
+const onCancel = () => {
+	state.isUpgrade = false;
+};
+// 马上更新
+const onUpgrade = () => {
+	state.isLoading = true;
+	state.btnTxt = t('message.upgrade.btnTwoLoading');
+	setTimeout(() => {
+		Local.clear();
+		window.location.reload();
+		Local.set('version', state.version);
+	}, 2000);
+};
+// 页面加载时
+onMounted(() => {
+	setTimeout(() => {
+		state.btnTxt = t('message.upgrade.btnTwo');
+	}, 200);
+});
+</script>
+
+<style scoped lang="scss">
+.upgrade-dialog {
+	:deep(.el-dialog) {
+		.el-dialog__body {
+			padding: 0 !important;
+		}
+		.el-dialog__header {
+			display: none !important;
+		}
+		.upgrade-title {
+			text-align: center;
+			height: 130px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			&::after {
+				content: '';
+				position: absolute;
+				background-color: var(--el-color-primary);
+				width: 130%;
+				height: 130px;
+				border-bottom-left-radius: 100%;
+				border-bottom-right-radius: 100%;
+			}
+			.upgrade-title-warp {
+				z-index: 1;
+				position: relative;
+				.upgrade-title-warp-txt {
+					color: var(--next-color-white);
+					font-size: 22px;
+					letter-spacing: 3px;
+				}
+				.upgrade-title-warp-version {
+					background-color: var(--next-color-white);
+					font-size: 12px;
+					position: absolute;
+					display: flex;
+					top: -2px;
+					right: -50px;
+					padding: 2px 4px;
+					border-radius: 2px;
+				}
+			}
+		}
+		.upgrade-content {
+			padding: 20px;
+			line-height: 22px;
+			.upgrade-content-desc {
+				color: var(--el-color-info-light-5);
+				font-size: 12px;
+			}
+		}
+		.upgrade-btn {
+			border-top: 1px solid var(--el-border-color-lighter, #ebeef5);
+			display: flex;
+			justify-content: space-around;
+			padding: 15px 20px;
+			.el-button {
+				width: 100%;
+			}
+		}
+	}
+}
+</style>

Web/src/theme/index.scss

@@ -2,7 +2,6 @@
 @import 'common/transition.scss';
 @import './other.scss';
 @import './element.scss';
-@import './iconSelector.scss';
 @import './media/media.scss';
 @import './waves.scss';
 @import './dark.scss';

Web/src/views/error/401.vue

@@ -4,17 +4,17 @@
 			<div class="error-flex">
 				<div class="left">
 					<div class="left-item">
-						<div class="left-item-animation left-item-num">401</div>
-						<div class="left-item-animation left-item-title">{{ $t('message.noAccess.accessTitle') }}</div>
-						<div class="left-item-animation left-item-msg">{{ $t('message.noAccess.accessMsg') }}</div>
+						<div class="left-item-animation left-item-num">404</div>
+						<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
+						<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
 						<div class="left-item-animation left-item-btn">
-							<el-button type="primary" size="default" round @click="onSetAuth">{{ $t('message.noAccess.accessBtn') }}</el-button>
+							<el-button type="primary" size="default" round @click="onGoHome">{{ $t('message.notFound.foundBtn') }}</el-button>
 						</div>
 					</div>
 				</div>
 				<div class="right">
 					<img
-						src="https://img-blog.csdnimg.cn/3333f265772a4fa89287993500ecbf96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
+						src="https://img-blog.csdnimg.cn/9eb1d85a417f4ed1ba7107f149ce3da1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
 					/>
 				</div>
 			</div>
@@ -22,15 +22,15 @@
 	</div>
 </template>
 
-<script setup lang="ts" name="noPower">
-import { Session } from '/@/utils/storage';
+<script setup lang="ts" name="notFound">
+import { useRouter } from 'vue-router';
 
-const onSetAuth = () => {
-	// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
-	// 清除缓存/token等
-	Session.clear();
-	// 使用 reload 时，不需要调用 resetRoute() 重置路由
-	window.location.reload();
+// 定义变量内容
+const router = useRouter();
+
+// 返回首页
+const onGoHome = () => {
+	router.push('/');
 };
 </script>
 

Web/src/views/home/index.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script setup lang="ts" name="home">
-import { reactive, onMounted, ref, watch, nextTick, onActivated } from 'vue';
+import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
 import * as echarts from 'echarts';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -183,7 +183,7 @@ const state = reactive({
 // 折线图
 const initLineChart = () => {
 	if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
-	state.global.homeChartOne = echarts.init(homeLineRef.value, state.charts.theme);
+	state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
 	const option = {
 		backgroundColor: state.charts.bgColor,
 		title: {
@@ -265,7 +265,7 @@ const initLineChart = () => {
 // 饼图
 const initPieChart = () => {
 	if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
-	state.global.homeChartTwo = echarts.init(homePieRef.value, state.charts.theme);
+	state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
 	var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
 	var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
 	var data = [];
@@ -350,7 +350,7 @@ const initPieChart = () => {
 // 柱状图
 const initBarChart = () => {
 	if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
-	state.global.homeCharThree = echarts.init(homeBarRef.value, state.charts.theme);
+	state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
 	const option = {
 		backgroundColor: state.charts.bgColor,
 		title: {

Web/src/views/make/tableDemo/index.vue

@@ -100,7 +100,6 @@ const onTablePageChange = (page: TableDemoPageType) => {
 const onSortHeader = (data: TableHeaderType[]) => {
 	state.tableData.header = data;
 };
-
 // 页面加载时
 onMounted(() => {
 	getTableData();

Web/vite.config.ts

@@ -58,6 +58,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 			__VUE_I18N_LEGACY_API__: JSON.stringify(false),
 			__VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
 			__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
+			__VERSION__: JSON.stringify(process.env.npm_package_version),
 		},
 	};
 });