xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 样式调整

Browse Source
This commit is contained in:
xuziqiang
2024-06-21 15:19:28 +08:00
parent 2ebe536243
commit fea7abd476
32 changed files with 2994 additions and 2793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
lib/saas/view/system/layout/sider.vue
View File

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