gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 16:29:17 +08:00
Code

feat: 增加菜单折叠功能

Browse Source
This commit is contained in:
zhengkunwang223 2023-02-01 12:05:45 +08:00 committed by zhengkunwang223
parent a90a9fce54
commit 6ae7274095
4 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/components.d.ts vendored
View File

@ -14,6 +14,7 @@ declare module 'vue' {
BreadCrumbsItem: typeof import('./src/components/bread-crumbs/bread-crumbs-item.vue')['default']
CardWithHeader: typeof import('./src/components/card-with-header/index.vue')['default']
Codemirror: typeof import('./src/components/codemirror-dialog/codemirror.vue')['default']
Collapse: typeof import('./src/components/app-layout/menu/components/Collapse.vue')['default']
ComplexTable: typeof import('./src/components/complex-table/index.vue')['default']
ConfirmDialog: typeof import('./src/components/confirm-dialog/index.vue')['default']
ContainerLog: typeof import('./src/components/container-log/index.vue')['default']

28
frontend/src/components/app-layout/menu/components/Collapse.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="collapse">
<el-icon class="collapse-icon" :size="25" @click="menuStore.setCollapse()">
<component :is="isCollapse ? 'expand' : 'fold'"></component>
</el-icon>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { MenuStore } from '@/store/modules/menu';
const menuStore = MenuStore();
const isCollapse = computed((): boolean => menuStore.isCollapse);
</script>
<style scoped lang="scss">
@import '../index.scss';
.collapse {
height: 47px;
border-top: 1px solid #e4e7ed;
}
.collapse-icon {
margin-top: 10px;
margin-left: 25px;
}
</style>

6
frontend/src/components/app-layout/menu/index.scss
View File

@ -122,3 +122,9 @@
}
}
}
.el-menu--collapse {
width: 85px;
// margin-right: 10px;
}

4
frontend/src/components/app-layout/menu/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div
class="menu"
:style="{ width: isCollapse ? '65px' : '180px' }"
:style="{ width: isCollapse ? '75px' : '180px' }"
element-loading-text="Loading..."
:element-loading-spinner="loadingSvg"
element-loading-svg-view-box="-10, -10, 50, 50"
@ -30,6 +30,7 @@
</el-menu-item>
</el-menu>
</el-scrollbar>
<Collapse />
</div>
</template>
@ -39,6 +40,7 @@ import { RouteRecordRaw, useRoute } from 'vue-router';
import { MenuStore } from '@/store/modules/menu';
import { loadingSvg } from '@/utils/svg';
import Logo from './components/logo.vue';
import Collapse from './components/Collapse.vue';
import SubItem from './components/sub-item.vue';
import router, { menuList } from '@/routers/router';
import { logOutApi } from '@/api/modules/auth';