mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-17 03:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixes bug 新增 顶部混合菜单

Browse Source
This commit is contained in:
Ah jung
2021-08-06 17:06:33 +08:00
parent 450234e7ea
commit 3e0b8efe7e
19 changed files with 432 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/layout/components/Header/ProjectSetting.vue
View File

@@ -46,7 +46,11 @@
<div class="drawer-setting-item-style align-items-top">
<n-tooltip placement="top">
<template #trigger>
<img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')" />
<img
src="~@/assets/images/nav-theme-dark.svg"
@click="togNavMode('vertical')"
alt="左侧菜单模式"
/>
</template>
<span>左侧菜单模式</span>
</n-tooltip>
@@ -56,12 +60,30 @@
<div class="drawer-setting-item-style">
<n-tooltip placement="top">
<template #trigger>
<img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')" />
<img
src="~@/assets/images/nav-horizontal.svg"
alt="顶部菜单模式"
@click="togNavMode('horizontal')"
/>
</template>
<span>顶部菜单模式</span>
</n-tooltip>
<n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'" />
</div>
<div class="drawer-setting-item-style">
<n-tooltip placement="top">
<template #trigger>
<img
src="~@/assets/images/nav-horizontal-mix.svg"
@click="togNavMode('horizontal-mix')"
alt="顶部菜单混合模式"
/>
</template>
<span>顶部菜单混合模式</span>
</n-tooltip>
<n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal-mix'" />
</div>
</div>
<n-divider title-placement="center">导航栏风格</n-divider>
@@ -70,7 +92,11 @@
<div class="drawer-setting-item-style align-items-top">
<n-tooltip placement="top">
<template #trigger>
<img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')" />
<img
src="~@/assets/images/nav-theme-dark.svg"
alt="暗色侧边栏"
@click="togNavTheme('dark')"
/>
</template>
<span>暗色侧边栏</span>
</n-tooltip>
@@ -80,7 +106,11 @@
<div class="drawer-setting-item-style">
<n-tooltip placement="top">
<template #trigger>
<img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')" />
<img
src="~@/assets/images/nav-theme-light.svg"
alt="白色侧边栏"
@click="togNavTheme('light')"
/>
</template>
<span>白色侧边栏</span>
</n-tooltip>
@@ -95,6 +125,7 @@
<img
src="~@/assets/images/header-theme-dark.svg"
@click="togNavTheme('header-dark')"
alt="暗色顶栏"
/>
</template>
<span>暗色顶栏</span>
@@ -105,6 +136,16 @@
<n-divider title-placement="center">界面功能</n-divider>
<div class="drawer-setting-item">
<div class="drawer-setting-item-title"> 分割菜单 </div>
<div class="drawer-setting-item-action">
<n-switch
:disabled="settingStore.navMode === 'horizontal-mix' ? false : true"
v-model:value="settingStore.menuSetting.mixMenu"
/>
</div>
</div>
<div class="drawer-setting-item">
<div class="drawer-setting-item-title"> 固定顶栏 </div>
<div class="drawer-setting-item-action">
@@ -312,6 +353,7 @@
.justify-center {
justify-content: center;
}
.dark-switch .n-switch {
::v-deep(.n-switch__rail) {
background-color: #000e1c;

31
src/layout/components/Header/index.vue
View File

@@ -1,8 +1,16 @@
<template>
<div class="layout-header">
<!--顶部菜单-->
<div class="layout-header-left" v-if="navMode === 'horizontal'">
<AsideMenu v-model:collapsed="collapsed" :inverted="getInverted" mode="horizontal" />
<div
class="layout-header-left"
v-if="navMode === 'horizontal' || (navMode === 'horizontal-mix' && mixMenu)"
>
<AsideMenu
v-model:collapsed="collapsed"
v-model:location="getMenuLocation"
:inverted="getInverted"
mode="horizontal"
/>
</div>
<!--左侧菜单-->
<div class="layout-header-left" v-else>
@@ -161,6 +169,10 @@
return ['light', 'header-dark'].includes(navTheme) ? props.inverted : !props.inverted;
});
const mixMenu = computed(() => {
return unref(getMenuSetting).mixMenu;
});
const getChangeStyle = computed(() => {
const { collapsed } = props;
const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
@@ -170,6 +182,10 @@
};
});
const getMenuLocation = computed(() => {
return 'header';
});
const router = useRouter();
const route = useRoute();
@@ -314,6 +330,8 @@
drawerSetting,
openSetting,
getInverted,
getMenuLocation,
mixMenu,
};
},
});
@@ -330,11 +348,6 @@
transition: all 0.2s ease-in-out;
width: 100%;
z-index: 11;
//color: #fff;
//.n-icon {
// color: #fff
//}
&-left {
display: flex;
@@ -344,10 +357,6 @@
color: #515a6e;
}
::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
color: #fff;
}
.n-breadcrumb {
display: inline-block;
}

54
src/layout/components/Menu/index.vue
View File

