// KolProfile — KOL 公开主页抽屉 v2 // 布局：头像 + 社交 + 关注 → 直播入口 → 社区互动（单页滚动） const sb = window.supabaseClient; const PLATFORM_LIVE_URLS = { binance: 'https://www.binance.com/en/live', okx: 'https://www.okx.com/web3/live', gate: 'https://www.gate.com/zh/live', bybit: 'https://www.bybit.com/en/live', }; const PLATFORMS_META = { binance: { name: 'Binance Live', color: '#F3BA2F', icon: }, okx: { name: 'OKX Live', color: '#FFFFFF', icon: }, gate: { name: 'Gate.io Live', color: '#2354E6', icon: }, bybit: { name: 'Bybit Live', color: '#F7A600', icon: }, }; function SocialIcon({ type }) { switch (type) { case 'x': case 'twitter': return ( ); case 'telegram': return ( ); case 'youtube': return ( ); case 'twitch': return ( ); default: return ( ); } } function guessPlatformType(url, key) { if (key) { if (['x', 'twitter'].includes(key)) return 'x'; if (key === 'telegram') return 'telegram'; if (key === 'youtube') return 'youtube'; if (key === 'twitch') return 'twitch'; } const u = (url || '').toLowerCase(); if (u.includes('x.com') || u.includes('twitter.com')) return 'x'; if (u.includes('t.me') || u.includes('telegram')) return 'telegram'; if (u.includes('youtube')) return 'youtube'; if (u.includes('twitch')) return 'twitch'; return 'link'; } function timeAgoKol(dateStr) { if (!dateStr) return ''; const diff = Date.now() - new Date(dateStr).getTime(); const mins = Math.floor(diff / 60000); if (mins < 1) return '刚刚'; if (mins < 60) return `${mins}m`; const h = Math.floor(mins / 60); if (h < 24) return `${h}h`; return `${Math.floor(h / 24)}d`; } function fmtCount(n) { if (n >= 10000) return (n / 10000).toFixed(1) + 'W'; if (n >= 1000) return (n / 1000).toFixed(1) + 'K'; return String(n); } // ── 关注状态 Hook ───────────────────────────────────────────────── function useFollowState(kolName) { const { user } = useGlobalAuth(); const [following, setFollowing] = React.useState(false); const [count, setCount] = React.useState(0); const [loading, setLoading] = React.useState(true); React.useEffect(() => { let mounted = true; const tasks = [ sb.from('kol_follows').select('*', { count: 'exact', head: true }).eq('kol_name', kolName), user ? sb.from('kol_follows').select('id').eq('kol_name', kolName).eq('user_id', user.id).maybeSingle() : Promise.resolve({ data: null }), ]; Promise.all(tasks).then(([countRes, followRes]) => { if (!mounted) return; setCount(countRes.count || 0); setFollowing(!!followRes.data); setLoading(false); }).catch(() => { if (mounted) setLoading(false); }); return () => { mounted = false; }; }, [kolName, user && user.id]); const toggle = async () => { if (loading || !user) return; setLoading(true); try { if (following) { await sb.from('kol_follows').delete().eq('kol_name', kolName).eq('user_id', user.id); setFollowing(false); setCount(c => Math.max(0, c - 1)); } else { await sb.from('kol_follows').insert({ kol_name: kolName, user_id: user.id }); setFollowing(true); setCount(c => c + 1); } } catch (e) { console.error(e); } setLoading(false); }; return { following, count, loading, toggle }; } // ── 社区互动区块 ────────────────────────────────────────────────── function CommunitySection({ kol }) { const [questions, setQuestions] = React.useState([]); const [comments, setComments] = React.useState([]); const [loading, setLoading] = React.useState(true); const [subtab, setSubtab] = React.useState('questions'); React.useEffect(() => { setLoading(true); // 优先用 user_id 查询，确保昵称变更后仍能匹配 const uid = kol.userId; const qQuery = uid ? sb.from('questions').select('id, title, tag, solved, created_at').eq('user_id', uid) : sb.from('questions').select('id, title, tag, solved, created_at').eq('author_name', kol.name); const cQuery = uid ? sb.from('comments').select('id, body, created_at, questions(title)').eq('user_id', uid) : sb.from('comments').select('id, body, created_at, questions(title)').eq('author_name', kol.name); Promise.all([ qQuery.order('created_at', { ascending: false }).limit(10), cQuery.order('created_at', { ascending: false }).limit(10), ]).then(([qRes, cRes]) => { setQuestions(qRes.data || []); setComments(cRes.data || []); }).catch(() => {}).finally(() => setLoading(false)); }, [kol.userId, kol.name]); const EmptyState = ({ text }) => (

