diff --git a/web/src/layout/navBars/breadcrumb/user.vue b/web/src/layout/navBars/breadcrumb/user.vue
index 92e68c6c7a7dfc4c46fcba1f815797f34f516432..06b0effe643315de8705adf5bb29b7acf1f70333 100644
--- a/web/src/layout/navBars/breadcrumb/user.vue
+++ b/web/src/layout/navBars/breadcrumb/user.vue
@@ -60,11 +60,9 @@
 		<div></div>
 		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
 			<span class="layout-navbars-breadcrumb-user-link">
-				<span v-if="isSocketOpen">
-					<el-badge is-dot class="item" :class="{ 'online-status': isSocketOpen, 'online-down': !isSocketOpen }">
-						<img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
-					</el-badge>
-				</span>
+				<el-badge is-dot class="item online-status">
+					<img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+				</el-badge>
 				{{ userInfos.username === '' ? 'common' : userInfos.username }}
 				<el-icon class="el-icon--right">
 					<ele-ArrowDown />
@@ -125,9 +123,6 @@ const layoutUserFlexNum = computed(() => {
 	return num;
 });
 
-// 定义变量内容
-const { isSocketOpen } = storeToRefs(useUserInfo());
-
 // 全屏点击时
 const onScreenfullClick = () => {
 	if (!screenfull.isEnabled) {
diff --git a/web/src/stores/interface/index.ts b/web/src/stores/interface/index.ts
index 9f73c9212b370fc1118808a5d05c6f24590dfd7f..5083cf45b02138041181045d0a93dd07e2fba24f 100644
--- a/web/src/stores/interface/index.ts
+++ b/web/src/stores/interface/index.ts
@@ -23,7 +23,6 @@ export interface UserInfosState {
 }
 export interface UserInfosStates {
 	userInfos: UserInfosState;
-	isSocketOpen: boolean
 }
 
 // 路由缓存列表
diff --git a/web/src/stores/userInfo.ts b/web/src/stores/userInfo.ts
index a33d8cb79395bcc2a373699b018defd6f9fcb22c..bdaf4bc2a436173027fec2925437cef386b10e17 100644
--- a/web/src/stores/userInfo.ts
+++ b/web/src/stores/userInfo.ts
@@ -32,7 +32,6 @@ export const useUserInfo = defineStore('userInfo', {
 				},
 			],
 		},
-		isSocketOpen: false
 	}),
 	actions: {
 		async setPwdChangeCount(count: number) {
diff --git a/web/src/theme/element.scss b/web/src/theme/element.scss
index 6cdebc9ac34229a9da32b2ac9a3c7bb7d508c4f1..741d731ca2acf3fa0d407783fd999c244c822c59 100644
--- a/web/src/theme/element.scss
+++ b/web/src/theme/element.scss
@@ -1,4 +1,4 @@
-@import 'mixins/index.scss';
+@use 'mixins/index.scss' as index;
 
 /* Button 按钮
 ------------------------------- */
@@ -100,7 +100,7 @@
 .el-sub-menu .iconfont,
 .el-menu-item .fa,
 .el-sub-menu .fa {
-	@include generalIcon;
+	@include index.generalIcon;
 }
 // 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
 .el-menu-item.is-active,
diff --git a/web/src/theme/index.scss b/web/src/theme/index.scss
index a94595ce57970141f45c30856b5d70e3d1b0e4d3..80b7ce00000155bd28f71cadbbb87cda05e45e81 100644
--- a/web/src/theme/index.scss
+++ b/web/src/theme/index.scss
@@ -1,8 +1,8 @@
-@import './app.scss';
-@import 'common/transition.scss';
-@import './other.scss';
-@import './element.scss';
-@import './media/media.scss';
-@import './waves.scss';
-@import './dark.scss';
-@import './fa/css/font-awesome.min.css';
+@use './app.scss';
+@use 'common/transition.scss';
+@use './other.scss';
+@use './element.scss';
+@use './media/media.scss';
+@use './waves.scss';
+@use './dark.scss';
+@use './fa/css/font-awesome.min.css';
diff --git a/web/src/theme/media/chart.scss b/web/src/theme/media/chart.scss
index 8485e39c21dcc115a5cff5ec3a6d9fefe488bb5e..79883390c6f99fd174d0216960669f807fdf2e7b 100644
--- a/web/src/theme/media/chart.scss
+++ b/web/src/theme/media/chart.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	.big-data-down-left {
 		width: 100% !important;
 		flex-direction: unset !important;
@@ -51,7 +51,7 @@
 
 /* 页面宽度大于768px小于1200px
 ------------------------------- */
-@media screen and (min-width: $sm) and (max-width: $lg) {
+@media screen and (min-width: index.$sm) and (max-width: index.$lg) {
 	.chart-warp-bottom {
 		.big-data-down-left {
 			width: 50% !important;
@@ -72,7 +72,7 @@
 
 /* 页面宽度小于1200px
 ------------------------------- */
-@media screen and (max-width: $lg) {
+@media screen and (max-width: index.$lg) {
 	.chart-warp-top {
 		.up-left {
 			display: none;
diff --git a/web/src/theme/media/cityLinkage.scss b/web/src/theme/media/cityLinkage.scss
index 1394156ee1d9a3f7d595b8ab3f056b5a1f8704d8..edc6d110ce600133b301c6482e92b5853d0b5bee 100644
--- a/web/src/theme/media/cityLinkage.scss
+++ b/web/src/theme/media/cityLinkage.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于576px
 ------------------------------- */
-@media screen and (max-width: $xs) {
+@media screen and (max-width: index.$xs) {
 	.el-cascader__dropdown.el-popper {
 		overflow: auto;
 		max-width: 100%;
diff --git a/web/src/theme/media/date.scss b/web/src/theme/media/date.scss
index 1a503970683aa0c271d3c318b3b11d8821d16c2a..4b3c5e888c5c7114bccbce386f4f7c2d7676bee4 100644
--- a/web/src/theme/media/date.scss
+++ b/web/src/theme/media/date.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	// 时间选择器适配
 	.el-date-range-picker {
 		width: 100vw;
diff --git a/web/src/theme/media/dialog.scss b/web/src/theme/media/dialog.scss
index 023ccae0eb6439ba7b43cba414c0dd0692bb268f..64355037b65ba4852abee9dbd5285792ffe729d2 100644
--- a/web/src/theme/media/dialog.scss
+++ b/web/src/theme/media/dialog.scss
@@ -1,4 +1,4 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于800px
 ------------------------------- */
diff --git a/web/src/theme/media/error.scss b/web/src/theme/media/error.scss
index f35015fda673cd46a7e03dfc1a76e672f011bc8c..3ee65db472a4bcc7ca0c3e3bea0d56fc0ce072fa 100644
--- a/web/src/theme/media/error.scss
+++ b/web/src/theme/media/error.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	.error {
 		.error-flex {
 			flex-direction: column-reverse !important;
@@ -26,7 +26,7 @@
 
 /* 页面宽度大于768px小于992px
 ------------------------------- */
-@media screen and (min-width: $sm) and (max-width: $md) {
+@media screen and (min-width: index.$sm) and (max-width: index.$md) {
 	.error {
 		.error-flex {
 			padding-left: 30px !important;
@@ -36,7 +36,7 @@
 
 /* 页面宽度小于1200px
 ------------------------------- */
-@media screen and (max-width: $lg) {
+@media screen and (max-width: index.$lg) {
 	.error {
 		.error-flex {
 			padding: 0 30px;
diff --git a/web/src/theme/media/form.scss b/web/src/theme/media/form.scss
index eb1d883072914ba5accf74c5fda8608e304e01d6..ab382f2df7916737a4e8770d25222a8479fac295 100644
--- a/web/src/theme/media/form.scss
+++ b/web/src/theme/media/form.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于576px
 ------------------------------- */
-@media screen and (max-width: $xs) {
+@media screen and (max-width: index.$xs) {
 	.el-form-item__label {
 		width: 100% !important;
 		text-align: left !important;
diff --git a/web/src/theme/media/home.scss b/web/src/theme/media/home.scss
index 5a2417e18d38d7cb47064cf5392ee7726ddfe66a..88a966988a610c611f9579e546e8d15d314face4 100644
--- a/web/src/theme/media/home.scss
+++ b/web/src/theme/media/home.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	.home-media,
 	.home-media-sm {
 		margin-top: 15px;
@@ -11,7 +11,7 @@
 
 /* 页面宽度小于1200px
 ------------------------------- */
-@media screen and (max-width: $lg) {
+@media screen and (max-width: index.$lg) {
 	.home-media-lg {
 		margin-top: 15px;
 	}
diff --git a/web/src/theme/media/layout.scss b/web/src/theme/media/layout.scss
index df8ce56adc69eea4dc199218b1a0ed718f3fbbc0..620991b9f7b312900cb3e27a282ffc3145a25c74 100644
--- a/web/src/theme/media/layout.scss
+++ b/web/src/theme/media/layout.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于576px
 ------------------------------- */
-@media screen and (max-width: $xs) {
+@media screen and (max-width: index.$xs) {
 	// MessageBox 弹框
 	.el-message-box {
 		width: 80% !important;
@@ -11,7 +11,7 @@
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	// Breadcrumb 面包屑
 	.layout-navbars-breadcrumb-hide {
 		display: none;
diff --git a/web/src/theme/media/login.scss b/web/src/theme/media/login.scss
index 29cdbb01917bae22c9a019608e4e2f7432e2bb35..f041ffa3bd32fdebc5d90a30ca40adda56842400 100644
--- a/web/src/theme/media/login.scss
+++ b/web/src/theme/media/login.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于1200px
 ------------------------------- */
-@media screen and (max-width: $lg) and (min-width: $xs) {
+@media screen and (max-width: index.$lg) and (min-width: index.$xs) {
 	.login-container {
 		.login-left {
 			.login-left-img {
@@ -23,7 +23,7 @@
 
 /* 页面宽度小于576px
 ------------------------------- */
-@media screen and (max-width: $xs) {
+@media screen and (max-width: index.$xs) {
 	.login-container {
 		.login-left {
 			display: none;
@@ -59,7 +59,7 @@
 
 /* 页面宽度小于375px
 ------------------------------- */
-@media screen and (max-width: $us) {
+@media screen and (max-width: index.$us) {
 	.login-container {
 		.login-right {
 			.login-right-warp {
diff --git a/web/src/theme/media/media.scss b/web/src/theme/media/media.scss
index bed1c356a2193e185be340cd3351dd7b163a732e..f5f00c744da00881439345008932632938494bb5 100644
--- a/web/src/theme/media/media.scss
+++ b/web/src/theme/media/media.scss
@@ -1,13 +1,13 @@
-@import './login.scss';
-@import './error.scss';
-@import './layout.scss';
-@import './personal.scss';
-@import './tagsView.scss';
-@import './home.scss';
-@import './chart.scss';
-@import './form.scss';
-@import './scrollbar.scss';
-@import './pagination.scss';
-@import './dialog.scss';
-@import './cityLinkage.scss';
-@import './date.scss';
+@use './login.scss';
+@use './error.scss';
+@use './layout.scss';
+@use './personal.scss';
+@use './tagsView.scss';
+@use './home.scss';
+@use './chart.scss';
+@use './form.scss';
+@use './scrollbar.scss';
+@use './pagination.scss';
+@use './dialog.scss';
+@use './cityLinkage.scss';
+@use './date.scss';
diff --git a/web/src/theme/media/pagination.scss b/web/src/theme/media/pagination.scss
index 37af75f265ccbe752f2f09c37e6d23b39a381b2b..107703997bad226927f8980c5a104d30d87b8683 100644
--- a/web/src/theme/media/pagination.scss
+++ b/web/src/theme/media/pagination.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于576px
 ------------------------------- */
-@media screen and (max-width: $xs) {
+@media screen and (max-width: index.$xs) {
 	.el-pager,
 	.el-pagination__jump {
 		display: none !important;
diff --git a/web/src/theme/media/personal.scss b/web/src/theme/media/personal.scss
index 7ec0d4abcc85b515fcb86c4f264670191887ae02..d5c1d8e3c12869006f2b38c4e7f84b0d1d1a16de 100644
--- a/web/src/theme/media/personal.scss
+++ b/web/src/theme/media/personal.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	.personal-info {
 		padding-left: 0 !important;
 		margin-top: 15px;
diff --git a/web/src/theme/media/scrollbar.scss b/web/src/theme/media/scrollbar.scss
index 968a79d59520558d40ca4ffaf6c1a4fee5929fca..9a36d8018911708ab7bb40400d980f2d9c72dc08 100644
--- a/web/src/theme/media/scrollbar.scss
+++ b/web/src/theme/media/scrollbar.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	// 滚动条的宽度
 	::-webkit-scrollbar {
 		width: 3px !important;
diff --git a/web/src/theme/media/tagsView.scss b/web/src/theme/media/tagsView.scss
index b71674ef43f6c877d9cc48705e8fd299910de0a4..ad531daca3cd3715800116eb4280553ae16a0ff9 100644
--- a/web/src/theme/media/tagsView.scss
+++ b/web/src/theme/media/tagsView.scss
@@ -1,8 +1,8 @@
-@import './index.scss';
+@use './index.scss' as index;
 
 /* 页面宽度小于768px
 ------------------------------- */
-@media screen and (max-width: $sm) {
+@media screen and (max-width: index.$sm) {
 	.tags-view-form {
 		.tags-view-form-col {
 			margin-bottom: 20px;
diff --git a/web/src/views/system/personal/index.vue b/web/src/views/system/personal/index.vue
index 216ae770624d353662f437cc3ced6e80eaf8bf95..8241d40df026c754d25a24b1e964d49f0f988249 100644
--- a/web/src/views/system/personal/index.vue
+++ b/web/src/views/system/personal/index.vue
@@ -32,7 +32,7 @@
 										<el-col :xs="24" :sm="24" class="personal-item mb6">
 											<div class="personal-item-label">角色：</div>
 											<div class="personal-item-value">
-												<el-tag v-for="(item, index) in state.personalForm.role_info" :key="index" style="margin-right: 5px;">{{ item.name }}</el-tag>
+												<el-tag v-for="(item, index) in state.personalForm.role_info" :key="index" style="margin-right: 5px">{{ item.name }}</el-tag>
 											</div>
 										</el-col>
 									</el-row>
@@ -84,10 +84,10 @@
 							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
 								<el-form-item label="性别">
 									<el-select v-model="state.personalForm.gender" placeholder="请选择性别" clearable class="w100">
-<!--										<el-option label="男" :value="1"></el-option>-->
-<!--										<el-option label="女" :value="0"></el-option>-->
-<!--										<el-option label="保密" :value="2"></el-option>-->
-                    <el-option v-for="(item,index) in genderList" :key="index" :label="item.label" :value="item.value"></el-option>
+										<!--										<el-option label="男" :value="1"></el-option>-->
+										<!--										<el-option label="女" :value="0"></el-option>-->
+										<!--										<el-option label="保密" :value="2"></el-option>-->
+										<el-option v-for="(item, index) in genderList" :key="index" :label="item.label" :value="item.value"></el-option>
 									</el-select>
 								</el-form-item>
 							</el-col>
@@ -181,8 +181,8 @@ import { Session } from '/@/utils/storage';
 import { useRouter } from 'vue-router';
 import { useUserInfo } from '/@/stores/userInfo';
 import { successMessage } from '/@/utils/message';
-import {dictionary} from "/@/utils/dictionary";
-import {Md5} from "ts-md5";
+import { dictionary } from '/@/utils/dictionary';
+import { Md5 } from 'ts-md5';
 const router = useRouter();
 
 // 头像裁剪组件
@@ -237,7 +237,7 @@ const genderList = ref();
 const getUserInfo = function () {
 	api.GetUserInfo({}).then((res: any) => {
 		const { data } = res;
-    genderList.value = dictionary('gender')
+		genderList.value = dictionary('gender');
 		state.personalForm.avatar = data.avatar || '';
 		state.personalForm.username = data.username || '';
 		state.personalForm.name = data.name || '';
@@ -335,10 +335,10 @@ const settingPassword = () => {
 		if (valid) {
 			api.UpdatePassword(userPasswordInfo).then((res: any) => {
 				ElMessage.success('密码修改成功');
-        setTimeout(() => {
-          Session.remove('token');
-          router.push('/login');
-			}, 1000);
+				setTimeout(() => {
+					Session.remove('token');
+					router.push('/login');
+				}, 1000);
 			});
 		} else {
 			// 校验失败
@@ -369,7 +369,7 @@ const uploadImg = (data: any) => {
 </script>
 
 <style scoped lang="scss">
-@import '/@/theme/mixins/index.scss';
+@use '/@/theme/mixins/index.scss' as mixins;
 .personal {
 	.personal-user {
 		height: 130px;
@@ -400,7 +400,7 @@ const uploadImg = (data: any) => {
 			padding: 0 15px;
 			.personal-title {
 				font-size: 18px;
-				@include text-ellipsis(1);
+				@include mixins.text-ellipsis(1);
 			}
 			.personal-item {
 				display: flex;
@@ -408,10 +408,10 @@ const uploadImg = (data: any) => {
 				font-size: 13px;
 				.personal-item-label {
 					color: var(--el-text-color-secondary);
-					@include text-ellipsis(1);
+					@include mixins.text-ellipsis(1);
 				}
 				.personal-item-value {
-					@include text-ellipsis(1);
+					@include mixins.text-ellipsis(1);
 				}
 			}
 		}
@@ -436,7 +436,7 @@ const uploadImg = (data: any) => {
 					padding-bottom: 10px;
 					.personal-info-li-title {
 						display: inline-block;
-						@include text-ellipsis(1);
+						@include mixins.text-ellipsis(1);
 						color: var(--el-text-color-secondary);
 						text-decoration: none;
 					}
@@ -518,7 +518,7 @@ const uploadImg = (data: any) => {
 					}
 					.personal-edit-safe-item-left-value {
 						color: var(--el-text-color-secondary);
-						@include text-ellipsis(1);
+						@include mixins.text-ellipsis(1);
 						margin-right: 15px;
 					}
 				}