v3.5.0 主题颜色保存配置

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

@@ -1,158 +1,158 @@
- /**
- * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
- */
+/**
+* 通用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;
 }
 .ml0 {
-	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;
 }
 .m20 {
-	margin-left: 20px;
+  margin-left: 20px;
 }
 
 .el-dialog:not(.is-fullscreen){
-	margin-top: 6vh !important;
+  margin-top: 6vh !important;
 }
 
 .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: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      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;
 }
 
 .pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
+  right: 0;
+  position: absolute;
 }
 
 .el-table .fixed-width .el-button--mini {
-	padding-left: 0;
-	padding-right: 0;
-	width: inherit;
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
 }
 
 .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;
+  min-height: 40px;
 }
 
 .el-card__body {
-	padding: 15px 20px 20px 20px;
+  padding: 15px 20px 20px 20px;
 }
 
 .card-box {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-bottom: 10px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
 }
 
 /* button color */
@@ -176,70 +176,64 @@
   color: #FFFFFF;
 }
 
-/* submenu item */
-.el-menu--horizontal > .el-submenu .el-submenu__title {
-	height: 50px !important;
-	line-height: 50px !important;
-}
-
 /* 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: absolute;
-	top: 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;
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
 }
 
 .top-right-btn {
-	position: relative;
-	float: right;
+  position: relative;
+  float: right;
 }

yudao-ui-admin/src/components/ThemePicker/index.vue

@@ -35,7 +35,6 @@ export default {
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
-      console.log(themeCluster, originalCluster)
 
       const $message = this.$message({
         message: '  Compiling the theme',

yudao-ui-admin/src/components/TopNav/index.vue

@@ -5,7 +5,7 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber"
+      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
       ><svg-icon :icon-class="item.meta.icon" />
         {{ item.meta.title }}</el-menu-item
       >
@@ -42,6 +42,9 @@ export default {
     };
   },
   computed: {
+    theme() {
+      return this.$store.state.settings.theme;
+    },
     // 顶部显示菜单
     topMenus() {
       let topMenus = [];
@@ -149,7 +152,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .el-menu--horizontal > .el-menu-item {
   float: left;
   height: 50px;
@@ -162,7 +165,13 @@ export default {
 }
 
 .el-menu--horizontal > .el-menu-item.is-active {
-  border-bottom: 3px solid #409eff;
+  border-bottom: 3px solid #{'var(--theme)'};
   color: #303133;
 }
+
+/* submenu item */
+.el-menu--horizontal > .el-submenu .el-submenu__title {
+  height: 50px !important;
+  line-height: 50px !important;
+}
 </style>

yudao-ui-admin/src/layout/components/Settings/index.vue

@@ -77,13 +77,11 @@ export default {
   components: { ThemePicker },
   data() {
     return {
+      theme: this.$store.state.settings.theme,
       sideTheme: this.$store.state.settings.sideTheme
     };
   },
   computed: {
-    theme() {
-      return this.$store.state.settings.theme
-    },
     fixedHeader: {
       get() {
         return this.$store.state.settings.fixedHeader
@@ -138,6 +136,7 @@ export default {
         key: 'theme',
         value: val
       })
+      this.theme = val;
     },
     handleTheme(val) {
       this.$store.dispatch('settings/changeSetting', {
@@ -161,7 +160,8 @@ export default {
             "tagsView":${this.tagsView},
             "fixedHeader":${this.fixedHeader},
             "sidebarLogo":${this.sidebarLogo},
-            "sideTheme":"${this.sideTheme}"
+            "sideTheme":"${this.sideTheme}",
+            "theme":"${this.theme}"
           }`
       );
       setTimeout(loading.close(), 1000)

yudao-ui-admin/src/store/modules/settings.js

@@ -5,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } =
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
-  theme: variables.theme,
+  theme: storageSetting.theme || variables.theme,
   sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
   topNav:  storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

更新日志.md

@@ -32,7 +32,7 @@ TODO
 * 【优化】使用 Lombok 简化 JsonUtils 工具类 [#73](https://github.com/YunaiV/ruoyi-vue-pro/pull/73)
 * 【新增】兼容 Node 16 版本，通过升级 BPMN-JS 相关库 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4c169cbc58eb0d0cc4aead73ca127a2957e6a3aa)
 * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5)
-* 【新增】菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单） [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518)
+* 【新增】菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e)
 * 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！
 
 ### 🐞 Bug Fixes