正在显示
15 个修改的文件
包含
242 行增加
和
40 行删除
ruoyi-ui/src/assets/images/dark.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="UTF-8"?> | ||
| 2 | +<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" | ||
| 3 | + xmlns="http://www.w3.org/2000/svg" | ||
| 4 | + xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
| 5 | + <defs> | ||
| 6 | + <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1"> | ||
| 7 | + <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> | ||
| 8 | + <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> | ||
| 9 | + <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix> | ||
| 10 | + <feMerge> | ||
| 11 | + <feMergeNode in="shadowMatrixOuter1"></feMergeNode> | ||
| 12 | + <feMergeNode in="SourceGraphic"></feMergeNode> | ||
| 13 | + </feMerge> | ||
| 14 | + </filter> | ||
| 15 | + <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect> | ||
| 16 | + <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4"> | ||
| 17 | + <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> | ||
| 18 | + <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> | ||
| 19 | + <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> | ||
| 20 | + </filter> | ||
| 21 | + </defs> | ||
| 22 | + <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||
| 23 | + <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)"> | ||
| 24 | + <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)"> | ||
| 25 | + <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)"> | ||
| 26 | + <mask id="mask-3" fill="white"> | ||
| 27 | + <use xlink:href="#path-2"></use> | ||
| 28 | + </mask> | ||
| 29 | + <g id="Rectangle-18"> | ||
| 30 | + <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use> | ||
| 31 | + <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use> | ||
| 32 | + </g> | ||
| 33 | + <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect> | ||
| 34 | + <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect> | ||
| 35 | + </g> | ||
| 36 | + </g> | ||
| 37 | + </g> | ||
| 38 | + </g> | ||
| 39 | +</svg> |
ruoyi-ui/src/assets/images/light.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="UTF-8"?> | ||
| 2 | +<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" | ||
| 3 | + xmlns="http://www.w3.org/2000/svg" | ||
| 4 | + xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
| 5 | + <defs> | ||
| 6 | + <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1"> | ||
| 7 | + <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> | ||
| 8 | + <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> | ||
| 9 | + <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix> | ||
| 10 | + <feMerge> | ||
| 11 | + <feMergeNode in="shadowMatrixOuter1"></feMergeNode> | ||
| 12 | + <feMergeNode in="SourceGraphic"></feMergeNode> | ||
| 13 | + </feMerge> | ||
| 14 | + </filter> | ||
| 15 | + <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect> | ||
| 16 | + <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4"> | ||
| 17 | + <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> | ||
| 18 | + <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> | ||
| 19 | + <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> | ||
| 20 | + </filter> | ||
| 21 | + </defs> | ||
| 22 | + <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||
| 23 | + <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)"> | ||
| 24 | + <g id="Group-8" transform="translate(1167.000000, 0.000000)"> | ||
| 25 | + <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)"> | ||
| 26 | + <mask id="mask-3" fill="white"> | ||
| 27 | + <use xlink:href="#path-2"></use> | ||
| 28 | + </mask> | ||
| 29 | + <g id="Rectangle-18"> | ||
| 30 | + <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use> | ||
| 31 | + <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use> | ||
| 32 | + </g> | ||
| 33 | + <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect> | ||
| 34 | + <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect> | ||
| 35 | + </g> | ||
| 36 | + </g> | ||
| 37 | + </g> | ||
| 38 | + </g> | ||
| 39 | +</svg> |
509.1 KB
| @@ -8,6 +8,7 @@ | @@ -8,6 +8,7 @@ | ||
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | .sidebar-container { | 10 | .sidebar-container { |
| 11 | + -webkit-transition: width .28s; | ||
| 11 | transition: width 0.28s; | 12 | transition: width 0.28s; |
| 12 | width: $sideBarWidth !important; | 13 | width: $sideBarWidth !important; |
| 13 | background-color: $menuBg; | 14 | background-color: $menuBg; |
| @@ -19,6 +20,8 @@ | @@ -19,6 +20,8 @@ | ||
| 19 | left: 0; | 20 | left: 0; |
| 20 | z-index: 1001; | 21 | z-index: 1001; |
| 21 | overflow: hidden; | 22 | overflow: hidden; |
| 23 | + -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); | ||
| 24 | + box-shadow: 2px 0 6px rgba(0,21,41,.35); | ||
| 22 | 25 | ||
| 23 | // reset element-ui css | 26 | // reset element-ui css |
| 24 | .horizontal-collapse-transition { | 27 | .horizontal-collapse-transition { |
| @@ -73,21 +76,20 @@ | @@ -73,21 +76,20 @@ | ||
| 73 | .submenu-title-noDropdown, | 76 | .submenu-title-noDropdown, |
| 74 | .el-submenu__title { | 77 | .el-submenu__title { |
| 75 | &:hover { | 78 | &:hover { |
| 76 | - background-color: $menuHover !important; | 79 | + background-color: rgba(0, 0, 0, 0.06) !important; |
| 77 | } | 80 | } |
| 78 | } | 81 | } |
| 79 | 82 | ||
| 80 | - .is-active>.el-submenu__title { | 83 | + & .theme-dark .is-active > .el-submenu__title { |
| 81 | color: $subMenuActiveText !important; | 84 | color: $subMenuActiveText !important; |
| 82 | } | 85 | } |
| 83 | 86 | ||
| 84 | & .nest-menu .el-submenu>.el-submenu__title, | 87 | & .nest-menu .el-submenu>.el-submenu__title, |
| 85 | & .el-submenu .el-menu-item { | 88 | & .el-submenu .el-menu-item { |
| 86 | min-width: $sideBarWidth !important; | 89 | min-width: $sideBarWidth !important; |
| 87 | - background-color: $subMenuBg !important; | ||
| 88 | 90 | ||
| 89 | &:hover { | 91 | &:hover { |
| 90 | - background-color: $subMenuHover !important; | 92 | + background-color: rgba(0, 0, 0, 0.06) !important; |
| 91 | } | 93 | } |
| 92 | } | 94 | } |
| 93 | } | 95 | } |
| @@ -190,7 +192,7 @@ | @@ -190,7 +192,7 @@ | ||
| 190 | .el-menu-item { | 192 | .el-menu-item { |
| 191 | &:hover { | 193 | &:hover { |
| 192 | // you can use $subMenuHover | 194 | // you can use $subMenuHover |
| 193 | - background-color: $menuHover !important; | 195 | + background-color: rgba(0, 0, 0, 0.06) !important; |
| 194 | } | 196 | } |
| 195 | } | 197 | } |
| 196 | 198 |
| @@ -15,6 +15,11 @@ $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 | @@ -15,6 +15,11 @@ $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 | ||
| 15 | 15 | ||
| 16 | $menuBg:#304156; | 16 | $menuBg:#304156; |
| 17 | $menuHover:#263445; | 17 | $menuHover:#263445; |
| 18 | +$sidebarTitle: #ffffff; | ||
| 19 | + | ||
| 20 | +$menuLightBg:#ffffff; | ||
| 21 | +$menuLightHover:#f0f1f5; | ||
| 22 | +$sidebarLightTitle: #001529; | ||
| 18 | 23 | ||
| 19 | $subMenuBg:#1f2d3d; | 24 | $subMenuBg:#1f2d3d; |
| 20 | $subMenuHover:#001528; | 25 | $subMenuHover:#001528; |
| @@ -29,7 +34,11 @@ $sideBarWidth: 200px; | @@ -29,7 +34,11 @@ $sideBarWidth: 200px; | ||
| 29 | subMenuActiveText: $subMenuActiveText; | 34 | subMenuActiveText: $subMenuActiveText; |
| 30 | menuBg: $menuBg; | 35 | menuBg: $menuBg; |
| 31 | menuHover: $menuHover; | 36 | menuHover: $menuHover; |
| 37 | + menuLightBg: $menuLightBg; | ||
| 38 | + menuLightHover: $menuLightHover; | ||
| 32 | subMenuBg: $subMenuBg; | 39 | subMenuBg: $subMenuBg; |
| 33 | subMenuHover: $subMenuHover; | 40 | subMenuHover: $subMenuHover; |
| 34 | sideBarWidth: $sideBarWidth; | 41 | sideBarWidth: $sideBarWidth; |
| 42 | + sidebarTitle: $sidebarTitle; | ||
| 43 | + sidebarLightTitle: $sidebarLightTitle | ||
| 35 | } | 44 | } |
| 1 | <template> | 1 | <template> |
| 2 | <div class="drawer-container"> | 2 | <div class="drawer-container"> |
| 3 | <div> | 3 | <div> |
| 4 | - <h3 class="drawer-title">系统布局配置</h3> | 4 | + <div class="setting-drawer-content"> |
| 5 | + <div class="setting-drawer-title"> | ||
| 6 | + <h3 class="drawer-title">主题风格设置</h3> | ||
| 7 | + </div> | ||
| 8 | + <div class="setting-drawer-block-checbox"> | ||
| 9 | + <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')"> | ||
| 10 | + <img src="@/assets/images/dark.svg" alt="dark"> | ||
| 11 | + <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> | ||
| 12 | + <i aria-label="图标: check" class="anticon anticon-check"> | ||
| 13 | + <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" | ||
| 14 | + focusable="false" class=""> | ||
| 15 | + <path | ||
| 16 | + d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/> | ||
| 17 | + </svg> | ||
| 18 | + </i> | ||
| 19 | + </div> | ||
| 20 | + </div> | ||
| 21 | + <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')"> | ||
| 22 | + <img src="@/assets/images/light.svg" alt="light"> | ||
| 23 | + <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> | ||
| 24 | + <i aria-label="图标: check" class="anticon anticon-check"> | ||
| 25 | + <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" | ||
| 26 | + focusable="false" class=""> | ||
| 27 | + <path | ||
| 28 | + d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/> | ||
| 29 | + </svg> | ||
| 30 | + </i> | ||
| 31 | + </div> | ||
| 32 | + </div> | ||
| 33 | + </div> | ||
| 5 | 34 | ||
| 6 | - <div class="drawer-item"> | ||
| 7 | - <span>主题颜色</span> | ||
| 8 | - <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" /> | 35 | + <div class="drawer-item"> |
| 36 | + <span>主题颜色</span> | ||
| 37 | + <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" /> | ||
| 38 | + </div> | ||
| 9 | </div> | 39 | </div> |
| 10 | 40 | ||
| 41 | + <el-divider/> | ||
| 42 | + | ||
| 43 | + <h3 class="drawer-title">系统布局配置</h3> | ||
| 44 | + | ||
| 11 | <div class="drawer-item"> | 45 | <div class="drawer-item"> |
| 12 | <span>开启 Tags-Views</span> | 46 | <span>开启 Tags-Views</span> |
| 13 | <el-switch v-model="tagsView" class="drawer-switch" /> | 47 | <el-switch v-model="tagsView" class="drawer-switch" /> |
| @@ -36,6 +70,12 @@ export default { | @@ -36,6 +70,12 @@ export default { | ||
| 36 | return {} | 70 | return {} |
| 37 | }, | 71 | }, |
| 38 | computed: { | 72 | computed: { |
| 73 | + theme() { | ||
| 74 | + return this.$store.state.settings.theme | ||
| 75 | + }, | ||
| 76 | + sideTheme() { | ||
| 77 | + return this.$store.state.settings.sideTheme | ||
| 78 | + }, | ||
| 39 | fixedHeader: { | 79 | fixedHeader: { |
| 40 | get() { | 80 | get() { |
| 41 | return this.$store.state.settings.fixedHeader | 81 | return this.$store.state.settings.fixedHeader |
| @@ -76,33 +116,82 @@ export default { | @@ -76,33 +116,82 @@ export default { | ||
| 76 | key: 'theme', | 116 | key: 'theme', |
| 77 | value: val | 117 | value: val |
| 78 | }) | 118 | }) |
| 119 | + }, | ||
| 120 | + handleTheme(val) { | ||
| 121 | + this.$store.dispatch('settings/changeSetting', { | ||
| 122 | + key: 'sideTheme', | ||
| 123 | + value: val | ||
| 124 | + }) | ||
| 79 | } | 125 | } |
| 80 | } | 126 | } |
| 81 | } | 127 | } |
| 82 | </script> | 128 | </script> |
| 83 | 129 | ||
| 84 | <style lang="scss" scoped> | 130 | <style lang="scss" scoped> |
| 85 | -.drawer-container { | ||
| 86 | - padding: 24px; | ||
| 87 | - font-size: 14px; | ||
| 88 | - line-height: 1.5; | ||
| 89 | - word-wrap: break-word; | ||
| 90 | - | ||
| 91 | - .drawer-title { | ||
| 92 | - margin-bottom: 12px; | ||
| 93 | - color: rgba(0, 0, 0, .85); | ||
| 94 | - font-size: 14px; | ||
| 95 | - line-height: 22px; | 131 | + .setting-drawer-content { |
| 132 | + .setting-drawer-title { | ||
| 133 | + margin-bottom: 12px; | ||
| 134 | + color: rgba(0, 0, 0, .85); | ||
| 135 | + font-size: 14px; | ||
| 136 | + line-height: 22px; | ||
| 137 | + font-weight: bold; | ||
| 138 | + } | ||
| 139 | + | ||
| 140 | + .setting-drawer-block-checbox { | ||
| 141 | + display: flex; | ||
| 142 | + justify-content: flex-start; | ||
| 143 | + align-items: center; | ||
| 144 | + margin-top: 10px; | ||
| 145 | + margin-bottom: 20px; | ||
| 146 | + | ||
| 147 | + .setting-drawer-block-checbox-item { | ||
| 148 | + position: relative; | ||
| 149 | + margin-right: 16px; | ||
| 150 | + border-radius: 2px; | ||
| 151 | + cursor: pointer; | ||
| 152 | + | ||
| 153 | + img { | ||
| 154 | + width: 48px; | ||
| 155 | + height: 48px; | ||
| 156 | + } | ||
| 157 | + | ||
| 158 | + .setting-drawer-block-checbox-selectIcon { | ||
| 159 | + position: absolute; | ||
| 160 | + top: 0; | ||
| 161 | + right: 0; | ||
| 162 | + width: 100%; | ||
| 163 | + height: 100%; | ||
| 164 | + padding-top: 15px; | ||
| 165 | + padding-left: 24px; | ||
| 166 | + color: #1890ff; | ||
| 167 | + font-weight: 700; | ||
| 168 | + font-size: 14px; | ||
| 169 | + } | ||
| 170 | + } | ||
| 171 | + } | ||
| 96 | } | 172 | } |
| 97 | 173 | ||
| 98 | - .drawer-item { | ||
| 99 | - color: rgba(0, 0, 0, .65); | 174 | + .drawer-container { |
| 175 | + padding: 24px; | ||
| 100 | font-size: 14px; | 176 | font-size: 14px; |
| 101 | - padding: 12px 0; | ||
| 102 | - } | 177 | + line-height: 1.5; |
| 178 | + word-wrap: break-word; | ||
| 103 | 179 | ||
| 104 | - .drawer-switch { | ||
| 105 | - float: right | 180 | + .drawer-title { |
| 181 | + margin-bottom: 12px; | ||
| 182 | + color: rgba(0, 0, 0, .85); | ||
| 183 | + font-size: 14px; | ||
| 184 | + line-height: 22px; | ||
| 185 | + } | ||
| 186 | + | ||
| 187 | + .drawer-item { | ||
| 188 | + color: rgba(0, 0, 0, .65); | ||
| 189 | + font-size: 14px; | ||
| 190 | + padding: 12px 0; | ||
| 191 | + } | ||
| 192 | + | ||
| 193 | + .drawer-switch { | ||
| 194 | + float: right | ||
| 195 | + } | ||
| 106 | } | 196 | } |
| 107 | -} | ||
| 108 | </style> | 197 | </style> |
| 1 | <template> | 1 | <template> |
| 2 | - <div class="sidebar-logo-container" :class="{'collapse':collapse}"> | 2 | + <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> |
| 3 | <transition name="sidebarLogoFade"> | 3 | <transition name="sidebarLogoFade"> |
| 4 | <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> | 4 | <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> |
| 5 | <img v-if="logo" :src="logo" class="sidebar-logo"> | 5 | <img v-if="logo" :src="logo" class="sidebar-logo"> |
| 6 | - <h1 v-else class="sidebar-title">{{ title }} </h1> | 6 | + <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> |
| 7 | </router-link> | 7 | </router-link> |
| 8 | <router-link v-else key="expand" class="sidebar-logo-link" to="/"> | 8 | <router-link v-else key="expand" class="sidebar-logo-link" to="/"> |
| 9 | <img v-if="logo" :src="logo" class="sidebar-logo"> | 9 | <img v-if="logo" :src="logo" class="sidebar-logo"> |
| 10 | - <h1 class="sidebar-title">{{ title }} </h1> | 10 | + <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> |
| 11 | </router-link> | 11 | </router-link> |
| 12 | </transition> | 12 | </transition> |
| 13 | </div> | 13 | </div> |
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | 15 | ||
| 16 | <script> | 16 | <script> |
| 17 | import logoImg from '@/assets/logo/logo.png' | 17 | import logoImg from '@/assets/logo/logo.png' |
| 18 | +import variables from '@/assets/styles/variables.scss' | ||
| 18 | 19 | ||
| 19 | export default { | 20 | export default { |
| 20 | name: 'SidebarLogo', | 21 | name: 'SidebarLogo', |
| @@ -24,6 +25,14 @@ export default { | @@ -24,6 +25,14 @@ export default { | ||
| 24 | required: true | 25 | required: true |
| 25 | } | 26 | } |
| 26 | }, | 27 | }, |
| 28 | + computed: { | ||
| 29 | + variables() { | ||
| 30 | + return variables; | ||
| 31 | + }, | ||
| 32 | + sideTheme() { | ||
| 33 | + return this.$store.state.settings.sideTheme | ||
| 34 | + } | ||
| 35 | + }, | ||
| 27 | data() { | 36 | data() { |
| 28 | return { | 37 | return { |
| 29 | title: '若依管理系统', | 38 | title: '若依管理系统', |
| @@ -56,6 +56,9 @@ export default { | @@ -56,6 +56,9 @@ export default { | ||
| 56 | }, | 56 | }, |
| 57 | methods: { | 57 | methods: { |
| 58 | hasOneShowingChild(children = [], parent) { | 58 | hasOneShowingChild(children = [], parent) { |
| 59 | + if (!children) { | ||
| 60 | + children = []; | ||
| 61 | + } | ||
| 59 | const showingChildren = children.filter(item => { | 62 | const showingChildren = children.filter(item => { |
| 60 | if (item.hidden) { | 63 | if (item.hidden) { |
| 61 | return false | 64 | return false |
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="{'has-logo':showLogo}"> | 2 | + <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> |
| 3 | <logo v-if="showLogo" :collapse="isCollapse" /> | 3 | <logo v-if="showLogo" :collapse="isCollapse" /> |
| 4 | - <el-scrollbar wrap-class="scrollbar-wrapper"> | 4 | + <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> |
| 5 | <el-menu | 5 | <el-menu |
| 6 | :default-active="activeMenu" | 6 | :default-active="activeMenu" |
| 7 | :collapse="isCollapse" | 7 | :collapse="isCollapse" |
| 8 | - :background-color="variables.menuBg" | ||
| 9 | - :text-color="variables.menuText" | 8 | + :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg" |
| 9 | + :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'" | ||
| 10 | :unique-opened="true" | 10 | :unique-opened="true" |
| 11 | :active-text-color="settings.theme" | 11 | :active-text-color="settings.theme" |
| 12 | :collapse-transition="false" | 12 | :collapse-transition="false" |
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="classObj" class="app-wrapper"> | ||
| 3 | - <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> | ||
| 4 | - <sidebar class="sidebar-container" /> | 2 | + <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
| 3 | + <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> | ||
| 4 | + <sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" /> | ||
| 5 | <div :class="{hasTagsView:needTagsView}" class="main-container"> | 5 | <div :class="{hasTagsView:needTagsView}" class="main-container"> |
| 6 | <div :class="{'fixed-header':fixedHeader}"> | 6 | <div :class="{'fixed-header':fixedHeader}"> |
| 7 | <navbar /> | 7 | <navbar /> |
| @@ -20,6 +20,7 @@ import RightPanel from '@/components/RightPanel' | @@ -20,6 +20,7 @@ import RightPanel from '@/components/RightPanel' | ||
| 20 | import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' | 20 | import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' |
| 21 | import ResizeMixin from './mixin/ResizeHandler' | 21 | import ResizeMixin from './mixin/ResizeHandler' |
| 22 | import { mapState } from 'vuex' | 22 | import { mapState } from 'vuex' |
| 23 | +import variables from '@/assets/styles/variables.scss' | ||
| 23 | 24 | ||
| 24 | export default { | 25 | export default { |
| 25 | name: 'Layout', | 26 | name: 'Layout', |
| @@ -34,6 +35,8 @@ export default { | @@ -34,6 +35,8 @@ export default { | ||
| 34 | mixins: [ResizeMixin], | 35 | mixins: [ResizeMixin], |
| 35 | computed: { | 36 | computed: { |
| 36 | ...mapState({ | 37 | ...mapState({ |
| 38 | + theme: state => state.settings.theme, | ||
| 39 | + sideTheme: state => state.settings.sideTheme, | ||
| 37 | sidebar: state => state.app.sidebar, | 40 | sidebar: state => state.app.sidebar, |
| 38 | device: state => state.app.device, | 41 | device: state => state.app.device, |
| 39 | showSettings: state => state.settings.showSettings, | 42 | showSettings: state => state.settings.showSettings, |
| @@ -47,6 +50,9 @@ export default { | @@ -47,6 +50,9 @@ export default { | ||
| 47 | withoutAnimation: this.sidebar.withoutAnimation, | 50 | withoutAnimation: this.sidebar.withoutAnimation, |
| 48 | mobile: this.device === 'mobile' | 51 | mobile: this.device === 'mobile' |
| 49 | } | 52 | } |
| 53 | + }, | ||
| 54 | + variables() { | ||
| 55 | + return variables; | ||
| 50 | } | 56 | } |
| 51 | }, | 57 | }, |
| 52 | methods: { | 58 | methods: { |
| @@ -2,6 +2,11 @@ module.exports = { | @@ -2,6 +2,11 @@ module.exports = { | ||
| 2 | title: '若依管理系统', | 2 | title: '若依管理系统', |
| 3 | 3 | ||
| 4 | /** | 4 | /** |
| 5 | + * 侧边栏主题 深色主题theme-dark,浅色主题theme-light | ||
| 6 | + */ | ||
| 7 | + sideTheme: 'theme-dark', | ||
| 8 | + | ||
| 9 | + /** | ||
| 5 | * 是否系统布局配置 | 10 | * 是否系统布局配置 |
| 6 | */ | 11 | */ |
| 7 | showSettings: false, | 12 | showSettings: false, |
| 1 | import variables from '@/assets/styles/element-variables.scss' | 1 | import variables from '@/assets/styles/element-variables.scss' |
| 2 | import defaultSettings from '@/settings' | 2 | import defaultSettings from '@/settings' |
| 3 | 3 | ||
| 4 | -const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings | 4 | +const { sideTheme, showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings |
| 5 | 5 | ||
| 6 | const state = { | 6 | const state = { |
| 7 | theme: variables.theme, | 7 | theme: variables.theme, |
| 8 | + sideTheme: sideTheme, | ||
| 8 | showSettings: showSettings, | 9 | showSettings: showSettings, |
| 9 | tagsView: tagsView, | 10 | tagsView: tagsView, |
| 10 | fixedHeader: fixedHeader, | 11 | fixedHeader: fixedHeader, |
| @@ -51,7 +51,7 @@ const user = { | @@ -51,7 +51,7 @@ const user = { | ||
| 51 | return new Promise((resolve, reject) => { | 51 | return new Promise((resolve, reject) => { |
| 52 | getInfo(state.token).then(res => { | 52 | getInfo(state.token).then(res => { |
| 53 | const user = res.user | 53 | const user = res.user |
| 54 | - const avatar = user.avatar == "" ? require("@/assets/image/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar; | 54 | + const avatar = user.avatar == "" ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar; |
| 55 | if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组 | 55 | if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组 |
| 56 | commit('SET_ROLES', res.roles) | 56 | commit('SET_ROLES', res.roles) |
| 57 | commit('SET_PERMISSIONS', res.permissions) | 57 | commit('SET_PERMISSIONS', res.permissions) |
| @@ -148,7 +148,7 @@ export default { | @@ -148,7 +148,7 @@ export default { | ||
| 148 | justify-content: center; | 148 | justify-content: center; |
| 149 | align-items: center; | 149 | align-items: center; |
| 150 | height: 100%; | 150 | height: 100%; |
| 151 | - background-image: url("../assets/image/login-background.jpg"); | 151 | + background-image: url("../assets/images/login-background.jpg"); |
| 152 | background-size: cover; | 152 | background-size: cover; |
| 153 | } | 153 | } |
| 154 | .title { | 154 | .title { |
-
请 注册 或 登录 后发表评论