From b3fd282245e2caea27a2902b1592fa64a2e6a6f4 Mon Sep 17 00:00:00 2001 From: chengkai3 Date: Tue, 9 Jun 2026 15:23:30 +0800 Subject: [PATCH] =?UTF-8?q?[fix]:[FL-73][=E7=BB=9F=E4=B8=80=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E9=A6=96=E6=AC=A1=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C?= =?UTF-8?q?=E5=B1=85=E4=B8=AD]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: multica-agent --- MEMORY.md | 1 + memory/2026-06-09.md | 31 +++++++++++++++++++ web/src/app/admin/lightning-currents/page.tsx | 8 +++-- web/src/app/admin/power-lines/page.tsx | 7 ++--- web/src/app/admin/tower-models/page.tsx | 3 +- web/src/components/admin-page-loading.tsx | 17 ++++++++++ 6 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 web/src/components/admin-page-loading.tsx diff --git a/MEMORY.md b/MEMORY.md index fae271d..29c244a 100644 --- a/MEMORY.md +++ b/MEMORY.md @@ -259,6 +259,7 @@ - 全局瞬时成功/失败反馈统一使用 Ant Design `message`，展示在页面右上角，并在短时间后自动消失。 - `Alert` 仅保留给需要常驻占位的状态：权限不足、列表加载失败、解析警告、空态说明等；不要再把普通 CRUD 成功/失败提示固定渲染在页面顶部。 +- 后台页面首屏加载态统一使用居中 `Spin`，优先复用 `web/src/components/admin-page-loading.tsx`；不要再用左上角纯文本或文本卡片作为页面级初始加载占位。 ## 数据库连接口径（2026-04-23） diff --git a/memory/2026-06-09.md b/memory/2026-06-09.md index 123e547..574d127 100644 --- a/memory/2026-06-09.md +++ b/memory/2026-06-09.md @@ -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` 既有 `` warning，无新增 error。 + - `npm run build` + - 通过。 + +- 风险与关注点： + - 本次仅统一后台页面首屏加载态展示，不涉及接口、权限、数据结构或业务请求逻辑。 + - 后续新增后台页面时，若需要页面级首屏加载态，应优先复用 `AdminPageLoading`，不要再回退到左上角纯文本占位。 diff --git a/web/src/app/admin/lightning-currents/page.tsx b/web/src/app/admin/lightning-currents/page.tsx index 307dc47..a7489dc 100644 --- a/web/src/app/admin/lightning-currents/page.tsx +++ b/web/src/app/admin/lightning-currents/page.tsx @@ -23,6 +23,7 @@ import type { ColumnsType } from "antd/es/table"; import { useCallback, useMemo, useRef, useState, type CSSProperties } from "react"; import { useAuth } from "@/components/auth-provider"; +import { AdminPageLoading } from "@/components/admin-page-loading"; import { LightningDistributionMap } from "@/components/lightning-distribution-map"; import { Card } from "@/components/ui-antd"; import { useToastFeedback } from "@/hooks/use-toast-feedback"; @@ -787,9 +788,10 @@ export default function AdminLightningCurrentsPage() { if (initializing || (!isDistributionOnly && eventsQuery.isLoading) || (isDistributionOnly && distributionStatsQuery.isLoading)) { return ( - - {isDistributionOnly ? "加载雷电分布数据中..." : "加载雷电流数据中..."} - + ); } diff --git a/web/src/app/admin/power-lines/page.tsx b/web/src/app/admin/power-lines/page.tsx index 6e14d38..d1fd03f 100644 --- a/web/src/app/admin/power-lines/page.tsx +++ b/web/src/app/admin/power-lines/page.tsx @@ -24,6 +24,7 @@ import type { CSSProperties } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useAuth } from "@/components/auth-provider"; +import { AdminPageLoading } from "@/components/admin-page-loading"; import { PowerLineCesiumMap } from "@/components/power-line-cesium-map"; import { Card } from "@/components/ui-antd"; import { useToastFeedback } from "@/hooks/use-toast-feedback"; @@ -1384,11 +1385,7 @@ export default function AdminPowerLinesPage() { const mapHeight = Math.max(POWER_LINES_MAP_MIN_HEIGHT, rightContentHeight - 32); const towerTableScrollY = Math.max(POWER_LINES_TABLE_MIN_SCROLL_Y, rightContentHeight - 54); if (initializing || linesQuery.isLoading) { - return ( - - 加载线路数据中... - - ); + return ; } if (!user) { diff --git a/web/src/app/admin/tower-models/page.tsx b/web/src/app/admin/tower-models/page.tsx index b603320..07c3a14 100644 --- a/web/src/app/admin/tower-models/page.tsx +++ b/web/src/app/admin/tower-models/page.tsx @@ -24,6 +24,7 @@ import type { ColumnsType } from "antd/es/table"; import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from "react"; import { useAuth } from "@/components/auth-provider"; +import { AdminPageLoading } from "@/components/admin-page-loading"; import { Card } from "@/components/ui-antd"; import { useToastFeedback } from "@/hooks/use-toast-feedback"; import { useTopicSubscription } from "@/hooks/use-topic-subscription"; @@ -720,7 +721,7 @@ export default function AdminTowerModelsPage() { const mounts = mountsQuery.data?.mounts ?? []; if (initializing || towerModelsQuery.isLoading) { - return 加载杆塔模型中...; + return ; } if (!user) { diff --git a/web/src/components/admin-page-loading.tsx b/web/src/components/admin-page-loading.tsx new file mode 100644 index 0000000..acda2be --- /dev/null +++ b/web/src/components/admin-page-loading.tsx @@ -0,0 +1,17 @@ +import { Spin } from "antd"; + +type AdminPageLoadingProps = { + tip: string; + minHeightClassName?: string; +}; + +export function AdminPageLoading({ + tip, + minHeightClassName = "min-h-[240px]", +}: AdminPageLoadingProps) { + return ( +
+ +
+ ); +}