mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
'admin-21.01.02:新增切换动画、布局页等'
This commit is contained in:
lyt-Top
parent
e59abb4509
commit
9b4c4a0cae
@ -6,14 +6,14 @@
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-plus": "^v1.0.1-beta.17",
|
||||
"element-plus": "^v1.0.1-beta.19",
|
||||
"sortablejs": "^1.10.2",
|
||||
"vue": "^3.0.4",
|
||||
"vue-router": "^4.0.1"
|
||||
"vue": "^3.0.5",
|
||||
"vue-router": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/sortablejs": "^1.10.6",
|
||||
"@vue/compiler-sfc": "^3.0.4",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"sass": "^1.30.0",
|
||||
"sass-loader": "^10.1.0",
|
||||
"typescript": "^4.1.2",
|
||||
|
||||
@ -5,7 +5,6 @@ import router from './router'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/lib/theme-chalk/index.css'
|
||||
import '/@/theme/index.scss'
|
||||
import { locale } from 'element-plus'
|
||||
|
||||
createApp(App).use(router).use(ElementPlus, { locale }).mount('#app')
|
||||
import lang from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
createApp(App).use(router).use(ElementPlus, { locale: lang }).mount('#app')
|
||||
@ -4,6 +4,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
html,
|
||||
@ -53,6 +54,22 @@ body,
|
||||
}
|
||||
}
|
||||
|
||||
/* element plus 全局样式
|
||||
------------------------------- */
|
||||
.layout-breadcrumb-seting {
|
||||
.el-drawer__header {
|
||||
padding: 0 15px !important;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 1px solid rgb(230, 230, 230);
|
||||
}
|
||||
.el-divider {
|
||||
background-color: rgb(230, 230, 230);
|
||||
}
|
||||
}
|
||||
|
||||
/* 宽高 100%
|
||||
------------------------------- */
|
||||
.w100 {
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
layoutBreadcrumbSeting
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "layoutBreadcrumbSeting",
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="layout-breadcrumb-seting">
|
||||
<el-drawer title="布局配置" v-model="isDrawer" direction="rtl" destroy-on-close size="240px">
|
||||
<el-scrollbar class="layout-breadcrumb-seting-bar">
|
||||
<!-- 全局主题 -->
|
||||
<el-divider content-position="left">全局主题</el-divider>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="primary" show-alpha size="small"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">success</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="success" show-alpha size="small"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">info</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="info" show-alpha size="small"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="warning" show-alpha size="small"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="danger" show-alpha size="small"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="topBar" show-alpha size="small"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-color-picker v-model="menuBar" show-alpha size="small"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 界面设置 -->
|
||||
<el-divider content-position="left">界面设置</el-divider>
|
||||
<div class="layout-breadcrumb-seting-bar-flex">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">菜单水平折叠</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">
|
||||
<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">
|
||||
<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">固定 Header</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">
|
||||
<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">
|
||||
<el-input-number v-model="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="menuWidth" controls-position="right" :min="1" :max="999" size="mini"
|
||||
style="width:90px;">
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 界面显示 -->
|
||||
<el-divider content-position="left">界面显示</el-divider>
|
||||
<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="isCollapse"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">面包屑 Breadcrumb</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">开启 Tagsview</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">
|
||||
<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">
|
||||
<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">
|
||||
<el-switch v-model="isCollapse"></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-input v-model="menuWidth" size="mini" style="width:90px;"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 布局切换 -->
|
||||
<el-divider content-position="left">布局切换</el-divider>
|
||||
<div class="drawer-layout-content-flex">
|
||||
<!-- fashion 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<section class="el-container drawer-layout-active el-circular">
|
||||
<aside class="el-aside" style="width: 20px"></aside>
|
||||
<section class="el-container is-vertical">
|
||||
<header class="el-header" style="height: 10px"></header>
|
||||
<main class="el-main"></main>
|
||||
</section>
|
||||
</section>
|
||||
<div class="layout-tips-warp-active layout-tips-warp">
|
||||
<div class="layout-tips-box">
|
||||
<p class="layout-tips-txt">时尚</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- classic 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<section class="el-container is-vertical el-circular">
|
||||
<header class="el-header" style="height: 10px"></header>
|
||||
<section class="el-container">
|
||||
<aside class="el-aside" style="width: 20px"></aside>
|
||||
<section class="el-container is-vertical">
|
||||
<main class="el-main"></main>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<div class="layout-tips-warp">
|
||||
<div class="layout-tips-box">
|
||||
<p class="layout-tips-txt">经典</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- elegant 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<section class="el-container is-vertical el-circular">
|
||||
<header class="el-header" style="height: 10px"></header>
|
||||
<section class="el-container">
|
||||
<section class="el-container is-vertical">
|
||||
<main class="el-main"></main>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<div class="layout-tips-warp">
|
||||
<div class="layout-tips-box">
|
||||
<p class="layout-tips-txt">典雅</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- scitech 布局 -->
|
||||
<div class="drawer-layout-content-item">
|
||||
<section class="el-container el-circular">
|
||||
<aside class="el-aside-dark" style="width: 10px"></aside>
|
||||
<aside class="el-aside" style="width: 20px"></aside>
|
||||
<section class="el-container is-vertical">
|
||||
<header class="el-header" style="height: 10px"></header>
|
||||
<main class="el-main"></main>
|
||||
</section>
|
||||
</section>
|
||||
<div class="layout-tips-warp">
|
||||
<div class="layout-tips-box">
|
||||
<p class="layout-tips-txt">科技</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copy-config">
|
||||
<el-alert title="点击下方按钮，复制布局配置。" type="warning" :closable="false">
|
||||
</el-alert>
|
||||
<el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary">一键复制配置
|
||||
</el-button>
|
||||
<el-button size="small" class="copy-config-btn copy-config-last-btn" icon="el-icon-refresh" type="warning">
|
||||
一键恢复默认</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from "vue";
|
||||
export default {
|
||||
name: "layoutBreadcrumbSeting",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isDrawer: false,
|
||||
primary: "#409eff",
|
||||
success: "#67c23a",
|
||||
info: "#909399",
|
||||
warning: "#e6a23c",
|
||||
danger: "#f56c6c",
|
||||
topBar: "#ffffff",
|
||||
menuBar: "#29384d",
|
||||
isCollapse: false,
|
||||
menuWidth: 240,
|
||||
});
|
||||
const openDrawer = () => {
|
||||
state.isDrawer = true;
|
||||
};
|
||||
const closeDrawer = () => {
|
||||
state.isDrawer = false;
|
||||
};
|
||||
return {
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-breadcrumb-seting-bar {
|
||||
height: calc(100vh - 50px);
|
||||
padding: 0 15px;
|
||||
overflow-x: hidden !important;
|
||||
.layout-breadcrumb-seting-bar-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-label {
|
||||
flex: 1;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.drawer-layout-content-flex {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.drawer-layout-content-item {
|
||||
width: 50%;
|
||||
height: 70px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
.el-container {
|
||||
height: 100%;
|
||||
.el-aside-dark {
|
||||
background-color: #b3c0d1;
|
||||
}
|
||||
.el-aside {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
.el-header {
|
||||
background-color: #b3c0d1;
|
||||
}
|
||||
.el-main {
|
||||
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;
|
||||
}
|
||||
.layout-tips-warp,
|
||||
.layout-tips-warp-active {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid var(--color-primary-light-6);
|
||||
border-radius: 100%;
|
||||
padding: 4px;
|
||||
.layout-tips-box {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 9;
|
||||
border: 1px solid var(--color-primary-light-6);
|
||||
border-radius: 100%;
|
||||
.layout-tips-txt {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
letter-spacing: 2px;
|
||||
white-space: nowrap;
|
||||
color: var(--color-primary-light-6);
|
||||
text-align: center;
|
||||
transform: rotate(30deg);
|
||||
left: -1px;
|
||||
background-color: #e9eef3;
|
||||
width: 32px;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-tips-warp-active {
|
||||
@extend .border-color-09f;
|
||||
.layout-tips-box {
|
||||
@extend .border-color-09f;
|
||||
.layout-tips-txt {
|
||||
color: var(--color-primary) !important;
|
||||
background-color: #e9eef3 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.copy-config {
|
||||
margin: 10px 0;
|
||||
.copy-config-btn {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.copy-config-last-btn {
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<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="布局配置"></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>
|
||||
<el-dropdown :show-timeout="70" :hide-timeout="50">
|
||||
@ -22,11 +22,25 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<Setings ref="setingsRef" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
|
||||
export default {
|
||||
name: "layoutBreadcrumbUser",
|
||||
components: { Setings },
|
||||
setup() {
|
||||
const setingsRef = ref();
|
||||
const onLayoutSetingClick = () => {
|
||||
setingsRef.value.openDrawer();
|
||||
};
|
||||
return {
|
||||
setingsRef,
|
||||
onLayoutSetingClick,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div aria-hidden="true" class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu" role="tooltip"
|
||||
data-popper-placement="bottom" :style="`top: ${dropdown.y + 5}px;left: ${dropdown.x}px;`" v-show="isShow">
|
||||
data-popper-placement="bottom" :style="`top: ${dropdown.y + 5}px;left: ${dropdown.x}px;`" :key="Math.random()"
|
||||
v-show="isShow">
|
||||
<ul class="el-dropdown-menu">
|
||||
<li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" v-for="(v,k) in dropdownList" :key="k">
|
||||
<i :class="v.icon"></i>
|
||||
|
||||
@ -22,6 +22,9 @@ const viteConfig: UserConfig = {
|
||||
port: VITE_PORT,
|
||||
open: VITE_OPEN,
|
||||
base: process.env.NODE_ENV === "production" ? "./" : VITE_PUBLIC_PATH,
|
||||
optimizeDeps: {
|
||||
include: ['element-plus/lib/locale/lang/zh-cn']
|
||||
}
|
||||
}
|
||||
|
||||
export default viteConfig
|
||||
|
||||
Loading…
Reference in New Issue
Block a user