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 | .pt5 { | 7 | .pt5 { |
| 8 | - padding-top: 5px; | 8 | + padding-top: 5px; |
| 9 | } | 9 | } |
| 10 | .pr5 { | 10 | .pr5 { |
| 11 | - padding-right: 5px; | 11 | + padding-right: 5px; |
| 12 | } | 12 | } |
| 13 | .pb5 { | 13 | .pb5 { |
| 14 | - padding-bottom: 5px; | 14 | + padding-bottom: 5px; |
| 15 | } | 15 | } |
| 16 | .mt5 { | 16 | .mt5 { |
| 17 | - margin-top: 5px; | 17 | + margin-top: 5px; |
| 18 | } | 18 | } |
| 19 | .mr5 { | 19 | .mr5 { |
| 20 | - margin-right: 5px; | 20 | + margin-right: 5px; |
| 21 | } | 21 | } |
| 22 | .mb5 { | 22 | .mb5 { |
| 23 | - margin-bottom: 5px; | 23 | + margin-bottom: 5px; |
| 24 | } | 24 | } |
| 25 | .mb8 { | 25 | .mb8 { |
| 26 | - margin-bottom: 8px; | 26 | + margin-bottom: 8px; |
| 27 | } | 27 | } |
| 28 | .ml5 { | 28 | .ml5 { |
| 29 | - margin-left: 5px; | 29 | + margin-left: 5px; |
| 30 | } | 30 | } |
| 31 | .mt10 { | 31 | .mt10 { |
| 32 | - margin-top: 10px; | 32 | + margin-top: 10px; |
| 33 | } | 33 | } |
| 34 | .mr10 { | 34 | .mr10 { |
| 35 | - margin-right: 10px; | 35 | + margin-right: 10px; |
| 36 | } | 36 | } |
| 37 | .mb10 { | 37 | .mb10 { |
| 38 | - margin-bottom: 10px; | 38 | + margin-bottom: 10px; |
| 39 | } | 39 | } |
| 40 | .ml0 { | 40 | .ml0 { |
| 41 | - margin-left: 10px; | 41 | + margin-left: 10px; |
| 42 | } | 42 | } |
| 43 | .mt20 { | 43 | .mt20 { |
| 44 | - margin-top: 20px; | 44 | + margin-top: 20px; |
| 45 | } | 45 | } |
| 46 | .mr20 { | 46 | .mr20 { |
| 47 | - margin-right: 20px; | 47 | + margin-right: 20px; |
| 48 | } | 48 | } |
| 49 | .mb20 { | 49 | .mb20 { |
| 50 | - margin-bottom: 20px; | 50 | + margin-bottom: 20px; |
| 51 | } | 51 | } |
| 52 | .m20 { | 52 | .m20 { |
| 53 | - margin-left: 20px; | 53 | + margin-left: 20px; |
| 54 | } | 54 | } |
| 55 | 55 | ||
| 56 | .el-dialog:not(.is-fullscreen){ | 56 | .el-dialog:not(.is-fullscreen){ |
| 57 | - margin-top: 6vh !important; | 57 | + margin-top: 6vh !important; |
| 58 | } | 58 | } |
| 59 | 59 | ||
| 60 | .el-table { | 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 | .form-header { | 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 | .pagination-container { | 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 | /* tree border */ | 95 | /* tree border */ |
| 96 | .tree-border { | 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 | .pagination-container .el-pagination { | 103 | .pagination-container .el-pagination { |
| 104 | - right: 0; | ||
| 105 | - position: absolute; | 104 | + right: 0; |
| 105 | + position: absolute; | ||
| 106 | } | 106 | } |
| 107 | 107 | ||
| 108 | .el-table .fixed-width .el-button--mini { | 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 | .el-tree-node__content > .el-checkbox { | 114 | .el-tree-node__content > .el-checkbox { |
| 115 | - margin-right: 8px; | 115 | + margin-right: 8px; |
| 116 | } | 116 | } |
| 117 | 117 | ||
| 118 | .list-group-striped > .list-group-item { | 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 | .list-group { | 126 | .list-group { |
| 127 | - padding-left: 0px; | ||
| 128 | - list-style: none; | 127 | + padding-left: 0px; |
| 128 | + list-style: none; | ||
| 129 | } | 129 | } |
| 130 | 130 | ||
| 131 | .list-group-item { | 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 | .pull-right { | 139 | .pull-right { |
| 140 | - float: right !important; | 140 | + float: right !important; |
| 141 | } | 141 | } |
| 142 | 142 | ||
| 143 | .el-card__header { | 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 | .el-card__body { | 148 | .el-card__body { |
| 149 | - padding: 15px 20px 20px 20px; | 149 | + padding: 15px 20px 20px 20px; |
| 150 | } | 150 | } |
| 151 | 151 | ||
| 152 | .card-box { | 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 | /* button color */ | 158 | /* button color */ |
| @@ -176,70 +176,64 @@ | @@ -176,70 +176,64 @@ | ||
| 176 | color: #FFFFFF; | 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 | /* text color */ | 179 | /* text color */ |
| 186 | .text-navy { | 180 | .text-navy { |
| 187 | - color: #1ab394; | 181 | + color: #1ab394; |
| 188 | } | 182 | } |
| 189 | 183 | ||
| 190 | .text-primary { | 184 | .text-primary { |
| 191 | - color: inherit; | 185 | + color: inherit; |
| 192 | } | 186 | } |
| 193 | 187 | ||
| 194 | .text-success { | 188 | .text-success { |
| 195 | - color: #1c84c6; | 189 | + color: #1c84c6; |
| 196 | } | 190 | } |
| 197 | 191 | ||
| 198 | .text-info { | 192 | .text-info { |
| 199 | - color: #23c6c8; | 193 | + color: #23c6c8; |
| 200 | } | 194 | } |
| 201 | 195 | ||
| 202 | .text-warning { | 196 | .text-warning { |
| 203 | - color: #f8ac59; | 197 | + color: #f8ac59; |
| 204 | } | 198 | } |
| 205 | 199 | ||
| 206 | .text-danger { | 200 | .text-danger { |
| 207 | - color: #ed5565; | 201 | + color: #ed5565; |
| 208 | } | 202 | } |
| 209 | 203 | ||
| 210 | .text-muted { | 204 | .text-muted { |
| 211 | - color: #888888; | 205 | + color: #888888; |
| 212 | } | 206 | } |
| 213 | 207 | ||
| 214 | /* image */ | 208 | /* image */ |
| 215 | .img-circle { | 209 | .img-circle { |
| 216 | - border-radius: 50%; | 210 | + border-radius: 50%; |
| 217 | } | 211 | } |
| 218 | 212 | ||
| 219 | .img-lg { | 213 | .img-lg { |
| 220 | - width: 120px; | ||
| 221 | - height: 120px; | 214 | + width: 120px; |
| 215 | + height: 120px; | ||
| 222 | } | 216 | } |
| 223 | 217 | ||
| 224 | .avatar-upload-preview { | 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 | .sortable-ghost{ | 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 | .top-right-btn { | 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,7 +35,6 @@ export default { | ||
| 35 | if (typeof val !== 'string') return | 35 | if (typeof val !== 'string') return |
| 36 | const themeCluster = this.getThemeCluster(val.replace('#', '')) | 36 | const themeCluster = this.getThemeCluster(val.replace('#', '')) |
| 37 | const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) | 37 | const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) |
| 38 | - console.log(themeCluster, originalCluster) | ||
| 39 | 38 | ||
| 40 | const $message = this.$message({ | 39 | const $message = this.$message({ |
| 41 | message: ' Compiling the theme', | 40 | message: ' Compiling the theme', |
yudao-ui-admin/src/components/TopNav/index.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | @select="handleSelect" | 5 | @select="handleSelect" |
| 6 | > | 6 | > |
| 7 | <template v-for="(item, index) in topMenus"> | 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 | ><svg-icon :icon-class="item.meta.icon" /> | 9 | ><svg-icon :icon-class="item.meta.icon" /> |
| 10 | {{ item.meta.title }}</el-menu-item | 10 | {{ item.meta.title }}</el-menu-item |
| 11 | > | 11 | > |
| @@ -42,6 +42,9 @@ export default { | @@ -42,6 +42,9 @@ export default { | ||
| 42 | }; | 42 | }; |
| 43 | }, | 43 | }, |
| 44 | computed: { | 44 | computed: { |
| 45 | + theme() { | ||
| 46 | + return this.$store.state.settings.theme; | ||
| 47 | + }, | ||
| 45 | // 顶部显示菜单 | 48 | // 顶部显示菜单 |
| 46 | topMenus() { | 49 | topMenus() { |
| 47 | let topMenus = []; | 50 | let topMenus = []; |
| @@ -149,7 +152,7 @@ export default { | @@ -149,7 +152,7 @@ export default { | ||
| 149 | }; | 152 | }; |
| 150 | </script> | 153 | </script> |
| 151 | 154 | ||
| 152 | -<style lang="scss" scoped> | 155 | +<style lang="scss"> |
| 153 | .el-menu--horizontal > .el-menu-item { | 156 | .el-menu--horizontal > .el-menu-item { |
| 154 | float: left; | 157 | float: left; |
| 155 | height: 50px; | 158 | height: 50px; |
| @@ -162,7 +165,13 @@ export default { | @@ -162,7 +165,13 @@ export default { | ||
| 162 | } | 165 | } |
| 163 | 166 | ||
| 164 | .el-menu--horizontal > .el-menu-item.is-active { | 167 | .el-menu--horizontal > .el-menu-item.is-active { |
| 165 | - border-bottom: 3px solid #409eff; | 168 | + border-bottom: 3px solid #{'var(--theme)'}; |
| 166 | color: #303133; | 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 | </style> | 177 | </style> |
yudao-ui-admin/src/layout/components/Settings/index.vue
| @@ -77,13 +77,11 @@ export default { | @@ -77,13 +77,11 @@ export default { | ||
| 77 | components: { ThemePicker }, | 77 | components: { ThemePicker }, |
| 78 | data() { | 78 | data() { |
| 79 | return { | 79 | return { |
| 80 | + theme: this.$store.state.settings.theme, | ||
| 80 | sideTheme: this.$store.state.settings.sideTheme | 81 | sideTheme: this.$store.state.settings.sideTheme |
| 81 | }; | 82 | }; |
| 82 | }, | 83 | }, |
| 83 | computed: { | 84 | computed: { |
| 84 | - theme() { | ||
| 85 | - return this.$store.state.settings.theme | ||
| 86 | - }, | ||
| 87 | fixedHeader: { | 85 | fixedHeader: { |
| 88 | get() { | 86 | get() { |
| 89 | return this.$store.state.settings.fixedHeader | 87 | return this.$store.state.settings.fixedHeader |
| @@ -138,6 +136,7 @@ export default { | @@ -138,6 +136,7 @@ export default { | ||
| 138 | key: 'theme', | 136 | key: 'theme', |
| 139 | value: val | 137 | value: val |
| 140 | }) | 138 | }) |
| 139 | + this.theme = val; | ||
| 141 | }, | 140 | }, |
| 142 | handleTheme(val) { | 141 | handleTheme(val) { |
| 143 | this.$store.dispatch('settings/changeSetting', { | 142 | this.$store.dispatch('settings/changeSetting', { |
| @@ -161,7 +160,8 @@ export default { | @@ -161,7 +160,8 @@ export default { | ||
| 161 | "tagsView":${this.tagsView}, | 160 | "tagsView":${this.tagsView}, |
| 162 | "fixedHeader":${this.fixedHeader}, | 161 | "fixedHeader":${this.fixedHeader}, |
| 163 | "sidebarLogo":${this.sidebarLogo}, | 162 | "sidebarLogo":${this.sidebarLogo}, |
| 164 | - "sideTheme":"${this.sideTheme}" | 163 | + "sideTheme":"${this.sideTheme}", |
| 164 | + "theme":"${this.theme}" | ||
| 165 | }` | 165 | }` |
| 166 | ); | 166 | ); |
| 167 | setTimeout(loading.close(), 1000) | 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,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } = | ||
| 5 | 5 | ||
| 6 | const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' | 6 | const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' |
| 7 | const state = { | 7 | const state = { |
| 8 | - theme: variables.theme, | 8 | + theme: storageSetting.theme || variables.theme, |
| 9 | sideTheme: storageSetting.sideTheme || sideTheme, | 9 | sideTheme: storageSetting.sideTheme || sideTheme, |
| 10 | showSettings: showSettings, | 10 | showSettings: showSettings, |
| 11 | topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, | 11 | topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, |
更新日志.md
| @@ -32,7 +32,7 @@ TODO | @@ -32,7 +32,7 @@ TODO | ||
| 32 | * 【优化】使用 Lombok 简化 JsonUtils 工具类 [#73](https://github.com/YunaiV/ruoyi-vue-pro/pull/73) | 32 | * 【优化】使用 Lombok 简化 JsonUtils 工具类 [#73](https://github.com/YunaiV/ruoyi-vue-pro/pull/73) |
| 33 | * 【新增】兼容 Node 16 版本，通过升级 BPMN-JS 相关库 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4c169cbc58eb0d0cc4aead73ca127a2957e6a3aa) | 33 | * 【新增】兼容 Node 16 版本，通过升级 BPMN-JS 相关库 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4c169cbc58eb0d0cc4aead73ca127a2957e6a3aa) |
| 34 | * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5) | 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 | * 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！ | 36 | * 【新增】跟进 ruoyi-vue 3.4.0、3.5.0 版本，感谢这么优秀的开源项目！ |
| 37 | 37 | ||
| 38 | ### 🐞 Bug Fixes | 38 | ### 🐞 Bug Fixes |