Template
admin
792131228a
Port pages for data forms, score admin, student maintenance, vacation records, menu routing, and workbench. Add team switching, dynamic menu loading, viewport scaling, and bundled local fast-crud packages.
39 lines
2.4 KiB
Markdown
39 lines
2.4 KiB
Markdown
# PC 端适配约定
|
|
|
|
## 结论
|
|
|
|
本项目**只做 PC 端**，不兼容手机、平板等移动设备。
|
|
|
|
- 设计稿基准宽度：**1920px**（样式统一按 1920 写 px，由 `postcss-px-to-viewport-8-plugin` 转 vw 自适应）
|
|
- 最小可用宽度：**1280px**（再窄不做保证，也不做降级布局）
|
|
- 移动端浏览器、微信内置浏览器等不在支持范围内
|
|
|
|
## 已移除的移动端适配（2026-10-29）
|
|
|
|
| 位置 | 移除内容 |
|
|
| --- | --- |
|
|
| `src/layouts/index.vue` | 不再按设备切换布局（原 `isLeft \|\| isMobile`），只按布局配置走 `LeftMode` / `TopMode` / `LeftTopMode` |
|
|
| `src/layouts/modes/LeftMode.vue` | 删除 `.mobile` 抽屉样式（`translate3d` 侧滑）、`drawer-bg` 遮罩层及点击关闭逻辑，同时去掉 `.open-sidebar` 类名 |
|
|
| `src/layouts/components/NavigationBar` | 删除汉堡按钮的 `isMobile` 分支；面包屑固定 `v-if="!isTop"` |
|
|
| `src/common/components/SearchMenu` | 删除移动端 80vw 弹窗宽度与键盘提示的 `isMobile` 判断（固定 40vw，提示常显） |
|
|
| `src/common/composables/useDevice.ts` | 整个文件已删除（设备判断已无调用方） |
|
|
| `src/layouts/composables/useResize.ts` | 整个文件已删除（原本只用于监听窗口宽度切换设备、自动收起侧栏），目录随之移除 |
|
|
| `src/layouts/components/Hamburger/index.vue` | 组件及 `components/index.ts` 中的导出已删除 |
|
|
| `src/pinia/stores/app.ts` | 移除 `device` / `toggleDevice`，store 只保留侧边栏相关状态 |
|
|
| `src/common/constants/app-key.ts` | 移除 `DeviceEnum` |
|
|
|
|
> 2026-10-29 已按上述清单清理完成，如需恢复手机端适配只能从版本历史找回。
|
|
|
|
## 新增代码要求
|
|
|
|
1. 不要引入 `useDevice()` / `isMobile` / `device` 等设备判断逻辑。
|
|
2. 不要写移动端断点（`@media (max-width: ...)`）；需要适配不同桌面宽度时用 px→vw 自动缩放，或弹性布局（flex / min-width / overflow）。
|
|
3. 侧边栏、页签、表格等布局默认按「始终有鼠标、宽度 ≥1280」设计，不考虑触摸手势。
|
|
4. 弹窗宽度用固定值或 `vw`，不要按设备切换。
|
|
|
|
## 侧边栏收起/展开
|
|
|
|
- 按钮固定在侧边栏**右边缘、垂直居中**（`position: absolute; top: 50%; right: -11px`），不随菜单滚动。
|
|
- 图标：展开态 `ArrowLeft`（收起），收起态 `ArrowRight`（展开）。
|
|
- 侧边栏容器需 `overflow: visible`，否则按钮会被裁掉。
|