Signed-off-by: chy <chy@163.com>

src/components/ConfigGlobal/index.ts

@@ -0,0 +1,3 @@
+import ConfigGlobal from './src/ConfigGlobal.vue'
+
+export { ConfigGlobal }

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { provide, computed, watch, onMounted } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { ComponentSize, ElConfigProvider, ElMessageBox } from 'element-plus'
+import { useLocaleStore } from '@/store/modules/locale'
+import { useWindowSize, useFullscreen } from '@vueuse/core'
+import { useAppStore } from '@/store/modules/app'
+import { setCssVar } from '@/utils'
+import { useDesign } from '@/hooks/web/useDesign'
+import { isMobile } from '@/utils/domUtils'
+
+const { variables } = useDesign()
+
+const appStore = useAppStore()
+
+const props = defineProps({
+  size: propTypes.oneOf<ComponentSize>(['default', 'small', 'large']).def('default')
+})
+
+const mobile_landscape = import.meta.env.VITE_MOBILE_LANDSCAPE === 'true'
+
+provide('configGlobal', props)
+
+// 初始化所有主题色
+onMounted(() => {
+  appStore.setCssVarTheme()
+})
+
+const { width } = useWindowSize()
+const { toggle } = useFullscreen()
+
+const setFullScreen = () => {
+  appStore.setFullscreen(true)
+  toggle()
+}
+
+// 监听窗口变化
+watch(
+  () => width.value,
+  (width: number) => {
+    if (isMobile() && mobile_landscape) {
+      if (!appStore.getMobile) {
+        appStore.setMobile(true)
+      }
+      setCssVar('--left-menu-min-width', '0')
+      appStore.setCollapse(true)
+      appStore.getLayout !== 'classic' ? appStore.setLayout('classic') : undefined
+    } else {
+      appStore.getMobile ? appStore.setMobile(false) : undefined
+      setCssVar('--left-menu-min-width', '64px')
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 多语言相关
+const localeStore = useLocaleStore()
+
+const currentLocale = computed(() => localeStore.currentLocale)
+
+const onFullscreenChange = () => {
+  if (appStore.getMobile && !document.fullscreenElement) appStore.setFullscreen(false)
+}
+
+const isShow = computed(() => {
+  return appStore.getMobile && !appStore.getFullscreen && document.fullscreenElement === null
+})
+onMounted(() => {
+  if (appStore.getMobile) window.addEventListener('fullscreenchange', onFullscreenChange)
+})
+
+onUnmounted(() => {
+  if (appStore.getMobile) window.removeEventListener('fullscreenchange', onFullscreenChange)
+})
+</script>
+
+<template>
+  <ElConfigProvider
+    :namespace="variables.elNamespace"
+    :locale="currentLocale.elLocale"
+    :message="{ max: 5 }"
+    :size="size"
+  >
+    <slot></slot>
+  </ElConfigProvider>
+  <div
+    v-if="isShow"
+    class="w-100% h-100% pos-fixed top-0 right-0 z-9 flex justify-center items-center bg-#000000"
+    style="background-color: rgb(0 0 0 / 50%)"
+  >
+    <div class="h-40% w-45% rounded-16px bg-white p-80px p-t-60px p-b-60px">
+      <div class="text-78px c-#303133 h-30%">全屏显示</div>
+      <div class="text-54px flex items-center c-#606266 h-30%">手机端需要开启全屏显示</div>
+      <div class="w-100% h-40% flex justify-end items-end">
+        <button
+          @click="setFullScreen"
+          class="w-300px h-110px text-42px bg-#66b1ff b-none rounded-16px c-white cursor-pointer flex justify-center items-center"
+          >确认开启</button
+        >
+      </div>
+    </div>
+  </div>
+</template>