forked from liweijie/education
1 line
9.8 KiB
JSON
1 line
9.8 KiB
JSON
{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\Settings.vue?vue&type=style&index=0&id=963be860&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\Settings.vue","mtime":1787323035069},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\css-loader\\dist\\cjs.js","mtime":1787309792478},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1787309794547},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\postcss-loader\\src\\index.js","mtime":1787309793084},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgouc2V0dGluZy1kcmF3ZXItaW5kZXggewogIHBhZGRpbmc6IDAgMjBweDsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwoKICAmX190aXRsZSB7CiAgICBtYXJnaW4tdG9wOiAyNnB4OwogICAgbWFyZ2luLWJvdHRvbTogMTJweDsKICAgIGZvbnQtd2VpZ2h0OiA3MDA7CiAgICBjb2xvcjogIzMzMzsKICB9CgogICZfX21haW4tY29sb3IgewogICAgYm9yZGVyLXJhZGl1czogNHB4OwogIH0KCiAgLnRoZW1lLWNvbG9yIHsKICAgIC51bC1jb2xvciB7CiAgICAgIG1hcmdpbjogMDsKICAgICAgcGFkZGluZzogMDsKCiAgICAgIC5saS10aGVtZSB7CiAgICAgICAgbGlzdC1zdHlsZTogbm9uZTsKICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgaGVpZ2h0OiAzMHB4OwogICAgICAgIG1hcmdpbi1yaWdodDogNnB4OwogICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsKICAgICAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7CgogICAgICAgICYuYWN0aXZlIHsKICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDJweCAjZmZmLCAwIDAgMCA0cHggY3VycmVudENvbG9yOwogICAgICAgIH0KCiAgICAgICAgLmljb24tY2hlY2sgewogICAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgICAgICBmb250LXNpemU6IDE0cHg7CiAgICAgICAgICBsaW5lLWhlaWdodDogMzBweDsKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9CgogIC5zZXR0aW5nLWl0ZW0gewogICAgZGlzcGxheTogZmxleDsKICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICBwYWRkaW5nOiAxMHB4IDA7CiAgICBmb250LXNpemU6IDE0cHg7CiAgICBjb2xvcjogIzYwNjI2NjsKCiAgICAmX192YWx1ZSB7CiAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4OwogICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgICBnYXA6IDRweDsKICAgICAgcGFkZGluZzogMCAxMnB4OwogICAgICBoZWlnaHQ6IDMwcHg7CiAgICAgIGxpbmUtaGVpZ2h0OiAzMHB4OwogICAgICBib3JkZXItcmFkaXVzOiA0cHg7CiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkY2RmZTY7CiAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgZm9udC1zaXplOiAxM3B4OwogICAgfQogIH0KfQo="},{"version":3,"sources":["Settings.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Settings.vue","sourceRoot":"src/layout/components","sourcesContent":["<template>\n <el-drawer\n :visible.sync=\"visible\"\n direction=\"rtl\"\n size=\"280px\"\n :title=\"'布局设置'\"\n class=\"drawer-setting\"\n :with-header=\"false\"\n :modal-append-to-body=\"false\"\n >\n <div class=\"setting-drawer-index\">\n <div class=\"setting-drawer-index__title\">主题色</div>\n <div class=\"setting-drawer-index__main-color theme-color\">\n <ul class=\"ul-color\">\n <li\n v-for=\"item in colorList\"\n :key=\"item.color\"\n class=\"li-theme\"\n :class=\"{ active: item.color === theme }\"\n :style=\"{ background: item.color }\"\n @click=\"changeTheme(item.color)\"\n >\n <i v-show=\"item.color === theme\" class=\"icon-check el-icon-check\" />\n </li>\n </ul>\n </div>\n\n <div class=\"setting-drawer-index__title\">界面功能</div>\n <div class=\"setting-item\">\n <span class=\"setting-item__label\">侧边栏颜色</span>\n <el-dropdown trigger=\"click\" @command=\"handleSideTheme\">\n <span class=\"setting-item__value\">\n {{ sideThemeLabel }}\n <i class=\"el-icon-arrow-down\" />\n </span>\n <el-dropdown-menu slot=\"dropdown\">\n <el-dropdown-item command=\"theme-dark\">深色主题</el-dropdown-item>\n <el-dropdown-item command=\"theme-light\">浅色主题</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </div>\n\n <div class=\"setting-item\">\n <span class=\"setting-item__label\">导航栏模式</span>\n <el-dropdown trigger=\"click\" @command=\"handleNavType\">\n <span class=\"setting-item__value\">\n {{ navTypeLabel }}\n <i class=\"el-icon-arrow-down\" />\n </span>\n <el-dropdown-menu slot=\"dropdown\">\n <el-dropdown-item command=\"1\">侧边栏模式</el-dropdown-item>\n <el-dropdown-item command=\"2\">顶部导航模式</el-dropdown-item>\n <el-dropdown-item command=\"3\">侧栏+顶栏</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </div>\n\n <div class=\"setting-item\">\n <span class=\"setting-item__label\"> TagsView 标签栏</span>\n <el-switch\n :value=\"tagsView\"\n @change=\"changeSetting({ key: 'tagsView', value: !tagsView })\"\n />\n </div>\n\n <div class=\"setting-item\">\n <span class=\"setting-item__label\"> 侧边栏 Logo</span>\n <el-switch\n :value=\"sidebarLogo\"\n @change=\"changeSetting({ key: 'sidebarLogo', value: !sidebarLogo })\"\n />\n </div>\n\n <div class=\"setting-item\">\n <span class=\"setting-item__label\"> 固定 Header</span>\n <el-switch\n :value=\"fixedHeader\"\n @change=\"changeSetting({ key: 'fixedHeader', value: !fixedHeader })\"\n />\n </div>\n </div>\n </el-drawer>\n</template>\n\n<script>\nimport { mapState } from 'vuex'\n\nexport default {\n name: 'Settings',\n data() {\n return {\n visible: false,\n /**\n * 主题色列表\n */\n colorList: [\n { color: '#00875A', title: '教育绿' },\n { color: '#304156', title: '深蓝' },\n { color: '#409EFF', title: '亮蓝' },\n { color: '#626AEF', title: '亮紫' },\n { color: '#EB2F96', title: '粉红' },\n { color: '#F8721F', title: '橙色' },\n { color: '#CD201F', title: '红色' }\n ]\n }\n },\n computed: {\n ...mapState({\n theme: state => state.settings.theme,\n sideTheme: state => state.settings.sideTheme,\n navType: state => state.settings.navType,\n tagsView: state => state.settings.tagsView,\n sidebarLogo: state => state.settings.sidebarLogo,\n fixedHeader: state => state.settings.fixedHeader\n }),\n sideThemeLabel() {\n return this.sideTheme === 'theme-dark' ? '深色主题' : '浅色主题'\n },\n navTypeLabel() {\n const map = { 1: '侧边栏模式', 2: '顶部导航模式', 3: '侧栏+顶栏' }\n return map[this.navType] || '侧边栏模式'\n }\n },\n methods: {\n openSetting() {\n this.visible = true\n },\n closeSetting() {\n this.visible = false\n },\n // 修改主题色\n changeTheme(color) {\n this.$store.dispatch('settings/changeSetting', { key: 'theme', value: color })\n },\n handleSideTheme(command) {\n this.changeSetting({ key: 'sideTheme', value: command })\n },\n handleNavType(command) {\n this.changeSetting({ key: 'navType', value: Number(command) })\n },\n // 修改布局设置,并持久化到本地存储\n changeSetting(data) {\n this.$store.dispatch('settings/changeSetting', data)\n const setting = JSON.parse(localStorage.getItem('layout-setting') || '{}')\n setting[data.key] = data.value\n localStorage.setItem('layout-setting', JSON.stringify(setting))\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.setting-drawer-index {\n padding: 0 20px;\n box-sizing: border-box;\n\n &__title {\n margin-top: 26px;\n margin-bottom: 12px;\n font-weight: 700;\n color: #333;\n }\n\n &__main-color {\n border-radius: 4px;\n }\n\n .theme-color {\n .ul-color {\n margin: 0;\n padding: 0;\n\n .li-theme {\n list-style: none;\n display: inline-block;\n width: 30px;\n height: 30px;\n margin-right: 6px;\n border-radius: 50%;\n cursor: pointer;\n text-align: center;\n vertical-align: middle;\n\n &.active {\n box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;\n }\n\n .icon-check {\n color: #fff;\n font-size: 14px;\n line-height: 30px;\n }\n }\n }\n }\n\n .setting-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 0;\n font-size: 14px;\n color: #606266;\n\n &__value {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 0 12px;\n height: 30px;\n line-height: 30px;\n border-radius: 4px;\n border: 1px solid #dcdfe6;\n cursor: pointer;\n font-size: 13px;\n }\n }\n}\n</style>"]}]} |