1

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>