{Array.from({ length: rows }, (_, index) => (

))}

); } function Avatar({ src, label, size = 40 }) { return (

{ event.currentTarget.style.visibility = 'hidden'; }} title={label} /> ); } /* 侧边详情：PC 右侧抽屉，手机底部 sheet。Esc 关闭并还原焦点。 */ function Sheet({ open, onClose, label, children }) { const panel = useRef(null); useEffect(() => { if (!open) return undefined; const previous = document.activeElement; const onKey = event => { if (event.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; if (panel.current) panel.current.focus(); return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; if (previous && previous.focus) previous.focus(); }; }, [open, onClose]); if (!open) return null; // 挂到 body：#root 自带层叠上下文（z-index:1），否则抽屉会被顶部导航压住。 return ReactDOM.createPortal(

, document.body ); } /* ================= 仓库卡片指标（实测数字 + 示意图形） ================= */ const reduceMotion = () => typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* 进入视口才开始动画：长列表滚动时逐条「画」出来，而不是首屏一次播完。 */ function useInView() { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const node = ref.current; if (!node || seen) return undefined; if (typeof IntersectionObserver === 'undefined') { setSeen(true); return undefined; } const io = new IntersectionObserver(items => { if (items.some(item => item.isIntersecting)) { setSeen(true); io.disconnect(); } }, { rootMargin: '0px 0px -8% 0px' }); io.observe(node); return () => io.disconnect(); }, [seen]); return [ref, seen]; } function CountUp({ value, run = true, format }) { const [display, setDisplay] = useState(run && !reduceMotion() ? 0 : value); useEffect(() => { if (!run) return undefined; if (reduceMotion()) { setDisplay(value); return undefined; } const startedAt = performance.now(); let frame; const tick = now => { const progress = Math.min(1, (now - startedAt) / 800); setDisplay(Math.round(value * (1 - Math.pow(1 - progress, 3)))); if (progress < 1) frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [value, run]); return <>{format ? format(display) : display.toLocaleString()}; } /* 签名细节：推演段画成虚线（灰），只有末点是实测值（朱砂实心点 + 呼吸光圈）。一眼就能看出「只有这一点是真的」。 */ function RepoSparkline({ data, width = 132, height = 30, run = true }) { const series = Array.isArray(data) && data.length ? data : [0]; const min = Math.min(...series); const range = Math.max(1, Math.max(...series) - min); const pts = series.map((value, index) => [ (index * (width - 4)) / Math.max(1, series.length - 1) + 2, height - 3 - ((value - min) / range) * (height - 8), ]); const line = pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' '); const [ex, ey] = pts[pts.length - 1]; const area = `2,${height} ${line} ${ex.toFixed(1)},${height}`; return ( ); } function RepoHeat({ levels, run = true }) { return ( {levels.map((level, index) => )} ); } const fmt = n => WL_HUB_ADAPTER.formatCompact(n); /* variant: 'row'（台账紧凑）| 'lead'（头条）| 'detail'（速读，带逐项解释） */ function RepoMetrics({ metrics, variant = 'row' }) { const [ref, seen] = useInView(); if (!metrics) return null; const nums = [ { key: 'stars', label: 'Stars', value: metrics.stars, icon: 'star', hot: true, help: '收藏数：有多少人觉得值得留着看。代表关注度，不代表质量。' }, { key: 'forks', label: 'Forks', value: metrics.forks, icon: 'fork', help: '分叉数：有多少人复制一份去改。越高说明越多人在「动手用」。' }, { key: 'issues', label: 'Issues', value: metrics.issues, icon: 'issue', help: '未关闭议题：待处理的问题与需求。相对 Stars 过高时说明维护吃紧。' }, ]; if (variant === 'row') { return ( {nums.map(n => ( ))} ); } const detail = variant === 'detail'; return (

STARS 走势示意 · 12 点

推演实测 {fmt(metrics.stars)}

{nums.map(n => (
{n.label}实测 {detail && {n.help}}
))}

活跃度示意 · 7 格
{detail && (
怎么读：三个数字是采集那一刻从 GitHub API 拿到的实测快照。GitHub 不提供星标历史，所以曲线只有最右端的实心点是真的，左边虚线是按当前 Forks / Issues 推演出的示意弧线；活跃度 7 格同样由 Forks 与 Issues 派生，只用来帮你扫读「冷 / 热」，不要当作真实的周活跃统计。
)}
); } /* 本机相关徽标：只在本浏览器有喜好后出现 */ function LocalBadge({ rel, showScore = true }) { if (!rel || !rel.ready || rel.level === 'none' || rel.level === 'skipped') return null; const tone = rel.level === 'loved' || rel.level === 'high' ? 'is-high' : rel.level === 'mid' ? 'is-mid' : 'is-low'; return ( r.text).join('；')}`}> 本机 · {rel.label}{showScore && rel.level !== 'loved' ? {rel.score} : null} ); } /* 可展开的解释：小 ⓘ 按钮，点开出现一段说明（键盘可达，不依赖 hover） */ function Explain({ title = '这是什么？', children, className = '' }) { return (

{title}

{children}

); } window.WL_UI = { Icon, Eyebrow, Pill, PriorityMark, Segmented, ScoreRow, TasteButtons, StateBlock, SkeletonRows, Avatar, Sheet, TONE, CountUp, RepoSparkline, RepoMetrics, LocalBadge, Explain }; })();