✨ init Project

src/hooks/charts.js

@@ -0,0 +1,18 @@
+// 本组件参考 arco-pro 的实现
+// https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/hooks/chart-option.ts
+
+import { computed } from 'vue'
+import { useAppStore } from '@/pinia'
+
+export default function useChartOption(sourceOption) {
+  const appStore = useAppStore()
+  const isDark = computed(() => {
+    return appStore.isDark
+  })
+  const chartOption = computed(() => {
+    return sourceOption(isDark.value)
+  })
+  return {
+    chartOption
+  }
+}

src/hooks/responsive.js

@@ -0,0 +1,35 @@
+// 本组件参考 arco-pro 的实现
+// https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/hooks/responsive.ts
+
+import { onMounted, onBeforeMount, onBeforeUnmount } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { useAppStore } from '@/pinia'
+import { addEventListen, removeEventListen } from '@/utils/event'
+
+const WIDTH = 992
+
+function queryDevice() {
+  const rect = document.body.getBoundingClientRect()
+  return rect.width - 1 < WIDTH
+}
+
+export default function useResponsive(immediate) {
+  const appStore = useAppStore()
+  function resizeHandler() {
+    if (!document.hidden) {
+      const isMobile = queryDevice()
+      appStore.toggleDevice(isMobile ? 'mobile' : 'desktop')
+      // appStore.toggleDevice(isMobile);
+    }
+  }
+  const debounceFn = useDebounceFn(resizeHandler, 100)
+  onMounted(() => {
+    if (immediate) debounceFn()
+  })
+  onBeforeMount(() => {
+    addEventListen(window, 'resize', debounceFn)
+  })
+  onBeforeUnmount(() => {
+    removeEventListen(window, 'resize', debounceFn)
+  })
+}

src/hooks/use-windows-resize.js

@@ -0,0 +1,23 @@
+// 监听 window 的 resize 事件，返回当前窗口的宽高
+import { shallowRef } from 'vue'
+import { tryOnMounted, useEventListener } from '@vueuse/core'
+
+const width = shallowRef(0)
+const height = shallowRef(0)
+
+export const useWindowResize = (cb) => {
+  const onResize = () => {
+    width.value = window.innerWidth
+    height.value = window.innerHeight
+    if (cb && typeof cb === 'function') {
+      cb(width.value, height.value)
+    }
+  }
+
+  tryOnMounted(onResize)
+  useEventListener('resize', onResize, { passive: true })
+  return {
+    width,
+    height
+  }
+}