iven/erp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(web): 拆分 PluginGraphPage 为 graph 子模块 — 每个文件 < 800 行

Browse Source 
- graphTypes.ts (39 行) — GraphNode/GraphEdge/GraphConfig/NodePosition/HoverState
- graphLayout.ts (41 行) — computeCircularLayout 环形布局算法
- graphRenderer.ts (293 行) — Canvas 绘制函数 + 常量 + helper
- PluginGraphPage.tsx (758 行) — 组件壳：state/effects/event handlers/JSX
This commit is contained in:
iven
2026-04-17 12:51:32 +08:00
parent b96978b588
commit 0a57cd7030
4 changed files with 388 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
apps/web/src/pages/PluginGraphPage.tsx
View File

@@ -33,342 +33,23 @@ import {
type PluginSchemaResponse,
} from '../api/plugins';
import type { GraphNode, GraphEdge, GraphConfig, NodePosition, HoverState } from './graph/graphTypes';
import { computeCircularLayout } from './graph/graphLayout';
import {
RELATIONSHIP_COLORS,
NODE_HOVER_SCALE,
getRelColor,
getEdgeTypeLabel,
getNodeDegree,
degreeToRadius,
drawCurvedEdge,
drawNode,
drawEdgeLabel,
drawNodeLabel,
} from './graph/graphRenderer';
const { Text } = Typography;
// ── Types ──
interface GraphNode {
id: string;
label: string;
data: Record<string, unknown>;
}
interface GraphEdge {
source: string;
target: string;
label: string;
}
interface GraphConfig {
entity: string;
relationshipEntity: string;
sourceField: string;
targetField: string;
edgeLabelField: string;
nodeLabelField: string;
}
interface NodePosition {
x: number;
y: number;
vx: number;
vy: number;
}
interface HoverState {
nodeId: string | null;
x: number;
y: number;
}
// ── Constants ──
const RELATIONSHIP_COLORS: Record<string, { base: string; light: string; glow: string }> = {
parent_child: { base: '#4F46E5', light: '#818CF8', glow: 'rgba(79,70,229,0.3)' },
sibling: { base: '#059669', light: '#34D399', glow: 'rgba(5,150,105,0.3)' },
partner: { base: '#D97706', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' },
supplier: { base: '#0891B2', light: '#22D3EE', glow: 'rgba(8,145,178,0.3)' },
competitor: { base: '#DC2626', light: '#F87171', glow: 'rgba(220,38,38,0.3)' },
};
const DEFAULT_REL_COLOR = { base: '#7C3AED', light: '#A78BFA', glow: 'rgba(124,58,237,0.3)' };
const REL_LABEL_MAP: Record<string, string> = {
parent_child: '母子',
sibling: '兄弟',
partner: '伙伴',
supplier: '供应商',
competitor: '竞争',
};
const NODE_BASE_RADIUS = 18;
const NODE_CENTER_RADIUS = 26;
const NODE_HOVER_SCALE = 1.3;
const LABEL_MAX_LENGTH = 8;
// ── Helpers ──
function getRelColor(label: string) {
return RELATIONSHIP_COLORS[label] || DEFAULT_REL_COLOR;
}
function getEdgeTypeLabel(label: string): string {
return REL_LABEL_MAP[label] || label;
}
function truncateLabel(label: string): string {
return label.length > LABEL_MAX_LENGTH
? label.slice(0, LABEL_MAX_LENGTH) + '...'
: label;
}
/** Compute color for a node based on its connection count (degree). */
function getNodeDegree(nodeId: string, edges: GraphEdge[]): number {
return edges.filter((e) => e.source === nodeId || e.target === nodeId).length;
}
/** Map a degree value to a node radius — more connections = larger node. */
function degreeToRadius(degree: number, isCenter: boolean): number {
const base = isCenter ? NODE_CENTER_RADIUS : NODE_BASE_RADIUS;
const bonus = Math.min(degree * 1.2, 10);
return base + bonus;
}
/** Calculate circular layout positions. */
function computeCircularLayout(
nodes: GraphNode[],
centerX: number,
centerY: number,
radius: number,
): Map<string, NodePosition> {
const positions = new Map<string, NodePosition>();
const count = nodes.length;
if (count === 0) return positions;
if (count === 1) {
positions.set(nodes[0].id, { x: centerX, y: centerY, vx: 0, vy: 0 });
return positions;
}
nodes.forEach((node, i) => {
const angle = (2 * Math.PI * i) / count - Math.PI / 2;
positions.set(node.id, {
x: centerX + radius * Math.cos(angle),
y: centerY + radius * Math.sin(angle),
vx: 0,
vy: 0,
});
});
return positions;
}
/** Draw a quadratic bezier curved edge with an arrowhead. */
function drawCurvedEdge(
ctx: CanvasRenderingContext2D,
fromX: number,
fromY: number,
toX: number,
toY: number,
color: string,
lineWidth: number,
highlighted: boolean,
alpha: number,
) {
const dx = toX - fromX;
const dy = toY - fromY;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 1) return;
// Control point offset perpendicular to the edge midpoint
const curvature = Math.min(dist * 0.15, 30);
const midX = (fromX + toX) / 2;
const midY = (fromY + toY) / 2;
const nx = -dy / dist;
const ny = dx / dist;
const cpX = midX + nx * curvature;
const cpY = midY + ny * curvature;
ctx.save();
ctx.globalAlpha = alpha;
ctx.strokeStyle = color;
ctx.lineWidth = highlighted ? lineWidth + 1 : lineWidth;
if (highlighted) {
ctx.shadowColor = color;
ctx.shadowBlur = 8;
}
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.quadraticCurveTo(cpX, cpY, toX, toY);
ctx.stroke();
// Arrowhead at target end
const t = 0.95;
const arrowT = t;
const tangentX = 2 * (1 - arrowT) * (cpX - fromX) + 2 * arrowT * (toX - cpX);
const tangentY = 2 * (1 - arrowT) * (cpY - fromY) + 2 * arrowT * (toY - cpY);
const tangentLen = Math.sqrt(tangentX * tangentX + tangentY * tangentY);
if (tangentLen < 1) {
ctx.restore();
return;
}
const arrowSize = highlighted ? 10 : 7;
const ax = tangentX / tangentLen;
const ay = tangentY / tangentLen;
// Point slightly before target to avoid overlapping the node circle
const endX = toX - ax * 4;
const endY = toY - ay * 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(endX, endY);
ctx.lineTo(endX - arrowSize * ax + arrowSize * 0.4 * ay, endY - arrowSize * ay - arrowSize * 0.4 * ax);
ctx.lineTo(endX - arrowSize * ax - arrowSize * 0.4 * ay, endY - arrowSize * ay + arrowSize * 0.4 * ax);
ctx.closePath();
ctx.fill();
ctx.restore();
// Return the midpoint for label placement
return { labelX: cpX, labelY: cpY };
}
/** Draw a gradient-filled node circle with shadow. */
function drawNode(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
radius: number,
color: string,
lightColor: string,
glowColor: string,
isCenter: boolean,
isHovered: boolean,
alpha: number,
) {
ctx.save();
ctx.globalAlpha = alpha;
const r = isHovered ? radius * NODE_HOVER_SCALE : radius;
// Outer glow / shadow
if (isCenter || isHovered) {
ctx.shadowColor = glowColor;
ctx.shadowBlur = isCenter ? 20 : 14;
} else {
ctx.shadowColor = 'rgba(0,0,0,0.12)';
ctx.shadowBlur = 6;
}
// Gradient fill
const gradient = ctx.createRadialGradient(x - r * 0.3, y - r * 0.3, 0, x, y, r);
if (isCenter) {
gradient.addColorStop(0, lightColor);
gradient.addColorStop(1, color);
} else {
gradient.addColorStop(0, 'rgba(255,255,255,0.9)');
gradient.addColorStop(1, 'rgba(255,255,255,0.4)');
}
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
// Border
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
ctx.strokeStyle = isCenter ? color : lightColor;
ctx.lineWidth = isCenter ? 3 : 1.5;
if (isHovered) {
ctx.lineWidth += 1;
}
ctx.stroke();
// Inner highlight ring for center node
if (isCenter) {
ctx.beginPath();
ctx.arc(x, y, r + 4, 0, 2 * Math.PI);
ctx.strokeStyle = glowColor;
ctx.lineWidth = 2;
ctx.setLineDash([4, 4]);
ctx.stroke();
ctx.setLineDash([]);
}
ctx.restore();
}
/** Draw the edge label with background pill. */
function drawEdgeLabel(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
label: string,
color: string,
alpha: number,
) {
ctx.save();
ctx.globalAlpha = alpha * 0.85;
const display = getEdgeTypeLabel(label);
ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
const metrics = ctx.measureText(display);
const textWidth = metrics.width;
const padding = 6;
const pillHeight = 18;
const pillRadius = 9;
// Background pill
const pillX = x - textWidth / 2 - padding;
const pillY = y - pillHeight / 2;
ctx.fillStyle = color + '18';
ctx.beginPath();
ctx.roundRect(pillX, pillY, textWidth + padding * 2, pillHeight, pillRadius);
ctx.fill();
ctx.strokeStyle = color + '40';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.roundRect(pillX, pillY, textWidth + padding * 2, pillHeight, pillRadius);
ctx.stroke();
// Text
ctx.fillStyle = color;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(display, x, y);
ctx.restore();
}
/** Draw a node label below the node. */
function drawNodeLabel(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
radius: number,
label: string,
textColor: string,
isCenter: boolean,
isHovered: boolean,
) {
ctx.save();
const display = truncateLabel(label);
const r = isHovered ? radius * NODE_HOVER_SCALE : radius;
const fontSize = isCenter ? 13 : isHovered ? 12 : 11;
const fontWeight = isCenter ? '600' : isHovered ? '500' : '400';
ctx.font = `${fontWeight} ${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillStyle = textColor;
if (isCenter || isHovered) {
ctx.globalAlpha = 1;
} else {
ctx.globalAlpha = 0.7;
}
ctx.fillText(display, x, y + r + 8);
ctx.restore();
}
/**
* 插件关系图谱页面 — 通过路由参数自加载 schema
* 路由: /plugins/:pluginId/graph/:entityName
@@ -637,7 +318,6 @@ export function PluginGraphPage() {
let nodeColorGlow = 'rgba(79,70,229,0.3)';
if (isCenter) {
// Use the first connected edge color for center node
const firstEdge = edges.find((e) => e.source === node.id || e.target === node.id);
if (firstEdge) {
const rc = getRelColor(firstEdge.label);
@@ -646,7 +326,6 @@ export function PluginGraphPage() {
nodeColorGlow = rc.glow;
}
} else {
// Assign color based on index for non-center nodes
const idx = nodes.indexOf(node);
const palette = Object.values(RELATIONSHIP_COLORS);
const pick = palette[idx % palette.length];

41
apps/web/src/pages/graph/graphLayout.ts Normal file
View File

@@ -0,0 +1,41 @@
/**
* 关系图谱 — 布局算法
*
* 纯函数模块，不依赖 React。
*/
import type { GraphNode, NodePosition } from './graphTypes';
/**
* 计算环形布局位置。
*
* 节点均匀分布在以 (centerX, centerY) 为圆心、radius 为半径的圆周上。
* 单个节点退化为圆心；两个及以上节点按角度排列，起始角在正上方 (-PI/2)。
*/
export function computeCircularLayout(
nodes: GraphNode[],
centerX: number,
centerY: number,
radius: number,
): Map<string, NodePosition> {
const positions = new Map<string, NodePosition>();
const count = nodes.length;
if (count === 0) return positions;
if (count === 1) {
positions.set(nodes[0].id, { x: centerX, y: centerY, vx: 0, vy: 0 });
return positions;
}
nodes.forEach((node, i) => {
const angle = (2 * Math.PI * i) / count - Math.PI / 2;
positions.set(node.id, {
x: centerX + radius * Math.cos(angle),
y: centerY + radius * Math.sin(angle),
vx: 0,
vy: 0,
});
});
return positions;
}

293
apps/web/src/pages/graph/graphRenderer.ts Normal file
View File

@@ -0,0 +1,293 @@
/**
* 关系图谱 — Canvas 绘制逻辑
*
* 纯函数模块，不依赖 React。所有绘制函数接收 CanvasRenderingContext2D，
* 不持有状态，可安全在 requestAnimationFrame 循环中调用。
*/
import type { GraphEdge } from './graphTypes';
// ── 常量 ──
/** 关系类型对应的色板 (base / light / glow) */
export const RELATIONSHIP_COLORS: Record<string, { base: string; light: string; glow: string }> = {
parent_child: { base: '#4F46E5', light: '#818CF8', glow: 'rgba(79,70,229,0.3)' },
sibling: { base: '#059669', light: '#34D399', glow: 'rgba(5,150,105,0.3)' },
partner: { base: '#D97706', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' },
supplier: { base: '#0891B2', light: '#22D3EE', glow: 'rgba(8,145,178,0.3)' },
competitor: { base: '#DC2626', light: '#F87171', glow: 'rgba(220,38,38,0.3)' },
};
/** 未匹配到已知关系类型时的默认色 */
export const DEFAULT_REL_COLOR = { base: '#7C3AED', light: '#A78BFA', glow: 'rgba(124,58,237,0.3)' };
/** 关系类型 → 中文标签 */
export const REL_LABEL_MAP: Record<string, string> = {
parent_child: '母子',
sibling: '兄弟',
partner: '伙伴',
supplier: '供应商',
competitor: '竞争',
};
/** 普通节点基础半径 */
export const NODE_BASE_RADIUS = 18;
/** 中心节点半径 */
export const NODE_CENTER_RADIUS = 26;
/** 悬停放大系数 */
export const NODE_HOVER_SCALE = 1.3;
/** 节点标签最大字符数 */
export const LABEL_MAX_LENGTH = 8;
// ── Helper ──
/** 根据 label 获取关系色板，未匹配时返回默认。 */
export function getRelColor(label: string) {
return RELATIONSHIP_COLORS[label] || DEFAULT_REL_COLOR;
}
/** 将关系类型 key 转为中文标签。 */
export function getEdgeTypeLabel(label: string): string {
return REL_LABEL_MAP[label] || label;
}
/** 截断过长标签。 */
export function truncateLabel(label: string): string {
return label.length > LABEL_MAX_LENGTH
? label.slice(0, LABEL_MAX_LENGTH) + '...'
: label;
}
/** 计算节点的度 (degree)，即与之相连的边数。 */
export function getNodeDegree(nodeId: string, edges: GraphEdge[]): number {
return edges.filter((e) => e.source === nodeId || e.target === nodeId).length;
}
/** 将 degree 映射为节点半径，连接越多节点越大。 */
export function degreeToRadius(degree: number, isCenter: boolean): number {
const base = isCenter ? NODE_CENTER_RADIUS : NODE_BASE_RADIUS;
const bonus = Math.min(degree * 1.2, 10);
return base + bonus;
}
// ── 绘制函数 ──
/** 绘制二次贝塞尔曲线边并带箭头，返回标签放置坐标。 */
export function drawCurvedEdge(
ctx: CanvasRenderingContext2D,
fromX: number,
fromY: number,
toX: number,
toY: number,
color: string,
lineWidth: number,
highlighted: boolean,
alpha: number,
): { labelX: number; labelY: number } | undefined {
const dx = toX - fromX;
const dy = toY - fromY;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 1) return undefined;
// 控制点：边中点的垂直方向偏移
const curvature = Math.min(dist * 0.15, 30);
const midX = (fromX + toX) / 2;
const midY = (fromY + toY) / 2;
const nx = -dy / dist;
const ny = dx / dist;
const cpX = midX + nx * curvature;
const cpY = midY + ny * curvature;
ctx.save();
ctx.globalAlpha = alpha;
ctx.strokeStyle = color;
ctx.lineWidth = highlighted ? lineWidth + 1 : lineWidth;
if (highlighted) {
ctx.shadowColor = color;
ctx.shadowBlur = 8;
}
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.quadraticCurveTo(cpX, cpY, toX, toY);
ctx.stroke();
// 箭头
const arrowT = 0.95;
const tangentX = 2 * (1 - arrowT) * (cpX - fromX) + 2 * arrowT * (toX - cpX);
const tangentY = 2 * (1 - arrowT) * (cpY - fromY) + 2 * arrowT * (toY - cpY);
const tangentLen = Math.sqrt(tangentX * tangentX + tangentY * tangentY);
if (tangentLen < 1) {
ctx.restore();
return undefined;
}
const arrowSize = highlighted ? 10 : 7;
const ax = tangentX / tangentLen;
const ay = tangentY / tangentLen;
// 略微提前终点以避免覆盖节点圆
const endX = toX - ax * 4;
const endY = toY - ay * 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(endX, endY);
ctx.lineTo(
endX - arrowSize * ax + arrowSize * 0.4 * ay,
endY - arrowSize * ay - arrowSize * 0.4 * ax,
);
ctx.lineTo(
endX - arrowSize * ax - arrowSize * 0.4 * ay,
endY - arrowSize * ay + arrowSize * 0.4 * ax,
);
ctx.closePath();
ctx.fill();
ctx.restore();
return { labelX: cpX, labelY: cpY };
}
/** 绘制带渐变填充和阴影的节点圆。 */
export function drawNode(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
radius: number,
color: string,
lightColor: string,
glowColor: string,
isCenter: boolean,
isHovered: boolean,
alpha: number,
): void {
ctx.save();
ctx.globalAlpha = alpha;
const r = isHovered ? radius * NODE_HOVER_SCALE : radius;
// 外发光 / 阴影
if (isCenter || isHovered) {
ctx.shadowColor = glowColor;
ctx.shadowBlur = isCenter ? 20 : 14;
} else {
ctx.shadowColor = 'rgba(0,0,0,0.12)';
ctx.shadowBlur = 6;
}
// 渐变填充
const gradient = ctx.createRadialGradient(x - r * 0.3, y - r * 0.3, 0, x, y, r);
if (isCenter) {
gradient.addColorStop(0, lightColor);
gradient.addColorStop(1, color);
} else {
gradient.addColorStop(0, 'rgba(255,255,255,0.9)');
gradient.addColorStop(1, 'rgba(255,255,255,0.4)');
}
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
// 边框
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
ctx.strokeStyle = isCenter ? color : lightColor;
ctx.lineWidth = isCenter ? 3 : 1.5;
if (isHovered) {
ctx.lineWidth += 1;
}
ctx.stroke();
// 中心节点外圈虚线环
if (isCenter) {
ctx.beginPath();
ctx.arc(x, y, r + 4, 0, 2 * Math.PI);
ctx.strokeStyle = glowColor;
ctx.lineWidth = 2;
ctx.setLineDash([4, 4]);
ctx.stroke();
ctx.setLineDash([]);
}
ctx.restore();
}
/** 绘制边标签（带背景胶囊）。 */
export function drawEdgeLabel(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
label: string,
color: string,
alpha: number,
): void {
ctx.save();
ctx.globalAlpha = alpha * 0.85;
const display = getEdgeTypeLabel(label);
ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
const metrics = ctx.measureText(display);
const textWidth = metrics.width;
const padding = 6;
const pillHeight = 18;
const pillRadius = 9;
// 背景胶囊
const pillX = x - textWidth / 2 - padding;
const pillY = y - pillHeight / 2;
ctx.fillStyle = color + '18';
ctx.beginPath();
ctx.roundRect(pillX, pillY, textWidth + padding * 2, pillHeight, pillRadius);
ctx.fill();
ctx.strokeStyle = color + '40';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.roundRect(pillX, pillY, textWidth + padding * 2, pillHeight, pillRadius);
ctx.stroke();
// 文本
ctx.fillStyle = color;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(display, x, y);
ctx.restore();
}
/** 在节点下方绘制节点标签。 */
export function drawNodeLabel(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
radius: number,
label: string,
textColor: string,
isCenter: boolean,
isHovered: boolean,
): void {
ctx.save();
const display = truncateLabel(label);
const r = isHovered ? radius * NODE_HOVER_SCALE : radius;
const fontSize = isCenter ? 13 : isHovered ? 12 : 11;
const fontWeight = isCenter ? '600' : isHovered ? '500' : '400';
ctx.font = `${fontWeight} ${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillStyle = textColor;
if (isCenter || isHovered) {
ctx.globalAlpha = 1;
} else {
ctx.globalAlpha = 0.7;
}
ctx.fillText(display, x, y + r + 8);
ctx.restore();
}

39
apps/web/src/pages/graph/graphTypes.ts Normal file
View File

@@ -0,0 +1,39 @@
/**
* 关系图谱 — 类型定义
*
* 仅导出接口类型，不含运行时代码。
*/
export interface GraphNode {
id: string;
label: string;
data: Record<string, unknown>;
}
export interface GraphEdge {
source: string;
target: string;
label: string;
}
export interface GraphConfig {
entity: string;
relationshipEntity: string;
sourceField: string;
targetField: string;
edgeLabelField: string;
nodeLabelField: string;
}
export interface NodePosition {
x: number;
y: number;
vx: number;
vy: number;
}
export interface HoverState {
nodeId: string | null;
x: number;
y: number;
}