fix: data modeling rendering

2026-03-17 17:23:00 +08:00
parent 1f74e4299d
commit 1b01469ee2
4 changed files with 419 additions and 52 deletions
@@ -0,0 +1,50 @@
+import { memo } from "react";
+import { Handle, Position } from "@xyflow/react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Table as TableIcon } from "lucide-react";
+
+interface Column {
+  name: string;
+  type: string;
+}
+
+interface TableNodeData {
+  name: string;
+  columns: Column[];
+  onDetailClick: (name: string) => void;
+}
+
+export const TableNode = memo(({ data }: { data: TableNodeData }) => {
+  return (
+    <Card className="min-w-[180px] max-w-[240px] shadow-md border-t-4 border-t-blue-500 text-xs">
+      <Handle type="target" position={Position.Top} className="!bg-blue-500" />
+      
+      <CardHeader 
+        className="py-2 px-3 bg-gray-50 border-b flex flex-row items-center justify-between cursor-pointer hover:bg-gray-100"
+        onClick={() => data.onDetailClick(data.name)}
+      >
+        <div className="font-semibold flex items-center gap-2 truncate" title={data.name}>
+          <TableIcon className="w-3 h-3 text-blue-500 shrink-0" />
+          <span className="truncate">{data.name}</span>
+        </div>
+      </CardHeader>
+      
+      <CardContent className="p-0">
+        <div className="max-h-[200px] overflow-y-auto">
+          {data.columns.map((col) => (
+            <div 
+              key={col.name} 
+              className="py-1.5 px-3 border-b last:border-0 hover:bg-gray-50 flex items-center"
+              title={`${col.name} (${col.type})`}
+            >
+              <span className="font-medium truncate">{col.name}</span>
+              {/* 类型列已被隐藏 */}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      
+      <Handle type="source" position={Position.Bottom} className="!bg-blue-500" />
+    </Card>
+  );
+});