mock数据，AI对话，全部应用

urbanLifelineWeb/temp/deviceUtils.ts

@@ -0,0 +1,109 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * 设备类型枚举
+ */
+export enum DeviceType {
+  MOBILE = 'mobile',  // h5移动端
+  DESKTOP = 'desktop' // web桌面端
+}
+
+/**
+ * 屏幕尺寸断点
+ */
+export const BREAKPOINTS = {
+  mobile: 768,   // 小于768px为移动端(h5)
+  desktop: 768   // 大于等于768px为桌面端(web)
+};
+
+/**
+ * 检测当前设备类型
+ */
+export function getDeviceType(): DeviceType {
+  const width = window.innerWidth;
+  
+  if (width < BREAKPOINTS.mobile) {
+    return DeviceType.MOBILE;  // h5移动端
+  } else {
+    return DeviceType.DESKTOP; // web桌面端
+  }
+}
+
+/**
+ * 检测是否为移动端
+ */
+export function isMobile(): boolean {
+  return getDeviceType() === DeviceType.MOBILE;
+}
+
+/**
+ * 检测是否为桌面端
+ */
+export function isDesktop(): boolean {
+  return getDeviceType() === DeviceType.DESKTOP;
+}
+
+/**
+ * 响应式设备类型 Hook
+ */
+export function useDevice() {
+  const deviceType = ref<DeviceType>(getDeviceType());
+  const isMobileDevice = ref(isMobile());
+  const isDesktopDevice = ref(isDesktop());
+
+  const updateDeviceType = () => {
+    deviceType.value = getDeviceType();
+    isMobileDevice.value = isMobile();
+    isDesktopDevice.value = isDesktop();
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', updateDeviceType);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateDeviceType);
+  });
+
+  return {
+    deviceType,
+    isMobileDevice,
+    isDesktopDevice
+  };
+}
+
+/**
+ * 根据设备类型获取对应的组件路径
+ */
+export function getComponentPath(basePath: string, deviceType?: DeviceType): string {
+  const currentDeviceType = deviceType || getDeviceType();
+  
+  // 如果是移动端(h5)，尝试加载移动端版本
+  if (currentDeviceType === DeviceType.MOBILE) {
+    const mobilePath = basePath.replace('.vue', '.mobile.vue');
+    return mobilePath;
+  }
+  
+  // 默认返回桌面版本(web)
+  return basePath;
+}
+
+/**
+ * 动态导入组件，支持回退机制
+ */
+export async function importResponsiveComponent(basePath: string) {
+  const deviceType = getDeviceType();
+  
+  // 尝试加载设备特定的组件
+  if (deviceType === DeviceType.MOBILE) {
+    try {
+      const mobilePath = basePath.replace('.vue', '.mobile.vue');
+      return await import(/* @vite-ignore */ mobilePath);
+    } catch {
+      // 移动端组件不存在，回退到默认组件
+    }
+  }
+  
+  // 加载默认组件(桌面端/web)
+  return await import(/* @vite-ignore */ basePath);
+}