| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { isDark } from '@/utils/is' |
| 3 | import { useAppStore } from '@/store/modules/app' | |
| 4 | import { useDesign } from '@/hooks/web/useDesign' | |
| 5 | import { CACHE_KEY, useCache } from '@/hooks/web/useCache' | |
| 6 | import routerSearch from '@/components/RouterSearch/index.vue' | |
| 7 | ||
| 8 | defineOptions({ name: 'APP' }) | |
| 9 | ||
| 10 | const { getPrefixCls } = useDesign() | |
| 11 | const prefixCls = getPrefixCls('app') | |
| 12 | const appStore = useAppStore() | |
| 13 | const currentSize = computed(() => appStore.getCurrentSize) | |
| 14 | const greyMode = computed(() => appStore.getGreyMode) | |
| 15 | const { wsCache } = useCache() | |
| 16 | ||
| 17 | // 根据浏览器当前主题设置系统主题色 | |
| 18 | const setDefaultTheme = () => { | |
| 19 | let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK) | |
| 20 | if (isDarkTheme === null) { | |
| 21 | isDarkTheme = isDark() | |
| 22 | } | |
| 23 | appStore.setIsDark(isDarkTheme) | |
| 24 | } | |
| 25 | setDefaultTheme() | |
| 26 | </script> | |
| 27 | <template> | |
| 28 | <ConfigGlobal :size="currentSize"> | |
| 29 | <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" /> | |
| 30 | <routerSearch /> | |
| 31 | </ConfigGlobal> | |
| 32 | </template> | |
| 33 | <style lang="scss"> | |
| 34 | $prefix-cls: #{$namespace}-app; | |
| 35 | ||
| 36 | .size { | |
| 37 | width: 100%; | |
| 38 | height: 100%; | |
| 39 | } | |
| 40 | ||
| 41 | html, | |
| 42 | body { | |
| 43 | @extend .size; | |
| 44 | ||
| 45 | padding: 0 !important; | |
| 46 | margin: 0; | |
| 47 | overflow: hidden; | |
| 48 | ||
| 49 | #app { | |
| 50 | @extend .size; | |
| 51 | } | |
| 52 | } | |
| 53 | ||
| 54 | .#{$prefix-cls}-grey-mode { | |
| 55 | filter: grayscale(100%); | |
| 56 | } | |
| 57 | ||
| 58 | .scrollbar__view { | |
| 59 | height: 99%!important; | |
| 60 | } | |
| 61 | </style> | |
