github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 13:28:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 调整导航顶部模式下展示样式

Browse Source
This commit is contained in:
Hooray Hu
2023-11-20 15:10:55 +08:00
parent 0aa24229dd
commit 45567dddbc
7 changed files with 30 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+4 -4
View File
@@ -28,10 +28,10 @@ const subSidebarActualWidth = computed(() => {
}
if (
menuStore.sidebarMenus.length === 1
&& (
!menuStore.sidebarMenus[0].children
|| menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
)
&& (
!menuStore.sidebarMenus[0].children
|| menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
)
) {
actualWidth = 0
}
src/assets/styles/globals.scss
+1 -1
View File
@@ -1,7 +1,7 @@
// 页面布局 CSS 变量
:root {
// 头部高度
--g-header-height: 80px;
--g-header-height: 60px;
// 侧边栏宽度
--g-main-sidebar-width: 80px;
--g-sub-sidebar-width: 220px;
src/layouts/components/Header/index.vue
+6 -24
View File
@@ -39,13 +39,13 @@ function handlerMouserScroll(event: WheelEvent) {
}"
>
<div
v-if="item.children && item.children.length !== 0" class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-5 py-4 transition-all cursor-pointer group text-[var(--g-header-menu-color)] hover:(text-[var(--g-header-menu-hover-color)] bg-[var(--g-header-menu-hover-bg)])" :class="{
v-if="item.children && item.children.length !== 0" class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-3 transition-all cursor-pointer group text-[var(--g-header-menu-color)] hover:(text-[var(--g-header-menu-hover-color)] bg-[var(--g-header-menu-hover-bg)])" :class="{
'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
}" :title="item.meta?.title" @click="switchTo(index)"
>
<div class="inline-flex flex-col justify-center items-center flex-1">
<div class="inline-flex justify-center items-center gap-1 flex-1">
<SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
<span class="flex-1 text-sm w-full text-center truncate transition-width transition-height transition-opacity">
<span class="flex-1 text-sm w-full truncate transition-width transition-height transition-opacity">
{{ item.meta?.title }}
</span>
</div>
@@ -104,12 +104,12 @@ header {
background-color: inherit;
.logo {
width: 50px;
height: 50px;
width: initial;
height: 40px;
}
span {
font-size: 24px;
font-size: 20px;
letter-spacing: 1px;
color: var(--g-header-color);
}
@@ -135,24 +135,15 @@ header {
.menu {
display: inline-flex;
height: 100%;
background-color: var(--g-header-bg);
:deep(.menu-item) {
.menu-item-container {
width: 80px;
padding: 0 5px;
color: var(--g-header-menu-color);
background-color: var(--g-header-menu-bg);
&:hover {
color: var(--g-header-menu-hover-color);
background-color: var(--g-header-menu-hover-bg);
}
.menu-item-container-icon {
transform: scale(1);
font-size: 24px !important;
}
}
&.active .menu-item-container {
@@ -164,15 +155,6 @@ header {
:deep(.tools) {
padding: 0;
.buttons .item .icon {
color: var(--g-header-color);
}
.user-container {
font-size: 16px;
color: var(--g-header-color);
}
}
}
src/layouts/components/MainSidebar/index.vue
+6 -9
View File
@@ -77,22 +77,19 @@ const { switchTo } = useMenu()
:deep(.menu-item) {
.menu-item-container {
height: 60px;
padding: 0 5px;
padding-block: 8px;
color: var(--g-main-sidebar-menu-color);
background-color: var(--g-main-sidebar-menu-bg);
&:hover {
color: var(--g-main-sidebar-menu-hover-color);
background-color: var(--g-main-sidebar-menu-hover-bg);
}
.menu-item-container-icon {
transform: scale(1);
font-size: 24px !important;
}
}
&:hover .menu-item-container {
color: var(--g-main-sidebar-menu-hover-color);
background-color: var(--g-main-sidebar-menu-hover-bg);
}
&.active .menu-item-container {
color: var(--g-main-sidebar-menu-active-color) !important;
background-color: var(--g-main-sidebar-menu-active-bg) !important;
src/layouts/components/Menu/item.vue
+3 -4
View File
@@ -46,15 +46,14 @@ defineExpose({
<div
class="menu-item-container w-full h-full flex justify-between items-center gap-1 px-5 py-4 transition-all cursor-pointer group text-[var(--g-sub-sidebar-menu-color)] hover:(text-[var(--g-sub-sidebar-menu-hover-color)] bg-[var(--g-sub-sidebar-menu-hover-bg)])" :class="{
'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
'px-2!': rootMenu.isMenuPopup && level === 0,
'px-3!': rootMenu.isMenuPopup && level === 0,
}" :title="item.meta?.title"
>
<div
class="inline-flex justify-center items-center gap-[12px] flex-1" :class="{
'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
}" :style="indentStyle"
>
<SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
src/layouts/components/SubSidebar/index.vue
+5 -5
View File
@@ -22,11 +22,11 @@ function onSidebarScroll(e: Event) {
const enableSidebar = computed(() => {
return settingsStore.mode === 'mobile' || (
['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
&& menuStore.sidebarMenus.length !== 0
&& !(
!menuStore.sidebarMenus[0].children
|| menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
)
&& menuStore.sidebarMenus.length !== 0
&& !(
!menuStore.sidebarMenus[0].children
|| menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
)
)
})
</script>
src/layouts/components/Topbar/Toolbar/index.vue
+5 -5
View File
@@ -18,11 +18,11 @@ const menuStore = useMenuStore()
const enableSubMenuCollapseButton = computed(() => {
return settingsStore.mode === 'mobile' || (
['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
&& settingsStore.settings.menu.enableSubMenuCollapseButton
&& !(
!menuStore.sidebarMenus[0].children
|| menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
)
&& settingsStore.settings.menu.enableSubMenuCollapseButton
&& !(
!menuStore.sidebarMenus[0].children
|| menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
)
)
})