lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 🔥 重构纵向横向布局，组件分离，增强可扩展性

This commit is contained in:
zouzhibing 2022-11-26 14:31:35 +08:00
parent accd569fba
commit dcbcc775b6
37 changed files with 664 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Theme/index.vue
View File

@ -63,9 +63,9 @@
</template>
<script lang="ts" setup>
import {computed, ref} from 'vue'
import {computed, ref,watch} from 'vue'
import {ElMessage} from "element-plus";
import {openLoading,closeLoading} from "@/utils/element"
import SwitchDark from '@/components/SwitchDark/index.vue'
import {PRIMARY_COLOR} from "@/config/index";
import {useSettingStore} from "@/store/modules/setting"
@ -86,7 +86,9 @@
return SettingStore.themeConfig.showSetting;
},
set() {
changeSwitch('showSetting',!SettingStore.themeConfig.showSetting)
}
})
@ -109,8 +111,24 @@
// 进行配置
const changeSwitch = (key,val) => {
SettingStore.setThemeConfig({key, val})
if(key==='mode'){
openLoading()
setTimeout(()=>{
closeLoading()
},600)
}
}
// 监听布局变化
watch(
() => layout.value,
() => {
const body = document.body as HTMLElement;
body.setAttribute("class", `layout-${layout.value}`);
},
{ immediate: true }
);
// 修改主题颜色
const changePrimary = (val)=>{
if (!val) {

63
src/layout/Header/index.vue
View File

@ -1,63 +0,0 @@
<template>
<div
class="m-layout-header"
:class="[
SettingStore.themeConfig.fixedHeader?'zb-fixed-header':'zb-no-fixed-header',
mode === 'horizontal'?'':isCollapse?'fixed-header-collapse':'fixed-header-no-collapse'
]"
>
<div class="header" :class="{ transverseMenu: mode === 'horizontal', }">
<UMenu v-if="mode === 'horizontal'" />
<div class="left" v-if="mode === 'vertical'">
<CollapseIcon/>
<Hamburger />
</div>
<div class="tool-bar-right">
<GlobalComSize class="right-item-menu"/>
<HeaderSearch class="right-item-menu"/>
<Remind class="right-item-menu"/>
<ScreenFull class="right-item-menu"/>
<Setting class="right-item-menu"/>
<Avatar/>
</div>
</div>
<tag-views v-if="showTag" />
</div>
</template>
<script lang="ts" setup>
import { UserFilled } from '@element-plus/icons-vue'
import TagViews from '../TagsView/index.vue'
import GlobalComSize from './components/globalComSize.vue'
import Hamburger from './components/Hamburger.vue'
import Setting from './components/Setting.vue'
import ScreenFull from './components/ScreenFull.vue'
import Remind from './components/Remind'
import HeaderSearch from './components/HeaderSearch'
import CollapseIcon from './components/CollapseIcon'
import Avatar from './components/Avatar'
import UMenu from '../Sidebar/components/Menu.vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import {useSettingStore} from "@/store/modules/setting"
const person = ref()
const router = useRouter()
const SettingStore = useSettingStore()
const isCollapse = computed(() =>!SettingStore.isCollapse)
// menu 布局
const mode = computed(() => SettingStore.themeConfig.mode)
// 显示 tag
const showTag = computed(() =>SettingStore.themeConfig.showTag)
const handleCollapse = () => {
SettingStore.setCollapse(isCollapse.value)
}
</script>
<style lang="scss" scoped>
@import "./index";
</style>

37
src/layout/LayoutHorizontal/HeaderHorizontal/index.scss Normal file
View File

@ -0,0 +1,37 @@
.m-layout-header {
width: 100%;
transition: width 0.28s;
flex-shrink: 0;
box-sizing: border-box;
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
.header-inner {
height: 50px;
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
background-color:$menuBg;
align-items: center;
padding: 0 10px 0 0;
box-sizing: border-box;
justify-content: space-between;
}
}
.fixed-header{
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
.menu-horizontal{
flex: 1;
overflow: hidden;
height: 100%;
margin-right:20px;
:deep(.el-menu-item){
height: 100%;
}
}

70
src/layout/LayoutHorizontal/HeaderHorizontal/index.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<!--纵向布局-->
<Height/>
<div
class="m-layout-header"
:class="{
'fixed-header':themeConfig.fixedHeader,
}">
<div class="header-inner">
<el-menu
mode="horizontal"
:default-active="activeMenu"
background-color="#304156"
text-color="#bfcbd9"
:unique-opened="SettingStore.themeConfig.uniqueOpened"
:collapse-transition="false"
class="menu-horizontal"
:collapse="isCollapse"
>
<SubItem
v-for="route in permission_routes"
:key="route.path"
:item="route"
:base-path="route.path"
/>
</el-menu>
<HeaderToolRight/>
</div>
<TagsView v-if="themeConfig.showTag"/>
</div>
</template>
<script lang="ts" setup>
// 引入组件
import Height from '../../components/Header/components/Height.vue'
import HeaderToolRight from '../../components/Header/ToolRight.vue'
import TagsView from '../../components/TagsView/index.vue'
import SubItem from '../../components/SubMenu/SubItem.vue'
import { useRoute } from 'vue-router'
import {usePermissionStore} from "@/store/modules/permission"
const PermissionStore = usePermissionStore()
const route = useRoute()
// 获取路由
const permission_routes = computed(() => PermissionStore.permission_routes)
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
const activeMenu = computed(() => {
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
})
// 主题配置
const themeConfig = computed(() =>SettingStore.themeConfig)
const isCollapse = computed(() =>!SettingStore.isCollapse)
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>

24
src/layout/LayoutHorizontal/index.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="main-container">
<UHeader/>
<Main/>
<Footer/>
</div>
</template>
<script lang="ts" setup>
import Sidebar from '../components/Sidebar/index.vue'
import UHeader from './HeaderHorizontal/index.vue'
import Main from '../components/Main/index.vue'
import Footer from '../components/Footer/index.vue'
</script>
<style lang="scss" scoped>
.main-container{
display: flex;
flex: 1;
box-sizing: border-box;
flex-direction: column;
min-height: 100%;
}
</style>

55
src/layout/Header/index.scss → src/layout/LayoutVertical/HeaderVertical/index.scss
View File

@ -4,34 +4,11 @@
width: 100%!important;
}
}
.header {
height: 50px;
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
padding: 0 10px 0 0;
box-sizing: border-box;
justify-content: space-between;
.left {
display: flex;
align-items: center;
height: 100%;
}
.tool-bar-right {
display: flex;
align-items: center;
.right-item-menu{
margin-right: 22px;
}
}
}
.zb-fixed-header{
position: fixed;
top: 0;
right: 0;
z-index: 9;
.show-tag{
height: 90px;
}
.zb-no-fixed-header{
width: 100%!important;;
}
@ -43,13 +20,33 @@
flex-shrink: 0;
box-sizing: border-box;
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
.header-inner {
height: 50px;
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
padding: 0 10px 0 0;
box-sizing: border-box;
justify-content: space-between;
}
}
.fixed-header-collapse{
.fixed-header{
position: fixed;
top: 0;
right: 0;
z-index: 9;
}
.collapse{
width: calc(100% - 60px);
}
.fixed-header-no-collapse{
.no-collapse{
width: calc(100% - 210px);
}
.el-dropdown {
display: flex;
height: 100%;

39
src/layout/LayoutVertical/HeaderVertical/index.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<!--纵向布局-->
<Height/>
<div
class="m-layout-header"
:class="{
'fixed-header':themeConfig.fixedHeader,
'collapse':themeConfig.fixedHeader&&isCollapse,
'no-collapse':themeConfig.fixedHeader&&!isCollapse
}">
<div class="header-inner">
<HeaderToolLeft/>
<HeaderToolRight/>
</div>
<TagsView v-if="themeConfig.showTag"/>
</div>
</template>
<script lang="ts" setup>
// 引入组件
import Height from '../../components/Header/components/Height.vue'
import HeaderToolRight from '../../components/Header/ToolRight.vue'
import HeaderToolLeft from '../../components/Header/ToolLeft.vue'
import TagsView from '../../components/TagsView/index.vue'
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
// 主题配置
const themeConfig = computed(() =>SettingStore.themeConfig)
const isCollapse = computed(() =>!SettingStore.isCollapse)
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>

46
src/layout/LayoutVertical/index.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<!--纵向布局-->
<Sidebar/>
<div class="main-container">
<HeaderVertical/>
<Main/>
<Footer/>
</div>
</template>
<script lang="ts" setup>
import Sidebar from '../components/Sidebar/index.vue'
import HeaderVertical from './HeaderVertical/index.vue'
import Main from '../components/Main/index.vue'
import Footer from '../components/Footer/index.vue'
</script>
<style lang="scss" scoped>
.g-container-layout {
height: 100%;
width: 100%;
.main-container {
display: flex;
flex: 1;
box-sizing: border-box;
flex-direction: column;
}
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.sidebar-container {
display: flex;
flex-direction: column;
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 90;
}
</style>

34
src/layout/Sidebar/index.vue
View File

@ -1,34 +0,0 @@
<template>
<div :class="{ 'has-logo': themeConfig.showLogo }">
<logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
<el-scrollbar wrap-class="scrollbar-wrapper">
<u-menu/>
</el-scrollbar>
</div>
</template>
<script lang="ts" setup>
import UMenu from './components/Menu.vue'
import logo from './components/Logo.vue'
import {useSettingStore} from "@/store/modules/setting"
import { computed } from 'vue'
const SettingStore = useSettingStore()
// 是否折叠
const isCollapse = computed(() => !SettingStore.isCollapse)
// 设置
const themeConfig = computed(() =>SettingStore.themeConfig )
</script>
<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
//width: 200px;
height: 100%;
}
.crollbar-wrapper {
height: 100%;
.el-scrollbar__view {
height: 100%;
}
}
</style>

0
src/layout/Footer/index.vue → src/layout/components/Footer/index.vue
View File

19
src/layout/components/Header/ToolLeft.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="m-tool-left">
<CollapseIcon/>
<Hamburger />
</div>
</template>
<script lang="ts" setup>
import CollapseIcon from './components/CollapseIcon.vue'
import Hamburger from './components/Hamburger.vue'
</script>
<style lang="scss" scoped>
.m-tool-left{
display: flex;
align-items: center;
height: 100%;
}
</style>

29
src/layout/components/Header/ToolRight.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="m-tool-right">
<GlobalComSize class="item-children"/>
<HeaderSearch class="item-children"/>
<Remind class="item-children"/>
<ScreenFull class="item-children"/>
<Setting class="item-children"/>
<Avatar/>
</div>
</template>
<script lang="ts" setup>
import GlobalComSize from './components/globalComSize.vue'
import HeaderSearch from './components/HeaderSearch'
import Remind from './components/Remind'
import ScreenFull from './components/ScreenFull.vue'
import Setting from './components/Setting.vue'
import Avatar from './components/Avatar'
</script>
<style lang="scss" scoped>
.m-tool-right{
display: flex;
align-items: center;
.item-children{
margin-right: 22px;
}
}
</style>

2
src/layout/Header/components/Avatar.vue → src/layout/components/Header/components/Avatar.vue
View File

@ -3,7 +3,7 @@
<span class="el-dropdown-link">
<el-avatar :size="30" class="avatar" :src="AvatarLogo"/>
{{userInfo.username}}
<el-icon class="el-icon--right">
<el-icon class="header-icon el-icon--right">
<arrow-down />
</el-icon>
</span>

0
src/layout/Header/components/CollapseIcon.vue → src/layout/components/Header/components/CollapseIcon.vue
View File

0
src/layout/Header/components/Hamburger.vue → src/layout/components/Header/components/Hamburger.vue
View File

2
src/layout/Header/components/HeaderSearch.vue → src/layout/components/Header/components/HeaderSearch.vue
View File

@ -2,7 +2,7 @@
<template>
<div class="m-headerSearch">
<el-tooltip effect="dark" content="菜单搜索" placement="bottom">
<el-icon class="bell" style="font-size: 22px;" @click="handleSearch"><Search /></el-icon>
<el-icon class="bell header-icon" style="font-size: 22px;" @click="handleSearch"><Search /></el-icon>
</el-tooltip>
<el-dialog v-model="isShowSearch" width="600px" destroy-on-close :show-close="false">
<el-select

14
src/layout/components/Header/components/Height.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div
:style="{ height:`${themeConfig.showTag?90:50}px`}"
v-if="themeConfig.fixedHeader">
</div>
</template>
<script lang="ts" setup>
import {computed} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
const themeConfig = computed(()=>SettingStore.themeConfig)
</script>

0
src/layout/Header/components/PersonalDialog.vue → src/layout/components/Header/components/PersonalDialog.vue
View File

2
src/layout/Header/components/Remind.vue → src/layout/components/Header/components/Remind.vue
View File

@ -3,7 +3,7 @@
<el-popover width="200px" placement="bottom">
<template #reference>
<el-badge :value="3" class="item-info-pop">
<el-icon class="bell" style="font-size: 20px;"><Bell /></el-icon>
<el-icon class="bell header-icon" style="font-size: 20px;"><Bell /></el-icon>
</el-badge>
</template>
<div>

11
src/layout/Header/components/Screenfull.vue → src/layout/components/Header/components/ScreenFull.vue
View File

@ -1,6 +1,10 @@
<template>
<div class="m-screenful">
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="toggle" class="full-screen"/>
<el-tooltip effect="dark" content="全屏" placement="bottom">
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="toggle"
className="header-icon"
/>
</el-tooltip>
</div>
</template>
@ -18,9 +22,4 @@ const { toggle, isFullscreen } = useFullscreen();
cursor: pointer;
transition: all 0.3s;
}
.transverseMenu {
.full-screen {
color: white;
}
}
</style>

2
src/layout/Header/components/globalComSize.vue → src/layout/components/Header/components/globalComSize.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dropdown trigger="hover" @command="setAssemblySize">
<svg-icon class-name="size-icon" icon-class="size" style="font-size: 20px;cursor: pointer"/>
<svg-icon class-name="size-icon header-icon" icon-class="size" style="font-size: 20px;cursor: pointer"/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in assemblySizeList" :key="item" :disabled="globalComSize === item" :command="item">

24
src/layout/components/Mobile/index.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
</template>
<script lang="ts" setup>
import {computed} from "vue";
import { useResizeHandler } from '../../hooks/useResizeHandler'
import {useSettingStore} from "@/store/modules/setting"
let { device } = useResizeHandler()
const SettingStore = useSettingStore()
// 是否折叠
const isCollapse = computed(() => !SettingStore.isCollapse)
// 移动端点击
const handleClickOutside = () => {
SettingStore.closeSideBar({ withoutAnimation: false })
}
</script>
<style lang="scss" scoped>
</style>

0
src/layout/Sidebar/components/Logo.vue → src/layout/components/Sidebar/components/Logo.vue
View File

0
src/layout/Sidebar/components/Menu.vue → src/layout/components/Sidebar/components/Menu.vue
View File

79
src/layout/components/Sidebar/components/SubItem.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<template v-if="!item.hidden">
<template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)">
<el-icon :size="20">
<component :is="onlyOneChild?.meta.icon"></component>
</el-icon>
<template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
</el-menu-item>
</app-link>
</template>
<el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
<template #title>
<el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
<span>{{ item.meta && item.meta.title }}</span>
</template>
<sub-item
v-for="child in item.children"
:key="child.path"
:item="child"
:base-path="resolvePath(child.path)"
/>
</el-sub-menu>
</template>
</template>
<script lang="ts" setup>
import { isExternal } from '@/utils/validate.js'
import AppLink from '../../SubMenu/Link.vue'
import path from 'path-browserify'
import { ref, computed } from 'vue'
const props = defineProps({
item: {
type: Object,
required: true,
},
basePath: {
type: String,
default: '',
},
})
const onlyOneChild = ref(null)
const hasOneShowingChild = (children = [], parent) => {
const showingChildren = children.filter((item) => {
// 过滤掉需要隐藏的菜单
if (item.hidden) {
return false
} else {
// 临时设置（如果只有一个显示子项，则将使用）
onlyOneChild.value = item
return true
}
})
// 当只有一个子路由器时，默认情况下会显示该子路由器
if (showingChildren.length === 1) {
return true
}
// 如果没有要显示的子路由器，则显示父路由器
if (showingChildren.length === 0) {
onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
return true
}
return false
}
const resolvePath = (routePath) => {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(props.basePath)) {
return props.basePath
}
return path.resolve(props.basePath, routePath)
}
</script>

