# System-Info 页面 Sider/SubSider 不显示 - 诊断报告

## ✅ 检查清单结果

按照 ADMIN_SIDEBAR_COMPLETE_GUIDE.md 的标准进行诊断：

### 1️⃣ 文件配置 - ✅ 通过

- ✅ 文件位置正确: `pages/mall/admin/maintain/system-info.uvue`
- ✅ 编码正确: UTF-8 without BOM
- ✅ SFC 结构正确: `<template>` → `<script>` → `<style>`
- ✅ 导入了 AdminLayout

### 2️⃣ 路由配置 - ✅ 通过

**pages.json (line 603)**:

```json
{
  "path": "maintain/system-info",
  "style": {
    "navigationBarTitleText": "系统信息",
    "navigationStyle": "custom"
  }
}
```

- ✅ `navigationStyle: "custom"` 正确
- ✅ `path` 与文件匹配

### 3️⃣ 菜单配置 - ❌ 关键问题发现！

**menu.uts (line 724-729)**:

```typescript
{
  id: 'system-info',
  title: '系统信息',
  path: '/pages/mall/admin/maintain/system-info',
  children: []
}
```

**❌ 问题**:

- `system-info` 定义为**菜单项本身**，不是一个 MenuGroup
- 它应该是某个一级菜单（如 'maintain'）下的 **二级组（group）**
- 当前结构：顶级数组中的菜单项 → 没有任何分组

**对比工作正常的结构**:

```typescript
// refresh-cache 的结构（工作正常）
{
  id: 'maintain',  // ← 一级菜单
  title: '维护',
  groups: [
    {
      id: 'security-maintain',  // ← 二级组
      title: '安全维护',
      children: [
        {
          id: 'security-refresh-cache',  // ← 三级菜单
          title: '刷新缓存',
          path: '/pages/mall/admin/maintain/security/refresh-cache'
        }
      ]
    }
  ]
}
```

### 4️⃣ 页面文件 - ✅ 通过

```uvue
<AdminLayout currentPage="system-info">
  <!--  页面内容 -->
</AdminLayout>
```

- ✅ `currentPage="system-info"` 设置正确

---

## 🔍 根本原因分析

### 为什么没有 Sider/SubSider？

根据 AdminLayout.uvue 的计算逻辑：

```typescript
const activeGroups = computed(() => {
  const m = menuList.value.find((it) => it.id === activeMenuId.value);
  return m?.groups ?? []; // ← 从菜单项中获取 groups 数组
});
```

**流程追踪**:

1. `currentPage="system-info"`
2. nav.uts 的 `findActiveByCurrentPage()` 无法匹配（因为 system-info 不在任何一级菜单的 groups 中）
3. **降级到默认**: `{ activeMenuId: 'home', activeSubId: '' }`
4. `activeGroups` 获取的是 'home' 菜单的 groups（为空）
5. **条件判断失败**: `v-if="activeGroups.length > 0"` → SubSider 不显示！

---

## 🛠️ 诊断步骤

### 第一步：验证菜单配置

**menu.uts 中检查 maintain 菜单**:

```typescript
{
  id: 'maintain',
  title: '维护',
  icon: '/static/maintain.svg',
  groups: [
    // ... 其他组 ...
    {
      id: 'system-info',  // ← 必须确保 system-info 在 groups 数组中
      title: '系统信息',
      path: '/pages/mall/admin/maintain/system-info',
      children: []
    }
  ]
}
```

**检查清单**:

- [ ] `system-info` 在 `maintain.groups` 数组中
- [ ] `system-info.id === 'system-info'`
- [ ] `system-info.path` 正确
- [ ] `system-info.children` 设置为 `[]`

### 第二步：在浏览器中运行诊断脚本

打开浏览器 DevTools (F12)，在 Console 标签中粘贴运行:

```javascript
// 复制 debug-runtime-status.js 的内容到控制台
```

**关键输出指标**:

- `activeMenuId` 应该是 `"maintain"`（不是 `"home"`）
- `activeSubId` 应该是 `"system-info"`
- `activeGroups` 应该有长度 > 0
- `.sub-sider` DOM 应该存在且 `display !== 'none'`

### 第三步：验证 nav.uts 匹配逻辑

