refactor(ui): 优化模型图标加载和样式调整

移除模型选择弹窗中的冗余标题，调整模型图标样式为白色背景和边框
重构模型图标加载逻辑，改为从远程CDN获取图标资源
在消息加载逻辑中添加延迟参数以避免频繁请求

Author: xerrors

web/src/components/AgentChatComponent.vue

@@ -614,7 +614,7 @@ const _processStreamChunk = (chunk, threadId) => {
       }
 
       // Reload messages to show any partial content saved by the backend
-      fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId });
+      fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId, delay: 500 });
       resetOnGoingConv(threadId);
       return true;
     case 'human_approval_required':
@@ -643,7 +643,7 @@ const _processStreamChunk = (chunk, threadId) => {
         }
       }
       // 异步加载历史记录，保持当前消息显示直到历史记录加载完成
-      fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId })
+      fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId, delay: 500 })
         .finally(() => {
           // 历史记录加载完成后，安全地清空当前进行中的对话
           resetOnGoingConv(threadId, true);
@@ -658,7 +658,7 @@ const _processStreamChunk = (chunk, threadId) => {
       if (chunkMessage) {
         message.info(chunkMessage);
       }
-      fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId })
+      fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId, delay: 1000 })
         .finally(() => {
         resetOnGoingConv(threadId, true);
       });
@@ -1116,7 +1116,7 @@ const handleSendOrStop = async () => {
 
     // 中断后刷新消息历史，确保显示最新的状态
     try {
-      await fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId, delay: 100 });
+      await fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId, delay: 500 });
       message.info('已中断对话生成');
     } catch (error) {
       console.error('刷新消息历史失败:', error);

web/src/components/ModelProvidersComponent.vue

@@ -174,7 +174,6 @@
       </div>
       <div v-else class="modal-config-content">
         <div class="modal-config-header">
-          <h3>选择 {{ providerConfig.providerName }} 的模型</h3>
           <p class="description">勾选您希望在系统中启用的模型，请注意，列表中可能包含非对话模型，请仔细甄别。</p>
         </div>
 
@@ -1096,12 +1095,14 @@ const testCustomProvider = async (providerId, modelName) => {
       filter: grayscale(100%);
       transition: filter 0.2s ease;
       flex-shrink: 0;
+      background-color: white;
+      border: 1px solid var(--gray-200);
 
       img {
         width: 100%;
         height: 100%;
-        object-fit: cover;
-        border: 1px solid var(--gray-100);
+        object-fit: contain;
+        padding: 4px;
         border-radius: 6px;
       }
 

web/src/utils/modelIcon.js

@@ -1,24 +1,24 @@
-import openaiIcon from '@/assets/providers/openai.png'
-import dashscopeIcon from '@/assets/providers/dashscope.png'
-import togetherIcon from '@/assets/providers/together.ai.png'
-import deepseekIcon from '@/assets/providers/deepseek.png'
-import zhipuIcon from '@/assets/providers/zhipuai.png'
-import siliconflowIcon from '@/assets/providers/siliconflow.png'
 import arkIcon from '@/assets/providers/ark.png'
-import openrouterIcon from '@/assets/providers/openrouterai.png'
-import defaultIcon from '@/assets/providers/default.png'
-import modelscopeIcon from '@/assets/providers/modelscope.png'
+
+
+// 获取图标URL的函数
+const getIconUrl = (provider) => {
+  return `https://models.dev/logos/${provider}.svg`;
+};
+
+// 默认图标URL
+const defaultIconUrl = 'https://models.dev/logos/default.svg';
 
 export const modelIcons = {
-  openai: openaiIcon,
-  dashscope: dashscopeIcon,
-  together: togetherIcon,
-  deepseek: deepseekIcon,
-  zhipu: zhipuIcon,
-  siliconflow: siliconflowIcon,
+  openai: getIconUrl('openai'),
+  dashscope: getIconUrl('alibaba'),
+  together: getIconUrl('together'),
+  deepseek: getIconUrl('deepseek'),
+  zhipu: getIconUrl('zhipuai'),
+  siliconflow: getIconUrl('siliconflow'),
   ark: arkIcon,
-  'together.ai': togetherIcon,
-  openrouter: openrouterIcon,
-  modelscope: modelscopeIcon,
-  default: defaultIcon // 添加默认图标
+  'together.ai': getIconUrl('togetherai'),
+  openrouter: getIconUrl('openrouter'),
+  modelscope: getIconUrl('modelscope'),
+  default: defaultIconUrl
 }