前端界面文件更新

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 端口 随着主应用端口飘逸 避免集群冲突

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",

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

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 {

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
+/*-------------Dialog-------------**/
+.el-overlay {
+  overflow: hidden;
+
+  .el-overlay-dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
     .el-dialog {
-  transform: none;
+      margin: 0 auto !important;
-  left: 0;
+
-  position: relative;
+      .el-dialog__body {
-  margin: 0 auto;
+        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
+.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;
 }
+
+.el-dropdown .el-dropdown-link {
+  color: var(--el-color-primary) !important;
+}

ruoyi-ui/src/assets/styles/element-variables.scss

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

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 {

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;

ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -53,22 +53,32 @@
   margin-left: 20px;
 }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+.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{
+.el-form .el-form-item__label {
-    word-break: break-word;
+  font-weight: 700;
 }
-
 .el-dialog:not(.is-fullscreen) {
   margin-top: 6vh !important;
 }
 
-.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
+.el-dialog.scrollbar .el-dialog__body {
   overflow: auto;
   overflow-x: hidden;
   max-height: 70vh;
@@ -76,17 +86,18 @@
 }
 
 .el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
     th {
       word-break: break-word;
-			background-color: #f8f8f9;
+      background-color: $table-header-bg !important;
-			color: #515a6e;
+      color: $table-header-text-color;
-			height: 40px;
+      height: 40px !important;
       font-size: 13px;
     }
   }
   .el-table__body-wrapper {
-		.el-button [class*="el-icon-"] + span {
+    .el-button [class*='el-icon-'] + span {
       margin-left: 1px;
     }
   }
@@ -98,12 +109,12 @@
   color: #6379bb;
   border-bottom: 1px solid #ddd;
   margin: 8px 10px 25px 10px;
-	padding-bottom:5px
+  padding-bottom: 5px;
 }
 
 /** 表格布局 **/
 .pagination-container {
-	position: relative;
+  // position: relative;
   height: 25px;
   margin-bottom: 10px;
   margin-top: 15px;
@@ -114,13 +125,14 @@
 .tree-border {
   margin-top: 5px;
   border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
+  background: #ffffff none;
   border-radius: 4px;
+  width: 100%;
 }
 
 .pagination-container .el-pagination {
-	right: 0;
+  //right: 0;
-	position: absolute;
+  //position: absolute;
 }
 
 @media (max-width: 768px) {
@@ -132,19 +144,21 @@
   }
 }
 
-.el-table .fixed-width .el-button--mini {
+.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 {
+.el-table .el-dropdown-link {
   cursor: pointer;
-	margin-left: 5px;
+  color: #409eff;
+  margin-left: 10px;
 }
 
-.el-table .el-dropdown, .el-icon-arrow-down {
+.el-table .el-dropdown,
+.el-icon-arrow-down {
   font-size: 12px;
 }
 
@@ -178,12 +192,12 @@
 }
 
 .el-card__header {
-	padding: 14px 15px 7px;
+  padding: 14px 15px 7px !important;
   min-height: 40px;
 }
 
 .el-card__body {
-	padding: 15px 20px 20px 20px;
+  padding: 15px 20px 20px 20px !important;
 }
 
 .card-box {
@@ -195,22 +209,22 @@
 /* button color */
 .el-button--cyan.is-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:hover {
-  background: #48D1CC;
+  background: #48d1cc;
-  border-color: #48D1CC;
+  border-color: #48d1cc;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .el-button--cyan {
-  background-color: #20B2AA;
+  background-color: #20b2aa;
-  border-color: #20B2AA;
+  border-color: #20b2aa;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 /* text color */
@@ -253,10 +267,9 @@
 }
 
 .avatar-upload-preview {
-	position: relative;
+  position: absolute;
   top: 50%;
-	left: 50%;
+  transform: translate(50%, -50%);
-	transform: translate(-50%, -50%);
   width: 200px;
   height: 200px;
   border-radius: 50%;
@@ -266,12 +279,12 @@
 
 /* 拖拽列样式 */
 .sortable-ghost {
-	opacity: .8;
+  opacity: 0.8;
   color: #fff !important;
   background: #42b983 !important;
 }
 
+/* 表格右侧工具栏样式 */
 .top-right-btn {
-	position: relative;
+  margin-left: auto;
-	float: right;
 }

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -1,8 +1,7 @@
 #app {
-
   .main-container {
     height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
     margin-left: $base-sidebar-width;
     position: relative;
   }
@@ -12,20 +11,20 @@
   }
 
   .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);
+    -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
     .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,
+    .theme-dark .sub-menu-title-noDropdown,
-    .el-submenu__title {
+    .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,
+    & .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;
-
       &: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,22 +154,21 @@
       }
     }
 
-    .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-sub-menu {
-        &>.el-submenu__title {
+        & > .el-sub-menu__title {
           & > span {
             height: 0;
             width: 0;
@@ -152,12 +176,19 @@
             visibility: hidden;
             display: inline-block;
           }
+          & > i {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
         }
       }
     }
   }
 
-  .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;
@@ -197,31 +227,4 @@
       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;
-    }
-  }
 }

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 {

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;
+$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-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-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;
 
 $base-sidebar-width: 200px;

ruoyi-ui/src/assets/styles/variables.scss

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

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

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;

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

ruoyi-ui/src/layout/components/Settings/index.vue

@@ -79,11 +79,8 @@
 </template>
 
 <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 {useStore} from "vuex";
 
 const { proxy } = getCurrentInstance();
 const store = useStore();

ruoyi-ui/src/plugins/svgicon.js

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