| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\layout\\navBars\\breadcrumb\\setings.vue?vue&type=style&index=0&id=b4d002a2&lang=css","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\layout\\navBars\\breadcrumb\\setings.vue","mtime":1761185180054},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQpib2R5IC52LW1vZGFsIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjEpOw0KfQ0K"},{"version":3,"sources":["setings.vue"],"names":[],"mappings":";AA6iBA;AACA;AACA","file":"setings.vue","sourceRoot":"src/layout/navBars/breadcrumb","sourcesContent":["<template>\r\n <div class=\"layout-breadcrumb-seting\">\r\n <el-drawer\r\n title=\"主题编辑\"\r\n :visible.sync=\"getThemeConfig.isDrawer\"\r\n direction=\"rtl\"\r\n destroy-on-close\r\n size=\"320px\"\r\n @close=\"onDrawerClose\"\r\n >\r\n <el-scrollbar class=\"layout-breadcrumb-seting-bar el-main\">\r\n <!-- 布局切换 -->\r\n <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.sixTitle') }}</el-divider>\r\n <div class=\"layout-drawer-content-flex\">\r\n <!-- defaults 布局 -->\r\n <div\r\n class=\"layout-drawer-content-item\"\r\n :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }\"\r\n @click=\"onSetLayout('defaults')\"\r\n >\r\n <section class=\"el-container el-circular\">\r\n <aside class=\"el-aside w10 mr5\" style=\"width: 17px\"></aside>\r\n <section class=\"el-container is-vertical\">\r\n <header class=\"el-header mb5\" style=\"height: 10px\"></header>\r\n <main class=\"el-main\"></main>\r\n </section>\r\n </section>\r\n </div>\r\n\r\n <!-- columns 布局 -->\r\n <div\r\n class=\"layout-drawer-content-item\"\r\n :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }\"\r\n @click=\"onSetLayout('columns')\"\r\n >\r\n <section class=\"el-container el-circular\">\r\n <aside class=\"el-aside mr5\" style=\"width: 10px\"></aside>\r\n <aside class=\"el-aside-dark mr5\" style=\"width: 17px\"></aside>\r\n <section class=\"el-container is-vertical\">\r\n <header class=\"el-header mb5\" style=\"height: 10px\"></header>\r\n <main class=\"el-main\"></main>\r\n </section>\r\n </section>\r\n </div>\r\n <!-- classic 布局 -->\r\n <div\r\n class=\"layout-drawer-content-item\"\r\n :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }\"\r\n @click=\"onSetLayout('classic')\"\r\n >\r\n <section class=\"el-container is-vertical el-circular\">\r\n <header class=\"el-aside mb5\" style=\"height: 10px\"></header>\r\n <section class=\"el-container\">\r\n <aside class=\"el-aside-dark mr5\" style=\"width: 17px\"></aside>\r\n <section class=\"el-container is-vertical\">\r\n <main class=\"el-main\"></main>\r\n </section>\r\n </section>\r\n </section>\r\n </div>\r\n\r\n <!-- transverse 布局 -->\r\n <div\r\n class=\"layout-drawer-content-item\"\r\n :class=\"{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }\"\r\n @click=\"onSetLayout('transverse')\"\r\n >\r\n <section class=\"el-container is-vertical el-circular\">\r\n <header class=\"el-aside mb5\" style=\"height: 10px\"></header>\r\n <section class=\"el-container\">\r\n <section class=\"el-container is-vertical\">\r\n <main class=\"el-main\"></main>\r\n </section>\r\n </section>\r\n </section>\r\n </div>\r\n </div>\r\n <!-- 界面设置 -->\r\n <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.threeTitle') }}</el-divider>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mb10\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.themeStyle') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-select\r\n v-model=\"getThemeConfig.themeStyle\"\r\n placeholder=\"请选择\"\r\n size=\"mini\"\r\n style=\"width: 90px\"\r\n @change=\"setLocalTheme\"\r\n >\r\n <el-option label=\"蓝黑\" value=\"theme-1\"></el-option>\r\n <el-option label=\"蓝白\" value=\"theme-2\"></el-option>\r\n <el-option label=\"绿黑\" value=\"theme-3\"></el-option>\r\n <el-option label=\"绿白\" value=\"theme-4\"></el-option>\r\n <el-option label=\"紫黑\" value=\"theme-5\"></el-option>\r\n <el-option label=\"紫白\" value=\"theme-6\"></el-option>\r\n <el-option label=\"红黑\" value=\"theme-7\"></el-option>\r\n <el-option label=\"红白\" value=\"theme-8\"></el-option>\r\n <el-option label=\"渐变\" value=\"theme-9\" v-if=\"getThemeConfig.layout === 'columns'\"></el-option>\r\n </el-select>\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"layout-breadcrumb-seting-bar-flex\"\r\n v-if=\"getThemeConfig.layout === 'columns' || getThemeConfig.layout === 'defaults'\"\r\n >\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.threeIsCollapse') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isCollapse\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.threeIsUniqueOpened') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isUniqueOpened\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.threeIsFixedHeader') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isFixedHeader\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n </div>\r\n </div>\r\n\r\n <!-- 界面显示 -->\r\n <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.fourTitle') }}</el-divider>\r\n <div class=\"layout-breadcrumb-seting-bar-flex\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsShowLogo') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isShowLogo\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n </div>\r\n </div>\r\n <div\r\n class=\"layout-breadcrumb-seting-bar-flex mt15\"\r\n :style=\"{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }\"\r\n >\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsBreadcrumb') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch\r\n v-model=\"getThemeConfig.isBreadcrumb\"\r\n :disabled=\"getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse'\"\r\n :width=\"35\"\r\n @change=\"setLocalThemeConfig\"\r\n >\r\n </el-switch>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsBreadcrumbIcon') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isBreadcrumbIcon\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsTagsview') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isTagsview\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsFooter') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isFooter\" :width=\"35\" @change=\"setLocalThemeConfig\"> </el-switch>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsGrayscale') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isGrayscale\" :width=\"35\" @change=\"onAddFilterChange('grayscale')\">\r\n </el-switch>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsInvert') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isInvert\" :width=\"35\" @change=\"onAddFilterChange('invert')\"> </el-switch>\r\n </div>\r\n </div>\r\n <!-- 暗黑模式 -->\r\n <!-- <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fourIsDark') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-switch v-model=\"getThemeConfig.isIsDark\" :width=\"35\" @change=\"onAddDarkChange\"> </el-switch>\r\n </div>\r\n </div> -->\r\n <!-- 其它设置 -->\r\n <el-divider :content-position=\"contentPosotion\">{{ $t('message.layout.fiveTitle') }}</el-divider>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveTagsStyle') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-radio-group\r\n v-model=\"getThemeConfig.tagsStyle\"\r\n :disabled=\"!getThemeConfig.isTagsview\"\r\n size=\"mini\"\r\n @change=\"setLocalThemeConfig\"\r\n >\r\n <el-radio-button label=\"tags-style-one\">卡片</el-radio-button>\r\n <el-radio-button label=\"tags-style-four\">灵动</el-radio-button>\r\n <el-radio-button label=\"tags-style-five\">圆滑</el-radio-button>\r\n </el-radio-group>\r\n </div>\r\n </div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex mt15\">\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveAnimation') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-radio-group v-model=\"getThemeConfig.animation\" size=\"mini\" @input=\"setLocalThemeConfig\">\r\n <el-radio-button label=\"slide-left\">左滑</el-radio-button>\r\n <el-radio-button label=\"opacitys\">透明</el-radio-button>\r\n <el-radio-button label=\"slide-right\">右滑</el-radio-button>\r\n <el-radio-button label=\"no-transition\">无</el-radio-button>\r\n </el-radio-group>\r\n </div>\r\n </div>\r\n <div\r\n class=\"layout-breadcrumb-seting-bar-flex mt15\"\r\n :class=\"{ mb28: getThemeConfig.layout !== 'columns' && getThemeConfig.layout !== 'classic' }\"\r\n >\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-radio-group v-model=\"getThemeConfig.columnsAsideStyle\" size=\"mini\" @input=\"setLocalThemeConfig\">\r\n <el-radio-button label=\"columns-round\">圆角</el-radio-button>\r\n <el-radio-button label=\"columns-card\">卡片</el-radio-button>\r\n </el-radio-group>\r\n </div>\r\n </div>\r\n <div\r\n class=\"layout-breadcrumb-seting-bar-flex mt15 mb28\"\r\n v-if=\"getThemeConfig.layout === 'columns' || getThemeConfig.layout === 'classic'\"\r\n >\r\n <div class=\"layout-breadcrumb-seting-bar-flex-label\">{{ $t('message.layout.fiveColumnsAsideLayout') }}</div>\r\n <div class=\"layout-breadcrumb-seting-bar-flex-value\">\r\n <el-radio-group v-model=\"getThemeConfig.columnsAsideLayout\" size=\"mini\" @input=\"setLocalThemeConfig\">\r\n <el-radio-button label=\"columns-horizontal\">水平</el-radio-button>\r\n <el-radio-button label=\"columns-vertical\">垂直</el-radio-button>\r\n </el-radio-group>\r\n </div>\r\n </div>\r\n </el-scrollbar>\r\n </el-drawer>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport ClipboardJS from 'clipboard';\r\nimport { Local } from '@/utils/storage.js';\r\nimport { useChangeColor } from '@/utils/theme.js';\r\nimport config from '../../../../package.json';\r\nimport { themeList } from './theme';\r\nexport default {\r\n name: 'layoutBreadcrumbSeting',\r\n computed: {\r\n // 获取布局配置信息\r\n getThemeConfig() {\r\n return this.$store.state.themeConfig.themeConfig;\r\n },\r\n },\r\n data() {\r\n return {\r\n contentPosotion: 'center',\r\n };\r\n },\r\n created() {\r\n // 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题\r\n Local.set('frequency', 1);\r\n // 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）\r\n this.bus.$on('layoutMobileResize', (res) => {\r\n if (this.$store.state.themeConfig.themeConfig.layout === res.layout) return false;\r\n this.$store.state.themeConfig.themeConfig.layout = res.layout;\r\n this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n this.$store.state.themeConfig.themeConfig.isCollapse = false;\r\n });\r\n this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);\r\n },\r\n mounted() {\r\n this.initLayoutConfig();\r\n },\r\n methods: {\r\n // 全局主题\r\n onColorPickerChange() {\r\n // if (!this.getThemeConfig.primary) return;\r\n // 颜色加深\r\n // document.documentElement.style.setProperty('--prev-color-primary', this.getThemeConfig.primary);\r\n // 颜色变浅\r\n for (let i = 1; i <= 9; i++) {\r\n document.documentElement.style.setProperty(\r\n `--prev-color-primary-light-${i}`,\r\n `${useChangeColor().getLightColor(this.getThemeConfig.primary, i / 10)}`,\r\n );\r\n }\r\n this.setLocalThemeConfig();\r\n },\r\n setLocalTheme(val) {\r\n console.log(this.getThemeConfig.layout, val, 'layout');\r\n let themeSelect = themeList[val];\r\n themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n /**\r\n * 根据主题配置设置样式\r\n * @param {string} val - 主题值\r\n */\r\n if (['classic'].includes(this.getThemeConfig.layout)) {\r\n // 第三种布局\r\n themeSelect['--prev-bg-topBar'] = '#282c34';\r\n themeSelect['--prev-bg-topBarColor'] = '#fff';\r\n // themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n themeSelect['--prev-bg-menuBarColor'] = '#515a6e';\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#e5eeff';\r\n // themeSelect['--prev-MenuActiveColor'] = '#6954f0';\r\n if (val == 'theme-1') {\r\n themeSelect['--prev-bg-menuBar'] = '#fff';\r\n themeSelect['--prev-border-color-lighter'] = '#e5eeff';\r\n themeSelect['--prev-MenuActiveColor'] = '#0256FF';\r\n } else if (val == 'theme-3') {\r\n // themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';\r\n themeSelect['--prev-bg-menuBar'] = '#fff';\r\n themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n themeSelect['--prev-MenuActiveColor'] = '#41b584';\r\n } else if (val == 'theme-5') {\r\n // themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';\r\n themeSelect['--prev-bg-menuBar'] = '#fff';\r\n themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n themeSelect['--prev-MenuActiveColor'] = '#6954f0';\r\n } else if (val == 'theme-7') {\r\n // themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';\r\n themeSelect['--prev-bg-menuBar'] = '#fff';\r\n themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n themeSelect['--prev-MenuActiveColor'] = '#f34d37';\r\n } else {\r\n themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n themeSelect['--prev-bg-topBar'] = '#fff';\r\n themeSelect['--prev-bg-topBarColor'] = '#515a6e';\r\n themeSelect['--prev-bg-columnsMenuActiveColor'] = '#515a6e';\r\n\r\n // themeSelect['--prev-bg-menuBarColor'] = '#515a6e';\r\n }\r\n } else if (['transverse'].includes(this.getThemeConfig.layout)) {\r\n // 第四种布局\r\n themeSelect['--prev-bg-topBar'] = '#282c34';\r\n themeSelect['--prev-bg-topBarColor'] = '#fff';\r\n themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n if (val == 'theme-1') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#0256FF';\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n } else if (val == 'theme-3') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n } else if (val == 'theme-5') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n } else if (val == 'theme-7') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-border-color-lighter'] = '#282c34';\r\n } else {\r\n themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n\r\n themeSelect['--prev-bg-topBar'] = '#fff';\r\n themeSelect['--prev-bg-topBarColor'] = '#515a6e';\r\n themeSelect['--prev-bg-menuBarColor'] = '#515a6e';\r\n themeSelect['--prev-MenuActiveColor'] = '#515a6e';\r\n }\r\n } else if (this.getThemeConfig.layout === 'columns') {\r\n //第二种布局\r\n themeSelect['--prev-bg-topBar'] = '#fff';\r\n themeSelect['--prev-bg-topBarColor'] = '#515a6e';\r\n themeSelect['--prev-bg-menuBar'] = '#fff';\r\n themeSelect['--prev-bg-menuBarColor'] = '#303133';\r\n themeSelect['--prev-border-color-lighter'] = '#ebeef5';\r\n if (val == 'theme-1') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#e5eeff';\r\n themeSelect['--prev-color-primary'] = '#0256FF';\r\n themeSelect['--prev-MenuActiveColor'] = '#0256FF';\r\n } else if (val == 'theme-3') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#ecf8f3';\r\n themeSelect['--prev-color-primary'] = '#41b584';\r\n themeSelect['--prev-MenuActiveColor'] = '#41b584';\r\n } else if (val == 'theme-5') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#f0eefe';\r\n themeSelect['--prev-color-primary'] = '#6954f0';\r\n themeSelect['--prev-MenuActiveColor'] = '#6954f0';\r\n } else if (val == 'theme-7') {\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#feedeb';\r\n themeSelect['--prev-color-primary'] = '#f34d37';\r\n themeSelect['--prev-MenuActiveColor'] = '#f34d37';\r\n }\r\n } else {\r\n //默认布局\r\n if (val == 'theme-1') {\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-color-primary'] = '#0256FF';\r\n themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n themeSelect['--prev-bg-topBar'] = '#fff';\r\n themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#0256FF';\r\n } else if (val == 'theme-3') {\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-color-primary'] = '#41b584';\r\n themeSelect['--prev-bg-topBar'] = '#fff';\r\n themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#41b584';\r\n } else if (val == 'theme-5') {\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n themeSelect['--prev-color-primary'] = '#6954f0';\r\n themeSelect['--prev-bg-topBar'] = '#fff';\r\n themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#6954f0';\r\n } else if (val == 'theme-7') {\r\n themeSelect['--prev-bg-menuBar'] = '#282c34';\r\n themeSelect['--prev-bg-topBar'] = '#fff';\r\n themeSelect['--prev-bg-topBarColor'] = '#282c34';\r\n themeSelect['--prev-color-primary'] = '#f34d37';\r\n themeSelect['--prev-bg-menuBarColor'] = '#fff';\r\n themeSelect['--prev-MenuActiveColor'] = '#fff';\r\n themeSelect['--prev-bg-menu-hover-ba-color'] = '#f34d37';\r\n }\r\n }\r\n\r\n if (['theme-1', 'theme-2'].includes(val)) {\r\n this.$store.state.themeConfig.themeConfig.primary = '#0256FF'; //蓝黑蓝白\r\n } else if (['theme-3', 'theme-4'].includes(val)) {\r\n this.$store.state.themeConfig.themeConfig.primary = '#41a584'; //绿黑绿白\r\n } else if (['theme-5', 'theme-6'].includes(val)) {\r\n this.$store.state.themeConfig.themeConfig.primary = '#6954f0'; //紫黑紫白\r\n } else if (['theme-7', 'theme-8'].includes(val)) {\r\n this.$store.state.themeConfig.themeConfig.primary = '#f34d37'; //红黑红白\r\n } else {\r\n this.$store.state.themeConfig.themeConfig.primary = '#0256FF'; //默认蓝\r\n }\r\n /**\r\n * 遍历主题选择对象，将其属性值设置为文档根元素的样式属性\r\n */\r\n for (let key in themeSelect) {\r\n // 将主题选择对象的属性作为样式属性名，属性值作为样式属性值，设置到文档根元素上\r\n document.documentElement.style.setProperty(key, themeSelect[key]);\r\n }\r\n // 在下一次 DOM 更新循环结束后执行回调函数\r\n this.$nextTick((e) => {\r\n // 调用 onColorPickerChange 方法\r\n this.onColorPickerChange();\r\n });\r\n },\r\n onMenuBgColorChange() {\r\n if (!this.getThemeConfig.menuBgColor) return;\r\n // 颜色加深\r\n document.documentElement.style.setProperty('--prev-bg-menuBar', this.getThemeConfig.menuBgColor);\r\n this.setLocalThemeConfig();\r\n },\r\n // 深色模式\r\n onAddDarkChange() {\r\n const body = document.documentElement;\r\n if (this.getThemeConfig.isIsDark) body.setAttribute('data-theme', 'dark');\r\n else body.setAttribute('data-theme', '');\r\n this.setLocalThemeConfig();\r\n },\r\n // 初始化：刷新页面时，设置了值，直接取缓存中的值进行初始化\r\n initLayoutConfig() {\r\n window.addEventListener('load', () => {\r\n // 默认样式\r\n this.onColorPickerChange();\r\n // 灰色模式\r\n if (this.$store.state.themeConfig.themeConfig.isGrayscale) this.onAddFilterChange('grayscale');\r\n // 色弱模式\r\n if (this.$store.state.themeConfig.themeConfig.isInvert) this.onAddFilterChange('invert');\r\n // 深色模式\r\n if (this.$store.state.themeConfig.themeConfig.isIsDark) this.onAddDarkChange();\r\n // 语言国际化\r\n if (Local.get('themeConfigPrev')) this.$i18n.locale = Local.get('themeConfigPrev').globalI18n;\r\n });\r\n },\r\n // 存储布局配置\r\n setLocalThemeConfig() {\r\n Local.remove('themeConfigPrev');\r\n Local.set('themeConfigPrev', this.$store.state.themeConfig.themeConfig);\r\n this.setLocalThemeConfigStyle();\r\n },\r\n // 存储布局配置全局主题样式（html根标签）\r\n setLocalThemeConfigStyle() {\r\n Local.set('themeConfigStyle', document.documentElement.style.cssText);\r\n },\r\n // 布局配置弹窗打开\r\n openDrawer() {\r\n this.$store.state.themeConfig.themeConfig.isDrawer = true;\r\n },\r\n // 关闭弹窗时，初始化变量\r\n onDrawerClose() {\r\n this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n this.setLocalThemeConfig();\r\n },\r\n // 灰色模式/色弱模式\r\n onAddFilterChange(attr) {\r\n if (attr === 'grayscale') {\r\n if (this.$store.state.themeConfig.themeConfig.isGrayscale)\r\n this.$store.state.themeConfig.themeConfig.isInvert = false;\r\n } else {\r\n if (this.$store.state.themeConfig.themeConfig.isInvert)\r\n this.$store.state.themeConfig.themeConfig.isGrayscale = false;\r\n }\r\n const cssAttr =\r\n attr === 'grayscale'\r\n ? `grayscale(${this.$store.state.themeConfig.themeConfig.isGrayscale ? 1 : 0})`\r\n : `invert(${this.$store.state.themeConfig.themeConfig.isInvert ? '80%' : '0%'})`;\r\n const appEle = document.body;\r\n appEle.setAttribute('style', `filter: ${cssAttr};`);\r\n this.setLocalThemeConfig();\r\n },\r\n // 布局切换\r\n onSetLayout(layout) {\r\n Local.set('oldLayout', layout);\r\n if (this.$store.state.themeConfig.themeConfig.layout === layout) return false;\r\n if (['classic', 'transverse'].includes(layout)) {\r\n this.$store.state.themeConfig.themeConfig.isTagsview = false;\r\n } else {\r\n this.$store.state.themeConfig.themeConfig.isTagsview = true;\r\n }\r\n this.$store.state.themeConfig.themeConfig.layout = layout;\r\n this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n this.$store.state.themeConfig.themeConfig.columnsAsideStyle = 'columns-card';\r\n this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);\r\n },\r\n // 菜单 / 顶栏背景等\r\n onBgColorPickerChange(bg, rgb) {\r\n document.documentElement.style.setProperty(`--prev-bg-${bg}`, rgb);\r\n this.setLocalThemeConfigStyle();\r\n },\r\n // 一键复制配置\r\n onCopyConfigClick() {\r\n this.$store.state.themeConfig.themeConfig.isDrawer = false;\r\n let clipboardJS = new ClipboardJS('.copy-config-btn', {\r\n text: () => JSON.stringify(this.$store.state.themeConfig.themeConfig),\r\n });\r\n clipboardJS.on('success', () => {\r\n this.$message.success('配置复制成功');\r\n this.isDrawer = false;\r\n clipboardJS.destroy();\r\n });\r\n clipboardJS.on('error', () => {\r\n this.$message.error('配置复制失败');\r\n });\r\n },\r\n // 一键恢复默认\r\n onResetConfigClick() {\r\n Local.clear();\r\n window.location.reload();\r\n Local.set('version', config.version);\r\n },\r\n },\r\n};\r\n</script>\r\n<style>\r\nbody .v-modal {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n</style>\r\n<style scoped lang=\"scss\">\r\n.w10 {\r\n width: 10px;\r\n}\r\n.mr5 {\r\n margin-right: 5px;\r\n}\r\n::v-deep .el-drawer__header {\r\n margin-bottom: 0;\r\n}\r\n::v-deep .el-radio-button--mini .el-radio-button__inner {\r\n padding: 7px 8px;\r\n}\r\n::v-deep .el-drawer__body {\r\n padding: 0;\r\n}\r\n.layout-breadcrumb-seting-bar {\r\n // height: calc(100vh - 50px);\r\n padding: 0 15px;\r\n ::v-deep .el-scrollbar__view {\r\n // overflow-x: auto !important;\r\n overflow-x: hidden;\r\n }\r\n .layout-breadcrumb-seting-bar-flex {\r\n display: flex;\r\n align-items: center;\r\n &-label {\r\n flex: 1;\r\n color: var(--prev-color-text-primary);\r\n }\r\n }\r\n .layout-drawer-content-flex {\r\n overflow: hidden;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-content: center;\r\n justify-content: center;\r\n margin: 0 -5px;\r\n .layout-drawer-content-item.drawer-layout-active {\r\n border: 1px solid;\r\n border-color: var(--prev-color-primary);\r\n }\r\n .layout-drawer-content-item:hover {\r\n transition: all 0.3s ease-in-out;\r\n border: 1px solid;\r\n border-color: var(--prev-color-primary);\r\n }\r\n .layout-drawer-content-item {\r\n width: 107px;\r\n height: 70px;\r\n cursor: pointer;\r\n border: 1px solid rgba(0, 0, 0, 0);\r\n position: relative;\r\n padding: 6px;\r\n background: #ffffff;\r\n box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n opacity: 1;\r\n margin: 10px;\r\n\r\n .el-container {\r\n height: 100%;\r\n .el-aside-dark {\r\n opacity: 0.5;\r\n background-color: var(--prev-tag-active-color);\r\n border-radius: 2px;\r\n }\r\n .el-aside {\r\n background-color: var(--prev-tag-active-color);\r\n border-radius: 2px;\r\n }\r\n .el-header {\r\n border-radius: 2px;\r\n background-color: var(--prev-color-seting-header);\r\n }\r\n .el-main {\r\n border-radius: 2px;\r\n border: 1px dashed var(--prev-color-primary);\r\n padding: 0;\r\n background-color: var(--prev-color-seting-main);\r\n }\r\n }\r\n .el-circular {\r\n border-radius: 2px;\r\n overflow: hidden;\r\n border: 1px solid transparent;\r\n transition: all 0.3s ease-in-out;\r\n }\r\n\r\n .layout-tips-warp,\r\n .layout-tips-warp-active {\r\n transition: all 0.3s ease-in-out;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n border: 1px solid;\r\n border-color: var(--prev-color-primary-light-5);\r\n border-radius: 100%;\r\n padding: 4px;\r\n .layout-tips-box {\r\n transition: inherit;\r\n width: 30px;\r\n height: 30px;\r\n z-index: 9;\r\n border: 1px solid;\r\n border-color: var(--prev-color-primary-light-5);\r\n border-radius: 100%;\r\n .layout-tips-txt {\r\n transition: inherit;\r\n position: relative;\r\n top: 5px;\r\n font-size: 12px;\r\n line-height: 1;\r\n letter-spacing: 2px;\r\n white-space: nowrap;\r\n color: var(--prev-color-primary-light-5);\r\n text-align: center;\r\n transform: rotate(30deg);\r\n left: -1px;\r\n background-color: var(--prev-color-seting-main);\r\n width: 32px;\r\n height: 17px;\r\n line-height: 17px;\r\n }\r\n }\r\n }\r\n .layout-tips-warp-active {\r\n border: 1px solid;\r\n border-color: var(--prev-color-primary);\r\n .layout-tips-box {\r\n border: 1px solid;\r\n border-color: var(--prev-color-primary);\r\n .layout-tips-txt {\r\n color: var(--prev-color-primary) !important;\r\n background-color: var(--prev-color-seting-main) !important;\r\n }\r\n }\r\n }\r\n &:hover {\r\n .layout-tips-warp {\r\n transition: all 0.3s ease-in-out;\r\n border-color: var(--prev-color-primary);\r\n .layout-tips-box {\r\n transition: inherit;\r\n border-color: var(--prev-color-primary);\r\n .layout-tips-txt {\r\n transition: inherit;\r\n color: var(--prev-color-primary) !important;\r\n background-color: var(--prev-color-seting-main) !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .copy-config {\r\n margin: 10px 0;\r\n .copy-config-btn {\r\n width: 100%;\r\n margin-top: 15px;\r\n }\r\n .copy-config-btn-reset {\r\n width: 100%;\r\n margin: 10px 0 0;\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
