hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.04:编写布局配置菜单/顶栏，添加事件总线mitt等'

Browse Source
This commit is contained in:
lyt 2021-01-04 18:56:38 +08:00
parent dd9544d7a5
commit e9f6aae01e
12 changed files with 129 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
vue-admin-wonderful-next/package.json
View File

@ -7,6 +7,7 @@
},
"dependencies": {
"element-plus": "^v1.0.1-beta.19",
"mitt": "^2.1.0",
"sortablejs": "^1.10.2",
"vue": "^3.0.5",
"vue-router": "^4.0.2"
@ -19,4 +20,4 @@
"typescript": "^4.1.2",
"vite": "^1.0.0-rc.13"
}
}
}

5
vue-admin-wonderful-next/src/main.ts
View File

@ -6,5 +6,8 @@ import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import '/@/theme/index.scss'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import mitt from "mitt"
createApp(App).use(router).use(ElementPlus, { locale: lang }).mount('#app')
const app = createApp(App)
app.use(router).use(ElementPlus, { locale: lang }).mount('#app')
app.config.globalProperties.mittBus = mitt()

3
vue-admin-wonderful-next/src/theme/app.scss
View File

@ -46,6 +46,9 @@ body,
.el-scrollbar {
width: 100%;
}
.layout-aside-width {
width: 240px !important;
}
.layout-scrollbar {
@extend .el-scrollbar;
padding: 15px;

11
vue-admin-wonderful-next/src/theme/element.scss
View File

@ -675,6 +675,7 @@
height: 50px !important;
line-height: 50px !important;
color: var(--bg-menuBarColor);
transition: none !important;
}
// horizontal 水平方向时
.el-menu--horizontal > .el-menu-item.is-active,
@ -698,7 +699,6 @@
color: inherit;
text-decoration: none;
}
// 默认 hover 时
.el-menu-item:hover,
.el-submenu__title:hover {
@ -710,12 +710,21 @@
}
// 高亮时
.el-menu-item.is-active {
color: set-color(primary);
}
.el-active-extend {
color: #ffffff !important;
background-color: set-color(primary) !important;
i {
color: #ffffff !important;
}
}
.add-is-active {
@extend .el-active-extend;
&:hover {
@extend .el-active-extend;
}
}
/* Tabs 标签页
------------------------------- */

6
vue-admin-wonderful-next/src/utils/theme.ts
View File

