Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局修改

Browse Source
This commit is contained in:
仲么了
2024-01-05 11:35:13 +08:00
parent 8d58dc5c17
commit af0d32720e
9 changed files with 180 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/layouts/admin/components/config.vue
View File

@@ -181,24 +181,24 @@
:model-value="configStore.getColorVal('headerBarTabColor')"
/>
</el-form-item>
<el-form-item label="顶栏悬停时背景色">
<el-color-picker
@change="onCommitColorState($event, 'headerBarHoverBackground')"
:model-value="configStore.getColorVal('headerBarHoverBackground')"
/>
</el-form-item>
<el-form-item label="顶栏菜单激活项背景色">
<el-color-picker
@change="onCommitColorState($event, 'headerBarTabActiveBackground')"
:model-value="configStore.getColorVal('headerBarTabActiveBackground')"
/>
</el-form-item>
<el-form-item label="顶栏菜单激活项文字色">
<el-color-picker
@change="onCommitColorState($event, 'headerBarTabActiveColor')"
:model-value="configStore.getColorVal('headerBarTabActiveColor')"
/>
</el-form-item>
<!-- <el-form-item label="顶栏悬停时背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项背景色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顶栏菜单激活项文字色">-->
<!-- <el-color-picker-->
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
<!-- />-->
<!-- </el-form-item>-->
</div>
<el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
<template #reference>

75
src/layouts/admin/components/nav.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<div class='nav-bar'>
<NavTabs />
</div>
</template>
<script setup lang='ts'>
import { useConfig } from '@/stores/config'
import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
import NavMenus from './navMenus.vue'
import { showShade } from '@/utils/pageShade'
const config = useConfig()
const onMenuCollapse = () => {
showShade('ba-aside-menu-shade', () => {
config.setLayout('menuCollapse', true)
})
config.setLayout('menuCollapse', false)
}
</script>
<style scoped lang='scss'>
.nav-bar {
display: flex;
height: 45px;
width: 100%;
padding: 10px 10px 0;
:deep(.nav-tabs) {
display: flex;
height: 100%;
position: relative;
.ba-nav-tab {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
cursor: pointer;
z-index: 1;
height: 100%;
user-select: none;
background: #fff;
color:#111;
margin-right: 10px;
transition: all .2s;
.close-icon {
padding: 2px;
margin: 2px 0 0 4px;
}
&.active {
color: #fff;
background: var(--el-color-primary);
.close-icon {
color: #fff !important;
}
}
}
.nav-tabs-active-box {
position: absolute;
height: 50px;
//background: var(--el-color-primary);
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
}
}
.unfold {
align-self: center;
padding-left: var(--ba-main-space);
}
</style>

5
src/layouts/admin/components/navBar/classic.vue
View File

@@ -3,7 +3,7 @@
<div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
<Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')" size="18" />
</div>
<NavTabs v-if="!config.layout.shrink" />
<span style='color: #FFF;font-size: 24px;margin-left: 10px;font-weight: 700'>电能质量数据监测云平台</span>
<NavMenus />
</div>
</template>
@@ -27,7 +27,8 @@ const onMenuCollapse = () => {
<style scoped lang="scss">
.nav-bar {
display: flex;
height: 50px;
align-items: center;
height: 60px;
width: 100%;
background-color: v-bind('config.getColorVal("headerBarBackground")');
:deep(.nav-tabs) {

45
src/layouts/admin/components/navBar/tabs.vue
View File

@@ -1,31 +1,31 @@
<template>
<div class="nav-tabs" ref="tabScrollbarRef">
<div class='nav-tabs' ref='tabScrollbarRef'>
<div
v-for="(item, idx) in navTabs.state.tabsView"
@click="onTab(item)"
@contextmenu.prevent="onContextmenu(item, $event)"
class="ba-nav-tab"
v-for='(item, idx) in navTabs.state.tabsView'
@click='onTab(item)'
@contextmenu.prevent='onContextmenu(item, $event)'
class='ba-nav-tab'
:class="navTabs.state.activeIndex == idx ? 'active' : ''"
:ref="tabsRefs.set"
:key="idx"
:ref='tabsRefs.set'
:key='idx'
>
{{ item.meta.title }}
<transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
<transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
<Icon
v-show="navTabs.state.tabsView.length > 1"
class="close-icon"
@click.stop="closeTab(item)"
size="15"
name="el-icon-Close"
v-show='navTabs.state.tabsView.length > 1'
class='close-icon'
@click.stop='closeTab(item)'
size='15'
name='el-icon-Close'
/>
</transition>
</div>
<div :style="activeBoxStyle" class="nav-tabs-active-box"></div>
<div :style='activeBoxStyle' class='nav-tabs-active-box'></div>
</div>
<Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
<Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
</template>
<script setup lang="ts">
<script setup lang='ts'>
import { nextTick, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
import { useConfig } from '@/stores/config'
@@ -85,7 +85,7 @@ const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
}
// tab 激活状态切换
const selectNavTab = function (dom: HTMLDivElement) {
const selectNavTab = function(dom: HTMLDivElement) {
if (!dom) {
return false
}
@@ -169,7 +169,7 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
}
}
const updateTab = function (newRoute: RouteLocationNormalized) {
const updateTab = function(newRoute: RouteLocationNormalized) {
// 添加tab
navTabs.addTab(newRoute)
// 激活当前tab
@@ -190,41 +190,46 @@ onMounted(() => {
})
</script>
<style scoped lang="scss">
<style scoped lang='scss'>
.dark {
.close-icon {
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
}
.ba-nav-tab.active {
.close-icon {
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
}
}
}
.nav-tabs {
overflow-x: auto;
overflow-y: hidden;
margin-right: var(--ba-main-space);
scrollbar-width: none;
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-thumb {
background: #eaeaea;
border-radius: var(--el-border-radius-base);
box-shadow: none;
-webkit-box-shadow: none;
}
&::-webkit-scrollbar-track {
background: v-bind('config.layout.layoutMode == "Default" ? "none":config.getColorVal("headerBarBackground")');
}
&:hover {
&::-webkit-scrollbar-thumb:hover {
background: #c8c9cc;
}
}
}
.ba-nav-tab {
white-space: nowrap;
height: 40px;

2
src/layouts/admin/container/classic.vue
View File

@@ -3,6 +3,7 @@
<Aside />
<el-container class="content-wrapper">
<Header />
<Nav />
<Main />
</el-container>
</el-container>
@@ -15,6 +16,7 @@ import Header from '@/layouts/admin/components/header.vue'
import Main from '@/layouts/admin/router-view/main.vue'
import CloseFullScreen from '@/layouts/admin/components/closeFullScreen.vue'
import { useNavTabs } from '@/stores/navTabs'
import Nav from '@/layouts/admin/components/nav.vue'
const navTabs = useNavTabs()
</script>