mi-assessment/uniapp/composables/useNavbar.js

/**
 * 导航栏相关组合式函数
 */

import { computed } from 'vue'
import { useAppStore } from '../store/app.js'

/**
 * 导航栏相关功能
 * @returns {Object}
 */
export function useNavbar() {
  const appStore = useAppStore()
  
  // 确保系统信息已初始化
  if (!appStore.initialized) {
    appStore.initSystemInfo()
  }
  
  /**
   * 状态栏高度
   */
  const statusBarHeight = computed(() => appStore.statusBarHeight)
  
  /**
   * 导航栏高度（不含状态栏）
   */
  const navbarHeight = computed(() => appStore.navbarHeight)
  
  /**
   * 导航栏总高度（状态栏 + 导航栏）
   */
  const totalNavbarHeight = computed(() => appStore.totalNavbarHeight)
  
  /**
   * 内容区域顶部padding
   */
  const contentPaddingTop = computed(() => appStore.contentPaddingTop)
  
  /**
   * 获取导航栏样式
   * @param {boolean} [fixed=true] - 是否固定定位
   * @returns {Object}
   */
  function getNavbarStyle(fixed = true) {
    const style = {
      paddingTop: `${statusBarHeight.value}px`,
      height: `${totalNavbarHeight.value}px`
    }
    
    if (fixed) {
      style.position = 'fixed'
      style.top = '0'
      style.left = '0'
      style.right = '0'
      style.zIndex = '999'
    }
    
    return style
  }
  
  /**
   * 获取内容区域样式（用于自定义导航栏页面）
   * @returns {Object}
   */
  function getContentStyle() {
    return {
      paddingTop: `${totalNavbarHeight.value}px`
    }
  }
  
  /**
   * 获取占位元素样式
   * @returns {Object}
   */
  function getPlaceholderStyle() {
    return {
      height: `${totalNavbarHeight.value}px`
    }
  }
  
  return {
    statusBarHeight,
    navbarHeight,
    totalNavbarHeight,
    contentPaddingTop,
    getNavbarStyle,
    getContentStyle,
    getPlaceholderStyle
  }
}

export default useNavbar