'admin-21.01.09:布局配置新增其它设置及逻辑'
This commit is contained in:
parent
e7e65b750c
commit
f54128568d
@ -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",
|
||||
|
@ -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"]);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
@ -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'
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
@ -30,7 +30,9 @@ export interface RootStateTypes {
|
||||
isGrayscale: boolean,
|
||||
isInvert: boolean,
|
||||
isWartermark: boolean,
|
||||
wartermarkText: string
|
||||
wartermarkText: string,
|
||||
tagsStyle: string,
|
||||
animation: string
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 面包屑过渡动画
|
||||
------------------------------- */
|
||||
|
@ -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 文字链接
|
||||
------------------------------- */
|
||||
|
@ -27,5 +27,7 @@ export default {
|
||||
isGrayscale: false,
|
||||
isInvert: false,
|
||||
isWartermark: false,
|
||||
wartermarkText: 'small@小柒'
|
||||
wartermarkText: 'small@小柒',
|
||||
tagsStyle: 'tagsStyleOne',
|
||||
animation: 'slideRight'
|
||||
}
|
@ -1,3 +1,3 @@
|
||||
<template>
|
||||
docs
|
||||
<p v-for="v in 100" :key="v">docs</p>
|
||||
</template>
|
@ -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),
|
||||
};
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user