From f2a3dfa070e1bdef959c52b74b1658f3ccf32937 Mon Sep 17 00:00:00 2001 From: dataprince Date: Sun, 22 Oct 2023 10:00:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E7=95=8C=E9=9D=A2=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/resources/application-dev.yml | 4 +- ruoyi-ui/package.json | 1 + ruoyi-ui/src/animate.js | 48 ++++ ruoyi-ui/src/assets/styles/btn.scss | 16 +- ruoyi-ui/src/assets/styles/element-ui.scss | 52 +++- .../src/assets/styles/element-variables.scss | 31 -- ruoyi-ui/src/assets/styles/index.scss | 34 ++- ruoyi-ui/src/assets/styles/mixin.scss | 14 +- ruoyi-ui/src/assets/styles/ruoyi.scss | 265 +++++++++--------- ruoyi-ui/src/assets/styles/sidebar.scss | 117 ++++---- ruoyi-ui/src/assets/styles/transition.scss | 6 +- .../src/assets/styles/variables.module.scss | 90 ++++-- ruoyi-ui/src/assets/styles/variables.scss | 54 ---- ruoyi-ui/src/lang/en_US.js | 27 ++ ruoyi-ui/src/lang/index.js | 35 +++ ruoyi-ui/src/lang/zh_CN.js | 26 ++ .../src/layout/components/Settings/index.vue | 5 +- ruoyi-ui/src/plugins/svgicon.js | 9 + 18 files changed, 490 insertions(+), 344 deletions(-) create mode 100644 ruoyi-ui/src/animate.js delete mode 100644 ruoyi-ui/src/assets/styles/element-variables.scss delete mode 100644 ruoyi-ui/src/assets/styles/variables.scss create mode 100644 ruoyi-ui/src/lang/en_US.js create mode 100644 ruoyi-ui/src/lang/index.js create mode 100644 ruoyi-ui/src/lang/zh_CN.js create mode 100644 ruoyi-ui/src/plugins/svgicon.js diff --git a/ruoyi-admin/src/main/resources/application-dev.yml b/ruoyi-admin/src/main/resources/application-dev.yml index 7300b5b..b55bd50 100644 --- a/ruoyi-admin/src/main/resources/application-dev.yml +++ b/ruoyi-admin/src/main/resources/application-dev.yml @@ -117,7 +117,7 @@ management: --- # 监控中心客户端配置 spring.boot.admin.client: # 增加客户端开关 - enabled: false + enabled: true url: http://localhost:9090/admin instance: service-host-type: IP @@ -128,7 +128,7 @@ spring.boot.admin.client: powerjob: worker: # 如何开启调度中心请查看文档教程 - enabled: false + enabled: true # 需要先在 powerjob 登录页执行应用注册后才能使用 app-name: ruoyi-worker # 28080 端口 随着主应用端口飘逸 避免集群冲突 diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json index 7273670..f380540 100644 --- a/ruoyi-ui/package.json +++ b/ruoyi-ui/package.json @@ -38,6 +38,7 @@ "@element-plus/icons-vue": "2.1.0", "@vueup/vue-quill": "1.1.0", "@vueuse/core": "9.5.0", + "animate.css": "4.1.1", "@zeronejs/utils": "^1.4.0", "axios": "^1.3.4", "echarts": "5.4.0", diff --git a/ruoyi-ui/src/animate.js b/ruoyi-ui/src/animate.js new file mode 100644 index 0000000..70c60b9 --- /dev/null +++ b/ruoyi-ui/src/animate.js @@ -0,0 +1,48 @@ +// 前缀 +const animatePrefix = 'animate__animated '; +// 开启随机动画 随机动画值 +const animateList = [ + animatePrefix + 'animate__pulse', + animatePrefix + 'animate__rubberBand', + animatePrefix + 'animate__bounceIn', + animatePrefix + 'animate__bounceInLeft', + animatePrefix + 'animate__fadeIn', + animatePrefix + 'animate__fadeInLeft', + animatePrefix + 'animate__fadeInDown', + animatePrefix + 'animate__fadeInUp', + animatePrefix + 'animate__flipInX', + animatePrefix + 'animate__lightSpeedInLeft', + animatePrefix + 'animate__rotateInDownLeft', + animatePrefix + 'animate__rollIn', + animatePrefix + 'animate__rotateInDownLeft', + animatePrefix + 'animate__zoomIn', + animatePrefix + 'animate__zoomInDown', + animatePrefix + 'animate__slideInLeft', + animatePrefix + 'animate__lightSpeedIn' +]; +// 关闭随机动画后的默认效果 +const defaultAnimate = animatePrefix + 'animate__fadeIn'; +// 搜索隐藏显示动画 +const searchAnimate = { + enter: '', + leave: '' +}; + +// 菜单搜索动画 +const menuSearchAnimate = { + enter: animatePrefix + 'animate__fadeIn', + leave: animatePrefix + 'animate__fadeOut' +}; +// logo动画 +const logoAnimate = { + enter: animatePrefix + 'animate__fadeIn', + leave: animatePrefix + 'animate__fadeOut' +}; + +export default { + animateList, + defaultAnimate, + searchAnimate, + menuSearchAnimate, + logoAnimate +}; diff --git a/ruoyi-ui/src/assets/styles/btn.scss b/ruoyi-ui/src/assets/styles/btn.scss index e6ba1a8..a1ccd01 100644 --- a/ruoyi-ui/src/assets/styles/btn.scss +++ b/ruoyi-ui/src/assets/styles/btn.scss @@ -1,4 +1,4 @@ -@import './variables.scss'; +@import './variables.module.scss'; @mixin colorBtn($color) { background: $color; @@ -14,31 +14,31 @@ } .blue-btn { - @include colorBtn($blue) + @include colorBtn($blue); } .light-blue-btn { - @include colorBtn($light-blue) + @include colorBtn($light-blue); } .red-btn { - @include colorBtn($red) + @include colorBtn($red); } .pink-btn { - @include colorBtn($pink) + @include colorBtn($pink); } .green-btn { - @include colorBtn($green) + @include colorBtn($green); } .tiffany-btn { - @include colorBtn($tiffany) + @include colorBtn($tiffany); } .yellow-btn { - @include colorBtn($yellow) + @include colorBtn($yellow); } .pan-btn { diff --git a/ruoyi-ui/src/assets/styles/element-ui.scss b/ruoyi-ui/src/assets/styles/element-ui.scss index 363092a..43c093c 100644 --- a/ruoyi-ui/src/assets/styles/element-ui.scss +++ b/ruoyi-ui/src/assets/styles/element-ui.scss @@ -1,12 +1,17 @@ // cover some element-ui styles +.el-divider--horizontal { + margin-bottom: 10px; + margin-top: 10px; +} + .el-breadcrumb__inner, .el-breadcrumb__inner a { font-weight: 400 !important; } .el-upload { - input[type="file"] { + input[type='file'] { display: none !important; } } @@ -46,12 +51,31 @@ } } -// to fixed https://github.com/ElemeFE/element/issues/2461 -.el-dialog { - transform: none; - left: 0; - position: relative; - margin: 0 auto; +/*-------------Dialog-------------**/ +.el-overlay { + overflow: hidden; + + .el-overlay-dialog { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + + .el-dialog { + margin: 0 auto !important; + + .el-dialog__body { + padding: 15px !important; + } + } + } +} + +.el-dialog__body { + max-height: calc(90vh - 111px) !important; + overflow-y: auto; + overflow-x: hidden; } // refine element ui upload @@ -69,7 +93,7 @@ // dropdown .el-dropdown-menu { a { - display: block + display: block; } } @@ -83,10 +107,10 @@ box-sizing: content-box; } -.el-menu--collapse - > div - > .el-submenu - > .el-submenu__title - .el-submenu__icon-arrow { +.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow { display: none; -} \ No newline at end of file +} + +.el-dropdown .el-dropdown-link { + color: var(--el-color-primary) !important; +} diff --git a/ruoyi-ui/src/assets/styles/element-variables.scss b/ruoyi-ui/src/assets/styles/element-variables.scss deleted file mode 100644 index 1615ff2..0000000 --- a/ruoyi-ui/src/assets/styles/element-variables.scss +++ /dev/null @@ -1,31 +0,0 @@ -/** -* I think element-ui's default theme color is too light for long-term use. -* So I modified the default color and you can modify it to your liking. -**/ - -/* theme color */ -$--color-primary: #1890ff; -$--color-success: #13ce66; -$--color-warning: #ffba00; -$--color-danger: #ff4949; -// $--color-info: #1E1E1E; - -$--button-font-weight: 400; - -// $--color-text-regular: #1f2d3d; - -$--border-color-light: #dfe4ed; -$--border-color-lighter: #e6ebf5; - -$--table-border: 1px solid #dfe6ec; - -/* icon font path, required */ -$--font-path: '~element-ui/lib/theme-chalk/fonts'; - -@import "~element-ui/packages/theme-chalk/src/index"; - -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass -:export { - theme: $--color-primary; -} diff --git a/ruoyi-ui/src/assets/styles/index.scss b/ruoyi-ui/src/assets/styles/index.scss index 2f3b9ef..48865fb 100644 --- a/ruoyi-ui/src/assets/styles/index.scss +++ b/ruoyi-ui/src/assets/styles/index.scss @@ -1,12 +1,16 @@ -@import './variables.scss'; +@import './variables.module.scss'; @import './mixin.scss'; @import './transition.scss'; @import './element-ui.scss'; @import './sidebar.scss'; @import './btn.scss'; +@import './ruoyi.scss'; +@import 'animate.css'; +@import 'element-plus/dist/index.css'; body { height: 100%; + margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -22,6 +26,11 @@ html { box-sizing: border-box; } +html.dark .svg-icon, +html.dark svg { + fill: var(--el-text-color-regular); +} + #app { height: 100%; } @@ -90,7 +99,7 @@ div:focus { visibility: hidden; display: block; font-size: 0; - content: " "; + content: ' '; clear: both; height: 0; } @@ -104,7 +113,8 @@ aside { display: block; line-height: 32px; font-size: 16px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; color: #2c3e50; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -124,6 +134,22 @@ aside { padding: 20px; } +// search面板样式 +.panel, +.search { + margin-bottom: 0.75rem; + border-radius: 0.25rem; + border: 1px solid var(--el-border-color-light); + background-color: var(--el-bg-color-overlay); + padding: 0.75rem; + transition: all ease 0.3s; + + &:hover { + box-shadow: 0 2px 12px #0000001a; + transition: all ease 0.3s; + } +} + .components-container { margin: 30px 50px; position: relative; @@ -134,7 +160,7 @@ aside { } .text-center { - text-align: center + text-align: center; } .sub-navbar { diff --git a/ruoyi-ui/src/assets/styles/mixin.scss b/ruoyi-ui/src/assets/styles/mixin.scss index 06fa061..5250e71 100644 --- a/ruoyi-ui/src/assets/styles/mixin.scss +++ b/ruoyi-ui/src/assets/styles/mixin.scss @@ -1,6 +1,6 @@ @mixin clearfix { &:after { - content: ""; + content: ''; display: table; clear: both; } @@ -44,21 +44,15 @@ border-bottom: $color-border-style; border-left: $transparent-border-style; border-right: $transparent-border-style; - } - - @else if $direction==right { + } @else if $direction==right { border-left: $color-border-style; border-top: $transparent-border-style; border-bottom: $transparent-border-style; - } - - @else if $direction==down { + } @else if $direction==down { border-top: $color-border-style; border-left: $transparent-border-style; border-right: $transparent-border-style; - } - - @else if $direction==left { + } @else if $direction==left { border-right: $color-border-style; border-top: $transparent-border-style; border-bottom: $transparent-border-style; diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss index db8c29b..d2ecb24 100644 --- a/ruoyi-ui/src/assets/styles/ruoyi.scss +++ b/ruoyi-ui/src/assets/styles/ruoyi.scss @@ -1,129 +1,141 @@ - /** +/** * 通用css样式布局处理 * Copyright (c) 2019 ruoyi */ - /** 基础通用 **/ +/** 基础通用 **/ .pt5 { - padding-top: 5px; + padding-top: 5px; } .pr5 { - padding-right: 5px; + padding-right: 5px; } .pb5 { - padding-bottom: 5px; + padding-bottom: 5px; } .mt5 { - margin-top: 5px; + margin-top: 5px; } .mr5 { - margin-right: 5px; + margin-right: 5px; } .mb5 { - margin-bottom: 5px; + margin-bottom: 5px; } .mb8 { - margin-bottom: 8px; + margin-bottom: 8px; } .ml5 { - margin-left: 5px; + margin-left: 5px; } .mt10 { - margin-top: 10px; + margin-top: 10px; } .mr10 { - margin-right: 10px; + margin-right: 10px; } .mb10 { - margin-bottom: 10px; + margin-bottom: 10px; } .ml10 { - margin-left: 10px; + margin-left: 10px; } .mt20 { - margin-top: 20px; + margin-top: 20px; } .mr20 { - margin-right: 20px; + margin-right: 20px; } .mb20 { - margin-bottom: 20px; + margin-bottom: 20px; } .ml20 { - margin-left: 20px; + margin-left: 20px; } -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { - font-family: inherit; - font-weight: 500; - line-height: 1.1; - color: inherit; +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; } -.el-message-box__status + .el-message-box__message{ - word-break: break-word; +.el-form .el-form-item__label { + font-weight: 700; } - .el-dialog:not(.is-fullscreen) { - margin-top: 6vh !important; + margin-top: 6vh !important; } -.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { - overflow: auto; - overflow-x: hidden; - max-height: 70vh; - padding: 10px 20px 0; +.el-dialog.scrollbar .el-dialog__body { + overflow: auto; + overflow-x: hidden; + max-height: 70vh; + padding: 10px 20px 0; } .el-table { - .el-table__header-wrapper, .el-table__fixed-header-wrapper { - th { - word-break: break-word; - background-color: #f8f8f9; - color: #515a6e; - height: 40px; - font-size: 13px; - } - } - .el-table__body-wrapper { - .el-button [class*="el-icon-"] + span { - margin-left: 1px; - } - } + .el-table__header-wrapper, + .el-table__fixed-header-wrapper { + th { + word-break: break-word; + background-color: $table-header-bg !important; + color: $table-header-text-color; + height: 40px !important; + font-size: 13px; + } + } + .el-table__body-wrapper { + .el-button [class*='el-icon-'] + span { + margin-left: 1px; + } + } } /** 表单布局 **/ .form-header { - font-size:15px; - color:#6379bb; - border-bottom:1px solid #ddd; - margin:8px 10px 25px 10px; - padding-bottom:5px + font-size: 15px; + color: #6379bb; + border-bottom: 1px solid #ddd; + margin: 8px 10px 25px 10px; + padding-bottom: 5px; } /** 表格布局 **/ .pagination-container { - position: relative; - height: 25px; - margin-bottom: 10px; - margin-top: 15px; - padding: 10px 20px !important; + // position: relative; + height: 25px; + margin-bottom: 10px; + margin-top: 15px; + padding: 10px 20px !important; } /* tree border */ .tree-border { - margin-top: 5px; - border: 1px solid #e5e6e7; - background: #FFFFFF none; - border-radius:4px; + margin-top: 5px; + border: 1px solid #e5e6e7; + background: #ffffff none; + border-radius: 4px; + width: 100%; } .pagination-container .el-pagination { - right: 0; - position: absolute; + //right: 0; + //position: absolute; } -@media ( max-width : 768px) { +@media (max-width: 768px) { .pagination-container .el-pagination > .el-pagination__jump { display: none !important; } @@ -132,146 +144,147 @@ } } -.el-table .fixed-width .el-button--mini { - padding-left: 0; - padding-right: 0; - width: inherit; +.el-table .fixed-width .el-button--small { + padding-left: 0; + padding-right: 0; + width: inherit; } /** 表格更多操作下拉样式 */ -.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { - cursor: pointer; - margin-left: 5px; +.el-table .el-dropdown-link { + cursor: pointer; + color: #409eff; + margin-left: 10px; } -.el-table .el-dropdown, .el-icon-arrow-down { - font-size: 12px; +.el-table .el-dropdown, +.el-icon-arrow-down { + font-size: 12px; } .el-tree-node__content > .el-checkbox { - margin-right: 8px; + margin-right: 8px; } .list-group-striped > .list-group-item { - border-left: 0; - border-right: 0; - border-radius: 0; - padding-left: 0; - padding-right: 0; + border-left: 0; + border-right: 0; + border-radius: 0; + padding-left: 0; + padding-right: 0; } .list-group { - padding-left: 0px; - list-style: none; + padding-left: 0px; + list-style: none; } .list-group-item { - border-bottom: 1px solid #e7eaec; - border-top: 1px solid #e7eaec; - margin-bottom: -1px; - padding: 11px 0px; - font-size: 13px; + border-bottom: 1px solid #e7eaec; + border-top: 1px solid #e7eaec; + margin-bottom: -1px; + padding: 11px 0px; + font-size: 13px; } .pull-right { - float: right !important; + float: right !important; } .el-card__header { - padding: 14px 15px 7px; - min-height: 40px; + padding: 14px 15px 7px !important; + min-height: 40px; } .el-card__body { - padding: 15px 20px 20px 20px; + padding: 15px 20px 20px 20px !important; } .card-box { - padding-right: 15px; - padding-left: 15px; - margin-bottom: 10px; + padding-right: 15px; + padding-left: 15px; + margin-bottom: 10px; } /* button color */ .el-button--cyan.is-active, .el-button--cyan:active { - background: #20B2AA; - border-color: #20B2AA; - color: #FFFFFF; + background: #20b2aa; + border-color: #20b2aa; + color: #ffffff; } .el-button--cyan:focus, .el-button--cyan:hover { - background: #48D1CC; - border-color: #48D1CC; - color: #FFFFFF; + background: #48d1cc; + border-color: #48d1cc; + color: #ffffff; } .el-button--cyan { - background-color: #20B2AA; - border-color: #20B2AA; - color: #FFFFFF; + background-color: #20b2aa; + border-color: #20b2aa; + color: #ffffff; } /* text color */ .text-navy { - color: #1ab394; + color: #1ab394; } .text-primary { - color: inherit; + color: inherit; } .text-success { - color: #1c84c6; + color: #1c84c6; } .text-info { - color: #23c6c8; + color: #23c6c8; } .text-warning { - color: #f8ac59; + color: #f8ac59; } .text-danger { - color: #ed5565; + color: #ed5565; } .text-muted { - color: #888888; + color: #888888; } /* image */ .img-circle { - border-radius: 50%; + border-radius: 50%; } .img-lg { - width: 120px; - height: 120px; + width: 120px; + height: 120px; } .avatar-upload-preview { - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 200px; - height: 200px; - border-radius: 50%; - box-shadow: 0 0 4px #ccc; - overflow: hidden; + position: absolute; + top: 50%; + transform: translate(50%, -50%); + width: 200px; + height: 200px; + border-radius: 50%; + box-shadow: 0 0 4px #ccc; + overflow: hidden; } /* 拖拽列样式 */ -.sortable-ghost{ - opacity: .8; - color: #fff!important; - background: #42b983!important; +.sortable-ghost { + opacity: 0.8; + color: #fff !important; + background: #42b983 !important; } +/* 表格右侧工具栏样式 */ .top-right-btn { - position: relative; - float: right; + margin-left: auto; } diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss index abe5b63..d47a2bd 100644 --- a/ruoyi-ui/src/assets/styles/sidebar.scss +++ b/ruoyi-ui/src/assets/styles/sidebar.scss @@ -1,31 +1,30 @@ #app { - .main-container { height: 100%; - transition: margin-left .28s; + transition: margin-left 0.28s; margin-left: $base-sidebar-width; position: relative; } .sidebarHide { - margin-left: 0!important; + margin-left: 0 !important; } .sidebar-container { - -webkit-transition: width .28s; + -webkit-transition: width 0.28s; transition: width 0.28s; width: $base-sidebar-width !important; background-color: $base-menu-background; height: 100%; position: fixed; - font-size: 0px; + font-size: 0; top: 0; bottom: 0; left: 0; z-index: 1001; overflow: hidden; - -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); - box-shadow: 2px 0 6px rgba(0,21,41,.35); + -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); + box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); // reset element-ui css .horizontal-collapse-transition { @@ -37,7 +36,7 @@ } .el-scrollbar__bar.is-vertical { - right: 0px; + right: 0; } .el-scrollbar { @@ -70,41 +69,67 @@ width: 100% !important; } - .el-menu-item, .el-submenu__title { + .el-menu-item, + .menu-title { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } + .el-menu-item .el-menu-tooltip__trigger { + display: inline-block !important; + } + // menu hover - .submenu-title-noDropdown, - .el-submenu__title { + .theme-dark .sub-menu-title-noDropdown, + .theme-dark .el-sub-menu__title { &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: $base-sub-menu-title-hover !important; + } + } + .sub-menu-title-noDropdown, + .el-sub-menu__title { + &:hover { + background-color: rgba(0, 0, 0, 0.05) !important; } } - & .theme-dark .is-active > .el-submenu__title { + & .theme-dark .is-active > .el-sub-menu__title { color: $base-menu-color-active !important; } - & .nest-menu .el-submenu>.el-submenu__title, - & .el-submenu .el-menu-item { + & .nest-menu .el-sub-menu > .el-sub-menu__title, + & .el-sub-menu .el-menu-item { min-width: $base-sidebar-width !important; - &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(0, 0, 0, 0.1) !important; } } - & .theme-dark .nest-menu .el-submenu>.el-submenu__title, - & .theme-dark .el-submenu .el-menu-item { + + & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, + & .theme-dark .el-sub-menu .el-menu-item { background-color: $base-sub-menu-background !important; &:hover { background-color: $base-sub-menu-hover !important; } } + + & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, + & .theme-dark .el-menu-item { + &:hover { + // you can use $sub-menuHover + background-color: $base-menu-hover !important; + } + } + & .nest-menu .el-sub-menu > .el-sub-menu__title, + & .el-menu-item { + &:hover { + // you can use $sub-menuHover + background-color: rgba(0, 0, 0, 0.04) !important; + } + } } .hideSidebar { @@ -116,7 +141,7 @@ margin-left: 54px; } - .submenu-title-noDropdown { + .sub-menu-title-noDropdown { padding: 0 !important; position: relative; @@ -129,23 +154,29 @@ } } - .el-submenu { + .el-sub-menu { overflow: hidden; - &>.el-submenu__title { + & > .el-sub-menu__title { padding: 0 !important; .svg-icon { margin-left: 20px; } - } } .el-menu--collapse { - .el-submenu { - &>.el-submenu__title { - &>span { + .el-sub-menu { + & > .el-sub-menu__title { + & > span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + & > i { height: 0; width: 0; overflow: hidden; @@ -157,7 +188,7 @@ } } - .el-menu--collapse .el-menu .el-submenu { + .el-menu--collapse .el-menu .el-sub-menu { min-width: $base-sidebar-width !important; } @@ -168,7 +199,7 @@ } .sidebar-container { - transition: transform .28s; + transition: transform 0.28s; width: $base-sidebar-width !important; } @@ -182,7 +213,6 @@ } .withoutAnimation { - .main-container, .sidebar-container { transition: none; @@ -192,36 +222,9 @@ // when menu collapsed .el-menu--vertical { - &>.el-menu { + & > .el-menu { .svg-icon { margin-right: 16px; } } - - .nest-menu .el-submenu>.el-submenu__title, - .el-menu-item { - &:hover { - // you can use $subMenuHover - background-color: rgba(0, 0, 0, 0.06) !important; - } - } - - // the scroll bar appears when the subMenu is too long - >.el-menu--popup { - max-height: 100vh; - overflow-y: auto; - - &::-webkit-scrollbar-track-piece { - background: #d3dce6; - } - - &::-webkit-scrollbar { - width: 6px; - } - - &::-webkit-scrollbar-thumb { - background: #99a9bf; - border-radius: 20px; - } - } } diff --git a/ruoyi-ui/src/assets/styles/transition.scss b/ruoyi-ui/src/assets/styles/transition.scss index 073f8c6..468ad3c 100644 --- a/ruoyi-ui/src/assets/styles/transition.scss +++ b/ruoyi-ui/src/assets/styles/transition.scss @@ -15,7 +15,7 @@ .fade-transform--move, .fade-transform-leave-active, .fade-transform-enter-active { - transition: all .5s; + transition: all 0.5s; } .fade-transform-enter { @@ -31,7 +31,7 @@ /* breadcrumb transition */ .breadcrumb-enter-active, .breadcrumb-leave-active { - transition: all .5s; + transition: all 0.5s; } .breadcrumb-enter, @@ -41,7 +41,7 @@ } .breadcrumb-move { - transition: all .5s; + transition: all 0.5s; } .breadcrumb-leave-active { diff --git a/ruoyi-ui/src/assets/styles/variables.module.scss b/ruoyi-ui/src/assets/styles/variables.module.scss index 3dbfaa7..d07d3d4 100644 --- a/ruoyi-ui/src/assets/styles/variables.module.scss +++ b/ruoyi-ui/src/assets/styles/variables.module.scss @@ -1,45 +1,73 @@ +// 全局SCSS变量 +:root { + --menuBg: #304156; + --menuColor: #bfcbd9; + --menuActiveText: #f4f4f5; + --menuHover: #263445; + + --subMenuBg: #1f2d3d; + --subMenuActiveText: #f4f4f5; + --subMenuHover: #001528; + --subMenuTitleHover: #293444; + + --fixedHeaderBg: #ffffff; + --tableHeaderBg: #f8f8f9; + --tableHeaderTextColor: #515a6e; +} +html.dark { + --menuBg: #1d1e1f; + --menuColor: #bfcbd9; + --menuActiveText: #f4f4f5; + --menuHover: #171819; + + --subMenuBg: #1d1e1f; + --subMenuActiveText: #1d1e1f; + --subMenuHover: #171819; + --subMenuTitleHover: #171819; + + --fixedHeaderBg: #171819; + --tableHeaderBg: var(--el-bg-color); + --tableHeaderTextColor: var(--el-text-color); + + // 覆盖ele 高亮当前行的标准暗色 + .el-tree-node__content { + --el-color-primary-light-9: #262727; + } +} + // base color $blue: #324157; -$light-blue: #3A71A8; -$red: #C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow: #FEC171; -$panGreen: #30B08F; +$light-blue: #3a71a8; +$red: #c03639; +$pink: #e65d6e; +$green: #30b08f; +$tiffany: #4ab7bd; +$yellow: #fec171; +$panGreen: #30b08f; // 默认菜单主题风格 -$base-menu-color: #bfcbd9; -$base-menu-color-active: #f4f4f5; -$base-menu-background: #304156; +$base-menu-color: var(--menuColor); +$base-menu-hover: var(--menuHover); +$base-menu-color-active: var(--menuActiveText); +$base-menu-background: var(--menuBg); $base-logo-title-color: #ffffff; $base-menu-light-color: rgba(0, 0, 0, 0.7); $base-menu-light-background: #ffffff; $base-logo-light-title-color: #001529; -$base-sub-menu-background: #1f2d3d; -$base-sub-menu-hover: #001528; +$base-sub-menu-background: var(--subMenuBg); +$base-sub-menu-hover: var(--subMenuHover); +$base-sub-menu-title-hover: var(--subMenuTitleHover); +// 表单头背景色和标题颜色 +$fixed-header-bg: var(--fixedHeaderBg); +$table-header-bg: var(--tableHeaderBg); +$table-header-text-color: var(--tableHeaderTextColor); -// 自定义暗色菜单风格 -/** -$base-menu-color:hsla(0,0%,100%,.65); -$base-menu-color-active:#fff; -$base-menu-background:#001529; -$base-logo-title-color: #ffffff; - -$base-menu-light-color:rgba(0,0,0,.70); -$base-menu-light-background:#ffffff; -$base-logo-light-title-color: #001529; - -$base-sub-menu-background:#000c17; -$base-sub-menu-hover:#001528; -*/ - -$--color-primary: #409EFF; -$--color-success: #67C23A; -$--color-warning: #E6A23C; -$--color-danger: #F56C6C; +$--color-primary: #409eff; +$--color-success: #67c23a; +$--color-warning: #e6a23c; +$--color-danger: #f56c6c; $--color-info: #909399; $base-sidebar-width: 200px; diff --git a/ruoyi-ui/src/assets/styles/variables.scss b/ruoyi-ui/src/assets/styles/variables.scss deleted file mode 100644 index 34484d4..0000000 --- a/ruoyi-ui/src/assets/styles/variables.scss +++ /dev/null @@ -1,54 +0,0 @@ -// base color -$blue:#324157; -$light-blue:#3A71A8; -$red:#C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow:#FEC171; -$panGreen: #30B08F; - -// 默认菜单主题风格 -$base-menu-color:#bfcbd9; -$base-menu-color-active:#f4f4f5; -$base-menu-background:#304156; -$base-logo-title-color: #ffffff; - -$base-menu-light-color:rgba(0,0,0,.70); -$base-menu-light-background:#ffffff; -$base-logo-light-title-color: #001529; - -$base-sub-menu-background:#1f2d3d; -$base-sub-menu-hover:#001528; - -// 自定义暗色菜单风格 -/** -$base-menu-color:hsla(0,0%,100%,.65); -$base-menu-color-active:#fff; -$base-menu-background:#001529; -$base-logo-title-color: #ffffff; - -$base-menu-light-color:rgba(0,0,0,.70); -$base-menu-light-background:#ffffff; -$base-logo-light-title-color: #001529; - -$base-sub-menu-background:#000c17; -$base-sub-menu-hover:#001528; -*/ - -$base-sidebar-width: 200px; - -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass -:export { - menuColor: $base-menu-color; - menuLightColor: $base-menu-light-color; - menuColorActive: $base-menu-color-active; - menuBackground: $base-menu-background; - menuLightBackground: $base-menu-light-background; - subMenuBackground: $base-sub-menu-background; - subMenuHover: $base-sub-menu-hover; - sideBarWidth: $base-sidebar-width; - logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color -} diff --git a/ruoyi-ui/src/lang/en_US.js b/ruoyi-ui/src/lang/en_US.js new file mode 100644 index 0000000..59df4ba --- /dev/null +++ b/ruoyi-ui/src/lang/en_US.js @@ -0,0 +1,27 @@ +export default { + // 路由国际化 + route: { + dashboard: 'Dashboard', + document: 'Document' + }, + // 登录页面国际化 + login: { + username: 'Username', + password: 'Password', + login: 'Login', + code: 'Verification Code', + copyright: '' + }, + // 导航栏国际化 + navbar: { + full: 'Full Screen', + language: 'Language', + dashboard: 'Dashboard', + document: 'Document', + layoutSize: 'Layout Size', + selectTenant: 'Select Tenant', + layoutSetting: 'Layout Setting', + personalCenter: 'Personal Center', + logout: 'Logout' + } +}; diff --git a/ruoyi-ui/src/lang/index.js b/ruoyi-ui/src/lang/index.js new file mode 100644 index 0000000..dddb86b --- /dev/null +++ b/ruoyi-ui/src/lang/index.js @@ -0,0 +1,35 @@ +// 自定义国际化配置 +import { createI18n } from 'vue-i18n'; + +// 本地语言包 +import enUSLocale from './en_US'; +import zhCNLocale from './zh_CN'; + +const messages = { + zh_CN: { + ...zhCNLocale + }, + en_US: { + ...enUSLocale + } +}; + +/** + * 获取当前语言 + * @returns zh-cn|en ... + */ +export const getLanguage = () => { + const language = useStorage('language', 'zh_CN'); + if (language.value) { + return language.value; + } + return 'zh_CN'; +}; + +const i18n = createI18n({ + legacy: false, + locale: getLanguage(), + messages +}); + +export default i18n; diff --git a/ruoyi-ui/src/lang/zh_CN.js b/ruoyi-ui/src/lang/zh_CN.js new file mode 100644 index 0000000..d778f7d --- /dev/null +++ b/ruoyi-ui/src/lang/zh_CN.js @@ -0,0 +1,26 @@ +export default { + // 路由国际化 + route: { + dashboard: '首页', + document: '项目文档' + }, + // 登录页面国际化 + login: { + username: '用户名', + password: '密码', + login: '登 录', + code: '请输入验证码', + copyright: '' + }, + navbar: { + full: '全屏', + language: '语言', + dashboard: '首页', + document: '项目文档', + layoutSize: '布局大小', + selectTenant: '选择租户', + layoutSetting: '布局设置', + personalCenter: '个人中心', + logout: '退出登录' + } +}; diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue index 6a5515d..bfd65f7 100644 --- a/ruoyi-ui/src/layout/components/Settings/index.vue +++ b/ruoyi-ui/src/layout/components/Settings/index.vue @@ -79,11 +79,8 @@