admin-vben/src/layouts/default/feature/index.vue

71 lines
2.1 KiB
Vue

<template>
<LayoutLockPage />
<BackTop v-if="getUseOpenBackTop" :target="getTarget" />
<SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
<SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue'
import { BackTop } from 'ant-design-vue'
import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
import { useDesign } from '@/hooks/web/useDesign'
import { useUserStoreWithOut } from '@/store/modules/user'
import { SettingButtonPositionEnum } from '@/enums/appEnum'
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
import SessionTimeoutLogin from '@/views/base/login/SessionTimeoutLogin.vue'
const LayoutLockPage = createAsyncComponent(() => import('@/views/base/lock/index.vue'))
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))
defineOptions({ name: 'LayoutFeatures' })
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting()
const userStore = useUserStoreWithOut()
const { prefixCls } = useDesign('setting-drawer-feature')
const { getShowHeader } = useHeaderSetting()
const getTarget = () => document.body
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)
const getIsFixedSettingDrawer = computed(() => {
if (!unref(getShowSettingButton)) {
return false
}
const settingButtonPosition = unref(getSettingButtonPosition)
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
return !unref(getShowHeader) || unref(getFullContent)
}
return settingButtonPosition === SettingButtonPositionEnum.FIXED
})
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-feature';
.@{prefix-cls} {
position: absolute;
top: 45%;
right: 0;
z-index: 10;
display: flex;
padding: 10px;
color: @white;
cursor: pointer;
background-color: @primary-color;
border-radius: 6px 0 0 6px;
justify-content: center;
align-items: center;
svg {
width: 1em;
height: 1em;
}
}
</style>