65
src/layout/components/Sidebar/index.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
<Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
background-color="#304156"
text-color="#bfcbd9"
:unique-opened="SettingStore.themeConfig.uniqueOpened"
:collapse-transition="false"
class="el-menu-vertical-demo"
:collapse="isCollapse"
>
<SubItem
v-for="route in permission_routes"
:key="route.path"
:item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
</template>
<script lang="ts" setup>
import Logo from './components/Logo.vue'
import SubItem from '../SubMenu/SubItem.vue'
import {useSettingStore} from "@/store/modules/setting"
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {usePermissionStore} from "@/store/modules/permission"
// 在setup中获取store
const route = useRoute()
const PermissionStore = usePermissionStore()
const SettingStore = useSettingStore()
// 是否折叠
const isCollapse = computed(() => !SettingStore.isCollapse)
// 设置
const themeConfig = computed(() =>SettingStore.themeConfig )
// 获取路由
const permission_routes = computed(() => PermissionStore.permission_routes)
const activeMenu = computed(() => {
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
})
// 横向
const mode = computed(() => SettingStore.themeConfig.mode)
</script>
<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
height: 100%;
}
</style>

0
src/layout/Sidebar/components/Link.vue → src/layout/components/SubMenu/Link.vue
View File

0
src/layout/Sidebar/components/SubItem.vue → src/layout/components/SubMenu/SubItem.vue
View File

