concept-atlas-dense-explain 2.0.0 → 3.0.0

package/template/src/components/SkinPicker.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Check, Palette } from 'lucide-react';
 import { SKINS, COMPONENT_STYLES } from '../model/skins.js';
 
@@ -24,10 +24,10 @@ export function SkinPicker({ skin, style, onSkinChange, onStyleChange }) {
 
   useEffect(() => {
     if (!open) return undefined;
-    const handlePointer = (event) => {
+    const handlePointer = event => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
     };
-    const handleKey = (event) => {
+    const handleKey = event => {
       if (event.key !== 'Escape') return;
       setOpen(false);
       // Stop Escape from also reaching the window-level handler in App.jsx,
@@ -63,11 +63,16 @@ export function SkinPicker({ skin, style, onSkinChange, onStyleChange }) {
               key={item.id}
               selected={item.id === skin}
               label={`配色 ${item.label}`}
-              onClick={() => { onSkinChange(item.id); setOpen(false); }}
+              onClick={() => {
+                onSkinChange(item.id);
+                setOpen(false);
+              }}
             >
               <span
                 className="skin-swatch"
-                style={{ background: `linear-gradient(135deg, ${item.swatch.dark} 0 42%, ${item.swatch.accent} 42% 58%, ${item.swatch.light} 58% 100%)` }}
+                style={{
+                  background: `linear-gradient(135deg, ${item.swatch.dark} 0 42%, ${item.swatch.accent} 42% 58%, ${item.swatch.light} 58% 100%)`
+                }}
                 aria-hidden="true"
               />
               <span className="skin-option-label">{item.label}</span>
@@ -79,7 +84,10 @@ export function SkinPicker({ skin, style, onSkinChange, onStyleChange }) {
               key={item.id}
               selected={item.id === style}
               label={`组件风格 ${item.label}`}
-              onClick={() => { onStyleChange(item.id); setOpen(false); }}
+              onClick={() => {
+                onStyleChange(item.id);
+                setOpen(false);
+              }}
             >
               <span className={`style-glyph style-glyph-${item.id}`} aria-hidden="true" />
               <span className="skin-option-label">{item.label}</span>

package/template/src/model/concept-schema.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RELATION_TYPES, LEVEL_DEFS } from './relation-types.js';
 import { NODE_KIND_SET, normalizeKind } from './node-kinds.js';
 
@@ -14,7 +13,7 @@ export function createConceptGraphState() {
       rootId: ''
     },
     nodes: new Map(), // id -> NodeObject
-    relations: [], // Array<{ from, to, type, label, description }>
+    relations: [] // Array<{ from, to, type, label, description }>
   };
 }
 
@@ -30,7 +29,7 @@ export function normalizeNode(raw) {
     kind: normalizeKind(raw.kind),
     parent: raw.parent || null,
     children: Array.isArray(raw.children) ? raw.children : [],
-    
+
     // Semantic Content Sections
     summary: raw.summary || '',
     overview: raw.overview || null,
@@ -54,7 +53,7 @@ export function normalizeNode(raw) {
     evidence: Array.isArray(raw.evidence) ? raw.evidence : [],
     invariants: Array.isArray(raw.invariants) ? raw.invariants : [],
     failureModes: Array.isArray(raw.failureModes) ? raw.failureModes : [],
-    tradeoffs: Array.isArray(raw.tradeoffs) ? raw.tradeoffs : [],
+    tradeoffs: Array.isArray(raw.tradeoffs) ? raw.tradeoffs : []
   };
 }
 
@@ -73,7 +72,8 @@ export function buildGraphModel(rawGraph) {
     if (n.kind && !NODE_KIND_SET.has(n.kind)) {
       diagnostics.push({ level: 'warning', code: 'UNKNOWN_KIND', nodeId: node.id, kind: n.kind });
     }
-    if (nodes.has(node.id)) diagnostics.push({ level: 'error', code: 'DUPLICATE_NODE_ID', nodeId: node.id });
+    if (nodes.has(node.id))
+      diagnostics.push({ level: 'error', code: 'DUPLICATE_NODE_ID', nodeId: node.id });
     nodes.set(node.id, node);
   });
 
@@ -95,11 +95,28 @@ export function buildGraphModel(rawGraph) {
         if (!childNode.parent) {
           childNode.parent = node.id;
         }
-      }
-      else diagnostics.push({ level: 'warning', code: 'MISSING_CHILD', nodeId: node.id, targetId: childId });
+      } else
+        diagnostics.push({
+          level: 'warning',
+          code: 'MISSING_CHILD',
+          nodeId: node.id,
+          targetId: childId
+        });
     });
