overseas-jsm-mall-front/src/utils/vue3-plugin.js

// vue3-plugin.js
import { inject } from 'vue'
import { domProcessor } from './text-processor'
import { antdProcessor } from './antd-processor'

export const GlobalTextProcessor = {
  install(app) {
    // 启动 Ant Design 处理器
    antdProcessor.initObserver()

    // 添加全局方法
    app.config.globalProperties.$processTextNodes = function (element = this.$el) {
      domProcessor.processElement(element)
      antdProcessor.processAntdComponents()
    }

    app.config.globalProperties.$autoSelect = function (className) {
      domProcessor.processSelector(`.${className}`)
    }

    app.config.globalProperties.$autoHtmlSelect = function (tagName) {
      domProcessor.processTagName(tagName)
    }

    // 添加 Ant Design 特定方法
    app.config.globalProperties.$processAntdComponents = function () {
      antdProcessor.processAntdComponents()
    }

    // 使用指令方式
    app.directive('translate', {
      mounted(el) {
        domProcessor.processElement(el)
        antdProcessor.processAntdComponent(el)
      },
      updated(el) {
        domProcessor.processElement(el)
        antdProcessor.processAntdComponent(el)
      }
    })

    // 使用 mixin
    app.mixin({
      updated() {
        this.$nextTick(() => {
          this.$processTextNodes(this.$el)
          this.$autoHtmlSelect('title')
        })
      },
      mounted() {
        this.$nextTick(() => {
          this.$processAntdComponents()
        })
      }
    })

    // 提供 Composition API
    app.provide('textProcessor', {
      processTextNodes: (element) => {
        domProcessor.processElement(element)
        antdProcessor.processAntdComponents()
      },
      processAntdComponents: () => antdProcessor.processAntdComponents(),
      autoSelect: (className) => domProcessor.processSelector(`.${className}`),
      autoHtmlSelect: (tagName) => domProcessor.processTagName(tagName)
    })
  }
}

// Composition API
export function useTextProcessor() {
  const injector = inject('textProcessor', null)
  
  const processTextNodes = (element) => {
    injector?.processTextNodes(element)
  }

  const processAntdComponents = () => {
    injector?.processAntdComponents()
  }

  const autoSelect = (className) => {
    injector?.autoSelect(className)
  }

  const autoHtmlSelect = (tagName) => {
    injector?.autoHtmlSelect(tagName)
  }

  return {
    processTextNodes,
    processAntdComponents,
    autoSelect,
    autoHtmlSelect
  }
}