0
src/layout/TagsView/components/MoreButton.vue → src/layout/components/TagsView/components/MoreButton.vue
View File

51
src/layout/index.vue
View File

@ -1,37 +1,44 @@
<template>
<div class="g-container-layout" :class="classObj">
<div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
<Sidebar class="sidebar-container" v-if="mode === 'vertical'" />
<div
class="main-container"
:class="{
hideSliderLayout: mode === 'horizontal',
}"
>
<div :style="{ height:`${showTag?90:50}px` }" v-if="SettingStore.themeConfig.fixedHeader"></div>
<UHeader/>
<Main/>
<Footer/>
</div>
<Mobile/>
<LayoutVertical v-if="device === 'mobile'"/>
<component :is="LayoutComponents[themeConfig.mode]" v-else/>
<Theme />
</div>
</template>
<script lang="ts" setup>
import { computed, defineComponent, ref } from 'vue'
import { computed,watch } from 'vue'
import Theme from '@/components/Theme/index.vue'
import Mobile from './components/Mobile/index.vue'
import {useSettingStore} from "@/store/modules/setting"
import Sidebar from './Sidebar/index.vue'
import UHeader from './Header/index.vue'
import Main from './Main/index.vue'
import Footer from './Footer/index.vue'
import { useResizeHandler } from './hooks/useResizeHandler'
import LayoutVertical from './LayoutVertical/index.vue'
import LayoutHorizontal from './LayoutHorizontal/index.vue'
const SettingStore = useSettingStore()
const themeConfig = computed(() => SettingStore.themeConfig)
const LayoutComponents = {
horizontal: LayoutHorizontal,
vertical: LayoutVertical,
};
// 是否折叠
const isCollapse = computed(() => {
return !SettingStore.isCollapse
})
let { device } = useResizeHandler()
watch(()=>device.value,(val)=>{
console.log('themeConfig.value.mode',themeConfig.value.mode)
let vertical = val==='mobile'?'vertical':themeConfig.value.mode
const body = document.body as HTMLElement;
body.setAttribute("class", `layout-${vertical}`);
},{
immediate:true
})
// 当屏幕切换的时候进行变换
const classObj = computed(() => {
return {
@ -41,13 +48,9 @@
mobile: device.value === 'mobile',
}
})
// 移动端点击
const handleClickOutside = () => {
SettingStore.closeSideBar({ withoutAnimation: false })
}
const showTag = computed(() => SettingStore.themeConfig.showTag)
const mode = computed(() => SettingStore.themeConfig.mode)
</script>
<style lang="scss" scoped>

