admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(theme): 优化主题样式并移除冗余代码

Browse Source 
- 将 @import 替换为 @use，提高代码的可维护性
- 统一使用 index 作为命名空间，避免变量名冲突
- 移除不必要的注释和空格，精简代码
- 删除未使用的 isSocketOpen 属性，简化数据结构
This commit is contained in:
李小涛
2025-06-25 10:42:01 +08:00
parent ef48bdd0df
commit ac3bfb6b80
20 changed files with 77 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/layout/navBars/breadcrumb/user.vue
View File

@@ -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 }">
<el-badge is-dot class="item online-status">
<img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
</el-badge>
</span>
{{ 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) {

1
web/src/stores/interface/index.ts
View File

@@ -23,7 +23,6 @@ export interface UserInfosState {
}
export interface UserInfosStates {
userInfos: UserInfosState;
isSocketOpen: boolean
}
// 路由缓存列表

1
web/src/stores/userInfo.ts
View File

@@ -32,7 +32,6 @@ export const useUserInfo = defineStore('userInfo', {
},
],
},
isSocketOpen: false
}),
actions: {
async setPwdChangeCount(count: number) {

4
web/src/theme/element.scss
View File

@@ -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,

16
web/src/theme/index.scss
View File

@@ -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';

8
web/src/theme/media/chart.scss
View File

@@ -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;

4
web/src/theme/media/cityLinkage.scss
View File

@@ -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%;

4
web/src/theme/media/date.scss
View File

@@ -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;

2
web/src/theme/media/dialog.scss
View File

@@ -1,4 +1,4 @@
@import './index.scss';
@use './index.scss' as index;
/* 页面宽度小于800px
------------------------------- */

8
web/src/theme/media/error.scss
View File

@@ -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;

4
web/src/theme/media/form.scss
View File

@@ -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;

6
web/src/theme/media/home.scss
View File

@@ -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;
}

6
web/src/theme/media/layout.scss
View File

@@ -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;

8
web/src/theme/media/login.scss
View File

@@ -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 {

26
web/src/theme/media/media.scss
View File

@@ -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';

4
web/src/theme/media/pagination.scss
View File

@@ -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;

4
web/src/theme/media/personal.scss
View File

@@ -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;

4
web/src/theme/media/scrollbar.scss
View File

@@ -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;

4
web/src/theme/media/tagsView.scss
View File

@@ -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;

20
web/src/views/system/personal/index.vue
View File

@@ -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>
@@ -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 || '';
@@ -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;
}
}