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

'admin-21.01.05:编写布局配置相对应功能、添加过渡动画等'

Browse Source
This commit is contained in:
lyt-Top 2021-01-05 23:58:16 +08:00
parent c0a369c6d0
commit 4a916d6d12
11 changed files with 107 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
"build": "vite build"
},
"dependencies": {
"element-plus": "^v1.0.1-beta.19",
"element-plus": "^v1.0.1-beta.20",
"mitt": "^2.1.0",
"sortablejs": "^1.10.2",
"vue": "^3.0.5",

9
vue-admin-wonderful-next/src/assets/logo-docs-mini.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 35" width="47" height="35">
<defs>
<image width="41" height="29" id="img1" href="data:image/png;base64,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"/>
</defs>
<style>
tspan { white-space:pre }
</style>
<use id="图层 1" href="#img1" x="3" y="3" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

3
vue-admin-wonderful-next/src/store/index.ts
View File

@ -20,7 +20,8 @@ export interface RootStateTypes {
isUniqueOpened: boolean,
isFixedHeader: boolean,
isCollapse1: boolean,
menuWidth: number,
menuWidth1: number,
isShowLogo: boolean
}
}

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

@ -34,6 +34,8 @@ body,
height: inherit;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
.el-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
@ -51,7 +53,7 @@ body,
.el-scrollbar {
width: 100%;
}
.layout-aside-width240 {
.layout-aside-width-default {
width: 240px !important;
transition: width 0.3s ease;
}
@ -85,6 +87,15 @@ body,
}
}
/* flex 弹性布局
------------------------------- */
.flex {
display: flex;
}
.flex-auto {
flex: 1;
}
/* 宽高 100%
------------------------------- */
.w100 {

14
vue-admin-wonderful-next/src/theme/common/transition.scss
View File

@ -35,3 +35,17 @@
opacity: 0;
transform: translateX(20px);
}
/* logo 过渡动画
------------------------------- */
@keyframes logoAnimation {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

3
vue-admin-wonderful-next/src/utils/themeConfig.ts
View File

@ -17,5 +17,6 @@ export default {
isUniqueOpened: false,
isFixedHeader: false,
isCollapse1: false,
menuWidth: 240,
menuWidth1: 200,
isShowLogo: false
}

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

@ -1,19 +1,22 @@
<template>
<el-aside :class="isCollapse ? 'layout-aside-width64' : 'layout-aside-width240'">
<el-scrollbar>
<el-aside :class="getThemeConfig.isCollapse ? 'layout-aside-width64' : 'layout-aside-width-default'">
<Logo v-if="getThemeConfig.isShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" />
</el-scrollbar>
</el-aside>
</template>
<script lang="ts">
import Logo from "/@/views/layout/logo/index.vue";
import Vertical from "/@/views/layout/navMenu/vertical.vue";
import { toRefs, reactive, computed } from "vue";
import { toRefs, reactive, computed, watch, getCurrentInstance } from "vue";
import { useStore } from "/@/store/index.ts";
export default {
name: "layoutAside",
components: { Vertical },
components: { Logo, Vertical },
setup() {
const { proxy } = getCurrentInstance();
const store = useStore();
const state = reactive({
menuList: [
@ -64,11 +67,14 @@ export default {
},
],
});
const isCollapse = computed(() => {
return store.state.themeConfig.isCollapse;
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
watch(store.state.themeConfig, (val) => {
proxy.$refs.layoutAsideScrollbarRef.update();
});
return {
isCollapse,
getThemeConfig,
...toRefs(state),
};
},

1
vue-admin-wonderful-next/src/views/layout/component/main.vue
View File

@ -1,6 +1,5 @@
<template>
<el-main :class="getThemeConfig.isFixedHeader ? 'el-main-overflow-auto' : 'el-main-overflow-unset'">
<!-- <el-main> -->
<el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);" ref="layoutScrollbarRef">
<router-view v-slot="{ Component }">
<transition :name="transitionName" mode="out-in">

41
vue-admin-wonderful-next/src/views/layout/logo/index.vue
View File

@ -1,9 +1,46 @@
<template>
layoutLogo
<div class="layout-logo" v-if="!getThemeConfig.isCollapse">vue-admin-wonderful</div>
<div class="layout-logo-size" v-else>
<img src="/@/assets/logo-docs-mini.svg" class="layout-logo-size-img" />
</div>
</template>
<script lang="ts">
import { computed } from "vue";
import { useStore } from "/@/store/index.ts";
export default {
name: "layoutLogo",
setup() {
const store = useStore();
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
return {
getThemeConfig,
};
},
};
</script>
</script>
<style scoped lang="scss">
.layout-logo {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
color: var(--color-primary);
font-size: 16px;
animation: logoAnimation 0.3s ease-in-out;
}
.layout-logo-size {
width: 100%;
height: 50px;
display: flex;
animation: logoAnimation 0.3s ease-in-out;
&-img {
width: 30px;
margin: auto;
}
}
</style>

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

@ -115,18 +115,10 @@
<el-switch v-model="getThemeConfig.isCollapse1"></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">
<el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
size="mini" style="width:90px;">
</el-input-number>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt11">
<div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input-number v-model="getThemeConfig.menuWidth" controls-position="right" :min="1" :max="999"
<el-input-number v-model="getThemeConfig.menuWidth1" controls-position="right" :min="1" :max="999"
size="mini" style="width:90px;">
</el-input-number>
</div>
@ -137,7 +129,7 @@
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
<el-switch v-model="getThemeConfig.isShowLogo" @change="onsetThemeConfigChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
@ -179,7 +171,7 @@
<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">
<el-input v-model="getThemeConfig.menuWidth" size="mini" style="width:90px;"></el-input>
<el-input v-model="getThemeConfig.menuWidth1" size="mini" style="width:90px;"></el-input>
</div>
</div>

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

@ -1,9 +1,13 @@
<template>
<div class="layout-navbars-breadcrumb-user">
<i class="el-icon-search layout-navbars-breadcrumb-user-icon" title="菜单搜索"></i>
<i class="el-icon-setting layout-navbars-breadcrumb-user-icon" title="布局配置" @click="onLayoutSetingClick"></i>
<i class="el-icon-bell layout-navbars-breadcrumb-user-icon" title="消息"></i>
<i class="icon-fullscreen iconfont layout-navbars-breadcrumb-user-icon mr10" title="开全屏"></i>
<div class="layout-navbars-breadcrumb-user-icon">
<i class="el-icon-search" title="菜单搜索"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="el-icon-setting" title="布局配置"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" title="消息"></i></div>
<div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>
<el-dropdown :show-timeout="70" :hide-timeout="50">
<span class="layout-navbars-breadcrumb-user-link">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
@ -59,15 +63,17 @@ export default {
}
}
&-icon {
display: inline-block;
padding: 0 10px;
cursor: pointer;
transition: all 0.3s;
color: var(--bg-topBarColor);
height: 50px;
line-height: 50px;
&:hover {
background: rgba(0, 0, 0, 0.04);
i {
display: inline-block;
animation: logoAnimation 0.3s ease-in-out;
}
}
}
::v-deep(.el-dropdown) {