'admin-22.07.10:发布v2.2.0版本，具体查看master分支根目录CHANGELOG.md'

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 2.2.0
+
+`2022.07.10`
+
+⚡⚡⚡ [/sec/stores/userInfo.ts](https://gitee.com/lyt-top/vue-next-admin/blob/master/src/stores/userInfo.ts) 下添加了 `getApiUserInfo` 接口模拟数据 `setTimeout` 为 3 秒
+
+- 🌟 更新 依赖更新最新版本
+- 🐞 修复 [主界面重新授权按钮点击卡死不跳转登录界面#I5C3JS](https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS)，感谢[@Hero-Typ](https://gitee.com/tian_yu_peng)
+- 🐞 修复 编译警告[#I5CVSB](https://gitee.com/lyt-top/vue-next-admin/issues/I5CVSB)，全局替换成 `:deep(attr)`，感谢[@Linvas](https://gitee.com/linvas)。参考文档：[vue3 sfc-style](https://v3.cn.vuejs.org/api/sfc-style.html#style-scoped)。`node_modules\print-js\dist\print.js` 需 `print-js` 作者适配或去除 `package.json` 中的 `"print-js": "^1.6.0"`
+- 🐞 修复 [vue-next-admin-template-js 版本前端控制路由：userInfo.js 请求用户信息接口报错，加载不到路由 可以写个定时器模拟一下接口 一样的报错#I5F1HP](https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP)，感谢[@白开水](https://gitee.com/libin951223)
+
 ## 2.1.1
 
 `2022.05.27`

README.md

@@ -76,6 +76,7 @@ cnpm run build
   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>
 
   <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"/>
@@ -86,6 +87,9 @@ cnpm run build
   <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>
 
 #### 💒 集成后端
 
@@ -97,6 +101,7 @@ cnpm run build
 - <a target="_blank" href="https://gitee.com/zsvg/vboot-net">@zsvg vboot-net</a>
 - <a target="_blank" href="https://gitee.com/zsvg/vboot-java">@zsvg vboot-java</a>
 - <a target="_blank" href="https://gitee.com/wonderful-code/buildadmin">@青红造了个白 buildadmin</a>
+- <a target="_blank" href="https://github.com/xiaodingding/iotfast">@Goodwell iotfast(一个开源的物联网平台)</a>
 
 #### ❤️ 鸣谢列表
 
@@ -130,7 +135,7 @@ cnpm run build
 特别感谢老哥们的建议、指导与帮忙。谢谢！
 
 - <a href="https://gitee.com/click33/sa-plus" target="_blank">@省长</a>
-- <a href="https://gitee.com/jskz/Jskz-SpringCloud" target="_blank">@唐参
+- <a href="https://gitee.com/jskz/Jskz-SpringCloud" target="_blank">@唐参</a>
 - <a href="https://gitee.com/chuange" target="_blank">@川歌</a>
 - @华仔
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "2.1.1",
+	"version": "2.2.0",
 	"description": "vue3 vite next admin template",
 	"author": "lyt_20201208",
 	"license": "MIT",
@@ -10,15 +10,15 @@
 		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
 	},
 	"dependencies": {
-		"@element-plus/icons-vue": "^2.0.3",
+		"@element-plus/icons-vue": "^2.0.6",
 		"@wangeditor/editor": "^5.1.1",
 		"axios": "^0.27.2",
-		"countup.js": "^2.2.0",
+		"countup.js": "^2.3.2",
 		"cropperjs": "^1.5.12",
-		"echarts": "^5.3.2",
+		"echarts": "^5.3.3",
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^2.2.2",
+		"element-plus": "^2.2.9",
 		"js-cookie": "^3.0.1",
 		"jsplumb": "^2.15.6",
 		"mitt": "^3.0.0",
@@ -26,32 +26,32 @@
 		"pinia": "^2.0.14",
 		"print-js": "^1.6.0",
 		"qrcodejs2-fixes": "^0.0.2",
-		"screenfull": "^6.0.1",
+		"screenfull": "^6.0.2",
 		"sortablejs": "^1.15.0",
 		"splitpanes": "^3.1.1",
-		"vue": "^3.2.36",
+		"vue": "^3.2.37",
 		"vue-clipboard3": "^2.0.0",
 		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.1.10",
-		"vue-router": "^4.0.15"
+		"vue-router": "^4.1.1"
 	},
 	"devDependencies": {
-		"@types/node": "^17.0.39",
+		"@types/node": "^18.0.3",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.13.0",
-		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/eslint-plugin": "^5.30.5",
-		"@typescript-eslint/parser": "^5.27.0",
+		"@typescript-eslint/parser": "^5.30.5",
 		"@vitejs/plugin-vue": "^2.3.3",
-		"@vue/compiler-sfc": "^3.2.36",
+		"@vue/compiler-sfc": "^3.2.37",
 		"dotenv": "^16.0.1",
-		"eslint": "^8.17.0",
+		"eslint": "^8.19.0",
-		"eslint-plugin-vue": "^9.1.0",
+		"eslint-plugin-vue": "^9.2.0",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
-		"sass": "^1.52.2",
+		"sass": "^1.53.0",
-		"sass-loader": "^13.0.0",
+		"sass-loader": "^13.0.2",
-		"typescript": "^4.7.3",
+		"typescript": "^4.7.4",
-		"vite": "^2.9.9",
+		"vite": "^2.9.14",
-		"vue-eslint-parser": "^9.0.2"
+		"vue-eslint-parser": "^9.0.3"
 	},
 	"browserslist": [
 		"> 1%",

src/components/noticeBar/index.vue

@@ -172,7 +172,7 @@ export default defineComponent({
 			.notice-bar-warp-slot {
 				width: 100%;
 				white-space: nowrap;
-				::v-deep(.el-carousel__item) {
+				:deep(.el-carousel__item) {
 					display: flex;
 					align-items: center;
 				}

src/layout/lockScreen/index.vue

@@ -28,7 +28,7 @@
 				<div v-show="isShowLoockLogin" class="layout-lock-screen-login">
 					<div class="layout-lock-screen-login-box">
 						<div class="layout-lock-screen-login-box-img">
-							<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
+							<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
 						</div>
 						<div class="layout-lock-screen-login-box-name">Administrator</div>
 						<div class="layout-lock-screen-login-box-value">
@@ -359,11 +359,11 @@ export default defineComponent({
 		}
 	}
 }
-::v-deep(.el-input-group__append) {
+:deep(.el-input-group__append) {
 	background: var(--el-color-white);
 	padding: 0px 15px;
 }
-::v-deep(.el-input__inner) {
+:deep(.el-input__inner) {
 	border-right-color: var(--el-border-color-extra-light);
 	&:hover {
 		border-color: var(--el-border-color-extra-light);

src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -148,11 +148,11 @@ export default defineComponent({
 		font-size: 14px;
 		margin-right: 5px;
 	}
-	::v-deep(.el-breadcrumb__separator) {
+	:deep(.el-breadcrumb__separator) {
 		opacity: 0.7;
 		color: var(--next-bg-topBarColor);
 	}
-	::v-deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
+	:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
 		font-weight: unset !important;
 		color: var(--next-bg-topBarColor);
 		&:hover {

src/layout/navBars/breadcrumb/closeFull.vue

@@ -42,7 +42,7 @@ export default defineComponent({
 		background: rgba(0, 0, 0, 0.1);
 		transition: all 0.3s ease;
 		position: relative;
-		::v-deep(i) {
+		:deep(i) {
 			position: absolute;
 			left: 10px;
 			top: 35px;
@@ -52,7 +52,7 @@ export default defineComponent({
 	}
 	&:hover {
 		transition: all 0.3s ease;
-		::v-deep(i) {
+		:deep(i) {
 			color: var(--el-color-primary);
 			transition: all 0.3s ease;
 		}

src/layout/navBars/breadcrumb/search.vue

@@ -122,12 +122,12 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-search-dialog {
-	::v-deep(.el-dialog) {
+	:deep(.el-dialog) {
 		box-shadow: unset !important;
 		border-radius: 0 !important;
 		background: rgba(0, 0, 0, 0.5);
 	}
-	::v-deep(.el-autocomplete) {
+	:deep(.el-autocomplete) {
 		width: 560px;
 		position: absolute;
 		top: 100px;

src/layout/navBars/breadcrumb/setings.vue

@@ -679,7 +679,7 @@ export default defineComponent({
 .layout-breadcrumb-seting-bar {
 	height: calc(100vh - 50px);
 	padding: 0 15px;
-	::v-deep(.el-scrollbar__view) {
+	:deep(.el-scrollbar__view) {
 		overflow-x: hidden !important;
 	}
 	.layout-breadcrumb-seting-bar-flex {

src/layout/navBars/breadcrumb/user.vue

@@ -160,7 +160,8 @@ export default defineComponent({
 					},
 				})
 					.then(async () => {
-						Session.clear(); // 清除缓存/token等
+						// 清除缓存/token等
+						Session.clear();
 						// 使用 reload 时，不需要调用 resetRoute() 重置路由
 						window.location.reload();
 					})
@@ -282,16 +283,16 @@ export default defineComponent({
 			}
 		}
 	}
-	::v-deep(.el-dropdown) {
+	:deep(.el-dropdown) {
 		color: var(--next-bg-topBarColor);
 	}
-	::v-deep(.el-badge) {
+	:deep(.el-badge) {
 		height: 40px;
 		line-height: 40px;
 		display: flex;
 		align-items: center;
 	}
-	::v-deep(.el-badge__content.is-fixed) {
+	:deep(.el-badge__content.is-fixed) {
 		top: 12px;
 	}
 }

src/layout/navBars/breadcrumb/userNews.vue

@@ -108,7 +108,7 @@ export default defineComponent({
 			opacity: 1;
 		}
 	}
-	::v-deep(.el-empty__description p) {
+	:deep(.el-empty__description p) {
 		font-size: 13px;
 	}
 }

src/layout/navBars/tagsView/tagsView.vue

@@ -607,7 +607,7 @@ export default defineComponent({
 	border-bottom: 1px solid var(--next-border-color-light);
 	position: relative;
 	z-index: 4;
-	::v-deep(.el-scrollbar__wrap) {
+	:deep(.el-scrollbar__wrap) {
 		overflow-x: auto !important;
 	}
 	&-ul {

src/layout/navMenu/horizontal.vue

@@ -141,10 +141,10 @@ export default defineComponent({
 	flex: 1;
 	overflow: hidden;
 	margin-right: 30px;
-	::v-deep(.el-scrollbar__bar.is-vertical) {
+	:deep(.el-scrollbar__bar.is-vertical) {
 		display: none;
 	}
-	::v-deep(a) {
+	:deep(a) {
 		width: 100%;
 	}
 	.el-menu.el-menu--horizontal {

src/router/backEnd.ts

@@ -33,14 +33,14 @@ const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...lay
  * @method setAddRoute 添加动态路由
  * @method setFilterMenuAndCacheTagsViewRoutes 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
  */
-
 export async function initBackEndControlRoutes() {
 	// 界面 loading 动画开始执行
 	if (window.nextLoading === undefined) NextLoading.start();
 	// 无 token 停止执行下一步
 	if (!Session.get('token')) return false;
 	// 触发初始化用户信息 pinia
-	useUserInfo().setUserInfos();
+	// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
+	await useUserInfo().setUserInfos();
 	// 获取路由菜单数据
 	const res = await getBackEndControlRoutes();
 	// 存储接口原始路由（未处理component），根据需求选择使用

src/router/frontEnd.ts

@@ -24,7 +24,8 @@ export async function initFrontEndControlRoutes() {
 	// 无 token 停止执行下一步
 	if (!Session.get('token')) return false;
 	// 触发初始化用户信息 pinia
-	useUserInfo(pinia).setUserInfos();
+	// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
+	await useUserInfo(pinia).setUserInfos();
 	// 添加动态路由
 	await setAddRoute();
 	// 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组

src/router/index.ts

@@ -85,9 +85,6 @@ export function formatTwoStageRoutes(arr: any) {
 	return newArr;
 }
 
-// isRequestRoutes 为 true，则开启后端控制路由，路径：`/src/stores/themeConfig.ts`
-if (!isRequestRoutes) initFrontEndControlRoutes();
-
 // 路由加载前
 router.beforeEach(async (to, from, next) => {
 	NProgress.configure({ showSpinner: false });
@@ -114,6 +111,10 @@ router.beforeEach(async (to, from, next) => {
 					// 动态添加路由：防止非首页刷新时跳转回首页的问题
 					// 确保 addRoute() 时动态添加的路由已经被完全加载上去
 					next({ ...to, replace: true });
+				} else {
+					// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
+					await initFrontEndControlRoutes();
+					next({ ...to, replace: true });
 				}
 			} else {
 				next();

src/router/route.ts

@@ -1164,18 +1164,6 @@ export const notFoundAndNoPower = [
  * @returns 返回路由菜单数据
  */
 export const staticRoutes: Array<RouteRecordRaw> = [
-	{
-		path: '/',
-		name: '/',
-		component: () => import('/@/layout/index.vue'),
-		meta: {
-			title: '布局界面',
-		},
-		children: [
-			// 请不要往这里 `children` 中添加内容，此内容为了防止 No match found for location with path "xxx" 问题
-			...notFoundAndNoPower,
-		],
-	},
 	{
 		path: '/login',
 		name: 'login',

src/stores/userInfo.ts

@@ -19,6 +19,19 @@ export const useUserInfo = defineStore('userInfo', {
 	}),
 	actions: {
 		async setUserInfos() {
+			// 存储用户信息到浏览器缓存
+			if (Session.get('userInfo')) {
+				this.userInfos = Session.get('userInfo');
+			} else {
+				const userInfos: any = await this.getApiUserInfo();
+				this.userInfos = userInfos;
+			}
+		},
+		// 模拟接口数据
+		// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
+		async getApiUserInfo() {
+			return new Promise((resolve) => {
+				setTimeout(() => {
 					// 模拟数据，请求接口时，记得删除多余代码及对应依赖的引入
 					const userName = Cookies.get('userName');
 					// 模拟数据
@@ -45,20 +58,15 @@ export const useUserInfo = defineStore('userInfo', {
 						userName: userName,
 						photo:
 							userName === 'admin'
-						? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
+								? 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
-						: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
+								: 'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
 						time: new Date().getTime(),
 						roles: defaultRoles,
 						authBtnList: defaultAuthBtnList,
 					};
-			// 存储用户信息到浏览器缓存
+					resolve(userInfos);
-			Session.set('userInfo', userInfos);
+				}, 3000);
-
+			});
-			if (Session.get('userInfo')) {
-				this.userInfos = Session.get('userInfo');
-			} else {
-				this.userInfos = userInfos;
-			}
 		},
 	},
 });

src/views/chart/chart.scss

@@ -412,15 +412,15 @@
 									flex: 1;
 									width: 100%;
 									margin-left: 10px;
-									::v-deep(.el-progress__text) {
+									:deep(.el-progress__text) {
 										color: var(--el-text-color-primary);
 										font-size: 12px !important;
 										text-align: right;
 									}
-									::v-deep(.el-progress-bar__outer) {
+									:deep(.el-progress-bar__outer) {
 										background-color: rgba(0, 0, 0, 0.1) !important;
 									}
-									::v-deep(.el-progress-bar) {
+									:deep(.el-progress-bar) {
 										margin-right: -22px !important;
 									}
 								}

src/views/error/401.vue

@@ -22,7 +22,6 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
@@ -35,10 +34,12 @@ export default defineComponent({
 		const storesTagsViewRoutes = useTagsViewRoutes();
 		const { themeConfig } = storeToRefs(storesThemeConfig);
 		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		const router = useRouter();
 		const onSetAuth = () => {
+			// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
+			// 清除缓存/token等
 			Session.clear();
-			router.push('/login');
+			// 使用 reload 时，不需要调用 resetRoute() 重置路由
+			window.location.reload();
 		};
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {

src/views/fun/tagsView/index.vue

@@ -110,7 +110,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .fun-tagsview {
 	.fun-tagsview-from-item {
-		::v-deep(.el-form-item__content) {
+		:deep(.el-form-item__content) {
 			margin-left: 0 !important;
 		}
 	}

src/views/limits/frontEnd/page/index.vue

@@ -48,7 +48,7 @@ export default defineComponent({
 			frontEndsResetRoute();
 			Cookies.set('userName', state.userAuth);
 			// 模拟切换不同权限用户
-			storesUserInfo.setUserInfos();
+			await storesUserInfo.setUserInfos();
 			await setAddRoute();
 			setFilterMenuAndCacheTagsViewRoutes();
 		};

src/views/login/component/scan.vue

@@ -47,7 +47,7 @@ export default defineComponent({
 	text-align: center;
 	@extend .login-scan-animation;
 	animation-delay: 0.1s;
-	::v-deep(img) {
+	:deep(img) {
 		margin: auto;
 	}
 	.login-msg {

src/views/pages/filtering/index.vue

@@ -328,7 +328,7 @@ export default defineComponent({
 				}
 			}
 		}
-		::v-deep(.el-card__body) {
+		:deep(.el-card__body) {
 			height: 100%;
 			.filtering-no-data {
 				display: flex;

src/views/pages/preview/index.vue

@@ -13,10 +13,10 @@ export default defineComponent({
 	name: 'pagesPreview',
 	setup() {
 		const state = reactive({
-			url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
+			url: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
 			srcList: [
-				'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
+				'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
-				'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
+				'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
 				'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
 			],
 		});

src/views/pages/tree/index.vue

@@ -236,7 +236,7 @@ export default defineComponent({
 			padding-right: 8px;
 			width: 100%;
 		}
-		&::v-deep(.el-tree-node) {
+		&:deep(.el-tree-node) {
 			border: 1px solid var(--next-border-color-light);
 			border-bottom: none;
 			color: #606266;

src/views/pages/workflow/component/drawer/node.vue

@@ -240,7 +240,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .workflow-drawer-node {
-	::v-deep {
+	:deep {
 		.el-tabs {
 			box-shadow: unset;
 			border: unset;

src/views/pages/workflow/index.vue

@@ -200,7 +200,7 @@ export default defineComponent({
 		};
 		// 左侧导航-初始化拖动
 		const initSortable = () => {
-			state.leftNavRefs.forEach(v => {
+			state.leftNavRefs.forEach((v) => {
 				Sortable.create(v as HTMLDivElement, {
 					group: {
 						name: 'vue-next-admin-1',
@@ -555,7 +555,7 @@ export default defineComponent({
 				width: 220px;
 				height: 100%;
 				border-right: 1px solid var(--el-border-color-light, #ebeef5);
-				::v-deep(.el-collapse-item__content) {
+				:deep(.el-collapse-item__content) {
 					padding-bottom: 0;
 				}
 				.workflow-left-title {
@@ -654,7 +654,7 @@ export default defineComponent({
 						color: var(--el-color-primary);
 					}
 				}
-				::v-deep(.jtk-overlay):not(.aLabel) {
+				:deep(.jtk-overlay):not(.aLabel) {
 					padding: 4px 10px;
 					border: 1px solid var(--el-border-color-light, #ebeef5) !important;
 					color: var(--el-text-color-secondary) !important;
@@ -662,7 +662,7 @@ export default defineComponent({
 					border-radius: 3px;
 					font-size: 10px;
 				}
-				::v-deep(.jtk-overlay.workflow-right-empty-label) {
+				:deep(.jtk-overlay.workflow-right-empty-label) {
 					display: none;
 				}
 			}

src/views/personal/index.vue

@@ -7,7 +7,7 @@
 					<div class="personal-user">
 						<div class="personal-user-left">
 							<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
-								<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
+								<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
 							</el-upload>
 						</div>
 						<div class="personal-user-right">
@@ -233,7 +233,7 @@ export default defineComponent({
 			width: 100px;
 			height: 130px;
 			border-radius: 3px;
-			::v-deep(.el-upload) {
+			:deep(.el-upload) {
 				height: 100%;
 			}
 			.personal-user-left-upload {

src/views/tools/index.vue

@@ -481,7 +481,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .tools-warp-form {
-	::v-deep(.el-form-item--small.el-form-item) {
+	:deep(.el-form-item--small.el-form-item) {
 		margin-bottom: 0 !important;
 	}
 	.tools-warp-form-msg {

src/views/visualizing/demo1.vue

@@ -970,10 +970,10 @@ $titleWidth: 240px;
 	height: 100%;
 	width: 100%;
 	position: relative;
-	::v-deep(.BMap_cpyCtrl) {
+	:deep(.BMap_cpyCtrl) {
 		display: none;
 	}
-	::v-deep(.anchorBL) {
+	:deep(.anchorBL) {
 		display: none;
 	}
 	.visualizing-container {

src/views/visualizing/demo2.vue

@@ -853,7 +853,7 @@ export default defineComponent({
 			.ml15:hover {
 				cursor: pointer;
 			}
-			::v-deep(.el-dropdown) {
+			:deep(.el-dropdown) {
 				font-size: 13px !important;
 				color: #43bdf0;
 				cursor: pointer;