diff --git a/ruoyi-fastapi-frontend/src/assets/icons/svg/moon.svg b/ruoyi-fastapi-frontend/src/assets/icons/svg/moon.svg
new file mode 100755
index 0000000..ec72d77
--- /dev/null
+++ b/ruoyi-fastapi-frontend/src/assets/icons/svg/moon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ruoyi-fastapi-frontend/src/assets/icons/svg/sunny.svg b/ruoyi-fastapi-frontend/src/assets/icons/svg/sunny.svg
new file mode 100755
index 0000000..cc628bf
--- /dev/null
+++ b/ruoyi-fastapi-frontend/src/assets/icons/svg/sunny.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ruoyi-fastapi-frontend/src/assets/styles/ruoyi.scss b/ruoyi-fastapi-frontend/src/assets/styles/ruoyi.scss
old mode 100644
new mode 100755
index 68cbf3c..4996ae5
--- a/ruoyi-fastapi-frontend/src/assets/styles/ruoyi.scss
+++ b/ruoyi-fastapi-frontend/src/assets/styles/ruoyi.scss
@@ -1,286 +1,301 @@
- /**
- * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
- */
-
- /** 基础通用 **/
-.pt5 {
- padding-top: 5px;
-}
-.pr5 {
- padding-right: 5px;
-}
-.pb5 {
- padding-bottom: 5px;
-}
-.mt5 {
- margin-top: 5px;
-}
-.mr5 {
- margin-right: 5px;
-}
-.mb5 {
- margin-bottom: 5px;
-}
-.mb8 {
- margin-bottom: 8px;
-}
-.ml5 {
- margin-left: 5px;
-}
-.mt10 {
- margin-top: 10px;
-}
-.mr10 {
- margin-right: 10px;
-}
-.mb10 {
- margin-bottom: 10px;
-}
-.ml10 {
- margin-left: 10px;
-}
-.mt20 {
- margin-top: 20px;
-}
-.mr20 {
- margin-right: 20px;
-}
-.mb20 {
- margin-bottom: 20px;
-}
-.ml20 {
- 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;
-}
-
-.el-form .el-form-item__label {
- font-weight: 700;
-}
-.el-dialog:not(.is-fullscreen) {
- margin-top: 6vh !important;
-}
-
-.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 !important;
- color: #515a6e;
- 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
-}
-
-/** 表格布局 **/
-.pagination-container {
- position: relative;
- height: 32px;
- margin-bottom: 10px;
- margin-top: 15px;
- padding: 10px 20px !important;
-}
-
-.el-dialog .pagination-container {
- position: static !important;
-}
-
-/* tree border */
-.tree-border {
- margin-top: 5px;
- border: 1px solid #e5e6e7;
- background: #FFFFFF none;
- border-radius:4px;
- width: 100%;
-}
-
-.pagination-container .el-pagination {
- right: 0;
- position: absolute;
-}
-
-@media ( max-width : 768px) {
- .pagination-container .el-pagination > .el-pagination__jump {
- display: none !important;
- }
- .pagination-container .el-pagination > .el-pagination__sizes {
- display: none !important;
- }
-}
-
-.el-table .fixed-width .el-button--small {
- padding-left: 0;
- padding-right: 0;
- width: inherit;
-}
-
-/** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link {
- cursor: pointer;
- color: #409EFF;
- margin-left: 10px;
-}
-
-.el-table .el-dropdown, .el-icon-arrow-down {
- font-size: 12px;
-}
-
-.el-tree-node__content > .el-checkbox {
- margin-right: 8px;
-}
-
-.list-group-striped > .list-group-item {
- border-left: 0;
- border-right: 0;
- border-radius: 0;
- padding-left: 0;
- padding-right: 0;
-}
-
-.list-group {
- 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;
-}
-
-.pull-right {
- float: right !important;
-}
-
-.el-card__header {
- padding: 14px 15px 7px !important;
- min-height: 40px;
-}
-
-.el-card__body {
- padding: 15px 20px 20px 20px !important;
-}
-
-.card-box {
- 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;
-}
-
-.el-button--cyan:focus,
-.el-button--cyan:hover {
- background: #48D1CC;
- border-color: #48D1CC;
- color: #FFFFFF;
-}
-
-.el-button--cyan {
- background-color: #20B2AA;
- border-color: #20B2AA;
- color: #FFFFFF;
-}
-
-/* text color */
-.text-navy {
- color: #1ab394;
-}
-
-.text-primary {
- color: inherit;
-}
-
-.text-success {
- color: #1c84c6;
-}
-
-.text-info {
- color: #23c6c8;
-}
-
-.text-warning {
- color: #f8ac59;
-}
-
-.text-danger {
- color: #ed5565;
-}
-
-.text-muted {
- color: #888888;
-}
-
-/* image */
-.img-circle {
- border-radius: 50%;
-}
-
-.img-lg {
- width: 120px;
- height: 120px;
-}
-
-.avatar-upload-preview {
- 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;
-}
-
-/* 表格右侧工具栏样式 */
-.top-right-btn {
- margin-left: auto;
-}
-
-/* 分割面板样式 */
-.splitpanes.default-theme .splitpanes__pane {
- background-color: #fff!important;
-}
+/**
+ * 通用css样式布局处理
+ * Copyright (c) 2019 ruoyi
+ */
+
+ /** 基础通用 **/
+.pt5 {
+ padding-top: 5px;
+}
+.pr5 {
+ padding-right: 5px;
+}
+.pb5 {
+ padding-bottom: 5px;
+}
+.mt5 {
+ margin-top: 5px;
+}
+.mr5 {
+ margin-right: 5px;
+}
+.mb5 {
+ margin-bottom: 5px;
+}
+.mb8 {
+ margin-bottom: 8px;
+}
+.ml5 {
+ margin-left: 5px;
+}
+.mt10 {
+ margin-top: 10px;
+}
+.mr10 {
+ margin-right: 10px;
+}
+.mb10 {
+ margin-bottom: 10px;
+}
+.ml10 {
+ margin-left: 10px;
+}
+.mt20 {
+ margin-top: 20px;
+}
+.mr20 {
+ margin-right: 20px;
+}
+.mb20 {
+ margin-bottom: 20px;
+}
+.ml20 {
+ 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;
+}
+
+.el-form .el-form-item__label {
+ font-weight: 700;
+}
+.el-dialog:not(.is-fullscreen) {
+ margin-top: 6vh !important;
+}
+
+.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 !important;
+ color: #515a6e;
+ 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
+}
+
+/** 表格布局 **/
+.pagination-container {
+ position: relative;
+ height: 25px;
+ margin-bottom: 10px;
+ margin-top: 15px;
+ padding: 10px 20px !important;
+ background-color: transparent !important;
+}
+
+/* 分页器定位 */
+.pagination-container .el-pagination {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+/* 弹窗中的分页器 */
+.el-dialog .pagination-container {
+ position: static !important;
+ margin: 10px 0 0 0;
+ padding: 0 !important;
+
+ .el-pagination {
+ position: static;
+ }
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+ .pagination-container {
+ .el-pagination {
+ > .el-pagination__jump {
+ display: none !important;
+ }
+ > .el-pagination__sizes {
+ display: none !important;
+ }
+ }
+ }
+}
+
+/* tree border */
+.tree-border {
+ margin-top: 5px;
+ border: 1px solid var(--el-border-color-light, #e5e6e7);
+ background: var(--el-bg-color, #FFFFFF) none;
+ border-radius:4px;
+ width: 100%;
+}
+
+.el-table .fixed-width .el-button--small {
+ padding-left: 0;
+ padding-right: 0;
+ width: inherit;
+}
+
+/** 表格更多操作下拉样式 */
+.el-table .el-dropdown-link {
+ cursor: pointer;
+ color: #409EFF;
+ margin-left: 10px;
+}
+
+.el-table .el-dropdown, .el-icon-arrow-down {
+ font-size: 12px;
+}
+
+.el-tree-node__content > .el-checkbox {
+ margin-right: 8px;
+}
+
+.list-group-striped > .list-group-item {
+ border-left: 0;
+ border-right: 0;
+ border-radius: 0;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.list-group {
+ 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;
+}
+
+.pull-right {
+ float: right !important;
+}
+
+.el-card__header {
+ padding: 14px 15px 7px !important;
+ min-height: 40px;
+}
+
+.el-card__body {
+ padding: 15px 20px 20px 20px !important;
+}
+
+.card-box {
+ 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;
+}
+
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+ background: #48D1CC;
+ border-color: #48D1CC;
+ color: #FFFFFF;
+}
+
+.el-button--cyan {
+ background-color: #20B2AA;
+ border-color: #20B2AA;
+ color: #FFFFFF;
+}
+
+/* text color */
+.text-navy {
+ color: #1ab394;
+}
+
+.text-primary {
+ color: inherit;
+}
+
+.text-success {
+ color: #1c84c6;
+}
+
+.text-info {
+ color: #23c6c8;
+}
+
+.text-warning {
+ color: #f8ac59;
+}
+
+.text-danger {
+ color: #ed5565;
+}
+
+.text-muted {
+ color: #888888;
+}
+
+/* image */
+.img-circle {
+ border-radius: 50%;
+}
+
+.img-lg {
+ width: 120px;
+ height: 120px;
+}
+
+.avatar-upload-preview {
+ 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;
+}
+
+/* 表格右侧工具栏样式 */
+.top-right-btn {
+ margin-left: auto;
+}
+
+/* 分割面板样式 */
+.splitpanes.default-theme .splitpanes__pane {
+ background-color: var(--splitpanes-default-bg) !important;
+}
diff --git a/ruoyi-fastapi-frontend/src/assets/styles/sidebar.scss b/ruoyi-fastapi-frontend/src/assets/styles/sidebar.scss
old mode 100644
new mode 100755
index 8b3c472..89820d1
--- a/ruoyi-fastapi-frontend/src/assets/styles/sidebar.scss
+++ b/ruoyi-fastapi-frontend/src/assets/styles/sidebar.scss
@@ -1,238 +1,236 @@
-#app {
-
- .main-container {
- height: 100%;
- transition: margin-left .28s;
- margin-left: $base-sidebar-width;
- position: relative;
- }
-
- .sidebarHide {
- margin-left: 0!important;
- }
-
- .sidebar-container {
- -webkit-transition: width .28s;
- transition: width 0.28s;
- width: $base-sidebar-width !important;
- background-color: $base-menu-background;
- height: 100%;
- position: fixed;
- font-size: 0px;
- 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);
-
- // reset element-ui css
- .horizontal-collapse-transition {
- transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
- }
-
- .scrollbar-wrapper {
- overflow-x: hidden !important;
- }
-
- .el-scrollbar__bar.is-vertical {
- right: 0px;
- }
-
- .el-scrollbar {
- height: 100%;
- }
-
- &.has-logo {
- .el-scrollbar {
- height: calc(100% - 50px);
- }
- }
-
- .is-horizontal {
- display: none;
- }
-
- a {
- display: inline-block;
- width: 100%;
- overflow: hidden;
- }
-
- .svg-icon {
- margin-right: 16px;
- }
-
- .el-menu {
- border: none;
- height: 100%;
- width: 100% !important;
- }
-
- .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
- .sub-menu-title-noDropdown,
- .el-sub-menu__title {
- &:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
- }
- }
-
- & .theme-dark .is-active > .el-sub-menu__title {
- color: $base-menu-color-active !important;
- }
-
- & .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;
- }
- }
-
- & .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;
- }
- }
- }
-
- .hideSidebar {
- .sidebar-container {
- width: 54px !important;
- }
-
- .main-container {
- margin-left: 54px;
- }
-
- .sub-menu-title-noDropdown {
- padding: 0 !important;
- position: relative;
-
- .el-tooltip {
- padding: 0 !important;
-
- .svg-icon {
- margin-left: 20px;
- }
- }
- }
-
- .el-sub-menu {
- overflow: hidden;
-
- &>.el-sub-menu__title {
- padding: 0 !important;
-
- .svg-icon {
- margin-left: 20px;
- }
-
- }
- }
-
- .el-menu--collapse {
- .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;
- visibility: hidden;
- display: inline-block;
- }
- }
- }
- }
- }
-
- .el-menu--collapse .el-menu .el-sub-menu {
- min-width: $base-sidebar-width !important;
- }
-
- // mobile responsive
- .mobile {
- .main-container {
- margin-left: 0px;
- }
-
- .sidebar-container {
- transition: transform .28s;
- width: $base-sidebar-width !important;
- }
-
- &.hideSidebar {
- .sidebar-container {
- pointer-events: none;
- transition-duration: 0.3s;
- transform: translate3d(-$base-sidebar-width, 0, 0);
- }
- }
- }
-
- .withoutAnimation {
-
- .main-container,
- .sidebar-container {
- transition: none;
- }
- }
-}
-
-// when menu collapsed
-.el-menu--vertical {
- &>.el-menu {
- .svg-icon {
- margin-right: 16px;
- }
- }
-
- .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.06) !important;
- }
- }
-
- // the scroll bar appears when the sub-menu 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;
- }
- }
-}
+#app {
+
+ .main-container {
+ min-height: 100%;
+ transition: margin-left .28s;
+ margin-left: $base-sidebar-width;
+ position: relative;
+ }
+
+ .sidebarHide {
+ margin-left: 0!important;
+ }
+
+ .sidebar-container {
+ transition: width 0.28s;
+ width: $base-sidebar-width !important;
+ height: 100%;
+ position: fixed;
+ font-size: 0px;
+ 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);
+
+ // reset element-ui css
+ .horizontal-collapse-transition {
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+ }
+
+ .scrollbar-wrapper {
+ overflow-x: hidden !important;
+ }
+
+ .el-scrollbar__bar.is-vertical {
+ right: 0px;
+ }
+
+ .el-scrollbar {
+ height: 100%;
+ }
+
+ &.has-logo {
+ .el-scrollbar {
+ height: calc(100% - 50px);
+ }
+ }
+
+ .is-horizontal {
+ display: none;
+ }
+
+ a {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ .svg-icon {
+ margin-right: 16px;
+ }
+
+ .el-menu {
+ border: none;
+ height: 100%;
+ width: 100% !important;
+ }
+
+ .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
+ .sub-menu-title-noDropdown,
+ .el-sub-menu__title {
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.06) !important;
+ }
+ }
+
+ & .theme-dark .is-active > .el-sub-menu__title {
+ color: $base-menu-color-active !important;
+ }
+
+ & .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;
+ }
+ }
+
+ & .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;
+
+ &:hover {
+ background-color: $base-sub-menu-hover !important;
+ }
+ }
+ }
+
+ .hideSidebar {
+ .sidebar-container {
+ width: 54px !important;
+ }
+
+ .main-container {
+ margin-left: 54px;
+ }
+
+ .sub-menu-title-noDropdown {
+ padding: 0 !important;
+ position: relative;
+
+ .el-tooltip {
+ padding: 0 !important;
+
+ .svg-icon {
+ margin-left: 20px;
+ }
+ }
+ }
+
+ .el-sub-menu {
+ overflow: hidden;
+
+ &>.el-sub-menu__title {
+ padding: 0 !important;
+
+ .svg-icon {
+ margin-left: 20px;
+ }
+
+ }
+ }
+
+ .el-menu--collapse {
+ .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;
+ visibility: hidden;
+ display: inline-block;
+ }
+ }
+ }
+ }
+ }
+
+ .el-menu--collapse .el-menu .el-sub-menu {
+ min-width: $base-sidebar-width !important;
+ }
+
+ // mobile responsive
+ .mobile {
+ .main-container {
+ margin-left: 0px;
+ }
+
+ .sidebar-container {
+ transition: transform .28s;
+ width: $base-sidebar-width !important;
+ }
+
+ &.hideSidebar {
+ .sidebar-container {
+ pointer-events: none;
+ transition-duration: 0.3s;
+ transform: translate3d(-$base-sidebar-width, 0, 0);
+ }
+ }
+ }
+
+ .withoutAnimation {
+
+ .main-container,
+ .sidebar-container {
+ transition: none;
+ }
+ }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+ &>.el-menu {
+ .svg-icon {
+ margin-right: 16px;
+ }
+ }
+
+ .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.06) !important;
+ }
+ }
+
+ // the scroll bar appears when the sub-menu 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-fastapi-frontend/src/assets/styles/variables.module.scss b/ruoyi-fastapi-frontend/src/assets/styles/variables.module.scss
old mode 100644
new mode 100755
index 3dbfaa7..09e510b
--- a/ruoyi-fastapi-frontend/src/assets/styles/variables.module.scss
+++ b/ruoyi-fastapi-frontend/src/assets/styles/variables.module.scss
@@ -1,65 +1,221 @@
-// 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, 0.7);
-$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;
-*/
-
-$--color-primary: #409EFF;
-$--color-success: #67C23A;
-$--color-warning: #E6A23C;
-$--color-danger: #F56C6C;
-$--color-info: #909399;
-
-$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;
- primaryColor: $--color-primary;
- successColor: $--color-success;
- dangerColor: $--color-danger;
- infoColor: $--color-info;
- warningColor: $--color-warning;
-}
+// base color
+$blue: #324157;
+$light-blue: #333c46;
+$red: #C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow: #FEC171;
+$panGreen: #30B08F;
+
+// 默认主题变量
+$menuText: #bfcbd9;
+$menuActiveText: #409eff;
+$menuBg: #304156;
+$menuHover: #263445;
+
+// 浅色主题theme-light
+$menuLightBg: #ffffff;
+$menuLightHover: #f0f1f5;
+$menuLightText: #303133;
+$menuLightActiveText: #409EFF;
+
+// 基础变量
+$base-sidebar-width: 200px;
+$sideBarWidth: 200px;
+
+// 菜单暗色变量
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #f4f4f5;
+$base-menu-background: #304156;
+$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-hover: #001528;
+
+// 组件变量
+$--color-primary: #409EFF;
+$--color-success: #67C23A;
+$--color-warning: #E6A23C;
+$--color-danger: #F56C6C;
+$--color-info: #909399;
+
+:export {
+ menuText: $menuText;
+ menuActiveText: $menuActiveText;
+ menuBg: $menuBg;
+ menuHover: $menuHover;
+ menuLightBg: $menuLightBg;
+ menuLightHover: $menuLightHover;
+ menuLightText: $menuLightText;
+ menuLightActiveText: $menuLightActiveText;
+ sideBarWidth: $sideBarWidth;
+ // 导出基础颜色
+ blue: $blue;
+ lightBlue: $light-blue;
+ red: $red;
+ pink: $pink;
+ green: $green;
+ tiffany: $tiffany;
+ yellow: $yellow;
+ panGreen: $panGreen;
+ // 导出组件颜色
+ colorPrimary: $--color-primary;
+ colorSuccess: $--color-success;
+ colorWarning: $--color-warning;
+ colorDanger: $--color-danger;
+ colorInfo: $--color-info;
+}
+
+// CSS变量定义
+:root {
+ /* 亮色模式变量 */
+ --sidebar-bg: #{$menuBg};
+ --sidebar-text: #{$menuText};
+ --menu-hover: #{$menuHover};
+
+ --navbar-bg: #ffffff;
+ --navbar-text: #303133;
+
+ /* splitpanes default-theme 变量 */
+ --splitpanes-default-bg: #ffffff;
+
+}
+
+// 暗黑模式变量
+html.dark {
+ /* 默认通用 */
+ --el-bg-color: #141414;
+ --el-bg-color-overlay: #1d1e1f;
+ --el-text-color-primary: #ffffff;
+ --el-text-color-regular: #d0d0d0;
+ --el-border-color: #434343;
+ --el-border-color-light: #434343;
+
+ /* 侧边栏 */
+ --sidebar-bg: #141414;
+ --sidebar-text: #ffffff;
+ --menu-hover: #2d2d2d;
+ --menu-active-text: #{$menuActiveText};
+
+ /* 顶部导航栏 */
+ --navbar-bg: #141414;
+ --navbar-text: #ffffff;
+ --navbar-hover: #141414;
+
+ /* 标签栏 */
+ --tags-bg: #141414;
+ --tags-item-bg: #1d1e1f;
+ --tags-item-border: #303030;
+ --tags-item-text: #d0d0d0;
+ --tags-item-hover: #2d2d2d;
+ --tags-close-hover: #64666a;
+
+ /* splitpanes 组件暗黑模式变量 */
+ --splitpanes-bg: #141414;
+ --splitpanes-border: #303030;
+ --splitpanes-splitter-bg: #1d1e1f;
+ --splitpanes-splitter-hover-bg: #2d2d2d;
+
+ /* blockquote 暗黑模式变量 */
+ --blockquote-bg: #1d1e1f;
+ --blockquote-border: #303030;
+ --blockquote-text: #d0d0d0;
+
+ /* Cron 时间表达式 模式变量 */
+ --cron-border: #303030;
+
+ /* splitpanes default-theme 暗黑模式变量 */
+ --splitpanes-default-bg: #141414;
+
+ /* 侧边栏菜单覆盖 */
+ .sidebar-container {
+ .el-menu-item, .menu-title {
+ color: var(--el-text-color-regular);
+ }
+ & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
+ & .theme-dark .el-sub-menu .el-menu-item {
+ background-color: var(--el-bg-color) !important;
+ }
+ }
+
+ /* 顶部栏栏菜单覆盖 */
+ .el-menu--horizontal {
+ .el-menu-item {
+ &:not(.is-disabled) {
+ &:hover,
+ &:focus {
+ background-color: var(--navbar-hover) !important;
+ }
+ }
+ }
+ }
+
+ /* 分割窗格覆盖 */
+ .splitpanes {
+ background-color: var(--splitpanes-bg);
+
+ .splitpanes__pane {
+ background-color: var(--splitpanes-bg);
+ border-color: var(--splitpanes-border);
+ }
+
+ .splitpanes__splitter {
+ background-color: var(--splitpanes-splitter-bg);
+ border-color: var(--splitpanes-border);
+
+ &:hover {
+ background-color: var(--splitpanes-splitter-hover-bg);
+ }
+
+ &:before,
+ &:after {
+ background-color: var(--splitpanes-border);
+ }
+ }
+ }
+
+ /* 表格样式覆盖 */
+ .el-table {
+ --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
+ --el-table-header-text-color: var(--el-text-color-regular) !important;
+ --el-table-border-color: var(--el-border-color-light) !important;
+ --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
+
+ .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+ th {
+ background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
+ color: var(--el-text-color-regular, #515a6e);
+ }
+ }
+ }
+
+ /* 树组件高亮样式覆盖 */
+ .el-tree {
+ .el-tree-node.is-current > .el-tree-node__content {
+ background-color: var(--el-bg-color-overlay) !important;
+ color: var(--el-color-primary);
+ }
+
+ .el-tree-node__content:hover {
+ background-color: var(--el-bg-color-overlay);
+ }
+ }
+
+ /* 下拉菜单样式覆盖 */
+ .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{
+ background-color: var(--navbar-hover) !important;
+ }
+
+ /* blockquote样式覆盖 */
+ blockquote {
+ background-color: var(--blockquote-bg) !important;
+ border-left-color: var(--blockquote-border) !important;
+ color: var(--blockquote-text) !important;
+ }
+
+ /* 时间表达式标题样式覆盖 */
+ .popup-result .title {
+ background: var(--cron-border);
+ }
+
+}
+
diff --git a/ruoyi-fastapi-frontend/src/components/Crontab/index.vue b/ruoyi-fastapi-frontend/src/components/Crontab/index.vue
index 910c9b3..103cf4c 100644
--- a/ruoyi-fastapi-frontend/src/components/Crontab/index.vue
+++ b/ruoyi-fastapi-frontend/src/components/Crontab/index.vue
@@ -251,7 +251,6 @@ onMounted(() => {
.popup-main {
position: relative;
margin: 10px auto;
- background: #fff;
border-radius: 5px;
font-size: 12px;
overflow: hidden;
diff --git a/ruoyi-fastapi-frontend/src/components/Hamburger/index.vue b/ruoyi-fastapi-frontend/src/components/Hamburger/index.vue
index 18c201e..02d58e9 100644
--- a/ruoyi-fastapi-frontend/src/components/Hamburger/index.vue
+++ b/ruoyi-fastapi-frontend/src/components/Hamburger/index.vue
@@ -7,6 +7,7 @@
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
+ fill="currentColor"
>
diff --git a/ruoyi-fastapi-frontend/src/components/TopNav/index.vue b/ruoyi-fastapi-frontend/src/components/TopNav/index.vue
index 52b40ea..6cae657 100644
--- a/ruoyi-fastapi-frontend/src/components/TopNav/index.vue
+++ b/ruoyi-fastapi-frontend/src/components/TopNav/index.vue
@@ -196,7 +196,7 @@ onMounted(() => {
/* 背景色隐藏 */
.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
- background-color: #ffffff !important;
+ background-color: #ffffff;
}
/* 图标右间距 */
diff --git a/ruoyi-fastapi-frontend/src/components/TreeSelect/index.vue b/ruoyi-fastapi-frontend/src/components/TreeSelect/index.vue
deleted file mode 100644
index 4ff0e76..0000000
--- a/ruoyi-fastapi-frontend/src/components/TreeSelect/index.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ruoyi-fastapi-frontend/src/layout/components/Navbar.vue b/ruoyi-fastapi-frontend/src/layout/components/Navbar.vue
index 05e15af..4ec7cad 100644
--- a/ruoyi-fastapi-frontend/src/layout/components/Navbar.vue
+++ b/ruoyi-fastapi-frontend/src/layout/components/Navbar.vue
@@ -18,6 +18,13 @@
+
+
+
+
@@ -98,6 +105,10 @@ const emits = defineEmits(['setLayout'])
function setLayout() {
emits('setLayout');
}
+
+function toggleTheme() {
+ settingsStore.toggleTheme()
+}
diff --git a/ruoyi-fastapi-frontend/src/layout/components/TagsView/index.vue b/ruoyi-fastapi-frontend/src/layout/components/TagsView/index.vue
index 8212fec..0b826d6 100644
--- a/ruoyi-fastapi-frontend/src/layout/components/TagsView/index.vue
+++ b/ruoyi-fastapi-frontend/src/layout/components/TagsView/index.vue
@@ -237,13 +237,13 @@ function handleScroll() {
}
-