1

src/components/puzzle-gallery/PuzzleGalleryDetailView.tsx

@@ -0,0 +1,115 @@
+import { ArrowLeft, Play, UserRound } from 'lucide-react';
+
+import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
+import { ResolvedAssetImage } from '../ResolvedAssetImage';
+
+type PuzzleGalleryDetailViewProps = {
+  item: PuzzleWorkSummary;
+  isBusy?: boolean;
+  error?: string | null;
+  onBack: () => void;
+  onStartGame: () => void;
+};
+
+/**
+ * 拼图广场详情页。
+ * 展示最小信息并提供进入游戏动作，不扩展评论、收藏等非本轮需求。
+ */
+export function PuzzleGalleryDetailView({
+  item,
+  isBusy = false,
+  error = null,
+  onBack,
+  onStartGame,
+}: PuzzleGalleryDetailViewProps) {
+  return (
+    <div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col gap-3 overflow-hidden px-1 sm:px-0">
+      <div className="relative overflow-hidden rounded-[1.8rem] border border-amber-100/16 bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.18),transparent_32%),linear-gradient(135deg,rgba(76,29,19,0.98),rgba(15,23,42,0.98))] px-4 py-4 text-white sm:px-5">
+        <div className="flex items-start justify-between gap-3">
+          <button
+            type="button"
+            onClick={onBack}
+            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/16 bg-white/10 text-white/84"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            disabled={isBusy}
+            onClick={onStartGame}
+            className="inline-flex items-center gap-2 rounded-full bg-amber-200 px-4 py-2 text-sm font-bold text-slate-950 disabled:opacity-45"
+          >
+            <Play className="h-4 w-4" />
+            进入第 1 关
+          </button>
+        </div>
+
+        <div className="mt-6">
+          <div className="text-2xl font-black leading-tight sm:text-3xl">
+            {item.levelName}
+          </div>
+          <div className="mt-3 flex flex-wrap items-center gap-3 text-sm text-amber-50/82">
+            <span className="inline-flex items-center gap-2">
+              <UserRound className="h-4 w-4" />
+              {item.authorDisplayName}
+            </span>
+            <span>{item.playCount} 次游玩</span>
+          </div>
+        </div>
+      </div>
+
+      {error ? (
+        <div className="rounded-[1.15rem] border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
+          {error}
+        </div>
+      ) : null}
+
+      <div className="grid min-h-0 flex-1 gap-3 overflow-hidden lg:grid-cols-[minmax(0,1.05fr)_minmax(18rem,0.95fr)]">
+        <section className="min-h-0 overflow-hidden rounded-[1.5rem] border border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)]">
+          <div className="aspect-square overflow-hidden">
+            {item.coverImageSrc ? (
+              <ResolvedAssetImage
+                src={item.coverImageSrc}
+                alt={item.levelName}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.14),transparent_34%),linear-gradient(145deg,rgba(76,29,19,0.86),rgba(30,41,59,0.94))] text-sm text-white/66">
+                暂无封面
+              </div>
+            )}
+          </div>
+        </section>
+
+        <aside className="space-y-3 overflow-y-auto">
+          <div className="rounded-[1.45rem] border border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] p-4">
+            <div className="text-sm font-black text-[var(--platform-text-strong)]">
+              题材标签
+            </div>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {item.themeTags.map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full border border-amber-300/35 bg-amber-100/68 px-3 py-1 text-xs font-semibold text-amber-700"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="rounded-[1.45rem] border border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] p-4">
+            <div className="text-sm font-black text-[var(--platform-text-strong)]">
+              关卡摘要
+            </div>
+            <div className="mt-3 text-sm leading-7 text-[var(--platform-text-base)]">
+              {item.summary}
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+export default PuzzleGalleryDetailView;