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

'admin-21.01.09:布局配置新增其它设置及逻辑'

Browse Source
This commit is contained in:
lyt-Top 2021-01-09 18:10:16 +08:00
parent e7e65b750c
commit f54128568d
13 changed files with 237 additions and 36 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" "build": "vite build"
}, },
"dependencies": { "dependencies": {
"element-plus": "^v1.0.1-beta.20", "element-plus": "^v1.0.1-beta.23",
"mitt": "^2.1.0", "mitt": "^2.1.0",
"sortablejs": "^1.10.2", "sortablejs": "^1.10.2",
"vue": "^3.0.5", "vue": "^3.0.5",

2
vue-admin-wonderful-next/src/App.vue
View File

@ -9,7 +9,7 @@ export default {
name: "app", name: "app",
setup() { setup() {
onBeforeMount(() => { onBeforeMount(() => {
setIconfont(["//at.alicdn.com/t/font_2298093_8wsrw2zw3rg.css"]); setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
}); });
}, },
}; };

18
vue-admin-wonderful-next/src/router/index.ts
View File

@ -7,16 +7,14 @@ const staticRoutes: Array<RouteRecordRaw> = [
component: () => import('/@/views/layout/index.vue'), component: () => import('/@/views/layout/index.vue'),
redirect: '/home', redirect: '/home',
meta: { meta: {
title: '首页', title: '首页'
index: 0
}, },
children: [{ children: [{
path: '/home', path: '/home',
name: 'home', name: 'home',
component: () => import('/@/views/home/index.vue'), component: () => import('/@/views/home/index.vue'),
meta: { meta: {
title: '首页', title: '首页'
index: 0
} }
}, },
{ {
@ -24,8 +22,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
name: 'docs', name: 'docs',
component: () => import('/@/views/docs/index.vue'), component: () => import('/@/views/docs/index.vue'),
meta: { meta: {
title: '文档', title: '文档'
index: 1
} }
}, },
{ {
@ -33,8 +30,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
name: 'docs1', name: 'docs1',
component: () => import('/@/views/docs copy 1/index.vue'), component: () => import('/@/views/docs copy 1/index.vue'),
meta: { meta: {
title: '文档1', title: '文档1'
index: 2
} }
}, },
{ {
@ -42,8 +38,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
name: 'docs2', name: 'docs2',
component: () => import('/@/views/docs copy 2/index.vue'), component: () => import('/@/views/docs copy 2/index.vue'),
meta: { meta: {
title: '文档2', title: '文档2'
index: 3
} }
}, },
{ {
@ -51,8 +46,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
name: 'docs3', name: 'docs3',
component: () => import('/@/views/docs copy 3/index.vue'), component: () => import('/@/views/docs copy 3/index.vue'),
meta: { meta: {
title: '文档3', title: '文档3'
index: 4
} }
}] }]
}, },

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

@ -30,7 +30,9 @@ export interface RootStateTypes {
isGrayscale: boolean, isGrayscale: boolean,
isInvert: boolean, isInvert: boolean,
isWartermark: boolean, isWartermark: boolean,
wartermarkText: string wartermarkText: string,
tagsStyle: string,
animation: string
} }
} }

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

@ -22,6 +22,16 @@
.slide-left-leave-to { .slide-left-leave-to {
@extend .slide-right-enter-from; @extend .slide-right-enter-from;
} }
.opacitys-enter-active,
.opacitys-leave-active {
will-change: transform;
transition: all 0.3s ease;
position: absolute;
}
.opacitys-enter-from,
.opacitys-leave-to {
opacity: 0;
}
/* Breadcrumb 面包屑过渡动画 /* Breadcrumb 面包屑过渡动画
------------------------------- */ ------------------------------- */

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

