Merge pull request #183 from APIParkLab/feature/1.4

chroe: optimize AI model node graphics

frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx

@@ -59,6 +59,7 @@ const LanguageSetting = ({ mode = 'light' }: { mode?: 'dark' | 'light' }) => {
       i18n.changeLanguage(supportedLang)
     }
   }, [])
+
   return (
     <Dropdown
       trigger={['hover']}

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
           }}

frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx

@@ -29,39 +29,41 @@ 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">
@@ -69,6 +71,11 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) =
           </div>
         )}
       </div>
-    </div>
+          {status !== 'enabled' && alternativeModel && (
+            <div className="ml-4 mt-1 text-sm text-gray-500">
+              {$t('关联 API 已转用')} {alternativeModel.name}/{alternativeModel.defaultLlm}
+            </div>
+          )}
+    </>
   )
 }

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;