hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-11-04 20:28:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

!513 【修复】修复top布局模式下主容器高度计算方式、工具栏多出1px、页脚多出1px

Browse Source 
Merge pull request !513 from 半栈幼儿员/hotfix/layout
This commit is contained in:
芋道源码
2024-08-23 11:21:29 +00:00
committed by Gitee
parent 21621fd2d2 8c28b8d2d9
commit be2ca75ef0
4 changed files with 18 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@ const title = computed(() => appStore.getTitle)
<template> <template>
<div <div
:class="prefixCls" :class="prefixCls"
class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)]" class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)] overflow-hidden"
> >
<span class="text-14px">Copyright ©2022-{{ title }}</span> <span class="text-14px">Copyright ©2022-{{ title }}</span>
</div> </div>

6
src/layout/components/TabMenu/src/TabMenu.vue
View File

@@ -139,7 +139,7 @@ export default defineComponent({
id={`${variables.namespace}-menu`} id={`${variables.namespace}-menu`}
class={[ class={[
prefixCls, prefixCls,
'relative bg-[var(--left-menu-bg-color)] top-1px layout-border__right', 'relative bg-[var(--left-menu-bg-color)] layout-border__right',
{ {
'w-[var(--tab-menu-max-width)]': !unref(collapse), 'w-[var(--tab-menu-max-width)]': !unref(collapse),
'w-[var(--tab-menu-min-width)]': unref(collapse) 'w-[var(--tab-menu-min-width)]': unref(collapse)
@@ -147,7 +147,7 @@ export default defineComponent({
]} ]}
onMouseleave={mouseleave} onMouseleave={mouseleave}
> >
<ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height)-1px)]"> <ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height))]">
<div> <div>
{() => { {() => {
return unref(tabRouters).map((v) => { return unref(tabRouters).map((v) => {
@@ -199,7 +199,7 @@ export default defineComponent({
{ {
'!left-[var(--tab-menu-min-width)]': unref(collapse), '!left-[var(--tab-menu-min-width)]': unref(collapse),
'!left-[var(--tab-menu-max-width)]': !unref(collapse), '!left-[var(--tab-menu-max-width)]': !unref(collapse),
'!w-[calc(var(--left-menu-max-width)+1px)]': unref(showMenu) || unref(fixedMenu), '!w-[var(--left-menu-max-width)]': unref(showMenu) || unref(fixedMenu),
'!w-0': !unref(showMenu) && !unref(fixedMenu) '!w-0': !unref(showMenu) && !unref(fixedMenu)
} }
]} ]}

38
src/layout/components/useRenderLayout.tsx
View File

@@ -126,7 +126,7 @@ export const useRenderLayout = () => {
<ToolHeader class="flex-1"></ToolHeader> <ToolHeader class="flex-1"></ToolHeader>
</div> </div>
<div class="absolute left-0 top-[var(--logo-height)+1px] h-[calc(100%-1px-var(--logo-height))] w-full flex"> <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
<Menu class="relative layout-border__right !h-full"></Menu> <Menu class="relative layout-border__right !h-full"></Menu>
<div <div
class={[ class={[
@@ -157,9 +157,9 @@ export const useRenderLayout = () => {
'layout-border__bottom absolute', 'layout-border__bottom absolute',
{ {
'!fixed top-0 left-0 z-10': fixedHeader.value, '!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[calc(var(--logo-height)+1px)]': 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value, collapse.value && fixedHeader.value,
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[calc(var(--logo-height)+1px)]': 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value !collapse.value && fixedHeader.value
} }
]} ]}
@@ -190,24 +190,14 @@ export const useRenderLayout = () => {
<Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu> <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
<ToolHeader></ToolHeader> <ToolHeader></ToolHeader>
</div> </div>
<div <div class={[`${prefixCls}-content`, 'w-full h-[calc(100%-var(--top-tool-height))]']}>
class={[
`${prefixCls}-content`,
'w-full',
{
'h-[calc(100%-var(--app-footer-height))]': !fixedHeader.value,
'h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]': fixedHeader.value
}
]}
>
<ElScrollbar <ElScrollbar
v-loading={pageLoading.value} v-loading={pageLoading.value}
class={[ class={[
`${prefixCls}-content-scrollbar`, `${prefixCls}-content-scrollbar`,
{ {
'mt-[var(--tags-view-height)] !pb-[calc(var(--tags-view-height)+var(--app-footer-height))]': '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value, fixedHeader.value
'pb-[var(--app-footer-height)]': !fixedHeader.value
} }
]} ]}
> >
@@ -216,7 +206,7 @@ export const useRenderLayout = () => {
class={[ class={[
'layout-border__bottom layout-border__top relative', 'layout-border__bottom layout-border__top relative',
{ {
'!fixed w-full top-[calc(var(--top-tool-height)+1px)] left-0': fixedHeader.value '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
} }
]} ]}
style="transition: width var(--transition-time-02), left var(--transition-time-02);" style="transition: width var(--transition-time-02), left var(--transition-time-02);"
@@ -238,7 +228,7 @@ export const useRenderLayout = () => {
<ToolHeader class="flex-1"></ToolHeader> <ToolHeader class="flex-1"></ToolHeader>
</div> </div>
<div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex"> <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
<TabMenu></TabMenu> <TabMenu></TabMenu>
<div <div
class={[ class={[
@@ -270,18 +260,16 @@ export const useRenderLayout = () => {
{tagsView.value ? ( {tagsView.value ? (
<TagsView <TagsView
class={[ class={[
'relative layout-border__bottom layout-border__top', 'relative layout-border__bottom',
{ {
'!fixed top-0 left-0 z-10': fixedHeader.value, '!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]': 'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value, collapse.value && fixedHeader.value && !fixedMenu.value,
'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]': 'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value, !collapse.value && fixedHeader.value && !fixedMenu.value,
'!fixed top-0 !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10': 'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-min-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
fixedHeader.value && fixedMenu.value,
'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value && fixedMenu.value, collapse.value && fixedHeader.value && fixedMenu.value,
'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-max-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]': 'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[calc(var(--tab-menu-max-width)+var(--left-menu-max-width))] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value && fixedMenu.value !collapse.value && fixedHeader.value && fixedMenu.value
} }
]} ]}

2
uno.config.ts
View File

@@ -12,7 +12,7 @@ export default defineConfig({
${selector} { ${selector} {
display: flex; display: flex;
height: 100%; height: 100%;
padding: 1px 10px 0; padding: 0 10px;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
transition: background var(--transition-time-02); transition: background var(--transition-time-02);