1
src/permission.ts
View File

@ -33,7 +33,6 @@ router.beforeEach(async(to, from, next) => {
const accessRoutes = await PermissionStore.generateRoutes(UserStore.roles)
hasRoles = false
accessRoutes.forEach(item => router.addRoute(item)) // 动态添加访问路由表
console.log('accessRoutes',accessRoutes)
next({ ...to, replace: true }) // // 这里相当于push到一个页面 不在进入路由拦截
}else {
next() // // 如果不传参数就会重新执行路由拦截，重新进到这里

13
src/styles/common.scss
View File

@ -11,6 +11,7 @@ body{
background: #f0f2f5;
}
/* 常用 flex */
.flex-center {
display: flex;
@ -55,8 +56,6 @@ body{
}
/* nprogress样式 */
#nprogress .bar {
background: $primaryColor !important;
@ -85,3 +84,13 @@ body{
padding: 20px;
box-sizing: border-box;
}
.layout-horizontal{
.header-icon{
color:#bfcbd9!important;
}
.el-dropdown-link{
color:#bfcbd9!important;
}
}

139
src/styles/element-dark.scss
View File

@ -58,22 +58,8 @@ html.dark {
body{
background: none;
}
.tags-wrap-container{
border: var(--zb-border-light);
border-top:none ;
border-left: none;
box-sizing: border-box;
.tags-view{
background: none;
}
}
.m-container-layout{
.m-container-layout-inner{
background: none;
color: var(--el-text-color-primary) !important;
}
}
// 编辑器
.w-e-toolbar, .w-e-text-container, .w-e-menu-panel{
background: none!important;
@ -85,7 +71,7 @@ html.dark {
#app{
.sidebar-container{
background: none!important;
background: var(--el-bg-color)!important;
& .el-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
background-color: var(--el-bg-color) !important;
@ -104,31 +90,11 @@ html.dark {
}
}
}
.zb-pro-table .header{
background: none!important;
border: var(--zb-border-light);
}
.zb-pro-table .footer{
background: none!important;
border: var(--zb-border-light);
}
// m-layout-header
.m-layout-header{
color: var(--el-text-color-primary) !important;
background: none;
.header{
border:var(--zb-border-light);
border-left:none ;
}
}
.el-scrollbar{
border:var(--zb-border-light);
border-top:none ;
}
.sidebar-logo-container{
background: none;
height: 60px;
box-sizing: border-box;
border:var(--zb-border-light);
}
@ -141,12 +107,6 @@ html.dark {
color: var(--el-text-color-primary) !important;
}
// icon
.m-info .bell,
.m-setting .bell,
.m-headerSearch .bell{
color: white!important;
}
.el-table__header th {
font-weight: bold;
@ -156,25 +116,90 @@ html.dark {
background: none;
color: white;
}
.app-container-inner{
background: none;
}
.list-group-item{
background: none!important;
border: 1px solid white;
}
.app-container{
.zb-pro-table{
.header{
background: none;
background: none!important;
border: var(--zb-border-light);
}
.footer{
background: none!important;
border: var(--zb-border-light);
}
.el-table__header th{
color: white!important;
}
}
// header
.m-layout-header{
color: var(--el-text-color-primary) !important;
.header-inner{
background-color: var(--el-bg-color)!important;
border-bottom:var(--zb-border-light);
.header-icon{
color:#bfcbd9!important;
}
}
// tagviews
.m-tags-view{
background: var(--el-bg-color)!important;
border: var(--zb-border-light);
border-top:none ;
border-left: none;
box-sizing: border-box;
.el-tabs--card>.el-tabs__header{
border-bottom: none!important;
}
}
}
// 内容区
.app-main{
.echarts-map{
background: var(--el-bg-color)!important;
}
.app-echarts{
background: none;
}
.app-container{
.header{
background: none;
}
.footer{
background: none;
}
}
.m-container-layout{
.m-container-layout-inner{
background: none;
color: var(--el-text-color-primary) !important;
}
}
.item-group-item{
background: none!important;
border: var(--zb-border-light);
color: #cccccc;
}
.app-container-inner{
background: none;
}
}
.zb-pro-table .el-table__header th{
color: white!important;
// 底部
.footer-layout{
border-top:var(--zb-border-light);
}
// 登录
.login-container {
background-color: var(--el-fill-color-extra-light) !important;
.login-box {
@ -189,4 +214,8 @@ html.dark {
}
}
.el-scrollbar{
border:var(--zb-border-light);
border-top:none ;
}
}

78
src/styles/sidebar.scss
View File

@ -1,4 +1,4 @@
#app {
.layout-vertical{
.main-container {
min-height: 100%;
transition: margin-left 0.28s;
@ -12,10 +12,6 @@
border-bottom: none;
}
}
.transverseMenu {
background-color: $menuBg;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
@ -47,7 +43,7 @@
&.has-logo {
.el-scrollbar {
height: calc(100% - 60px);
height: calc(100% - 50px);
}
}
@ -61,9 +57,6 @@
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
@ -191,44 +184,45 @@
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
& > .el-menu {
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
// when menu collapsed
.el-menu--vertical {
& > .el-menu {
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
&::-webkit-scrollbar {
width: 6px;
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
// the scroll bar appears when the subMenu is too long
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
}

8
src/utils/element.ts
View File

@ -4,15 +4,13 @@ import {
} from '@element-plus/icons-vue'
let loading = null
export const openLoading = (options)=>{
export const openLoading = (options={})=>{
const text = options.text||'加载中'
loading = ElLoading.service({
lock: true,
text: text,
spinner:Loading,
background: 'rgba(0, 0, 0, 0.7)',
})
}
export const closeLoading = () = {
loading&&loading()
export const closeLoading = () => {
loading&&loading.close()
}

1
src/views/home/index.scss
View File

@ -74,4 +74,5 @@
display: flex;
padding: 16px;
box-sizing: border-box;
font-size: 14px;
}

2
src/views/login/components/LoginForm.vue
View File

@ -69,7 +69,7 @@ const rules = reactive({
// 表单数据
const ruleForm = reactive({
username: 'vue-admin',
username: 'admin',
password: '123456',
})