fix: 前端页面架构重构初版

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

@@ -0,0 +1,72 @@
+import { useBreakpoints, useWindowSize } from '@vueuse/core';
+import { computed } from 'vue';
+
+// 断点定义
+export const breakpoints = {
+  xs: 0, // 手机竖屏 < 640px
+  sm: 640, // 手机横屏 ≥ 640px
+  md: 768, // 平板 ≥ 768px
+  lg: 1024, // 小桌面 ≥ 1024px
+  xl: 1280, // 桌面 ≥ 1280px
+  xxl: 1536, // 大桌面 ≥ 1536px
+};
+
+export function useResponsive() {
+  const bp = useBreakpoints(breakpoints);
+
+  // 设备类型判断
+  const isMobile = bp.smaller('md'); // < 768px
+  const isTablet = bp.between('md', 'lg'); // 768px - 1024px
+  const isDesktop = bp.greaterOrEqual('lg'); // ≥ 1024px
+
+  // 精确断点
+  const isXs = bp.smaller('sm'); // < 640px
+  const isSm = bp.between('sm', 'md'); // 640px - 768px
+  const isMd = bp.between('md', 'lg'); // 768px - 1024px
+  const isLg = bp.between('lg', 'xl'); // 1024px - 1280px
+  const isXl = bp.between('xl', 'xxl'); // 1280px - 1536px
+  const isXxl = bp.greater('xxl'); // > 1536px
+
+  // 监听窗口变化
+  const { width, height } = useWindowSize();
+
+  // 方向检测
+  const isPortrait = computed(() => height.value > width.value);
+  const isLandscape = computed(() => width.value > height.value);
+
+  // 当前断点名称
+  const currentBreakpoint = computed(() => {
+    if (isXs.value) return 'xs';
+    if (isSm.value) return 'sm';
+    if (isMd.value) return 'md';
+    if (isLg.value) return 'lg';
+    if (isXl.value) return 'xl';
+    return 'xxl';
+  });
+
+  return {
+    // 设备类型
+    isMobile,
+    isTablet,
+    isDesktop,
+
+    // 精确断点
+    isXs,
+    isSm,
+    isMd,
+    isLg,
+    isXl,
+    isXxl,
+
+    // 尺寸
+    width,
+    height,
+
+    // 方向
+    isPortrait,
+    isLandscape,
+
+    // 当前断点名称
+    currentBreakpoint,
+  };
+}