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

perf: sidebar结构调整

Browse Source
This commit is contained in:
rd
2025-09-01 14:07:18 +08:00
parent fd4f54ed56
commit 8fff4c1ef1
3 changed files with 61 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/layouts/components/siderBar/index.vue
View File

@ -96,7 +96,7 @@ export default defineComponent({
const renderMenuList = () => {
return currentMenuList.value.map((item) => {
if (!item.children) {
return renderMenuItem(item, sidebarStore.menuCollapse);
return renderMenuItem(item, collapsed.value);
}
return (
<Dropdown
@ -115,7 +115,7 @@ export default defineComponent({
},
}}
>
{renderMenuItem(item, sidebarStore.menuCollapse)}
{renderMenuItem(item, collapsed.value)}
</Dropdown>
);
});
@ -161,39 +161,39 @@ export default defineComponent({
trigger
onCollapse={setCollapsed}
>
<Menu
class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}
>
<Menu class={`siderBar-wrap w-full flex flex-col px-16px pt-16px ${collapsed.value ? 'menu-fold' : ''}`}>
{showAiSearch.value && (
<>
<Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
<img src={icon1} width={18} height={18} />
{!sidebarStore.menuCollapse && (
<span class="cts label">开始工作</span>
)}
{!collapsed.value && <span class="cts label">开始工作</span>}
</Menu.Item>
<div class="line w-full h-1px bg-#211F24 my-12px"></div>
</>
)}
<div class="flex flex-col flex-1">
<div class="menu-list flex-1">{renderMenuList()}</div>
<div class="flex justify-center items-center">
<div
class="flex fold-btn items-center cursor-pointer"
onClick={() => {
sidebarStore.setMenuCollapse();
}}
>
{sidebarStore.menuCollapse ? (
<icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
) : (
<icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
)}
{!sidebarStore.menuCollapse && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
</div>
</div>
</div>
</Menu>
<div
class={`bg-#F6F5FC flex items-center absolute bottom-0 w-full pt-8px px-16px pb-16px right-0 ${
collapsed.value ? 'justify-center' : 'justify-end'
}`}
>
<div
class="flex fold-btn items-center cursor-pointer h-22px "
onClick={() => {
sidebarStore.setMenuCollapse();
}}
>
{collapsed.value ? (
<icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
) : (
<icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
)}
{!collapsed.value && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
</div>
</div>
</Layout.Sider>
);
},

55
src/layouts/components/siderBar/style.scss
View File

@ -44,30 +44,39 @@
background-color: transparent;
}
}
.siderBar-wrap {
background: transparent !important;
border: none !important;
color: inherit;
.cts {
color: #211f24;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.menu-item {
@include menu-item;
}
.line {
opacity: 0.06;
}
.fold-btn {
&:hover {
.cts,
.icon {
color: #6d4cfe !important;
.ant-layout-sider {
.ant-layout-sider-children {
position: relative;
// padding: 16px 0;
.siderBar-wrap {
background: transparent !important;
border: none !important;
color: inherit;
.cts {
color: #211f24;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.menu-item {
@include menu-item;
}
.line {
opacity: 0.06;
}
}
.fold-btn {
&:hover {
.cts,
.icon {
color: #6d4cfe !important;
}
}
}
}
}