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

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

Browse Source 
Merge pull request !124 from 木子-李/sse
This commit is contained in:
dvadmin
2025-06-25 08:03:25 +00:00
committed by Gitee
parent ef48bdd0df ac3bfb6b80
commit 749f5d80d2
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> <div></div>
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick"> <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link"> <span class="layout-navbars-breadcrumb-user-link">
<span v-if="isSocketOpen"> <el-badge is-dot class="item online-status">
<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" /> <img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
</el-badge> </el-badge>
</span>
{{ userInfos.username === '' ? 'common' : userInfos.username }} {{ userInfos.username === '' ? 'common' : userInfos.username }}
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
<ele-ArrowDown /> <ele-ArrowDown />
@@ -125,9 +123,6 @@ const layoutUserFlexNum = computed(() => {
return num; return num;
}); });
// 定义变量内容
const { isSocketOpen } = storeToRefs(useUserInfo());
// 全屏点击时 // 全屏点击时
const onScreenfullClick = () => { const onScreenfullClick = () => {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {

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

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

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

@@ -32,7 +32,6 @@ export const useUserInfo = defineStore('userInfo', {
}, },
], ],
}, },
isSocketOpen: false
}), }),
actions: { actions: {
async setPwdChangeCount(count: number) { 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 按钮 /* Button 按钮
------------------------------- */ ------------------------------- */
@@ -100,7 +100,7 @@
.el-sub-menu .iconfont, .el-sub-menu .iconfont,
.el-menu-item .fa, .el-menu-item .fa,
.el-sub-menu .fa { .el-sub-menu .fa {
@include generalIcon; @include index.generalIcon;
} }
// 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色 // 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
.el-menu-item.is-active, .el-menu-item.is-active,

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

@@ -1,8 +1,8 @@
@import './app.scss'; @use './app.scss';
@import 'common/transition.scss'; @use 'common/transition.scss';
@import './other.scss'; @use './other.scss';
@import './element.scss'; @use './element.scss';
@import './media/media.scss'; @use './media/media.scss';
@import './waves.scss'; @use './waves.scss';
@import './dark.scss'; @use './dark.scss';
@import './fa/css/font-awesome.min.css'; @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 /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
.big-data-down-left { .big-data-down-left {
width: 100% !important; width: 100% !important;
flex-direction: unset !important; flex-direction: unset !important;
@@ -51,7 +51,7 @@
/* 页面宽度大于768px小于1200px /* 页面宽度大于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 { .chart-warp-bottom {
.big-data-down-left { .big-data-down-left {
width: 50% !important; width: 50% !important;
@@ -72,7 +72,7 @@
/* 页面宽度小于1200px /* 页面宽度小于1200px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $lg) { @media screen and (max-width: index.$lg) {
.chart-warp-top { .chart-warp-top {
.up-left { .up-left {
display: none; display: none;

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

@@ -1,8 +1,8 @@
@import './index.scss'; @use './index.scss' as index;
/* 页面宽度小于576px /* 页面宽度小于576px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $xs) { @media screen and (max-width: index.$xs) {
.el-cascader__dropdown.el-popper { .el-cascader__dropdown.el-popper {
overflow: auto; overflow: auto;
max-width: 100%; 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 /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
// 时间选择器适配 // 时间选择器适配
.el-date-range-picker { .el-date-range-picker {
width: 100vw; width: 100vw;

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

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

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

@@ -1,8 +1,8 @@
@import './index.scss'; @use './index.scss' as index;
/* 页面宽度小于768px /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
.error { .error {
.error-flex { .error-flex {
flex-direction: column-reverse !important; flex-direction: column-reverse !important;
@@ -26,7 +26,7 @@
/* 页面宽度大于768px小于992px /* 页面宽度大于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 {
.error-flex { .error-flex {
padding-left: 30px !important; padding-left: 30px !important;
@@ -36,7 +36,7 @@
/* 页面宽度小于1200px /* 页面宽度小于1200px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $lg) { @media screen and (max-width: index.$lg) {
.error { .error {
.error-flex { .error-flex {
padding: 0 30px; 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 /* 页面宽度小于576px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $xs) { @media screen and (max-width: index.$xs) {
.el-form-item__label { .el-form-item__label {
width: 100% !important; width: 100% !important;
text-align: left !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 /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
.home-media, .home-media,
.home-media-sm { .home-media-sm {
margin-top: 15px; margin-top: 15px;
@@ -11,7 +11,7 @@
/* 页面宽度小于1200px /* 页面宽度小于1200px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $lg) { @media screen and (max-width: index.$lg) {
.home-media-lg { .home-media-lg {
margin-top: 15px; 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 /* 页面宽度小于576px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $xs) { @media screen and (max-width: index.$xs) {
// MessageBox 弹框 // MessageBox 弹框
.el-message-box { .el-message-box {
width: 80% !important; width: 80% !important;
@@ -11,7 +11,7 @@
/* 页面宽度小于768px /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
// Breadcrumb 面包屑 // Breadcrumb 面包屑
.layout-navbars-breadcrumb-hide { .layout-navbars-breadcrumb-hide {
display: none; display: none;

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

@@ -1,8 +1,8 @@
@import './index.scss'; @use './index.scss' as index;
/* 页面宽度小于1200px /* 页面宽度小于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-container {
.login-left { .login-left {
.login-left-img { .login-left-img {
@@ -23,7 +23,7 @@
/* 页面宽度小于576px /* 页面宽度小于576px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $xs) { @media screen and (max-width: index.$xs) {
.login-container { .login-container {
.login-left { .login-left {
display: none; display: none;
@@ -59,7 +59,7 @@
/* 页面宽度小于375px /* 页面宽度小于375px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $us) { @media screen and (max-width: index.$us) {
.login-container { .login-container {
.login-right { .login-right {
.login-right-warp { .login-right-warp {

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

@@ -1,13 +1,13 @@
@import './login.scss'; @use './login.scss';
@import './error.scss'; @use './error.scss';
@import './layout.scss'; @use './layout.scss';
@import './personal.scss'; @use './personal.scss';
@import './tagsView.scss'; @use './tagsView.scss';
@import './home.scss'; @use './home.scss';
@import './chart.scss'; @use './chart.scss';
@import './form.scss'; @use './form.scss';
@import './scrollbar.scss'; @use './scrollbar.scss';
@import './pagination.scss'; @use './pagination.scss';
@import './dialog.scss'; @use './dialog.scss';
@import './cityLinkage.scss'; @use './cityLinkage.scss';
@import './date.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 /* 页面宽度小于576px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $xs) { @media screen and (max-width: index.$xs) {
.el-pager, .el-pager,
.el-pagination__jump { .el-pagination__jump {
display: none !important; 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 /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
.personal-info { .personal-info {
padding-left: 0 !important; padding-left: 0 !important;
margin-top: 15px; 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 /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
// 滚动条的宽度 // 滚动条的宽度
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 3px !important; 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 /* 页面宽度小于768px
------------------------------- */ ------------------------------- */
@media screen and (max-width: $sm) { @media screen and (max-width: index.$sm) {
.tags-view-form { .tags-view-form {
.tags-view-form-col { .tags-view-form-col {
margin-bottom: 20px; margin-bottom: 20px;

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

@@ -32,7 +32,7 @@
<el-col :xs="24" :sm="24" class="personal-item mb6"> <el-col :xs="24" :sm="24" class="personal-item mb6">
<div class="personal-item-label">角色：</div> <div class="personal-item-label">角色：</div>
<div class="personal-item-value"> <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> </div>
</el-col> </el-col>
</el-row> </el-row>
@@ -84,10 +84,10 @@
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="性别"> <el-form-item label="性别">
<el-select v-model="state.personalForm.gender" placeholder="请选择性别" clearable class="w100"> <el-select v-model="state.personalForm.gender" placeholder="请选择性别" clearable class="w100">
<!-- <el-option label="男" :value="1"></el-option>--> <!-- <el-option label="男" :value="1"></el-option>-->
<!-- <el-option label="女" :value="0"></el-option>--> <!-- <el-option label="女" :value="0"></el-option>-->
<!-- <el-option label="保密" :value="2"></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 v-for="(item, index) in genderList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -181,8 +181,8 @@ import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useUserInfo } from '/@/stores/userInfo'; import { useUserInfo } from '/@/stores/userInfo';
import { successMessage } from '/@/utils/message'; import { successMessage } from '/@/utils/message';
import {dictionary} from "/@/utils/dictionary"; import { dictionary } from '/@/utils/dictionary';
import {Md5} from "ts-md5"; import { Md5 } from 'ts-md5';
const router = useRouter(); const router = useRouter();
// 头像裁剪组件 // 头像裁剪组件
@@ -237,7 +237,7 @@ const genderList = ref();
const getUserInfo = function () { const getUserInfo = function () {
api.GetUserInfo({}).then((res: any) => { api.GetUserInfo({}).then((res: any) => {
const { data } = res; const { data } = res;
genderList.value = dictionary('gender') genderList.value = dictionary('gender');
state.personalForm.avatar = data.avatar || ''; state.personalForm.avatar = data.avatar || '';
state.personalForm.username = data.username || ''; state.personalForm.username = data.username || '';
state.personalForm.name = data.name || ''; state.personalForm.name = data.name || '';
@@ -369,7 +369,7 @@ const uploadImg = (data: any) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '/@/theme/mixins/index.scss'; @use '/@/theme/mixins/index.scss' as mixins;
.personal { .personal {
.personal-user { .personal-user {
height: 130px; height: 130px;
@@ -400,7 +400,7 @@ const uploadImg = (data: any) => {
padding: 0 15px; padding: 0 15px;
.personal-title { .personal-title {
font-size: 18px; font-size: 18px;
@include text-ellipsis(1); @include mixins.text-ellipsis(1);
} }
.personal-item { .personal-item {
display: flex; display: flex;
@@ -408,10 +408,10 @@ const uploadImg = (data: any) => {
font-size: 13px; font-size: 13px;
.personal-item-label { .personal-item-label {
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
@include text-ellipsis(1); @include mixins.text-ellipsis(1);
} }
.personal-item-value { .personal-item-value {
@include text-ellipsis(1); @include mixins.text-ellipsis(1);
} }
} }
} }
@@ -436,7 +436,7 @@ const uploadImg = (data: any) => {
padding-bottom: 10px; padding-bottom: 10px;
.personal-info-li-title { .personal-info-li-title {
display: inline-block; display: inline-block;
@include text-ellipsis(1); @include mixins.text-ellipsis(1);
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
text-decoration: none; text-decoration: none;
} }
@@ -518,7 +518,7 @@ const uploadImg = (data: any) => {
} }
.personal-edit-safe-item-left-value { .personal-edit-safe-item-left-value {
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
@include text-ellipsis(1); @include mixins.text-ellipsis(1);
margin-right: 15px; margin-right: 15px;
} }
} }