完善页面细节2
This commit is contained in:
@@ -150,6 +150,21 @@
|
||||
1. **转为静态导入**: 在 `adminComponentMap.uts` 顶部使用静态 `import` 导入所有管理端子页面组件。
|
||||
2. **组件映射**: 维护 `componentMap` 为静态 Map,避免在运行时使用 `defineAsyncComponent`,从而提高页面的加载成功率和抗语法错误风险。
|
||||
|
||||
#### **原因二十二:Tab 切换高度抖动 (Tab Switching Height Jitter)**
|
||||
|
||||
- **现象**: 在包含多标签切换的配置页面中,切换不同标签时,由于内容块高度差异较大,导致整个容器或页面产生明显的跳动/收缩。
|
||||
- **原因**: 每个 `v-if` 或 `v-show` 对应的内容高度不一致,且父容器没有设置 `min-height` 进行视觉对齐。
|
||||
- **解决方案**: 为切换内容的公共父容器(如 `.config-body` 或 `.tab-content`)设置一个统一的 `min-height`(推荐 400px - 600px 之间,视表单复杂度而定),确保最矮的标签页下仍能撑开容器。
|
||||
|
||||
#### **原因二十三:循环依赖导致的 500 错误 (Circular Dependency & AdminLayout)**
|
||||
|
||||
- **现象**: 浏览器报 `500 Internal Server Error`,控制台显示 `Failed to fetch dynamically imported module` 或 `net::ERR_ABORTED`。
|
||||
- **原因**: 核心布局组件 `AdminLayout.uvue` 导入了 `adminComponentMap.uts`(用于动态渲染子页面),而子页面内部又通过 `import AdminLayout` 引用了布局组件。这种循环依赖在 Vite/UTS 环境下会导致整个加载链路崩溃。
|
||||
- **解决方案**:
|
||||
1. 所有在 `adminComponentMap.uts` 中注册的**子页面**(Sub-pages),**严禁**在 `<template>` 中包裹 `<AdminLayout>`,也**严禁**在 `<script>` 中 `import AdminLayout`。
|
||||
2. 布局由主入口统一提供,子页面只需编写内容区的 `<view>`。
|
||||
3. **例外**: 仅当某个页面是独立存在的(例如登录页、引导页),且需要独立布局时,才允许自行包装。
|
||||
|
||||
## 🛠️ 完整修复流程
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user