fix(web): model bugfix

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