@ -11,9 +11,9 @@ import {
} from "vue" ; } from "vue" ;
import rgbHex from "rgb-hex" ; import rgbHex from "rgb-hex" ;
import { find } from "lodash-es" ; import { find } from "lodash-es" ;
import panel from "../panel/index.vue" ;
import { getConfig } from "/@/config" ; import { getConfig } from "/@/config" ;
import { useRouter } from "vue-router" ; import { useRouter } from "vue-router" ;
import panel from "../panel/index.vue" ;
import { emitter } from "/@/utils/mitt" ; import { emitter } from "/@/utils/mitt" ;
import { templateRef } from "@vueuse/core" ; import { templateRef } from "@vueuse/core" ;
import dayIcon from "/@/assets/svg/day.svg" ; import dayIcon from "/@/assets/svg/day.svg" ;
@ -79,19 +79,33 @@ if (unref(layoutTheme)) {
} }
/ / 默 认 灵 动 模 式 / / 默 认 灵 动 模 式
const markValue = ref ( storageLocal . getItem ( "showModel" ) || "smart" ) ;
const markValue = ref ( instance . configure ? . showModel ? ? "smart" ) ;
const logoVal = ref ( storageLocal . getItem ( "logoVal" ) || "1" ) ;
const logoVal = ref ( instance . configure ? . showLogo ? ? true ) ;
const epThemeColor = ref ( useEpThemeStoreHook ( ) . getEpThemeColor ) ; const epThemeColor = ref ( useEpThemeStoreHook ( ) . getEpThemeColor ) ;
const settings = reactive ( { const settings = reactive ( {
greyVal : instance . sets . grey ,
weakVal : instance . sets . weak ,
tabsVal : instance . sets . hideTabs ,
multiTagsCache : instance . sets . multiTagsCache
greyVal : instance . configure . grey ,
weakVal : instance . configure . weak ,
tabsVal : instance . configure . hideTabs ,
showLogo : instance . configure . showLogo ,
showModel : instance . configure . showModel ,
multiTagsCache : instance . configure . multiTagsCache
} ) ;
const getThemeColorStyle = computed ( ( ) => {
return rgb => {
return { background : ` rgb( ${ rgb } ) ` } ;
} ;
} ) ; } ) ;
function changeStorageConfigure ( key , val ) {
const storageConfigure = instance . configure ;
storageConfigure [ key ] = val ;
instance . configure = storageConfigure ;
}
function toggleClass ( flag : boolean , clsName : string , target ? : HTMLElement ) { function toggleClass ( flag : boolean , clsName : string , target ? : HTMLElement ) {
const targetEl = target || document . body ; const targetEl = target || document . body ;
let { className } = targetEl ; let { className } = targetEl ;
@ -102,12 +116,7 @@ function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
/ / 灰 色 模 式 设 置 / / 灰 色 模 式 设 置
const greyChange = ( value ) : void => { const greyChange = ( value ) : void => {
toggleClass ( settings . greyVal , "html-grey" , document . querySelector ( "html" ) ) ; toggleClass ( settings . greyVal , "html-grey" , document . querySelector ( "html" ) ) ;
instance . sets = {
grey : value ,
weak : instance . sets . weak ,
hideTabs : instance . sets . hideTabs ,
multiTagsCache : instance . sets . multiTagsCache
} ;
changeStorageConfigure ( "grey" , value ) ;
} ; } ;
/ / 色 弱 模 式 设 置 / / 色 弱 模 式 设 置
@ -117,33 +126,18 @@ const weekChange = (value): void => {
"html-weakness" , "html-weakness" ,
document . querySelector ( "html" ) document . querySelector ( "html" )
) ; ) ;
instance . sets = {
grey : instance . sets . grey ,
weak : value ,
hideTabs : instance . sets . hideTabs ,
multiTagsCache : instance . sets . multiTagsCache
} ;
changeStorageConfigure ( "weak" , value ) ;
} ; } ;
const tagsChange = ( ) => { const tagsChange = ( ) => {
let showVal = settings . tabsVal ; let showVal = settings . tabsVal ;
instance . sets = {
grey : instance . sets . grey ,
weak : instance . sets . weak ,
hideTabs : showVal ,
multiTagsCache : instance . sets . multiTagsCache
} ;
changeStorageConfigure ( "hideTabs" , showVal ) ;
emitter . emit ( "tagViewsChange" , showVal ) ; emitter . emit ( "tagViewsChange" , showVal ) ;
} ; } ;
const multiTagsCacheChange = ( ) => { const multiTagsCacheChange = ( ) => {
let multiTagsCache = settings . multiTagsCache ; let multiTagsCache = settings . multiTagsCache ;
instance . sets = {
grey : instance . sets . grey ,
weak : instance . sets . weak ,
hideTabs : instance . sets . hideTabs ,
multiTagsCache : multiTagsCache
} ;
changeStorageConfigure ( "multiTagsCache" , multiTagsCache ) ;
useMultiTagsStoreHook ( ) . multiTagsCacheChange ( multiTagsCache ) ; useMultiTagsStoreHook ( ) . multiTagsCacheChange ( multiTagsCache ) ;
} ; } ;
@ -160,30 +154,30 @@ function onReset() {
path : "/welcome" , path : "/welcome" ,
parentPath : "/" , parentPath : "/" ,
meta : { meta : {
title : "message .hshome" ,
icon : "el-icon-s-home " ,
title : "menus .hshome" ,
icon : "HomeFilled " ,
i18n : true , i18n : true ,
showLink : true showLink : true
} }
} }
] ) ; ] ) ;
useMultiTagsStoreHook ( ) . multiTagsCacheChange ( getConfig ( ) . MultiTagsCache ) ; useMultiTagsStoreHook ( ) . multiTagsCacheChange ( getConfig ( ) . MultiTagsCache ) ;
useEpThemeStoreHook ( ) . setEpThemeColor ( "#409EFF" ) ;
useEpThemeStoreHook ( ) . setEpThemeColor ( getConfig ( ) . EpThemeColor ) ;
storageLocal . clear ( ) ; storageLocal . clear ( ) ;
storageSession . clear ( ) ; storageSession . clear ( ) ;
router . push ( "/login" ) ; router . push ( "/login" ) ;
} }
function onChange ( label ) { function onChange ( label ) {
storageLocal . setItem ( "showModel" , label ) ;
changeStorageConfigure ( "showModel" , label ) ;
emitter . emit ( "tagViewsShowModel" , label ) ; emitter . emit ( "tagViewsShowModel" , label ) ;
} }
/ / 侧 边 栏 L o g o / / 侧 边 栏 L o g o
function logoChange ( ) { function logoChange ( ) {
unref ( logoVal ) === "1"
? storageLocal . setItem ( "logoVal" , "1" )
: storageLocal . setItem ( "logoVal" , "-1" ) ;
unref ( logoVal )
? changeStorageConfigure ( "showLogo" , true )
: changeStorageConfigure ( "showLogo" , false ) ;
emitter . emit ( "logoChange" , unref ( logoVal ) ) ; emitter . emit ( "logoChange" , unref ( logoVal ) ) ;
} }
@ -232,13 +226,19 @@ function setLayoutModel(layout: string) {
instance . layout = { instance . layout = {
layout , layout ,
theme : layoutTheme . value . theme , theme : layoutTheme . value . theme ,
darkMode : instance . layout . darkMode
darkMode : instance . layout . darkMode ,
sidebarStatus : instance . layout . sidebarStatus ,
epThemeColor : instance . layout . epThemeColor
} ; } ;
useAppStoreHook ( ) . setLayout ( layout ) ; useAppStoreHook ( ) . setLayout ( layout ) ;
} }
/ / 存 放 夜 间 主 题 切 换 前 的 导 航 主 题 色
let tempLayoutThemeColor ;
/ / 设 置 导 航 主 题 色 / / 设 置 导 航 主 题 色
function setLayoutThemeColor ( theme : string ) { function setLayoutThemeColor ( theme : string ) {
tempLayoutThemeColor = instance . layout . theme ;
layoutTheme . value . theme = theme ; layoutTheme . value . theme = theme ;
toggleTheme ( { toggleTheme ( {
scopeName : ` layout-theme- ${ theme } ` scopeName : ` layout-theme- ${ theme } `
@ -246,11 +246,13 @@ function setLayoutThemeColor(theme: string) {
instance . layout = { instance . layout = {
layout : useAppStoreHook ( ) . layout , layout : useAppStoreHook ( ) . layout ,
theme , theme ,
darkMode : dataTheme . value
darkMode : dataTheme . value ,
sidebarStatus : instance . layout . sidebarStatus ,
epThemeColor : instance . layout . epThemeColor
} ; } ;
if ( theme === "default" || theme === "light" ) { if ( theme === "default" || theme === "light" ) {
setEpThemeColor ( "#409EFF" ) ;
setEpThemeColor ( getConfig ( ) . EpThemeColor ) ;
} else { } else {
const colors = find ( themeColors . value , { themeColor : theme } ) ; const colors = find ( themeColors . value , { themeColor : theme } ) ;
const color = "#" + rgbHex ( colors . rgb ) ; const color = "#" + rgbHex ( colors . rgb ) ;
@ -274,10 +276,13 @@ function dataThemeChange() {
setLayoutThemeColor ( "light" ) ; setLayoutThemeColor ( "light" ) ;
} else { } else {
body . setAttribute ( "data-theme" , "" ) ; body . setAttribute ( "data-theme" , "" ) ;
tempLayoutThemeColor && setLayoutThemeColor ( tempLayoutThemeColor ) ;
instance . layout = { instance . layout = {
layout : useAppStoreHook ( ) . layout , layout : useAppStoreHook ( ) . layout ,
theme : instance . layout . theme , theme : instance . layout . theme ,
darkMode : dataTheme . value
darkMode : dataTheme . value ,
sidebarStatus : instance . layout . sidebarStatus ,
epThemeColor : instance . layout . epThemeColor
} ; } ;
} }
} }
@ -338,7 +343,7 @@ nextTick(() => {
< li < li
v - for = "(item, index) in themeColors" v - for = "(item, index) in themeColors"
: key = "index" : key = "index"
: style = "{ background: `rgb(${item.rgb})` } "
: style = "getThemeColorStyle(item.rgb) "
@ click = "setLayoutThemeColor(item.themeColor)" @ click = "setLayoutThemeColor(item.themeColor)"
> >
< el -icon < el -icon
@ -394,8 +399,8 @@ nextTick(() => {
< el -switch < el -switch
v - model = "logoVal" v - model = "logoVal"
inline - prompt inline - prompt
active - value = "1 "
inactive - value = "-1 "
: active - value = "true "
: inactive - value = "false "
inactive - color = "#a6a6a6" inactive - color = "#a6a6a6"
active - text = "开" active - text = "开"
inactive - text = "关" inactive - text = "关"
xiaoxian521
3 years ago