fix(web): model bugfix

web/src/views/ModelManagement/List.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect, type FC } from 'react';
-import { Button, Space, Row, Col } from 'antd'
+import { Button, Flex, Row, Col } from 'antd'
 import { useTranslation } from 'react-i18next';
 
 import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef } from './types'
@@ -9,6 +9,7 @@ import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
 import KeyConfigModal from './components/KeyConfigModal'
 import ModelListDetail from './components/ModelListDetail'
+import { getLogoUrl } from './utils'
 
 const ModelList: FC<{ query: any }> = ({ query }) => {
   const { t } = useTranslation();
@@ -46,22 +47,25 @@ const ModelList: FC<{ query: any }> = ({ query }) => {
               <RbCard
                 key={item.provider}
                 title={item.provider}
-                avatarUrl={item.logo}
+                avatarUrl={getLogoUrl(item.logo)}
                 avatar={
                   <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                     {item.provider[0]}
                   </div>
                 }
+                bodyClassName="rb:relative rb:pb-[64px]! rb:h-[calc(100%-64px)]!"
               >
-                <Space>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Space>
-                <Row gutter={12} className="rb:mt-4">
-                  <Col span={12}>
-                    <Button block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
-                  </Col>
-                  <Col span={12}>
-                    <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
-                  </Col>
-                </Row>
+                <Flex gap={8} wrap>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
+                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                  <Row gutter={12}>
+                    <Col span={12}>
+                      <Button block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
+                    </Col>
+                    <Col span={12}>
+                      <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
+                    </Col>
+                  </Row>
+                </div>
               </RbCard>
             ))}
           </div>

web/src/views/ModelManagement/Square.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Space, App, Divider, Flex } from 'antd'
+import { Button, Space, App, Divider, Flex, Tooltip } from 'antd'
 import { UsergroupAddOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 
@@ -9,6 +9,7 @@ import { getModelPlaza, addModelPlaza } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
 import ModelSquareDetail from './components/ModelSquareDetail'
+import { getLogoUrl } from './utils'
 
 const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPlazaItem) => void; }>(({ query, handleEdit }, ref) => {
   const { t } = useTranslation();
@@ -46,7 +47,7 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
         : list.map(vo => (
           <div key={vo.provider}>
             <div className="rb:flex rb:justify-between rb:items-center rb:bg-[rgba(21,94,239,0.12)] rb:px-4 rb:py-2.5 rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">
-              <div className="rb:font-medium">{vo.provider}</div>
+              <div className="rb:font-medium">{t(`modelNew.${vo.provider}`)}</div>
               <Button type="link" onClick={() => handleMore(vo)}>{t('modelNew.viewAll')}({t(`modelNew.modelCount`, { count: vo.models.length })})&gt;</Button>
             </div>
 
@@ -55,27 +56,32 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
                 <RbCard
                   key={item.id}
                   title={item.name}
-                  avatarUrl={item.logo}
+                  subTitle={<Tag>{t(`modelNew.${item.type}`)}</Tag>}
+                  avatarUrl={getLogoUrl(item.logo)}
                   avatar={
                     <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                       {item.name[0]}
                     </div>
                   }
+                  bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
                 >
-                  <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-3 rb:h-9">{item.description}</div>
-                  <Space size={8} className="rb:mt-3">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Space>
-                  <Divider size="middle" />
-                  <Flex justify="space-between">
-                    <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
-                    <Space>
-                      {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
-                      {item.is_added
-                        ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
-                        : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>+ {t('common.add')}</Button>
-                      }
-                    </Space>
-                  </Flex>
+                  <Tooltip title={item.description}>
+                    <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
+                  </Tooltip>
+                  <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
+                  <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                    <Divider size="middle" />
+                    <Flex justify="space-between">
+                      <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
+                      <Space>
+                        {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
+                        {item.is_added
+                          ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
+                          : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>+ {t('common.add')}</Button>
+                        }
+                      </Space>
+                    </Flex>
+                  </div>
                 </RbCard>
               ))}
             </div>

web/src/views/ModelManagement/components/ModelListDetail.tsx

@@ -1,6 +1,6 @@
 import { useState, useImperativeHandle, forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Switch, Row, Col, Space } from 'antd'
+import { Button, Switch, Row, Col, Space, Tooltip } from 'antd'
 
 import type { ProviderModelItem, ModelListItem, ModelListDetailRef, MultiKeyConfigModalRef } from '../types';
 import RbDrawer from '@/components/RbDrawer';
@@ -9,6 +9,7 @@ import Tag from '@/components/Tag';
 import PageEmpty from '@/components/Empty/PageEmpty';
 import MultiKeyConfigModal from './MultiKeyConfigModal'
 import { getModelNewList, updateModelStatus } from '@/api/models'
+import { getLogoUrl } from '../utils'
 
 interface ModelListDetailProps {
   refresh?: () => void;
@@ -80,21 +81,25 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
                 <Tag>{t(`modelNew.${item.type}`)}</Tag>
                 <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
               </Space>}
-              avatarUrl={item.logo}
+              avatarUrl={getLogoUrl(item.logo)}
               avatar={
                 <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                   {item.name[0]}
                 </div>
               }
               extra={<Switch defaultChecked={item.is_active} disabled={loading} onChange={() => handleChange(item)} />}
+              bodyClassName="rb:relative rb:pb-[64px]! rb:h-[calc(100%-64px)]!"
             >
-              
-              <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-3">{item.description}</div>
-              <Row gutter={12} className="rb:mt-4">
-                <Col span={24}>
-                  <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
-                </Col>
-              </Row>
+              <Tooltip title={item.description}>
+                <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
+              </Tooltip>
+              <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                <Row gutter={12}>
+                  <Col span={24}>
+                    <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
+                  </Col>
+                </Row>
+              </div>
             </RbCard>
           ))}
           </div>

