From 04e9fc7315d2aab898f8cf6e8a8871729b3aade5 Mon Sep 17 00:00:00 2001
From: scarqin <scarqin@gmail.com>
Date: Mon, 23 Dec 2024 14:09:53 +0800
Subject: [PATCH] feat: block

---
 .../core/src/pages/playground/index.tsx       | 105 ++++++++++++------
 1 file changed, 73 insertions(+), 32 deletions(-)

diff --git a/frontend/packages/core/src/pages/playground/index.tsx b/frontend/packages/core/src/pages/playground/index.tsx
index 1fe7cc70..8542cbaf 100644
--- a/frontend/packages/core/src/pages/playground/index.tsx
+++ b/frontend/packages/core/src/pages/playground/index.tsx
@@ -15,11 +15,11 @@ interface ModelCardProps {
 }
 
 const ModelCard: React.FC<ModelCardProps> = ({ title, status, defaultModel, onSettingClick }) => (
-  <div className="bg-white rounded-lg shadow-sm p-4 w-[280px] border border-[#ededed]">
-    <div className="flex justify-between items-center mb-3">
+  <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px]">
+    <div className="flex justify-between items-center">
       <div className="flex gap-2 items-center">
         <Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
-        <span className="font-medium text-gray-800">{title}</span>
+        <span className="text-base text-gray-900">{title}</span>
       </div>
       <div className="flex gap-2 items-center">
         <span
@@ -33,7 +33,7 @@ const ModelCard: React.FC<ModelCardProps> = ({ title, status, defaultModel, onSe
         />
       </div>
     </div>
-    <div className="text-sm text-gray-500">{defaultModel}</div>
+    <div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
   </div>
 )
 
@@ -43,15 +43,17 @@ interface KeyStatusCardProps {
 }
 
 const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys, title }) => (
-  <div className="bg-white rounded-lg shadow-sm p-4 w-[280px] border border-[#ededed]">
-    <div className="flex items-center mb-3">
-      <span className="text-sm font-medium text-gray-700">{title}</span>
-    </div>
+  <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px]">
+    <div className="mb-3 text-sm text-gray-900">{title}</div>
     <div className="grid grid-cols-4 gap-2">
       {keys.map((status, index) => (
         <div
           key={index}
-          className={`aspect-square rounded-md ${status === 'success' ? 'bg-green-500' : 'bg-red-500'}`}
+          className={`
+            aspect-square rounded-md 
+            ${status === 'success' ? 'bg-green-500' : 'bg-red-500'}
+            transition-transform hover:scale-105
+          `}
           title={status === 'success' ? 'Active' : 'Inactive'}
         />
       ))}
@@ -60,10 +62,10 @@ const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys, title }) => (
 )
 
 const ServiceCard: React.FC = () => (
-  <div className="bg-white rounded-lg shadow-sm p-4 w-[200px] border border-[#ededed]">
-    <div className="flex flex-col gap-3 items-center">
+  <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[200px]">
+    <div className="flex flex-col gap-2 items-center">
       <Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
-      <span className="font-medium text-gray-800">AI Service</span>
+      <span className="text-base text-gray-900">AI Service</span>
     </div>
   </div>
 )
@@ -71,67 +73,106 @@ const ServiceCard: React.FC = () => (
 const initialNodes: Node[] = [
   {
     id: 'service',
-    type: 'custom',
+    type: 'default',
     position: { x: 50, y: 100 },
-    data: { component: <ServiceCard /> }
+    data: { label: <ServiceCard /> }
   },
   {
     id: 'openai',
-    type: 'custom',
+    type: 'default',
     position: { x: 400, y: 50 },
     data: {
-      component: <ModelCard title="OpenAI" status="success" defaultModel="gpt-4" />
+      label: <ModelCard title="OpenAI" status="success" defaultModel="gpt-4" />
     }
   },
   {
     id: 'anthropic',
-    type: 'custom',
+    type: 'default',
     position: { x: 400, y: 200 },
     data: {
-      component: <ModelCard title="Anthropic" status="success" defaultModel="claude-2" />
+      label: <ModelCard title="Anthropic" status="success" defaultModel="claude-2" />
     }
   },
   {
     id: 'gemini',
-    type: 'custom',
+    type: 'default',
     position: { x: 400, y: 350 },
     data: {
-      component: <ModelCard title="Google Gemini" status="failure" defaultModel="gemini-pro" />
+      label: <ModelCard title="Google Gemini" status="failure" defaultModel="gemini-pro" />
     }
   },
   {
     id: 'openai-keys',
-    type: 'custom',
+    type: 'default',
     position: { x: 750, y: 50 },
     data: {
-      component: <KeyStatusCard title="API Keys" keys={['success', 'success', 'failure', 'success']} />
+      label: <KeyStatusCard title="API Keys" keys={['success', 'success', 'failure', 'success']} />
     }
   },
   {
     id: 'anthropic-keys',
-    type: 'custom',
+    type: 'default',
     position: { x: 750, y: 200 },
     data: {
-      component: <KeyStatusCard title="API Keys" keys={['success', 'success', 'success']} />
+      label: <KeyStatusCard title="API Keys" keys={['success', 'success', 'success']} />
     }
   },
   {
     id: 'gemini-keys',
-    type: 'custom',
+    type: 'default',
     position: { x: 750, y: 350 },
     data: {
-      component: <KeyStatusCard title="API Keys" keys={['failure', 'failure']} />
+      label: <KeyStatusCard title="API Keys" keys={['failure', 'failure']} />
     }
   }
 ]
 
 const initialEdges: Edge[] = [
-  { id: 'service-openai', source: 'service', target: 'openai', animated: true, label: 'Connected' },
-  { id: 'service-anthropic', source: 'service', target: 'anthropic', animated: true, label: 'Connected' },
-  { id: 'service-gemini', source: 'service', target: 'gemini', animated: true, label: 'Disconnected' },
-  { id: 'openai-keys', source: 'openai', target: 'openai-keys', animated: true },
-  { id: 'anthropic-keys', source: 'anthropic', target: 'anthropic-keys', animated: true },
-  { id: 'gemini-keys', source: 'gemini', target: 'gemini-keys', animated: true }
+  {
+    id: 'service-openai',
+    source: 'service',
+    target: 'openai',
+    animated: true,
+    label: 'Connected',
+    style: { stroke: '#3d46f2' }
+  },
+  {
+    id: 'service-anthropic',
+    source: 'service',
+    target: 'anthropic',
+    animated: true,
+    label: 'Connected',
+    style: { stroke: '#3d46f2' }
+  },
+  {
+    id: 'service-gemini',
+    source: 'service',
+    target: 'gemini',
+    animated: true,
+    label: 'Disconnected',
+    style: { stroke: '#3d46f2' }
+  },
+  {
+    id: 'openai-keys',
+    source: 'openai',
+    target: 'openai-keys',
+    animated: true,
+    style: { stroke: '#3d46f2' }
+  },
+  {
+    id: 'anthropic-keys',
+    source: 'anthropic',
+    target: 'anthropic-keys',
+    animated: true,
+    style: { stroke: '#3d46f2' }
+  },
+  {
+    id: 'gemini-keys',
+    source: 'gemini',
+    target: 'gemini-keys',
+    animated: true,
+    style: { stroke: '#3d46f2' }
+  }
 ]
 
 const Playground: React.FC = () => {