修改页面结构
This commit is contained in:
306
SYSTEM_INFO_DIAGNOSIS.md
Normal file
306
SYSTEM_INFO_DIAGNOSIS.md
Normal file
@@ -0,0 +1,306 @@
|
||||
# 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 当前的结构违反了这一原则，它被定义为顶级菜单项，而不是某个分组下的项。
|
||||
Reference in New Issue
Block a user