1

2026-05-01 01:30:02 +08:00
parent aabad6407f
commit 2e9d0f4640
92 changed files with 4548 additions and 248 deletions
--- a/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
@@ -190,6 +190,59 @@ test('creation hub mixes puzzle works into the same grid and uses puzzle tag to
  expect(screen.queryByText('我的拼图作品')).toBeNull();
 });

+test('creation hub shows puzzle point incentive and claims without opening card', async () => {
+  const user = userEvent.setup();
+  const onClaimPuzzlePointIncentive = vi.fn();
+  const onOpenPuzzleDetail = vi.fn();
+
+  render(
+    <CustomWorldCreationHub
+      items={[]}
+      puzzleItems={[
+        {
+          workId: 'puzzle:work-incentive',
+          profileId: 'puzzle-profile-incentive',
+          ownerUserId: 'user-1',
+          authorDisplayName: '拼图作者',
+          levelName: '陶泥灯塔',
+          summary: '拼图作品会展示积分激励。',
+          themeTags: ['灯塔', '陶泥'],
+          coverImageSrc: null,
+          publicationStatus: 'published',
+          updatedAt: new Date('2026-05-01T12:00:00.000Z').toISOString(),
+          publishedAt: new Date('2026-05-01T12:10:00.000Z').toISOString(),
+          playCount: 8,
+          remixCount: 2,
+          likeCount: 3,
+          pointIncentiveTotalHalfPoints: 5,
+          pointIncentiveClaimedPoints: 1,
+          pointIncentiveTotalPoints: 2.5,
+          pointIncentiveClaimablePoints: 1,
+          publishReady: true,
+        },
+      ]}
+      loading={false}
+      error={null}
+      onRetry={() => {}}
+      onCreateType={noopCreateType}
+      onOpenDraft={() => {}}
+      onEnterPublished={() => {}}
+      onOpenPuzzleDetail={onOpenPuzzleDetail}
+      onClaimPuzzlePointIncentive={onClaimPuzzlePointIncentive}
+    />,
+  );
+
+  expect(screen.getByLabelText('积分激励总数 2.5 陶泥币')).toBeTruthy();
+  expect(screen.getByLabelText('待领取积分 1 陶泥币')).toBeTruthy();
+
+  await user.click(screen.getByRole('button', { name: '领取积分' }));
+
+  expect(onClaimPuzzlePointIncentive).toHaveBeenCalledWith(
+    expect.objectContaining({ profileId: 'puzzle-profile-incentive' }),
+  );
+  expect(onOpenPuzzleDetail).not.toHaveBeenCalled();
+});
+
 test('creation hub shows RPG public work code from published library entry', () => {
  render(
    <CustomWorldCreationHub
--- a/src/components/custom-world-home/CustomWorldCreationHub.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.tsx
@@ -47,6 +47,8 @@ type CustomWorldCreationHubProps = {
  puzzleItems?: PuzzleWorkSummary[];
  onOpenPuzzleDetail?: (item: PuzzleWorkSummary) => void;
  onDeletePuzzle?: ((item: PuzzleWorkSummary) => void) | null;
+  onClaimPuzzlePointIncentive?: ((item: PuzzleWorkSummary) => void) | null;
+  claimingPuzzleProfileId?: string | null;
 };

 function EmptyState({ title }: { title: string }) {
@@ -131,6 +133,8 @@ export function CustomWorldCreationHub({
  puzzleItems = [],
  onOpenPuzzleDetail,
  onDeletePuzzle = null,
+  onClaimPuzzlePointIncentive = null,
+  claimingPuzzleProfileId = null,
 }: CustomWorldCreationHubProps) {
  const [activeFilter, setActiveFilter] =
    useState<CustomWorldWorkFilter>('all');
@@ -222,6 +226,17 @@ export function CustomWorldCreationHub({
    }
  }

+  function buildPointIncentiveAction(item: CreationWorkShelfItem) {
+    if (item.source.kind !== 'puzzle' || !onClaimPuzzlePointIncentive) {
+      return null;
+    }
+
+    const sourceItem = item.source.item;
+    return () => {
+      onClaimPuzzlePointIncentive(sourceItem);
+    };
+  }
+
  return (
    <div className="platform-page-stage platform-remap-surface space-y-4 px-3 pb-4 pt-3 sm:px-4 sm:pt-4 xl:px-5 xl:pb-5 xl:pt-5">
      <div className="space-y-4 xl:space-y-3">
@@ -281,6 +296,11 @@ export function CustomWorldCreationHub({
                onOpen={() => handleOpenShelfItem(item)}
                onDelete={buildDeleteAction(item)}
                deleteBusy={deletingWorkId === item.id}
+                onClaimPointIncentive={buildPointIncentiveAction(item)}
+                pointIncentiveBusy={
+                  item.source.kind === 'puzzle' &&
+                  claimingPuzzleProfileId === item.source.item.profileId
+                }
              />
            ))}
          </div>
--- a/src/components/custom-world-home/CustomWorldWorkCard.tsx
+++ b/src/components/custom-world-home/CustomWorldWorkCard.tsx
@@ -13,6 +13,7 @@ import {
  type CreationWorkShelfMetric,
  type CreationWorkShelfMetricId,
  formatCreationMetricCount,
+  formatCreationPointIncentiveTotal,
 } from './creationWorkShelf';

 type CustomWorldWorkCardProps = {
@@ -21,6 +22,8 @@ type CustomWorldWorkCardProps = {
  onOpen: () => void;
  onDelete?: (() => void) | null;
  deleteBusy?: boolean;
+  onClaimPointIncentive?: (() => void) | null;
+  pointIncentiveBusy?: boolean;
 };

 const BADGE_TONE_CLASS: Record<CreationWorkShelfBadgeTone, string> = {
@@ -189,12 +192,17 @@ export function CustomWorldWorkCard({
  onOpen,
  onDelete = null,
  deleteBusy = false,
+  onClaimPointIncentive = null,
+  pointIncentiveBusy = false,
 }: CustomWorldWorkCardProps) {
  const [shareState, setShareState] = useState<'idle' | 'copied' | 'failed'>(
    'idle',
  );
  const shareResetTimerRef = useRef<number | null>(null);
  const isPublished = item.status === 'published';
+  const canClaimPointIncentive =
+    Boolean(onClaimPointIncentive) &&
+    (item.pointIncentive?.claimablePoints ?? 0) > 0;
  const displayTitle = formatPlatformWorkDisplayName(item.title);
  const { cardRef, deltas, displayValues, showGrowth } =
    usePublishedMetricAnimation(
@@ -346,34 +354,81 @@ export function CustomWorldWorkCard({
        </div>

        {isPublished ? (
-          <div className="mt-auto grid grid-cols-3 gap-1.5 pt-3 sm:gap-2 sm:pt-4 xl:pt-3">
-            {item.metrics.map((metric) => (
-              <div
-                key={`${item.id}-${metric.id}`}
-                aria-label={`${metric.label} ${displayValues[metric.id] ?? metric.value}${metric.unit}`}
-                className={`creation-work-card-stat creation-work-card-stat--${metric.tone}`}
-              >
-                <span className="creation-work-card-stat__label">
-                  {metric.label}
-                </span>
-                <span className="creation-work-card-stat__value">
-                  <span className="creation-work-card-stat__number">
-                    {formatCreationMetricCount(
-                      displayValues[metric.id] ?? metric.value,
+          <div className="mt-auto space-y-2 pt-3 sm:pt-4 xl:pt-3">
+            {item.pointIncentive ? (
+              <div className="creation-work-card-incentive">
+                <div
+                  aria-label={`积分激励总数 ${formatCreationPointIncentiveTotal(item.pointIncentive.totalPoints)} 陶泥币`}
+                  className="creation-work-card-incentive__metric"
+                >
+                  <span className="creation-work-card-incentive__label">
+                    积分激励
+                  </span>
+                  <span className="creation-work-card-incentive__value">
+                    {formatCreationPointIncentiveTotal(
+                      item.pointIncentive.totalPoints,
                    )}
                  </span>
-                  <span className="creation-work-card-stat__unit">
-                    {metric.unit}
+                </div>
+                <div
+                  aria-label={`待领取积分 ${item.pointIncentive.claimablePoints} 陶泥币`}
+                  className="creation-work-card-incentive__metric"
+                >
+                  <span className="creation-work-card-incentive__label">
+                    待领取
                  </span>
-                </span>
-                {showGrowth && deltas[metric.id] > 0 ? (
-                  <span className="creation-work-card-stat__growth">
-                    <span aria-hidden="true">↑</span>
-                    {formatCreationMetricCount(deltas[metric.id])}
+                  <span className="creation-work-card-incentive__value">
+                    {formatCreationMetricCount(
+                      item.pointIncentive.claimablePoints,
+                    )}
                  </span>
-                ) : null}
+                </div>
+                <button
+                  type="button"
+                  disabled={!canClaimPointIncentive || pointIncentiveBusy}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onClaimPointIncentive?.();
+                  }}
+                  onKeyDown={(event) => {
+                    event.stopPropagation();
+                  }}
+                  className="pointer-events-auto creation-work-card-incentive__button"
+                >
+                  {pointIncentiveBusy ? '领取中' : '领取积分'}
+                </button>
              </div>
-            ))}
+            ) : null}
+
+            <div className="grid grid-cols-3 gap-1.5 sm:gap-2">
+              {item.metrics.map((metric) => (
+                <div
+                  key={`${item.id}-${metric.id}`}
+                  aria-label={`${metric.label} ${displayValues[metric.id] ?? metric.value}${metric.unit}`}
+                  className={`creation-work-card-stat creation-work-card-stat--${metric.tone}`}
+                >
+                  <span className="creation-work-card-stat__label">
+                    {metric.label}
+                  </span>
+                  <span className="creation-work-card-stat__value">
+                    <span className="creation-work-card-stat__number">
+                      {formatCreationMetricCount(
+                        displayValues[metric.id] ?? metric.value,
+                      )}
+                    </span>
+                    <span className="creation-work-card-stat__unit">
+                      {metric.unit}
+                    </span>
+                  </span>
+                  {showGrowth && deltas[metric.id] > 0 ? (
+                    <span className="creation-work-card-stat__growth">
+                      <span aria-hidden="true">↑</span>
+                      {formatCreationMetricCount(deltas[metric.id])}
+                    </span>
+                  ) : null}
+                </div>
+              ))}
+            </div>
          </div>
        ) : null}
      </div>
--- a/src/components/custom-world-home/creationWorkShelf.ts
+++ b/src/components/custom-world-home/creationWorkShelf.ts
@@ -35,6 +35,12 @@ export type CreationWorkShelfMetric = {
  tone: CreationWorkShelfMetricTone;
 };

+export type CreationWorkShelfPointIncentive = {
+  totalHalfPoints: number;
+  totalPoints: number;
+  claimablePoints: number;
+};
+
 export type CreationWorkShelfSource =
  | {
      kind: 'rpg';
@@ -66,6 +72,7 @@ export type CreationWorkShelfItem = {
  canShare: boolean;
  badges: CreationWorkShelfBadge[];
  metrics: CreationWorkShelfMetric[];
+  pointIncentive?: CreationWorkShelfPointIncentive;
  source: CreationWorkShelfSource;
 };

@@ -238,6 +245,21 @@ function mapPuzzleWorkToShelfItem(
            likeCount: item.likeCount,
          })
        : [],
+    pointIncentive:
+      status === 'published'
+        ? {
+            totalHalfPoints: normalizeMetricCount(
+              item.pointIncentiveTotalHalfPoints,
+            ),
+            totalPoints: normalizePointIncentiveTotal(
+              item.pointIncentiveTotalPoints,
+              item.pointIncentiveTotalHalfPoints,
+            ),
+            claimablePoints: normalizeMetricCount(
+              item.pointIncentiveClaimablePoints,
+            ),
+          }
+        : undefined,
    source: { kind: 'puzzle', item },
  };
 }
@@ -286,6 +308,24 @@ export function formatCreationMetricCount(value?: number | null) {
  return `${normalized}`;
 }

+export function formatCreationPointIncentiveTotal(value?: number | null) {
+  const normalized = Math.max(0, value ?? 0);
+  return Number.isInteger(normalized)
+    ? normalized.toFixed(0)
+    : normalized.toFixed(1);
+}
+
+function normalizePointIncentiveTotal(
+  totalPoints?: number | null,
+  totalHalfPoints?: number | null,
+) {
+  if (Number.isFinite(totalPoints)) {
+    return Math.max(0, totalPoints ?? 0);
+  }
+
+  return normalizeMetricCount(totalHalfPoints) / 2;
+}
+
 function buildStatusBadge(
  status: CreationWorkShelfStatus,
 ): CreationWorkShelfBadge {