geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 调整系统主题，隐藏不必要的功能

Browse Source
This commit is contained in:
gaoyunqi
2024-02-23 18:11:24 +08:00
parent df3152d77e
commit b5bdb36c75
7 changed files with 412 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/logo_geg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

164
src/components/Application/src/AppLogo.vue
View File

@ -3,100 +3,96 @@
* @Description: logo component * @Description: logo component
--> -->
<template> <template>
<div class="anticon" :class="getAppLogoClass" @click="goHome"> <div class="anticon" :class="getAppLogoClass" @click="goHome">
<a href="https://www.learun.cn/" target="_blank"> <a href="https://www.learun.cn/" target="_blank">
<img :src="logoConfig.menuLogoUrl || logo" width="24" style="height: 30px" /> <img :src="logoConfig.menuLogoUrl || logo" width="24" style="height: 36px" />
<div class="truncate md:opacity-100" :class="getTitleClass" v-show="showTitle"> <div class="truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
・{{ logoConfig.shortName || title }} {{ sysName }}
</div> </div>
</a> </a>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, unref } from 'vue'; import { computed, ref, unref } from 'vue';
import { useGlobSetting } from '/@/hooks/setting'; import { useGo } from '/@/hooks/web/usePage';
import { useGo } from '/@/hooks/web/usePage'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '/@/hooks/web/useDesign'; import { PageEnum } from '/@/enums/pageEnum';
import { PageEnum } from '/@/enums/pageEnum'; import { useUserStore } from '/@/store/modules/user';
import { useUserStore } from '/@/store/modules/user'; import { useAppStore } from '/@/store/modules/app';
import { useAppStore } from '/@/store/modules/app'; import logo from '/@/assets/images/logo_geg.png';
import logo from '/@/assets/images/logo.svg'; const props = defineProps({
const props = defineProps({ /**
/** * The theme of the current parent component
* The theme of the current parent component */
*/ theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) }, /**
/** * Whether to show title
* Whether to show title */
*/ showTitle: { type: Boolean, default: true },
showTitle: { type: Boolean, default: true }, /**
/** * The title is also displayed when the menu is collapsed
* The title is also displayed when the menu is collapsed */
*/ alwaysShowTitle: { type: Boolean }
alwaysShowTitle: { type: Boolean }, });
});
const { prefixCls } = useDesign('app-logo'); const { prefixCls } = useDesign('app-logo');
const { getCollapsedShowTitle } = useMenuSetting(); const { getCollapsedShowTitle } = useMenuSetting();
const userStore = useUserStore(); const userStore = useUserStore();
const { title } = useGlobSetting(); const go = useGo();
const go = useGo(); const appStore = useAppStore();
const appStore = useAppStore(); const logoConfig = appStore.getLogoConfig;
const logoConfig = appStore.getLogoConfig; const sysName = ref(import.meta.env.VITE_SYSTEM_NAME);
const getAppLogoClass = computed(() => [ const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]);
prefixCls,
props.theme,
{ 'collapsed-show-title': unref(getCollapsedShowTitle) },
]);
const getTitleClass = computed(() => [ const getTitleClass = computed(() => [
`${prefixCls}__title`, `${prefixCls}__title`,
{ {
'xs:opacity-0': !props.alwaysShowTitle, 'xs:opacity-0': !props.alwaysShowTitle
}, }
]); ]);
function goHome() { function goHome() {
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME); go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-app-logo'; @prefix-cls: ~'@{namespace}-app-logo';
.@{prefix-cls} { .@{prefix-cls} {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 7px; padding-left: 7px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
&.light { &.light {
border-bottom: 1px solid @border-color-base; border-bottom: 1px solid @border-color-base;
}
&.collapsed-show-title {
padding-left: 20px;
}
&.light &__title {
color: @primary-color;
}
&.dark &__title {
color: #fff;
}
&__title {
font-size: 20px;
font-weight: 400;
transition: all 0.5s;
line-height: normal;
margin-left: 10px;
}
} }
&.collapsed-show-title { a {
padding-left: 20px; display: flex;
align-items: center;
} }
&.light &__title {
color: @primary-color;
}
&.dark &__title {
color: #0096df;
}
&__title {
font-size: 20px;
font-weight: 400;
transition: all 0.5s;
line-height: normal;
}
}
a {
display: flex;
align-items: center;
}
</style> </style>

560
src/components/SimpleMenu/src/components/menu.less
View File

@ -3,312 +3,312 @@
@submenu-popup-prefix-cls: ~'@{namespace}-menu-submenu-popup'; @submenu-popup-prefix-cls: ~'@{namespace}-menu-submenu-popup';
@transition-time: 0.2s; @transition-time: 0.2s;
@menu-dark-subsidiary-color: rgba(255, 255, 255, 0.7); @menu-dark-subsidiary-color: rgba(255, 255, 255, 0.9);
.light-border { .light-border {
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
display: block; display: block;
width: 2px; width: 2px;
content: ''; content: '';
background-color: @primary-color; background-color: @primary-color;
} }
} }
.@{menu-prefix-cls}-menu-popover { .@{menu-prefix-cls}-menu-popover {
.ant-popover-arrow { .ant-popover-arrow {
display: none; display: none;
}
.ant-popover-inner-content {
padding: 0;
max-height: 100vh;
overflow: auto;
}
.@{menu-prefix-cls} {
&-opened > * > &-submenu-title-icon {
transform: translateY(-50%) rotate(90deg) !important;
} }
&-item, .ant-popover-inner-content {
&-submenu-title { padding: 0;
position: relative; max-height: 100vh;
z-index: 1; overflow: auto;
padding: 12px 20px;
color: @menu-dark-subsidiary-color;
cursor: pointer;
transition: all @transition-time @ease-in-out;
&-icon {
position: absolute;
top: 50%;
right: 18px;
transition: transform @transition-time @ease-in-out;
transform: translateY(-50%) rotate(-90deg);
}
} }
&-dark { .@{menu-prefix-cls} {
.@{menu-prefix-cls}-item, &-opened > * > &-submenu-title-icon {
.@{menu-prefix-cls}-submenu-title { transform: translateY(-50%) rotate(90deg) !important;
// color: @menu-dark-subsidiary-color;
background: @sider-dark-lighten-bg-color;
&:hover {
color: #fff;
} }
&-selected { &-item,
color: #fff; &-submenu-title {
background-color: @primary-color !important; position: relative;
z-index: 1;
padding: 12px 20px;
color: @menu-dark-subsidiary-color;
cursor: pointer;
transition: all @transition-time @ease-in-out;
&-icon {
position: absolute;
top: 50%;
right: 18px;
transition: transform @transition-time @ease-in-out;
transform: translateY(-50%) rotate(-90deg);
}
}
&-dark {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
// color: @menu-dark-subsidiary-color;
background: @sider-dark-lighten-bg-color;
&:hover {
color: #fff;
}
&-selected {
color: #fff;
background-color: @primary-color !important;
}
}
}
&-light {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
color: @text-color-base;
&:hover {
color: @primary-color;
}
&-selected {
z-index: 2;
color: @primary-color;
background-color: fade(@primary-color, 10);
.light-border();
}
}
} }
}
} }
&-light {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
color: @text-color-base;
&:hover {
color: @primary-color;
}
&-selected {
z-index: 2;
color: @primary-color;
background-color: fade(@primary-color, 10);
.light-border();
}
}
}
}
} }
.content(); .content();
.content() { .content() {
.@{menu-prefix-cls} {
position: relative;
display: block;
width: 100%;
padding: 0;
margin: 0;
font-size: @font-size-base;
color: @text-color-base;
list-style: none;
outline: none;
.@{menu-prefix-cls} { .@{menu-prefix-cls} {
background-color: @sider-dark-lighten-bg-color;
}
// .collapse-transition {
// transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
// @transition-time padding-bottom ease-in-out;
// }
&-light {
background-color: #fff;
.@{menu-prefix-cls}-submenu-active {
color: @primary-color !important;
&-border {
.light-border();
}
}
}
&-dark {
.@{menu-prefix-cls}-submenu-active {
color: #fff !important;
}
}
&-item {
position: relative;
z-index: 1;
display: flex;
align-items: center;
font-size: @font-size-base;
color: inherit;
list-style: none;
cursor: pointer;
outline: none;
&:hover,
&:active {
color: inherit;
}
}
&-item > i {
margin-right: 6px;
}
&-submenu-title > i,
&-submenu-title span > i {
margin-right: 8px;
}
// vertical
&-vertical &-item,
&-vertical &-submenu-title {
position: relative;
z-index: 1;
padding: 14px 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover {
color: @primary-color;
}
.@{menu-prefix-cls}-tooltip {
width: calc(100% - 0px);
padding: 12px 0;
text-align: center;
}
.@{menu-prefix-cls}-submenu-popup {
padding: 12px 0;
}
}
&-vertical &-submenu-collapse {
.@{submenu-popup-prefix-cls} {
display: flex;
align-items: center;
justify-content: center;
}
.@{menu-prefix-cls}-submenu-collapsed-show-tit {
flex-direction: column;
}
}
&-vertical&-collapse &-item,
&-vertical&-collapse &-submenu-title {
padding: 0;
}
&-vertical &-submenu-title-icon {
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
}
&-submenu-title-icon {
transition: transform @transition-time @ease-in-out;
}
&-vertical &-opened > * > &-submenu-title-icon {
transform: translateY(-50%) rotate(180deg);
}
&-vertical &-submenu {
&-nested {
padding-left: 20px;
}
.@{menu-prefix-cls}-item {
padding-left: 43px;
}
}
&-light&-vertical &-item {
&-active:not(.@{menu-prefix-cls}-submenu) {
z-index: 2;
color: @primary-color;
background-color: fade(@primary-color, 10);
.light-border();
}
&-active.@{menu-prefix-cls}-submenu {
color: @primary-color;
}
}
&-light&-vertical&-collapse {
> li.@{menu-prefix-cls}-item-active,
.@{menu-prefix-cls}-submenu-active {
position: relative; position: relative;
background-color: fade(@primary-color, 5); display: block;
width: 100%;
padding: 0;
margin: 0;
font-size: @font-size-base;
color: @text-color-base;
list-style: none;
outline: none;
&::after { .@{menu-prefix-cls} {
display: none; background-color: @sider-dark-lighten-bg-color;
}
// .collapse-transition {
// transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
// @transition-time padding-bottom ease-in-out;
// }
&-light {
background-color: #fff;
.@{menu-prefix-cls}-submenu-active {
color: @primary-color !important;
&-border {
.light-border();
}
}
} }
&::before { &-dark {
position: absolute; .@{menu-prefix-cls}-submenu-active {
top: 0; color: #fff !important;
left: 0; }
width: 3px;
height: 100%;
content: '';
background-color: @primary-color;
}
}
}
&-dark&-vertical &-item,
&-dark&-vertical &-submenu-title {
color: @menu-dark-subsidiary-color;
&-active:not(.@{menu-prefix-cls}-submenu) {
color: #fff !important;
background-color: @primary-color !important;
}
&:hover {
color: #5e95ff;
}
}
&-dark&-vertical&-collapse {
> li.@{menu-prefix-cls}-item-active,
.@{menu-prefix-cls}-submenu-active {
position: relative;
color: #fff !important;
background-color: @sider-dark-darken-bg-color !important;
&::before {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
content: '';
background-color: @primary-color;
} }
.@{menu-prefix-cls}-submenu-collapse { &-item {
background-color: transparent; position: relative;
z-index: 1;
display: flex;
align-items: center;
font-size: @font-size-base;
color: inherit;
list-style: none;
cursor: pointer;
outline: none;
&:hover,
&:active {
color: inherit;
}
} }
}
}
&-dark&-vertical &-submenu &-item { &-item > i {
&-active, margin-right: 6px;
&-active:hover { }
color: #fff;
border-right: none; &-submenu-title > i,
} &-submenu-title span > i {
} margin-right: 8px;
}
&-dark&-vertical &-child-item-active > &-submenu-title {
color: #fff; // vertical
} &-vertical &-item,
&-vertical &-submenu-title {
&-dark&-vertical &-opened { position: relative;
.@{menu-prefix-cls}-submenu-has-parent-submenu { z-index: 1;
.@{menu-prefix-cls}-submenu-title { padding: 14px 24px;
background-color: transparent; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover {
color: @primary-color;
}
.@{menu-prefix-cls}-tooltip {
width: calc(100% - 0px);
padding: 12px 0;
text-align: center;
}
.@{menu-prefix-cls}-submenu-popup {
padding: 12px 0;
}
}
&-vertical &-submenu-collapse {
.@{submenu-popup-prefix-cls} {
display: flex;
align-items: center;
justify-content: center;
}
.@{menu-prefix-cls}-submenu-collapsed-show-tit {
flex-direction: column;
}
}
&-vertical&-collapse &-item,
&-vertical&-collapse &-submenu-title {
padding: 0;
}
&-vertical &-submenu-title-icon {
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
}
&-submenu-title-icon {
transition: transform @transition-time @ease-in-out;
}
&-vertical &-opened > * > &-submenu-title-icon {
transform: translateY(-50%) rotate(180deg);
}
&-vertical &-submenu {
&-nested {
padding-left: 20px;
}
.@{menu-prefix-cls}-item {
padding-left: 43px;
}
}
&-light&-vertical &-item {
&-active:not(.@{menu-prefix-cls}-submenu) {
z-index: 2;
color: @primary-color;
background-color: fade(@primary-color, 10);
.light-border();
}
&-active.@{menu-prefix-cls}-submenu {
color: @primary-color;
}
}
&-light&-vertical&-collapse {
> li.@{menu-prefix-cls}-item-active,
.@{menu-prefix-cls}-submenu-active {
position: relative;
background-color: fade(@primary-color, 5);
&::after {
display: none;
}
&::before {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
content: '';
background-color: @primary-color;
}
}
}
&-dark&-vertical &-item,
&-dark&-vertical &-submenu-title {
color: @menu-dark-subsidiary-color;
&-active:not(.@{menu-prefix-cls}-submenu) {
color: #fff !important;
background-color: rgb(0 0 0 / 40%) !important;
}
&:hover {
color: #5e95ff;
}
}
&-dark&-vertical&-collapse {
> li.@{menu-prefix-cls}-item-active,
.@{menu-prefix-cls}-submenu-active {
position: relative;
color: #fff !important;
background-color: @sider-dark-darken-bg-color !important;
&::before {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
content: '';
background-color: @primary-color;
}
.@{menu-prefix-cls}-submenu-collapse {
background-color: transparent;
}
}
}
&-dark&-vertical &-submenu &-item {
&-active,
&-active:hover {
color: #fff;
border-right: none;
}
}
&-dark&-vertical &-child-item-active > &-submenu-title {
color: #fff;
}
&-dark&-vertical &-opened {
.@{menu-prefix-cls}-submenu-has-parent-submenu {
.@{menu-prefix-cls}-submenu-title {
background-color: transparent;
}
}
} }
}
} }
}
} }

