kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

[agent-pipeline] pipe-20260315061036-2tnn round-2

This commit is contained in:
DDD1542 2026-03-15 15:22:16 +09:00
parent c3a43179e3
commit 92cd070749
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/components/screen/ScreenRelationFlow.tsx
View File

@ -35,13 +35,13 @@ import { getTableColumns, ColumnTypeInfo } from "@/lib/api/tableManagement";
import { ScreenSettingModal } from "./ScreenSettingModal"; import { ScreenSettingModal } from "./ScreenSettingModal";
import { TableSettingModal } from "./TableSettingModal"; import { TableSettingModal } from "./TableSettingModal";
// 관계 유형별 색상 정의 // 관계 유형별 색상 정의 (CSS 변수 기반 - 다크모드 자동 대응)
const RELATION_COLORS: Record<VisualRelationType, { stroke: string; strokeLight: string; label: string }> = { const RELATION_COLORS: Record<VisualRelationType, { stroke: string; strokeLight: string; label: string }> = {
filter: { stroke: '#8b5cf6', strokeLight: '#c4b5fd', label: '마스터-디테일' }, // 보라색 filter: { stroke: 'hsl(var(--primary))', strokeLight: 'hsl(var(--primary) / 0.4)', label: '마스터-디테일' },
hierarchy: { stroke: '#06b6d4', strokeLight: '#a5f3fc', label: '계층 구조' }, // 시안색 hierarchy: { stroke: 'hsl(var(--info))', strokeLight: 'hsl(var(--info) / 0.4)', label: '계층 구조' },
lookup: { stroke: '#f59e0b', strokeLight: '#fcd34d', label: '코드 참조' }, // 주황색 (기존) lookup: { stroke: 'hsl(var(--warning))', strokeLight: 'hsl(var(--warning) / 0.4)', label: '코드 참조' },
mapping: { stroke: '#10b981', strokeLight: '#6ee7b7', label: '데이터 매핑' }, // 녹색 mapping: { stroke: 'hsl(var(--success))', strokeLight: 'hsl(var(--success) / 0.4)', label: '데이터 매핑' },
join: { stroke: '#f97316', strokeLight: '#fdba74', label: '엔티티 조인' }, // orange-500 (기존 주황색) join: { stroke: 'hsl(var(--warning))', strokeLight: 'hsl(var(--warning) / 0.4)', label: '엔티티 조인' },
}; };
// 노드 타입 등록 // 노드 타입 등록
@ -689,12 +689,12 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
targetHandle: "left", targetHandle: "left",
type: "smoothstep", type: "smoothstep",
label: `${i + 1}`, label: `${i + 1}`,
labelStyle: { fontSize: 11, fill: "#0ea5e9", fontWeight: 600 }, labelStyle: { fontSize: 11, fill: "hsl(var(--info))", fontWeight: 600 },
labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 }, labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
labelBgPadding: [4, 2] as [number, number], labelBgPadding: [4, 2] as [number, number],
markerEnd: { type: MarkerType.ArrowClosed, color: "#0ea5e9" }, markerEnd: { type: MarkerType.ArrowClosed, color: "hsl(var(--info))" },
animated: true, animated: true,
style: { stroke: "#0ea5e9", strokeWidth: 2 }, style: { stroke: "hsl(var(--info))", strokeWidth: 2 },
}); });
} }
} }
@ -712,7 +712,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
type: "smoothstep", type: "smoothstep",
animated: true, // 모든 메인 테이블 연결은 애니메이션 animated: true, // 모든 메인 테이블 연결은 애니메이션
style: { style: {
stroke: "#3b82f6", stroke: "hsl(var(--primary))",
strokeWidth: 2, strokeWidth: 2,
}, },
}); });
@ -751,7 +751,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
type: "smoothstep", type: "smoothstep",
animated: true, animated: true,
style: { style: {
stroke: "#3b82f6", stroke: "hsl(var(--primary))",
strokeWidth: 2, strokeWidth: 2,
strokeDasharray: "5,5", // 점선으로 필터 관계 표시 strokeDasharray: "5,5", // 점선으로 필터 관계 표시
}, },
@ -1006,10 +1006,10 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
targetHandle: "top", targetHandle: "top",
type: "smoothstep", type: "smoothstep",
label: rel.relation_type === "join" ? "조인" : rel.crud_operations || "", label: rel.relation_type === "join" ? "조인" : rel.crud_operations || "",
labelStyle: { fontSize: 9, fill: "#10b981" }, labelStyle: { fontSize: 9, fill: "hsl(var(--success))" },
labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 }, labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
labelBgPadding: [3, 2] as [number, number], labelBgPadding: [3, 2] as [number, number],
style: { stroke: "#10b981", strokeWidth: 1.5 }, style: { stroke: "hsl(var(--success))", strokeWidth: 1.5 },
}); });
} }
} }
@ -1029,11 +1029,11 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
type: "smoothstep", type: "smoothstep",
animated: true, animated: true,
label: flow.flow_label || flow.flow_type || "이동", label: flow.flow_label || flow.flow_type || "이동",
labelStyle: { fontSize: 10, fill: "#8b5cf6", fontWeight: 500 }, labelStyle: { fontSize: 10, fill: "hsl(var(--primary))", fontWeight: 500 },
labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 }, labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
labelBgPadding: [4, 2] as [number, number], labelBgPadding: [4, 2] as [number, number],
markerEnd: { type: MarkerType.ArrowClosed, color: "#8b5cf6" }, markerEnd: { type: MarkerType.ArrowClosed, color: "hsl(var(--primary))" },
style: { stroke: "#8b5cf6", strokeWidth: 2 }, style: { stroke: "hsl(var(--primary))", strokeWidth: 2 },
}); });
} }
}); });
@ -1903,7 +1903,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
animated: isConnected, animated: isConnected,
style: { style: {
...edge.style, ...edge.style,
stroke: isConnected ? "#8b5cf6" : "#d1d5db", stroke: isConnected ? "hsl(var(--primary))" : "hsl(var(--border))",
strokeWidth: isConnected ? 2 : 1, strokeWidth: isConnected ? 2 : 1,
opacity: isConnected ? 1 : 0.3, opacity: isConnected ? 1 : 0.3,
}, },
@ -1920,7 +1920,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
animated: isMyConnection, animated: isMyConnection,
style: { style: {
...edge.style, ...edge.style,
stroke: isMyConnection ? "#3b82f6" : "#d1d5db", stroke: isMyConnection ? "hsl(var(--primary))" : "hsl(var(--border))",
strokeWidth: isMyConnection ? 2 : 1, strokeWidth: isMyConnection ? 2 : 1,
strokeDasharray: isMyConnection ? undefined : "5,5", strokeDasharray: isMyConnection ? undefined : "5,5",
opacity: isMyConnection ? 1 : 0.3, opacity: isMyConnection ? 1 : 0.3,
@ -2040,7 +2040,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
animated: isConnected, animated: isConnected,
style: { style: {
...edge.style, ...edge.style,
stroke: isConnected ? "#8b5cf6" : "#d1d5db", stroke: isConnected ? "hsl(var(--primary))" : "hsl(var(--border))",
strokeWidth: isConnected ? 2 : 1, strokeWidth: isConnected ? 2 : 1,
opacity: isConnected ? 1 : 0.3, opacity: isConnected ? 1 : 0.3,
}, },
@ -2076,7 +2076,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
animated: true, animated: true,
style: { style: {
...edge.style, ...edge.style,
stroke: "#3b82f6", stroke: "hsl(var(--primary))",
strokeWidth: 2, strokeWidth: 2,
strokeDasharray: "5,5", strokeDasharray: "5,5",
opacity: 1, opacity: 1,
@ -2095,7 +2095,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
animated: isMyConnection, animated: isMyConnection,
style: { style: {
...edge.style, ...edge.style,
stroke: isMyConnection ? "#3b82f6" : "#d1d5db", stroke: isMyConnection ? "hsl(var(--primary))" : "hsl(var(--border))",
strokeWidth: isMyConnection ? 2 : 1, strokeWidth: isMyConnection ? 2 : 1,
strokeDasharray: isMyConnection ? undefined : "5,5", strokeDasharray: isMyConnection ? undefined : "5,5",
opacity: isMyConnection ? 1 : 0.3, opacity: isMyConnection ? 1 : 0.3,