feat: 系统布局配置下增加灰色模式、色弱模式 (#39)

src/config/layout.ts

@@ -14,6 +14,10 @@ interface ILayoutSettings {
   showThemeSwitch: boolean
   /** 是否显示全屏按钮 */
   showScreenfull: boolean
+  /** 是否显示灰色模式 */
+  showGreyMode: boolean
+  /** 是否显示色弱模式 */
+  showColorWeakness: boolean
 }
 
 const layoutSettings: ILayoutSettings = {
@@ -23,7 +27,9 @@ const layoutSettings: ILayoutSettings = {
   showSidebarLogo: true,
   showNotify: true,
   showThemeSwitch: true,
-  showScreenfull: true
+  showScreenfull: true,
+  showGreyMode: false,
+  showColorWeakness: false
 }
 
 export default layoutSettings

src/layout/components/Settings/index.vue

@@ -32,6 +32,14 @@ const settingsStore = useSettingsStore()
         <span>显示全屏按钮</span>
         <el-switch v-model="settingsStore.showScreenfull" class="drawer-switch" />
       </div>
+      <div class="drawer-item">
+        <span>显示灰色模式</span>
+        <el-switch v-model="settingsStore.showGreyMode" class="drawer-switch" />
+      </div>
+      <div class="drawer-item">
+        <span>显示色弱模式</span>
+        <el-switch v-model="settingsStore.showColorWeakness" class="drawer-switch" />
+      </div>
     </div>
   </div>
 </template>

src/layout/index.vue

@@ -16,9 +16,12 @@ const classObj = computed(() => {
     hideSidebar: !appStore.sidebar.opened,
     openSidebar: appStore.sidebar.opened,
     withoutAnimation: appStore.sidebar.withoutAnimation,
-    mobile: appStore.device === DeviceType.Mobile
+    mobile: appStore.device === DeviceType.Mobile,
+    showGreyMode: showGreyMode.value,
+    showColorWeakness: showColorWeakness.value
   }
 })
+
 const showSettings = computed(() => {
   return settingsStore.showSettings
 })
@@ -28,6 +31,12 @@ const showTagsView = computed(() => {
 const fixedHeader = computed(() => {
   return settingsStore.fixedHeader
 })
+const showGreyMode = computed(() => {
+  return settingsStore.showGreyMode
+})
+const showColorWeakness = computed(() => {
+  return settingsStore.showColorWeakness
+})
 const handleClickOutside = () => {
   appStore.closeSidebar(false)
 }
@@ -59,6 +68,14 @@ const handleClickOutside = () => {
   width: 100%;
 }
 
+.showGreyMode {
+  filter: grayscale(1);
+}
+
+.showColorWeakness {
+  filter: invert(0.8);
+}
+
 .drawer-bg {
   background-color: #000;
   opacity: 0.3;

src/store/modules/settings.ts

@@ -10,6 +10,18 @@ export const useSettingsStore = defineStore("settings", () => {
   const showNotify = ref<boolean>(layoutSettings.showNotify)
   const showThemeSwitch = ref<boolean>(layoutSettings.showThemeSwitch)
   const showScreenfull = ref<boolean>(layoutSettings.showScreenfull)
+  const showGreyMode = ref<boolean>(layoutSettings.showGreyMode)
+  const showColorWeakness = ref<boolean>(layoutSettings.showColorWeakness)
 
-  return { fixedHeader, showSettings, showTagsView, showSidebarLogo, showNotify, showThemeSwitch, showScreenfull }
+  return {
+    fixedHeader,
+    showSettings,
+    showTagsView,
+    showSidebarLogo,
+    showNotify,
+    showThemeSwitch,
+    showScreenfull,
+    showGreyMode,
+    showColorWeakness
+  }
 })