overseas-jsm-mall-front/src/utils/antd-processor.js

// antd-processor.js
import { domProcessor } from './text-processor'

// Ant Design Vue 特定处理器
export const antdProcessor = {
  // Ant Design 组件选择器
  antdSelectors: [
    '.ant-btn',                    // 按钮
    '.ant-btn > span',             // 按钮文本
    '.ant-modal-title',            // 模态框标题
    '.ant-menu-item',              // 菜单项
    '.ant-tabs-tab',               // 标签页
    '.ant-table-title',            // 表格标题
    '.ant-pagination-item',        // 分页项
    '.ant-select-item',            // 选择器选项
    '.ant-form-item-label > label', // 表单标签
    '.ant-card-head-title',        // 卡片标题
    '.ant-descriptions-item-label', // 描述列表标签
    '.ant-descriptions-item-content', // 描述列表内容
    '.ant-result-title',           // 结果页标题
    '.ant-result-subtitle',        // 结果页副标题
    '.ant-empty-description',      // 空状态描述
    '.ant-alert-message',          // 警告框消息
    '.ant-alert-description',      // 警告框描述
    '.ant-table',
    '.ant-table-cell'
  ],

  // 初始化 DOM 观察器
  initObserver() {
    if (this.observer) return

    this.observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            this.processAntdComponent(node)
            this.processDynamicContent(node)
          }
        })
      })
    })

    this.observer.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['title', 'placeholder', 'aria-label']
    })
  },

  // 处理所有 Ant Design 组件
  processAntdComponents() {
    this.antdSelectors.forEach(selector => {
      try {
        document.querySelectorAll(selector).forEach(element => {
          this.processAntdComponent(element)
        })
      } catch (error) {
        console.warn(`处理选择器 ${selector} 失败:`, error)
      }
    })

    // 处理动态内容
    this.processDynamicComponents()
  },

  // 处理单个 Ant Design 组件
  processAntdComponent(element) {
    if (!element || element._antdProcessed) return
    element._antdProcessed = true

    domProcessor.processElement(element)
  },

  // 处理动态生成的组件
  processDynamicComponents() {
    // 处理消息提示
    this.processSelector('.ant-message .ant-message-notice-content')
    
    // 处理通知
    this.processSelector('.ant-notification-notice')
    
    // 处理工具提示
    this.processSelector('.ant-tooltip-inner')
    
    // 处理弹出框
    this.processSelector('.ant-popover-inner')
  },

  // 处理选择器
  processSelector(selector) {
    document.querySelectorAll(selector).forEach(element => {
      this.processAntdComponent(element)
    })
  },

  // 处理动态内容
  processDynamicContent(element) {
    // 处理消息提示
    if (element.classList?.contains('ant-message')) {
      element.querySelectorAll('.ant-message-notice-content').forEach(notice => {
        this.processAntdComponent(notice)
      })
    }

    // 处理通知
    if (element.classList?.contains('ant-notification')) {
      element.querySelectorAll('.ant-notification-notice').forEach(notice => {
        this.processAntdComponent(notice)
      })
    }
  },

  // 销毁观察器
  destroy() {
    if (this.observer) {
      this.observer.disconnect()
      this.observer = null
    }
  }
}