Do Best Things AI Code

    
/**
 * 自定义 Hook，用于监控网络连接状态并显示相应的通知
 * @param options - 可选的配置选项
 * @returns 包含网络状态信息和 checkNetworkQuality 方法的对象
 */
export function useNetworkMonitor(options: UseNetworkMonitorOptions = {}) {
  const {
    thresholds = defaultThresholds, // 自定义的网络质量阈值，默认为默认阈值
    notificationOptions = defaultNotificationOptions, // 自定义的通知选项，默认为默认选项
    customOfflineHandler, // 自定义的网络断开处理函数
    customPoorNetworkHandler, // 自定义的网络状况不佳处理函数
  } = options

  const networkInfo = useNetwork() // 获取网络状态信息
  const lastNotificationType = ref<'offline' | 'poor' | null>(null) // 上次显示的通知类型

  /**
   * 检查网络质量并显示相应的通知
   */
  const checkNetworkQuality = () => {
    const { isOnline, offlineAt, downlink, rtt, effectiveType } = networkInfo

    if (!isOnline.value) {
      if (customOfflineHandler) {
        customOfflineHandler(offlineAt.value) // 调用自定义的网络断开处理函数
      } else if (lastNotificationType.value !== 'offline') {
        const offlineTime = offlineAt.value
          ? new Date(offlineAt.value).toLocaleString() // 获取断开时间
          : '未知时间'
        notification.error({
          message: '网络连接断开', // 错误通知标题
          description: '您的网络连接已于 ${offlineTime} 断开。请检查您的网络设置并尝试重新连接。', // 错误通知描述
          ...notificationOptions, // 合并自定义的通知选项
        })
        lastNotificationType.value = 'offline' // 更新上次显示的通知类型
      }
    } else if (
      (typeof downlink.value === 'number' && downlink.value < thresholds.poorDownlink) // 下行速度低于阈值
    ) {
      if (customPoorNetworkHandler) {
        customPoorNetworkHandler(networkInfo) // 调用自定义的网络状况不佳处理函数
      } else if (lastNotificationType.value !== 'poor') {
        notification.warning({
          message: '网络状况不佳', // 警告通知标题
          description: '当前网络类型为 ${effectiveType.value}，下行速度约 ${downlink.value?.toFixed(2) ?? '未知'} Mbps，响应时间约 ${rtt.value ?? '未知'} ms。这可能会影响您的使用体验，请检查您的网络连接。', // 警告通知描述
          ...notificationOptions, // 合并自定义的通知选项
        })
        lastNotificationType.value = 'poor' // 更新上次显示的通知类型
      }
    } else {
      lastNotificationType.value = null // 重置上次显示的通知类型
    }
  }

  watch(
    [
      networkInfo.isOnline, // 监听网络是否在线
      networkInfo.effectiveType, // 监听网络类型
      networkInfo.downlink, // 监听下行速度
      networkInfo.rtt, // 监听响应时间
    ],
    () => {
      checkNetworkQuality() // 网络状态变化时检查网络质量
    },
  )

  return {
    ...networkInfo, // 返回网络状态信息
    checkNetworkQuality, // 返回 checkNetworkQuality 方法
  }
}