运行导航测试脚本:

```powershell
node test-system-info-nav.js
```

**预期输出**:

```
✅ PASS - 正确匹配到 maintain/system-info
```

如果显示 `maintain/system-info` 匹配失败，说明菜单配置有问题。

---

## 🛠️ 可能的根本原因

### 原因 1: system-info 在错误的位置

❌ **错误** - 顶级菜单项（没有分组）:

```typescript
// menuList 的顶层
[
  { id: 'home', ... },
  { id: 'system-info', ... },  // ← 错误位置！
  { id: 'maintain', groups: [...] }
]
```

✅ **正确** - maintain 菜单的 groups 内:

```typescript
{
  id: 'maintain',
  groups: [
    { id: 'system-info', ... }  // ← 正确位置
  ]
}
```

### 原因 2: nav.uts 未正确检查 group 叶子节点

**必须包含此逻辑**:

```typescript
for (const g of groups) {
  // ⚠️ 关键：先检查 group 本身
  if (g.id === page) {
    return { activeMenuId: m.id, activeSubId: g.id };
  }
  if (g.path && normalize(g.path) === pageNorm) {
    return { activeMenuId: m.id, activeSubId: g.id };
  }
  // 然后才检查 children
  const cs = g.children ?? [];
  // ...
}
```

### 原因 3: AdminLayout 未正确同步状态

**必须在多个生命周期调用 syncActiveByCurrentPage**:

```typescript
watch(
  () => props.currentPage,
  () => syncActiveByCurrentPage(),
  { immediate: true },
);
onMounted(() => syncActiveByCurrentPage());
onShow(() => syncActiveByCurrentPage());
```

---

## 🔧 修复方案

根据诊断结果选择以下方案之一:

**方案 A: 如果 nav 测试失败**
→ 修复 menu.uts，确保 system-info 在 maintain.groups 中

**方案 B: 如果 nav 测试通过但 subsider 仍不显示**
→ 检查浏览器 Vue DevTools:

- activeMenuId 是否为 "maintain"
- activeSubId 是否为 "system-info"
- activeGroups 是否有内容

**方案 C: 如果一切看起来都正确**
→ 清理缓存:

```powershell
Remove-Item -Recurse -Force unpackage\dist
Remove-Item -Recurse -Force .hbuilderx\cache
npm run dev:h5
# 浏览器: Ctrl+Shift+Delete 清理，Ctrl+Shift+R 强制刷新
```

---

## 📊 对比表

| 项目          | system-info (❌ 当前) | refresh-cache (✅ 工作)      |
| ------------- | --------------------- | ---------------------------- |
| 菜单结构      | 顶级菜单项            | 一级 > 二级组 > 三级         |
| 所属分组      | 无                    | maintain > security-maintain |
| nav 匹配结果  | home (默认)           | maintain                     |
| activeGroups  | [] (empty)            | security-maintain's children |
| SubSider 显示 | ❌ 隐藏               | ✅ 显示                      |

---

## ✨ 修复步骤

1. **编辑 menu.uts**
   - 找到 `system-info` 菜单项（line 724-729）
   - 删除或修改它
   - 将其添加到 `maintain` > `groups` 中（建议在最后）

2. **验证菜单 ID 一致性**
   - `menu.uts` 中: `id: 'system-info'`
   - `system-info.uvue` 中: `currentPage="system-info"`
   - ✅ 保持一致

3. **清理缓存**

   ```powershell
   Remove-Item -Recurse -Force unpackage\dist
   Remove-Item -Recurse -Force .hbuilderx\cache
   ```

4. **重启开发服务器 & 清理浏览器缓存**
   - Ctrl+Shift+Delete 清理浏览器
   - Ctrl+Shift+R 强制刷新

---

## 📌 关键学习点

根据 ADMIN_SIDEBAR_COMPLETE_GUIDE.md:

> **第二部分 2.1**: 菜单必须遵循以下结构之一：
>
> - 选项 A: 有子菜单的菜单组（**推荐**）
> - 选项 B: 没有子菜单的菜单组（叶子节点）
>
> **关键**: 子菜单项必须在某个一级菜单的 `groups` 数组内

system-info 当前的结构违反了这一原则，它被定义为顶级菜单项，而不是某个分组下的项。