technical debt

e154 · Jan 13, 2024 · 3788a0f · 3788a0f
1 parent 741f49a
commit 3788a0f
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 49 deletions.
diff --git a/static_source/admin/src/components/Setting/src/Setting.vue b/static_source/admin/src/components/Setting/src/Setting.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
-import { ref, unref, computed, watch } from 'vue'
+import {ref, unref, computed, watch, nextTick} from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
@@ -12,6 +12,8 @@ import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import { useCache } from '@/hooks/web/useCache'
 import { useClipboard } from '@vueuse/core'
 import { useDesign } from '@/hooks/web/useDesign'
+import { usePreferredColorScheme } from '@vueuse/core'
+import {isNumber} from "@/utils/is";
 
 const { getPrefixCls } = useDesign()
 
@@ -139,6 +141,7 @@ const copyConfig = async () => {
       footer: ${appStore.getFooter},
       // 灰色模式
       greyMode: ${appStore.getGreyMode},
+      systemTheme: ${appStore.getSystemTheme},
       // layout布局
       layout: '${appStore.getLayout}',
       // 暗黑模式
@@ -196,6 +199,13 @@ const clear = () => {
   wsCache.delete('isDark')
   window.location.reload()
 }
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+  if (appStore.getSystemTheme) {
+    appStore.setIsDark(event.matches)
+  }
+});
+
 </script>
 
 <template>

diff --git a/static_source/admin/src/components/Setting/src/components/InterfaceDisplay.vue b/static_source/admin/src/components/Setting/src/components/InterfaceDisplay.vue
@@ -5,6 +5,7 @@ import { useAppStore } from '@/store/modules/app'
 import { computed, ref, watch } from 'vue'
 import { setCssVar } from '@/utils'
 import { useDesign } from '@/hooks/web/useDesign'
+import {isDark} from "@/utils/is";
 
 const { getPrefixCls } = useDesign()
 
@@ -29,18 +30,18 @@ const breadcrumbIconChange = (show: boolean) => {
 }
 
 // 折叠图标
-const hamburger = ref(appStore.getHamburger)
-
-const hamburgerChange = (show: boolean) => {
-  appStore.setHamburger(show)
-}
+// const hamburger = ref(appStore.getHamburger)
+//
+// const hamburgerChange = (show: boolean) => {
+//   appStore.setHamburger(show)
+// }
 
 // 全屏图标
-const screenfull = ref(appStore.getScreenfull)
-
-const screenfullChange = (show: boolean) => {
-  appStore.setScreenfull(show)
-}
+// const screenfull = ref(appStore.getScreenfull)
+//
+// const screenfullChange = (show: boolean) => {
+//   appStore.setScreenfull(show)
+// }
 
 // 尺寸图标
 const size = ref(appStore.getSize)
@@ -66,39 +67,39 @@ const tagsViewChange = (show: boolean) => {
 }
 
 // 标签页图标
-const tagsViewIcon = ref(appStore.getTagsViewIcon)
-
-const tagsViewIconChange = (show: boolean) => {
-  appStore.setTagsViewIcon(show)
-}
+// const tagsViewIcon = ref(appStore.getTagsViewIcon)
+//
+// const tagsViewIconChange = (show: boolean) => {
+//   appStore.setTagsViewIcon(show)
+// }
 
 // logo
-const logo = ref(appStore.getLogo)
-
-const logoChange = (show: boolean) => {
-  appStore.setLogo(show)
-}
+// const logo = ref(appStore.getLogo)
+//
+// const logoChange = (show: boolean) => {
+//   appStore.setLogo(show)
+// }
 
 // 菜单手风琴
-const uniqueOpened = ref(appStore.getUniqueOpened)
-
-const uniqueOpenedChange = (uniqueOpened: boolean) => {
-  appStore.setUniqueOpened(uniqueOpened)
-}
+// const uniqueOpened = ref(appStore.getUniqueOpened)
+//
+// const uniqueOpenedChange = (uniqueOpened: boolean) => {
+//   appStore.setUniqueOpened(uniqueOpened)
+// }
 
 // 固定头部
-const fixedHeader = ref(appStore.getFixedHeader)
-
-const fixedHeaderChange = (show: boolean) => {
-  appStore.setFixedHeader(show)
-}
+// const fixedHeader = ref(appStore.getFixedHeader)
+//
+// const fixedHeaderChange = (show: boolean) => {
+//   appStore.setFixedHeader(show)
+// }
 
 // 页脚
-const footer = ref(appStore.getFooter)
-
-const footerChange = (show: boolean) => {
-  appStore.setFooter(show)
-}
+// const footer = ref(appStore.getFooter)
+//
+// const footerChange = (show: boolean) => {
+//   appStore.setFooter(show)
+// }
 
 // 灰色模式
 const greyMode = ref(appStore.getGreyMode)
