|
@@ -240,7 +240,7 @@ function App(){
|
|
|
const [zoom,setZoom]=useState(null);
|
|
const [zoom,setZoom]=useState(null);
|
|
|
const [hl,setHl]=useState(false);
|
|
const [hl,setHl]=useState(false);
|
|
|
useEffect(()=>{Promise.all([j("/frameworks.json"),j("/payloads.json").catch(()=>[])]).then(([f,pl])=>{
|
|
useEffect(()=>{Promise.all([j("/frameworks.json"),j("/payloads.json").catch(()=>[])]).then(([f,pl])=>{
|
|
|
- setItems((f.posts||[]).map(p=>({...p,payloads:(pl||[]).filter(x=>(x.source||{}).id==="xhs_"+p.post_id)})));});},[]);
|
|
|
|
|
|
|
+ setItems((f.posts||[]).map(p=>({...p,payloads:(pl||[]).filter(x=>(x.source||{}).id===(p.source_id||("xhs_"+p.post_id)))})));});},[]);
|
|
|
useEffect(()=>{document.body.classList.toggle("hl",hl);},[hl]);
|
|
useEffect(()=>{document.body.classList.toggle("hl",hl);},[hl]);
|
|
|
function openPrompt(key){
|
|
function openPrompt(key){
|
|
|
const st=STEPMAP[key]; if(!st) return;
|
|
const st=STEPMAP[key]; if(!st) return;
|
|
@@ -254,7 +254,7 @@ function App(){
|
|
|
const ks=it.knowledges||[];
|
|
const ks=it.knowledges||[];
|
|
|
const how_titles={}; ks.forEach(k=>{if(k.type==="how")how_titles[k.id]=k.title;});
|
|
const how_titles={}; ks.forEach(k=>{if(k.type==="how")how_titles[k.id]=k.title;});
|
|
|
const payloadOf=k=>(it.payloads||[]).find(p=>p.title===k.title);
|
|
const payloadOf=k=>(it.payloads||[]).find(p=>p.title===k.title);
|
|
|
- const imgs=[]; for(let n=1;n<=(it.img_count||0);n++) imgs.push(it.img_base+"/image_"+n+".webp");
|
|
|
|
|
|
|
+ const media=it.media||{}; const imgs=media.images||[]; const videoUrl=media.video_url;
|
|
|
return <div className="app">
|
|
return <div className="app">
|
|
|
<header className="top">
|
|
<header className="top">
|
|
|
<h1>创作知识的解构</h1>
|
|
<h1>创作知识的解构</h1>
|
|
@@ -264,9 +264,12 @@ function App(){
|
|
|
</header>
|
|
</header>
|
|
|
<div className="scroll">
|
|
<div className="scroll">
|
|
|
<Ribbon onOpen={openPrompt}/>
|
|
<Ribbon onOpen={openPrompt}/>
|
|
|
- <details className="src"><summary>原帖:{it.title}(这一帖的原料)</summary>
|
|
|
|
|
- <div className="srcbody"><a href={it.url} target="_blank" rel="noreferrer">{it.url}</a> · {it.platform}
|
|
|
|
|
- <div className="srcimgs">{imgs.map((u,i)=><img key={i} src={u} onClick={()=>setZoom(u)} onError={e=>e.target.style.display='none'}/>)}</div></div>
|
|
|
|
|
|
|
+ <details className="src"><summary>原帖:{it.title}(这一帖的原料)· {it.platform}{videoUrl?" · 视频":""}</summary>
|
|
|
|
|
+ <div className="srcbody"><a href={it.url} target="_blank" rel="noreferrer">{it.url}</a>
|
|
|
|
|
+ {videoUrl
|
|
|
|
|
+ ? <div style={{marginTop:8}}><video src={videoUrl} controls style={{maxWidth:"380px",maxHeight:"320px",borderRadius:"6px",border:"1px solid #e2e8f0"}}/></div>
|
|
|
|
|
+ : <div className="srcimgs">{imgs.map((u,i)=><img key={i} src={u} onClick={()=>setZoom(u)} onError={e=>e.target.style.display='none'}/>)}</div>}
|
|
|
|
|
+ </div>
|
|
|
</details>
|
|
</details>
|
|
|
<div className="barhint" style={{display:"flex",gap:8,alignItems:"center"}}>
|
|
<div className="barhint" style={{display:"flex",gap:8,alignItems:"center"}}>
|
|
|
<span>这一帖拆出 <b>{ks.length}</b> 颗知识(how 工序表 / what 要素表 / why 论点卡);组件颗标「出自某 how 第 N 步」可点跳。</span>
|
|
<span>这一帖拆出 <b>{ks.length}</b> 颗知识(how 工序表 / what 要素表 / why 论点卡);组件颗标「出自某 how 第 N 步」可点跳。</span>
|