@ -3,7 +3,7 @@ import { ElMessage } from 'element-plus'
// hex颜色转rgb颜色
export function hexToRgb(str: any) {
let hexs: any = ''
let reg = /^\#?[0-9A-F]{6}$/
let reg = /^\#?[0-9A-Fa-f]{6}$/
if (!reg.test(str)) return ElMessage({ type: 'warning', message: "输入错误的hex" })
str = str.replace("#", "")
hexs = str.match(/../g)
@ -22,7 +22,7 @@ export function rgbToHex(r: any, g: any, b: any) {
// 加深颜色值，level为加深的程度，限0-1之间
export function getDarkColor(color: any, level: number) {
let reg = /^\#?[0-9A-F]{6}$/
let reg = /^\#?[0-9A-Fa-f]{6}$/
if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" })
let rgb = hexToRgb(color)
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))
@ -31,7 +31,7 @@ export function getDarkColor(color: any, level: number) {
// 变浅颜色值，level为加深的程度，限0-1之间
export function getLightColor(color: any, level: number) {
let reg = /^\#?[0-9A-F]{6}$/
let reg = /^\#?[0-9A-Fa-f]{6}$/
if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" })
let rgb = hexToRgb(color)
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])

2
vue-admin-wonderful-next/src/views/layout/component/aside.vue
View File

@ -1,5 +1,5 @@
<template>
<el-aside width="240px">
<el-aside class="layout-aside-width">
<el-scrollbar>
<Vertical :menuList="menuList" />
</el-scrollbar>

5
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
View File

@ -61,8 +61,9 @@ export default {
opacity: 0.7;
color: var(--bg-topBarColor);
}
:deep .el-breadcrumb__separator {
@extend .layout-navbars-breadcrumb-span;
::v-deep(.el-breadcrumb__separator) {
opacity: 0.7;
color: var(--bg-topBarColor);
}
}
</style>

2
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
View File

@ -21,6 +21,6 @@ export default {
align-items: center;
border-bottom: 1px solid rgb(230, 230, 230);
padding: 0 15px;
background-color: var(--bg-topBar);
background: var(--bg-topBar);
}
</style>

99
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -71,13 +71,19 @@
<div class="layout-breadcrumb-seting-bar-flex mt10">
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="isCollapse"></el-switch>
<el-switch v-model="isTopBarColorGradual" @change="onTopBarGradualChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景渐变</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="isCollapse"></el-switch>
<el-switch v-model="isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
</div>
</div>
@ -150,6 +156,12 @@
<el-switch v-model="isCollapse"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="isCollapse"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">灰色模式</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
@ -257,11 +269,19 @@
</template>
<script lang="ts">
import { toRefs, reactive } from "vue";
import {
toRefs,
reactive,
nextTick,
onBeforeMount,
onUnmounted,
getCurrentInstance,
} from "vue";
import { getLightColor } from "/@/utils/theme.ts";
export default {
name: "layoutBreadcrumbSeting",
setup() {
const { proxy } = getCurrentInstance();
const state = reactive({
isDrawer: false,
primary: "#409eff",
@ -273,6 +293,9 @@ export default {
menuBar: "#29384d",
topBarColor: "#606266",
menuBarColor: "#e6e6e6",
isTopBarColorGradual: false,
isMenuBarColorGradual: false,
isMenuBarColorHighlight: false,
isCollapse: false,
menuWidth: 240,
});
@ -296,12 +319,62 @@ export default {
};
const onBgColorPickerChange = (bg: string) => {
document.documentElement.style.setProperty(`--bg-${bg}`, state[bg]);
onTopBarGradualChange();
onMenuBarGradualChange();
};
const onTopBarGradualChange = () => {
setGraduaFun(
".layout-navbars-breadcrumb-index",
state.isTopBarColorGradual,
state.topBar
);
};
const onMenuBarGradualChange = () => {
setGraduaFun(
".layout-container .el-aside",
state.isMenuBarColorGradual,
state.menuBar
);
};
const setGraduaFun = (el: string, bool: boolean, color: string) => {
nextTick(() => {
let els = document.querySelector(el);
if (bool)
els.setAttribute(
"style",
`background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(
color,
0.6
)})`
);
else els.setAttribute("style", `background-image:${color}`);
});
};
const onMenuBarHighlightChange = () => {
nextTick(() => {
let els = document.querySelector(".el-menu-item.is-active");
let attr = "el-menu-item is-active";
if (state.isMenuBarColorHighlight)
els.setAttribute("class", `${attr} add-is-active`);
else els.setAttribute("class", `${attr}`);
});
};
onBeforeMount(() => {
proxy.mittBus.on("onMenuClick", () => {
onMenuBarHighlightChange();
});
});
onUnmounted(() => {
proxy.mittBus.off("onMenuClick", () => {});
});
return {
openDrawer,
closeDrawer,
onColorPickerChange,
onBgColorPickerChange,
onTopBarGradualChange,
onMenuBarGradualChange,
onMenuBarHighlightChange,
...toRefs(state),
};
},
@ -312,7 +385,7 @@ export default {
.layout-breadcrumb-seting-bar {
height: calc(100vh - 50px);
padding: 0 15px;
:deep .el-scrollbar__view {
::v-deep(.el-scrollbar__view) {
overflow-x: hidden !important;
}
.layout-breadcrumb-seting-bar-flex {
@ -351,15 +424,13 @@ export default {
background-color: #e9eef3;
}
}
.border-color-09f {
border: 1px solid var(--color-primary) !important;
}
.el-circular {
border-radius: 2px;
overflow: hidden;
}
.drawer-layout-active {
@extend .border-color-09f;
border: 1px solid;
border-color: var(--color-primary);
}
.layout-tips-warp,
.layout-tips-warp-active {
@ -367,14 +438,16 @@ export default {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid var(--color-primary-light-4);
border: 1px solid;
border-color: var(--color-primary-light-4);
border-radius: 100%;
padding: 4px;
.layout-tips-box {
width: 30px;
height: 30px;
z-index: 9;
border: 1px solid var(--color-primary-light-4);
border: 1px solid;
border-color: var(--color-primary-light-4);
border-radius: 100%;
.layout-tips-txt {
position: relative;
@ -395,9 +468,11 @@ export default {
}
}
.layout-tips-warp-active {
@extend .border-color-09f;
border: 1px solid;
border-color: var(--color-primary);
.layout-tips-box {
@extend .border-color-09f;
border: 1px solid;
border-color: var(--color-primary);
.layout-tips-txt {
color: var(--color-primary) !important;
background-color: #e9eef3 !important;

2
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
View File

@ -70,7 +70,7 @@ export default {
background: rgba(0, 0, 0, 0.04);
}
}
:deep .el-dropdown {
::v-deep(.el-dropdown) {
color: var(--bg-topBarColor);
}
}

15
vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue
View File

@ -1,5 +1,5 @@
<template>
<el-menu router :default-active="defaultActive" background-color="transparent">
<el-menu router :default-active="defaultActive" background-color="transparent" @select="onMenuClick">
<template v-for="val in menuList">
<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
<template #title>
@ -18,7 +18,13 @@
</template>
<script lang="ts">
import { toRefs, reactive, computed, defineComponent } from "vue";
import {
toRefs,
reactive,
computed,
defineComponent,
getCurrentInstance,
} from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import SubItem from "/@/views/layout/navMenu/subItem.vue";
export default defineComponent({
@ -33,6 +39,7 @@ export default defineComponent({
},
},
setup(props) {
const { proxy } = getCurrentInstance();
const route = useRoute();
const state = reactive({
defaultActive: route.path,
@ -43,8 +50,12 @@ export default defineComponent({
onBeforeRouteUpdate((to) => {
state.defaultActive = to.path;
});
const onMenuClick = (index, path) => {
proxy.mittBus.emit("onMenuClick");
};
return {
menuList,
onMenuClick,
...toRefs(state),
};
},

2
vue-admin-wonderful-next/src/views/login/index.vue
View File

@ -74,7 +74,7 @@ export default {
left: 50%;
transform: translate(-50%, -50%) translate3d(0, 0, 0);
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 12px 0 var(--color-primary-light-1);
box-shadow: 0 2px 12px 0 var(--color-primary-light-7);
border-radius: 4px;
transition: height 0.2s linear;
height: 480px;