wordpress-theme-aksrt/assets/admin/src/main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import NaiveUI from 'naive-ui'
import App from './App.vue'
import router from './router'
import './style.css'
import './styles/sortable-list.css'
import { styleMountTarget } from './style-target'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(NaiveUI)

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error('[Jio] 全局错误:', err, info)
}

// 兜底：立即显示加载状态（防止白屏）
function showFallback(el) {
  el.innerHTML = '<div style="padding:40px;text-align:center;color:#666;font-family:sans-serif;">'
    + '<p style="font-size:18px;margin-bottom:8px;">Jio 正在加载...</p>'
    + '<p style="font-size:13px;color:#999;">如果长时间停留在此页面，请按 F12 查看控制台错误</p>'
    + '</div>'
}
showFallback(document.getElementById('jio-admin-app') || document.body.appendChild(
  Object.assign(document.createElement('div'), { id: 'jio-admin-app' })
))

/**
 * 获取或创建一个干净的挂载容器
 * 核心问题：WordPress 后台的 jQuery/脚本会在页面加载后持续操作 DOM，
 * 导致 PHP 输出的 <div id="jio-admin-app"> 可能被外部修改或其兄弟节点被移除，
 * Vue patch 时遍历到 null 节点 → nextSibling 报错。
 *
 * 解决方案：在挂载前一刻，动态创建一个全新的容器元素替换旧的，
 * 确保该节点及其父级在 Vue 接管前不被任何外部脚本污染。
 */
function getCleanContainer() {
  const existing = document.getElementById('jio-admin-app')
  if (!existing) {
    // 极端情况：PHP 没有输出容器，手动创建
    const fresh = document.createElement('div')
    fresh.id = 'jio-admin-app'
    document.body.appendChild(fresh)
    return fresh
  }

  // 创建全新容器替换旧容器
  // 这确保新容器没有 WP 脚本留下的任何副作用（事件监听、属性等）
  const parent = existing.parentNode
  if (!parent) {
    // 旧容器已脱离文档树，重新创建
    const fresh = document.createElement('div')
    fresh.id = 'jio-admin-app'
    document.body.appendChild(fresh)
    return fresh
  }

  const fresh = document.createElement('div')
  fresh.id = 'jio-admin-app'

  // 将旧容器的位置信息转移给新容器（保留 fallback 内容）
  fresh.innerHTML = existing.innerHTML || ''
  parent.replaceChild(fresh, existing)

  return fresh
}

/**
 * 显示错误信息
 */
function showError(container, err) {
  container.innerHTML = '<div style="padding:40px;text-align:center;color:#e74c3c;font-family:sans-serif;">'
    + '<p style="font-size:16px;margin-bottom:12px;">页面加载失败</p>'
    + '<p style="font-size:13px;color:#999;word-break:break-all;">' + (err.message || String(err)) + '</p>'
    + '<button onclick="location.reload()" style="margin-top:16px;padding:8px 24px;cursor:pointer;border:1px solid #e74c3c;background:none;color:#e74c3c;border-radius:4px;font-size:14px;">重新加载</button>'
    + '</div>'
}

// 等待 router 就绪后延迟挂载
router.isReady().then(() => {
  // 三重 rAF：确保 load-scripts.php 加载的所有 jQuery 插件完成初始化和 DOM 操作
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        try {
          const container = getCleanContainer()
          // 关键：在挂载前设置样式注入目标，确保 NaiveUI 组件渲染时目标已就绪
          styleMountTarget.value = container
          app.mount(container)
        } catch (err) {
          console.error('[Jio] Vue 挂载失败:', err)
          showError(getCleanContainer(), err)
        }
      })
    })
  })
}).catch((err) => {
  console.error('[Jio] Router 初始化失败:', err)
})