From ac3bfb6b80c4d58669acfdeeb286a691a1454905 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=B6=9B?= <1537080775@qq.com> Date: Wed, 25 Jun 2025 10:42:01 +0800 Subject: [PATCH] =?UTF-8?q?refactor(theme):=20=E4=BC=98=E5=8C=96=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F=E5=B9=B6=E7=A7=BB=E9=99=A4=E5=86=97?= =?UTF-8?q?=E4=BD=99=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 @import 替换为 @use，提高代码的可维护性 - 统一使用 index 作为命名空间，避免变量名冲突 - 移除不必要的注释和空格，精简代码 - 删除未使用的 isSocketOpen 属性，简化数据结构 --- web/src/layout/navBars/breadcrumb/user.vue | 11 ++----- web/src/stores/interface/index.ts | 1 - web/src/stores/userInfo.ts | 1 - web/src/theme/element.scss | 4 +-- web/src/theme/index.scss | 16 +++++----- web/src/theme/media/chart.scss | 8 ++--- web/src/theme/media/cityLinkage.scss | 4 +-- web/src/theme/media/date.scss | 4 +-- web/src/theme/media/dialog.scss | 2 +- web/src/theme/media/error.scss | 8 ++--- web/src/theme/media/form.scss | 4 +-- web/src/theme/media/home.scss | 6 ++-- web/src/theme/media/layout.scss | 6 ++-- web/src/theme/media/login.scss | 8 ++--- web/src/theme/media/media.scss | 26 ++++++++-------- web/src/theme/media/pagination.scss | 4 +-- web/src/theme/media/personal.scss | 4 +-- web/src/theme/media/scrollbar.scss | 4 +-- web/src/theme/media/tagsView.scss | 4 +-- web/src/views/system/personal/index.vue | 36 +++++++++++----------- 20 files changed, 77 insertions(+), 84 deletions(-) diff --git a/web/src/layout/navBars/breadcrumb/user.vue b/web/src/layout/navBars/breadcrumb/user.vue index 92e68c6c7..06b0effe6 100644 --- a/web/src/layout/navBars/breadcrumb/user.vue +++ b/web/src/layout/navBars/breadcrumb/user.vue @@ -60,11 +60,9 @@
- - - - - + + + {{ userInfos.username === '' ? 'common' : userInfos.username }} @@ -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 9f73c9212..5083cf45b 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 a33d8cb79..bdaf4bc2a 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 6cdebc9ac..741d731ca 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 a94595ce5..80b7ce000 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 8485e39c2..79883390c 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 1394156ee..edc6d110c 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 1a5039706..4b3c5e888 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 023ccae0e..64355037b 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 f35015fda..3ee65db47 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 eb1d88307..ab382f2df 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 5a2417e18..88a966988 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 df8ce56ad..620991b9f 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 29cdbb019..f041ffa3b 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 bed1c356a..f5f00c744 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 37af75f26..107703997 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 7ec0d4abc..d5c1d8e3c 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 968a79d59..9a36d8018 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 b71674ef4..ad531daca 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 216ae7706..8241d40df 100644 --- a/web/src/views/system/personal/index.vue +++ b/web/src/views/system/personal/index.vue @@ -32,7 +32,7 @@
角色：
- {{ item.name }} + {{ item.name }}
@@ -84,10 +84,10 @@ - - - - + + + + @@ -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) => {