修改页面结构

debug-runtime-status.js

@@ -0,0 +1,97 @@
+// 在浏览器 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));
+})();