uni-pda/store/modules/font.js

export default {
  namespaced: true,
  
  state: {
    // 字体缩放比例：1.0=默认, 1.25=大, 1.5=较大, 2.0=最大
    fontScale: 1.0,
    // 字体大小标签
    fontScaleLabel: '默认'
  },
  
  mutations: {
    /**
     * 设置字体缩放比例
     * @param {Object} state - Vuex state
     * @param {Object} payload - { scale: number, label: string }
     */
    SET_FONT_SCALE(state, payload) {
      state.fontScale = payload.scale
      state.fontScaleLabel = payload.label
    }
  },
  
  actions: {
    /**
     * 初始化字体设置
     * 从本地存储读取用户设置，如果没有则使用默认值
     */
    initFontScale({ commit }) {
      try {
        // 优先读取用户手动设置
        const savedFontSize = uni.getStorageSync('userFontScale')
        
        if (savedFontSize) {
          const fontLabels = {
            1.0: '默认',
            1.25: '大',
            1.5: '较大',
            2.0: '最大'
          }
          
          const label = fontLabels[savedFontSize] || '自定义'
          commit('SET_FONT_SCALE', { scale: savedFontSize, label })
          
          console.log('[Vuex字体] 初始化成功，使用用户设置:', savedFontSize)
        } else {
          // 读取系统自动检测的字体缩放
          const systemScale = uni.getStorageSync('fontScale') || 1.0
          
          const fontLabels = {
            1.0: '默认',
            1.25: '大',
            1.5: '较大',
            2.0: '最大'
          }
          
          const label = fontLabels[systemScale] || '跟随系统'
          commit('SET_FONT_SCALE', { scale: systemScale, label })
          
          console.log('[Vuex字体] 初始化成功，使用系统设置:', systemScale)
        }
      } catch (error) {
        console.error('[Vuex字体] 初始化失败:', error)
        commit('SET_FONT_SCALE', { scale: 1.0, label: '默认' })
      }
    },
    
    /**
     * 设置字体缩放
     * @param {Object} param - { commit, dispatch }
     * @param {Object} payload - { scale: number, label: string }
     */
    setFontScale({ commit, dispatch }, payload) {
      try {
        // 更新 Vuex state
        commit('SET_FONT_SCALE', payload)
        
        // 持久化到本地存储
        uni.setStorageSync('userFontScale', payload.scale)
        
        console.log('[Vuex字体] 字体已设置为:', payload.label, '(', payload.scale, ')')
        
        // 应用字体变化到 DOM
        dispatch('applyFontScale', payload.scale)
      } catch (error) {
        console.error('[Vuex字体] 设置失败:', error)
      }
    },
    
    /**
     * 应用字体缩放到 DOM
     * 直接操作根元素字体大小，使所有 rem 单位自动缩放
     */
    applyFontScale(_, scale) {
      const rootFontSize = Math.round(16 * scale * 100) / 100  // 16px 基准
      
      console.log(`[Vuex字体] 应用字体缩放: ${rootFontSize}px (scale=${scale})`)
      
      // #ifdef H5 || APP-PLUS
      try {
        // 设置 document.documentElement
        if (typeof document !== 'undefined' && document.documentElement) {
          document.documentElement.style.fontSize = rootFontSize + 'px'
          console.log('[Vuex字体] ✓ documentElement.fontSize 已设置为', rootFontSize + 'px')
        }
        
        // 设置所有 page 元素
        if (typeof document !== 'undefined') {
          const pages = document.querySelectorAll('page')
          if (pages.length > 0) {
            pages.forEach(p => p.style.fontSize = rootFontSize + 'px')
            console.log('[Vuex字体] ✓ 已设置', pages.length, '个 page 元素')
          }
          
          // 设置 body
          if (document.body) {
            document.body.style.fontSize = rootFontSize + 'px'
          }
        }
      } catch (e) {
        console.warn('[Vuex字体] DOM操作失败:', e)
      }
      // #endif
      
      // #ifdef APP-PLUS
      // 广播到所有 webview，确保已打开的页面也更新字体
      setTimeout(() => {
        try {
          const allWebviews = plus.webview.all()
          let count = 0
          allWebviews.forEach(webview => {
            try {
              const fontSize = rootFontSize + 'px'
              webview.evalJS(`
                if (document.documentElement) document.documentElement.style.fontSize = '${fontSize}';
                if (document.body) document.body.style.fontSize = '${fontSize}';
                document.querySelectorAll('page').forEach(function(p){ p.style.fontSize = '${fontSize}'; });
              `)
              count++
            } catch (e2) {}
          })
          console.log(`[Vuex字体] 已广播到 ${count}/${allWebviews.length} 个webview`)
        } catch (e) {
          console.warn('[Vuex字体] 广播失败:', e)
        }
      }, 200)
      // #endif
      
      // 保存到本地存储，以便其他页面读取
      uni.setStorageSync('fontScale', scale)
    },
    
    /**
     * 重置字体为默认大小
     */
    resetFontScale({ commit, dispatch }) {
      try {
        // 清除用户设置
        uni.removeStorageSync('userFontScale')
        
        // 更新 Vuex state
        commit('SET_FONT_SCALE', { scale: 1.0, label: '默认' })
        
        // 应用默认字体
        dispatch('applyFontScale', 1.0)
        
        console.log('[Vuex字体] 已恢复默认字体大小')
      } catch (error) {
        console.error('[Vuex字体] 重置失败:', error)
      }
    }
  },
  
  getters: {
    /**
     * 获取当前字体缩放比例
     */
    fontScale: state => state.fontScale,
    
    /**
     * 获取当前字体大小标签
     */
    fontScaleLabel: state => state.fontScaleLabel
  }
}