|
|
@@ -33,10 +33,9 @@ export const useRenderLayout = () => {
|
|
|
{!hideLeftMenu.value ? (
|
|
|
<div
|
|
|
class={[
|
|
|
- 'absolute top-0 left-0 h-full layout-border__right',
|
|
|
+ 'absolute top-0 left-0 z-20 h-full layout-border__right',
|
|
|
{ '!fixed z-3000': mobile.value }
|
|
|
- ]}
|
|
|
- >
|
|
|
+ ]}>
|
|
|
{logo.value ? (
|
|
|
<Logo
|
|
|
class={[
|
|
|
@@ -47,8 +46,7 @@ export const useRenderLayout = () => {
|
|
|
'w-[var(--left-menu-max-width)]': !appStore.getCollapse
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: all var(--transition-time-02);"
|
|
|
- ></Logo>
|
|
|
+ style="transition: all var(--transition-time-02);"></Logo>
|
|
|
) : undefined}
|
|
|
<Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
|
|
|
</div>
|
|
|
@@ -66,8 +64,7 @@ export const useRenderLayout = () => {
|
|
|
'fixed !w-full !left-0': mobile.value
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: all var(--transition-time-02);"
|
|
|
- >
|
|
|
+ style="transition: all var(--transition-time-02);">
|
|
|
<ElScrollbar
|
|
|
v-loading={pageLoading.value}
|
|
|
class={[
|
|
|
@@ -78,8 +75,7 @@ export const useRenderLayout = () => {
|
|
|
'!h-[calc(100%-var(--tags-view-height))] mt-0':
|
|
|
fixedHeader.value && hideTopHeader.value
|
|
|
}
|
|
|
- ]}
|
|
|
- >
|
|
|
+ ]}>
|
|
|
{!hideTopHeader.value ? (
|
|
|
<div
|
|
|
class={[
|
|
|
@@ -92,16 +88,14 @@ export const useRenderLayout = () => {
|
|
|
'!w-full !left-0': hideLeftMenu.value || mobile.value
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: all var(--transition-time-02);"
|
|
|
- >
|
|
|
+ style="transition: all var(--transition-time-02);">
|
|
|
<ToolHeader
|
|
|
class={[
|
|
|
'bg-[var(--top-header-bg-color)]',
|
|
|
{
|
|
|
'layout-border__bottom': !tagsView.value
|
|
|
}
|
|
|
- ]}
|
|
|
- ></ToolHeader>
|
|
|
+ ]}></ToolHeader>
|
|
|
|
|
|
{!hideTopHeader.value && tagsView.value ? (
|
|
|
<TagsView class="layout-border__top layout-border__bottom"></TagsView>
|
|
|
@@ -131,9 +125,10 @@ export const useRenderLayout = () => {
|
|
|
hideTopHeader.value
|
|
|
? 'top-0 h-full'
|
|
|
: 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
|
|
|
- ]}
|
|
|
- >
|
|
|
- {!hideLeftMenu.value ? <Menu class="relative layout-border__right !h-full"></Menu> : undefined}
|
|
|
+ ]}>
|
|
|
+ {!hideLeftMenu.value ? (
|
|
|
+ <Menu class="relative layout-border__right !h-full"></Menu>
|
|
|
+ ) : undefined}
|
|
|
<div
|
|
|
class={[
|
|
|
`${prefixCls}-content`,
|
|
|
@@ -146,20 +141,17 @@ export const useRenderLayout = () => {
|
|
|
'w-full left-0': hideLeftMenu.value
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: all var(--transition-time-02);"
|
|
|
- >
|
|
|
+ style="transition: all var(--transition-time-02);">
|
|
|
<ElScrollbar
|
|
|
v-loading={pageLoading.value}
|
|
|
- class={[
|
|
|
- `${prefixCls}-content-scrollbar`,
|
|
|
- {
|
|
|
- '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
|
|
|
- fixedHeader.value && tagsView.value && !hideTopHeader.value,
|
|
|
- '!h-[calc(100%)] mt-0':
|
|
|
- fixedHeader.value && hideTopHeader.value
|
|
|
- }
|
|
|
- ]}
|
|
|
- >
|
|
|
+ class={[
|
|
|
+ `${prefixCls}-content-scrollbar`,
|
|
|
+ {
|
|
|
+ '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
|
|
|
+ fixedHeader.value && tagsView.value && !hideTopHeader.value,
|
|
|
+ '!h-[calc(100%)] mt-0': fixedHeader.value && hideTopHeader.value
|
|
|
+ }
|
|
|
+ ]}>
|
|
|
{!hideTopHeader.value && tagsView.value ? (
|
|
|
<TagsView
|
|
|
class={[
|
|
|
@@ -167,14 +159,19 @@ export const useRenderLayout = () => {
|
|
|
{
|
|
|
'!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
|
|
|
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
|
|
|
- !hideLeftMenu.value && collapse.value && fixedHeader.value && !hideTopHeader.value,
|
|
|
+ !hideLeftMenu.value &&
|
|
|
+ collapse.value &&
|
|
|
+ fixedHeader.value &&
|
|
|
+ !hideTopHeader.value,
|
|
|
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
|
|
|
- !hideLeftMenu.value && !collapse.value && fixedHeader.value && !hideTopHeader.value,
|
|
|
+ !hideLeftMenu.value &&
|
|
|
+ !collapse.value &&
|
|
|
+ fixedHeader.value &&
|
|
|
+ !hideTopHeader.value,
|
|
|
'!w-full !left-0': hideLeftMenu.value || hideTopHeader.value
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: width var(--transition-time-02), left var(--transition-time-02);"
|
|
|
- ></TagsView>
|
|
|
+ style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
|
|
|
) : undefined}
|
|
|
|
|
|
<AppView></AppView>
|
|
|
@@ -195,8 +192,7 @@ export const useRenderLayout = () => {
|
|
|
{
|
|
|
'layout-border__bottom': !tagsView.value
|
|
|
}
|
|
|
- ]}
|
|
|
- >
|
|
|
+ ]}>
|
|
|
{logo.value ? <Logo class="custom-hover"></Logo> : undefined}
|
|
|
<Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
|
|
|
<ToolHeader></ToolHeader>
|
|
|
@@ -206,8 +202,7 @@ export const useRenderLayout = () => {
|
|
|
class={[
|
|
|
`${prefixCls}-content`,
|
|
|
hideTopHeader.value ? 'w-full h-full' : 'w-full h-[calc(100%-var(--top-tool-height))]'
|
|
|
- ]}
|
|
|
- >
|
|
|
+ ]}>
|
|
|
<ElScrollbar
|
|
|
v-loading={pageLoading.value}
|
|
|
class={[
|
|
|
@@ -217,19 +212,18 @@ export const useRenderLayout = () => {
|
|
|
fixedHeader.value && tagsView.value && !hideTopHeader.value,
|
|
|
'!h-full mt-0': hideTopHeader.value
|
|
|
}
|
|
|
- ]}
|
|
|
- >
|
|
|
+ ]}>
|
|
|
{!hideTopHeader.value && tagsView.value ? (
|
|
|
<TagsView
|
|
|
class={[
|
|
|
'layout-border__bottom layout-border__top relative',
|
|
|
{
|
|
|
- '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value && !hideTopHeader.value,
|
|
|
+ '!fixed w-full top-[var(--top-tool-height)] left-0':
|
|
|
+ fixedHeader.value && !hideTopHeader.value,
|
|
|
'!fixed w-full top-0 left-0': hideTopHeader.value
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: width var(--transition-time-02), left var(--transition-time-02);"
|
|
|
- ></TagsView>
|
|
|
+ style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
|
|
|
) : undefined}
|
|
|
|
|
|
<AppView></AppView>
|
|
|
@@ -254,8 +248,7 @@ export const useRenderLayout = () => {
|
|
|
hideTopHeader.value
|
|
|
? 'top-0 h-full'
|
|
|
: 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
|
|
|
- ]}
|
|
|
- >
|
|
|
+ ]}>
|
|
|
{!hideLeftMenu.value ? <TabMenu></TabMenu> : undefined}
|
|
|
<div
|
|
|
class={[
|
|
|
@@ -273,19 +266,17 @@ export const useRenderLayout = () => {
|
|
|
'w-full left-0': hideLeftMenu.value
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: all var(--transition-time-02);"
|
|
|
- >
|
|
|
+ style="transition: all var(--transition-time-02);">
|
|
|
<ElScrollbar
|
|
|
v-loading={pageLoading.value}
|
|
|
- class={[
|
|
|
- `${prefixCls}-content-scrollbar`,
|
|
|
- {
|
|
|
- '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
|
|
|
- fixedHeader.value && tagsView.value && !hideTopHeader.value,
|
|
|
- '!h-full mt-0': hideTopHeader.value
|
|
|
- }
|
|
|
- ]}
|
|
|
- >
|
|
|
+ class={[
|
|
|
+ `${prefixCls}-content-scrollbar`,
|
|
|
+ {
|
|
|
+ '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
|
|
|
+ fixedHeader.value && tagsView.value && !hideTopHeader.value,
|
|
|
+ '!h-full mt-0': hideTopHeader.value
|
|
|
+ }
|
|
|
+ ]}>
|
|
|
{!hideTopHeader.value && tagsView.value ? (
|
|
|
<TagsView
|
|
|
class={[
|
|
|
@@ -294,17 +285,32 @@ export const useRenderLayout = () => {
|
|
|
'!fixed top-0 left-0 z-10': fixedHeader.value && !hideTopHeader.value,
|
|
|
'!fixed top-0 left-0 z-10 w-full': hideTopHeader.value,
|
|
|
'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
|
|
|
- !hideLeftMenu.value && collapse.value && fixedHeader.value && !fixedMenu.value && !hideTopHeader.value,
|
|
|
+ !hideLeftMenu.value &&
|
|
|
+ collapse.value &&
|
|
|
+ fixedHeader.value &&
|
|
|
+ !fixedMenu.value &&
|
|
|
+ !hideTopHeader.value,
|
|
|
'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
|
|
|
- !hideLeftMenu.value && !collapse.value && fixedHeader.value && !fixedMenu.value && !hideTopHeader.value,
|
|
|
+ !hideLeftMenu.value &&
|
|
|
+ !collapse.value &&
|
|
|
+ fixedHeader.value &&
|
|
|
+ !fixedMenu.value &&
|
|
|
+ !hideTopHeader.value,
|
|
|
'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)]':
|
|
|
- !hideLeftMenu.value && collapse.value && fixedHeader.value && fixedMenu.value && !hideTopHeader.value,
|
|
|
+ !hideLeftMenu.value &&
|
|
|
+ collapse.value &&
|
|
|
+ fixedHeader.value &&
|
|
|
+ fixedMenu.value &&
|
|
|
+ !hideTopHeader.value,
|
|
|
'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)]':
|
|
|
- !hideLeftMenu.value && !collapse.value && fixedHeader.value && fixedMenu.value && !hideTopHeader.value
|
|
|
+ !hideLeftMenu.value &&
|
|
|
+ !collapse.value &&
|
|
|
+ fixedHeader.value &&
|
|
|
+ fixedMenu.value &&
|
|
|
+ !hideTopHeader.value
|
|
|
}
|
|
|
]}
|
|
|
- style="transition: width var(--transition-time-02), left var(--transition-time-02);"
|
|
|
- ></TagsView>
|
|
|
+ style="transition: width var(--transition-time-02), left var(--transition-time-02);"></TagsView>
|
|
|
) : undefined}
|
|
|
|
|
|
<AppView></AppView>
|