@ -11,6 +11,9 @@
color: set-color(primary-light-3); color: set-color(primary-light-3);
} }
} }
.el-button--text:active {
color: set-color(primary-light-3);
}
// default // default
.el-button--default:hover, .el-button--default:hover,
.el-button--default:focus { .el-button--default:focus {
@ -20,6 +23,9 @@
.el-button--default.is-plain:focus { .el-button--default.is-plain:focus {
@include Button(primary, whites, primary-light-1); @include Button(primary, whites, primary-light-1);
} }
.el-button--default:active {
@include Button(primary, whites, primary-light-1);
}
// primary // primary
.el-button--primary { .el-button--primary {
@include Button(whites, primary, primary); @include Button(whites, primary, primary);
@ -41,6 +47,10 @@
.el-button--primary.is-disabled:hover { .el-button--primary.is-disabled:hover {
@include Button(whites, primary-light-7, primary-light-7); @include Button(whites, primary-light-7, primary-light-7);
} }
.el-button--primary.is-active,
.el-button--primary:active {
@include Button(whites, primary, primary);
}
// success // success
.el-button--success { .el-button--success {
@include Button(whites, success, success); @include Button(whites, success, success);
@ -56,6 +66,10 @@
@include Button(whites, success, success); @include Button(whites, success, success);
} }
} }
.el-button--success.is-active,
.el-button--success:active {
@include Button(whites, success, success);
}
// info // info
.el-button--info { .el-button--info {
@include Button(whites, info, info); @include Button(whites, info, info);
@ -71,6 +85,10 @@
@include Button(whites, info, info); @include Button(whites, info, info);
} }
} }
.el-button--info.is-active,
.el-button--info:active {
@include Button(whites, info, info);
}
// warning // warning
.el-button--warning { .el-button--warning {
@include Button(whites, warning, warning); @include Button(whites, warning, warning);
@ -86,6 +104,10 @@
@include Button(whites, warning, warning); @include Button(whites, warning, warning);
} }
} }
.el-button--warning.is-active,
.el-button--warning:active {
@include Button(whites, warning, warning);
}
// danger // danger
.el-button--danger { .el-button--danger {
@include Button(whites, danger, danger); @include Button(whites, danger, danger);
@ -101,6 +123,10 @@
@include Button(whites, danger, danger); @include Button(whites, danger, danger);
} }
} }
.el-button--danger.is-active,
.el-button--danger:active {
@include Button(whites, danger, danger);
}
/* Link 文字链接 /* Link 文字链接
------------------------------- */ ------------------------------- */

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

@ -27,5 +27,7 @@ export default {
isGrayscale: false, isGrayscale: false,
isInvert: false, isInvert: false,
isWartermark: false, isWartermark: false,
wartermarkText: 'small@小柒' wartermarkText: 'small@小柒',
tagsStyle: 'tagsStyleOne',
animation: 'slideRight'
} }

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

@ -1,3 +1,3 @@
<template> <template>
docs <p v-for="v in 100" :key="v">docs</p>
</template> </template>

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