@@ -8,17 +8,17 @@
:collapsed-icon-size="20"
:indent="24"
:expanded-keys="openKeys"
v-model:value="selectedKeys"
:value="getSelectedKeys"
@update:value="clickMenuItem"
@update:expanded-keys="menuExpanded"
/>
</template>
<script lang="ts">
import { defineComponent, reactive, computed, watch, toRefs, unref } from 'vue';
import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
import { generatorMenu } from '@/utils';
import { generatorMenu, generatorMenuMix } from '@/utils';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
export default defineComponent({
@@ -34,6 +34,11 @@
// 侧边栏菜单是否收起
type: Boolean,
},
//位置
location: {
type: String,
default: 'left',
},
},
setup(props) {
// 当前路由
@@ -41,6 +46,9 @@
const router = useRouter();
const asyncRouteStore = useAsyncRouteStore();
const settingStore = useProjectSettingStore();
const menus = ref<any[]>([]);
const selectedKeys = ref<string>(currentRoute.name as string);
const headerMenuSelectKey = ref<string>('');
// 获取当前打开的子菜单
const matched = currentRoute.matched;
@@ -49,23 +57,30 @@
const state = reactive({
openKeys: getOpenKeys,
selectedKeys: currentRoute.name,
});
const inverted = computed(() => {
return ['dark', 'header-dark'].includes(settingStore.navTheme);
});
const menus = computed(() => {
return generatorMenu(asyncRouteStore.getMenus);
const getSelectedKeys = computed(() => {
return props.location === 'left' ? unref(selectedKeys) : unref(headerMenuSelectKey);
});
// 监听分割菜单
watch(
() => settingStore.menuSetting.mixMenu,
() => {
updateMenu();
}
);
// 监听菜单收缩状态
watch(
() => props.collapsed,
(newVal) => {
state.openKeys = newVal ? [] : getOpenKeys;
state.selectedKeys = currentRoute.name;
selectedKeys.value = currentRoute.name as string;
}
);
@@ -73,12 +88,26 @@
watch(
() => currentRoute.fullPath,
() => {
updateMenu();
const matched = currentRoute.matched;
state.openKeys = matched.map((item) => item.name);
state.selectedKeys = currentRoute.name;
const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
}
);
function updateMenu() {
if (!settingStore.menuSetting.mixMenu) {
menus.value = generatorMenu(asyncRouteStore.getMenus);
} else {
//混合菜单
const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
}
}
// 点击菜单
function clickMenuItem(key: string) {
if (/http(s)?:/.test(key)) {
@@ -101,17 +130,24 @@
if (!key) return false;
const subRouteChildren: string[] = [];
for (const { children, key } of unref(menus)) {
if (children && children.length > 0) {
if (children && children.length) {
subRouteChildren.push(key as string);
}
}
return subRouteChildren.includes(key);
}
onMounted(() => {
updateMenu();
});
return {
...toRefs(state),
inverted,
menus,
selectedKeys,
headerMenuSelectKey,
getSelectedKeys,
clickMenuItem,
menuExpanded,
};

19
src/layout/components/TagsView/index.vue
View File

@@ -116,6 +116,7 @@
import { renderIcon } from '@/utils/index';
import elementResizeDetectorMaker from 'element-resize-detector';
import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
export default defineComponent({
name: 'TabsView',
@@ -135,6 +136,7 @@
const { getDarkTheme } = useDesignSetting();
const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting } =
useProjectSetting();
const settingStore = useProjectSettingStore();
const message = useMessage();
const route = useRoute();
@@ -165,6 +167,17 @@
return { fullPath, hash, meta, name, params, path, query };
};
const isMixMenuNoneSub = computed(() => {
const mixMenu = settingStore.menuSetting.mixMenu;
const currentRoute = useRoute();
const navMode = unref(getNavMode);
if (unref(navMode) != 'horizontal-mix') return true;
if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
return false;
}
return true;
});
//动态组装样式 菜单缩进
const getChangeStyle = computed(() => {
const { collapsed } = props;
@@ -172,7 +185,11 @@
const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
const { fixed }: any = unref(getMultiTabsSetting);
let lenNum =
navMode === 'horizontal' ? '0px' : collapsed ? `${minMenuWidth}px` : `${menuWidth}px`;
navMode === 'horizontal' || !isMixMenuNoneSub.value
? '0px'
: collapsed
? `${minMenuWidth}px`
: `${menuWidth}px`;
return {
left: lenNum,
width: `calc(100% - ${!fixed ? '0px' : lenNum})`,

25
src/layout/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<NLayout class="layout" :position="fixedMenu" has-sider>
<NLayoutSider
v-if="navMode === 'vertical'"
v-if="isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
show-trigger
@collapse="collapsed = true"
:position="fixedMenu"
@@ -15,7 +15,7 @@
class="layout-sider"
>
<Logo :collapsed="collapsed" />
<AsideMenu v-model:collapsed="collapsed" />
<AsideMenu v-model:collapsed="collapsed" v-model:location="getMenuLocation" />
</NLayoutSider>
<NLayout :inverted="inverted">
@@ -65,6 +65,8 @@
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
import { useLoadingBar } from 'naive-ui';
import { useRoute } from 'vue-router';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
export default defineComponent({
name: 'Layout',
@@ -77,7 +79,6 @@
},
setup() {
const { getDarkTheme } = useDesignSetting();
const {
getShowFooter,
getNavMode,
@@ -87,6 +88,8 @@
getMultiTabsSetting,
} = useProjectSetting();
const settingStore = useProjectSettingStore();
const navMode = getNavMode;
const collapsed = ref<boolean>(false);
@@ -96,6 +99,16 @@
return fixed ? 'absolute' : 'static';
});
const isMixMenuNoneSub = computed(() => {
const mixMenu = settingStore.menuSetting.mixMenu;
const currentRoute = useRoute();
if (unref(navMode) != 'horizontal-mix') return true;
if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
return false;
}
return true;
});
const fixedMenu = computed(() => {
const { fixed } = unref(getHeaderSetting);
return fixed ? 'absolute' : 'static';
@@ -130,6 +143,10 @@
};
});
const getMenuLocation = computed(() => {
return 'left';
});
function watchWidth() {
const Width = document.body.clientWidth;
if (Width <= 950) {
@@ -157,6 +174,8 @@
getShowFooter,
getDarkTheme,
getHeaderInverted,
getMenuLocation,
isMixMenuNoneSub,
};
},
});