master
管理员 8 months ago
parent 40e7e5aa96
commit ad5db54094

@ -2,5 +2,11 @@
VITE_APP_TITLE = 管理中心
VITE_APP_COPY = Copyright © 2023 xxx.xxx.cn All Rights Reserved.
VITE_APP_COLOR = "#fd4772"
# 默认主题色,用户可用后台自行调节
VITE_APP_COLOR = "#20a0f1"
# 默认主题 light | dark
VITE_APP_THEME = "dark"
# 管理端暗黑主题色
VITE_APP_ADMIN_DARK = "#222"
# 管理端明亮主题色
VITE_APP_ADMIN_LIGHT = "#EfEfEf"

@ -208,87 +208,288 @@ fieldset {
border: var(--el-border-color) 1px solid;
}
@layer {
.w-abs {
position: absolute;
inset: 0;
}
.w-lines {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.w-flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
}
.w-flex-column {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.w-lines {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.w-flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
position: relative;
}
.w-flex-column {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.w-loading {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 1em;
border: .2em solid currentColor;
border-top-color: #0000;
animation: w-am-loading 1s infinite;
}
@keyframes w-am-loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 印章效果 */
.w-seal {
position: absolute;
display: flex;
line-height: 1;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 6em;
height: 6em;
border-radius: 10em;
border: .25em solid currentColor;
background-color: #FFF;
z-index: 1;
transform: rotate(-25deg);
padding: 0;
&>div {
border: .13em solid currentColor;
padding: .3em 0;
width: 4.3em;
text-align: center;
font-weight: bold;
}
&::before {
content: "";
position: absolute;
width: 5em;
height: 5em;
border: .15em solid currentColor;
border-radius: 10em;
.w-radio,
.w-checkbox {
--btn-color-inner: var(--btn-color,currentColor);
--opacity: .6;
transition: all .3s;
cursor: pointer;
&::before {
content: '';
font-size: var(--btn-size,inherit);
width: 1em;
height: 1em;
opacity: var(--opacity);
box-sizing: border-box;
border: solid 1px var(--btn-color-inner);
margin-right: .2em;
border-radius: .2em;
background-color: var(--btn-bg-color-inner,#0000);
background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzA5NzA3MjQ5OTg3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQyODUiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTg0My42OTM5NTkgMjkzLjYwOTA2MSA0MjUuMjU1ODY5IDcxMi4wNTYzNjIgMTg2LjE0NTAyNiA0NzIuOTQ3NTY2IDY2LjU3OTg4MyA1OTIuNTA0NTIyIDQyNS4yNTU4NjkgOTUxLjE2NTE1OCA5NjMuMjYwMTI2IDQxMy4xNzQyMDRaIiBwLWlkPSI0Mjg2IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+");
background-size: .65em .65em;
background-repeat: no-repeat;
background-position: var(--background-position-inner,center -1em);
transition: all .3s;
overflow: hidden;
}
&.selected {
--btn-color-inner: var(--selected-btn-color, var(--w-main));
--opacity: 1;
--btn-bg-color-inner: var(--selected-btn-color, var(--w-main));
--background-position-inner: center .1em;
color: var(--selected-text-color, currentColor);
}
}
}
&::after {
content: "";
position: absolute;
width: 3.5em;
height: 3.5em;
border: .15em solid currentColor;
border-color: currentColor #0000 currentColor #0000;
border-radius: 10em;
.w-radio::before {
border-radius: 1em;
}
}
}
.w-loading {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 1em;
border: solid .2em currentColor;
mask-image: conic-gradient(from 0deg, #0000 0%, #000 75%, #000 83%, #0000 85%);
animation: w-am-loading 1s ease infinite;
}
.w-inner-loading {
pointer-events: none;
user-select: none;
position: relative;
display: flex;
justify-content: center;
align-items: center;
&::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--bg-color, #0003);
backdrop-filter: blur(.1em);
}
&::after {
position: absolute;
content: '';
font-size: var(--size, 1em);
display: block;
width: 1em;
height: 1em;
border-radius: 1em;
border: solid .2em var(--loading-color, currentColor);
mask-image: conic-gradient(from 0deg, #0000 0%, #000 75%, #000 83%, #0000 85%);
animation: w-am-loading 1s ease infinite;
}
}
@keyframes w-am-loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@property --border-gradient-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
.w-border-light,
.w-border-light-1,
.w-border-light-2,
.w-border-light-3 {
position: relative;
border: none !important;
animation-play-state: inherit;
--border: .1em solid #0000;
--border-light-color: #FFF9;
--time: 5s;
&::before {
content: '';
pointer-events: none;
position: absolute;
inset: 0;
border: var(--border);
border-radius: inherit;
}
&::after {
content: '';
pointer-events: none;
position: absolute;
inset: 0;
border: var(--border);
border-color: var(--border-light-color);
border-radius: inherit;
mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000, #000 10%, #0000 11%, #0000 50%, #000 60%, #0000 61%);
animation: am-frame var(--time) infinite linear;
animation-play-state: inherit;
}
}
.w-border-light-1::after {
mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000, #000 10%, #0000 11%);
}
.w-border-light-3::after {
mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000,#0000 23%, #000 33%, #0000 34%,#0000 56%,#000 66%,#0000 67%, #0000 89%, #000 99%, #0000 100%);
}
@keyframes am-frame {
0% {
--border-gradient-angle: 0turn;
}
100% {
--border-gradient-angle: 1turn;
}
}
.w-part-hide {
--top: 1em;
--bottom: 1em;
mask-image: linear-gradient(to bottom,#0000 0%,#000 var(--top),#000 calc(100% - var(--bottom)), #0000 100%);
}
.w-radio,
.w-checkbox {
--btn-color-inner: var(--btn-color, currentColor);
--opacity: .6;
transition: all .3s;
cursor: pointer;
display: flex;
align-items: center;
&::before {
content: '';
font-size: var(--btn-size, inherit);
width: 1.5em;
height: 1.5em;
opacity: var(--opacity);
box-sizing: border-box;
border: solid .1em var(--btn-color-inner);
margin-right: .2em;
border-radius: .2em;
background-color: var(--btn-bg-color-inner, #0000);
background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzA5NzA3MjQ5OTg3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQyODUiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTg0My42OTM5NTkgMjkzLjYwOTA2MSA0MjUuMjU1ODY5IDcxMi4wNTYzNjIgMTg2LjE0NTAyNiA0NzIuOTQ3NTY2IDY2LjU3OTg4MyA1OTIuNTA0NTIyIDQyNS4yNTU4NjkgOTUxLjE2NTE1OCA5NjMuMjYwMTI2IDQxMy4xNzQyMDRaIiBwLWlkPSI0Mjg2IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+");
background-size: 1em 1em;
background-repeat: no-repeat;
background-position: var(--background-position-inner, center -1em);
transition: all .3s;
overflow: hidden;
transform: scale(.8);
}
&.selected {
--btn-color-inner: var(--selected-btn-color, var(--el-color-primary));
--opacity: 1;
--btn-bg-color-inner: var(--selected-btn-color, var(--el-color-primary));
--background-position-inner: center 0.1em;
color: var(--selected-text-color, currentColor);
}
}
.w-radio::before {
border-radius: 1em;
}
@property --data-num {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.w-breathing {
--filter: brightness(110%);
--transform: scale(1.1);
--time: 1.3s;
--data-num: 0;
--data-num-to: 1;
animation: w-am-breathing var(--time) infinite linear;
animation-play-state: inherit;
}
@keyframes w-am-breathing {
0% {
filter: none;
transform: none;
}
45% {
filter: var(--filter);
transform: var(--transform);
--data-num: var(--data-num-to);
}
90% {
filter: none;
transform: none;
}
}
}

@ -26,19 +26,7 @@
overflow: hidden;
text-shadow: .1em .1em 0 #000;
li {
position: relative;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
background-color: #0003;
width: 100%;
height: 0;
}
}
&.theme-light {
text-shadow: .1em .1em 0 #FFF;
@ -149,14 +137,51 @@
}
}
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title:not(.is-active),
& .theme-dark .el-sub-menu .el-menu-item:not(.is-active) {
background-color: $base-sub-menu-background !important;
&:hover {
background-color: $base-sub-menu-hover !important;
}
}
.router-link-active.router-link-exact-active {
position: relative;
background-color: var(--el-menu-active-color);
&::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(to bottom, #0000 50%, #0003);
}
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: solid .5rem #0000;
border-right-color: #f7f7f7;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.el-menu-item.is-active {
position: relative;
color: var(--my-menu-active-color, #FFF);
background-color: none !important;
&:hover {
background-color: none !important;
}
}
}
}
.hideSidebar {

@ -110,7 +110,7 @@ function setLayout() {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
background: #0000;
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {

@ -44,8 +44,8 @@ const sideTheme = computed(() => settingsStore.sideTheme);
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
height: 4.5rem;
line-height: 4.5rem;
background: #2b2f3a;
text-align: center;
overflow: hidden;

@ -1,5 +1,6 @@
<template>
<div style="box-shadow: 0 0 .5rem #0001;" :class="[showLogo?'has-logo':'no-logo',sideTheme]" :style="{ backgroundColor: sideTheme === 'theme-dark' ? 'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))' : 'var(--admin-menu-bg-light,hsl(206, 97%, 96%))' }">
<div style="box-shadow: 0 0 .5rem #0001;" :class="[showLogo?'has-logo':'no-logo',sideTheme]"
:style="{ backgroundColor: sideTheme === 'theme-dark' ? `var(--admin-menu-bg-dark,${adminDark})` : `var(--admin-menu-bg-light,${adminlight})` }">
<svg style="display: none;">
<defs>
<filter id="WEffectNoiseBgFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
@ -16,7 +17,7 @@
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="sideTheme === 'theme-dark' && isCollapse?'var(--admin-menu-bg-dark,hsl(206, 97%, 12%))':'#0000'"
:background-color="sideTheme === 'theme-dark' && isCollapse?`var(--admin-menu-bg-dark,${adminDark})`:'#0000'"
:text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="theme"
@ -53,6 +54,10 @@ const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !appStore.sidebar.opened);
const adminDark = import.meta.env.VITE_APP_ADMIN_DARK;
const adminlight = import.meta.env.VITE_APP_ADMIN_LIGHT;
const activeMenu = computed(() => {
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set

@ -245,7 +245,7 @@ function handleScroll() {
.tags-view-container {
height: 34px;
width: 100%;
background: #fff;
background: #0000;
border-bottom: 1px solid #d8dce5;
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
.tags-view-wrapper {
@ -276,9 +276,8 @@ function handleScroll() {
height: 39px;
padding-top: 3px;
font-size: 13px;
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: "";
background: #fff;

@ -3,7 +3,7 @@
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<div :class="{ 'fixed-header': fixedHeader }" style="background-image: linear-gradient(to top, #EEE, #FFF 70%);">
<navbar @setLayout="setLayout" />
<tags-view v-if="needTagsView" />
</div>

@ -6,7 +6,7 @@ export default {
/**
* 侧边栏主题 深色主题theme-dark浅色主题theme-light
*/
sideTheme: 'theme-dark',
sideTheme: 'theme-'+import.meta.env.VITE_APP_THEME,
/**
* 是否系统布局配置
*/

@ -6,6 +6,7 @@ import cn.hutool.core.bean.BeanUtil;
import cn.hutool.core.bean.copier.CopyOptions;
import com.ruoyi.common.annotation.Dev;
import com.ruoyi.common.utils.DynConfigUtils;
import com.ruoyi.common.utils.MongoUtil;
import com.ruoyi.demo.dynconfig.TestDynConfig;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

Loading…
Cancel
Save