@@ -107,20 +108,29 @@ const greyModeChange = (show: boolean) => {
   appStore.setGreyMode(show)
 }
 
-// 动态路由
-const dynamicRouter = ref(appStore.getDynamicRouter)
+const systemTheme = computed(()=> appStore.getSystemTheme)
 
-const dynamicRouterChange = (show: boolean) => {
-  ElMessage.info(t('setting.reExperienced'))
-  appStore.setDynamicRouter(show)
+const systemThemeChange = (systemTheme: boolean) => {
+  appStore.setSystemTheme(systemTheme)
+  if (systemTheme) {
+    appStore.setIsDark(isDark())
+  }
 }
 
-// 固定菜单
-const fixedMenu = ref(appStore.getFixedMenu)
+// 动态路由
+// const dynamicRouter = ref(appStore.getDynamicRouter)
+//
+// const dynamicRouterChange = (show: boolean) => {
+//   ElMessage.info(t('setting.reExperienced'))
+//   appStore.setDynamicRouter(show)
+// }
 
-const fixedMenuChange = (show: boolean) => {
-  appStore.setFixedMenu(show)
-}
+// 固定菜单
+// const fixedMenu = ref(appStore.getFixedMenu)
+//
+// const fixedMenuChange = (show: boolean) => {
+//   appStore.setFixedMenu(show)
+// }
 
 const layout = computed(() => appStore.getLayout)
 
@@ -201,6 +211,11 @@ watch(
       <ElSwitch v-model="greyMode" @change="greyModeChange" />
     </div>
 
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.systemTheme') }}</span>
+      <ElSwitch v-model="systemTheme" @change="systemThemeChange" />
+    </div>
+
 <!--    <div class="flex justify-between items-center">-->
 <!--      <span class="text-14px">{{ t('setting.dynamicRouter') }}</span>-->
 <!--      <ElSwitch v-model="dynamicRouter" @change="dynamicRouterChange" />-->

diff --git a/static_source/admin/src/components/ThemeSwitch/src/ThemeSwitch.vue b/static_source/admin/src/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import {computed, ref} from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { ElSwitch } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
@@ -16,12 +16,13 @@ const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '
 const appStore = useAppStore()
 
 // 初始化获取是否是暗黑主题
-const isDark = ref(appStore.getIsDark)
+const isDark = computed(() => appStore.getIsDark)
 
 // 设置switch的背景颜色
 const blackColor = 'var(--el-color-black)'
 
 const themeChange = (val: boolean) => {
+  appStore.setSystemTheme(false)
   appStore.setIsDark(val)
 }
 </script>

diff --git a/static_source/admin/src/store/modules/app.ts b/static_source/admin/src/store/modules/app.ts
@@ -28,6 +28,7 @@ interface AppState {
   logo: boolean
   fixedHeader: boolean
   greyMode: boolean
+  systemTheme: boolean
   dynamicRouter: boolean
   pageLoading: boolean
   layout: LayoutType
@@ -59,7 +60,7 @@ export const useAppStore = defineStore('app', {
       title: import.meta.env.VITE_APP_TITLE, // 标题
       pageLoading: false, // 路由跳转loading
 
-      breadcrumb: wsCache.get('breadcrumb') || true, // 面包屑
+      breadcrumb: wsCache.get('breadcrumb') || false, // 面包屑
       breadcrumbIcon: wsCache.get('breadcrumbIcon') || false, // 面包屑图标
       collapse: wsCache.get('collapse') || false, // 折叠菜单
       uniqueOpened: false, // 是否只保持一个子菜单的展开
@@ -73,6 +74,7 @@ export const useAppStore = defineStore('app', {
       fixedHeader: false, // 固定toolheader
       footer: false, // 显示页脚
       greyMode: wsCache.get('greyMode') || false, // 是否开始灰色模式，用于特殊悼念日
+      systemTheme: wsCache.get('systemTheme') || false,
       dynamicRouter: wsCache.get('dynamicRouter') || false, // 是否动态路由
       fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单
       terminal: wsCache.get('terminal') || false,
@@ -162,6 +164,9 @@ export const useAppStore = defineStore('app', {
     getGreyMode(): boolean {
       return this.greyMode
     },
+    getSystemTheme(): boolean {
+      return this.systemTheme
+    },
     getDynamicRouter(): boolean {
       return this.dynamicRouter
     },
@@ -272,6 +277,10 @@ export const useAppStore = defineStore('app', {
       wsCache.set('greyMode', greyMode)
       this.greyMode = greyMode
     },
+    setSystemTheme(systemTheme: boolean) {
+      wsCache.set('systemTheme', systemTheme)
+      this.systemTheme = systemTheme
+    },
     setDynamicRouter(dynamicRouter: boolean) {
       wsCache.set('dynamicRouter', dynamicRouter)
       this.dynamicRouter = dynamicRouter