| 提交 | 用户 | 时间 | ||
| 363457 | 1 | <template> |
| A | 2 | <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false"> |
| 3 | <div class="drawer-container"> | |
| 4 | <div> | |
| 5 | <div class="setting-drawer-content"> | |
| 6 | <div class="setting-drawer-title"> | |
| 7 | <h3 class="drawer-title">主题风格设置</h3> | |
| 8 | </div> | |
| 9 | <div class="setting-drawer-block-checbox"> | |
| 10 | <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')"> | |
| 11 | <img src="@/assets/images/dark.svg" alt="dark"> | |
| 12 | <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> | |
| 13 | <i aria-label="图标: check" class="anticon anticon-check"> | |
| 14 | <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class=""> | |
| 15 | <path 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"/> | |
| 16 | </svg> | |
| 17 | </i> | |
| 18 | </div> | |
| 19 | </div> | |
| 20 | <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')"> | |
| 21 | <img src="@/assets/images/light.svg" alt="light"> | |
| 22 | <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"> | |
| 23 | <i aria-label="图标: check" class="anticon anticon-check"> | |
| 24 | <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class=""> | |
| 25 | <path 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"/> | |
| 26 | </svg> | |
| 27 | </i> | |
| 28 | </div> | |
| 29 | </div> | |
| 30 | </div> | |
| 31 | ||
| 32 | <div class="drawer-item"> | |
| 33 | <span>主题颜色</span> | |
| 34 | <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" /> | |
| 35 | </div> | |
| 36 | </div> | |
| 37 | ||
| 38 | <el-divider/> | |
| 39 | ||
| 40 | <h3 class="drawer-title">系统布局配置</h3> | |
| 41 | ||
| 42 | <div class="drawer-item"> | |
| 43 | <span>开启 TopNav</span> | |
| 44 | <el-switch v-model="topNav" class="drawer-switch" /> | |
| 45 | </div> | |
| 46 | ||
| 47 | <div class="drawer-item"> | |
| 48 | <span>开启 Tags-Views</span> | |
| 49 | <el-switch v-model="tagsView" class="drawer-switch" /> | |
| 50 | </div> | |
| 51 | ||
| 52 | <div class="drawer-item"> | |
| 53 | <span>固定 Header</span> | |
| 54 | <el-switch v-model="fixedHeader" class="drawer-switch" /> | |
| 55 | </div> | |
| 56 | ||
| 57 | <div class="drawer-item"> | |
| 58 | <span>显示 Logo</span> | |
| 59 | <el-switch v-model="sidebarLogo" class="drawer-switch" /> | |
| 60 | </div> | |
| 61 | ||
| 62 | <div class="drawer-item"> | |
| 63 | <span>动态标题</span> | |
| 64 | <el-switch v-model="dynamicTitle" class="drawer-switch" /> | |
| 65 | </div> | |
| 66 | ||
| 67 | <el-divider/> | |
| 68 | ||
| 69 | <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button> | |
| 70 | <el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button> | |
| 71 | </div> | |
| 72 | </div> | |
| 73 | </el-drawer> | |
| 74 | </template> | |
| 75 | ||
| 76 | <script> | |
| 77 | import ThemePicker from '@/components/ThemePicker' | |
| 78 | ||
| 79 | export default { | |
| 80 | components: { ThemePicker }, | |
| 81 | data() { | |
| 82 | return { | |
| 83 | theme: this.$store.state.settings.theme, | |
| 84 | sideTheme: this.$store.state.settings.sideTheme | |
| 85 | }; | |
| 86 | }, | |
| 87 | computed: { | |
| 88 | visible: { | |
| 89 | get() { | |
| 90 | return this.$store.state.settings.showSettings | |
| 91 | } | |
| 92 | }, | |
| 93 | fixedHeader: { | |
| 94 | get() { | |
| 95 | return this.$store.state.settings.fixedHeader | |
| 96 | }, | |
| 97 | set(val) { | |
| 98 | this.$store.dispatch('settings/changeSetting', { | |
| 99 | key: 'fixedHeader', | |
| 100 | value: val | |
| 101 | }) | |
| 102 | } | |
| 103 | }, | |
| 104 | topNav: { | |
| 105 | get() { | |
| 106 | return this.$store.state.settings.topNav | |
| 107 | }, | |
| 108 | set(val) { | |
| 109 | this.$store.dispatch('settings/changeSetting', { | |
| 110 | key: 'topNav', | |
| 111 | value: val | |
| 112 | }) | |
| 113 | if (!val) { | |
| 114 | this.$store.dispatch('app/toggleSideBarHide', false); | |
| 115 | this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes); | |
| 116 | } | |
| 117 | } | |
| 118 | }, | |
| 119 | tagsView: { | |
| 120 | get() { | |
| 121 | return this.$store.state.settings.tagsView | |
| 122 | }, | |
| 123 | set(val) { | |
| 124 | this.$store.dispatch('settings/changeSetting', { | |
| 125 | key: 'tagsView', | |
| 126 | value: val | |
| 127 | }) | |
| 128 | } | |
| 129 | }, | |
| 130 | sidebarLogo: { | |
| 131 | get() { | |
| 132 | return this.$store.state.settings.sidebarLogo | |
| 133 | }, | |
| 134 | set(val) { | |
| 135 | this.$store.dispatch('settings/changeSetting', { | |
| 136 | key: 'sidebarLogo', | |
| 137 | value: val | |
| 138 | }) | |
| 139 | } | |
| 140 | }, | |
| 141 | dynamicTitle: { | |
| 142 | get() { | |
| 143 | return this.$store.state.settings.dynamicTitle | |
| 144 | }, | |
| 145 | set(val) { | |
| 146 | this.$store.dispatch('settings/changeSetting', { | |
| 147 | key: 'dynamicTitle', | |
| 148 | value: val | |
| 149 | }) | |
| 150 | } | |
| 151 | }, | |
| 152 | }, | |
| 153 | methods: { | |
| 154 | themeChange(val) { | |
| 155 | this.$store.dispatch('settings/changeSetting', { | |
| 156 | key: 'theme', | |
| 157 | value: val | |
| 158 | }) | |
| 159 | this.theme = val; | |
| 160 | }, | |
| 161 | handleTheme(val) { | |
| 162 | this.$store.dispatch('settings/changeSetting', { | |
| 163 | key: 'sideTheme', | |
| 164 | value: val | |
| 165 | }) | |
| 166 | this.sideTheme = val; | |
| 167 | }, | |
| 168 | saveSetting() { | |
| 169 | this.$modal.loading("正在保存到本地，请稍候..."); | |
| 170 | this.$cache.local.set( | |
| 171 | "layout-setting", | |
| 172 | `{ | |
| 173 | "topNav":${this.topNav}, | |
| 174 | "tagsView":${this.tagsView}, | |
| 175 | "fixedHeader":${this.fixedHeader}, | |
| 176 | "sidebarLogo":${this.sidebarLogo}, | |
| 177 | "dynamicTitle":${this.dynamicTitle}, | |
| 178 | "sideTheme":"${this.sideTheme}", | |
| 179 | "theme":"${this.theme}" | |
| 180 | }` | |
| 181 | ); | |
| 182 | setTimeout(this.$modal.closeLoading(), 1000) | |
| 183 | }, | |
| 184 | resetSetting() { | |
| 185 | this.$modal.loading("正在清除设置缓存并刷新，请稍候..."); | |
| 186 | this.$cache.local.remove("layout-setting") | |
| 187 | setTimeout("window.location.reload()", 1000) | |
| 188 | } | |
| 189 | } | |
| 190 | } | |
| 191 | </script> | |
| 192 | ||
| 193 | <style lang="scss" scoped> | |
| 194 | .setting-drawer-content { | |
| 195 | .setting-drawer-title { | |
| 196 | margin-bottom: 12px; | |
| 197 | color: rgba(0, 0, 0, .85); | |
| 198 | font-size: 14px; | |
| 199 | line-height: 22px; | |
| 200 | font-weight: bold; | |
| 201 | } | |
| 202 | ||
| 203 | .setting-drawer-block-checbox { | |
| 204 | display: flex; | |
| 205 | justify-content: flex-start; | |
| 206 | align-items: center; | |
| 207 | margin-top: 10px; | |
| 208 | margin-bottom: 20px; | |
| 209 | ||
| 210 | .setting-drawer-block-checbox-item { | |
| 211 | position: relative; | |
| 212 | margin-right: 16px; | |
| 213 | border-radius: 2px; | |
| 214 | cursor: pointer; | |
| 215 | ||
| 216 | img { | |
| 217 | width: 48px; | |
| 218 | height: 48px; | |
| 219 | } | |
| 220 | ||
| 221 | .setting-drawer-block-checbox-selectIcon { | |
| 222 | position: absolute; | |
| 223 | top: 0; | |
| 224 | right: 0; | |
| 225 | width: 100%; | |
| 226 | height: 100%; | |
| 227 | padding-top: 15px; | |
| 228 | padding-left: 24px; | |
| 229 | color: #1890ff; | |
| 230 | font-weight: 700; | |
| 231 | font-size: 14px; | |
| 232 | } | |
| 233 | } | |
| 234 | } | |
| 235 | } | |
| 236 | ||
| 237 | .drawer-container { | |
| 238 | padding: 20px; | |
| 239 | font-size: 14px; | |
| 240 | line-height: 1.5; | |
| 241 | word-wrap: break-word; | |
| 242 | ||
| 243 | .drawer-title { | |
| 244 | margin-bottom: 12px; | |
| 245 | color: rgba(0, 0, 0, .85); | |
| 246 | font-size: 14px; | |
| 247 | line-height: 22px; | |
| 248 | } | |
| 249 | ||
| 250 | .drawer-item { | |
| 251 | color: rgba(0, 0, 0, .65); | |
| 252 | font-size: 14px; | |
| 253 | padding: 12px 0; | |
| 254 | } | |
| 255 | ||
| 256 | .drawer-switch { | |
| 257 | float: right | |
| 258 | } | |
| 259 | } | |
| 260 | </style> | |
