98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
// 在浏览器 DevTools Console 中运行此脚本，诊断 system-info 页面的实际状态
|
||
|
||
(function () {
|
||
console.clear();
|
||
console.log("=== System-Info 页面运行时诊断 ===\n");
|
||
|
||
// 1. 检查当前路由
|
||
console.log("1️⃣ 当前路由信息:");
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
console.log(" route:", currentPage?.route);
|
||
console.log(" $page.fullPath:", currentPage?.$page?.fullPath);
|
||
console.log("");
|
||
|
||
// 2. 查找 AdminLayout 组件实例
|
||
console.log("2️⃣ 查找 AdminLayout 组件:");
|
||
const layoutRoot = document.querySelector(".layout-root");
|
||
if (!layoutRoot) {
|
||
console.log(" ❌ 找不到 .layout-root");
|
||
console.log(" AdminLayout 可能未渲染");
|
||
return;
|
||
}
|
||
console.log(" ✅ 找到 .layout-root DOM");
|
||
|
||
// 3. 检查 Vue 实例数据
|
||
console.log("\n3️⃣ 检查 Vue 实例数据:");
|
||
|
||
// 获取 Vue 实例（不同版本的获取方式可能不同）
|
||
let vueInstance = null;
|
||
|
||
// 方法1: 从 DOM 上直接获取
|
||
if (layoutRoot.__vue__) {
|
||
vueInstance = layoutRoot.__vue__;
|
||
} else if (layoutRoot.__vueParentComponent) {
|
||
vueInstance = layoutRoot.__vueParentComponent;
|
||
} else if (window.__NUXT__) {
|
||
vueInstance = window.__NUXT__.$el.__vue__;
|
||
}
|
||
|
||
if (!vueInstance) {
|
||
console.log(" ⚠️ 无法直接获取 Vue 实例");
|
||
console.log(" 💡 打开 Vue DevTools 查看组件树");
|
||
} else {
|
||
const ctx = vueInstance.setupState || vueInstance.ctx;
|
||
console.log(" activeMenuId:", ctx?.activeMenuId?.value || "未找到");
|
||
console.log(" activeSubId:", ctx?.activeSubId?.value || "未找到");
|
||
console.log(
|
||
" activeGroups length:",
|
||
ctx?.activeGroups?.value?.length || "未找到",
|
||
);
|
||
}
|
||
|
||
// 4. 检查 AdminSubSider 是否存在
|
||
console.log("\n4️⃣ 检查二级侧边栏:");
|
||
const subSider = document.querySelector(".sub-sider");
|
||
if (subSider) {
|
||
const style = getComputedStyle(subSider);
|
||
console.log(" ✅ 找到 .sub-sider");
|
||
console.log(" display:", style.display);
|
||
console.log(" visibility:", style.visibility);
|
||
} else {
|
||
console.log(" ❌ 找不到 .sub-sider");
|
||
console.log(" 可能原因：");
|
||
console.log(" - activeGroups.length === 0 (v-if 条件不满足)");
|
||
console.log(' - nav 匹配失败，activeMenuId === "home"');
|
||
}
|
||
|
||
// 5. 检查面包屑信息
|
||
console.log("\n5️⃣ 检查面包屑:");
|
||
const breadcrumb = document.querySelector(".breadcrumb");
|
||
if (breadcrumb) {
|
||
console.log(" 内容:", breadcrumb.textContent);
|
||
}
|
||
|
||
// 6. 检查 currentPage prop 是否传递
|
||
console.log("\n6️⃣ 检查 currentPage prop:");
|
||
const parentComponent = layoutRoot?.parentElement?.__vue__;
|
||
if (parentComponent?.props) {
|
||
console.log(" currentPage:", parentComponent.props.currentPage);
|
||
} else {
|
||
console.log(" ⚠️ 无法获取 currentPage prop");
|
||
}
|
||
|
||
// 7. 检查浏览器控制台是否有错误
|
||
console.log("\n7️⃣ 浏览器错误:");
|
||
console.log(" 检查上方是否有红色错误信息");
|
||
console.log(' 特别注意 "Failed to resolve component" 错误');
|
||
|
||
console.log("\n📌 如果 SubSider 不显示:");
|
||
console.log(' ❌ activeMenuId = "home" → 需要检查 nav.uts 匹配');
|
||
console.log(" ❌ activeSubId 为空 → 检查菜单配置");
|
||
console.log(
|
||
" ❌ activeGroups.length = 0 → 检查 maintain 菜单的 groups 数组",
|
||
);
|
||
|
||
console.log("\n" + "=".repeat(50));
|
||
})();
|