From 4e2b424eeb050824fc2c1d9a5b56df9b74458113 Mon Sep 17 00:00:00 2001
From: ningyv <1793599591@qq.com>
Date: Tue, 21 Jan 2025 11:50:58 +0800
Subject: [PATCH] chroe: optimize AI model node graphics

---
 .../aiSetting/components/KeyStatusNode.tsx    |  1 +
 .../aiSetting/components/ModelCardNode.tsx    | 74 ++++++++++---------
 .../core/src/pages/aiSetting/styles.css       |  6 +-
 3 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx b/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx
index 5420e9fe..ef24aee6 100644
--- a/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx
@@ -27,6 +27,7 @@ export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) =
         <div
           className="flex gap-1 w-full"
           style={{
+            minWidth: keys.length > 5 ? '118px' : 'auto',
             maxWidth: `calc(${MAX_KEYS} * ${KEY_SIZE} + (${MAX_KEYS} - 1) * ${KEY_GAP})`,
             minHeight: KEY_SIZE
           }}
diff --git a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx
index c08bac0b..ede8936b 100644
--- a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx
@@ -29,46 +29,48 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
   const statusConfig = getStatusIcon(status)
 
   return (
-    <div
-      className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] group"
-      style={{ border: '1px solid var(--border-color)' }}
-    >
-      <Handle type="target" position={Position.Left} />
-      <Handle type="source" position={Position.Right} />
-      <div>
-        <div className="flex justify-between items-center">
-          <div className="flex gap-2 items-center">
-            <div className="flex flex-1 overflow-hidden items-center gap-[4px]">
-              <span
-                className="flex items-center h-[22px] ai-setting-svg-container"
-                dangerouslySetInnerHTML={{ __html: logo }}
-              ></span>
+    <>
+      <div
+        className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] group"
+        style={{ border: '1px solid var(--border-color)' }}
+      >
+        <Handle type="target" position={Position.Left} />
+        <Handle type="source" position={Position.Right} />
+        <div>
+          <div className="flex justify-between items-center">
+            <div className="flex gap-2 items-center">
+              <div className="flex flex-1 overflow-hidden items-center gap-[4px]">
+                <span
+                  className="flex items-center h-[22px] ai-setting-svg-container"
+                  dangerouslySetInnerHTML={{ __html: logo }}
+                ></span>
+              </div>
+              <span className="text-base text-gray-900 max-w-[180px] truncate">{name}</span>
+              <Icon icon={statusConfig?.icon} className={`text-xl ${statusConfig?.color}`} />
             </div>
-            <span className="text-base text-gray-900 max-w-[180px] truncate">{name}</span>
-            <Icon icon={statusConfig?.icon} className={`text-xl ${statusConfig?.color}`} />
-          </div>
 
-          {/* Action buttons */}
-          <div className="flex gap-2 transition-opacity duration-200">
-            <Icon
-              icon="mdi:cog"
-              className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]"
-              onClick={() => {
-                openConfigModal({ id: data.id, defaultLlm: defaultLlm } as AiSettingListItem)
-              }}
-            />
+            {/* Action buttons */}
+            <div className="flex gap-2 transition-opacity duration-200">
+              <Icon
+                icon="mdi:cog"
+                className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]"
+                onClick={() => {
+                  openConfigModal({ id: data.id, defaultLlm: defaultLlm } as AiSettingListItem)
+                }}
+              />
+            </div>
+          </div>
+          <div className="mt-2 text-sm text-gray-500">
+            {$t('默认：')}
+            {defaultLlm}
           </div>
         </div>
-        <div className="mt-2 text-sm text-gray-500">
-          {$t('默认：')}
-          {defaultLlm}
-        </div>
-        {status !== 'enabled' && alternativeModel && (
-          <div className="mt-1 text-sm text-gray-500">
-            {$t('关联 API 已转用')} {alternativeModel.name}/{alternativeModel.defaultLlm}
-          </div>
-        )}
       </div>
-    </div>
+          {status !== 'enabled' && alternativeModel && (
+            <div className="ml-4 mt-1 text-sm text-gray-500">
+              {$t('关联 API 已转用')} {alternativeModel.name}/{alternativeModel.defaultLlm}
+            </div>
+          )}
+    </>
   )
 }
diff --git a/frontend/packages/core/src/pages/aiSetting/styles.css b/frontend/packages/core/src/pages/aiSetting/styles.css
index 13d5b62b..bd507aa0 100644
--- a/frontend/packages/core/src/pages/aiSetting/styles.css
+++ b/frontend/packages/core/src/pages/aiSetting/styles.css
@@ -18,11 +18,15 @@
 .react-flow__node {
   padding: 0;
   border-radius: 8px;
-  min-width: 150px;
   width: auto;
   max-width: 100%;
 }
 
+.react-flow__node-modelCard,
+.react-flow__node-serviceCard {
+  min-width: 150px;
+}
+
 /* Custom Node Styles */
 .custom-node {
   background: white;