@ -3,7 +3,7 @@
<el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}" <el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}"
ref="layoutScrollbarRef"> ref="layoutScrollbarRef">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="transitionName" mode="out-in"> <transition :name="setTransitionName" mode="out-in">
<div :key="key"> <div :key="key">
<keep-alive> <keep-alive>
<component :is="Component" /> <component :is="Component" />
@ -25,7 +25,7 @@ import {
getCurrentInstance, getCurrentInstance,
watch, watch,
} from "vue"; } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router"; import { useRoute } from "vue-router";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import Footer from "/@/views/layout/footer/index.vue"; import Footer from "/@/views/layout/footer/index.vue";
export default defineComponent({ export default defineComponent({
@ -39,14 +39,19 @@ export default defineComponent({
transitionName: "slide-right", transitionName: "slide-right",
headerHeight: "84px", headerHeight: "84px",
}); });
const setTransitionName = computed(() => {
let { animation } = store.state.themeConfig;
if (animation === "slideRight")
return (state.transitionName = "slide-right");
else if (animation === "slideLeft")
return (state.transitionName = "slide-left");
else if (animation === "opacitys")
return (state.transitionName = "opacitys");
});
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; return store.state.themeConfig;
}); });
const key = computed(() => route.path); const key = computed(() => route.path);
onBeforeRouteUpdate((to, from) => {
state.transitionName =
to.meta.index > from.meta.index ? "slide-right" : "slide-left";
});
watch(store.state.themeConfig, (val) => { watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px"; state.headerHeight = val.isTagsview ? "84px" : "50px";
if (val.isFixedHeaderChange !== val.isFixedHeader) { if (val.isFixedHeaderChange !== val.isFixedHeader) {
@ -55,6 +60,7 @@ export default defineComponent({
}); });
return { return {
getThemeConfig, getThemeConfig,
setTransitionName,
key, key,
...toRefs(state), ...toRefs(state),
}; };

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

@ -182,20 +182,21 @@
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div> <div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <div class="layout-breadcrumb-seting-bar-flex-value">
<el-select placeholder="请选择" size="mini" style="width:90px;"> <el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;">
<el-option label="风格1" value="风格1"></el-option> <el-option label="风格1" value="tagsStyleOne"></el-option>
<el-option label="风格2" value="风格2"></el-option> <el-option label="风格2" value="tagsStyleTwo"></el-option>
<el-option label="风格3" value="风格3"></el-option> <el-option label="风格3" value="tagsStyleThree"></el-option>
<el-option label="风格4" value="tagsStyleFour"></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15 mb26"> <div class="layout-breadcrumb-seting-bar-flex mt15 mb26">
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div> <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <div class="layout-breadcrumb-seting-bar-flex-value">
<el-select placeholder="请选择" size="mini" style="width:90px;"> <el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
<el-option label="slide-right" value="slide-right"></el-option> <el-option label="slideRight" value="slideRight"></el-option>
<el-option label="slide-right" value="slide-right"></el-option> <el-option label="slideLeft" value="slideLeft"></el-option>
<el-option label="slide-right" value="slide-right"></el-option> <el-option label="opacitys" value="opacitys"></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
@ -488,6 +489,8 @@ export default defineComponent({
.el-circular { .el-circular {
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
border: 1px solid transparent;
transition: all 0.3s ease-in-out;
} }
.drawer-layout-active { .drawer-layout-active {
border: 1px solid; border: 1px solid;
@ -495,6 +498,7 @@ export default defineComponent({
} }
.layout-tips-warp, .layout-tips-warp,
.layout-tips-warp-active { .layout-tips-warp-active {
transition: all 0.3s ease-in-out;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -504,6 +508,7 @@ export default defineComponent({
border-radius: 100%; border-radius: 100%;
padding: 4px; padding: 4px;
.layout-tips-box { .layout-tips-box {
transition: inherit;
width: 30px; width: 30px;
height: 30px; height: 30px;
z-index: 9; z-index: 9;
@ -511,6 +516,7 @@ export default defineComponent({
border-color: var(--color-primary-light-4); border-color: var(--color-primary-light-4);
border-radius: 100%; border-radius: 100%;
.layout-tips-txt { .layout-tips-txt {
transition: inherit;
position: relative; position: relative;
top: 5px; top: 5px;
font-size: 12px; font-size: 12px;
@ -540,6 +546,26 @@ export default defineComponent({
} }
} }
} }
&:hover {
.el-circular {
transition: all 0.3s ease-in-out;
border: 1px solid;
border-color: var(--color-primary);
}
.layout-tips-warp {
transition: all 0.3s ease-in-out;
border-color: var(--color-primary);
.layout-tips-box {
transition: inherit;
border-color: var(--color-primary);
.layout-tips-txt {
transition: inherit;
color: var(--color-primary) !important;
background-color: #e9eef3 !important;
}
}
}
}
} }
} }
.copy-config { .copy-config {

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

@ -4,7 +4,7 @@
<i class="el-icon-search" title="菜单搜索"></i> <i class="el-icon-search" title="菜单搜索"></i>
</div> </div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick"> <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="el-icon-setting" title="布局配置"></i> <i class="icon-skin iconfont" title="布局配置"></i>
</div> </div>
<div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" 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> <div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>

139
vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview"> <div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
<Scroll ref="scrollRef"> <Scroll ref="scrollRef">
<ul class="layout-navbars-tagsview-ul"> <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
<li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}" <li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
@contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)" @contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
:ref="el => { if (el) tagsRefs[k] = el }"> :ref="el => { if (el) tagsRefs[k] = el }">
@ -9,8 +9,9 @@
<span>{{v.name}}</span> <span>{{v.name}}</span>
<template v-if="isActive(v.path)"> <template v-if="isActive(v.path)">
<i class="el-icon-refresh-right ml5"></i> <i class="el-icon-refresh-right ml5"></i>
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon"></i> <i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"></i>
</template> </template>
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"></i>
</li> </li>
</ul> </ul>
</Scroll> </Scroll>
@ -58,6 +59,14 @@ export default {
{ id: 1, name: "文档3", path: "/docs3" }, { id: 1, name: "文档3", path: "/docs3" },
], ],
}); });
const setTagsStyle = computed(() => {
let { tagsStyle } = store.state.themeConfig;
if (tagsStyle === "tagsStyleTwo") return "layout-navbars-tagsview-ul-two";
else if (tagsStyle === "tagsStyleThree")
return "layout-navbars-tagsview-ul-three";
else if (tagsStyle === "tagsStyleFour")
return "layout-navbars-tagsview-ul-four";
});
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; return store.state.themeConfig;
}); });
@ -110,6 +119,7 @@ export default {
contextmenuRef, contextmenuRef,
scrollRef, scrollRef,
getThemeConfig, getThemeConfig,
setTagsStyle,
...toRefs(state), ...toRefs(state),
}; };
}, },
@ -141,6 +151,8 @@ export default {
padding: 0 15px; padding: 0 15px;
margin-right: 5px; margin-right: 5px;
border-radius: 2px; border-radius: 2px;
position: relative;
z-index: 3;
cursor: pointer; cursor: pointer;
justify-content: space-between; justify-content: space-between;
&:hover { &:hover {
@ -165,6 +177,12 @@ export default {
background-color: var(--color-primary-light-3); background-color: var(--color-primary-light-3);
} }
} }
.layout-icon-active {
display: block;
}
.layout-icon-three {
display: none;
}
} }
.is-active { .is-active {
color: #ffffff; color: #ffffff;
@ -172,5 +190,122 @@ export default {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
} }
// 风格2
&-ul-two {
.layout-navbars-tagsview-ul-li {
height: 34px !important;
line-height: 34px !important;
border: none !important;
.layout-navbars-tagsview-ul-li-iconfont {
display: none;
}
.layout-icon-active {
display: none;
}
.layout-icon-three {
display: block;
}
}
.is-active {
background: none !important;
color: var(--color-primary) !important;
border-bottom: 2px solid !important;
border-color: var(--color-primary) !important;
border-radius: 0 !important;
}
}
// 风格3
&-ul-three {
.layout-navbars-tagsview-ul-li {
height: 34px !important;
line-height: 34px !important;
border: 1px solid #e6e6e6 !important;
border-top: none !important;
border-left: none !important;
border-radius: 0 !important;
margin-right: 0 !important;
&:first-of-type {
border-left: 1px solid #e6e6e6 !important;
}
.layout-icon-active {
display: none;
}
.layout-icon-three {
display: block;
}
}
.is-active {
background: white !important;
color: var(--color-primary) !important;
border-bottom: 1px solid !important;
border-bottom-color: var(--color-primary) !important;
}
}
// 风格4
&-ul-four {
.layout-navbars-tagsview-ul-li {
margin-right: 0 !important;
border: none !important;
position: relative;
border-radius: 0 !important;
.layout-icon-active {
display: none;
}
.layout-icon-three {
display: block;
}
&:hover {
background: none !important;
}
}
.is-active {
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
position: relative;
z-index: 1;
span {
position: relative;
&::before,
&::after {
content: "";
position: absolute;
bottom: 0px;
width: 10px;
height: 10px;
background: var(--color-primary);
z-index: 1;
}
&::before {
left: -36px;
}
&::after {
right: -51px;
}
}
&::before,
&::after {
content: "";
position: absolute;
bottom: 1px;
width: 10px;
height: 10px;
background: white;
z-index: 2;
}
&::before {
left: -10px;
transform: rotate(-4deg);
border-bottom-right-radius: 10px;
}
&::after {
right: -10px;
transform: rotate(4deg) !important;
border-bottom-left-radius: 10px;
}
&:hover {
background: var(--color-primary) !important;
}
}
}
} }
</style> </style>

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

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