# System-Info 页面侧边栏问题完整解决方案

## 问题现象

- refresh-cache.uvue、online-upgrade.uvue、system-log.uvue 添加 AdminLayout 导入后工作正常
- system-info.uvue 添加相同的导入后仍然没有侧边栏
- 浏览器控制台显示 "Failed to resolve component: AdminLayout"

## 问题分析

### 1. 已确认正确的部分

- ✅ nav.uts 匹配逻辑正确（通过测试脚本验证）
- ✅ menu.uts 中 system-info 配置正确
- ✅ AdminLayout.uvue 逻辑正确
- ✅ tsconfig.json 中 @ 别名配置正确
- ✅ pages.json 中路由配置正确

### 2. 可能的原因

#### 原因 1: 浏览器缓存

H5 开发时，浏览器可能缓存了旧版本的 system-info.uvue

#### 原因 2: HBuilderX/vite 编译缓存

编译器可能缓存了有问题的版本

#### 原因 3: 文件编码或隐藏字符

system-info.uvue 可能有不可见的特殊字符导致解析失败

#### 原因 4: 热更新问题

开发服务器的热更新可能没有正确处理这个文件

## 完整解决步骤

### 步骤 1: 清理缓存

```powershell
# 在项目根目录执行
Remove-Item -Recurse -Force unpackage\dist -ErrorAction SilentlyContinue
Remove-Item -Recurse -Force .hbuilderx\cache -ErrorAction SilentlyContinue
Remove-Item -Recurse -Force node_modules\.vite -ErrorAction SilentlyContinue
```

### 步骤 2: 重新构建 system-info.uvue

完全删除并重新创建文件，确保没有隐藏字符

### 步骤 3: 验证文件内容

使用以下命令检查文件编码：

```powershell
Get-Content "d:\骅锋\mall\pages\mall\admin\maintain\system-info.uvue" -Encoding UTF8 | Measure-Object -Line
```

### 步骤 4: 重启开发服务器

1. 停止当前的 dev:h5 进程（Ctrl+C）
2. 清理浏览器缓存（Ctrl+Shift+Delete）
3. 重新启动: `npm run dev:h5`

### 步骤 5: 强制刷新浏览器

访问 system-info 页面时使用 Ctrl+Shift+R 强制刷新

## 备用方案

如果上述步骤无效，尝试以下方案：

### 方案 A: 使用相对路径导入

将 system-info.uvue 中的导入改为：

```typescript
import AdminLayout from "../../../layouts/admin/AdminLayout.uvue";
```

### 方案 B: 检查文件名大小写

确保文件名完全匹配（包括大小写）：

- 文件: system-info.uvue
- menu.uts: id: 'system-info'
- currentPage: "system-info"

### 方案 C: 使用其他工作文件作为模板

复制 refresh-cache.uvue 的内容，只修改必要的部分：

```powershell
Copy-Item "d:\骅锋\mall\pages\mall\admin\maintain\security\refresh-cache.uvue" "d:\骅锋\mall\pages\mall\admin\maintain\system-info-new.uvue"
# 然后手动修改 system-info-new.uvue 的内容
# 测试通过后重命名回 system-info.uvue
```

## 调试工具

### 浏览器控制台诊断脚本

在浏览器控制台运行 `d:\骅锋\mall\debug-system-info-browser.js` 的内容

### Node.js 测试脚本

```powershell
node "d:\骅锋\mall\test-system-info-nav.js"
```

## 预期结果

修复后，访问 system-info 页面应该：

1. 显示主侧边栏（"维护"菜单高亮）
2. 显示二级侧边栏（包含"系统信息"等子菜单）
3. 面包屑显示：维护 / 系统信息
4. 没有 "Failed to resolve component: AdminLayout" 错误

## 验证清单

- [ ] 浏览器控制台无错误
- [ ] Vue DevTools 中能看到 AdminLayout 组件
- [ ] 主侧边栏显示且 "维护" 高亮
- [ ] 二级侧边栏显示
- [ ] 面包屑正确显示
- [ ] 页面内容正常渲染

## 相关文件

- 页面文件: `pages/mall/admin/maintain/system-info.uvue`
- 布局组件: `layouts/admin/AdminLayout.uvue`
- 导航逻辑: `layouts/admin/utils/nav.uts`
- 菜单配置: `layouts/admin/utils/menu.uts`
- 路由配置: `pages.json` (line 604)