fix(admin): 修复移动端后台侧栏错位与子菜单不收起

根因:此前为移动端手写的一段折叠逻辑直接给 body 加 pear-mini,
绕过了 admin.js 里唯一的同步入口 collapse(),导致三处状态错位——
布局层认为已折叠(侧栏宽 0、菜单文字被 CSS 隐藏),
菜单 DOM 仍是展开态(#side 没有 pear-nav-mini),于是"文字看不见、
但子菜单又在原地铺开"。

处理:
- templates/system/index.html 还原为框架原始版本,删除手写的
  foldSidebar() IIFE 与首屏强制加类逻辑
- 删除无引用的死文件 templates/system/common/{head,side}.html
- 新增插件 plugins/mobileUI,以运行时注入 mobile.js 的方式实现移动端增强:
  * 首屏折叠只通过框架的 li.collapse 点击完成,不手写 class
  * 轮询等待菜单异步渲染就绪后再折叠
  * 补齐 framework 内部状态 isCollapse(后端 /rights/configs 把键拼成了
    "collaspe",admin.js 读 collapse 恒为 undefined,窄屏 resize 会反向展开)
  * 触屏下点击菜单外区域收起 mini 浮层(触屏没有可靠的 mouseleave)
  * 展开态点击叶子菜单后自动收起侧栏
- applications/config.py 的 PLUGIN_ENABLE_FOLDERS 追加 cookieManager、mobileUI

framework 业务逻辑零改动,仅 config.py 一行配置。
This commit is contained in:
bwstudio
2026-09-09 19:20:03 +08:00
parent 3e8c490851
commit b0865ea18d
8 changed files with 283 additions and 135 deletions
+54
View File
@@ -0,0 +1,54 @@
# mobileUI —— 移动端侧栏增强插件
修复手机/窄屏(≤768px)下后台左侧菜单的两个问题:
1. **菜单错位**:侧栏只剩一列图标、文字全部消失;
2. **子菜单不自动隐藏**:mini 模式下点开的子菜单浮层赖着不走。
## 为什么会出问题
Pear Admin 的"侧栏折叠"由**三处状态**共同决定:
| 状态 | 作用 |
|---|---|
| `body`/`.pear-admin` 上的 `pear-mini` | 整页布局:`.layui-side` 压成 0/60px |
| `#side` 上的 `pear-nav-mini` | 菜单自身宽度、子菜单内联展开还是悬浮弹出 |
| `PearAdmin.instances.menu.isCollapse` | 框架状态机,决定下一次 collapse 的方向 |
框架把三者的同步封装在 admin.js 的**私有函数** `collapse()` 里,只能通过
点击 `.collapse` / `.pear-cover` 触发。此前在 `templates/system/index.html`
里手写的"首屏 `addClass('pear-mini')`"绕过了它,导致 body 与 #side 状态反相:
布局按折叠渲染(文字被 `.pear-mini ... span {display:none}` 藏掉、侧栏 0px),
菜单却停留在展开态 —— 即"只剩图标""子菜单收不起来"。
## 本插件的做法(不改 framework 任何文件)
- `event_finish` 注册 `after_request`,仅向后台主框架页(含 `#side` 的 HTML
注入 `static/mobile.js`
- 折叠一律**触发框架原生入口**`li.collapse` 的点击),三态由框架同步;
- 折叠后补写 `menu.isCollapse = true`:后端 `/rights/configs` 里菜单配置的键
拼成了 `collaspe`(框架读 `collapse`),done 回调会把它覆写成 `undefined`
不补写的话窄屏下任何 resize 都会把侧栏反向弹开;
- 触屏补位:mini 浮层靠 `mouseenter/mouseleave` 开关,而触屏 tap 后
`mouseleave` 常常不来 —— 点菜单以外区域时主动收起浮层;
- 移动端习惯:展开态点叶子菜单后自动收起侧栏。
## 涉及文件
```
plugins/mobileUI/
├── __init__.json # 插件元信息
├── __init__.py # after_request 注入 + 静态蓝图
├── static/mobile.js # 全部前端逻辑
└── README.md
```
## 启用
`applications/config.py``PLUGIN_ENABLE_FOLDERS` 加入 `"mobileUI"`,重启即可。
## 备注
配置里 `"collaspe"` 的拼写错误属于框架原文件(`applications/view/system/rights.py`),
按"不改动原项目内容"的原则未修正;插件已在运行时补齐状态,不受影响。
若未来升级框架,可顺手把键名改为 `"collapse"`