web/src/views/ModelManagement/components/ModelSquareDetail.tsx

@@ -1,6 +1,6 @@
 import { useState, useImperativeHandle, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, App, Flex } from 'antd'
+import { Button, Space, App, Flex, Tooltip, Divider } from 'antd'
 import { UsergroupAddOutlined } from '@ant-design/icons';
 
 import type { ModelPlaza, ModelPlazaItem, ModelSquareDetailRef } from '../types';
@@ -9,6 +9,7 @@ import { getModelPlaza, addModelPlaza } from '@/api/models'
 import RbCard from '@/components/RbCard/Card'
 import Tag from '@/components/Tag';
 import PageEmpty from '@/components/Empty/PageEmpty';
+import { getLogoUrl } from '../utils'
 
 interface ModelSquareDetailProps {
   refresh: () => void;
@@ -52,42 +53,49 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
 
   return (
     <RbDrawer
-      title={<>{model.provider} {t('modelNew.modelList')} ({list.length}{t('modelNew.item')})</>}
+      title={<>{t(`modelNew.${model.provider}`)} {t('modelNew.modelList')} ({list.length}{t('modelNew.item')})</>}
       open={open}
       onClose={handleClose}
     >
-      {list.length === 0 
-        ? <PageEmpty />
-        : <div className="rb:grid rb:grid-cols-2 rb:gap-4">
-          {list.map(item => (
-            <RbCard
-              key={item.id}
-              title={item.name}
-              avatarUrl={item.logo}
-              avatar={
-                <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
-                  {item.name[0]}
+      <div className="rb:h-full rb:overflow-y-auto">
+        {list.length === 0 
+          ? <PageEmpty />
+          : <div className="rb:grid rb:grid-cols-2 rb:gap-4">
+            {list.map(item => (
+              <RbCard
+                key={item.id}
+                title={item.name}
+                subTitle={<Tag>{t(`modelNew.${item.type}`)}</Tag>}
+                avatarUrl={getLogoUrl(item.logo)}
+                avatar={
+                  <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
+                    {item.name[0]}
+                  </div>
+                }
+                bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
+              >
+                <Tooltip title={item.description}>
+                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
+                </Tooltip>
+                <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
+                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
+                  <Divider size="middle" />
+                  <Flex justify="space-between">
+                    <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
+                    <Space>
+                      {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
+                      {item.is_added
+                        ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
+                        : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>+ {t('common.add')}</Button>
+                      }
+                    </Space>
+                  </Flex>
                 </div>
-              }
-            >
-              <Tag>{t(`modelNew.${item.type}`)}</Tag>
-              <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-3 rb:h-9">{item.description}</div>
-              <Space size={8} className="rb:mt-3">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Space>
-
-              <Flex justify="space-between">
-                <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
-                <Space>
-                  {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
-                  {item.is_added
-                    ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
-                    : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>+ {t('common.add')}</Button>
-                  }
-                </Space>
-              </Flex>
-            </RbCard>
-          ))}
-          </div>
-        }
+              </RbCard>
+            ))}
+            </div>
+          }
+      </div>
     </RbDrawer>
   );
 });

web/src/views/ModelManagement/utils.ts

@@ -0,0 +1,26 @@
+import bedrockIcon from '@/assets/images/model/bedrock.svg'
+import dashscopeIcon from '@/assets/images/model/dashscope.png'
+import gpustackIcon from '@/assets/images/model/gpustack.png'
+import ollamaIcon from '@/assets/images/model/ollama.svg'
+import openaiIcon from '@/assets/images/model/openai.svg'
+import xinferenceIcon from '@/assets/images/model/xinference.svg'
+
+export const ICONS = {
+  bedrock: bedrockIcon,
+  dashscope: dashscopeIcon,
+  gpustack: gpustackIcon,
+  ollama: ollamaIcon,
+  openai: openaiIcon,
+  xinference: xinferenceIcon
+}
+
+export const getLogoUrl = (logo?: string) => {
+  if (!logo) {
+    return undefined
+  }
+  if (logo.startsWith('http')) {
+    return logo
+  }
+
+  return ICONS[logo as keyof typeof ICONS] || undefined
+}