feat: 新增 灰色&色弱模式

src/components/RightPanel/index.vue

@@ -81,7 +81,8 @@ onBeforeUnmount(() => {
 .showRightPanel {
 	overflow: hidden;
 	position: relative;
-	width: calc(100% - 15px);
+	//width: calc(100% - 15px);
+	width: 100%;
 }
 </style>
 

src/hooks/interface/index.ts

@@ -1,31 +1,3 @@
-/*export namespace Table {
-	export interface Pageable {
-		pageNum: number
-		pageSize: number
-		total: number
-	}
-	export interface StateProps {
-		tableData: any[]
-		pageable: Pageable
-		searchParam: {
-			[key: string]: any
-		}
-		searchInitParam: {
-			[key: string]: any
-		}
-		totalParam: {
-			[key: string]: any
-		}
-		icon?: {
-			[key: string]: any
-		}
-	}
-}
-
-export namespace HandleData {
-	export type MessageType = '' | 'success' | 'warning' | 'info' | 'error'
-}*/
-
 export namespace Theme {
 	export type ThemeType = 'light' | 'inverted' | 'dark'
 	export type GreyOrWeakType = 'grey' | 'weak'

src/hooks/useTheme.ts

@@ -2,7 +2,6 @@ import { storeToRefs } from 'pinia'
 import { Theme } from './interface'
 // import { ElMessage } from 'element-plus'
 import useStore from '@/store'
-// import { useStore } from '@/stores/modules/global'
 import { getLightColor, getDarkColor } from '@/utils/color'
 import { menuTheme } from '@/styles/theme/menu'
 import { asideTheme } from '@/styles/theme/aside'
@@ -37,7 +36,6 @@ export const useTheme = () => {
 			const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`
 			document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)
 		}
-		// globalStore.setGlobalState('primary', val)
 		setting.changeSetting('themeColor', val)
 	}
 
@@ -50,9 +48,8 @@ export const useTheme = () => {
 			weak: 'filter: invert(80%)'
 		}
 		body.setAttribute('style', styles[type])
-		const propName = type === 'grey' ? 'isWeak' : 'isGrey'
-		setting.changeSetting(propName, false)
-		// globalStore.setGlobalState(propName, false)
+		// 关闭另一个模式
+		setting.changeSetting(type === 'grey' ? 'isWeak' : 'isGrey', false)
 	}
 
 	// 设置菜单样式

src/layout/components/Settings/index.vue

@@ -12,6 +12,14 @@
 			<span>暗黑主题</span>
 			<el-switch v-model="isDark" inline-prompt class="drawer-switch" active-icon="Sunny" inactive-icon="Moon" @change="switchDark" />
 		</div>
+		<div class="drawer-item" @click.stop="">
+			<span>灰色模式</span>
+			<el-switch v-model="isGrey" inline-prompt class="drawer-switch" @change="changeGreyOrWeak('grey', $event)" />
+		</div>
+		<div class="drawer-item" @click.stop="">
+			<span>色弱模式</span>
+			<el-switch v-model="isWeak" inline-prompt class="drawer-switch" @change="changeGreyOrWeak('weak', $event)" />
+		</div>
 		<div class="drawer-item">
 			<span>侧边栏深色</span>
 			<el-switch v-model="asideInverted" class="drawer-switch" @change="setAsideTheme" />
@@ -135,7 +143,7 @@ import { useTheme } from '@/hooks/useTheme'
 import useStore from '@/store'
 
 const { setting } = useStore()
-const { switchDark, setAsideTheme, setHeaderTheme, setFooterTheme } = useTheme()
+const { switchDark, changeGreyOrWeak, setAsideTheme, setHeaderTheme, setFooterTheme } = useTheme()
 // const isDark = useDark()
 // const toggleDark = () => useToggle(isDark)
 
@@ -172,6 +180,8 @@ const animateList = [
 ]
 const {
 	isDark,
+	isGrey,
+	isWeak,
 	layout,
 	asideInverted,
 	headerInverted,

src/settings.ts

@@ -7,6 +7,10 @@ const defaultSettingState: SettingState = {
 	themeColor: '#409eff',
 	// 暗黑主题
 	isDark: false,
+	// 灰色模式
+	isGrey: false,
+	// 色弱模式
+	isWeak: false,
 	// 侧边栏深色
 	asideInverted: false,
 	// 头部深色

src/store/interface/index.ts

@@ -3,61 +3,3 @@ export type LayoutType = 'left' | 'leftMix' | 'topMix' | 'top'
 export type AssemblySizeType = 'large' | 'default' | 'small'
 
 export type LanguageType = 'zh' | 'en' | null
-
-/* GlobalState */
-/*
-export interface GlobalState {
-	layout: LayoutType
-	assemblySize: AssemblySizeType
-	language: LanguageType
-	maximize: boolean
-	primary: string
-	isDark: boolean
-	isGrey: boolean
-	isWeak: boolean
-	asideInverted: boolean
-	headerInverted: boolean
-	isCollapse: boolean
-	accordion: boolean
-	breadcrumb: boolean
-	breadcrumbIcon: boolean
-	tabs: boolean
-	tabsIcon: boolean
-	footer: boolean
-}
-
-/!* UserState *!/
-export interface UserState {
-	token: string
-	userInfo: { name: string }
-}
-
-/!* tabsMenuProps *!/
-export interface TabsMenuProps {
-	icon: string
-	title: string
-	path: string
-	name: string
-	close: boolean
-	isKeepAlive: boolean
-}
-
-/!* TabsState *!/
-export interface TabsState {
-	tabsMenuList: TabsMenuProps[]
-}
-
-/!* AuthState *!/
-export interface AuthState {
-	routeName: string
-	authButtonList: {
-		[key: string]: string[]
-	}
-	authMenuList: Menu.MenuOptions[]
-}
-
-/!* KeepAliveState *!/
-export interface KeepAliveState {
-	keepAliveName: string[]
-}
-*/

src/types/store.d.ts

@@ -38,6 +38,10 @@ export interface SettingState {
 	themeColor: string
 	// 暗黑主题
 	isDark: boolean
+	// 灰色模式
+	isGrey: boolean
+	// 色弱模式
+	isWeak: boolean
 	// 侧边栏深色
 	asideInverted: boolean
 	// 头部深色