first commit

src/hooks/modules/useBreakpoint.ts

@@ -0,0 +1,24 @@
+import { computed, type ComputedRef } from 'vue'
+import { useBreakpoints } from '@vueuse/core'
+import type { ColProps } from '@arco-design/web-vue'
+
+type ColBreakpoint = Pick<ColProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
+type Breakpoint = keyof ColBreakpoint
+
+export function useBreakpoint() {
+  const breakpoints = useBreakpoints({
+    xs: 576, // <576
+    sm: 576, // >= 576
+    md: 768, // >=768
+    lg: 992, // >=992
+    xl: 1200, // >=1200
+    xxl: 1600 // >=1600
+  })
+
+  const arr = breakpoints.current() as ComputedRef<Breakpoint[]>
+  const breakpoint = computed(() => {
+    return arr.value[arr.value.length - 1] || 'xs'
+  })
+
+  return { breakpoint }
+}