修改页面结构

debug-system-info-browser.js

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