18
src/design/color.less
View File

@ -1,13 +1,13 @@
html { html {
// header // header
--header-bg-color: #394664; --header-bg-color: #394664;
--header-bg-hover-color: #273352; --header-bg-hover-color: #273352;
--header-active-menu-bg-color: #273352; --header-active-menu-bg-color: #273352;
// sider // sider
--sider-dark-bg-color: #030523; --sider-dark-bg-color: #002f7b;
--sider-dark-darken-bg-color: #273352; --sider-dark-darken-bg-color: #273352;
--sider-dark-lighten-bg-color: #273352; --sider-dark-lighten-bg-color: #273352;
} }
@white: #fff; @white: #fff;
@ -65,7 +65,7 @@ html {
// let -menu // let -menu
@sider-dark-bg-color: var(--sider-dark-bg-color); @sider-dark-bg-color: var(--sider-dark-bg-color);
@sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color); @sider-dark-darken-bg-color: var(--sider-dark-bg-color);
@sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color); @sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);
// trigger // trigger

6
src/layouts/default/header/index.vue
View File

@ -21,12 +21,11 @@
<div :class="`${prefixCls}-action`"> <div :class="`${prefixCls}-action`">
<LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" /> <LayoutBreadcrumb :theme="getHeaderTheme" v-if="getShowTopMenu && !getIsMobile" />
<AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" /> <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" /> <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" /> <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
<UserPostChange /> <UserPostChange v-if="false" />
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" /> <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" ref="drawer" />
<UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" /> <UserDropDown @menu-click="onMenuClick" :theme="getHeaderTheme" :show-settings="getShowSetting" />
</div> </div>
@ -52,7 +51,7 @@
import { SettingButtonPositionEnum } from '/@/enums/appEnum'; import { SettingButtonPositionEnum } from '/@/enums/appEnum';
import { UserPostChange } from '/@/components/Application'; import { UserPostChange } from '/@/components/Application';
import { LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components'; import { LayoutBreadcrumb, Notify, ErrorAction } from './components';
import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue'; import UserDropDown from '/@/layouts/default/header/components/user-dropdown/DropDown.vue';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
@ -69,7 +68,6 @@
LayoutBreadcrumb, LayoutBreadcrumb,
LayoutMenu, LayoutMenu,
UserDropDown, UserDropDown,
FullScreen,
Notify, Notify,
AppSearch, AppSearch,
ErrorAction, ErrorAction,

42
src/settings/designSetting.ts
View File

@ -5,46 +5,10 @@ export const prefixCls = 'vben';
export const darkMode = ThemeEnum.LIGHT; export const darkMode = ThemeEnum.LIGHT;
// app theme preset color // app theme preset color
export const APP_PRESET_COLOR_LIST: string[] = [ export const APP_PRESET_COLOR_LIST: string[] = ['#5e95ff', '#0960bd', '#0084f4', '#009688', '#536dfe', '#ff5c93', '#ee4f12', '#0096c7', '#9c27b0', '#ff9800'];
'#5e95ff',
'#0960bd',
'#0084f4',
'#009688',
'#536dfe',
'#ff5c93',
'#ee4f12',
'#0096c7',
'#9c27b0',
'#ff9800',
];
// header preset color // header preset color
export const HEADER_PRESET_BG_COLOR_LIST: string[] = [ export const HEADER_PRESET_BG_COLOR_LIST: string[] = ['#07093E', '#ffffff', '#151515', '#009688', '#5172DC', '#018ffb', '#409eff', '#e74c3c', '#24292e', '#394664', '#001529', '#383f45'];
'#07093E',
'#ffffff',
'#151515',
'#009688',
'#5172DC',
'#018ffb',
'#409eff',
'#e74c3c',
'#24292e',
'#394664',
'#001529',
'#383f45',
];
// sider preset color // sider preset color
export const SIDE_BAR_BG_COLOR_LIST: string[] = [ export const SIDE_BAR_BG_COLOR_LIST: string[] = ['#002F7B', '#212121', '#273352', '#ffffff', '#191b24', '#191a23', '#304156', '#001628', '#28333E', '#344058', '#383f45'];
'#07093E',
'#212121',
'#273352',
'#ffffff',
'#191b24',
'#191a23',
'#304156',
'#001628',
'#28333E',
'#344058',
'#383f45',
];

78
src/views/sys/login/SessionTimeoutLogin.vue
View File

@ -1,53 +1,51 @@
<template> <template>
<transition>
<div :class="prefixCls"> <div :class="prefixCls">
<Login sessionTimeout /> <Login sessionTimeout />
</div> </div>
</transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'; import { onBeforeUnmount, onMounted, ref } from 'vue';
import Login from './Login.vue'; import Login from '/@/views/secondDev/Login.vue';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { usePermissionStore } from '/@/store/modules/permission'; import { usePermissionStore } from '/@/store/modules/permission';
import { useAppStore } from '/@/store/modules/app'; import { useAppStore } from '/@/store/modules/app';
import { PermissionModeEnum } from '/@/enums/appEnum'; import { PermissionModeEnum } from '/@/enums/appEnum';
const { prefixCls } = useDesign('st-login'); const { prefixCls } = useDesign('st-login');
const userStore = useUserStore(); const userStore = useUserStore();
const permissionStore = usePermissionStore(); const permissionStore = usePermissionStore();
const appStore = useAppStore(); const appStore = useAppStore();
const userId = ref<Nullable<number | string>>(0); const userId = ref<Nullable<number | string>>(0);
const isBackMode = () => { const isBackMode = () => {
return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK; return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
}; };
onMounted(() => { onMounted(() => {
// 记录当前的UserId // 记录当前的UserId
userId.value = userStore.getUserInfo?.userId; userId.value = userStore.getUserInfo?.userId;
console.log('Mounted', userStore.getUserInfo); console.log('Mounted', userStore.getUserInfo);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (userId.value && userId.value !== userStore.getUserInfo.userId) { if (userId.value && userId.value !== userStore.getUserInfo.userId) {
// 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态 // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
document.location.reload(); document.location.reload();
} else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) { } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {
// 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景 // 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
document.location.reload(); document.location.reload();
} }
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-st-login'; @prefix-cls: ~'@{namespace}-st-login';
.@{prefix-cls} { .@{prefix-cls} {
position: fixed; position: fixed;
z-index: 9999999; z-index: 9999999;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: @component-background; background: @component-background;
} }
</style> </style>