feat: screen

packages/hooks/useGlobalProperties.js

@@ -2,7 +2,7 @@ import { getCurrentInstance } from 'vue'
 
 function useGlobalProperties () {
     const instance = getCurrentInstance()
-    if (!instance) {
+    if (!instance || !instance.appContext) {
         throw new Error(`no instance found`)
     }
     return instance.appContext.config.globalProperties

packages/plugins/screen/index.js

@@ -1,9 +1,112 @@
-const defaultValues = {
-    xs: [null, 575],
-    sm: [576, 767],
-    md: [768, 991],
-    lg: [992, 1199],
-    xl: [1200, 1599],
-    xxl: [1600, null],
-    __order__: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+import { inject, reactive } from 'vue'
+import { addClass, getWindowSize, on, removeClass } from '../../utils/dom'
+import { debounce, pick } from 'lodash-es'
+
+const SIZE_LIST = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+
+const BaseKey = Symbol('Screen')
+
+export function createScreen (options) {
+    const { sizes = {}, delay = 16, classes } = options || {}
+
+    const baseSizes = {
+        xs: 0,
+        sm: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+        xxl: 1600
+    }
+
+    const needSizes = pick({ ...baseSizes, ...sizes }, SIZE_LIST)
+
+    const screen = reactive({
+        width: 0,
+        height: 0,
+        name: 'xs',
+        sizes: needSizes,
+        lt: {
+            sm: true,
+            md: true,
+            lg: true,
+            xl: true,
+            xxl: true
+        },
+        gt: {
+            xs: false,
+            sm: false,
+            md: false,
+            lg: false,
+            xl: false
+        },
+        xs: true,
+        sm: false,
+        md: false,
+        lg: false,
+        xl: false,
+        xxl: false
+    })
+
+    function update () {
+        const [width, height] = getWindowSize()
+        const { sizes } = screen
+
+        screen.width = width
+        screen.height = height
+
+        screen.lt.sm = width < sizes.sm
+        screen.lt.md = width < sizes.md
+        screen.lt.lg = width < sizes.lg
+        screen.lt.xl = width < sizes.xl
+        screen.lt.xxl = width < sizes.xxl
+
+        screen.gt.xs = width >= sizes.sm
+        screen.gt.sm = width >= sizes.md
+        screen.gt.md = width >= sizes.lg
+        screen.gt.lg = width >= sizes.xl
+        screen.gt.xl = width >= sizes.xxl
+
+        screen.xs = screen.lt.sm
+        screen.sm = screen.gt.xs === false && screen.lt.md === true
+        screen.md = screen.gt.sm === false && screen.lt.lg === true
+        screen.lg = screen.gt.md === false && screen.lt.xl === true
+        screen.xl = screen.gt.lg === false && screen.lt.xxl === true
+        screen.xxl = screen.gt.xl
+
+        const name = (screen.xs === true && 'xs')
+            || (screen.sm === true && 'sm')
+            || (screen.md === true && 'md')
+            || (screen.lg === true && 'lg')
+            || (screen.xl === true && 'xl')
+            || 'xxl'
+
+        if (name !== screen.name) {
+            if (classes === true) {
+                removeClass(document.body, `screen--${screen.name}`)
+                addClass(document.body, `screen--${name}`)
+            }
+            screen.name = name
+        }
+    }
+
+    const updateEvent = debounce(update, delay)
+
+    // @todo visualViewport
+    on(window, 'resize', updateEvent, { passive: true })
+
+    update()
+
+    if (classes === true && screen.name === 'xs') {
+        addClass(document.body, `screen--xs`)
+    }
+
+    return {
+        install: (app) => {
+            app.provide(BaseKey, screen)
+        }
+    }
+}
+
+export function useScreen () {
+    return inject(BaseKey, {})
 }

packages/utils/dom.js

@@ -43,3 +43,8 @@ export function removeClass (node, className) {
         }
     }
 }
+
+export function getWindowSize () {
+    // @todo visualViewport
+    return [window.innerWidth, window.innerHeight]
+}

src/boot/index.js

@@ -1,8 +1,9 @@
-import axios from './axios'
+import screen from './screen'
 import i18n from './i18n'
+import axios from './axios'
 import { isFunction } from 'lodash-es'
 
-const bootArray = [axios, i18n]
+const bootArray = [screen, i18n, axios]
 
 export default async (...args) => {
     for (const bootChunk of bootArray) {

src/boot/screen.js

@@ -0,0 +1,7 @@
+import { createScreen } from '@packages/plugins/screen'
+
+export default ({ app }) => {
+    const screen = createScreen({ classes: true })
+    // 屏幕插件
+    app.use(screen)
+}

src/views/login/bubbly/index.jsx

@@ -1,5 +1,6 @@
 import { defineComponent, onMounted, onUnmounted, ref, unref } from 'vue'
 import { theme } from 'ant-design-vue'
+import { getWindowSize } from '@packages/utils/dom'
 import { random } from 'lodash-es'
 import BACKGROUND from './background.svg'
 
@@ -20,8 +21,7 @@ function hexToRgba (colorStr, opacity) {
 function bubbly (cv, colorStr, fillStyle, fillImage) {
     let cancel = null
 
-    const width = window.innerWidth
-    const height = window.innerHeight
+    const [width, height] = getWindowSize()
 
     const ctx = cv.getContext('2d')
     const devicePixelRatio = (window.devicePixelRatio || 1)

src/views/login/index.jsx

@@ -3,6 +3,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { Button, Card, Checkbox } from 'ant-design-vue'
 import { Form, Password, Text } from '@packages'
 import { PasswordFilled, UserFilled } from '@/components/icon'
+import { useScreen } from '@packages/plugins/screen'
 import { useConfigInject } from '@packages/utils/extend'
 import useStyle from './style'
 // --
@@ -34,6 +35,9 @@ export default defineComponent({
     setup (props, { attrs }) {
         const { prefixCls } = useConfigInject('pro-login', props)
         const [wrapSSR, hashId] = useStyle(prefixCls)
+        const screen = useScreen()
+
+        console.log('cole', screen)
 
         const router = useRouter()
         const route = useRoute()
@@ -68,7 +72,7 @@ export default defineComponent({
 
         return () => {
             const cardClass = [`${prefixCls.value}-form`, {
-                [`${prefixCls.value}-form-center`]: false
+                [`${prefixCls.value}-form-center`]: screen.lt.lg
             }]
 
             return wrapSSR(