360 lines
13 KiB
TypeScript
360 lines
13 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { motion, AnimatePresence } from "framer-motion"
|
||
|
||
interface MatchUser {
|
||
id: string
|
||
nickname: string
|
||
avatar: string
|
||
tags: string[]
|
||
matchScore: number
|
||
concept: string
|
||
wechat: string
|
||
commonInterests: Array<{ icon: string; text: string }>
|
||
}
|
||
|
||
export default function MatchPage() {
|
||
const [isMatching, setIsMatching] = useState(false)
|
||
const [currentMatch, setCurrentMatch] = useState<MatchUser | null>(null)
|
||
const [matchAttempts, setMatchAttempts] = useState(0)
|
||
|
||
const startMatch = () => {
|
||
setIsMatching(true)
|
||
setMatchAttempts(0)
|
||
setCurrentMatch(null)
|
||
|
||
// 模拟匹配过程
|
||
const interval = setInterval(() => {
|
||
setMatchAttempts((prev) => prev + 1)
|
||
}, 1000)
|
||
|
||
// 3-6秒后匹配成功
|
||
setTimeout(() => {
|
||
clearInterval(interval)
|
||
setIsMatching(false)
|
||
setCurrentMatch(getMockMatch())
|
||
}, Math.random() * 3000 + 3000)
|
||
}
|
||
|
||
const getMockMatch = (): MatchUser => {
|
||
const nicknames = ['阅读爱好者', '创业小白', '私域达人', '书虫一枚', '灵魂摆渡人']
|
||
const randomIndex = Math.floor(Math.random() * nicknames.length)
|
||
const concepts = [
|
||
'一个坚持长期主义的私域玩家，擅长内容结构化。',
|
||
'相信阅读可以改变人生，每天坚持读书1小时。',
|
||
'在Soul上分享创业经验，希望帮助更多人少走弯路。'
|
||
]
|
||
const wechats = [
|
||
'soul_book_friend_1',
|
||
'soul_reader_2024',
|
||
'soul_party_fan'
|
||
]
|
||
|
||
return {
|
||
id: `user_${Date.now()}`,
|
||
nickname: nicknames[randomIndex],
|
||
avatar: `https://picsum.photos/200/200?random=${randomIndex}`,
|
||
tags: ['创业者', '私域运营', 'MBTI-INTP'],
|
||
matchScore: Math.floor(Math.random() * 20) + 80,
|
||
concept: concepts[randomIndex % concepts.length],
|
||
wechat: wechats[randomIndex % wechats.length],
|
||
commonInterests: [
|
||
{ icon: '📚', text: '都在读《创业实验》' },
|
||
{ icon: '💼', text: '对私域运营感兴趣' },
|
||
{ icon: '🎯', text: '相似的职业背景' }
|
||
]
|
||
}
|
||
}
|
||
|
||
const nextMatch = () => {
|
||
setCurrentMatch(null)
|
||
setTimeout(() => startMatch(), 500)
|
||
}
|
||
|
||
const handleAddWechat = () => {
|
||
if (!currentMatch) return
|
||
|
||
// 复制微信号
|
||
navigator.clipboard.writeText(currentMatch.wechat).then(() => {
|
||
alert(`微信号已复制：${currentMatch.wechat}\n\n请打开微信添加好友，备注"书友"即可。`)
|
||
}).catch(() => {
|
||
alert(`微信号：${currentMatch.wechat}\n\n请手动复制并添加好友。`)
|
||
})
|
||
}
|
||
|
||
const handleJoinGroup = () => {
|
||
alert('请先添加书友微信，备注"书友群"，对方会拉你入群。\n\n群内可以：\n· 深度交流读书心得\n· 参加线下读书会\n· 获取独家资源')
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-black pb-20 page-transition">
|
||
{/* 星空背景 */}
|
||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||
{Array.from({ length: 100 }).map((_, i) => (
|
||
<motion.div
|
||
key={i}
|
||
className="absolute w-1 h-1 bg-white rounded-full"
|
||
style={{
|
||
left: `${Math.random() * 100}%`,
|
||
top: `${Math.random() * 100}%`,
|
||
opacity: Math.random() * 0.7 + 0.3,
|
||
}}
|
||
animate={{
|
||
opacity: [0.3, 1, 0.3],
|
||
scale: [1, 1.5, 1],
|
||
}}
|
||
transition={{
|
||
duration: Math.random() * 3 + 2,
|
||
repeat: Infinity,
|
||
delay: Math.random() * 2,
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<div className="relative z-10">
|
||
{/* 头部 */}
|
||
<div className="px-6 pt-20 pb-8 text-center">
|
||
<h1 className="text-5xl font-bold text-white mb-4">寻找合作伙伴</h1>
|
||
<p className="text-white/60 text-lg">
|
||
找到和你一起创业的灵魂
|
||
</p>
|
||
</div>
|
||
|
||
{/* 匹配状态区 */}
|
||
<div className="px-6 pt-10">
|
||
<AnimatePresence mode="wait">
|
||
{!isMatching && !currentMatch && (
|
||
<motion.div
|
||
key="idle"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -20 }}
|
||
className="flex flex-col items-center"
|
||
>
|
||
{/* 中央大星球 */}
|
||
<motion.div
|
||
onClick={startMatch}
|
||
className="relative w-[280px] h-[280px] mb-12 cursor-pointer"
|
||
whileTap={{ scale: 0.95 }}
|
||
>
|
||
<motion.div
|
||
className="absolute inset-0 rounded-full flex flex-col items-center justify-center"
|
||
style={{
|
||
background: 'linear-gradient(135deg, #00E5FF 0%, #7B61FF 50%, #E91E63 100%)',
|
||
boxShadow: '0 0 60px rgba(0, 229, 255, 0.4), 0 0 120px rgba(123, 97, 255, 0.3), inset 0 0 80px rgba(255, 255, 255, 0.1)'
|
||
}}
|
||
animate={{
|
||
y: [0, -10, 0],
|
||
scale: [1, 1.02, 1],
|
||
}}
|
||
transition={{
|
||
duration: 3,
|
||
repeat: Infinity,
|
||
ease: "easeInOut",
|
||
}}
|
||
>
|
||
<div className="text-6xl mb-3 filter brightness-0 invert">🤝</div>
|
||
<div className="text-2xl font-bold text-white mb-2 drop-shadow-lg">开始匹配</div>
|
||
<div className="text-sm text-white/90 drop-shadow">寻找合作伙伴</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
className="absolute inset-0 border-2 border-[#00E5FF]/30 rounded-full"
|
||
style={{ width: '330px', height: '330px', left: '-25px', top: '-25px' }}
|
||
animate={{
|
||
opacity: [0.3, 0.6, 0.3],
|
||
scale: [1, 1.05, 1],
|
||
}}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
ease: "easeInOut",
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
|
||
{/* 匹配提示 */}
|
||
<div className="glass-card p-6 mb-8 w-full max-w-md">
|
||
<div className="space-y-3 text-white/70">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">💼</span>
|
||
<span>共同的创业方向</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">💬</span>
|
||
<span>实时在线交流</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">🎯</span>
|
||
<span>相似的商业洞察</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{isMatching && (
|
||
<motion.div
|
||
key="matching"
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.9 }}
|
||
className="text-center"
|
||
>
|
||
{/* 匹配动画 */}
|
||
<motion.div
|
||
className="text-9xl mb-8 relative mx-auto w-fit"
|
||
animate={{ rotate: 360 }}
|
||
transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
|
||
>
|
||
🌍
|
||
{[1, 2, 3].map((ring) => (
|
||
<motion.div
|
||
key={ring}
|
||
className="absolute inset-0 border-4 border-[#00E5FF]/30 rounded-full"
|
||
style={{ width: '300px', height: '300px' }}
|
||
animate={{
|
||
scale: [1, 2, 1],
|
||
opacity: [1, 0, 1],
|
||
}}
|
||
transition={{
|
||
duration: 2,
|
||
repeat: Infinity,
|
||
delay: ring * 0.6,
|
||
}}
|
||
/>
|
||
))}
|
||
</motion.div>
|
||
|
||
<h2 className="text-2xl font-semibold mb-4 text-white">
|
||
正在寻找志同道合的书友...
|
||
</h2>
|
||
<p className="text-white/50 mb-8">
|
||
已匹配 {matchAttempts} 次
|
||
</p>
|
||
|
||
<button
|
||
onClick={() => setIsMatching(false)}
|
||
className="btn-ios-secondary"
|
||
>
|
||
取消匹配
|
||
</button>
|
||
</motion.div>
|
||
)}
|
||
|
||
{currentMatch && !isMatching && (
|
||
<motion.div
|
||
key="matched"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -20 }}
|
||
className="max-w-md mx-auto"
|
||
>
|
||
{/* 成功动画 */}
|
||
<motion.div
|
||
className="text-center mb-8"
|
||
initial={{ scale: 0 }}
|
||
animate={{ scale: 1 }}
|
||
transition={{ type: "spring", bounce: 0.5 }}
|
||
>
|
||
<span className="text-9xl">✨</span>
|
||
</motion.div>
|
||
|
||
{/* 用户卡片 */}
|
||
<div className="glass-card p-6 mb-6">
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<img
|
||
src={currentMatch.avatar}
|
||
alt={currentMatch.nickname}
|
||
className="w-20 h-20 rounded-full border-4 border-[#00E5FF]"
|
||
/>
|
||
<div className="flex-1">
|
||
<h3 className="text-2xl font-semibold mb-2 text-white">
|
||
{currentMatch.nickname}
|
||
</h3>
|
||
<div className="flex flex-wrap gap-2">
|
||
{currentMatch.tags.map((tag) => (
|
||
<span
|
||
key={tag}
|
||
className="px-3 py-1 rounded-full text-sm bg-[#00E5FF]/20 text-[#00E5FF]"
|
||
>
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl font-bold text-[#00E5FF]">
|
||
{currentMatch.matchScore}%
|
||
</div>
|
||
<div className="text-xs text-white/50">
|
||
匹配度
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 共同兴趣 */}
|
||
<div className="pt-4 border-t border-white/10 mb-4">
|
||
<h4 className="text-sm text-white/60 mb-3">
|
||
共同兴趣
|
||
</h4>
|
||
<div className="space-y-2">
|
||
{currentMatch.commonInterests.map((interest, i) => (
|
||
<div
|
||
key={i}
|
||
className="flex items-center gap-3 text-sm text-white/80"
|
||
>
|
||
<span className="text-xl">{interest.icon}</span>
|
||
<span>{interest.text}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 核心理念 */}
|
||
<div className="pt-4 border-t border-white/10">
|
||
<h4 className="text-sm text-white/60 mb-3">
|
||
核心理念
|
||
</h4>
|
||
<p className="text-sm text-white/70 leading-relaxed">
|
||
{currentMatch.concept}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="space-y-4">
|
||
<div className="flex gap-4">
|
||
<button
|
||
onClick={handleAddWechat}
|
||
className="btn-ios flex-1 flex items-center justify-center gap-2"
|
||
>
|
||
<span className="text-xl">➕</span>
|
||
<span>一键加好友</span>
|
||
</button>
|
||
<button
|
||
onClick={handleJoinGroup}
|
||
className="btn-ios flex-1 flex items-center justify-center gap-2"
|
||
>
|
||
<span className="text-xl">👥</span>
|
||
<span>加入书友群</span>
|
||
</button>
|
||
</div>
|
||
<button
|
||
onClick={nextMatch}
|
||
className="btn-ios-secondary w-full"
|
||
>
|
||
🔄 不喜欢？重新匹配
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|