|
|
@ -4,12 +4,13 @@ |
|
|
<div class="ns-left-menu-space" :class="{ 'ns-left-menu-space-collapsed': collapsed }"> |
|
|
<div class="ns-left-menu-space" :class="{ 'ns-left-menu-space-collapsed': collapsed }"> |
|
|
<a-layout-sider |
|
|
<a-layout-sider |
|
|
class="ns-left-menu" |
|
|
class="ns-left-menu" |
|
|
:width="208" |
|
|
|
|
|
:collapsedWidth="48" |
|
|
:collapsedWidth="48" |
|
|
|
|
|
:width="sideWidth" |
|
|
:collapsed="collapsed" |
|
|
:collapsed="collapsed" |
|
|
breakpoint="lg" |
|
|
breakpoint="lg" |
|
|
:trigger="null" |
|
|
:trigger="null" |
|
|
v-if="menuList && menuList[0] && menuList[0].children"> |
|
|
v-if="menuList && menuList[0] && menuList[0].children"> |
|
|
|
|
|
{{ $refs.getComputedStyle }} |
|
|
<a-menu |
|
|
<a-menu |
|
|
mode="inline" |
|
|
mode="inline" |
|
|
:inlineIndent="16" |
|
|
:inlineIndent="16" |
|
|
@ -21,9 +22,9 @@ |
|
|
v-if="item.children !== undefined && !item.meta.hideChildren && !item.isHide" |
|
|
v-if="item.children !== undefined && !item.meta.hideChildren && !item.isHide" |
|
|
:key="item.name"> |
|
|
:key="item.name"> |
|
|
<template #title> |
|
|
<template #title> |
|
|
<span role="img" class="anticon" |
|
|
<span role="img" class="anticon"> |
|
|
><ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" |
|
|
<ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" /> |
|
|
/></span> |
|
|
</span> |
|
|
<span>{{ item.meta.title }}</span> |
|
|
<span>{{ item.meta.title }}</span> |
|
|
</template> |
|
|
</template> |
|
|
<!-- 跳转外部链接 --> |
|
|
<!-- 跳转外部链接 --> |
|
|
@ -37,27 +38,31 @@ |
|
|
target="_blank" |
|
|
target="_blank" |
|
|
rel="noopener noreferrer"> |
|
|
rel="noopener noreferrer"> |
|
|
{{ newOpen.name }} |
|
|
{{ newOpen.name }} |
|
|
</a></a-menu-item |
|
|
</a> |
|
|
> |
|
|
</a-menu-item> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else> |
|
|
<div v-else> |
|
|
<div v-for="sitem in checkAuthList(item.children)" :key="sitem.name"> |
|
|
<div v-for="sitem in checkAuthList(item.children)" :key="sitem.name"> |
|
|
<a-menu-item |
|
|
<a-menu-item |
|
|
v-if="(sitem.children === undefined || sitem.meta.hideChildren) && !sitem.isHide" |
|
|
v-if="(sitem.children === undefined || sitem.meta.hideChildren) && !sitem.isHide" |
|
|
:key="sitem.name" |
|
|
:key="sitem.name"> |
|
|
><router-link style="margin-left: 8px" :to="{ name: sitem.name }">{{ |
|
|
<router-link style="margin-left: 8px" :to="{ name: sitem.name }"> |
|
|
sitem.meta.title |
|
|
{{ sitem.meta.title }} |
|
|
}}</router-link></a-menu-item |
|
|
</router-link> |
|
|
> |
|
|
</a-menu-item> |
|
|
<a-sub-menu |
|
|
<a-sub-menu |
|
|
class="threeSubMenu" |
|
|
class="threeSubMenu" |
|
|
v-if="sitem.children !== undefined && !sitem.meta.hideChildren && !sitem.isHide" |
|
|
v-if="sitem.children !== undefined && !sitem.meta.hideChildren && !sitem.isHide" |
|
|
:key="sitem.name"> |
|
|
:key="sitem.name"> |
|
|
<template #title> |
|
|
<template #title> |
|
|
<span role="img" style="margin-left: 8px" class="anticon" v-show="sitem.meta.icon" |
|
|
<span |
|
|
><ns-icon :name="sitem.meta.icon" size="16" |
|
|
role="img" |
|
|
/></span> |
|
|
style="margin-left: 8px" |
|
|
|
|
|
class="anticon" |
|
|
|
|
|
v-show="sitem.meta.icon"> |
|
|
|
|
|
<ns-icon :name="sitem.meta.icon" size="16" /> |
|
|
|
|
|
</span> |
|
|
<span>{{ sitem.meta.title }}</span> |
|
|
<span>{{ sitem.meta.title }}</span> |
|
|
</template> |
|
|
</template> |
|
|
<div v-for="ditem in checkAuthList(sitem.children)" :key="ditem.name"> |
|
|
<div v-for="ditem in checkAuthList(sitem.children)" :key="ditem.name"> |
|
|
@ -70,9 +75,9 @@ |
|
|
role="img" |
|
|
role="img" |
|
|
style="margin-left: 8px" |
|
|
style="margin-left: 8px" |
|
|
class="anticon" |
|
|
class="anticon" |
|
|
v-show="ditem.meta.icon" |
|
|
v-show="ditem.meta.icon"> |
|
|
><ns-icon :name="ditem.meta.icon" size="16" |
|
|
<ns-icon :name="ditem.meta.icon" size="16" /> |
|
|
/></span> |
|
|
</span> |
|
|
<span>{{ ditem.meta.title }}</span> |
|
|
<span>{{ ditem.meta.title }}</span> |
|
|
</template> |
|
|
</template> |
|
|
<div |
|
|
<div |
|
|
@ -82,11 +87,11 @@ |
|
|
:class=" |
|
|
:class=" |
|
|
initSiderKey.includes(fiveFloorItem.name) ? 'ant-menu-item-selected' : '' |
|
|
initSiderKey.includes(fiveFloorItem.name) ? 'ant-menu-item-selected' : '' |
|
|
" |
|
|
" |
|
|
v-if="fiveFloorItem.meta?.type !== 'op'" |
|
|
v-if="fiveFloorItem.meta?.type !== 'op'"> |
|
|
><router-link style="margin-left: 8px" :to="{ name: fiveFloorItem.name }">{{ |
|
|
<router-link style="margin-left: 8px" :to="{ name: fiveFloorItem.name }"> |
|
|
fiveFloorItem?.meta?.title ? fiveFloorItem?.meta?.title : '' |
|
|
{{ fiveFloorItem?.meta?.title ? fiveFloorItem?.meta?.title : '' }} |
|
|
}}</router-link></a-menu-item |
|
|
</router-link> |
|
|
> |
|
|
</a-menu-item> |
|
|
</div> |
|
|
</div> |
|
|
</a-sub-menu> |
|
|
</a-sub-menu> |
|
|
|
|
|
|
|
|
@ -113,7 +118,6 @@ |
|
|
<ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" /> |
|
|
<ns-icon :name="item.meta.icon ? item.meta.icon : ''" size="16" /> |
|
|
</span> |
|
|
</span> |
|
|
<span style="margin-left: 8px">{{ item.meta.title }}</span> |
|
|
<span style="margin-left: 8px">{{ item.meta.title }}</span> |
|
|
<!-- </span> --> |
|
|
|
|
|
</router-link> |
|
|
</router-link> |
|
|
</a-menu-item> |
|
|
</a-menu-item> |
|
|
</a-menu> |
|
|
</a-menu> |
|
|
@ -128,7 +132,7 @@ |
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; |
|
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; |
|
|
import { defineComponent, inject, ref, watchEffect } from 'vue'; |
|
|
import { computed, defineComponent, inject, onMounted, ref, watchEffect } from 'vue'; |
|
|
import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config'; |
|
|
import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config'; |
|
|
import { authorizationService } from '/nerv-base/store/modules/authorization-service'; |
|
|
import { authorizationService } from '/nerv-base/store/modules/authorization-service'; |
|
|
import { Emitter } from 'mitt'; |
|
|
import { Emitter } from 'mitt'; |
|
|
@ -148,6 +152,10 @@ |
|
|
setup: (props) => { |
|
|
setup: (props) => { |
|
|
const mittEmit = inject('mittEmit') as Emitter<emitEvents>; |
|
|
const mittEmit = inject('mittEmit') as Emitter<emitEvents>; |
|
|
const router = useRouter(); |
|
|
const router = useRouter(); |
|
|
|
|
|
const sideWidth = computed(() => { |
|
|
|
|
|
return getComputedStyle(document.querySelector('.ns-left-menu-trigger')!).width; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const dealRouter = (menuList, routerInfo) => { |
|
|
const dealRouter = (menuList, routerInfo) => { |
|
|
menuList?.forEach((item) => { |
|
|
menuList?.forEach((item) => { |
|
|
if (item.name === routerInfo.name) { |
|
|
if (item.name === routerInfo.name) { |
|
|
@ -204,45 +212,49 @@ |
|
|
checkOpAuth, |
|
|
checkOpAuth, |
|
|
checkAuthList, |
|
|
checkAuthList, |
|
|
checkAuth, |
|
|
checkAuth, |
|
|
|
|
|
sideWidth, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
<style lang="less" scoped> |
|
|
|
|
|
// :deep(.ant-layout-sider) { |
|
|
|
|
|
// width: @layout-sider-width !important; |
|
|
|
|
|
// max-width: @layout-sider-width !important; |
|
|
|
|
|
// } |
|
|
.ns-left-menu { |
|
|
.ns-left-menu { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
top: 0; |
|
|
left: 0; |
|
|
left: 0; |
|
|
height: calc(100% - 40px); |
|
|
height: calc(100% - 40px); |
|
|
// background-color: @white; |
|
|
background-color: @white; |
|
|
background-image: url(/asset/image/side.png); |
|
|
// background-image: url(/asset/image/side.png); |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
padding-top: 48px; |
|
|
padding-top: calc(@layout-header-height + 12px); |
|
|
:deep(.ant-layout-sider-children) { |
|
|
:deep(.ant-layout-sider-children) { |
|
|
background-color: transparent; |
|
|
// background-color: transparent; |
|
|
.ant-menu-root { |
|
|
.ant-menu-root { |
|
|
background-color: transparent; |
|
|
// background-color: transparent; |
|
|
} |
|
|
} |
|
|
.ant-menu-submenu-title { |
|
|
.ant-menu-submenu-title { |
|
|
// color: rgba(255, 255, 255, 0.9); |
|
|
// color: @black; |
|
|
.ant-menu-submenu-arrow { |
|
|
.ant-menu-submenu-arrow { |
|
|
// color:inherit |
|
|
// color: @black; |
|
|
// color: rgba(255, 255, 255, 0.9); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.ant-menu { |
|
|
.ant-menu { |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
color: @black; |
|
|
} |
|
|
} |
|
|
.ant-menu-item a { |
|
|
.ant-menu-item a { |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
// color: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
} |
|
|
.ant-menu-submenu-expand-icon, |
|
|
.ant-menu-submenu-expand-icon, |
|
|
.ant-menu-submenu-arrow { |
|
|
.ant-menu-submenu-arrow { |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
// color: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
} |
|
|
.ant-menu-sub.ant-menu-inline { |
|
|
.ant-menu-sub.ant-menu-inline { |
|
|
background-color: #001027; |
|
|
// background-color: #001027; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -254,12 +266,14 @@ |
|
|
margin-left: 8px !important; |
|
|
margin-left: 8px !important; |
|
|
} |
|
|
} |
|
|
.ns-left-menu-space { |
|
|
.ns-left-menu-space { |
|
|
width: 208px; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: auto; |
|
|
background-color: #fff; |
|
|
z-index: 9; |
|
|
|
|
|
box-shadow: @ns-box-shadow; |
|
|
|
|
|
// background-color: #fff; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
transition: all 0.2s; |
|
|
transition: all 0.2s; |
|
|
flex: 0 0 208px; |
|
|
flex: 0 0 @layout-sider-width; |
|
|
&.ns-left-menu-space-collapsed { |
|
|
&.ns-left-menu-space-collapsed { |
|
|
width: 48px; |
|
|
width: 48px; |
|
|
flex: 0 0 48px; |
|
|
flex: 0 0 48px; |
|
|
@ -279,14 +293,14 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ns-left-menu-trigger { |
|
|
.ns-left-menu-trigger { |
|
|
width: 208px; |
|
|
width: @layout-sider-width; |
|
|
height: 40px; |
|
|
height: 40px; |
|
|
transition: all 0.2s; |
|
|
transition: all 0.2s; |
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06); |
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06); |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
z-index: 999; |
|
|
z-index: 999; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
background: #163361; |
|
|
// background: #163361; |
|
|
bottom: 0px; |
|
|
bottom: 0px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
@ -329,7 +343,7 @@ |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
width: 2px; |
|
|
width: 2px; |
|
|
height: 14px; |
|
|
height: 14px; |
|
|
background: #fff; |
|
|
// background: #fff; |
|
|
border: unset; |
|
|
border: unset; |
|
|
top: 14px; |
|
|
top: 14px; |
|
|
left: 20px; |
|
|
left: 20px; |
|
|
@ -341,7 +355,7 @@ |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
width: 2px; |
|
|
width: 2px; |
|
|
height: 14px; |
|
|
height: 14px; |
|
|
background: #fff; |
|
|
// background: #fff; |
|
|
border: unset; |
|
|
border: unset; |
|
|
top: 14px; |
|
|
top: 14px; |
|
|
left: 40px; |
|
|
left: 40px; |
|
|
@ -361,6 +375,6 @@ |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
} |
|
|
:deep(.ns-left-menu .ant-layout-sider-children .ant-menu-submenu-arrow) { |
|
|
:deep(.ns-left-menu .ant-layout-sider-children .ant-menu-submenu-arrow) { |
|
|
color: rgba(255, 255, 255, 0.5); |
|
|
// color: rgba(255, 255, 255, 0.5); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
xuziqiang
3 months ago
