From ad5db5409428034a3b81dca5a9f3762cdeddb97d Mon Sep 17 00:00:00 2001 From: jlzhou <12020042@qq.com> Date: Fri, 25 Apr 2025 16:41:42 +0800 Subject: [PATCH] update . --- admin-ui/.env | 10 +- admin-ui/src/assets/styles/index.scss | 349 ++++++++++++++---- admin-ui/src/assets/styles/sidebar.scss | 53 ++- admin-ui/src/layout/components/Navbar.vue | 2 +- .../src/layout/components/Sidebar/Logo.vue | 4 +- .../src/layout/components/Sidebar/index.vue | 9 +- .../src/layout/components/TagsView/index.vue | 5 +- admin-ui/src/layout/index.vue | 2 +- admin-ui/src/settings.js | 2 +- .../ruoyi/demo/controller/DynConfigApi.java | 1 + 10 files changed, 337 insertions(+), 100 deletions(-) diff --git a/admin-ui/.env b/admin-ui/.env index b007229..00b11f1 100644 --- a/admin-ui/.env +++ b/admin-ui/.env @@ -2,5 +2,11 @@ VITE_APP_TITLE = 管理中心 VITE_APP_COPY = Copyright © 2023 xxx.xxx.cn All Rights Reserved. - -VITE_APP_COLOR = "#fd4772" \ No newline at end of file +# 默认主题色,用户可用后台自行调节 +VITE_APP_COLOR = "#20a0f1" +# 默认主题 light | dark +VITE_APP_THEME = "dark" +# 管理端暗黑主题色 +VITE_APP_ADMIN_DARK = "#222" +# 管理端明亮主题色 +VITE_APP_ADMIN_LIGHT = "#EfEfEf" diff --git a/admin-ui/src/assets/styles/index.scss b/admin-ui/src/assets/styles/index.scss index 1917f5d..0db6ff1 100644 --- a/admin-ui/src/assets/styles/index.scss +++ b/admin-ui/src/assets/styles/index.scss @@ -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: ""; + 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: ""; + 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; + } + } +} \ No newline at end of file diff --git a/admin-ui/src/assets/styles/sidebar.scss b/admin-ui/src/assets/styles/sidebar.scss index cb32181..dbeaef1 100644 --- a/admin-ui/src/assets/styles/sidebar.scss +++ b/admin-ui/src/assets/styles/sidebar.scss @@ -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 { diff --git a/admin-ui/src/layout/components/Navbar.vue b/admin-ui/src/layout/components/Navbar.vue index a360c40..3d89587 100644 --- a/admin-ui/src/layout/components/Navbar.vue +++ b/admin-ui/src/layout/components/Navbar.vue @@ -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 { diff --git a/admin-ui/src/layout/components/Sidebar/Logo.vue b/admin-ui/src/layout/components/Sidebar/Logo.vue index f83544b..45847cf 100644 --- a/admin-ui/src/layout/components/Sidebar/Logo.vue +++ b/admin-ui/src/layout/components/Sidebar/Logo.vue @@ -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; diff --git a/admin-ui/src/layout/components/Sidebar/index.vue b/admin-ui/src/layout/components/Sidebar/index.vue index bf984a1..bbac36f 100644 --- a/admin-ui/src/layout/components/Sidebar/index.vue +++ b/admin-ui/src/layout/components/Sidebar/index.vue @@ -1,5 +1,6 @@