{text}

); return (
社区互动
{[ { id: 'questions', label: '提问', count: questions.length }, { id: 'comments', label: '回答', count: comments.length }, ].map(t => ( ))}
{loading ? (
) : subtab === 'questions' ? ( questions.length === 0 ? : (
{questions.map(q => (
{q.solved ? '已解决' : q.tag || '通用'} {q.title} {timeAgoKol(q.created_at)}
))}
) ) : ( comments.length === 0 ? : (
{comments.map(c => (
{c.questions?.title && (
↳ {c.questions.title}
)}

{c.body}

{timeAgoKol(c.created_at)}
))}
) )}
); } // ── 主组件 ──────────────────────────────────────────────────────── function KolProfileModal({ kol, onClose }) { const { user } = useGlobalAuth(); const { following, count, loading: followLoading, toggle } = useFollowState(kol.name); const handleFollow = () => { if (!user) { const lang = window.__kiwvoLang || localStorage.getItem('kiwvo.lang') || 'zh'; window.__authPromptMsg = lang === 'en' ? 'Welcome to join the Kiwvo community!' : '欢迎加入 Kiwvo 社区！'; document.querySelector('[data-auth-trigger]')?.click(); return; } toggle(); }; // ESC 关闭 React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); // 阻止背景滚动 React.useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []); // 整理社交链接 const socialLinks = []; if (kol.social?.x) socialLinks.push({ type: 'x', label: 'X', url: kol.social.x }); if (kol.social?.telegram) { const tg = kol.social.telegram; socialLinks.push({ type: 'telegram', label: 'Telegram', url: tg.startsWith('http') ? tg : `https://t.me/${tg.replace('@', '')}` }); } if (kol.social?.links) { kol.social.links.forEach(l => socialLinks.push({ type: guessPlatformType(l.url, l.key), label: l.platform || l.label || l.key || 'Link', url: l.url, })); } return (
e.stopPropagation()} > {/* ── 头部区域 ───────────────────────────────────────────── */}
{/* 顶栏：关闭 + 关注按钮 */}
{/* 头像 + 名字 + 社交 */}
{kol.avatarUrl ? : kol.name.slice(0, 1).toUpperCase() }

{kol.name}

{kol.platforms?.length > 0 && ( LIVE )} · {followLoading ? '–' : fmtCount(count)} 关注
{kol.topic &&

{kol.topic}

} {/* 社交媒体 pills */} {socialLinks.length > 0 && ( )}
{/* 统计数据行 */} {(kol.tier > 0 || kol.platforms?.length > 0) && (
{kol.tier > 0 && (
+{kol.tier}
贡献值
)} {kol.tier > 0 && kol.platforms?.length > 0 && (
)} {kol.platforms?.length > 0 && (
{kol.platforms.length}×
同播
)}
)}
{/* ── 可滚动内容区 ───────────────────────────────────────── */}
{/* 正在直播 */} {kol.platforms?.length > 0 && (
正在直播
)} {/* 分隔线 */}
{/* 社区互动 */}
); } window.KolProfileModal = KolProfileModal;