// 在浏览器控制台中运行此脚本，诊断 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. 刷新页面后重新运行此诊断脚本");
})();