const { useState } = React; // --- Components --- const SectionHeader = ({ icon, title, subtitle, color }) => ( <div className={`flex items-center gap-3 mb-6 pb-2 border-b-2 {color}\`}> <div className={\`p-2 rounded-lg text-white{color.replace('border-', 'bg-')}`}> <i className={`fas ${icon} text-xl`}>

); const CognitiveMap = () => { return ( ); }; const AccordionItem = ({ title, children }) => { const

$$isOpen, setIsOpen$$

= useState(false); return (

); }; const CoreConcepts = () => { return ( ); }; const DeepDive = () => { return ( ); }; const ThinkingModels = () => { return ( ); }; const ClassicCases = () => { const cases =

{ id: 1, title: "离子方程式的书写与正误判断", question: "下列离子方程式书写正确的是（ ）", options: \[ { label: "A", text: "铁与稀盐酸反应：2Fe + 6H⁺ = 2Fe³⁺ + 3H₂↑" }, { label: "B", text: "氧化铜溶于稀硫酸：CuO + 2H⁺ = Cu²⁺ + H₂O" }, { label: "C", text: "碳酸钙溶于稀盐酸：CO₃²⁻ + 2H⁺ = CO₂↑ + H₂O" }, { label: "D", text: "氢氧化钡溶液与稀硫酸反应：Ba²⁺ + SO₄²⁻ = BaSO₄↓" }

, logic:

$$"1. 查产物：铁与弱氧化剂（如H⁺, Cu²⁺, S）反应生成 Fe²⁺，而不是 Fe³⁺。故A错。", "2. 查拆分：CuO是氧化物，不能拆；CaCO₃是难溶盐，不能拆。故C错，B对。", "3. 查漏写：氢氧化钡与稀硫酸反应，既生成BaSO₄沉淀，又生成水。D选项漏写了 H⁺ + OH⁻ = H₂O。故D错。"$$

, variant: "思考：如果将铁放入稀硝酸中，生成的还是Fe²⁺吗？(提示：硝酸是强氧化剂)" }, { id: 2, title: "氧化还原反应的双线桥法分析", question: "关于反应 3CO + Fe₂O₃ =(高温)= 2Fe + 3CO₂，下列说法正确的是（ ）", options:

$${ label: "A", text: "CO是氧化剂" }, { label: "B", text: "Fe₂O₃发生氧化反应" }, { label: "C", text: "碳元素化合价降低" }, { label: "D", text: "CO具有还原性" }$$

, logic:

$$"1. 标价态：C从+2价升到+4价，Fe从+3价降到0价。", "2. 定角色：C化合价升高 → 失电子 → 被氧化 → 是还原剂 → 具有还原性。Fe化合价降低 → 得电子 → 被还原 → 是氧化剂。", "3. 故A错（CO是还原剂），B错（被还原发生还原反应），C错（升高），D对。"$$

, variant: "变式：标出该反应的电子转移方向和数目（双线桥法）。注意：是 2×3e⁻ 还是 3×2e⁻？" }, { id: 3, title: "离子共存的限制条件判断", question: "在无色透明的强酸性溶液中，能大量共存的离子组是（ ）", options:

$${ label: "A", text: "Mg²⁺, Na⁺, OH⁻, SO₄²⁻" }, { label: "B", text: "K⁺, Na⁺, MnO₄⁻, NO₃⁻" }, { label: "C", text: "Na⁺, K⁺, CO₃²⁻, Cl⁻" }, { label: "D", text: "Mg²⁺, Na⁺, SO₄²⁻, NO₃⁻" }$$

, logic:

$$"1. 抓题眼：“无色”排除有色离子（Cu²⁺蓝, Fe³⁺黄, Fe²⁺浅绿, MnO₄⁻紫）；“强酸性”隐含 H⁺。", "2. 析选项：A中 OH⁻ 与 H⁺ 反应；B中 MnO₄⁻ 为紫色（违背无色）；C中 CO₃²⁻ 与 H⁺ 反应生成气体。", "3. D选项中各离子均为无色，且彼此不反应，也不与 H⁺ 反应。故D对。"$$

, variant: "变式：如果题目改为“强碱性溶液”，哪些离子不能存在？(提示：与OH⁻反应的离子，如Mg²⁺, Fe³⁺, HCO₃⁻等)" }, { id: 4, title: "胶体的性质与鉴别", question: "下列关于胶体的叙述不正确的是（ ）", options:

$${ label: "A", text: "胶体区别于其他分散系的本质特征是分散质粒子直径在1~100nm之间" }, { label: "B", text: "光线透过胶体时，胶体中可发生丁达尔效应" }, { label: "C", text: "用滤纸过滤可以分离胶体和溶液" }, { label: "D", text: "利用丁达尔效应可以区分胶体和溶液" }$$

, logic:

$$"1. 概念辨析：胶体的本质确实是粒子大小（A对）。", "2. 物理性质：丁达尔效应是胶体特有现象（B、D对）。", "3. 分离方法：胶体粒子和溶液粒子都能透过滤纸（滤纸孔径大），分离胶体和溶液应用半透膜（渗析）。过滤用于分离固液浊液。故C错。"$$

, variant: "思考：清晨森林中的光束、电影院的光柱属于什么现象？（丁达尔效应/气溶胶）" }, { id: 5, title: "物质的分类与转化", question: "下列物质分类或转化关系正确的是（ ）", options:

$${ label: "A", text: "Na₂O、MgO、Al₂O₃ 均为碱性氧化物" }, { label: "B", text: "酸性氧化物一定是非金属氧化物" }, { label: "C", text: "转化实现：Ca → CaO → Ca(OH)₂ → CaCO₃" }, { label: "D", text: "纯碱（Na₂CO₃）属于碱" }$$

, logic:

$$"1. 概念辨析：Al₂O₃是两性氧化物（A错）；纯碱是盐不是碱（D错）。", "2. 逻辑反例：Mn₂O₇是酸性氧化物，但它是金属氧化物（B错）。", "3. 转化路线：Ca氧化得CaO，CaO加水得Ca(OH)₂，通CO₂得CaCO₃。路径合理。故C对。"$$

, variant: "变式：请写出 S → SO₂ → SO₃ → H₂SO₄ 的转化条件。" } ]; return (

); }; const App = () => { return ( ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();