Commit 62cc1206f758dfa9739b194136d4a233a0a6661e
1 parent
a7a98d15
v3.5.0 主题颜色保存配置
Showing
6 changed files
with
116 additions
and
114 deletions
yudao-ui-admin/src/assets/styles/ruoyi.scss
| 1 | - /** | |
| 2 | - * 通用css样式布局处理 | |
| 3 | - * Copyright (c) 2019 ruoyi | |
| 4 | - */ | |
| 1 | +/** | |
| 2 | +* 通用css样式布局处理 | |
| 3 | +* Copyright (c) 2019 ruoyi | |
| 4 | +*/ | |
| 5 | 5 | |
| 6 | - /** 基础通用 **/ | |
| 6 | +/** 基础通用 **/ | |
| 7 | 7 | .pt5 { |
| 8 | - padding-top: 5px; | |
| 8 | + padding-top: 5px; | |
| 9 | 9 | } |
| 10 | 10 | .pr5 { |
| 11 | - padding-right: 5px; | |
| 11 | + padding-right: 5px; | |
| 12 | 12 | } |
| 13 | 13 | .pb5 { |
| 14 | - padding-bottom: 5px; | |
| 14 | + padding-bottom: 5px; | |
| 15 | 15 | } |
| 16 | 16 | .mt5 { |
| 17 | - margin-top: 5px; | |
| 17 | + margin-top: 5px; | |
| 18 | 18 | } |
| 19 | 19 | .mr5 { |
| 20 | - margin-right: 5px; | |
| 20 | + margin-right: 5px; | |
| 21 | 21 | } |
| 22 | 22 | .mb5 { |
| 23 | - margin-bottom: 5px; | |
| 23 | + margin-bottom: 5px; | |
| 24 | 24 | } |
| 25 | 25 | .mb8 { |
| 26 | - margin-bottom: 8px; | |
| 26 | + margin-bottom: 8px; | |
| 27 | 27 | } |
| 28 | 28 | .ml5 { |
| 29 | - margin-left: 5px; | |
| 29 | + margin-left: 5px; | |
| 30 | 30 | } |
| 31 | 31 | .mt10 { |
| 32 | - margin-top: 10px; | |
| 32 | + margin-top: 10px; | |
| 33 | 33 | } |
| 34 | 34 | .mr10 { |
| 35 | - margin-right: 10px; | |
| 35 | + margin-right: 10px; | |
| 36 | 36 | } |
| 37 | 37 | .mb10 { |
| 38 | - margin-bottom: 10px; | |
| 38 | + margin-bottom: 10px; | |
| 39 | 39 | } |
| 40 | 40 | .ml0 { |
| 41 | - margin-left: 10px; | |
| 41 | + margin-left: 10px; | |
| 42 | 42 | } |
| 43 | 43 | .mt20 { |
| 44 | - margin-top: 20px; | |
| 44 | + margin-top: 20px; | |
| 45 | 45 | } |
| 46 | 46 | .mr20 { |
| 47 | - margin-right: 20px; | |
| 47 | + margin-right: 20px; | |
| 48 | 48 | } |
| 49 | 49 | .mb20 { |
| 50 | - margin-bottom: 20px; | |
| 50 | + margin-bottom: 20px; | |
| 51 | 51 | } |
| 52 | 52 | .m20 { |
| 53 | - margin-left: 20px; | |
| 53 | + margin-left: 20px; | |
| 54 | 54 | } |
| 55 | 55 | |
| 56 | 56 | .el-dialog:not(.is-fullscreen){ |
| 57 | - margin-top: 6vh !important; | |
| 57 | + margin-top: 6vh !important; | |
| 58 | 58 | } |
| 59 | 59 | |
| 60 | 60 | .el-table { |
| 61 | - .el-table__header-wrapper, .el-table__fixed-header-wrapper { | |
| 62 | - th { | |
| 63 | - word-break: break-word; | |
| 64 | - background-color: #f8f8f9; | |
| 65 | - color: #515a6e; | |
| 66 | - height: 40px; | |
| 67 | - font-size: 13px; | |
| 68 | - } | |
| 69 | - } | |
| 70 | - .el-table__body-wrapper { | |
| 71 | - .el-button [class*="el-icon-"] + span { | |
| 72 | - margin-left: 1px; | |
| 73 | - } | |
| 74 | - } | |
| 61 | + .el-table__header-wrapper, .el-table__fixed-header-wrapper { | |
| 62 | + th { | |
| 63 | + word-break: break-word; | |
| 64 | + background-color: #f8f8f9; | |
| 65 | + color: #515a6e; | |
| 66 | + height: 40px; | |
| 67 | + font-size: 13px; | |
| 68 | + } | |
| 69 | + } | |
| 70 | + .el-table__body-wrapper { | |
| 71 | + .el-button [class*="el-icon-"] + span { | |
| 72 | + margin-left: 1px; | |
| 73 | + } | |
| 74 | + } | |
| 75 | 75 | } |
| 76 | 76 | |
| 77 | 77 | /** 表单布局 **/ |
| 78 | 78 | .form-header { |
| 79 | - font-size:15px; | |
| 80 | - color:#6379bb; | |
| 81 | - border-bottom:1px solid #ddd; | |
| 82 | - margin:8px 10px 25px 10px; | |
| 83 | - padding-bottom:5px | |
| 79 | + font-size:15px; | |
| 80 | + color:#6379bb; | |
| 81 | + border-bottom:1px solid #ddd; | |
| 82 | + margin:8px 10px 25px 10px; | |
| 83 | + padding-bottom:5px | |
| 84 | 84 | } |
| 85 | 85 | |
| 86 | 86 | /** 表格布局 **/ |
| 87 | 87 | .pagination-container { |
| 88 | - position: relative; | |
| 89 | - height: 25px; | |
| 90 | - margin-bottom: 10px; | |
| 91 | - margin-top: 15px; | |
| 92 | - padding: 10px 20px !important; | |
| 88 | + position: relative; | |
| 89 | + height: 25px; | |
| 90 | + margin-bottom: 10px; | |
| 91 | + margin-top: 15px; | |
| 92 | + padding: 10px 20px !important; | |
| 93 | 93 | } |
| 94 | 94 | |
| 95 | 95 | /* tree border */ |
| 96 | 96 | .tree-border { |
| 97 | - margin-top: 5px; | |
| 98 | - border: 1px solid #e5e6e7; | |
| 99 | - background: #FFFFFF none; | |
| 100 | - border-radius:4px; | |
| 97 | + margin-top: 5px; | |
| 98 | + border: 1px solid #e5e6e7; | |
| 99 | + background: #FFFFFF none; | |
| 100 | + border-radius:4px; | |
| 101 | 101 | } |
| 102 | 102 | |
| 103 | 103 | .pagination-container .el-pagination { |
| 104 | - right: 0; | |
| 105 | - position: absolute; | |
| 104 | + right: 0; | |
| 105 | + position: absolute; | |
| 106 | 106 | } |
| 107 | 107 | |
| 108 | 108 | .el-table .fixed-width .el-button--mini { |
| 109 | - padding-left: 0; | |
| 110 | - padding-right: 0; | |
| 111 | - width: inherit; | |
| 109 | + padding-left: 0; | |
| 110 | + padding-right: 0; | |
| 111 | + width: inherit; | |
| 112 | 112 | } |
| 113 | 113 | |
| 114 | 114 | .el-tree-node__content > .el-checkbox { |
| 115 | - margin-right: 8px; | |
| 115 | + margin-right: 8px; | |
| 116 | 116 | } |
| 117 | 117 | |
| 118 | 118 | .list-group-striped > .list-group-item { |
| 119 | - border-left: 0; | |
| 120 | - border-right: 0; | |
| 121 | - border-radius: 0; | |
| 122 | - padding-left: 0; | |
| 123 | - padding-right: 0; | |
| 119 | + border-left: 0; | |
| 120 | + border-right: 0; | |
| 121 | + border-radius: 0; | |
| 122 | + padding-left: 0; | |
| 123 | + padding-right: 0; | |
| 124 | 124 | } |
| 125 | 125 | |
| 126 | 126 | .list-group { |
| 127 | - padding-left: 0px; | |
| 128 | - list-style: none; | |
| 127 | + padding-left: 0px; | |
| 128 | + list-style: none; | |
| 129 | 129 | } |
| 130 | 130 | |
| 131 | 131 | .list-group-item { |
| 132 | - border-bottom: 1px solid #e7eaec; | |
| 133 | - border-top: 1px solid #e7eaec; | |
| 134 | - margin-bottom: -1px; | |
| 135 | - padding: 11px 0px; | |
| 136 | - font-size: 13px; | |
| 132 | + border-bottom: 1px solid #e7eaec; | |
| 133 | + border-top: 1px solid #e7eaec; | |
| 134 | + margin-bottom: -1px; | |
| 135 | + padding: 11px 0px; | |
| 136 | + font-size: 13px; | |
| 137 | 137 | } |
| 138 | 138 | |
| 139 | 139 | .pull-right { |
| 140 | - float: right !important; | |
| 140 | + float: right !important; | |
| 141 | 141 | } |
| 142 | 142 | |
| 143 | 143 | .el-card__header { |
| 144 | - padding: 14px 15px 7px; | |
| 145 | - min-height: 40px; | |
| 144 | + padding: 14px 15px 7px; | |
| 145 | + min-height: 40px; | |
| 146 | 146 | } |
| 147 | 147 | |
| 148 | 148 | .el-card__body { |
| 149 | - padding: 15px 20px 20px 20px; | |
| 149 | + padding: 15px 20px 20px 20px; | |
| 150 | 150 | } |
| 151 | 151 | |
| 152 | 152 | .card-box { |
| 153 | - padding-right: 15px; | |
| 154 | - padding-left: 15px; | |
| 155 | - margin-bottom: 10px; | |
| 153 | + padding-right: 15px; | |
| 154 | + padding-left: 15px; | |
| 155 | + margin-bottom: 10px; | |
| 156 | 156 | } |
| 157 | 157 | |
| 158 | 158 | /* button color */ |
| ... | ... | @@ -176,70 +176,64 @@ |
| 176 | 176 | color: #FFFFFF; |
| 177 | 177 | } |
| 178 | 178 | |
| 179 | -/* submenu item */ | |
| 180 | -.el-menu--horizontal > .el-submenu .el-submenu__title { | |
| 181 | - height: 50px !important; | |
| 182 | - line-height: 50px !important; | |
| 183 | -} | |
| 184 | - | |
| 185 | 179 | /* text color */ |
| 186 | 180 | .text-navy { |
| 187 | - color: #1ab394; | |
| 181 | + color: #1ab394; | |
| 188 | 182 | } |
| 189 | 183 | |
| 190 | 184 | .text-primary { |
| 191 | - color: inherit; | |
| 185 | + color: inherit; | |
| 192 | 186 | } |
| 193 | 187 | |
| 194 | 188 | .text-success { |
| 195 | - color: #1c84c6; | |
| 189 | + color: #1c84c6; | |
| 196 | 190 | } |
| 197 | 191 | |
| 198 | 192 | .text-info { |
| 199 | - color: #23c6c8; | |
| 193 | + color: #23c6c8; | |
| 200 | 194 | } |
| 201 | 195 | |
| 202 | 196 | .text-warning { |
| 203 | - color: #f8ac59; | |
| 197 | + color: #f8ac59; | |
| 204 | 198 | } |
| 205 | 199 | |
| 206 | 200 | .text-danger { |
| 207 | - color: #ed5565; | |
| 201 | + color: #ed5565; | |
| 208 | 202 | } |
| 209 | 203 | |
| 210 | 204 | .text-muted { |
| 211 | - color: #888888; | |
| 205 | + color: #888888; | |
| 212 | 206 | } |
| 213 | 207 | |
| 214 | 208 | /* image */ |
| 215 | 209 | .img-circle { |
| 216 | - border-radius: 50%; | |
| 210 | + border-radius: 50%; | |
| 217 | 211 | } |
| 218 | 212 | |
| 219 | 213 | .img-lg { |
| 220 | - width: 120px; | |
| 221 | - height: 120px; | |
| 214 | + width: 120px; | |
| 215 | + height: 120px; | |
| 222 | 216 | } |
| 223 | 217 | |
| 224 | 218 | .avatar-upload-preview { |
| 225 | - position: absolute; | |
| 226 | - top: 50%; | |
| 227 | - transform: translate(50%, -50%); | |
| 228 | - width: 200px; | |
| 229 | - height: 200px; | |
| 230 | - border-radius: 50%; | |
| 231 | - box-shadow: 0 0 4px #ccc; | |
| 232 | - overflow: hidden; | |
| 219 | + position: absolute; | |
| 220 | + top: 50%; | |
| 221 | + transform: translate(50%, -50%); | |
| 222 | + width: 200px; | |
| 223 | + height: 200px; | |
| 224 | + border-radius: 50%; | |
| 225 | + box-shadow: 0 0 4px #ccc; | |
| 226 | + overflow: hidden; | |
| 233 | 227 | } |
| 234 | 228 | |
| 235 | 229 | /* 拖拽列样式 */ |
| 236 | 230 | .sortable-ghost{ |
| 237 | - opacity: .8; | |
| 238 | - color: #fff!important; | |
| 239 | - background: #42b983!important; | |
| 231 | + opacity: .8; | |
| 232 | + color: #fff!important; | |
| 233 | + background: #42b983!important; | |
| 240 | 234 | } |
| 241 | 235 | |
| 242 | 236 | .top-right-btn { |
| 243 | - position: relative; | |
| 244 | - float: right; | |
| 237 | + position: relative; | |
| 238 | + float: right; | |
| 245 | 239 | } | ... | ... |
yudao-ui-admin/src/components/ThemePicker/index.vue
| ... | ... | @@ -35,7 +35,6 @@ export default { |
| 35 | 35 | if (typeof val !== 'string') return |
| 36 | 36 | const themeCluster = this.getThemeCluster(val.replace('#', '')) |
| 37 | 37 | const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) |
| 38 | - console.log(themeCluster, originalCluster) | |
| 39 | 38 | |
| 40 | 39 | const $message = this.$message({ |
| 41 | 40 | message: ' Compiling the theme', | ... | ... |
yudao-ui-admin/src/components/TopNav/index.vue
| ... | ... | @@ -5,7 +5,7 @@ |
| 5 | 5 | @select="handleSelect" |
| 6 | 6 | > |
| 7 | 7 | <template v-for="(item, index) in topMenus"> |
| 8 | - <el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber" | |
| 8 | + <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" | |
| 9 | 9 | ><svg-icon :icon-class="item.meta.icon" /> |
| 10 | 10 | {{ item.meta.title }}</el-menu-item |
| 11 | 11 | > |
| ... | ... | @@ -42,6 +42,9 @@ export default { |
| 42 | 42 | }; |
| 43 | 43 | }, |
| 44 | 44 | computed: { |
| 45 | + theme() { | |
| 46 | + return this.$store.state.settings.theme; | |
| 47 | + }, | |
| 45 | 48 | // 顶部显示菜单 |
| 46 | 49 | topMenus() { |
| 47 | 50 | let topMenus = []; |
| ... | ... | @@ -149,7 +152,7 @@ export default { |
| 149 | 152 | }; |
| 150 | 153 | </script> |
| 151 | 154 | |
| 152 | -<style lang="scss" scoped> | |
| 155 | +<style lang="scss"> | |
| 153 | 156 | .el-menu--horizontal > .el-menu-item { |
| 154 | 157 | float: left; |
| 155 | 158 | height: 50px; |
| ... | ... | @@ -162,7 +165,13 @@ export default { |
| 162 | 165 | } |
| 163 | 166 | |
| 164 | 167 | .el-menu--horizontal > .el-menu-item.is-active { |
| 165 | - border-bottom: 3px solid #409eff; | |
| 168 | + border-bottom: 3px solid #{'var(--theme)'}; | |
| 166 | 169 | color: #303133; |
| 167 | 170 | } |
| 171 | + | |
| 172 | +/* submenu item */ | |
| 173 | +.el-menu--horizontal > .el-submenu .el-submenu__title { | |
| 174 | + height: 50px !important; | |
| 175 | + line-height: 50px !important; | |
| 176 | +} | |
| 168 | 177 | </style> | ... | ... |
yudao-ui-admin/src/layout/components/Settings/index.vue
| ... | ... | @@ -77,13 +77,11 @@ export default { |
| 77 | 77 | components: { ThemePicker }, |
| 78 | 78 | data() { |
| 79 | 79 | return { |
| 80 | + theme: this.$store.state.settings.theme, | |
| 80 | 81 | sideTheme: this.$store.state.settings.sideTheme |
| 81 | 82 | }; |
| 82 | 83 | }, |
| 83 | 84 | computed: { |
| 84 | - theme() { | |
| 85 | - return this.$store.state.settings.theme | |
| 86 | - }, | |
| 87 | 85 | fixedHeader: { |
| 88 | 86 | get() { |
| 89 | 87 | return this.$store.state.settings.fixedHeader |
| ... | ... | @@ -138,6 +136,7 @@ export default { |
| 138 | 136 | key: 'theme', |
| 139 | 137 | value: val |
| 140 | 138 | }) |
| 139 | + this.theme = val; | |
| 141 | 140 | }, |
| 142 | 141 | handleTheme(val) { |
| 143 | 142 | this.$store.dispatch('settings/changeSetting', { |
| ... | ... | @@ -161,7 +160,8 @@ export default { |
| 161 | 160 | "tagsView":${this.tagsView}, |
| 162 | 161 | "fixedHeader":${this.fixedHeader}, |
| 163 | 162 | "sidebarLogo":${this.sidebarLogo}, |
| 164 | - "sideTheme":"${this.sideTheme}" | |
| 163 | + "sideTheme":"${this.sideTheme}", | |
| 164 | + "theme":"${this.theme}" | |
| 165 | 165 | }` |
| 166 | 166 | ); |
| 167 | 167 | setTimeout(loading.close(), 1000) | ... | ... |
yudao-ui-admin/src/store/modules/settings.js
| ... | ... | @@ -5,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } = |
| 5 | 5 | |
| 6 | 6 | const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' |
| 7 | 7 | const state = { |
| 8 | - theme: variables.theme, | |
| 8 | + theme: storageSetting.theme || variables.theme, | |
| 9 | 9 | sideTheme: storageSetting.sideTheme || sideTheme, |
| 10 | 10 | showSettings: showSettings, |
| 11 | 11 | topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, | ... | ... |
更新日志.md
| ... | ... | @@ -32,7 +32,7 @@ TODO |
| 32 | 32 | * 【优化】使用 Lombok 简化 JsonUtils 工具类 [#73](https://github.com/YunaiV/ruoyi-vue-pro/pull/73) |
| 33 | 33 | * 【新增】兼容 Node 16 版本，通过升级 BPMN-JS 相关库 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4c169cbc58eb0d0cc4aead73ca127a2957e6a3aa) |
| 34 | 34 | * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5) |
| 35 | -* 【新增】菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单） [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) | |
| 35 | +* 【新增】菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e) | |
| 36 | 36 | * 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！ |
| 37 | 37 | |
| 38 | 38 | ### 🐞 Bug Fixes | ... | ... |