This commit is contained in:
YunaiV
2024-08-26 21:58:12 +08:00
35 changed files with 807 additions and 144 deletions

View File

@ -17,7 +17,7 @@ const title = computed(() => appStore.getTitle)
<template>
<div
: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>
</div>

View File

@ -195,6 +195,16 @@ $prefix-cls: #{$namespace}-menu;
}
}
// 垂直菜单
&__vertical {
:deep(.#{$elNamespace}-menu--vertical) {
&:not(.#{$elNamespace}-menu--collapse) .#{$elNamespace}-sub-menu__title,
.#{$elNamespace}-menu-item {
padding-right: 0;
}
}
}
// 水平菜单
&__horizontal {
height: calc(var(--top-tool-height)) !important;

View File

@ -139,7 +139,7 @@ export default defineComponent({
id={`${variables.namespace}-menu`}
class={[
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-min-width)]': unref(collapse)
@ -147,7 +147,7 @@ export default defineComponent({
]}
onMouseleave={mouseleave}
>
<ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height)-1px)]">
<ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height))]">
<div>
{() => {
return unref(tabRouters).map((v) => {
@ -199,7 +199,7 @@ export default defineComponent({
{
'!left-[var(--tab-menu-min-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)
}
]}

View File

@ -280,7 +280,7 @@ watch(
</span>
<div class="flex-1 overflow-hidden">
<ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
<div class="h-full flex">
<div class="h-[var(--tags-view-height)] flex">
<ContextMenu
v-for="item in visitedViews"
:key="item.fullPath"
@ -491,10 +491,10 @@ $prefix-cls: #{$namespace}-tags-view;
&::before {
position: absolute;
top: 1px;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 1px);
height: 100%;
border-left: 1px solid var(--el-border-color);
content: '';
}
@ -502,10 +502,10 @@ $prefix-cls: #{$namespace}-tags-view;
&--first {
&::before {
position: absolute;
top: 1px;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 1px);
height: 100%;
border-right: 1px solid var(--el-border-color);
border-left: none;
content: '';
@ -515,7 +515,7 @@ $prefix-cls: #{$namespace}-tags-view;
&__item {
position: relative;
top: 2px;
top: 3px;
height: calc(100% - 6px);
padding-right: 15px;
margin-left: 4px;
@ -523,6 +523,7 @@ $prefix-cls: #{$namespace}-tags-view;
cursor: pointer;
border: 1px solid #d9d9d9;
border-radius: 2px;
box-sizing: border-box;
&--close {
position: absolute;
@ -562,10 +563,11 @@ $prefix-cls: #{$namespace}-tags-view;
}
&__item--immerse {
top: 3px;
top: 2px;
height: calc(100% - 3px);
padding-right: 35px;
margin: 0 -10px;
border: 1px solid transparent;
border: none !important;
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
12 27 15;

View File

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