137 lines
3.6 KiB
Markdown
137 lines
3.6 KiB
Markdown
# 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)
|