kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: 使用flex布局，优化section区域min-height的繁琐计算

This commit is contained in:
陈财富 2024-01-18 14:53:14 +08:00
parent 28bd10f263
commit fbb6f9ad4b
3 changed files with 10 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer/src/Footer.vue
View File

@ -15,7 +15,7 @@ const title = computed(() => appStore.getTitle)
<template> <template>
<div <div
:class="prefixCls" :class="prefixCls"
class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-content-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]" class="shrink-0 text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-content-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
> >
Copyright ©2021-present {{ title }} Copyright ©2021-present {{ title }}
</div> </div>

8
src/layout/Layout.vue
View File

@ -71,8 +71,14 @@ export default defineComponent({
.@{prefix-cls} { .@{prefix-cls} {
background-color: var(--app-content-bg-color); background-color: var(--app-content-bg-color);
:deep(.@{elNamespace}-scrollbar__view) { .@{prefix-cls}-content-scrollbar {
& > :deep(.el-scrollbar__wrap) {
& > .@{elNamespace}-scrollbar__view {
display: flex;
height: 100% !important; height: 100% !important;
flex-direction: column;
}
}
} }
} }
</style> </style>

33
src/layout/components/AppView.vue
View File

@ -6,10 +6,6 @@ import { computed } from 'vue'
const appStore = useAppStore() const appStore = useAppStore()
const layout = computed(() => appStore.getLayout)
const fixedHeader = computed(() => appStore.getFixedHeader)
const footer = computed(() => appStore.getFooter) const footer = computed(() => appStore.getFooter)
const tagsViewStore = useTagsViewStore() const tagsViewStore = useTagsViewStore()
@ -17,39 +13,12 @@ const tagsViewStore = useTagsViewStore()
const getCaches = computed((): string[] => { const getCaches = computed((): string[] => {
return tagsViewStore.getCachedViews return tagsViewStore.getCachedViews
}) })
const tagsView = computed(() => appStore.getTagsView)
</script> </script>
<template> <template>
<section <section
:class="[ :class="[
'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]', 'flex-1 p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]'
{
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
(fixedHeader &&
(layout === 'classic' || layout === 'topLeft' || layout === 'top') &&
footer) ||
(!tagsView && layout === 'top' && footer),
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
tagsView && layout === 'top' && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
!fixedHeader && layout === 'classic' && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
!fixedHeader && layout === 'topLeft' && footer,
// '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height)-var(--top-tool-height))]':
// !fixedHeader && layout === 'top' && footer,
'!min-h-[calc(100%-var(--app-footer-height)-var(--app-content-padding)-var(--app-content-padding))]':
fixedHeader && layout === 'cutMenu' && footer,
'!min-h-[calc(100%-var(--app-footer-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
!fixedHeader && layout === 'cutMenu' && footer
}
]" ]"
> >
<router-view> <router-view>