-    if (node.parent && !nodes.has(node.parent)) diagnostics.push({ level: 'warning', code: 'ORPHAN_NODE', nodeId: node.id, targetId: node.parent });
-    if (!LEVEL_DEFS[node.level]) diagnostics.push({ level: 'warning', code: 'UNKNOWN_LEVEL', nodeId: node.id, level: node.level });
+    if (node.parent && !nodes.has(node.parent))
+      diagnostics.push({
+        level: 'warning',
+        code: 'ORPHAN_NODE',
+        nodeId: node.id,
+        targetId: node.parent
+      });
+    if (!LEVEL_DEFS[node.level])
+      diagnostics.push({
+        level: 'warning',
+        code: 'UNKNOWN_LEVEL',
+        nodeId: node.id,
+        nodeLevel: node.level
+      });
   });
 
   // Filter valid relations
@@ -169,9 +186,7 @@ export function getSiblingNodes(nodes, nodeId) {
   }
   const parent = nodes.get(current.parent);
   if (!parent) return [];
-  return parent.children
-    .filter(id => id !== nodeId && nodes.has(id))
-    .map(id => nodes.get(id));
+  return parent.children.filter(id => id !== nodeId && nodes.has(id)).map(id => nodes.get(id));
 }
 
 /**

package/template/src/model/node-kinds.js

@@ -15,43 +15,43 @@ export const NODE_KINDS = {
   system: {
     label: '系统',
     description: '整体系统、产品或问题域的全貌',
-    tone: 'var(--kind-system)',
+    tone: 'var(--kind-system)'
   },
   stage: {
     label: '阶段',
     description: '生命周期阶段、处理步骤或子系统',
-    tone: 'var(--kind-stage)',
+    tone: 'var(--kind-stage)'
   },
   mechanism: {
     label: '机制',
     description: '可解释、可验证的工作机制',
-    tone: 'var(--kind-mechanism)',
+    tone: 'var(--kind-mechanism)'
   },
   artifact: {
     label: '产物',
     description: '阶段产出的实体、数据或文件',
-    tone: 'var(--kind-artifact)',
+    tone: 'var(--kind-artifact)'
   },
   failure: {
     label: '故障',
     description: '失败模式、异常与边界情况',
-    tone: 'var(--kind-failure)',
+    tone: 'var(--kind-failure)'
   },
   tool: {
     label: '工具',
     description: '使用的工具、库或外部依赖',
-    tone: 'var(--kind-tool)',
+    tone: 'var(--kind-tool)'
   },
   boundary: {
     label: '边界',
     description: '约束、前提、限制与非目标',
-    tone: 'var(--kind-boundary)',
+    tone: 'var(--kind-boundary)'
   },
   decision: {
     label: '决策',
     description: '设计取舍与选择点',
-    tone: 'var(--kind-decision)',
-  },
+    tone: 'var(--kind-decision)'
+  }
 };
 
 export const NODE_KIND_NAMES = Object.keys(NODE_KINDS);

package/template/src/model/normalize-content.js

@@ -1,4 +1,4 @@
-import React, { Children, isValidElement } from 'react';
+import { Children, isValidElement } from 'react';
 import { KNOWN_COMPONENT_SET } from './validate-content.js';
 
 /**
@@ -16,7 +16,7 @@ export function extractConceptData(explainPageElement) {
       summary: explainPageElement.props.summary || '',
       rootId: null,
       layout: explainPageElement.props.layout || 'editorial',
-      density: explainPageElement.props.density || 'reading',
+      density: explainPageElement.props.density || 'reading'
     },
     nodes: [],
     relations: []
@@ -124,7 +124,7 @@ function parseConceptNode(nodeElement) {
     evidence: [],
     invariants: [],
     failureModes: [],
-    tradeoffs: [],
+    tradeoffs: []
   };
 
   Children.forEach(props.children, child => {
@@ -207,7 +207,7 @@ function parseConceptNode(nodeElement) {
       // original element in customSections so existing rendering is unchanged.
       case 'LearningObjectives':
         node.learningObjectives.push(
-          ...(Array.isArray(child.props.items) ? child.props.items.filter(Boolean) : []),
+          ...(Array.isArray(child.props.items) ? child.props.items.filter(Boolean) : [])
         );
         node.customSections.push(child);
         break;
@@ -219,14 +219,14 @@ function parseConceptNode(nodeElement) {
         node.evidence.push({
           command: child.props.command || '',
           observes: child.props.observes || '',
-          content: child.props.children,
+          content: child.props.children
         });
         node.customSections.push(child);
         break;
       case 'Invariant':
         node.invariants.push({
           title: child.props.title || '不变量',
-          content: child.props.children,
+          content: child.props.children
         });
         node.customSections.push(child);
         break;
@@ -236,14 +236,14 @@ function parseConceptNode(nodeElement) {
           cause: child.props.cause || '',
           evidence: child.props.evidence || '',
           remedy: child.props.remedy || '',
-          content: child.props.children,
+          content: child.props.children
         });
         node.customSections.push(child);
         break;
       case 'Tradeoff':
         node.tradeoffs.push({
           title: child.props.title || '工程权衡',
-          options: Array.isArray(child.props.options) ? child.props.options : [],
+          options: Array.isArray(child.props.options) ? child.props.options : []
         });
         node.customSections.push(child);
         break;

package/template/src/model/relation-types.js

@@ -7,7 +7,7 @@ export const RELATION_TYPES = {
     hasArrow: true,
     isTree: true
   },
-  'prerequisite': {
+  prerequisite: {
     label: '前置知识',
     description: '理解当前概念所需的前置基础',
     color: 'var(--rel-prerequisite)',
@@ -15,7 +15,7 @@ export const RELATION_TYPES = {
     hasArrow: true,
     isTree: false
   },
-  'causes': {
+  causes: {
     label: '因果推动',
     description: '引起或触发后续状态变化',
     color: 'var(--rel-causes)',
@@ -23,7 +23,7 @@ export const RELATION_TYPES = {
     hasArrow: true,
     isTree: false
   },
-  'produces': {
+  produces: {
     label: '产出生成',
     description: '阶段处理后产出的产物或实体',
     color: 'var(--rel-produces)',
@@ -31,7 +31,7 @@ export const RELATION_TYPES = {
     hasArrow: true,
     isTree: false
   },
-  'uses': {
+  uses: {
     label: '消费使用',
     description: '调用或引用其他概念与数据',
     color: 'var(--rel-uses)',
@@ -39,7 +39,7 @@ export const RELATION_TYPES = {
     hasArrow: true,
     isTree: false
   },
-  'implements': {
+  implements: {
     label: '实现关系',
     description: '具体机制或代码实现特定抽象',
     color: 'var(--rel-implements)',
@@ -47,7 +47,7 @@ export const RELATION_TYPES = {
     hasArrow: true,
     isTree: false
   },
-  'contrasts': {
+  contrasts: {
     label: '对比关系',
     description: '概念间的异同对照或对立维度',
     color: 'var(--rel-contrasts)',
@@ -71,7 +71,7 @@ export const RELATION_TYPES = {
     hasArrow: true,
     isTree: false
   },
-  'precedes': {
+  precedes: {
     label: '时序先后',
     description: '时间或处理流水线的前后相继',
     color: 'var(--rel-precedes)',
@@ -82,9 +82,34 @@ export const RELATION_TYPES = {
 };
 
 export const LEVEL_DEFS = {
-  L0: { name: '全局概览', tag: 'L0 · 全局概览', desc: '系统全貌与全局定位', color: 'var(--level-l0)' },
-  L1: { name: '主要阶段 / 子系统', tag: 'L1 · 子系统', desc: '主要生命周期阶段或子系统划分', color: 'var(--level-l1)' },
-  L2: { name: '局部机制', tag: 'L2 · 局部机制', desc: '具体工作机制与逻辑流动', color: 'var(--level-l2)' },
-  L3: { name: '实现细节', tag: 'L3 · 实现细节', desc: '算法、数据结构或代码实现', color: 'var(--level-l3)' },
-  L4: { name: '边界与反例', tag: 'L4 · 边界反例', desc: '边界情况、异常分支与典型反例', color: 'var(--level-l4)' }
+  L0: {
+    name: '全局概览',
+    tag: 'L0 · 全局概览',
+    desc: '系统全貌与全局定位',
+    color: 'var(--level-l0)'
+  },
+  L1: {
+    name: '主要阶段 / 子系统',
+    tag: 'L1 · 子系统',
+    desc: '主要生命周期阶段或子系统划分',
+    color: 'var(--level-l1)'
+  },
+  L2: {
+    name: '局部机制',
+    tag: 'L2 · 局部机制',
+    desc: '具体工作机制与逻辑流动',
+    color: 'var(--level-l2)'
+  },
+  L3: {
+    name: '实现细节',
+    tag: 'L3 · 实现细节',
+    desc: '算法、数据结构或代码实现',
+    color: 'var(--level-l3)'
+  },
+  L4: {
+    name: '边界与反例',
+    tag: 'L4 · 边界反例',
+    desc: '边界情况、异常分支与典型反例',
+    color: 'var(--level-l4)'
+  }
 };