lizongxi/ai-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add layout settings

Browse Source
This commit is contained in:
huzhushan 2021-07-23 14:51:36 +08:00
parent eddc049953
commit 4ea866e38d
10 changed files with 231 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/style/global-variables.scss
View File

@ -15,3 +15,4 @@ $collapseMenuActiveColor: $menuTextColor; // 菜单宽度折叠后，已选中
$collapseMenuActiveBorderColor: $mainColor; // 菜单宽度折叠后，已选中菜单的边框颜色
$collapseMenuActiveBorderWidth: 2px; // 菜单宽度折叠后，已选中菜单的边框宽度
$arrowColor: #909399; // 展开/收起箭头颜色
$horizontalMenuHeight: 40px; // 菜单栏水平排列时候的高度

75
src/defaultSettings.js Normal file
View File

@ -0,0 +1,75 @@
/*
* |~~~~~~~|
* | |
* | |
* | |
* | |
* | |
* |~.\\\_\~~~~~~~~~~~~~~xx~~~ ~~~~~~~~~~~~~~~~~~~~~/_//;~|
* | \ o \_ ,XXXXX), _..-~ o / |
* | ~~\ ~-. XXXXX`)))), _.--~~ .-~~~ |
* ~~~~~~~`\ ~\~~~XXX' _/ ';)) |~~~~~~..-~ _.-~ ~~~~~~~
* `\ ~~--`_\~\, ;;;\)__.---.~~~ _.-~
* ~-. `:;;/;; \ _..-~~
* ~-._ `'' /-~-~
* `\ / /
* | , | |
* | ' / |
* \/; |
* ;; |
* `; . |
* |~~~-----.....|
* | \ \
* | /\~~--...__ |
* (| `\ __-\|
* || \_ /~ |
* |) \~-' |
* | | \ '
* | | \ :
* \ | | |
* | ) ( )
* \ /; /\ |
* | |/ |
* | | |
* \ .' ||
* | | | |
* ( | | |
* | \ \ |
* || o `.)|
* |`\\) |
* | |
* | |
*
* @Descripttion:
* @version:
* @Date: 2021-07-22 17:22:14
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-07-23 14:44:42
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
*/
export default {
menus: {
// 菜单栏排列方式
mode: 'vertical', // horizontal: 水平排列 vertical: 垂直排列
},
tagsbar: {
// 标签栏是否显示
isShow: true,
},
breadcrumbs: {
// 面包屑导航是否显示
isShow: true,
},
topbar: {
// 顶栏是否固定
isFixed: true,
},
layout: {
// 是否流式布局
isFluid: true,
},
}

21
src/layout/components/Sidebar/Menus.vue
View File

