修改页面结构

docs/admin/SYSTEM_INFO_FIX_GUIDE.md

@@ -0,0 +1,136 @@
+# 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)