fix: incorrect default avatar casing in custom provider (#9384)

* fix: incorrect default avatar casing in custom provider

* add background color to default avatar in custom provider

distinction among providers.

* set ProviderInitialsLogo text color to white

添加完背景色后发现，模型列表中默认头像字体始终为白色，而编辑提供商时默认头像字体颜色会随主题色而变，黑色字体某些背景色下不清晰（比如a），所以改成始终白色

* fix: default avatar fallback when no text is entered

-设置背景色后发现，未输入文本时的背景色是根据上一个背景色继续保持的，该情况下回退到默认背景颜色
-回退后白色字体又看不清，该情况下字体颜色回退到黑色
-最终效果就是未输入文本时显示的默认头像回退到与之前一致

src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx

@@ -3,7 +3,7 @@ import { Center, VStack } from '@renderer/components/Layout'
 import { TopView } from '@renderer/components/TopView'
 import ImageStorage from '@renderer/services/ImageStorage'
 import { Provider, ProviderType } from '@renderer/types'
-import { compressImage } from '@renderer/utils'
+import { compressImage, generateColorFromChar } from '@renderer/utils'
 import { Divider, Dropdown, Form, Input, Modal, Select, Upload } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -78,7 +78,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
   }
 
   const getInitials = () => {
-    return name.charAt(0).toUpperCase() || 'P'
+    return name.charAt(0) || 'P'
   }
 
   const items = [
@@ -171,7 +171,14 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
             onOpenChange={(visible) => {
               setDropdownOpen(visible)
             }}>
-            {logo ? <ProviderLogo src={logo} /> : <ProviderInitialsLogo>{getInitials()}</ProviderInitialsLogo>}
+            {logo ? (
+              <ProviderLogo src={logo} />
+            ) : (
+              <ProviderInitialsLogo
+                style={name ? { backgroundColor: generateColorFromChar(name) } : { color: 'black' }}>
+                {getInitials()}
+              </ProviderInitialsLogo>
+            )}
           </Dropdown>
         </VStack>
       </Center>
@@ -236,6 +243,7 @@ const ProviderInitialsLogo = styled.div`
   transition: opacity 0.3s ease;
   background-color: var(--color-background-soft);
   border: 0.5px solid var(--color-border);
+  color: white;
   &:hover {
     opacity: 0.8;
   }