知识卡片内部分三块结构

每条知识卡分：① 知识类型拆解(What/Why/How) ② 解构·阶段 ③ 解构·作用域
三块带编号小标题、分隔线；保持一条知识一张卡（不跨段对照）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/index.html

@@ -47,9 +47,12 @@
   .imgs img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in;transition:transform .1s}
   .imgs img:hover{transform:scale(1.05);border-color:var(--ac)}
   .card{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;margin-bottom:10px}
-  .kphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
-  .kphead h4{margin:0;font-size:15px}
-  .ktype{font-size:12px;padding:3px 10px;border-radius:8px;background:#e6f1fb;color:#0c447c;white-space:nowrap;flex:none}
+  .kptitle{margin:0;font-size:15px}
+  .part{margin-top:12px}
+  .part ~ .part{border-top:1px solid var(--line2);padding-top:12px}
+  .phead{font-size:12px;color:var(--mut);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
+  .pn{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#e6f1fb;color:#185fa5;align-items:center;justify-content:center;font-size:11px;flex:none}
+  .ktype{font-size:12px;padding:2px 9px;border-radius:8px;background:#e6f1fb;color:#0c447c;white-space:nowrap;margin-left:auto}
   .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
   pre{white-space:pre-wrap;word-break:break-word;background:#f6f2e8;border:1px solid var(--line);border-radius:6px;padding:10px;font-size:12px;color:#444441;margin:6px 0 0;max-height:260px;overflow:auto}
   details summary{cursor:pointer;color:var(--mut);font-size:12px}
@@ -109,32 +112,32 @@ function KPCard({it,idx}){
   const types=(item.knowledge_types||[]).map(t=>t.toUpperCase()).join(" + ");
   const stages=deco.stages||[], scopes=deco.scopes||[];
   return <div className="card">
-    <div className="kphead">
-      <h4>{idx}. {item.title||"(无标题)"}</h4>
-      <span className="ktype">知识类型 · {types||"—"}</span>
+    <h4 className="kptitle">{idx}. {item.title||"(无标题)"}</h4>
+
+    <div className="part">
+      <div className="phead"><span className="pn">1</span>知识类型拆解<span className="ktype">{types||"—"}</span></div>
+      {item.what&&<div className="whh w"><b>What · 是什么</b><div>{item.what}</div></div>}
+      {item.why&&<div className="whh y"><b>Why · 为什么</b><div>{item.why}</div></div>}
+      {item.how&&<div className="whh h"><b>How · 怎么做</b><div>{item.how}</div></div>}
     </div>
-    {item.what&&<div className="whh w"><b>What · 是什么</b><div>{item.what}</div></div>}
-    {item.why&&<div className="whh y"><b>Why · 为什么</b><div>{item.why}</div></div>}
-    {item.how&&<div className="whh h"><b>How · 怎么做</b><div>{item.how}</div></div>}
 
-    <div className="sect">
-      <div className="srow">
-        <span className="slabel">对应阶段</span>
-        <div className="chips">
-          {stages.length? stages.map(s=><Badge key={s}>{s}</Badge>) : <span className="kv">—</span>}
-          {stages.length>1 && <span className="kv">（{stages.length} 个阶段都 cover）</span>}
-        </div>
+    <div className="part">
+      <div className="phead"><span className="pn">2</span>解构 · 阶段</div>
+      <div className="chips">
+        {stages.length? stages.map(s=><Badge key={s}>{s}</Badge>) : <span className="kv">—</span>}
+        {stages.length>1 && <span className="kv">（{stages.length} 个阶段都 cover）</span>}
       </div>
-      <div className="srow">
-        <span className="slabel">作用域</span>
-        <div style={{display:'flex',flexDirection:'column',gap:6}}>
-          {scopes.length? scopes.map((s,i)=>{
-            const c=SCOPE_COLOR[s.scope_type]||["#efeadd","#5f5e5a"];
-            return <div className="scope" key={i}>
-              <span className="scn" style={{background:c[0],color:c[1]}}>{SCOPE_CN[s.scope_type]||s.scope_type}</span>
-              <span>{s.value}</span></div>;
-          }) : <span className="kv">—</span>}
-        </div>
+    </div>
+
+    <div className="part">
+      <div className="phead"><span className="pn">3</span>解构 · 作用域</div>
+      <div style={{display:'flex',flexDirection:'column',gap:6}}>
+        {scopes.length? scopes.map((s,i)=>{
+          const c=SCOPE_COLOR[s.scope_type]||["#efeadd","#5f5e5a"];
+          return <div className="scope" key={i}>
+            <span className="scn" style={{background:c[0],color:c[1]}}>{SCOPE_CN[s.scope_type]||s.scope_type}</span>
+            <span>{s.value}</span></div>;
+        }) : <span className="kv">—</span>}
       </div>
     </div>