common/ruoyi-flex
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端界面文件更新

Browse Source
This commit is contained in:
dataprince 2023-10-22 10:00:40 +08:00
parent 3663f0ea78
commit f2a3dfa070
18 changed files with 490 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ruoyi-admin/src/main/resources/application-dev.yml
View File

@ -117,7 +117,7 @@ management:
--- # 监控中心客户端配置 --- # 监控中心客户端配置
spring.boot.admin.client: spring.boot.admin.client:
# 增加客户端开关 # 增加客户端开关
enabled: false enabled: true
url: http://localhost:9090/admin url: http://localhost:9090/admin
instance: instance:
service-host-type: IP service-host-type: IP
@ -128,7 +128,7 @@ spring.boot.admin.client:
powerjob: powerjob:
worker: worker:
# 如何开启调度中心请查看文档教程 # 如何开启调度中心请查看文档教程
enabled: false enabled: true
# 需要先在 powerjob 登录页执行应用注册后才能使用 # 需要先在 powerjob 登录页执行应用注册后才能使用
app-name: ruoyi-worker app-name: ruoyi-worker
# 28080 端口 随着主应用端口飘逸 避免集群冲突 # 28080 端口 随着主应用端口飘逸 避免集群冲突

1
ruoyi-ui/package.json
View File

@ -38,6 +38,7 @@
"@element-plus/icons-vue": "2.1.0", "@element-plus/icons-vue": "2.1.0",
"@vueup/vue-quill": "1.1.0", "@vueup/vue-quill": "1.1.0",
"@vueuse/core": "9.5.0", "@vueuse/core": "9.5.0",
"animate.css": "4.1.1",
"@zeronejs/utils": "^1.4.0", "@zeronejs/utils": "^1.4.0",
"axios": "^1.3.4", "axios": "^1.3.4",
"echarts": "5.4.0", "echarts": "5.4.0",

48
ruoyi-ui/src/animate.js Normal file
View File

@ -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
};

16
ruoyi-ui/src/assets/styles/btn.scss
View File

@ -1,4 +1,4 @@
@import './variables.scss'; @import './variables.module.scss';
@mixin colorBtn($color) { @mixin colorBtn($color) {
background: $color; background: $color;
@ -14,31 +14,31 @@
} }
.blue-btn { .blue-btn {
@include colorBtn($blue) @include colorBtn($blue);
} }
.light-blue-btn { .light-blue-btn {
@include colorBtn($light-blue) @include colorBtn($light-blue);
} }
.red-btn { .red-btn {
@include colorBtn($red) @include colorBtn($red);
} }
.pink-btn { .pink-btn {
@include colorBtn($pink) @include colorBtn($pink);
} }
.green-btn { .green-btn {
@include colorBtn($green) @include colorBtn($green);
} }
.tiffany-btn { .tiffany-btn {
@include colorBtn($tiffany) @include colorBtn($tiffany);
} }
.yellow-btn { .yellow-btn {
@include colorBtn($yellow) @include colorBtn($yellow);
} }
.pan-btn { .pan-btn {

52
ruoyi-ui/src/assets/styles/element-ui.scss
View File

@ -1,12 +1,17 @@
// cover some element-ui styles // cover some element-ui styles
.el-divider--horizontal {
margin-bottom: 10px;
margin-top: 10px;
}
.el-breadcrumb__inner, .el-breadcrumb__inner,
.el-breadcrumb__inner a { .el-breadcrumb__inner a {
font-weight: 400 !important; font-weight: 400 !important;
} }
.el-upload { .el-upload {
input[type="file"] { input[type='file'] {
display: none !important; display: none !important;
} }
} }
@ -46,12 +51,31 @@
} }
} }
// to fixed https://github.com/ElemeFE/element/issues/2461 /*-------------Dialog-------------**/
.el-dialog { .el-overlay {
transform: none; overflow: hidden;
left: 0;
position: relative; .el-overlay-dialog {
margin: 0 auto; 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 // refine element ui upload
@ -69,7 +93,7 @@
// dropdown // dropdown
.el-dropdown-menu { .el-dropdown-menu {
a { a {
display: block display: block;
} }
} }
@ -83,10 +107,10 @@
box-sizing: content-box; box-sizing: content-box;
} }
.el-menu--collapse .el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
> div
> .el-submenu
> .el-submenu__title
.el-submenu__icon-arrow {
display: none; display: none;
} }
.el-dropdown .el-dropdown-link {
color: var(--el-color-primary) !important;
}

