102 lines
3.6 KiB
JavaScript
102 lines
3.6 KiB
JavaScript
// 在浏览器控制台中运行此脚本，诊断 system-info 页面问题
|
||
// 复制整个内容到浏览器控制台并按回车执行
|
||
|
||
(function () {
|
||
console.log("=== System-Info 页面诊断工具 ===\n");
|
||
|
||
// 1. 检查当前路由
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
console.log("1. 当前路由信息:");
|
||
console.log(" - route:", currentPage?.route);
|
||
console.log(" - options:", currentPage?.options);
|
||
console.log("");
|
||
|
||
// 2. 检查 Vue 组件实例（寻找 AdminLayout）
|
||
console.log("2. 查找 AdminLayout 组件实例:");
|
||
try {
|
||
// 通过 DOM 查找 AdminLayout 的根元素
|
||
const layoutRoot = document.querySelector(".layout-root");
|
||
if (layoutRoot) {
|
||
console.log(" ✓ 找到 .layout-root DOM 元素");
|
||
|
||
// 尝试获取 Vue 实例
|
||
const vueInstance = layoutRoot.__vueParentComponent || layoutRoot.__vue__;
|
||
if (vueInstance) {
|
||
console.log(" ✓ 找到 Vue 实例");
|
||
|
||
// 检查 props
|
||
const props = vueInstance.props || vueInstance.propsData;
|
||
console.log(" - currentPage prop:", props?.currentPage);
|
||
|
||
// 检查内部状态
|
||
const setupState = vueInstance.setupState || vueInstance.data;
|
||
if (setupState) {
|
||
console.log(
|
||
" - activeMenuId:",
|
||
setupState.activeMenuId?.value || setupState.activeMenuId,
|
||
);
|
||
console.log(
|
||
" - activeSubId:",
|
||
setupState.activeSubId?.value || setupState.activeSubId,
|
||
);
|
||
console.log(
|
||
" - activeGroups length:",
|
||
(setupState.activeGroups?.value || setupState.activeGroups)?.length,
|
||
);
|
||
}
|
||
} else {
|
||
console.log(" ✗ 未找到 Vue 实例（可能是渲染问题）");
|
||
}
|
||
} else {
|
||
console.log(" ✗ 未找到 .layout-root DOM 元素");
|
||
console.log(" → AdminLayout 组件可能未被渲染！");
|
||
}
|
||
} catch (e) {
|
||
console.log(" ✗ 检查过程出错:", e.message);
|
||
}
|
||
console.log("");
|
||
|
||
// 3. 检查 AdminSubSider
|
||
console.log("3. 检查二级侧边栏:");
|
||
const subSider = document.querySelector(".sub-sider");
|
||
if (subSider) {
|
||
console.log(" ✓ 找到 .sub-sider DOM 元素");
|
||
console.log(
|
||
" - 是否可见:",
|
||
getComputedStyle(subSider).display !== "none",
|
||
);
|
||
} else {
|
||
console.log(" ✗ 未找到 .sub-sider DOM 元素");
|
||
console.log(' → 可能是因为 v-if="activeGroups.length > 0" 条件不满足');
|
||
}
|
||
console.log("");
|
||
|
||
// 4. 检查控制台错误
|
||
console.log("4. 建议排查步骤:");
|
||
console.log(" a) 打开 Vue DevTools 查看组件树");
|
||
console.log(
|
||
' b) 检查是否有 "Failed to resolve component: AdminLayout" 错误',
|
||
);
|
||
console.log(" c) 检查 system-info.uvue 是否正确导入了 AdminLayout");
|
||
console.log(" d) 检查 menu.uts 中 system-info 的配置");
|
||
console.log(" e) 检查网络请求，确保所有资源加载成功");
|
||
console.log("");
|
||
|
||
// 5. 模拟 nav 匹配逻辑
|
||
console.log('5. 模拟导航匹配 (currentPage="system-info"):');
|
||
console.log(" 根据 nav.uts 逻辑，应该匹配到:");
|
||
console.log(' - activeMenuId: "maintain"');
|
||
console.log(' - activeSubId: "system-info"');
|
||
console.log(' - 这应该显示 "维护" 菜单的二级侧边栏');
|
||
console.log("");
|
||
|
||
console.log("=== 诊断完成 ===");
|
||
console.log("如果 AdminLayout 未渲染，请检查:");
|
||
console.log(
|
||
"1. system-info.uvue 文件中是否有 <script setup> 导入 AdminLayout",
|
||
);
|
||
console.log("2. 浏览器控制台是否有编译错误");
|
||
console.log("3. 刷新页面后重新运行此诊断脚本");
|
||
})();
|