[fix]:[FL-73][统一页面首次加载效果居中]

Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
chengkai3
2026-06-09 15:23:30 +08:00
parent 33c9201fdd
commit b3fd282245
6 changed files with 58 additions and 9 deletions
+31
View File
@@ -173,3 +173,34 @@
- 风险与关注点:
- 影响范围仅 `任务监控` 页面前端展示层与局部表格样式作用域,不涉及后端接口、权限或任务监控数据口径变更。
## Work Log - 统一后台页面首屏加载效果居中(2026-06-09)
- 背景:
- Issue `FL-73` 反馈“有些页面第一次打开时加载效果在左上角,而另一些页面在页面正中间,同一改成正中间”。
- 代码检索确认后台页面首屏加载态存在两种实现:
- 多数页面使用 `min-h-[240px]/[280px] + 居中 Spin`
- `线路管理``雷电流/雷电分布``杆塔模型管理` 仍使用 `Card + Typography.Text`,因此首屏只在左上角显示一行加载文案。
- 本次改动:
- `web/src/components/admin-page-loading.tsx`
- 新增后台页面通用首屏加载组件,统一输出居中 `Spin`,并支持通过 `minHeightClassName` 复用不同页面的最小高度口径。
- `web/src/app/admin/power-lines/page.tsx`
- 将首屏 `加载线路数据中...` 从左上角文本卡片改为居中 `Spin`
- `web/src/app/admin/lightning-currents/page.tsx`
-`雷电流` / `雷电分布` 首屏加载态统一改为居中 `Spin`
- `web/src/app/admin/tower-models/page.tsx`
-`加载杆塔模型中...` 从左上角文本卡片改为居中 `Spin`
- 验证:
- 基线:
- `npm run lint` 当前因仓库既有问题失败,主要来自 `web/public/cesium/**` 生成资源和少量历史页面,不作为本次门禁。
- 修改后:
- `npm exec eslint src/components/admin-page-loading.tsx src/app/admin/power-lines/page.tsx src/app/admin/lightning-currents/page.tsx src/app/admin/tower-models/page.tsx`
- 通过;仅保留 `tower-models` 既有 `<img>` warning,无新增 error。
- `npm run build`
- 通过。
- 风险与关注点:
- 本次仅统一后台页面首屏加载态展示,不涉及接口、权限、数据结构或业务请求逻辑。
- 后续新增后台页面时,若需要页面级首屏加载态,应优先复用 `AdminPageLoading`,不要再回退到左上角纯文本占位。