1

src/components/common/PublishShareModal.tsx

@@ -0,0 +1,145 @@
+import { Check, Copy, MessageCircle, Music2 } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { copyTextToClipboard } from '../../services/clipboard';
+import {
+  buildPublishShareText,
+  type PublishShareModalPayload,
+} from './publishShareModalModel';
+import { UnifiedModal } from './UnifiedModal';
+
+type PublishShareModalProps = {
+  open: boolean;
+  payload: PublishShareModalPayload | null;
+  onClose: () => void;
+};
+
+const SHARE_CHANNELS = [
+  {
+    id: 'wechat',
+    label: '微信',
+    icon: MessageCircle,
+    className: 'bg-emerald-500 text-white',
+  },
+  {
+    id: 'qq',
+    label: 'QQ',
+    icon: MessageCircle,
+    className: 'bg-sky-500 text-white',
+  },
+  {
+    id: 'douyin',
+    label: '抖音',
+    icon: Music2,
+    className: 'bg-slate-950 text-white',
+  },
+] as const;
+
+/**
+ * 发布完成后的分享弹窗。
+ * 目前各渠道先统一复制分享文本，后续如接入微信/QQ/抖音 SDK，可以只替换这里的渠道点击逻辑。
+ */
+export function PublishShareModal({
+  open,
+  payload,
+  onClose,
+}: PublishShareModalProps) {
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>(
+    'idle',
+  );
+  const resetTimerRef = useRef<number | null>(null);
+  const shareText = useMemo(
+    () => (payload ? buildPublishShareText(payload) : ''),
+    [payload],
+  );
+
+  useEffect(
+    () => () => {
+      if (resetTimerRef.current !== null) {
+        window.clearTimeout(resetTimerRef.current);
+      }
+    },
+    [],
+  );
+
+  useEffect(() => {
+    setCopyState('idle');
+  }, [payload?.publicWorkCode]);
+
+  const copyShareText = () => {
+    if (!shareText) {
+      return;
+    }
+
+    void copyTextToClipboard(shareText).then((copied) => {
+      setCopyState(copied ? 'copied' : 'failed');
+      if (resetTimerRef.current !== null) {
+        window.clearTimeout(resetTimerRef.current);
+      }
+      resetTimerRef.current = window.setTimeout(() => {
+        resetTimerRef.current = null;
+        setCopyState('idle');
+      }, 1400);
+    });
+  };
+
+  return (
+    <UnifiedModal
+      open={open && Boolean(payload)}
+      title="分享给朋友"
+      onClose={onClose}
+      size="sm"
+      panelClassName="platform-remap-surface"
+      bodyClassName="space-y-4 px-4 py-4 sm:px-5 sm:py-5"
+      footerClassName="justify-center border-t-0 px-4 pb-5 pt-0 sm:px-5"
+      footer={
+        <div className="grid w-full grid-cols-3 gap-3">
+          {SHARE_CHANNELS.map((channel) => {
+            const Icon = channel.icon;
+
+            return (
+              <button
+                key={channel.id}
+                type="button"
+                onClick={copyShareText}
+                className="flex min-w-0 flex-col items-center gap-2 rounded-[1rem] px-2 py-2.5 text-xs font-bold text-[var(--platform-text-base)] transition hover:bg-white/62"
+                aria-label={`分享到${channel.label}`}
+                title={channel.label}
+              >
+                <span
+                  className={`inline-flex h-11 w-11 items-center justify-center rounded-full shadow-sm ${channel.className}`}
+                >
+                  <Icon className="h-5 w-5" />
+                </span>
+                <span>{channel.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      }
+    >
+      <div className="rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/72 p-4">
+        <div className="whitespace-pre-wrap break-words text-sm leading-6 text-[var(--platform-text-strong)]">
+          {shareText}
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={copyShareText}
+        disabled={!shareText}
+        className="platform-button platform-button--primary w-full justify-center gap-2 disabled:cursor-not-allowed disabled:opacity-55"
+      >
+        {copyState === 'copied' ? (
+          <Check className="h-4 w-4" />
+        ) : (
+          <Copy className="h-4 w-4" />
+        )}
+        {copyState === 'copied'
+          ? '已复制'
+          : copyState === 'failed'
+            ? '复制失败'
+            : '分享'}
+      </button>
+    </UnifiedModal>
+  );
+}