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

11
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 }">
<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) {

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;

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