feat: 前端搭建

Yi.Ai.Vue3/src/hooks/useScreen.ts

@@ -0,0 +1,36 @@
+import { useBreakpoints } from '@vueuse/core';
+import { reactive } from 'vue';
+
+export const breakpointsEnum = {
+  xl: 1600,
+  lg: 1199,
+  md: 991,
+  sm: 767,
+  xs: 575,
+};
+
+export function useScreenStore() {
+  const breakpoints = reactive(useBreakpoints(breakpointsEnum));
+  // 手机端
+  const isMobile = breakpoints.smaller('sm');
+  // pad端
+  const isPad = breakpoints.between('sm', 'md');
+  // pc端
+  const isDesktop = breakpoints.greater('md');
+  // 登录页面一
+  const isScreen = breakpoints.smaller('lg');
+  return {
+    breakpoints,
+    isMobile,
+    isPad,
+    isDesktop,
+    isScreen,
+  };
+}
+
+// 使用步骤
+/** 适配移动端开始 */
+// import { useScreenStore } from "@/hooks/useScreen";
+// 获取当前为[移动端、IPad、PC端]仓库，可以使用 watchEffect(() => {}) 进行监听。
+// const { isMobile } = useScreenStore();
+/** 适配移动端结束 */