102 lines
3.7 KiB
JavaScript
102 lines
3.7 KiB
JavaScript
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 { 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('[AKSRT] 全局错误:', 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;">AKSRT 正在加载...</p>'
|
|
+ '<p style="font-size:13px;color:#999;">如果长时间停留在此页面，请按 F12 查看控制台错误</p>'
|
|
+ '</div>'
|
|
}
|
|
showFallback(document.getElementById('aksrt-admin-app') || document.body.appendChild(
|
|
Object.assign(document.createElement('div'), { id: 'aksrt-admin-app' })
|
|
))
|
|
|
|
/**
|
|
* 获取或创建一个干净的挂载容器
|
|
* 核心问题：WordPress 后台的 jQuery/脚本会在页面加载后持续操作 DOM，
|
|
* 导致 PHP 输出的 <div id="aksrt-admin-app"> 可能被外部修改或其兄弟节点被移除，
|
|
* Vue patch 时遍历到 null 节点 → nextSibling 报错。
|
|
*
|
|
* 解决方案：在挂载前一刻，动态创建一个全新的容器元素替换旧的，
|
|
* 确保该节点及其父级在 Vue 接管前不被任何外部脚本污染。
|
|
*/
|
|
function getCleanContainer() {
|
|
const existing = document.getElementById('aksrt-admin-app')
|
|
if (!existing) {
|
|
// 极端情况：PHP 没有输出容器，手动创建
|
|
const fresh = document.createElement('div')
|
|
fresh.id = 'aksrt-admin-app'
|
|
document.body.appendChild(fresh)
|
|
return fresh
|
|
}
|
|
|
|
// 创建全新容器替换旧容器
|
|
// 这确保新容器没有 WP 脚本留下的任何副作用（事件监听、属性等）
|
|
const parent = existing.parentNode
|
|
if (!parent) {
|
|
// 旧容器已脱离文档树，重新创建
|
|
const fresh = document.createElement('div')
|
|
fresh.id = 'aksrt-admin-app'
|
|
document.body.appendChild(fresh)
|
|
return fresh
|
|
}
|
|
|
|
const fresh = document.createElement('div')
|
|
fresh.id = 'aksrt-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('[AKSRT] Vue 挂载失败:', err)
|
|
showError(getCleanContainer(), err)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
}).catch((err) => {
|
|
console.error('[AKSRT] Router 初始化失败:', err)
|
|
})
|