// 4·质检合成 + 5·分发爆款 + 6·回收数据 // 这三个页面目前是 WIP 演示骨架,未接入真实数据 / 后端。 // 顶部贴一个统一 banner 让用户明确知道在看的是占位 UI。 const WipBanner = ({ name }) => (
⚠️ {name}:当前为前端 WIP 演示骨架,尚未接入真实数据 / 后端逻辑。 展示用的样例数字与卡片均为静态占位,仅用于讨论流程。
); // ========== 6·分发爆款(含回收数据 tab) ========== const DistributePage = () => { const [tab, setTab] = React.useState("platform"); // platform | content | recycle const [selPlat, setSelPlat] = React.useState("douyin"); const [selTag, setSelTag] = React.useState("娱乐型·直接相关"); const curveIF = React.useMemo( () => Array.from({length:30}, (_,i)=> 30+ 25*Math.sin(i/3)+ i*1.5 + Math.random()*8), [], ); const platforms = [ { k:"xhs", n:"小红书", col:"pink", accounts:[ {n:"@小红在看房", f:"82.4w", st:"online"}, {n:"@学区那些事", f:"46.2w", st:"online"}, {n:"@城市置业指南", f:"32.1w", st:"online"}, {n:"@小墨的家", f:"28.4w", st:"offline"}, ]}, { k:"douyin", n:"抖音", col:"fg-1", accounts:[ {n:"@房叔老李", f:"432w", st:"online"}, {n:"@置业小课堂", f:"128w", st:"online"}, {n:"@看房vlog", f:"74.8w", st:"online"}, {n:"@拆拆不累", f:"68w", st:"online"}, ]}, { k:"juliang", n:"巨量", col:"orange", accounts:[ {n:"巨量-房产账户01", f:"投流", st:"online"}, {n:"巨量-房产账户02", f:"投流", st:"online"}, ]}, { k:"juguang", n:"聚光", col:"purple", accounts:[ {n:"聚光-小红书账户01", f:"投流", st:"online"}, {n:"聚光-小红书账户02", f:"投流", st:"offline"}, ]}, ]; const contentTags = [ {kind:"video", tag:"娱乐型·直接相关", cnt:8, col:"purple"}, {kind:"video", tag:"干货型·直接相关", cnt:12, col:"purple"}, {kind:"video", tag:"娱乐型·间接相关", cnt:6, col:"purple"}, {kind:"image", tag:"种草型·间接相关", cnt:14, col:"cyan"}, {kind:"image", tag:"干货型·间接相关", cnt:9, col:"cyan"}, {kind:"image", tag:"种草型·直接相关", cnt:4, col:"cyan"}, ]; const curPlat = platforms.find(p=>p.k===selPlat); return ( <> 矩阵运行中 }/>
{/* Tab 切换 */}
{[ {k:"platform",l:"模块一 · 平台"}, {k:"content",l:"模块二 · 内容"}, {k:"recycle",l:"模块三 · 回收数据"}, ].map(t=>(
setTab(t.k)} style={{ padding:"10px 18px", fontSize:12, cursor:"pointer", color: tab===t.k?"var(--fg-0)":"var(--fg-3)", fontWeight: tab===t.k?600:400, borderBottom: tab===t.k?"2px solid var(--cyan)":"2px solid transparent", }}>{t.l}
))}
{tab==="platform" ? ( <>
平台列表 {platforms.map(p=>(
setSelPlat(p.k)} className="row gap-8" style={{ padding:10, borderRadius:5, cursor:"pointer", background: selPlat===p.k?`color-mix(in oklch, var(--${p.col}) 14%, var(--bg-1))`:"var(--bg-1)", border: `1px solid ${selPlat===p.k?`var(--${p.col})`:"var(--line-1)"}`, }}> {p.n[0]}
{p.n} {p.accounts.length} 账号
))}
{curPlat.n} · 账号列表
{curPlat.accounts.filter(a=>a.st==="online").length} 在线
{curPlat.accounts.map((a,i)=>(
{a.n[1]||a.n[0]}
{a.n} {a.f}
{a.st==="online"?"在线":"离线"}
))}
) : tab==="content" ? ( <>
图文爆款内容 {contentTags.filter(c=>c.kind==="image").map(c=>( setSelTag(c.tag)}/> ))} 视频爆款内容 {contentTags.filter(c=>c.kind==="video").map(c=>( setSelTag(c.tag)}/> ))}
标签 · {selTag}
可分发到 3 平台
{[1,2,3,4].map(i=>(
复刻版本 #{i} {selTag}__2026-04-21
小红书 抖音
))}
) : (
{/* 数据分析 */}
{[ {l:"信息流 · 巨量", c:"cyan", v:"4.82%", d:"+1.2pt", k:"转化率"}, {l:"自然流 · 小红书", c:"pink", v:"42.8w", d:"+28%", k:"播放"}, {l:"付费流 · 聚光", c:"orange", v:"¥28.4", d:"-18%", k:"转化成本"}, ].map((s,i)=>(
{s.l}
{s.v} {s.k}
{s.d}
))}
3 流趋势 · 36h
{/* AI Skill 卡 */}
SKILL · OptimizeV1.2 置信 88%
推流/审核机制优化建议
{[ {k:"画面", t:"黄金3秒添加强动态转场,完播+28%"}, {k:"画面", t:"B3 镜头缩短 0.6s,规避限流同质化"}, {k:"文案", t:"开头去「姐妹们」避开小红书限流词"}, {k:"文案", t:"CTA 改为「评论扣房」规避推流降权"}, {k:"审核", t:"封面右下水印遮罩,防版权审核"}, ].map((s,i)=>(
{s.k} {s.t}
))}
Skill 已推送至 3 · 复刻爆款 · 规则审核,拆解 & 复刻时自动规避并采纳建议,形成闭环迭代。
{/* 闭环可视化 */}
自动迭代闭环
{["回收数据","AI 分析 Skill","复刻·规则审核","拆解/复刻采纳","重新分发"].map((s,i,a)=>(
STEP {i+1} {s}
{i}
))}
)}
); }; const TagRow = ({c, sel, onClick}) => (
{c.tag} {c.cnt}
); Object.assign(window, { CollectPage: window.CollectPage, QCPage, DistributePage });