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"
},
"dependencies": {
"element-plus": "^v1.0.1-beta.20",
"element-plus": "^v1.0.1-beta.23",
"mitt": "^2.1.0",
"sortablejs": "^1.10.2",
"vue": "^3.0.5",

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

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

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

@ -30,7 +30,9 @@ export interface RootStateTypes {
isGrayscale: boolean,
isInvert: 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 {
@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 面包屑过渡动画
------------------------------- */

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

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

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

@ -27,5 +27,7 @@ export default {
isGrayscale: false,
isInvert: 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>
docs
<p v-for="v in 100" :key="v">docs</p>
</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}`}"
ref="layoutScrollbarRef">
<router-view v-slot="{ Component }">
<transition :name="transitionName" mode="out-in">
<transition :name="setTransitionName" mode="out-in">
<div :key="key">
<keep-alive>
<component :is="Component" />
@ -25,7 +25,7 @@ import {
getCurrentInstance,
watch,
} from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "/@/store/index.ts";
import Footer from "/@/views/layout/footer/index.vue";
export default defineComponent({
@ -39,14 +39,19 @@ export default defineComponent({
transitionName: "slide-right",
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(() => {
return store.state.themeConfig;
});
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) => {
state.headerHeight = val.isTagsview ? "84px" : "50px";
if (val.isFixedHeaderChange !== val.isFixedHeader) {
@ -55,6 +60,7 @@ export default defineComponent({
});
return {
getThemeConfig,
setTransitionName,
key,
...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-label">Tagsview 风格</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select placeholder="请选择" size="mini" style="width:90px;">
<el-option label="风格1" value="风格1"></el-option>
<el-option label="风格2" value="风格2"></el-option>
<el-option label="风格3" value="风格3"></el-option>
<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width:90px;">
<el-option label="风格1" value="tagsStyleOne"></el-option>
<el-option label="风格2" value="tagsStyleTwo"></el-option>
<el-option label="风格3" value="tagsStyleThree"></el-option>
<el-option label="风格4" value="tagsStyleFour"></el-option>
</el-select>
</div>
</div>
<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-value">
<el-select placeholder="请选择" size="mini" style="width:90px;">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-right" value="slide-right"></el-option>
<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
<el-option label="slideRight" value="slideRight"></el-option>
<el-option label="slideLeft" value="slideLeft"></el-option>
<el-option label="opacitys" value="opacitys"></el-option>
</el-select>
</div>
</div>
@ -488,6 +489,8 @@ export default defineComponent({
.el-circular {
border-radius: 2px;
overflow: hidden;
border: 1px solid transparent;
transition: all 0.3s ease-in-out;
}
.drawer-layout-active {
border: 1px solid;
@ -495,6 +498,7 @@ export default defineComponent({
}
.layout-tips-warp,
.layout-tips-warp-active {
transition: all 0.3s ease-in-out;
position: absolute;
left: 50%;
top: 50%;
@ -504,6 +508,7 @@ export default defineComponent({
border-radius: 100%;
padding: 4px;
.layout-tips-box {
transition: inherit;
width: 30px;
height: 30px;
z-index: 9;
@ -511,6 +516,7 @@ export default defineComponent({
border-color: var(--color-primary-light-4);
border-radius: 100%;
.layout-tips-txt {
transition: inherit;
position: relative;
top: 5px;
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 {

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>
</div>
<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 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>

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

@ -1,7 +1,7 @@
<template>
<div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
<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)}"
@contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
:ref="el => { if (el) tagsRefs[k] = el }">
@ -9,8 +9,9 @@
<span>{{v.name}}</span>
<template v-if="isActive(v.path)">
<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>
<i class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"></i>
</li>
</ul>
</Scroll>
@ -58,6 +59,14 @@ export default {
{ 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(() => {
return store.state.themeConfig;
});
@ -110,6 +119,7 @@ export default {
contextmenuRef,
scrollRef,
getThemeConfig,
setTagsStyle,
...toRefs(state),
};
},
@ -141,6 +151,8 @@ export default {
padding: 0 15px;
margin-right: 5px;
border-radius: 2px;
position: relative;
z-index: 3;
cursor: pointer;
justify-content: space-between;
&:hover {
@ -165,6 +177,12 @@ export default {
background-color: var(--color-primary-light-3);
}
}
.layout-icon-active {
display: block;
}
.layout-icon-three {
display: none;
}
}
.is-active {
color: #ffffff;
@ -172,5 +190,122 @@ export default {
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>

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

@ -73,8 +73,8 @@ export default {
top: 50%;
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-7);
background-color: rgba(255, 255, 255, 0.99);
box-shadow: 0 2px 12px 0 var(--color-primary-light-5);
border-radius: 4px;
transition: height 0.2s linear;
height: 480px;