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