初始化 ui.

orion-ops-ui/src/hooks/responsive.ts

@@ -0,0 +1,32 @@
+import { onMounted, onBeforeMount, onBeforeUnmount } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { useAppStore } from '@/store';
+import { addEventListen, removeEventListen } from '@/utils/event';
+
+const WIDTH = 992; // https://arco.design/vue/component/grid#responsivevalue
+
+function queryDevice() {
+  const rect = document.body.getBoundingClientRect();
+  return rect.width - 1 < WIDTH;
+}
+
+export default function useResponsive(immediate?: boolean) {
+  const appStore = useAppStore();
+  function resizeHandler() {
+    if (!document.hidden) {
+      const isMobile = queryDevice();
+      appStore.toggleDevice(isMobile ? 'mobile' : 'desktop');
+      appStore.toggleMenu(isMobile);
+    }
+  }
+  const debounceFn = useDebounceFn(resizeHandler, 100);
+  onMounted(() => {
+    if (immediate) debounceFn();
+  });
+  onBeforeMount(() => {
+    addEventListen(window, 'resize', debounceFn);
+  });
+  onBeforeUnmount(() => {
+    removeEventListen(window, 'resize', debounceFn);
+  });
+}