test-repo/docs/.vitepress/theme/components/appendix/auth-design/shared/composables.js

// auth-design 公共组合式函数
import { ref, computed, onMounted, onUnmounted } from 'vue'

/**
 * 延迟函数
 * @param {number} ms - 延迟毫秒数
 * @returns {Promise<void>}
 */
export const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

/**
 * 防抖函数
 * @param {Function} fn - 要防抖的函数
 * @param {number} wait - 等待时间（毫秒）
 * @returns {Function}
 */
export const useDebounce = (fn, wait = 300) => {
  let timeout = null
  return (...args) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => fn(...args), wait)
  }
}

/**
 * 步骤流程管理
 * @param {Array} steps - 步骤数组
 * @param {number} stepDelay - 每步延迟时间
 * @returns {Object}
 */
export const useStepFlow = (steps, stepDelay = 800) => {
  const currentStep = ref(0)
  const isProcessing = ref(false)

  const startFlow = async () => {
    isProcessing.value = true
    for (let i = 0; i < steps.length; i++) {
      currentStep.value = i + 1
      await delay(stepDelay)
    }
    isProcessing.value = false
  }

  const resetFlow = () => {
    currentStep.value = 0
    isProcessing.value = false
  }

  return {
    currentStep,
    isProcessing,
    startFlow,
    resetFlow
  }
}

/**
 * 异步操作状态管理
 * @returns {Object}
 */
export const useAsyncState = () => {
  const isLoading = ref(false)
  const error = ref(null)
  const data = ref(null)

  const execute = async (fn) => {
    isLoading.value = true
    error.value = null
    try {
      const result = await fn()
      data.value = result
      return result
    } catch (err) {
      error.value = err
      throw err
    } finally {
      isLoading.value = false
    }
  }

  const reset = () => {
    isLoading.value = false
    error.value = null
    data.value = null
  }

  return {
    isLoading,
    error,
    data,
    execute,
    reset
  }
}

/**
 * 定时器管理
 * @returns {Object}
 */
export const useTimer = () => {
  const timer = ref(null)
  const isRunning = ref(false)

  const start = (callback, interval) => {
    if (timer.value) clearInterval(timer.value)
    isRunning.value = true
    timer.value = setInterval(callback, interval)
  }

  const stop = () => {
    if (timer.value) {
      clearInterval(timer.value)
      timer.value = null
      isRunning.value = false
    }
  }

  onUnmounted(() => {
    stop()
  })

  return {
    isRunning,
    start,
    stop
  }
}

/**
 * 切换状态
 * @param {boolean} initialValue - 初始值
 * @returns {Object}
 */
export const useToggle = (initialValue = false) => {
  const value = ref(initialValue)

  const toggle = () => {
    value.value = !value.value
  }

  const setTrue = () => {
    value.value = true
  }

  const setFalse = () => {
    value.value = false
  }

  return {
    value,
    toggle,
    setTrue,
    setFalse
  }
}

/**
 * 动画控制
 * @param {number} duration - 动画持续时间（毫秒）
 * @returns {Object}
 */
export const useAnimation = (duration = 300) => {
  const isAnimating = ref(false)

  const animate = async (callback) => {
    isAnimating.value = true
    await callback()
    await delay(duration)
    isAnimating.value = false
  }

  return {
    isAnimating,
    animate
  }
}

/**
 * 生成随机 ID
 * @param {string} prefix - 前缀
 * @returns {string}
 */
export const generateId = (prefix = 'id') => {
  return `${prefix}_${Math.random().toString(36).substring(2, 15)}`
}

/**
 * 格式化时间戳
 * @param {number} timestamp - 时间戳
 * @returns {string}
 */
export const formatTimestamp = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleTimeString()
}

/**
 * 深拷贝对象
 * @param {*} obj - 要拷贝的对象
 * @returns {*}
 */
export const deepClone = (obj) => {
  if (obj === null || typeof obj !== 'object') return obj
  if (obj instanceof Date) return new Date(obj.getTime())
  if (obj instanceof Array) return obj.map((item) => deepClone(item))
  if (obj instanceof Object) {
    const clonedObj = {}
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        clonedObj[key] = deepClone(obj[key])
      }
    }
    return clonedObj
  }
}

/**
 * 批量更新状态
 * @param {Object} stateRef - 状态引用
 * @param {Object} updates - 更新内容
 */
export const batchUpdate = (stateRef, updates) => {
  Object.assign(stateRef.value, updates)
}

/**
 * 评分转换为星星
 * @param {number} score - 评分 (1-5)
 * @returns {string}
 */
export const scoreToStars = (score) => {
  return '⭐'.repeat(Math.floor(score))
}