lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Layout): Add cutMenu layout

Browse Source
This commit is contained in:
陈凯龙
2022-01-21 16:17:40 +08:00
parent 1522e925ba
commit ff4dd3afbf
23 changed files with 711 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/layout/components/ToolHeader.vue
View File

@@ -22,6 +22,9 @@ const screenfull = computed(() => appStore.getScreenfull)
// 尺寸图标
const size = computed(() => appStore.getSize)
// 布局
const layout = computed(() => appStore.getLayout)
// 多语言图标
const locale = computed(() => appStore.getLocale)
@@ -35,12 +38,14 @@ export default defineComponent({
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
]}
>
<div class="h-full flex items-center">
{hamburger.value ? (
<Collapse class="hover-tigger" color="var(--top-header-text-color)"></Collapse>
) : undefined}
{breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
</div>
{layout.value !== 'top' ? (
<div class="h-full flex items-center">
{hamburger.value && layout.value !== 'cutMenu' ? (
<Collapse class="hover-tigger" color="var(--top-header-text-color)"></Collapse>
) : undefined}
{breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
</div>
) : undefined}
<div class="h-full flex items-center">
{screenfull.value ? (
<Screenfull class="hover-tigger" color="var(--top-header-text-color)"></Screenfull>

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

@@ -1,6 +1,7 @@
import { computed } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { Menu } from '@/components/Menu'
import { TabMenu } from '@/components/TabMenu'
import { TagsView } from '@/components/TagsView'
import { Logo } from '@/components/Logo'
import AppView from './AppView.vue'
@@ -32,7 +33,7 @@ export const useRenderLayout = () => {
{logo.value ? (
<Logo
class={[
'bg-[var(--left-menu-bg-color)]',
'bg-[var(--left-menu-bg-color)] border-bottom-1 border-solid border-[var(--logo-border-color)]',
{
'!pl-0': mobile.value && collapse.value,
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
@@ -80,9 +81,11 @@ export const useRenderLayout = () => {
]}
style="transition: all var(--transition-time-02);"
>
<ToolHeader class="border-bottom bg-[var(--top-header-bg-color)]"></ToolHeader>
<ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)]"></ToolHeader>
{tagsView.value ? <TagsView class="border-bottom"></TagsView> : undefined}
{tagsView.value ? (
<TagsView class="border-bottom-1 border-solid border-[var(--tags-view-border-color)]"></TagsView>
) : undefined}
</div>
<AppView></AppView>
@@ -95,12 +98,12 @@ export const useRenderLayout = () => {
const renderTopLeft = () => {
return (
<>
<div class="flex items-center bg-[var(--top-header-bg-color)]">
<Logo class="hover-tigger !pr-15px"></Logo>
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
{logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
</div>
<div class="absolute top-[var(--logo-height)] left-0 w-full h-[calc(100%-var(--logo-height))] flex">
<div class="absolute top-[var(--logo-height)+1px] left-0 w-full h-[calc(100%-1px-var(--logo-height))] flex">
<Menu class="!h-full"></Menu>
<div
class={[
@@ -127,7 +130,7 @@ export const useRenderLayout = () => {
{tagsView.value ? (
<TagsView
class={[
'border-bottom border-top',
'border-bottom-1 border-solid border-[var(--tags-view-border-color)]',
{
'!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
@@ -148,8 +151,103 @@ export const useRenderLayout = () => {
)
}
const renderTop = () => {
return (
<>
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
{logo.value ? <Logo class="hover-tigger"></Logo> : undefined}
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
<ToolHeader></ToolHeader>
</div>
<div class="v-app-right h-full w-full">
<ElScrollbar
class={[
'v-content',
{
'mt-[var(--tags-view-height)]': fixedHeader.value
}
]}
>
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-solid border-[var(--tags-view-border-color)]',
{
'!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
}
]}
style="transition: all var(--transition-time-02);"
></TagsView>
) : undefined}
<AppView></AppView>
</ElScrollbar>
</div>
</>
)
}
const renderCutMenu = () => {
return (
<>
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)]">
{logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
</div>
<div class="absolute top-[var(--logo-height)] left-0 w-full h-[calc(100%-var(--logo-height))] flex">
<TabMenu></TabMenu>
{/* <Menu class="!h-full"></Menu> */}
<div
class={[
'v-app-right',
'h-[100%]',
{
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
collapse.value,
'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
!collapse.value
}
]}
style="transition: all var(--transition-time-02);"
>
<ElScrollbar
class={[
'v-content',
{
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value && tagsView.value
}
]}
>
{tagsView.value ? (
<TagsView
class={[
'border-bottom-1 border-solid border-[var(--tags-view-border-color)]',
{
'!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)]':
collapse.value && fixedHeader.value,
'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value
}
]}
style="transition: all var(--transition-time-02);"
></TagsView>
) : undefined}
<AppView></AppView>
</ElScrollbar>
</div>
</div>
</>
)
}
return {
renderClassic,
renderTopLeft
renderTopLeft,
renderTop,
renderCutMenu
}
}