add public work share links

src/components/puzzle-gallery/PuzzleGalleryDetailView.tsx

@@ -1,7 +1,8 @@
-import { ArrowLeft, Copy, Pencil, Play, UserRound } from 'lucide-react';
+import { ArrowLeft, Copy, Pencil, Play, Share2, UserRound } from 'lucide-react';
 import { useState } from 'react';
 
 import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
+import { buildPublicWorkStagePath } from '../../routing/appPageRoutes';
 import { copyTextToClipboard } from '../../services/clipboard';
 import { buildPuzzlePublicWorkCode } from '../../services/publicWorkCode';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
@@ -31,12 +32,31 @@ export function PuzzleGalleryDetailView({
   const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>(
     'idle',
   );
+  const [shareState, setShareState] = useState<'idle' | 'copied' | 'failed'>(
+    'idle',
+  );
   const copyPublicWorkCode = () => {
     void copyTextToClipboard(publicWorkCode).then((copied) => {
       setCopyState(copied ? 'copied' : 'failed');
       window.setTimeout(() => setCopyState('idle'), 1400);
     });
   };
+  const sharePublicWork = () => {
+    const sharePath = buildPublicWorkStagePath(
+      'puzzle-gallery-detail',
+      publicWorkCode,
+    );
+    const shareUrl =
+      typeof window === 'undefined'
+        ? sharePath
+        : new URL(sharePath, window.location.origin).href;
+    const shareText = `邀请你来玩《${item.levelName}》\n作品号：${publicWorkCode}\n${shareUrl}`;
+
+    void copyTextToClipboard(shareText).then((copied) => {
+      setShareState(copied ? 'copied' : 'failed');
+      window.setTimeout(() => setShareState('idle'), 1400);
+    });
+  };
 
   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">
@@ -62,6 +82,19 @@ export function PuzzleGalleryDetailView({
                 修改作品
               </button>
             ) : null}
+            <button
+              type="button"
+              disabled={isBusy}
+              onClick={sharePublicWork}
+              className="inline-flex items-center gap-2 rounded-full bg-white/12 px-4 py-2 text-sm font-bold text-white disabled:opacity-45"
+            >
+              <Share2 className="h-4 w-4" />
+              {shareState === 'copied'
+                ? '已复制'
+                : shareState === 'failed'
+                  ? '复制失败'
+                  : '分享作品'}
+            </button>
             <button
               type="button"
               disabled={isBusy}