perf: 优化工作流的节点UI和交互

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue

@@ -1,23 +1,24 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import {computed, onMounted, onUnmounted, ref} from 'vue';
+import {useRoute} from 'vue-router';
 
-import { getOptions, sortNodes } from '@easyflow/utils';
+import {getOptions, sortNodes} from '@easyflow/utils';
+import {getIconByValue} from '#/views/ai/model/modelUtils/defaultIcon';
 
-import { ArrowLeft, Position } from '@element-plus/icons-vue';
-import { Tinyflow } from '@tinyflow-ai/vue';
-import { ElButton, ElDrawer, ElMessage, ElSkeleton } from 'element-plus';
+import {ArrowLeft, Position} from '@element-plus/icons-vue';
+import {Tinyflow} from '@tinyflow-ai/vue';
+import {ElButton, ElDrawer, ElMessage, ElSkeleton} from 'element-plus';
 
-import { api } from '#/api/request';
+import {api} from '#/api/request';
 import CommonSelectDataModal from '#/components/commonSelectModal/CommonSelectDataModal.vue';
-import { $t } from '#/locales';
-import { router } from '#/router';
+import {$t} from '#/locales';
+import {router} from '#/router';
 import ExecResult from '#/views/ai/workflow/components/ExecResult.vue';
 import SingleRun from '#/views/ai/workflow/components/SingleRun.vue';
 import WorkflowForm from '#/views/ai/workflow/components/WorkflowForm.vue';
 import WorkflowSteps from '#/views/ai/workflow/components/WorkflowSteps.vue';
 
-import { getCustomNode } from './customNode/index';
+import {getCustomNode} from './customNode/index';
 import nodeNames from './customNode/nodeNames';
 
 import '@tinyflow-ai/vue/dist/index.css';
@@ -46,7 +47,35 @@ const tinyFlowData = ref<any>(null);
 const llmList = ref<any>([]);
 const knowledgeList = ref<any>([]);
 const provider = computed(() => ({
-  llm: () => getOptions('title', 'id', llmList.value),
+  llm: () => llmList.value.map((item: any) => {
+    let iconStr = undefined;
+    if (item.modelProvider?.icon) {
+        iconStr = `<img src="${item.modelProvider.icon}" style="width:100%; height:100%; object-fit:contain;" />`;
+    } else if (item.modelProvider?.providerType) {
+        const svgStr = getIconByValue(item.modelProvider.providerType);
+        if (svgStr) {
+            iconStr = svgStr;
+        }
+    }
+
+    // Extract brand and model name directly from the title if it contains '/'
+    let displayTitle = item.title || '';
+    let brandName = item.modelProvider?.providerName || '其他';
+
+    if (displayTitle.includes('/')) {
+        const parts = displayTitle.split('/');
+        brandName = parts[0];
+        displayTitle = parts.slice(1).join('/');
+    }
+
+    return {
+      label: displayTitle,
+      value: item.id,
+      brand: brandName,
+      icon: iconStr,
+      description: item.description,
+    };
+  }),
   knowledge: () => getOptions('title', 'id', knowledgeList.value),
   searchEngine: (): any => [
     {