feat: 视窗工具函数

web/eslint.config.js

@@ -8,6 +8,7 @@ export default antfu(
     rules: {
       'vue/html-self-closing': 'off',
       'antfu/top-level-function': 'off',
+      'ts/no-unsafe-function-type': 'off',
     },
   },
 

web/src/utils/media.ts

@@ -0,0 +1,43 @@
+/** 视窗匹配回调函数 */
+export const matchMedia = (
+  type: 'sm' | 'md' | 'lg' | string,
+  matchFunc?: Function,
+  mismatchFunc?: Function,
+) => {
+  if (type === 'sm') {
+    if (window.matchMedia('(max-width: 767.98px)').matches) {
+      /* 窗口小于或等于 */
+      matchFunc?.()
+    }
+    else {
+      mismatchFunc?.()
+    }
+  }
+  else if (type === 'md') {
+    if (window.matchMedia('(max-width: 992px)').matches) {
+      /* 窗口小于或等于 */
+      matchFunc?.()
+    }
+    else {
+      mismatchFunc?.()
+    }
+  }
+  else if (type === 'lg') {
+    if (window.matchMedia('(max-width: 1200px)').matches) {
+      /* 窗口小于或等于 */
+      matchFunc?.()
+    }
+    else {
+      mismatchFunc?.()
+    }
+  }
+  else {
+    if (window.matchMedia(`(max-width: ${type}px)`).matches) {
+      /* 窗口小于或等于 */
+      matchFunc?.()
+    }
+    else {
+      mismatchFunc?.()
+    }
+  }
+}