renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 走查问题修复，layout布局更新

Browse Source
This commit is contained in:
rd
2025-09-01 17:00:40 +08:00
parent 8b44be2c7e
commit 3748d0b30b
10 changed files with 197 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/layouts/Basic.vue
View File

@ -40,7 +40,6 @@ const layoutPageClass = computed(() => {
return result;
});
onMounted(() => {
checkHasInviteCode();
});
@ -60,18 +59,22 @@ const checkHasInviteCode = () => {
<Layout.Header class="layout-header-wrap">
<Navbar />
</Layout.Header>
<Layout class="flex layout-content-wrap">
<SiderBar />
<Layout
class="layout-content"
:style="{
paddingLeft: `${sidebarStore.sidebarWidth}px`,
}"
>
<Layout.Content :class="layoutPageClass" class="!min-h-initial">
<layout-page />
</Layout.Content>
</Layout>
<Layout class="flex app-content-layout">
<div class="flex flex-1 app-content-scroll">
<div class="app-content-inner">
<SiderBar />
<Layout
class="layout-content"
:style="{
width: `calc(100vw - ${sidebarStore.sidebarWidth}px)`,
}"
>
<Layout.Content :class="layoutPageClass" class="!min-h-initial w-full">
<layout-page />
</Layout.Content>
</Layout>
</div>
</div>
</Layout>
</Layout>
</template>
@ -87,27 +90,39 @@ const checkHasInviteCode = () => {
line-height: $navbar-height;
padding-inline: inherit;
color: inherit;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// position: fixed;
// top: 0;
// left: 0;
// z-index: 1000;
width: 100%;
min-width: $layout-min-width;
}
.layout-content-wrap {
.app-content-layout {
width: 100%;
height: 100%;
background: transparent;
min-height: calc(100vh - $navbar-height);
.app-content-scroll {
min-height: calc(100vh - $navbar-height);
height: calc(100vh - $navbar-height);
overflow-y: auto;
overflow-x: auto;
.app-content-inner {
width: 100%;
height: calc(100vh - $navbar-height);
overflow: hidden;
display: flex;
}
}
:deep(.ant-layout-sider) {
background: none;
box-shadow: none;
padding-top: $navbar-height;
// padding-top: $navbar-height;
padding-bottom: 0;
position: fixed;
top: 0;
left: 0;
z-index: 999;
// position: fixed;
// top: 0;
// left: 0;
// z-index: 999;
height: 100%;
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
.ant-layout-sider-trigger {
@ -118,9 +133,12 @@ const checkHasInviteCode = () => {
}
}
.layout-content {
padding-top: $navbar-height;
background: transparent;
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
flex: 1;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
}
}

28
src/layouts/components/navbar/index.vue
View File

@ -37,20 +37,20 @@ const isHomeRoute = computed(() => {
.navbar-wrap {
position: relative;
height: 100%;
&::before {
width: 100%;
height: 100%;
background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
background-size: cover !important;
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -998;
}
// &::before {
// width: 100%;
// height: 100%;
// background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
// background-size: cover !important;
// bottom: 0;
// content: '';
// display: block;
// left: 0;
// position: absolute;
// right: 0;
// top: 0;
// z-index: -998;
// }
// background-color: var(--color-bg-2);
// border-bottom: 1px solid var(--color-border);