mirror of
https://github.com/1024-lab/smart-admin.git
synced 2026-06-13 01:06:23 +00:00
更新V3.13.0版本:【新增】顶部菜单模式;【优化】因kaptcha有漏洞，弃用;【优化】三级等保默认值
This commit is contained in:
zhuoda
@@ -0,0 +1,72 @@
|
||||
<!--
|
||||
* 展开菜单
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-06 20:29:12
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
-->
|
||||
<template>
|
||||
<div class="menu-container">
|
||||
<!-- 顶部导航：取自菜单管理中第一级菜单，建议一级菜单都设为目录 -->
|
||||
<TopMenu ref="topMenuRef" :collapsed="collapsed" class="top-menu" />
|
||||
<!-- 左侧导航：通过在一级菜单下建立页面或目录实现菜单分组 -->
|
||||
<RecursionMenu :collapsed="collapsed" ref="recursionMenuRef" class="recursion-menu" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref, watch, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import RecursionMenu from './recursion-menu.vue';
|
||||
import TopMenu from './top-menu.vue';
|
||||
import { useUserStore } from '/@/store/modules/system/user';
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择',
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 选中的顶级菜单
|
||||
const topMenuRef = ref();
|
||||
// 二级菜单引用
|
||||
const recursionMenuRef = ref();
|
||||
|
||||
let currentRoute = useRoute();
|
||||
|
||||
|
||||
// 根据路由更新菜单展开和选中状态
|
||||
function updateSelectKeyAndOpenKey() {
|
||||
// 第一步，根据路由 更新选中 顶级菜单
|
||||
let parentList = useUserStore().menuParentIdListMap.get(currentRoute.name) || [];
|
||||
console.log('parentList', parentList)
|
||||
if (parentList.length === 0) {
|
||||
topMenuRef.value.updateSelectKey(currentRoute.name);
|
||||
return;
|
||||
}
|
||||
topMenuRef.value.updateSelectKey(parentList[0].name);
|
||||
|
||||
//第二步，根据路由 更新 二级菜单的selectKey和openKey
|
||||
recursionMenuRef.value.updateSelectKeyAndOpenKey(parentList, currentRoute.name);
|
||||
}
|
||||
|
||||
onMounted(updateSelectKeyAndOpenKey);
|
||||
|
||||
//监听路由的变化，进行更新菜单展开项目
|
||||
watch(currentRoute, () => {
|
||||
updateSelectKeyAndOpenKey();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.menu-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,168 @@
|
||||
<!--
|
||||
* 递归菜单
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-06 20:29:12
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
-->
|
||||
<template>
|
||||
<div class="recursion-container" v-show="topMenu.children && topMenu.children.length > 0">
|
||||
<!-- 顶部logo区域 -->
|
||||
<div class="logo" @click="onGoHome" :style="sideMenuWidth" v-if="!collapsed">
|
||||
<img class="logo-img" :src="logoImg" />
|
||||
<div class="title smart-logo title-light" v-if="isLight">{{ websiteName }}</div>
|
||||
<div class="title smart-logo title-dark" v-if="!isLight">{{ websiteName }}</div>
|
||||
</div>
|
||||
<div class="min-logo" @click="onGoHome" v-if="collapsed">
|
||||
<img class="logo-img" :src="logoImg" />
|
||||
</div>
|
||||
<!-- 次级菜单展示 -->
|
||||
<a-menu :selectedKeys="selectedKeys" :theme="theme" :openKeys="openKeys" mode="inline">
|
||||
<template v-for="item in topMenu.children" :key="item.menuId">
|
||||
<template v-if="item.visibleFlag">
|
||||
<template v-if="$lodash.isEmpty(item.children)">
|
||||
<a-menu-item :key="item.menuId.toString()" @click="turnToPage(item)">
|
||||
<template #icon v-if="item.icon">
|
||||
<component :is="$antIcons[item.icon]" />
|
||||
</template>
|
||||
{{ item.menuName }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</a-menu>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
|
||||
import SubMenu from './sub-menu.vue';
|
||||
import { router } from '/@/router';
|
||||
import _ from 'lodash';
|
||||
import menuEmitter from './top-expand-menu-mitt';
|
||||
import { useAppConfigStore } from '/@/store/modules/system/app-config';
|
||||
import { useUserStore } from '/@/store/modules/system/user';
|
||||
import logoImg from '/@/assets/images/logo/smart-admin-logo.png';
|
||||
|
||||
const websiteName = computed(() => useAppConfigStore().websiteName);
|
||||
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
|
||||
|
||||
const props = defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 选中的顶级菜单
|
||||
let topMenu = ref({});
|
||||
menuEmitter.on('selectTopMenu', onSelectTopMenu);
|
||||
|
||||
// 监听选中顶级菜单事件
|
||||
function onSelectTopMenu(selectedTopMenu) {
|
||||
topMenu.value = selectedTopMenu;
|
||||
if (selectedTopMenu.children && selectedTopMenu.children.length > 0) {
|
||||
openKeys.value = _.map(selectedTopMenu.children, 'menuId').map((e) => e.toString());
|
||||
} else {
|
||||
openKeys.value = [];
|
||||
}
|
||||
selectedKeys.value = [];
|
||||
}
|
||||
|
||||
//展开的菜单
|
||||
const selectedKeys = ref([]);
|
||||
const openKeys = ref([]);
|
||||
|
||||
function updateSelectKeyAndOpenKey(parentList, currentSelectKey) {
|
||||
if (!parentList) {
|
||||
return;
|
||||
}
|
||||
//获取需要展开的menu key集合
|
||||
openKeys.value = _.map(parentList, 'name');
|
||||
selectedKeys.value = [currentSelectKey];
|
||||
}
|
||||
|
||||
// 页面跳转
|
||||
function turnToPage(route) {
|
||||
useUserStore().deleteKeepAliveIncludes(route.menuId.toString());
|
||||
router.push({ name: route.menuId.toString() });
|
||||
}
|
||||
|
||||
function onGoHome() {
|
||||
router.push({ name: HOME_PAGE_NAME });
|
||||
}
|
||||
|
||||
defineExpose({ updateSelectKeyAndOpenKey });
|
||||
|
||||
const isLight = computed(() => useAppConfigStore().$state.sideMenuTheme === 'light');
|
||||
const color = computed(() => {
|
||||
let isLight = useAppConfigStore().$state.sideMenuTheme === 'light';
|
||||
return {
|
||||
background: isLight ? '#FFFFFF' : '#001529',
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.recursion-container {
|
||||
height: 100%;
|
||||
background-color: v-bind('color.background');
|
||||
}
|
||||
|
||||
.min-logo {
|
||||
height: @header-user-height;
|
||||
line-height: @header-user-height;
|
||||
padding: 0px 15px 0px 15px;
|
||||
// background-color: v-bind('color.background');
|
||||
|
||||
width: 80px;
|
||||
z-index: 21;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.logo-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.top-menu {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: @header-user-height;
|
||||
font-size: 16px;
|
||||
color: #515a6e;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
border-right: 1px solid #f3f3f3;
|
||||
}
|
||||
.logo {
|
||||
height: @header-user-height;
|
||||
line-height: @header-user-height;
|
||||
padding: 0px 15px 0px 15px;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.logo-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
color: v-bind('theme === "light" ? "#001529": "#ffffff"');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!--
|
||||
* 第二列菜单区域
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-06 20:29:12
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
-->
|
||||
<template>
|
||||
<a-sub-menu :key="props.menuInfo.menuId.toString()">
|
||||
<template #icon>
|
||||
<component :is="$antIcons[props.menuInfo.icon]" />
|
||||
</template>
|
||||
<template #title>{{ props.menuInfo.menuName }}</template>
|
||||
<template v-for="item in props.menuInfo.children" :key="item.menuId">
|
||||
<template v-if="item.visibleFlag">
|
||||
<template v-if="!item.children">
|
||||
<a-menu-item :key="item.menuId.toString()" @click="turnToPage(item)">
|
||||
<template #icon>
|
||||
<component :is="$antIcons[item.icon]" />
|
||||
</template>
|
||||
{{ item.menuName }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
</template>
|
||||
<script setup>
|
||||
let props = defineProps({
|
||||
menuInfo: Object,
|
||||
});
|
||||
const emits = defineEmits(['turnToPage']);
|
||||
const turnToPage = (route) => {
|
||||
emits('turnToPage', route);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
::v-deep(.ant-menu-item-selected) {
|
||||
border-right: 3px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
* 展开菜单 event bus
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-07-12 23:32:48
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
*/
|
||||
import mitt from 'mitt';
|
||||
export default mitt();
|
||||
@@ -0,0 +1,147 @@
|
||||
<!--
|
||||
* 第一列菜单
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-09-06 20:29:12
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
-->
|
||||
<template>
|
||||
<div class="top-menu-container">
|
||||
<!-- 一级菜单展示 -->
|
||||
<a-menu :selectedKeys="selectedKeys" mode="horizontal" :theme="theme">
|
||||
<template v-for="item in menuTree" :key="item.menuId">
|
||||
<template v-if="item.visibleFlag">
|
||||
<a-menu-item :key="item.menuId.toString()" @click="onSelectMenu(item)">
|
||||
<template #icon>
|
||||
<component :is="$antIcons[item.icon]" />
|
||||
</template>
|
||||
{{ item.menuName }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-menu>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import _ from 'lodash';
|
||||
import { computed, ref } from 'vue';
|
||||
import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
|
||||
import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
|
||||
import { router } from '/@/router';
|
||||
import { useAppConfigStore } from '/@/store/modules/system/app-config';
|
||||
import { useUserStore } from '/@/store/modules/system/user';
|
||||
|
||||
import menuEmitter from './top-expand-menu-mitt';
|
||||
|
||||
const websiteName = computed(() => useAppConfigStore().websiteName);
|
||||
const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
|
||||
const menuTree = computed(() => useUserStore().getMenuTree || []);
|
||||
|
||||
const props = defineProps({
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
// 展开菜单的顶级目录名字适配，只展示两个字为好
|
||||
function menuNameAdapter(name) {
|
||||
return name.substr(0, 2);
|
||||
}
|
||||
|
||||
// 选中的顶级菜单
|
||||
const selectedKeys = ref([]);
|
||||
|
||||
// 选中菜单，页面跳转
|
||||
function onSelectMenu(menuItem) {
|
||||
selectedKeys.value = [menuItem.menuId.toString()];
|
||||
if (menuItem.menuType === MENU_TYPE_ENUM.MENU.value && (_.isEmpty(menuItem.children) || menuItem.children.every((e) => !e.visibleFlag))) {
|
||||
useUserStore().deleteKeepAliveIncludes(menuItem.menuId.toString());
|
||||
router.push({ name: menuItem.menuId.toString() });
|
||||
}
|
||||
menuEmitter.emit('selectTopMenu', menuItem);
|
||||
}
|
||||
|
||||
// 更新选中的菜单
|
||||
function updateSelectKey(key) {
|
||||
selectedKeys.value = [key];
|
||||
let selectMenu = _.find(menuTree.value, { menuId: Number(key) });
|
||||
if (selectMenu) {
|
||||
menuEmitter.emit('selectTopMenu', selectMenu);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ updateSelectKey });
|
||||
|
||||
// 动态计算当前导航宽度
|
||||
let menuInfo = computed(() => {
|
||||
let width = '100vw';
|
||||
let right = '-100vw';
|
||||
let selectedItem = _.find(menuTree.value, { menuId: Number(selectedKeys.value[0]) });
|
||||
const hasSecoundMenu = selectedItem && !_.isEmpty(selectedItem.children) && selectedItem.children.some((e) => e.visibleFlag);
|
||||
if (hasSecoundMenu) {
|
||||
if (props.collapsed) {
|
||||
width = 'calc(100vw - 80px)';
|
||||
right = 'calc(-100vw + 80px)';
|
||||
} else {
|
||||
width = 'calc(100vw - 180px)';
|
||||
right = 'calc(-100vw + 180px)';
|
||||
}
|
||||
}
|
||||
return {
|
||||
width,
|
||||
right,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.top-menu {
|
||||
position: absolute;
|
||||
transition: all 0.2s, background 0s;
|
||||
top: 0;
|
||||
right: v-bind('menuInfo.right');
|
||||
width: v-bind('menuInfo.width');
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ant-menu-dark {
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
}
|
||||
.ant-menu-light {
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep(.ant-menu-item-selected) {
|
||||
background: #0958d9 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.top-menu-container {
|
||||
height: 100%;
|
||||
}
|
||||
.logo {
|
||||
height: @header-user-height;
|
||||
line-height: @header-user-height;
|
||||
padding: 0px 15px 0px 15px;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.logo-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
color: v-bind('theme === "light" ? "#001529": "#ffffff"');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user