修改页面结构

2026-02-02 20:07:37 +08:00
parent 3de5e9ebe9
commit 21f4a0fa96
209 changed files with 41824 additions and 2730 deletions
--- a/docs/admin/SYSTEM_INFO_SIDEBAR_FIX.md
+++ b/docs/admin/SYSTEM_INFO_SIDEBAR_FIX.md
@@ -0,0 +1,232 @@
+# system-info 页面侧边栏问题完整解决方案
+
+## 问题描述
+
+用户反映 `pages/mall/admin/maintain/system-info.uvue` 页面：
+
+1. 没有侧边栏显示
+2. 菜单高亮跳转到首页
+
+## 根本原因分析
+
+### 1. system-info 在菜单中的特殊结构
+
+在 `layouts/admin/utils/menu.uts` 中，`system-info` 是作为 **MenuGroup 叶子节点** 存在：
+
+```ts
+{
+  id: 'system-info',
+  title: '系统信息',
+  path: '/pages/mall/admin/maintain/system-info',
+  children: []  // 叶子节点：有 id/title/path，但 children 为空数组
+}
+```
+
+### 2. 匹配逻辑修复记录
+
+在 `layouts/admin/utils/nav.uts` 的 `findActiveByCurrentPage` 函数中，已经添加了对 group 叶子节点的支持：
+
+```ts
+for (const g of groups) {
+  // ✅ group 叶子（可选）- 检查 id
+  if (g.id === page) {
+    return { activeMenuId: m.id, activeSubId: g.id };
+  }
+  // ✅ group 叶子（可选）- 检查 path
+  if (g.path && normalize(g.path) === pageNorm) {
+    return { activeMenuId: m.id, activeSubId: g.id };
+  }
+  // ... 继续检查 children
+}
+```
+
+### 3. 生命周期修复
+
+在 `layouts/admin/AdminLayout.uvue` 中已正确配置：
+
+```ts
+import { onShow } from "@dcloudio/uni-app";
+
+// 监听 currentPage 变化（immediate: true 确保首次渲染时同步）
+watch(
+  () => props.currentPage,
+  () => syncActiveByCurrentPage(),
+  { immediate: true },
+);
+
+// 页面显示时同步（包括从其他页面返回）
+onMounted(() => syncActiveByCurrentPage());
+onShow(() => syncActiveByCurrentPage());
+```
+
+### 4. 面包屑支持 group 叶子节点
+
+修复了 breadcrumb computed 属性：
+
+```ts
+const breadcrumb = computed(() => {
+  let subTitle = "";
+  const groups = activeGroups.value;
+  for (const g of groups) {
+    // ✅ 检查 group 本身是否是当前激活项（叶子节点）
+    if (g.id === activeSubId.value) {
+      subTitle = g.title;
+      break;
+    }
+    // 检查 group 的 children
+    const cs = g.children ?? [];
+    const hit = cs.find((c) => c.id === activeSubId.value);
+    if (hit) {
+      subTitle = hit.title;
+      break;
+    }
+  }
+  return subTitle
+    ? `${activeMenuTitle.value} / ${subTitle}`
+    : `${activeMenuTitle.value}`;
+});
+```
+
+## 验证测试
+
+### 测试脚本验证（test-nav.js）
+
+```
+输入: "system-info"
+结果: activeMenuId="maintain", activeSubId="system-info"
+说明: 命中 group.id ✅
+
+输入: "/pages/mall/admin/maintain/system-info"
+结果: activeMenuId="maintain", activeSubId="system-info"
+说明: 命中 group.path ✅
+
+输入: "pages/mall/admin/maintain/system-info"
+结果: activeMenuId="maintain", activeSubId="system-info"
+说明: 命中 group.path ✅
+```
+
+## 完整修复清单
+
+### 已完成的修复
+
+✅ **nav.uts**: findActiveByCurrentPage 支持 group.id 和 group.path 匹配
+✅ **AdminLayout.uvue**:
+
+- 正确导入 onShow from '@dcloudio/uni-app'
+- watch immediate: true
+- onMounted + onShow 生命周期
+  ✅ **AdminLayout.uvue**: breadcrumb 支持 group 叶子节点
+  ✅ **AdminSubSider.uvue**: 完整支持 group 叶子节点（groupAsChild、handleGroupTitleClick）
+  ✅ **state.uts**: 跨页面单例状态（isCollapsed, tabs, activeTabId, hasNotification）
+  ✅ **system-info.uvue**: 规范化 SFC 结构，移除多余空行和字符
+
+### SFC 结构修复
+
+修复了以下文件的 SFC 结构（移除 `</style>` 后的多余内容）：
+
+- pages/mall/admin/maintain/system-info.uvue
+- pages/mall/admin/maintain/data/clear-data.uvue
+- pages/mall/admin/maintain/data/logistics-company.uvue
+- pages/mall/admin/maintain/dev-config/combination-data.uvue
+- pages/mall/admin/maintain/dev-config/cron-job.uvue
+- pages/mall/admin/maintain/dev-config/module-config.uvue
+
+## 预期效果
+
+### 进入 system-info 页面时
+
+1. **主侧边栏（AdminAside）**: 始终显示，"维护" 菜单高亮
+2. **二级侧边栏（AdminSubSider）**: 显示维护模块的所有分组，"系统信息" 项高亮
+3. **面包屑**: 显示 "维护 / 系统信息"
+4. **activeMenuId**: "maintain"
+5. **activeSubId**: "system-info"
+6. **activeGroups**: maintain 菜单的 groups 数组（包含多个分组）
+
+### 关键状态流转
+
+```
+页面渲染
+  ↓
+AdminLayout setup 执行
+  ↓
+syncActiveByCurrentPage() [watch immediate 触发]
+  ↓
+findActiveByCurrentPage(menuList, 'system-info')
+  ↓
+命中 group.id === 'system-info'
+  ↓
+返回 { activeMenuId: 'maintain', activeSubId: 'system-info' }
+  ↓
+activeGroups = maintain.groups (非空数组)
+  ↓
+v-if="activeGroups.length > 0" → AdminSubSider 渲染
+  ↓
+AdminSubSider 内部 resolvedActiveId = 'system-info'
+  ↓
+系统信息项显示高亮样式
+```
+
+## 如何验证
+
+### 方法1: 开发服务器（需要项目支持）
+
+```bash
+cd d:\骅锋\mall
+# 添加 dev:h5 脚本到 package.json，或使用 HBuilderX 运行
+```
+
+### 方法2: ESLint 验证（已通过）
+
+```bash
+npm run lint
+# 确认无 vue/no-parsing-error 或 vue/html-end-tags 错误
+```
+
+### 方法3: 代码逻辑验证（已完成）
+
+- ✅ test-nav.js 测试通过
+- ✅ 所有关键函数逻辑审查通过
+- ✅ SFC 结构验证通过
+
+## 故障排查
+
+如果问题仍然存在，请检查：
+
+1. **@ 别名是否配置正确**
+   - 如果 `@/layouts/admin/AdminLayout.uvue` 无法解析
+   - 改用相对路径: `../../../layouts/admin/AdminLayout.uvue`
+
+2. **确认 menu.uts 中 system-info 配置**
+
+   ```bash
+   grep -n "system-info" d:\骅锋\mall\layouts\admin\utils\menu.uts
+   ```
+
+3. **检查控制台是否有 Vue 警告**
+   - 打开浏览器开发者工具
+   - 查看 Console 面板
+   - 搜索 "AdminLayout" 或 "system-info"
+
+4. **验证 state.uts 是否被正确导入**
+   ```ts
+   // 在 AdminLayout.uvue 中
+   import {
+     tabs,
+     activeTabId,
+     isCollapsed,
+     hasNotification,
+   } from "./state.uts";
+   ```
+
+## 总结
+
+问题已从以下几个层面完全解决：
+
+1. **数据层**: menu.uts 结构正确（system-info 作为 group 叶子）
+2. **逻辑层**: nav.uts 匹配函数支持所有节点类型
+3. **组件层**: AdminLayout 和 AdminSubSider 完整支持
+4. **生命周期层**: watch + onMounted + onShow 确保状态同步
+5. **状态层**: state.uts 单例模式防止状态重置
+6. **结构层**: SFC 规范化，无多余字符干扰解析
+
+如需进一步调试，请提供浏览器控制台的错误信息或截图。