lisihan
/
Create-knowledge-find-decode


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>创作知识的搜索和解构</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
  :root{
    --bg:#f3efe4; --panel:#fff; --panel2:#faf7ef; --line:#e7e2d4; --line2:#ece7d9;
    --fg:#2c2c2a; --mut:#6f6e68; --tert:#9a978d; --ac:#185fa5;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 -apple-system,"PingFang SC",Segoe UI,Roboto,sans-serif}
  header{padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
  header h0{font-size:16px;font-weight:650;margin:0}
  header .sub{color:var(--mut);font-weight:400;font-size:12.5px}
  .pbtn{margin-left:auto;background:#1e293b;color:#fff;border:0;border-radius:7px;padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
  .pbtn:hover{background:#334155}
  .legend{background:var(--panel2);border-bottom:1px solid var(--line);padding:8px 20px;font-size:11.5px;color:var(--mut);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
  .legend .grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .legend .gl{font-weight:700;color:var(--fg)}
  .legend .it{white-space:nowrap}
  .wrap{display:flex;height:calc(100vh - 50px - 38px)}
  .side{width:320px;background:var(--panel);border-right:1px solid var(--line);overflow:auto;flex:none}
  .sidecap{padding:9px 14px;font-size:11px;color:var(--tert);font-weight:600;border-bottom:1px solid var(--line);background:var(--panel2);position:sticky;top:0}
  .main{flex:1;overflow:auto;padding:18px 26px}
  .pitem{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
  .pitem:hover{background:#f7f3ea}
  .pitem.sel{background:#eef4fb;box-shadow:inset 3px 0 0 var(--ac)}
  .pitem .ftitle{font-size:13.5px;font-weight:600;line-height:1.45}
  .pitem .r{display:flex;gap:5px;align-items:center;margin-top:5px;flex-wrap:wrap}
  .pbg{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:3px;background:#ffe4e6;color:#be123c}
  .pitem .src{font-size:11px;color:var(--tert);margin-top:3px}
  .chip{font-size:11px;padding:1px 8px;border-radius:10px;white-space:nowrap}
  .c-stage{background:#ede9fe;color:#5b21b6}
  .c-type{background:#e6f1fb;color:#185fa5}
  .c-step{font-size:11px;padding:0 7px;border-radius:4px;background:#eef2f7;color:#475569;font-weight:600}
  .sc{font-size:11px;padding:1px 8px;border-radius:4px;margin:0 4px 4px 0;display:inline-block}
  .sc-实质{background:#fee2e2;color:#991b1b}.sc-形式{background:#dbeafe;color:#1e40af}
  .sc-感受{background:#fce7f3;color:#9d174d}.sc-作用{background:#dcfce7;color:#166534}.sc-意图{background:#fef3c7;color:#92400e}
  .dh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
  .dh h1{font-size:20px;margin:0;font-weight:700}
  .dh .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
  .dh a{color:var(--ac);text-decoration:none;font-size:12.5px}
  .minib{background:#eef2f7;color:#334155;border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit}
  .minib:hover{background:#e2e8f0}
  .ptitle{color:var(--mut);font-size:12.5px;margin-bottom:12px}
  .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
  /* 下游字段名作主标签 */
  .flab{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:#0f766e;border-radius:5px;padding:1px 9px;margin-bottom:7px}
  .block{margin-bottom:18px}
  .purpose{background:var(--panel);border:1px solid var(--line);border-left:3px solid #0f766e;border-radius:8px;padding:11px 14px;font-size:14.5px;font-weight:600;line-height:1.55}
  .want{background:var(--panel2);border:1px dashed var(--line);border-radius:8px;padding:8px 12px;font-size:13px}
  .want b{color:var(--ac)}
  .step{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
  .step-h{display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--panel2);border-bottom:1px solid var(--line2)}
  .step-n{background:#0f766e;color:#fff;width:auto;min-width:46px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;flex:none;padding:0 8px;font-weight:600}
  .step-intent{font-size:14px;font-weight:600;flex:1}
  .step-intent .vlabel{color:var(--tert);font-weight:400;font-size:12px}
  .step-tags{padding:8px 14px 0;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
  .rowlab{display:flex;gap:8px;padding:9px 14px 0}
  .rl{font-size:10px;font-weight:700;border-radius:4px;padding:1px 7px;flex:none;height:18px;line-height:16px}
  .rl-how{background:#e6f1fb;color:#185fa5}
  .rl-out{background:#dcfce7;color:#15803d}
  .directive{font-size:13px;line-height:1.72;white-space:pre-wrap;color:#33312c;flex:1}
  .outtxt{font-size:12.5px;line-height:1.6;color:#166534;flex:1}
  .from{font-size:11px;color:var(--tert);margin-left:auto}
  details.box{margin-top:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
  details.box>summary{padding:9px 14px;cursor:pointer;font-size:12.5px;color:var(--mut);list-style:none}
  details.box>summary::before{content:'▶ ';color:var(--tert)}
  details.box[open]>summary::before{content:'▼ '}
  .box .bd{padding:4px 14px 12px}
  .drop{font-size:12px;color:var(--mut);margin:4px 0;line-height:1.6}
  .imgs{display:flex;flex-wrap:wrap;gap:7px;padding:4px 14px 12px}
  .imgs img{width:96px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in}
  .lb{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
  .lb img{max-width:92vw;max-height:92vh;border-radius:8px}
  .empty{color:var(--tert);padding:40px;text-align:center}
  .ov{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:60}
  .modal{background:#fff;width:780px;max-width:92vw;max-height:86vh;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
  .modal h2{margin:0;padding:13px 18px;background:#1e293b;color:#fff;font-size:14px;display:flex;align-items:center}
  .modal h2 .x{margin-left:auto;cursor:pointer;font-size:18px}
  .modal .mbody{padding:14px 18px;overflow:auto}
  .modal pre{margin:0;font:12px/1.62 ui-monospace,"SF Mono",Menlo,monospace;color:#1f2937;white-space:pre-wrap}
  .modal .fk{font-size:11px;color:var(--tert);margin:10px 0 3px;font-weight:700}
  .modal .fv{font-size:13px;color:#1f2937;margin-bottom:4px}
  .modal .cwrap{background:#f7f7f5;border:1px solid var(--line);border-radius:7px;padding:11px 13px;margin-top:4px}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {useState,useEffect} = React;
const j = u => fetch(u).then(r=>r.json());

const PROMPT = `# 创作知识提取（需求驱动 · 完整框架粒度）

产物：一颗知识 = 一个完整创作框架
= 一个 purpose（把某种输入一路做成一个可交付成品）+ 一条不可跳步的 steps 链。
一帖通常只出 1-2 颗。绝不把框架内部的步骤/要点拆成独立知识。

## 提取四步
1. 数闭环：找帖里所有“输入→可交付成品”的完整链，几条算几颗。
2. 去重叠：若某链成品其实是另一条链的中间产物，并入后者。
3. 压清单：所有“N选1 / 并列要素”压进所属 step，不按项数拆颗、不拆成多步。
4. 定步数：每颗按“几次不可省的形态转换”定 steps(2-6)，动词只用 决策/分析/构建/撰写/打磨。

## 一颗的结构
- title：6-12字名词短语，以“框架/创作/写作”收尾。
- purpose：「按「A→B→C」N步，将X写成可直接交付的Y」。
- 每 step：intent="<双字动词>，<任务>"；directive=把怎么做的全部细节压进来（清单+判据+正反例+阈值+反模式）；output=交付物验收规格。

## 只要创作，剔除制作（按“设计决策 vs 工艺执行”判，不看词面）
保留：景别/角度/运镜/构图/字幕/配乐/结构/时长。剔除：器材/打光/剪辑软件操作/调色参数/导出。

## 标签
知识类型(What/Why/How)、阶段(灵感/选题/脚本)、作用域(实质/形式/感受/作用/意图，可多选)。`;

// 把一颗框架拍平成下游消费的 content 文本（与 id 1005 同款）
function buildContent(fw){
  let s = "目标：" + (fw.purpose||"") + "\n";
  (fw.steps||[]).forEach((st,i)=>{
    s += "步骤"+(i+1)+"（目的："+(st.intent||"")+"）\n";
    s += "  指引："+(st.directive||"")+"\n";
    s += "  产出："+(st.output||"")+"\n";
  });
  return s.replace(/\n+$/,"");
}

function Scopes({list}){ return (list||[]).map((s,i)=><span key={i} className={"sc sc-"+s}>{s}</span>); }
function Tags({stage,type,scopes}){ return <React.Fragment>
  {type&&<span className="chip c-type">类型·{type}</span>}
  {stage&&<span className="chip c-stage">阶段·{stage}</span>}
  <Scopes list={scopes}/>
</React.Fragment>; }

function Legend(){
  return <div className="legend">
    <div className="grp"><span className="gl">怎么读：</span><span className="it">左边一颗知识 → 右边是它下发给下游的格式：<b>目标</b> + <b>步骤</b>（目的/指引/产出）。点右上「下游记录」看实际 content。</span></div>
    <div className="grp"><span className="gl">类型</span><span className="it"><b>What</b>是什么</span><span className="it"><b>Why</b>为什么</span><span className="it"><b>How</b>怎么做</span></div>
    <div className="grp"><span className="gl">阶段</span><span className="it">灵感·找方向</span><span className="it">选题·定写什么</span><span className="it">脚本·组织表达</span></div>
    <div className="grp"><span className="gl">作用域</span><span className="sc sc-实质">实质讲什么</span><span className="sc sc-形式">形式怎么呈现</span><span className="sc sc-感受">感受勾情绪</span><span className="sc sc-作用">作用起功能</span><span className="sc sc-意图">意图创作者目的</span></div>
  </div>;
}

function PostList({posts,sel,onSel}){
  return <div className="side">
    <div className="sidecap">知识列表 · 每条 = 一颗完整创作框架</div>
    {posts.map(p=>{ const fw=p.framework||{};
      return <div key={p.post_id} className={"pitem"+(sel===p.post_id?" sel":"")} onClick={()=>onSel(p.post_id)}>
        <div className="ftitle">{fw.title||p.title}</div>
        <div className="r"><span className="pbg">小红书</span><span className="chip c-type">{fw["知识类型"]}</span><span className="chip c-stage">{fw["阶段跨度"]}</span><span className="c-step">{(fw.steps||[]).length}步</span></div>
        <div className="src">原帖：{p.title}</div>
      </div>;
    })}
  </div>;
}

function Step({s,i}){
  return <div className="step">
    <div className="step-h">
      <span className="step-n">步骤{i+1}</span>
      <span className="step-intent"><span className="vlabel">目的：</span>{s.intent}</span>
    </div>
    <div className="step-tags">
      {s["阶段"]&&<span className="chip c-stage">阶段·{s["阶段"]}</span>}
      {s["类型"]&&<span className="chip c-type">类型·{s["类型"]}</span>}
      <Scopes list={s["作用域"]}/>
      {s["出处"]&&s["出处"].length>0 && <span className="from">来源 {s["出处"].join(" · ")}</span>}
    </div>
    <div className="rowlab"><span className="rl rl-how">指引</span><div className="directive">{s.directive}</div></div>
    {s.output && <div className="rowlab" style={{paddingBottom:12}}><span className="rl rl-out">产出</span><div className="outtxt">{s.output}</div></div>}
  </div>;
}

function Detail({post,onZoom,onRecord}){
  if(!post) return <div className="empty">← 左边选一颗知识</div>;
  const fw=post.framework||{};
  const imgs=[]; for(let n=1;n<=(post.img_count||0);n++) imgs.push(post.img_base+"/image_"+n+".webp");
  return <div>
    <div className="dh">
      <h1>{fw.title}</h1>
      <div className="acts">
        <button className="minib" onClick={()=>onRecord(post)}>📥 下游记录</button>
        <a href={post.url} target="_blank" rel="noreferrer">🔗 原帖</a>
      </div>
    </div>
    <div className="ptitle">原帖：{post.title} · 小红书</div>
    <div className="meta"><Tags stage={fw["阶段跨度"]} type={fw["知识类型"]} scopes={fw["作用域并集"]}/></div>

    <div className="block">
      <span className="flab">目标</span>
      <div className="purpose">{fw.purpose}</div>
    </div>

    {fw["想要"] && <div className="block"><span className="flab">想要</span><div className="want">{fw["想要"]}</div></div>}

    <div className="block">
      <span className="flab">步骤（{(fw.steps||[]).length}）· 目的 / 指引 / 产出</span>
      {(fw.steps||[]).map((s,i)=><Step key={i} s={s} i={i}/>)}
    </div>

    {post.dropped&&post.dropped.length>0 && <details className="box">
      <summary>被剔除的「制作 / 素材」（{post.dropped.length}）— 不算创作知识</summary>
      <div className="bd">{post.dropped.map((d,i)=><div className="drop" key={i}>• {typeof d==="string"?d:(d.item||JSON.stringify(d))}{d.reason?("　—　"+d.reason):""}</div>)}</div>
    </details>}

    <details className="box">
      <summary>原帖图片（{imgs.length}）· 知识从这里提炼</summary>
      <div className="imgs">{imgs.map((u,i)=><img key={i} src={u} onClick={()=>onZoom(u)} onError={e=>e.target.style.display='none'}/>)}</div>
    </details>
  </div>;
}

function RecordModal({post,onClose}){
  const fw=post.framework||{};
  const content=buildContent(fw);
  const record={ title: fw.title, purpose: fw.purpose, content };
  return <div className="ov" onClick={onClose}>
    <div className="modal" onClick={e=>e.stopPropagation()}>
      <h2>下游消费记录（这颗知识下发给「脚本构建 Agent」的样子）<span className="x" onClick={onClose}>×</span></h2>
      <div className="mbody">
        <div className="fk">title</div><div className="fv">{record.title}</div>
        <div className="fk">purpose</div><div className="fv">{record.purpose}</div>
        <div className="fk">content（拍平后的全文，下游逐字消费）</div>
        <div className="cwrap"><pre>{content}</pre></div>
      </div>
    </div>
  </div>;
}

function PromptModal({onClose}){
  return <div className="ov" onClick={onClose}>
    <div className="modal" onClick={e=>e.stopPropagation()}>
      <h2>这套知识是怎么提取出来的（提示词）<span className="x" onClick={onClose}>×</span></h2>
      <div className="mbody"><pre>{PROMPT}</pre></div>
    </div>
  </div>;
}

function App(){
  const [posts,setPosts]=useState([]);
  const [sel,setSel]=useState(null);
  const [zoom,setZoom]=useState(null);
  const [pm,setPm]=useState(false);
  const [rec,setRec]=useState(null);
  useEffect(()=>{ j("/frameworks.json").then(d=>{const ps=d.posts||[];setPosts(ps); if(ps[0])setSel(ps[0].post_id);}); },[]);
  const post=posts.find(p=>p.post_id===sel);
  return <div>
    <header>
      <h0>创作知识的搜索和解构</h0>
      <span className="sub">· 一帖一颗完整框架（{posts.length} 颗）· 已按下游消费格式呈现</span>
      <button className="pbtn" onClick={()=>setPm(true)}>📄 提取提示词</button>
    </header>
    <Legend/>
    <div className="wrap">
      <PostList posts={posts} sel={sel} onSel={setSel}/>
      <div className="main">{posts.length? <Detail post={post} onZoom={setZoom} onRecord={setRec}/> : <div className="empty">加载中…</div>}</div>
    </div>
    {zoom&&<div className="lb" onClick={()=>setZoom(null)}><img src={zoom}/></div>}
    {pm&&<PromptModal onClose={()=>setPm(false)}/>}
    {rec&&<RecordModal post={rec} onClose={()=>setRec(null)}/>}
  </div>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
</script>
</body>
</html>