# 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"`。