继续沉淀工具信息弹窗与个人中心内容骨架

新增PlatformUtilityInfoModal统一工具信息弹窗白底骨架收口profile副弹层的摘要头列表骨架与内容行同步更新PlatformUiKit收口计划与共享决策记录
2026-06-11 06:07:30 +08:00
parent ef6a2b7200
commit d08842b576
15 changed files with 396 additions and 103 deletions
--- a/src/components/platform-entry/PlatformProfilePlayedWorksModal.tsx
+++ b/src/components/platform-entry/PlatformProfilePlayedWorksModal.tsx
@@ -8,9 +8,11 @@ import type {
 import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import { PlatformProfileContentRow } from '../common/PlatformProfileContentRow';
+import { PlatformProfileSkeletonList } from '../common/PlatformProfileSkeletonList';
+import { PlatformProfileSummaryHeader } from '../common/PlatformProfileSummaryHeader';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformSubpanel } from '../common/PlatformSubpanel';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import { PlatformProfileSecondaryModalShell } from './PlatformProfileModalShell';
 import {
@@ -143,19 +145,19 @@ export function PlatformProfilePlayedWorksModal({
      panelClassName="relative !max-h-[min(92vh,42rem)] !max-w-[38rem] bg-white text-zinc-950 shadow-2xl !rounded-[1.35rem] sm:!rounded-[1.35rem]"
      contentClassName="relative max-h-[min(92vh,42rem)] overflow-y-auto px-4 pb-5 pt-4 sm:px-5"
    >
-      <div className="pr-10">
-        <div className="text-[10px] font-black tracking-[0.22em] text-[#ff4056]">
-          PLAYED
-        </div>
-        <div className="mt-1 text-2xl font-black">玩过</div>
-        <PlatformPillBadge
-          tone="profile"
-          icon={<Clock3 className="h-3.5 w-3.5 text-[#ff4056]" />}
-          className="mt-2"
-        >
-          {formatTotalPlayTimeHours(stats?.totalPlayTimeMs ?? 0)}
-        </PlatformPillBadge>
-      </div>
+      <PlatformProfileSummaryHeader
+        kicker="PLAYED"
+        title="玩过"
+        badge={
+          <PlatformPillBadge
+            tone="profile"
+            icon={<Clock3 className="h-3.5 w-3.5 text-[#ff4056]" />}
+          >
+            {formatTotalPlayTimeHours(stats?.totalPlayTimeMs ?? 0)}
+          </PlatformPillBadge>
+        }
+        badgeClassName="mt-2"
+      />

      {error ? (
        <PlatformStatusMessage tone="error" className="mt-4">
@@ -171,14 +173,11 @@ export function PlatformProfilePlayedWorksModal({
      <PlatformAsyncStatePanel
        isLoading={isLoading}
        loadingState={
-          <div className="mt-5 space-y-3">
-            {Array.from({ length: 4 }).map((_, index) => (
-              <div
-                key={index}
-                className="h-20 animate-pulse rounded-xl bg-zinc-100"
-              />
-            ))}
-          </div>
+          <PlatformProfileSkeletonList
+            count={4}
+            containerClassName="mt-5 space-y-3"
+            itemClassName="h-20"
+          />
        }
        isEmpty={!hasArchiveEntries && !hasPlayedWorks}
        emptyState={
@@ -218,9 +217,8 @@ export function PlatformProfilePlayedWorksModal({
              </PlatformFieldLabel>
              <div className="space-y-3">
                {playedWorks.map((work) => (
-                  <PlatformSubpanel
+                  <PlatformProfileContentRow
                    as="button"
-                    type="button"
                    key={`${work.worldKey}:${work.lastPlayedAt}`}
                    onClick={() => onOpenWork?.(work)}
                    surface="flat"
@@ -244,20 +242,20 @@ export function PlatformProfilePlayedWorksModal({
                        tone="profileAccent"
                        size="xs"
                        className="shrink-0 border-transparent"
-                      >
-                        {formatPlayedWorkType(work.worldType)}
-                      </PlatformPillBadge>
-                    </div>
-                    <div className="mt-3 grid gap-2 text-xs text-zinc-500 sm:grid-cols-3">
+                    >
+                      {formatPlayedWorkType(work.worldType)}
+                    </PlatformPillBadge>
+                  </div>
+                  <div className="mt-3 grid gap-2 text-xs text-zinc-500 sm:grid-cols-3">
                      <span className="truncate">作品号 {formatPlayedWorkId(work)}</span>
                      <span className="truncate">
                        最近 {formatSnapshotTime(work.lastPlayedAt)}
                      </span>
                      <span className="truncate">
-                        时长 {formatCompactPlayTime(work.lastObservedPlayTimeMs)}
-                      </span>
-                    </div>
-                  </PlatformSubpanel>
+                      时长 {formatCompactPlayTime(work.lastObservedPlayTimeMs)}
+                    </span>
+                  </div>
+                  </PlatformProfileContentRow>
                ))}
              </div>
            </section>
--- a/src/components/platform-entry/PlatformProfileRechargeModal.tsx
+++ b/src/components/platform-entry/PlatformProfileRechargeModal.tsx
@@ -9,6 +9,7 @@ import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
+import { PlatformProfileSkeletonList } from '../common/PlatformProfileSkeletonList';
 import { PlatformSegmentedTabs } from '../common/PlatformSegmentedTabs';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformSubpanel } from '../common/PlatformSubpanel';
@@ -220,14 +221,11 @@ export function PlatformProfileRechargeModal({
        }
        isLoading={isLoading}
        loadingState={
-          <div className="mt-4 grid gap-3 sm:grid-cols-2">
-            {Array.from({ length: 4 }).map((_, index) => (
-              <div
-                key={index}
-                className="h-28 animate-pulse rounded-[1.15rem] bg-white/10"
-              />
-            ))}
-          </div>
+          <PlatformProfileSkeletonList
+            count={4}
+            containerClassName="mt-4 grid gap-3 sm:grid-cols-2"
+            itemClassName="h-28 rounded-[1.15rem] bg-white/10"
+          />
        }
        isEmpty={products.length === 0}
        emptyState={
--- a/src/components/platform-entry/PlatformProfileReferralModal.tsx
+++ b/src/components/platform-entry/PlatformProfileReferralModal.tsx
@@ -9,6 +9,8 @@ import { CopyFeedbackButton } from '../common/CopyFeedbackButton';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
+import { PlatformProfileContentRow } from '../common/PlatformProfileContentRow';
+import { PlatformProfileSkeletonList } from '../common/PlatformProfileSkeletonList';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformSubpanel } from '../common/PlatformSubpanel';
 import { PlatformTextField } from '../common/PlatformTextField';
@@ -139,10 +141,11 @@ export function PlatformProfileReferralModal({
      <PlatformAsyncStatePanel
        isLoading={isLoading}
        loadingState={
-          <div className="mt-5 space-y-3">
-            <div className="h-12 animate-pulse rounded-xl bg-zinc-100" />
-            <div className="h-11 animate-pulse rounded-xl bg-zinc-100" />
-          </div>
+          <PlatformProfileSkeletonList
+            count={2}
+            containerClassName="mt-5 space-y-3"
+            itemClassName="h-12 even:h-11"
+          />
        }
        isEmpty={Boolean(center?.hasRedeemedCode)}
        emptyState={
@@ -193,10 +196,11 @@ export function PlatformProfileReferralModal({
      <PlatformAsyncStatePanel
        isLoading={isLoading}
        loadingState={
-          <div className="mt-5 space-y-3">
-            <div className="h-20 animate-pulse rounded-xl bg-zinc-100" />
-            <div className="h-10 animate-pulse rounded-xl bg-zinc-100" />
-          </div>
+          <PlatformProfileSkeletonList
+            count={2}
+            containerClassName="mt-5 space-y-3"
+            itemClassName="h-20 odd:h-20 even:h-10"
+          />
        }
      >
        <div className="mt-5 space-y-3">
@@ -251,8 +255,7 @@ export function PlatformProfileReferralModal({
            {center?.invitedUsers?.length ? (
              <div className="mt-3 max-h-44 space-y-2 overflow-y-auto pr-1">
                {center.invitedUsers.map((user) => (
-                  <PlatformSubpanel
-                    as="div"
+                  <PlatformProfileContentRow
                    key={`${user.userId}-${user.boundAt}`}
                    surface="soft"
                    radius="xs"
@@ -268,7 +271,7 @@ export function PlatformProfileReferralModal({
                        {user.displayName || '玩家'}
                      </div>
                    </div>
-                  </PlatformSubpanel>
+                  </PlatformProfileContentRow>
                ))}
              </div>
            ) : (
--- a/src/components/platform-entry/PlatformProfileTaskCenterModal.tsx
+++ b/src/components/platform-entry/PlatformProfileTaskCenterModal.tsx
@@ -1,9 +1,10 @@
 import type { ProfileTaskCenterResponse } from '../../../packages/shared/src/contracts/runtime';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
+import { PlatformProfileContentRow } from '../common/PlatformProfileContentRow';
+import { PlatformProfileSkeletonList } from '../common/PlatformProfileSkeletonList';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformSubpanel } from '../common/PlatformSubpanel';
 import { PlatformProfileModalShell } from './PlatformProfileModalShell';
 import {
  buildProfileTaskProgressLabel,
@@ -84,14 +85,11 @@ export function PlatformProfileTaskCenterModal({
        }
        isLoading={isLoading}
        loadingState={
-          <div className="space-y-3">
-            {Array.from({ length: 2 }).map((_, index) => (
-              <div
-                key={index}
-                className="h-20 animate-pulse rounded-2xl bg-white/10"
-              />
-            ))}
-          </div>
+          <PlatformProfileSkeletonList
+            count={2}
+            containerClassName="space-y-3"
+            itemClassName="h-20 rounded-2xl bg-white/10"
+          />
        }
        isEmpty={tasks.length === 0}
        emptyState={
@@ -107,8 +105,7 @@ export function PlatformProfileTaskCenterModal({
            const progressLabel = buildProfileTaskProgressLabel(task);

            return (
-              <PlatformSubpanel
-                as="div"
+              <PlatformProfileContentRow
                key={task.taskId}
                radius="sm"
                padding="md"
@@ -141,7 +138,7 @@ export function PlatformProfileTaskCenterModal({
                >
                  {getProfileTaskClaimButtonLabel(task, isClaiming)}
                </PlatformActionButton>
-              </PlatformSubpanel>
+              </PlatformProfileContentRow>
            );
          })}
        </div>
--- a/src/components/platform-entry/PlatformProfileWalletLedgerModal.tsx
+++ b/src/components/platform-entry/PlatformProfileWalletLedgerModal.tsx
@@ -4,9 +4,11 @@ import type { ProfileWalletLedgerResponse } from '../../../packages/shared/src/c
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
+import { PlatformProfileContentRow } from '../common/PlatformProfileContentRow';
+import { PlatformProfileSkeletonList } from '../common/PlatformProfileSkeletonList';
+import { PlatformProfileSummaryHeader } from '../common/PlatformProfileSummaryHeader';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformSubpanel } from '../common/PlatformSubpanel';
 import { PlatformProfileSecondaryModalShell } from './PlatformProfileModalShell';
 import { buildWalletLedgerPresentation } from '../rpg-entry/rpgEntryProfileFundsViewModel';
 import { formatPlatformWorldTime } from '../rpg-entry/rpgEntryWorldPresentation';
@@ -47,19 +49,19 @@ export function PlatformProfileWalletLedgerModal({
      panelClassName="relative !max-h-[min(92vh,42rem)] !max-w-[30rem] bg-[linear-gradient(180deg,#fff7f8_0%,#ffffff_38%,#f8fafc_100%)] text-zinc-950 shadow-2xl !rounded-[1.35rem] sm:!rounded-[1.35rem]"
      contentClassName="relative max-h-[min(92vh,42rem)] overflow-y-auto px-4 pb-5 pt-4 sm:px-5"
    >
-      <div className="pr-10">
-        <div className="text-[10px] font-black tracking-[0.22em] text-[#ff4056]">
-          LEDGER
-        </div>
-        <div className="mt-1 text-2xl font-black">泥点账单</div>
-        <PlatformPillBadge
-          tone="profile"
-          icon={<Coins className="h-3.5 w-3.5 text-[#ff4056]" />}
-          className="mt-3 bg-white/70"
-        >
-          {walletLedgerPresentation.balanceLabel}
-        </PlatformPillBadge>
-      </div>
+      <PlatformProfileSummaryHeader
+        kicker="LEDGER"
+        title="泥点账单"
+        badge={
+          <PlatformPillBadge
+            tone="profile"
+            icon={<Coins className="h-3.5 w-3.5 text-[#ff4056]" />}
+            className="bg-white/70"
+          >
+            {walletLedgerPresentation.balanceLabel}
+          </PlatformPillBadge>
+        }
+      />

      <PlatformAsyncStatePanel
        errorState={
@@ -83,14 +85,11 @@ export function PlatformProfileWalletLedgerModal({
        }
        isLoading={isLoading}
        loadingState={
-          <div className="mt-5 space-y-3">
-            {Array.from({ length: 5 }).map((_, index) => (
-              <div
-                key={index}
-                className="h-16 animate-pulse rounded-xl bg-zinc-100"
-              />
-            ))}
-          </div>
+          <PlatformProfileSkeletonList
+            count={5}
+            containerClassName="mt-5 space-y-3"
+            itemClassName="h-16"
+          />
        }
        isEmpty={entries.length === 0}
        emptyState={
@@ -105,8 +104,7 @@ export function PlatformProfileWalletLedgerModal({
      >
        <div className="mt-5 space-y-2.5">
          {entries.map((entry) => (
-            <PlatformSubpanel
-              as="div"
+            <PlatformProfileContentRow
              key={entry.id}
              surface="flat"
              radius="xs"
@@ -133,7 +131,7 @@ export function PlatformProfileWalletLedgerModal({
                  {entry.balanceLabel}
                </div>
              </div>
-            </PlatformSubpanel>
+            </PlatformProfileContentRow>
          ))}
        </div>
      </PlatformAsyncStatePanel>