huangzhenbao/medical-mall

Fork 0

Files

huangzhenbao 21f4a0fa96 修改页面结构

2026-02-02 20:07:37 +08:00

7.1 KiB

Raw Blame History

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):

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

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

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

menu.uts (line 724-729):

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

❌ 问题:

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

对比工作正常的结构:

// 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️⃣ 页面文件 - ✅ 通过

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

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

🔍 根本原因分析

为什么没有 Sider/SubSider？

根据 AdminLayout.uvue 的计算逻辑：

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

流程追踪:

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

🛠️ 诊断步骤

第一步：验证菜单配置

menu.uts 中检查 maintain 菜单:

{
  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 标签中粘贴运行:

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

关键输出指标:

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

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

运行导航测试脚本:

node test-system-info-nav.js

预期输出:

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

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

🛠️ 可能的根本原因

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

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

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

✅ 正确 - maintain 菜单的 groups 内:

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

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

必须包含此逻辑:

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:

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: 如果一切看起来都正确 → 清理缓存:

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 显示	❌ 隐藏	✅ 显示

✨ 修复步骤

编辑 menu.uts
- 找到 system-info 菜单项（line 724-729）
- 删除或修改它
- 将其添加到 maintain > groups 中（建议在最后）
验证菜单 ID 一致性
- menu.uts 中: id: 'system-info'
- system-info.uvue 中: currentPage="system-info"
- ✅ 保持一致

清理缓存

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

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

📌 关键学习点

根据 ADMIN_SIDEBAR_COMPLETE_GUIDE.md:

第二部分 2.1: 菜单必须遵循以下结构之一：

选项 A: 有子菜单的菜单组（推荐）

选项 B: 没有子菜单的菜单组（叶子节点）

关键: 子菜单项必须在某个一级菜单的 groups 数组内

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

7.1 KiB Raw Blame History Unescape Escape