91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
|
import React, { useState, useCallback } from 'react';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { Share2, Copy, Check, X } from 'lucide-react';
|
||
|
|
import { useResponsive } from '../../hooks/useResponsive';
|
||
|
|
import { encryptShareParams } from '../../utils/shareCrypto';
|
||
|
|
|
||
|
|
interface ShareModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
planId: string;
|
||
|
|
factoryType: 'textile' | 'washing';
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ShareModal({ isOpen, onClose, planId, factoryType }: ShareModalProps) {
|
||
|
|
const { isMobile } = useResponsive();
|
||
|
|
const [copied, setCopied] = useState(false);
|
||
|
|
|
||
|
|
const generateShareLink = useCallback(() => {
|
||
|
|
const baseUrl = window.location.origin + window.location.pathname;
|
||
|
|
const token = encryptShareParams(planId, factoryType);
|
||
|
|
return `${baseUrl}#/import?token=${token}`;
|
||
|
|
}, [planId, factoryType]);
|
||
|
|
|
||
|
|
const handleCopy = useCallback(async () => {
|
||
|
|
const link = generateShareLink();
|
||
|
|
try {
|
||
|
|
await navigator.clipboard.writeText(link);
|
||
|
|
setCopied(true);
|
||
|
|
setTimeout(() => setCopied(false), 2000);
|
||
|
|
} catch {
|
||
|
|
// 降级方案
|
||
|
|
const textarea = document.createElement('textarea');
|
||
|
|
textarea.value = link;
|
||
|
|
document.body.appendChild(textarea);
|
||
|
|
textarea.select();
|
||
|
|
document.execCommand('copy');
|
||
|
|
document.body.removeChild(textarea);
|
||
|
|
setCopied(true);
|
||
|
|
setTimeout(() => setCopied(false), 2000);
|
||
|
|
}
|
||
|
|
}, [generateShareLink]);
|
||
|
|
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
const link = generateShareLink();
|
||
|
|
const factoryLabel = factoryType === 'textile' ? '织布厂' : '水洗厂';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
||
|
|
className="bg-white rounded-2xl p-4 sm:p-6 w-full max-w-md shadow-2xl"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
|
||
|
|
<div className="w-9 h-9 sm:w-10 sm:h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
|
|
<Share2 className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
|
||
|
|
</div>
|
||
|
|
<div className="min-w-0">
|
||
|
|
<h3 className="text-base sm:text-lg font-semibold text-gray-900">分享链接</h3>
|
||
|
|
<p className="text-xs sm:text-sm text-gray-500">发送给{factoryLabel}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-gray-50 rounded-xl p-2.5 sm:p-3 mb-3 sm:mb-4 border border-gray-200">
|
||
|
|
<p className="text-xs sm:text-sm text-gray-700 break-all font-mono">{link}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-2 sm:gap-3">
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="flex-1 py-2 sm:py-2.5 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 text-xs sm:text-sm font-medium transition-colors"
|
||
|
|
>
|
||
|
|
关闭
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={handleCopy}
|
||
|
|
className={`flex-1 py-2 sm:py-2.5 rounded-xl text-white flex items-center justify-center gap-1.5 sm:gap-2 transition-colors text-xs sm:text-sm font-medium ${
|
||
|
|
copied ? 'bg-emerald-500' : 'bg-blue-600 hover:bg-blue-700'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{copied ? <Check size={isMobile ? 14 : 16} /> : <Copy size={isMobile ? 14 : 16} />}
|
||
|
|
{copied ? '已复制' : '复制链接'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|