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

Co-authored-by: multica-agent <github@multica.ai>

MEMORY.md

@@ -259,6 +259,7 @@
 
 - 全局瞬时成功/失败反馈统一使用 Ant Design `message`，展示在页面右上角，并在短时间后自动消失。
 - `Alert` 仅保留给需要常驻占位的状态：权限不足、列表加载失败、解析警告、空态说明等；不要再把普通 CRUD 成功/失败提示固定渲染在页面顶部。
+- 后台页面首屏加载态统一使用居中 `Spin`，优先复用 `web/src/components/admin-page-loading.tsx`；不要再用左上角纯文本或文本卡片作为页面级初始加载占位。
 
 ## 数据库连接口径（2026-04-23）
 

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` 既有 `<img>` warning，无新增 error。
+    - `npm run build`
+      - 通过。
+
+- 风险与关注点：
+  - 本次仅统一后台页面首屏加载态展示，不涉及接口、权限、数据结构或业务请求逻辑。
+  - 后续新增后台页面时，若需要页面级首屏加载态，应优先复用 `AdminPageLoading`，不要再回退到左上角纯文本占位。

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 (
-      <Card>
-        <Typography.Text type="secondary">{isDistributionOnly ? "加载雷电分布数据中..." : "加载雷电流数据中..."}</Typography.Text>
-      </Card>
+      <AdminPageLoading
+        tip={isDistributionOnly ? "加载雷电分布数据中..." : "加载雷电流数据中..."}
+        minHeightClassName="min-h-[280px]"
+      />
     );
   }
 

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 (
-      <Card>
-        <Typography.Text type="secondary">加载线路数据中...</Typography.Text>
-      </Card>
-    );
+    return <AdminPageLoading tip="加载线路数据中..." minHeightClassName="min-h-[280px]" />;
   }
 
   if (!user) {

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 <Card><Typography.Text type="secondary">加载杆塔模型中...</Typography.Text></Card>;
+    return <AdminPageLoading tip="加载杆塔模型中..." minHeightClassName="min-h-[280px]" />;
   }
 
   if (!user) {

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 (
+    <div className={`flex ${minHeightClassName} items-center justify-center`}>
+      <Spin tip={tip} />
+    </div>
+  );
+}