@ -27,7 +27,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:46:48
* @LastEditTime: 2021-07-23 11:07:24
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -38,6 +38,7 @@
<el-scrollbar class="scroll">
<el-menu
class="menu"
:mode="mode"
:collapse="collapse"
:uniqueOpened="true"
:router="true"
@ -66,6 +67,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
mode: {
type: String,
default: 'vertical',
},
},
setup() {
const route = useRoute()
@ -130,9 +135,23 @@ export default defineComponent({
.el-submenu__title i {
color: $arrowColor;
}
// 水平菜单
.el-menu--horizontal {
.el-menu-item,
.el-submenu .el-submenu__title {
height: $horizontalMenuHeight;
line-height: $horizontalMenuHeight;
}
.el-menu-item.is-active,
.el-submenu.is-active .el-submenu__title {
border: none;
}
}
</style>
<style lang="scss" scoped>
.scroll {
height: auto;
flex: 1;
overflow-x: hidden;
overflow-y: auto;

2
src/layout/components/Sidebar/index.vue
View File

@ -25,7 +25,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:46:24
* @LastEditTime: 2021-07-23 09:36:42
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin

22
src/layout/components/Tagsbar/index.vue
View File

@ -13,7 +13,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:47:18
* @LastEditTime: 2021-07-23 14:39:22
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -21,7 +21,7 @@
-->
<template>
<div class="tags-container">
<div class="tags-container" :class="{ hide: !isTagsbarShow }">
<el-scrollbar
ref="scrollContainer"
:vertical="false"
@ -68,13 +68,16 @@
</template>
<script>
import { defineComponent } from 'vue'
import { defineComponent, inject, computed } from 'vue'
import { useTags } from './hooks/useTags'
import { useContextMenu } from './hooks/useContextMenu'
export default defineComponent({
name: 'Tagsbar',
setup() {
const defaultSettings = inject('defaultSettings')
const isTagsbarShow = computed(() => defaultSettings.tagsbar.isShow)
const tags = useTags()
const contextMenu = useContextMenu(tags.tagList)
@ -84,6 +87,7 @@ export default defineComponent({
}
return {
isTagsbarShow,
onScroll,
...tags,
...contextMenu,
@ -97,8 +101,10 @@ export default defineComponent({
height: 32px;
width: 100%;
background: #fff;
border-bottom: 1px solid #eaeaea;
border-bottom: 1px solid #e0e4ef;
&.hide {
display: none;
}
.scroll-container {
white-space: nowrap;
overflow: hidden;
@ -128,8 +134,8 @@ export default defineComponent({
margin-right: 15px;
}
&.active {
color: $mainColor;
border-bottom: 2px solid $mainColor;
color: #303133;
background: #f5f5f5;
}
.title {
display: inline-block;
@ -141,7 +147,7 @@ export default defineComponent({
}
.el-icon-close {
color: #5c5c5c;
margin-left: 2px;
margin-left: 8px;
width: 16px;
height: 16px;
vertical-align: 2px;

35
src/layout/components/Topbar/Breadcrumbs.vue
View File

@ -27,7 +27,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:47:34
* @LastEditTime: 2021-07-23 14:13:23
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -36,9 +36,9 @@
<template>
<el-breadcrumb
separator="/"
separator-class="el-icon-arrow-right"
class="breadcrumb"
:class="{ mobile: device === 'mobile' }"
:class="{ mobile: device === 'mobile', show: isHorizontalMenu }"
>
<el-breadcrumb-item
v-for="(item, index) in breadcrumbs"
@ -51,7 +51,14 @@
</el-breadcrumb>
</template>
<script>
import { defineComponent, computed, ref, onBeforeMount, watch } from 'vue'
import {
defineComponent,
computed,
ref,
onBeforeMount,
watch,
inject,
} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
@ -63,6 +70,11 @@ export default defineComponent({
const route = router.currentRoute // 这里不使用useRoute获取当前路由，否则下面watch监听路由的时候会有警告
const breadcrumbs = ref([])
const defaultSettings = inject('defaultSettings')
const isHorizontalMenu = computed(
() => defaultSettings.menus.mode === 'horizontal'
)
const getBreadcrumbs = route => {
const home = [{ path: '/', meta: { title: '首页' } }]
if (route.name === 'home') {
@ -87,6 +99,7 @@ export default defineComponent({
return {
device,
breadcrumbs,
isHorizontalMenu,
}
},
})
@ -113,5 +126,19 @@ export default defineComponent({
&.mobile {
display: none;
}
&.show {
display: block;
margin: 0;
padding: 16px;
background: #f5f5f5;
}
}
</style>
<style lang="scss">
.el-breadcrumb__inner {
&.is-link,
a {
color: #5c5c5c;
}
}
</style>

47
src/layout/components/Topbar/index.vue
View File

@ -37,7 +37,7 @@
* @version:
* @Date: 2021-04-21 09:18:32
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:47:46
* @LastEditTime: 2021-07-23 13:42:10
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -45,11 +45,15 @@
-->
<template>
<div class="header">
<div class="header" :class="{ 'no-border': isHorizontalMenu }">
<div class="navigation">
<logo v-if="device === 'mobile'" class="mobile" />
<hamburger />
<breadcrumbs />
<logo
v-if="isShowLogo"
class="mobile"
:class="{ 'show-title': isHorizontalMenu }"
/>
<hamburger v-if="isShowHamburger" />
<breadcrumbs v-if="isShowBreadcrumbs" />
</div>
<div class="action">
<error-log />
@ -58,7 +62,7 @@
</div>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { defineComponent, computed, inject } from 'vue'
import Logo from '@/layout/components/Sidebar/Logo.vue'
import Hamburger from './Hamburger.vue'
import Breadcrumbs from './Breadcrumbs.vue'
@ -75,11 +79,31 @@ export default defineComponent({
ErrorLog,
},
setup() {
const defaultSettings = inject('defaultSettings')
const store = useStore()
const device = computed(() => store.state.app.device)
const isHorizontalMenu = computed(
() => defaultSettings.menus.mode === 'horizontal'
)
const isShowLogo = computed(
() => isHorizontalMenu.value || device.value === 'mobile'
)
const isShowHamburger = computed(() => !isHorizontalMenu.value)
const isShowBreadcrumbs = computed(
() => defaultSettings.breadcrumbs.isShow && !isHorizontalMenu.value
)
return {
device,
isHorizontalMenu,
isShowLogo,
isShowHamburger,
isShowBreadcrumbs,
}
},
})
@ -87,9 +111,12 @@ export default defineComponent({
<style lang="scss" scoped>
.header {
height: 48px;
border-bottom: 1px solid #eaeaea;
border-bottom: 1px solid #e0e4ef;
display: flex;
justify-content: space-between;
&.no-border {
border: none;
}
.navigation {
display: flex;
align-items: center;
@ -110,4 +137,10 @@ export default defineComponent({
display: none;
}
}
.show-title {
::v-deep(.title) {
display: block;
color: #333;
}
}
</style>

48
src/layout/index.vue
View File

@ -27,7 +27,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:46:00
* @LastEditTime: 2021-07-23 14:39:15
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -35,24 +35,28 @@
-->
<template>
<div class="wrapper">
<sidebar />
<div class="right">
<div class="wrapper" :class="{ fluid: isFluid }">
<sidebar v-if="!isHorizontalMenu" />
<div class="right" :class="{ flex: isTopbarFixed }">
<div class="top">
<topbar />
<menus mode="horizontal" v-if="isHorizontalMenu" />
<tagsbar />
<breadcrumbs v-if="isBreadcrumbsShow" />
</div>
<div class="main">
<div class="main" :class="{ pt0: isBreadcrumbsShow }">
<Content />
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { defineComponent, computed, inject } from 'vue'
import Sidebar from './components/Sidebar/index.vue'
import Topbar from './components/Topbar/index.vue'
import Menus from './components/Sidebar/Menus.vue'
import Tagsbar from './components/Tagsbar/index.vue'
import Breadcrumbs from './components/Topbar/Breadcrumbs.vue'
import Content from './components/Content/index.vue'
import { useResizeHandler } from './hooks/useResizeHandler'
@ -61,11 +65,30 @@ export default defineComponent({
components: {
Sidebar,
Topbar,
Menus,
Tagsbar,
Breadcrumbs,
Content,
},
setup() {
useResizeHandler()
const defaultSettings = inject('defaultSettings')
const isFluid = computed(() => defaultSettings.layout.isFluid)
const isTopbarFixed = computed(() => defaultSettings.topbar.isFixed)
const isHorizontalMenu = computed(
() => defaultSettings.menus.mode === 'horizontal'
)
const isBreadcrumbsShow = computed(
() => isHorizontalMenu.value && defaultSettings.breadcrumbs.isShow
)
return {
isFluid,
isTopbarFixed,
isHorizontalMenu,
isBreadcrumbsShow,
}
},
})
</script>
@ -73,21 +96,32 @@ export default defineComponent({
<style lang="scss" scoped>
.wrapper {
display: flex;
margin: 0 auto;
width: 1440px;
height: 100%;
&.fluid {
width: 100%;
}
.right {
flex: 1;
overflow: auto;
&.flex {
overflow: hidden;
display: flex;
flex-direction: column;
}
.top {
background: #fff;
}
.main {
flex: 1;
background: #f0f2f5;
background: #f5f5f5;
padding: 16px;
overflow: auto;
&.pt0 {
padding-top: 0;
}
}
}
}

6
src/main.js
View File

@ -27,7 +27,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 11:08:56
* @LastEditTime: 2021-07-22 18:04:34
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -58,6 +58,10 @@ import './permission'
// 引入svg图标注册脚本
import 'vite-plugin-svg-icons/register'
// 引入全局设置
import defaultSettings from './defaultSettings'
app.provide('defaultSettings', defaultSettings)
// 注册全局组件
import * as Components from './global-components'
Object.entries(Components).forEach(([key, component]) => {

1
src/views/test/index.vue
View File

@ -52,7 +52,6 @@ export default defineComponent({
{ label: '邮箱', prop: 'userEmail' },
{
label: '操作',
fixed: 'right',
width: 180,
align: 'center',
tdSlot: 'operate', // 自定义单元格内容的插槽名称