31
ruoyi-ui/src/assets/styles/element-variables.scss
View File

@ -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;
}

34
ruoyi-ui/src/assets/styles/index.scss
View File

@ -1,12 +1,16 @@
@import './variables.scss'; @import './variables.module.scss';
@import './mixin.scss'; @import './mixin.scss';
@import './transition.scss'; @import './transition.scss';
@import './element-ui.scss'; @import './element-ui.scss';
@import './sidebar.scss'; @import './sidebar.scss';
@import './btn.scss'; @import './btn.scss';
@import './ruoyi.scss';
@import 'animate.css';
@import 'element-plus/dist/index.css';
body { body {
height: 100%; height: 100%;
margin: 0;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -22,6 +26,11 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
html.dark .svg-icon,
html.dark svg {
fill: var(--el-text-color-regular);
}
#app { #app {
height: 100%; height: 100%;
} }
@ -90,7 +99,7 @@ div:focus {
visibility: hidden; visibility: hidden;
display: block; display: block;
font-size: 0; font-size: 0;
content: " "; content: ' ';
clear: both; clear: both;
height: 0; height: 0;
} }
@ -104,7 +113,8 @@ aside {
display: block; display: block;
line-height: 32px; line-height: 32px;
font-size: 16px; 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; color: #2c3e50;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -124,6 +134,22 @@ aside {
padding: 20px; 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 { .components-container {
margin: 30px 50px; margin: 30px 50px;
position: relative; position: relative;
@ -134,7 +160,7 @@ aside {
} }
.text-center { .text-center {
text-align: center text-align: center;
} }
.sub-navbar { .sub-navbar {

14
ruoyi-ui/src/assets/styles/mixin.scss
View File

@ -1,6 +1,6 @@
@mixin clearfix { @mixin clearfix {
&:after { &:after {
content: ""; content: '';
display: table; display: table;
clear: both; clear: both;
} }
@ -44,21 +44,15 @@
border-bottom: $color-border-style; border-bottom: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} } @else if $direction==right {
@else if $direction==right {
border-left: $color-border-style; border-left: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;
border-bottom: $transparent-border-style; border-bottom: $transparent-border-style;
} } @else if $direction==down {
@else if $direction==down {
border-top: $color-border-style; border-top: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} } @else if $direction==left {
@else if $direction==left {
border-right: $color-border-style; border-right: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;
border-bottom: $transparent-border-style; border-bottom: $transparent-border-style;

265
ruoyi-ui/src/assets/styles/ruoyi.scss
View File

@ -1,129 +1,141 @@
/** /**
* 通用css样式布局处理 * 通用css样式布局处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
.pr5 { .pr5 {
padding-right: 5px; padding-right: 5px;
} }
.pb5 { .pb5 {
padding-bottom: 5px; padding-bottom: 5px;
} }
.mt5 { .mt5 {
margin-top: 5px; margin-top: 5px;
} }
.mr5 { .mr5 {
margin-right: 5px; margin-right: 5px;
} }
.mb5 { .mb5 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mb8 { .mb8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.ml5 { .ml5 {
margin-left: 5px; margin-left: 5px;
} }
.mt10 { .mt10 {
margin-top: 10px; margin-top: 10px;
} }
.mr10 { .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.mb10 { .mb10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ml10 { .ml10 {
margin-left: 10px; margin-left: 10px;
} }
.mt20 { .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;
} }
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.ml20 { .ml20 {
margin-left: 20px; margin-left: 20px;
} }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { .h1,
font-family: inherit; .h2,
font-weight: 500; .h3,
line-height: 1.1; .h4,
color: inherit; .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{ .el-form .el-form-item__label {
word-break: break-word; font-weight: 700;
} }
.el-dialog:not(.is-fullscreen) { .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { .el-dialog.scrollbar .el-dialog__body {
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
max-height: 70vh; max-height: 70vh;
padding: 10px 20px 0; padding: 10px 20px 0;
} }
.el-table { .el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper,
th { .el-table__fixed-header-wrapper {
word-break: break-word; th {
background-color: #f8f8f9; word-break: break-word;
color: #515a6e; background-color: $table-header-bg !important;
height: 40px; color: $table-header-text-color;
font-size: 13px; height: 40px !important;
} font-size: 13px;
} }
.el-table__body-wrapper { }
.el-button [class*="el-icon-"] + span { .el-table__body-wrapper {
margin-left: 1px; .el-button [class*='el-icon-'] + span {
} margin-left: 1px;
} }
}
} }
/** 表单布局 **/ /** 表单布局 **/
.form-header { .form-header {
font-size:15px; font-size: 15px;
color:#6379bb; color: #6379bb;
border-bottom:1px solid #ddd; border-bottom: 1px solid #ddd;
margin:8px 10px 25px 10px; margin: 8px 10px 25px 10px;
padding-bottom:5px padding-bottom: 5px;
} }
/** 表格布局 **/ /** 表格布局 **/
.pagination-container { .pagination-container {
position: relative; // position: relative;
height: 25px; height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 15px; margin-top: 15px;
padding: 10px 20px !important; padding: 10px 20px !important;
} }
/* tree border */ /* tree border */
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
background: #FFFFFF none; background: #ffffff none;
border-radius:4px; border-radius: 4px;
width: 100%;
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
right: 0; //right: 0;
position: absolute; //position: absolute;
} }
@media ( max-width : 768px) { @media (max-width: 768px) {
.pagination-container .el-pagination > .el-pagination__jump { .pagination-container .el-pagination > .el-pagination__jump {
display: none !important; display: none !important;
} }
@ -132,146 +144,147 @@
} }
} }
.el-table .fixed-width .el-button--mini { .el-table .fixed-width .el-button--small {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
width: inherit; width: inherit;
} }
/** 表格更多操作下拉样式 */ /** 表格更多操作下拉样式 */
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { .el-table .el-dropdown-link {
cursor: pointer; cursor: pointer;
margin-left: 5px; color: #409eff;
margin-left: 10px;
} }
.el-table .el-dropdown, .el-icon-arrow-down { .el-table .el-dropdown,
font-size: 12px; .el-icon-arrow-down {
font-size: 12px;
} }
.el-tree-node__content > .el-checkbox { .el-tree-node__content > .el-checkbox {
margin-right: 8px; margin-right: 8px;
} }
.list-group-striped > .list-group-item { .list-group-striped > .list-group-item {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.list-group { .list-group {
padding-left: 0px; padding-left: 0px;
list-style: none; list-style: none;
} }
.list-group-item { .list-group-item {
border-bottom: 1px solid #e7eaec; border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec; border-top: 1px solid #e7eaec;
margin-bottom: -1px; margin-bottom: -1px;
padding: 11px 0px; padding: 11px 0px;
font-size: 13px; font-size: 13px;
} }
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
.el-card__header { .el-card__header {
padding: 14px 15px 7px; padding: 14px 15px 7px !important;
min-height: 40px; min-height: 40px;
} }
.el-card__body { .el-card__body {
padding: 15px 20px 20px 20px; padding: 15px 20px 20px 20px !important;
} }
.card-box { .card-box {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* button color */ /* button color */
.el-button--cyan.is-active, .el-button--cyan.is-active,
.el-button--cyan:active { .el-button--cyan:active {
background: #20B2AA; background: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan:focus, .el-button--cyan:focus,
.el-button--cyan:hover { .el-button--cyan:hover {
background: #48D1CC; background: #48d1cc;
border-color: #48D1CC; border-color: #48d1cc;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan { .el-button--cyan {
background-color: #20B2AA; background-color: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
/* text color */ /* text color */
.text-navy { .text-navy {
color: #1ab394; color: #1ab394;
} }
.text-primary { .text-primary {
color: inherit; color: inherit;
} }
.text-success { .text-success {
color: #1c84c6; color: #1c84c6;
} }
.text-info { .text-info {
color: #23c6c8; color: #23c6c8;
} }
.text-warning { .text-warning {
color: #f8ac59; color: #f8ac59;
} }
.text-danger { .text-danger {
color: #ed5565; color: #ed5565;
} }
.text-muted { .text-muted {
color: #888888; color: #888888;
} }
/* image */ /* image */
.img-circle { .img-circle {
border-radius: 50%; border-radius: 50%;
} }
.img-lg { .img-lg {
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
.avatar-upload-preview { .avatar-upload-preview {
position: relative; position: absolute;
top: 50%; top: 50%;
left: 50%; transform: translate(50%, -50%);
transform: translate(-50%, -50%); width: 200px;
width: 200px; height: 200px;
height: 200px; border-radius: 50%;
border-radius: 50%; box-shadow: 0 0 4px #ccc;
box-shadow: 0 0 4px #ccc; overflow: hidden;
overflow: hidden;
} }
/* 拖拽列样式 */ /* 拖拽列样式 */
.sortable-ghost{ .sortable-ghost {
opacity: .8; opacity: 0.8;
color: #fff!important; color: #fff !important;
background: #42b983!important; background: #42b983 !important;
} }
/* 表格右侧工具栏样式 */
.top-right-btn { .top-right-btn {
position: relative; margin-left: auto;
float: right;
} }

117
ruoyi-ui/src/assets/styles/sidebar.scss
View File

@ -1,31 +1,30 @@
#app { #app {
.main-container { .main-container {
height: 100%; height: 100%;
transition: margin-left .28s; transition: margin-left 0.28s;
margin-left: $base-sidebar-width; margin-left: $base-sidebar-width;
position: relative; position: relative;
} }
.sidebarHide { .sidebarHide {
margin-left: 0!important; margin-left: 0 !important;
} }
.sidebar-container { .sidebar-container {
-webkit-transition: width .28s; -webkit-transition: width 0.28s;
transition: width 0.28s; transition: width 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
background-color: $base-menu-background; background-color: $base-menu-background;
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-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,.35); box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
@ -37,7 +36,7 @@
} }
.el-scrollbar__bar.is-vertical { .el-scrollbar__bar.is-vertical {
right: 0px; right: 0;
} }
.el-scrollbar { .el-scrollbar {
@ -70,41 +69,67 @@
width: 100% !important; width: 100% !important;
} }
.el-menu-item, .el-submenu__title { .el-menu-item,
.menu-title {
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
.el-menu-item .el-menu-tooltip__trigger {
display: inline-block !important;
}
// menu hover // menu hover
.submenu-title-noDropdown, .theme-dark .sub-menu-title-noDropdown,
.el-submenu__title { .theme-dark .el-sub-menu__title {
&:hover { &: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; color: $base-menu-color-active !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-submenu .el-menu-item { & .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
&:hover { &: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; background-color: $base-sub-menu-background !important;
&:hover { &:hover {
background-color: $base-sub-menu-hover !important; 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 { .hideSidebar {
@ -116,7 +141,7 @@
margin-left: 54px; margin-left: 54px;
} }
.submenu-title-noDropdown { .sub-menu-title-noDropdown {
padding: 0 !important; padding: 0 !important;
position: relative; position: relative;
@ -129,23 +154,29 @@
} }
} }
.el-submenu { .el-sub-menu {
overflow: hidden; overflow: hidden;
&>.el-submenu__title { & > .el-sub-menu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin-left: 20px;
} }
} }
} }
.el-menu--collapse { .el-menu--collapse {
.el-submenu { .el-sub-menu {
&>.el-submenu__title { & > .el-sub-menu__title {
&>span { & > span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
& > i {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; 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; min-width: $base-sidebar-width !important;
} }
@ -168,7 +199,7 @@
} }
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform 0.28s;
width: $base-sidebar-width !important; width: $base-sidebar-width !important;
} }
@ -182,7 +213,6 @@
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
@ -192,36 +222,9 @@
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
&>.el-menu { & > .el-menu {
.svg-icon { .svg-icon {
margin-right: 16px; 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;
}
}
} }

6
ruoyi-ui/src/assets/styles/transition.scss
View File

@ -15,7 +15,7 @@
.fade-transform--move, .fade-transform--move,
.fade-transform-leave-active, .fade-transform-leave-active,
.fade-transform-enter-active { .fade-transform-enter-active {
transition: all .5s; transition: all 0.5s;
} }
.fade-transform-enter { .fade-transform-enter {
@ -31,7 +31,7 @@
/* breadcrumb transition */ /* breadcrumb transition */
.breadcrumb-enter-active, .breadcrumb-enter-active,
.breadcrumb-leave-active { .breadcrumb-leave-active {
transition: all .5s; transition: all 0.5s;
} }
.breadcrumb-enter, .breadcrumb-enter,
@ -41,7 +41,7 @@
} }
.breadcrumb-move { .breadcrumb-move {
transition: all .5s; transition: all 0.5s;
} }
.breadcrumb-leave-active { .breadcrumb-leave-active {

90
ruoyi-ui/src/assets/styles/variables.module.scss
View File

@ -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 // base color
$blue: #324157; $blue: #324157;
$light-blue: #3A71A8; $light-blue: #3a71a8;
$red: #C03639; $red: #c03639;
$pink: #E65D6E; $pink: #e65d6e;
$green: #30B08F; $green: #30b08f;
$tiffany: #4AB7BD; $tiffany: #4ab7bd;
$yellow: #FEC171; $yellow: #fec171;
$panGreen: #30B08F; $panGreen: #30b08f;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color: #bfcbd9; $base-menu-color: var(--menuColor);
$base-menu-color-active: #f4f4f5; $base-menu-hover: var(--menuHover);
$base-menu-background: #304156; $base-menu-color-active: var(--menuActiveText);
$base-menu-background: var(--menuBg);
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color: rgba(0, 0, 0, 0.7); $base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff; $base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background: #1f2d3d; $base-sub-menu-background: var(--subMenuBg);
$base-sub-menu-hover: #001528; $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);
// 自定义暗色菜单风格 $--color-primary: #409eff;
/** $--color-success: #67c23a;
$base-menu-color:hsla(0,0%,100%,.65); $--color-warning: #e6a23c;
$base-menu-color-active:#fff; $--color-danger: #f56c6c;
$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-info: #909399; $--color-info: #909399;
$base-sidebar-width: 200px; $base-sidebar-width: 200px;

54
ruoyi-ui/src/assets/styles/variables.scss
View File

@ -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
}

27
ruoyi-ui/src/lang/en_US.js Normal file
View File

@ -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'
}
};

35
ruoyi-ui/src/lang/index.js Normal file
View File

@ -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;

26
ruoyi-ui/src/lang/zh_CN.js Normal file
View File

@ -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: '退出登录'
}
};

5
ruoyi-ui/src/layout/components/Settings/index.vue
View File

@ -79,11 +79,8 @@
</template> </template>
<script setup> <script setup>
import variables from '@/assets/styles/variables.module.scss'
import originElementPlus from 'element-plus/theme-chalk/index.css'
import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'
import { useDynamicTitle } from '@/utils/dynamicTitle' import { useDynamicTitle } from '@/utils/dynamicTitle'
import {useStore} from "vuex";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const store = useStore(); const store = useStore();

9
ruoyi-ui/src/plugins/svgicon.js Normal file
View File

@ -0,0 +1,9 @@
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
export default {
install: (app) => {
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
}
};