|
|
@@ -8,6 +8,7 @@ import AppView from './AppView.vue'
|
|
|
import ToolHeader from './ToolHeader.vue'
|
|
|
import { ElScrollbar } from 'element-plus'
|
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
|
+import { getCurrentSource } from '@/utils/currentSource'
|
|
|
|
|
|
const { getPrefixCls } = useDesign()
|
|
|
|
|
|
@@ -16,59 +17,52 @@ const prefixCls = getPrefixCls('layout')
|
|
|
const appStore = useAppStore()
|
|
|
|
|
|
const pageLoading = computed(() => appStore.getPageLoading)
|
|
|
-
|
|
|
-// 标签页
|
|
|
const tagsView = computed(() => appStore.getTagsView)
|
|
|
-
|
|
|
-// 菜单折叠
|
|
|
const collapse = computed(() => appStore.getCollapse)
|
|
|
-
|
|
|
-// logo
|
|
|
const logo = computed(() => appStore.logo)
|
|
|
-
|
|
|
-// 固定头部
|
|
|
const fixedHeader = computed(() => appStore.getFixedHeader)
|
|
|
-
|
|
|
-// 是否是移动端
|
|
|
const mobile = computed(() => appStore.getMobile)
|
|
|
-
|
|
|
-// 固定菜单
|
|
|
const fixedMenu = computed(() => appStore.getFixedMenu)
|
|
|
+const hideLeftMenu = computed(() => getCurrentSource() === 'qhse')
|
|
|
+const hideTopHeader = computed(() => getCurrentSource() === 'qhse')
|
|
|
|
|
|
export const useRenderLayout = () => {
|
|
|
const renderClassic = () => {
|
|
|
return (
|
|
|
<>
|
|
|
- <div
|
|
|
- class={[
|
|
|
- 'absolute top-0 left-0 h-full layout-border__right',
|
|
|
- { '!fixed z-3000': mobile.value }
|
|
|
- ]}
|
|
|
- >
|
|
|
- {logo.value ? (
|
|
|
- <Logo
|
|
|
- class={[
|
|
|
- 'bg-[var(--left-menu-bg-color)] relative',
|
|
|
- {
|
|
|
- '!pl-0': mobile.value && collapse.value,
|
|
|
- 'w-[var(--left-menu-min-width)]': appStore.getCollapse,
|
|
|
- 'w-[var(--left-menu-max-width)]': !appStore.getCollapse
|
|
|
- }
|
|
|
- ]}
|
|
|
- style="transition: all var(--transition-time-02);"
|
|
|
- ></Logo>
|
|
|
- ) : undefined}
|
|
|
- <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
|
|
|
- </div>
|
|
|
+ {!hideLeftMenu.value ? (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ 'absolute top-0 left-0 h-full layout-border__right',
|
|
|
+ { '!fixed z-3000': mobile.value }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {logo.value ? (
|
|
|
+ <Logo
|
|
|
+ class={[
|
|
|
+ 'bg-[var(--left-menu-bg-color)] relative',
|
|
|
+ {
|
|
|
+ '!pl-0': mobile.value && collapse.value,
|
|
|
+ 'w-[var(--left-menu-min-width)]': appStore.getCollapse,
|
|
|
+ 'w-[var(--left-menu-max-width)]': !appStore.getCollapse
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ style="transition: all var(--transition-time-02);"
|
|
|
+ ></Logo>
|
|
|
+ ) : undefined}
|
|
|
+ <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
|
|
|
+ </div>
|
|
|
+ ) : undefined}
|
|
|
<div
|
|
|
class={[
|
|
|
`${prefixCls}-content`,
|
|
|
'absolute top-0 h-[100%]',
|
|
|
{
|
|
|
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
|
|
|
- collapse.value && !mobile.value && !mobile.value,
|
|
|
+ !hideLeftMenu.value && collapse.value && !mobile.value,
|
|
|
'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
|
|
|
- !collapse.value && !mobile.value && !mobile.value,
|
|
|
+ !hideLeftMenu.value && !collapse.value && !mobile.value,
|
|
|
+ 'w-full left-0': hideLeftMenu.value,
|
|
|
'fixed !w-full !left-0': mobile.value
|
|
|
}
|
|
|
]}
|
|
|
@@ -80,36 +74,40 @@ export const useRenderLayout = () => {
|
|
|
`${prefixCls}-content-scrollbar`,
|
|
|
{
|
|
|
'!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
|
|
|
- fixedHeader.value
|
|
|
+ fixedHeader.value && !hideTopHeader.value,
|
|
|
+ '!h-[calc(100%-var(--tags-view-height))] mt-0':
|
|
|
+ fixedHeader.value && hideTopHeader.value
|
|
|
}
|
|
|
]}
|
|
|
>
|
|
|
- <div
|
|
|
- class={[
|
|
|
- {
|
|
|
- 'fixed top-0 left-0 z-10': fixedHeader.value,
|
|
|
- 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
|
|
|
- collapse.value && fixedHeader.value && !mobile.value,
|
|
|
- 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
|
|
|
- !collapse.value && fixedHeader.value && !mobile.value,
|
|
|
- '!w-full !left-0': mobile.value
|
|
|
- }
|
|
|
- ]}
|
|
|
- style="transition: all var(--transition-time-02);"
|
|
|
- >
|
|
|
- <ToolHeader
|
|
|
+ {!hideTopHeader.value ? (
|
|
|
+ <div
|
|
|
class={[
|
|
|
- 'bg-[var(--top-header-bg-color)]',
|
|
|
{
|
|
|
- 'layout-border__bottom': !tagsView.value
|
|
|
+ 'fixed top-0 left-0 z-10': fixedHeader.value,
|
|
|
+ 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
|
|
|
+ !hideLeftMenu.value && collapse.value && fixedHeader.value && !mobile.value,
|
|
|
+ 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
|
|
|
+ !hideLeftMenu.value && !collapse.value && fixedHeader.value && !mobile.value,
|
|
|
+ '!w-full !left-0': hideLeftMenu.value || mobile.value
|
|
|
}
|
|
|
]}
|
|
|
- ></ToolHeader>
|
|
|
+ style="transition: all var(--transition-time-02);"
|
|
|
+ >
|
|
|
+ <ToolHeader
|
|
|
+ class={[
|
|
|
+ 'bg-[var(--top-header-bg-color)]',
|
|
|
+ {
|
|
|
+ 'layout-border__bottom': !tagsView.value
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ ></ToolHeader>
|
|
|
|
|
|
- {tagsView.value ? (
|
|
|
- <TagsView class="layout-border__top layout-border__bottom"></TagsView>
|
|
|
- ) : undefined}
|
|
|
- </div>
|
|
|
+ {!hideTopHeader.value && tagsView.value ? (
|
|
|
+ <TagsView class="layout-border__top layout-border__bottom"></TagsView>
|
|
|
+ ) : undefined}
|
|
|
+ </div>
|
|
|
+ ) : undefined}
|
|
|
|
|
|
<AppView></AppView>
|
|
|
</ElScrollbar>
|
|
|
@@ -121,46 +119,58 @@ export const useRenderLayout = () => {
|
|
|
const renderTopLeft = () => {
|
|
|
return (
|
|
|
<>
|
|
|
- <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
|
|
|
- {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
|
|
|
-
|
|
|
- <ToolHeader class="flex-1"></ToolHeader>
|
|
|
- </div>
|
|
|
- <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>
|
|
|
+ {!hideTopHeader.value ? (
|
|
|
+ <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
|
|
|
+ {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
|
|
|
+ <ToolHeader class="flex-1"></ToolHeader>
|
|
|
+ </div>
|
|
|
+ ) : undefined}
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ 'absolute left-0 w-full flex',
|
|
|
+ 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}
|
|
|
<div
|
|
|
class={[
|
|
|
`${prefixCls}-content`,
|
|
|
'h-[100%]',
|
|
|
{
|
|
|
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
|
|
|
- collapse.value,
|
|
|
+ !hideLeftMenu.value && collapse.value,
|
|
|
'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
|
|
|
- !collapse.value
|
|
|
+ !hideLeftMenu.value && !collapse.value,
|
|
|
+ 'w-full left-0': hideLeftMenu.value
|
|
|
}
|
|
|
]}
|
|
|
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
|
|
|
- }
|
|
|
- ]}
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ ]}
|
|
|
>
|
|
|
- {tagsView.value ? (
|
|
|
+ {!hideTopHeader.value && tagsView.value ? (
|
|
|
<TagsView
|
|
|
class={[
|
|
|
'layout-border__bottom absolute',
|
|
|
{
|
|
|
- '!fixed top-0 left-0 z-10': fixedHeader.value,
|
|
|
+ '!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)]':
|
|
|
- collapse.value && fixedHeader.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)]':
|
|
|
- !collapse.value && fixedHeader.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);"
|
|
|
@@ -178,35 +188,44 @@ export const useRenderLayout = () => {
|
|
|
const renderTop = () => {
|
|
|
return (
|
|
|
<>
|
|
|
+ {!hideTopHeader.value ? (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ 'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
|
|
|
+ {
|
|
|
+ '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>
|
|
|
+ </div>
|
|
|
+ ) : undefined}
|
|
|
<div
|
|
|
class={[
|
|
|
- 'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
|
|
|
- {
|
|
|
- 'layout-border__bottom': !tagsView.value
|
|
|
- }
|
|
|
+ `${prefixCls}-content`,
|
|
|
+ hideTopHeader.value ? 'w-full h-full' : 'w-full h-[calc(100%-var(--top-tool-height))]'
|
|
|
]}
|
|
|
>
|
|
|
- {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
|
|
|
- <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
|
|
|
- <ToolHeader></ToolHeader>
|
|
|
- </div>
|
|
|
- <div class={[`${prefixCls}-content`, 'w-full h-[calc(100%-var(--top-tool-height))]']}>
|
|
|
<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
|
|
|
+ fixedHeader.value && tagsView.value && !hideTopHeader.value,
|
|
|
+ '!h-full mt-0': hideTopHeader.value
|
|
|
}
|
|
|
]}
|
|
|
>
|
|
|
- {tagsView.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
|
|
|
+ '!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);"
|
|
|
@@ -223,54 +242,65 @@ export const useRenderLayout = () => {
|
|
|
const renderCutMenu = () => {
|
|
|
return (
|
|
|
<>
|
|
|
- <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
|
|
|
- {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
|
|
|
-
|
|
|
- <ToolHeader class="flex-1"></ToolHeader>
|
|
|
- </div>
|
|
|
- <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
|
|
|
- <TabMenu></TabMenu>
|
|
|
+ {!hideTopHeader.value ? (
|
|
|
+ <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
|
|
|
+ {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
|
|
|
+ <ToolHeader class="flex-1"></ToolHeader>
|
|
|
+ </div>
|
|
|
+ ) : undefined}
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ 'absolute left-0 w-full flex',
|
|
|
+ hideTopHeader.value
|
|
|
+ ? 'top-0 h-full'
|
|
|
+ : 'top-[var(--logo-height)] h-[calc(100%-var(--logo-height))]'
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {!hideLeftMenu.value ? <TabMenu></TabMenu> : undefined}
|
|
|
<div
|
|
|
class={[
|
|
|
`${prefixCls}-content`,
|
|
|
'h-[100%]',
|
|
|
{
|
|
|
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
|
|
|
- collapse.value && !fixedMenu.value,
|
|
|
+ !hideLeftMenu.value && collapse.value && !fixedMenu.value,
|
|
|
'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
|
|
|
- !collapse.value && !fixedMenu.value,
|
|
|
+ !hideLeftMenu.value && !collapse.value && !fixedMenu.value,
|
|
|
'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
|
|
|
- collapse.value && fixedMenu.value,
|
|
|
+ !hideLeftMenu.value && collapse.value && fixedMenu.value,
|
|
|
'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
|
|
|
- !collapse.value && fixedMenu.value
|
|
|
+ !hideLeftMenu.value && !collapse.value && fixedMenu.value,
|
|
|
+ 'w-full left-0': hideLeftMenu.value
|
|
|
}
|
|
|
]}
|
|
|
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
|
|
|
- }
|
|
|
- ]}
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ ]}
|
|
|
>
|
|
|
- {tagsView.value ? (
|
|
|
+ {!hideTopHeader.value && tagsView.value ? (
|
|
|
<TagsView
|
|
|
class={[
|
|
|
'relative layout-border__bottom',
|
|
|
{
|
|
|
- '!fixed top-0 left-0 z-10': fixedHeader.value,
|
|
|
+ '!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)]':
|
|
|
- collapse.value && fixedHeader.value && !fixedMenu.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)]':
|
|
|
- !collapse.value && fixedHeader.value && !fixedMenu.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)]':
|
|
|
- collapse.value && fixedHeader.value && fixedMenu.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)]':
|
|
|
- !collapse.value && fixedHeader.value && fixedMenu.value
|
|
|
+ !hideLeftMenu.value && !collapse.value && fixedHeader.value && fixedMenu.value && !hideTopHeader.value
|
|
|
}
|
|
|
]}
|
|
|
style="transition: width var(--transition-time-02), left var(--transition-time-02);"
|