Bladeren bron

前端 Why 卡改三段并列(主张/依据/取舍),去掉为什么对/怎么用翻译层

- WhyCard 渲染为三段并列:主张(紫)/依据(蓝)/取舍(琥珀)
- 删死代码 FORM_PLAIN/plainForm/KSection + WhatCard 旧主体兜底(数据已全 body)
- 名词说明同步成 主张/依据/取舍 三段结构

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
SamLee 3 weken geleden
bovenliggende
commit
83e1675b2a
1 gewijzigde bestanden met toevoegingen van 22 en 26 verwijderingen
  1. 22 26
      web/index.html

+ 22 - 26
web/index.html

@@ -114,6 +114,12 @@
   .why-lab{font-size:11px;font-weight:700;border-radius:4px;padding:2px 8px;flex:none;height:20px}
   .wl-claim{background:#fef9c3;color:#854d0e}.wl-basis{background:#e0e7ff;color:#3730a3}.wl-impact{background:#dcfce7;color:#166534}
   .why-txt{font-size:12.5px;line-height:1.65;color:#1f2937}
+  .wseg{display:flex;gap:9px;margin:8px 0;align-items:flex-start}
+  .wseg-l{flex:none;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:9px;margin-top:1px}
+  .wseg-c{font-size:12.5px;line-height:1.66;color:#1f2937}
+  .w-claim .wseg-l{background:#f3e8ff;color:#7e22ce}
+  .w-ground .wseg-l{background:#e0f2fe;color:#0369a1}
+  .w-trade .wseg-l{background:#fde68a;color:#92400e}
   /* 颗级作用域 */
   .kscopes{margin-top:9px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
   .kscopes .lab{font-size:11px;color:#9ca3af}
@@ -186,9 +192,6 @@ how 工序每一步命中其中**一个**;不在这 5 个里的值会被代码
 | **打磨** | 修改 / 精炼 / 优化 / 定稿 |
 
 (区别于「动作」:动作是模型从帖子里实时抽的、不固定;创作阶段是定死的 5 选 1。)`;
-// 把提示词里的"黑话"形式标签换成大白话(找不到就原样显示)
-const FORM_PLAIN={"取舍":"怎么用","依据":"为什么对","机制":"怎么起作用","平台逻辑":"平台规则","读者心理":"读者心理","例证":"例子","反例":"反例","判据":"判断标准","对照":"对比","清单":"清单","分类":"分类","定义":"定义","维度":"方面"};
-const plainForm=f=>FORM_PLAIN[f]||f;
 const GLOSSARY=`## 一篇帖子能拆出三种知识(平级的)
 这三种各帮你做一个不同的决定,没有谁更重要。
 
@@ -204,10 +207,10 @@ const GLOSSARY=`## 一篇帖子能拆出三种知识(平级的)
 - **多维关系**:像配方,几个部件**都要、合起来才完整、无先后**(例:人物 = 生理+社会+心理)。
 - **序列**:几个部件**都要、且有前后位置**(例:故事五部分、黄金三段式)。只是位置顺序——后段若**消费**前段产出、换序就崩,那就成 how 工序了。
 
-## 「为什么」里每条道理的小标签
-说明这条是哪种支撑(现在只两类):
-- **怎么用**(原"取舍"):这条道理落到创作上——该多写什么、砍什么、何时适用。**最重要,每条「为什么」都有**
-- **为什么对**(即"依据"):这条原理凭什么成立、怎么起作用(机制、平台规则、读者心理、例证都归这一类)。`;
+## 「为什么」的三段结构
+- **主张**:这条原理本身(核心观点)。
+- **依据**:它凭什么成立、怎么起作用(机制、平台规则、读者心理、例证都归这一类)
+- **取舍**:落到创作上该多写 / 砍 / 侧重什么、何时适用。**最重要,每条都有**。`;
 
 const STEPS=[
   {key:"read",label:"读懂帖子",desc:"把图、视频读成文字",
@@ -313,34 +316,27 @@ function HowTable({k,onScope,onPrompt,onSource,onCstage}){
     </tr>)}</tbody>
   </table></div>;
 }
-function KSection({b}){
-  const items=b.条目||[];
-  const isKey=b.形式==="取舍";
-  return <div className="ksec">
-    <div className="ksec-h">{b.小标题&&<span className="ksec-t">{b.小标题}</span>}{b.形式&&<span className={"ksec-f"+(isKey?" key":"")} title={"原标签:"+b.形式}>{isKey?"💡 ":""}{plainForm(b.形式)}</span>}</div>
-    {b.内容&&<div className="ksec-c">{b.内容}</div>}
-    {items.length>0&&<table className="elem"><tbody>{items.map((c,i)=><tr key={i}>
-      <td className="el">{c.词||c.要素}</td><td>{c.说明}{c.选择线索&&<div className="cue"><b>👉 什么时候用:</b>{c.选择线索}</div>}</td></tr>)}</tbody></table>}
-  </div>;
-}
 function WhatCard({k,onScope,onGloss}){
-  const summary=k.概要||k.界定;   // 概要为新字段名,界定为旧数据兜底
   return <div>
-    {summary&&<div className="def">
+    {k.概要&&<div className="def">
       {k.kind&&<span className={"kindb kind-"+k.kind}>{k.kind}</span>}
       {k.维度拆分规则&&<span className="dimrule" title="维度拆分规则(仅子集)">按「{k.维度拆分规则}」拆</span>}
-      概要:{summary}</div>}
-    {k.body
-      ? <table className="elem"><tbody>{k.body.map((it,i)=><tr key={i}>
-          <td className="el">{it.item_name}</td><td>{it.item_desc}</td></tr>)}</tbody></table>
-      : (k.主体||[]).map((b,i)=><KSection key={i} b={b}/>) /* 旧形状兜底 */}
+      概要:{k.概要}</div>}
+    {(k.body||[]).length>0&&<table className="elem"><tbody>{k.body.map((it,i)=><tr key={i}>
+      <td className="el">{it.item_name}</td><td>{it.item_desc}</td></tr>)}</tbody></table>}
     <KScopes list={k.作用域} onScope={onScope}/>
   </div>;
 }
+function WSeg({lab,cls,head,body}){
+  return <div className={"wseg "+cls}><span className="wseg-l">{lab}</span>
+    <div className="wseg-c">{head&&<b>{head}:</b>}{body}</div></div>;
+}
 function WhyCard({k,onScope}){
+  const sup=k.支撑||[];
   return <div>
-    {k.主张&&<div className="why-row"><span className="why-txt">{k.主张}</span></div>}
-    {(k.支撑||[]).map((b,i)=><KSection key={i} b={b}/>)}
+    {k.主张&&<WSeg lab="主张" cls="w-claim" body={k.主张}/>}
+    {sup.filter(b=>b.形式!=="取舍").map((b,i)=><WSeg key={"g"+i} lab="依据" cls="w-ground" head={b.小标题} body={b.内容}/>)}
+    {sup.filter(b=>b.形式==="取舍").map((b,i)=><WSeg key={"t"+i} lab="取舍" cls="w-trade" head={b.小标题} body={b.内容}/>)}
     <KScopes list={k.作用域} onScope={onScope}/>
   </div>;
 }