pengxiao/course-agent-od
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: redesign knowledge graph to light academic theme

Browse Source 
Switch from dark p5-style background to light slate theme with softer
indigo particles, white label pills, and reduced glow effects for
better readability in academic context.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
xiaopeng
2026-05-22 14:25:53 +08:00
parent 90ab913ef9
commit 53a9380d7a
2 changed files with 59 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/course-content/knowledge-graph.tsx
+58 -98
View File
@@ -40,15 +40,15 @@ interface KnowledgeGraphProps {
}
const CHAPTER_COLORS = [
'#a78bfa',
'#22d3ee',
'#fbbf24',
'#34d399',
'#f472b6',
'#60a5fa',
'#6366f1',
'#0ea5e9',
'#8b5cf6',
'#14b8a6',
'#ec4899',
'#f59e0b',
];
const ROOT_COLOR = '#c4b5fd';
const ROOT_COLOR = '#4f46e5';
export default function KnowledgeGraph({ bookStructure, onNodeClick }: KnowledgeGraphProps) {
const graphRef = useRef<any>(null);
@@ -162,7 +162,7 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
return { nodes, links };
}, [bookStructure]);
// p5-style ambient particle background
// Soft ambient background matching the site's light academic theme
useEffect(() => {
const canvas = particleCanvasRef.current;
if (!canvas) return;
@@ -180,16 +180,15 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
if (!ctx) return;
ctx.scale(dpr, dpr);
const particleCount = 40;
const connectDist = 130;
const particleCount = 30;
const connectDist = 150;
const particles = Array.from({ length: particleCount }, () => ({
x: Math.random() * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
size: Math.random() * 1.5 + 0.5,
hue: 210 + Math.random() * 60,
alpha: Math.random() * 0.35 + 0.1,
vx: (Math.random() - 0.5) * 0.15,
vy: (Math.random() - 0.5) * 0.15,
size: Math.random() * 1.2 + 0.4,
alpha: Math.random() * 0.2 + 0.05,
phase: Math.random() * Math.PI * 2,
}));
@@ -197,21 +196,22 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
let time = 0;
const animate = () => {
time += 0.01;
ctx.fillStyle = '#0a0a1a';
time += 0.008;
// Light background matching site theme
ctx.fillStyle = '#f8fafc';
ctx.fillRect(0, 0, W, H);
// update positions
for (const p of particles) {
p.x += p.vx + Math.sin(time + p.phase) * 0.05;
p.y += p.vy + Math.cos(time + p.phase) * 0.05;
p.x += p.vx + Math.sin(time + p.phase) * 0.03;
p.y += p.vy + Math.cos(time + p.phase) * 0.03;
if (p.x < 0 || p.x > W) p.vx *= -1;
if (p.y < 0 || p.y > H) p.vy *= -1;
p.x = Math.max(0, Math.min(W, p.x));
p.y = Math.max(0, Math.min(H, p.y));
}
// draw connections
// draw connections — subtle indigo lines
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
@@ -222,28 +222,18 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = `rgba(120, 140, 220, ${a})`;
ctx.strokeStyle = `rgba(99, 102, 241, ${a})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
}
// draw particles
// draw particles — soft indigo dots
for (const p of particles) {
const pulse = Math.sin(time * 2 + p.phase) * 0.3 + 0.7;
const pulse = Math.sin(time * 1.5 + p.phase) * 0.2 + 0.8;
// glow
const grd = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 6);
grd.addColorStop(0, `hsla(${p.hue}, 60%, 60%, ${p.alpha * 0.3 * pulse})`);
grd.addColorStop(1, `hsla(${p.hue}, 60%, 60%, 0)`);
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 6, 0, Math.PI * 2);
ctx.fill();
// core
ctx.fillStyle = `hsla(${p.hue}, 60%, 70%, ${p.alpha * pulse})`;
ctx.fillStyle = `rgba(99, 102, 241, ${p.alpha * pulse})`;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
@@ -301,7 +291,7 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
<ForceGraph2D
ref={graphRef}
graphData={graphData}
backgroundColor="rgba(10, 10, 26, 0.88)"
backgroundColor="rgba(248, 250, 252, 0.85)"
nodeLabel={(node: any) => node._fullLabel || node.name}
nodeVal={(node: any) => node.val || 8}
nodeRelSize={6}
@@ -329,51 +319,35 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
nodeCanvasObject={(node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
if (!isFinite(node.x) || !isFinite(node.y)) return;
const label = node.name;
const color = node.color || '#a78bfa';
const color = node.color || '#6366f1';
const nodeRadius = Math.max(3, (node.val || 8) * 0.6);
// 1. outer glow halo
const glowR = nodeRadius * 8;
const grd = ctx.createRadialGradient(
node.x, node.y, 0,
node.x, node.y, glowR
);
grd.addColorStop(0, color + '25');
grd.addColorStop(0.4, color + '0c');
grd.addColorStop(1, color + '00');
ctx.fillStyle = grd;
// 1. subtle shadow
ctx.fillStyle = 'rgba(99, 102, 241, 0.08)';
ctx.beginPath();
ctx.arc(node.x, node.y, glowR, 0, Math.PI * 2);
ctx.arc(node.x, node.y, nodeRadius * 2.5, 0, Math.PI * 2);
ctx.fill();
// 2. inner glow
const innerR = nodeRadius * 3;
const grd2 = ctx.createRadialGradient(
node.x, node.y, 0,
node.x, node.y, innerR
);
grd2.addColorStop(0, color + '70');
grd2.addColorStop(1, color + '00');
ctx.fillStyle = grd2;
// 2. soft outer ring
ctx.beginPath();
ctx.arc(node.x, node.y, innerR, 0, Math.PI * 2);
ctx.arc(node.x, node.y, nodeRadius * 1.4, 0, Math.PI * 2);
ctx.fillStyle = color + '18';
ctx.fill();
// 3. core
// 3. core circle
ctx.beginPath();
ctx.arc(node.x, node.y, nodeRadius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
// 4. bright center spot
ctx.beginPath();
ctx.arc(node.x, node.y, nodeRadius * 0.3, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.75)';
ctx.fill();
// 4. white border for definition
ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
ctx.lineWidth = Math.max(0.5, 1.2 / globalScale);
ctx.stroke();
// 5. label
const fontSize = Math.max(9, 13 / globalScale);
ctx.font = `600 ${fontSize}px "Noto Serif SC", Georgia, serif`;
const fontSize = Math.max(9, 12 / globalScale);
ctx.font = `500 ${fontSize}px "Noto Serif SC", Georgia, serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
@@ -381,16 +355,16 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
const pad = 4 / globalScale;
const labelY = node.y + nodeRadius + fontSize / 2 + pad * 3;
// label background pill
const bw = tw + pad * 3;
const bh = fontSize + pad * 2;
const r = Math.max(2, 3 / globalScale);
// label background pill — light style
const bw = tw + pad * 4;
const bh = fontSize + pad * 2.5;
const r = Math.max(2, 4 / globalScale);
const lx = node.x - bw / 2;
const ly = labelY - bh / 2;
ctx.fillStyle = 'rgba(10, 10, 26, 0.85)';
ctx.strokeStyle = color + '40';
ctx.lineWidth = Math.max(0.5, 0.8 / globalScale);
ctx.fillStyle = 'rgba(255, 255, 255, 0.92)';
ctx.strokeStyle = color + '30';
ctx.lineWidth = Math.max(0.3, 0.6 / globalScale);
ctx.beginPath();
ctx.moveTo(lx + r, ly);
@@ -406,8 +380,8 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
ctx.fill();
ctx.stroke();
// label text
ctx.fillStyle = '#e2e8f0';
// label text — dark for light background
ctx.fillStyle = '#1e293b';
ctx.fillText(label, node.x, labelY);
}}
linkCanvasObjectMode={() => 'replace'}
@@ -416,42 +390,28 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
const tgt = link.target;
if (!isFinite(src.x) || !isFinite(src.y) || !isFinite(tgt.x) || !isFinite(tgt.y)) return;
const srcColor = src.color || '#a78bfa';
const tgtColor = tgt.color || '#a78bfa';
const srcColor = src.color || '#6366f1';
const tgtColor = tgt.color || '#6366f1';
const dx = tgt.x - src.x;
const dy = tgt.y - src.y;
const len = Math.sqrt(dx * dx + dy * dy) || 1;
const curvature = 0.12;
const curvature = 0.1;
const cpX = (src.x + tgt.x) / 2 + (-dy / len) * len * curvature;
const cpY = (src.y + tgt.y) / 2 + (dx / len) * len * curvature;
const gradient = ctx.createLinearGradient(src.x, src.y, tgt.x, tgt.y);
gradient.addColorStop(0, srcColor + '45');
gradient.addColorStop(1, tgtColor + '45');
gradient.addColorStop(0, srcColor + '35');
gradient.addColorStop(1, tgtColor + '35');
ctx.beginPath();
ctx.moveTo(src.x, src.y);
ctx.quadraticCurveTo(cpX, cpY, tgt.x, tgt.y);
ctx.strokeStyle = gradient;
ctx.lineWidth = Math.max(
0.5,
(link.type === 'root-chapter' ? 1.8 : 0.8) / Math.max(0.3, globalScale)
);
ctx.stroke();
// subtle glow line
ctx.beginPath();
ctx.moveTo(src.x, src.y);
ctx.quadraticCurveTo(cpX, cpY, tgt.x, tgt.y);
const glowGradient = ctx.createLinearGradient(src.x, src.y, tgt.x, tgt.y);
glowGradient.addColorStop(0, srcColor + '12');
glowGradient.addColorStop(1, tgtColor + '12');
ctx.strokeStyle = glowGradient;
ctx.lineWidth = Math.max(
1.5,
(link.type === 'root-chapter' ? 5 : 3) / Math.max(0.3, globalScale)
0.4,
(link.type === 'root-chapter' ? 1.5 : 0.7) / Math.max(0.3, globalScale)
);
ctx.stroke();
}}
@@ -466,7 +426,7 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
variant="outline"
size="icon"
onClick={handleZoomIn}
className="bg-black/40 backdrop-blur-sm border-white/10 text-white hover:bg-white/10 hover:text-white"
className="bg-white/80 backdrop-blur-sm border-border/40 text-foreground hover:bg-white hover:text-foreground"
title="放大"
>
<ZoomIn className="w-4 h-4" />
@@ -475,7 +435,7 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
variant="outline"
size="icon"
onClick={handleZoomOut}
className="bg-black/40 backdrop-blur-sm border-white/10 text-white hover:bg-white/10 hover:text-white"
className="bg-white/80 backdrop-blur-sm border-border/40 text-foreground hover:bg-white hover:text-foreground"
title="缩小"
>
<ZoomOut className="w-4 h-4" />
@@ -484,7 +444,7 @@ export default function KnowledgeGraph({ bookStructure, onNodeClick }: Knowledge
variant="outline"
size="icon"
onClick={handleResetView}
className="bg-black/40 backdrop-blur-sm border-white/10 text-white hover:bg-white/10 hover:text-white"
className="bg-white/80 backdrop-blur-sm border-border/40 text-foreground hover:bg-white hover:text-foreground"
title="重置视图"
>
<RotateCcw className="w-4 h-4" />