feat(web): model ui update

web/src/i18n/en.ts

@@ -557,6 +557,7 @@ export const en = {
       add: 'Add',
       item: 'item',
       apiKeyNum: ' API Keys',
+      official: 'Official',
 
       llm: 'LLM',
       chat: 'Chat',

web/src/i18n/zh.ts

@@ -1123,6 +1123,7 @@ export const zh = {
       add: '添加',
       item: '个',
       apiKeyNum: '个 API Key',
+      official: '官方',
 
       llm: 'LLM',
       chat: 'Chat',

web/src/views/ModelManagement/Square.tsx

@@ -56,7 +56,10 @@ const ModelSquare = forwardRef <BaseRef, { query: any; handleEdit: (vo?: ModelPl
                 <RbCard
                   key={item.id}
                   title={item.name}
-                  subTitle={<Tag className="rb:mt-1">{t(`modelNew.${item.type}`)}</Tag>}
+                  subTitle={<Space size={8}>
+                    <Tag className="rb:mt-1">{t(`modelNew.${item.type}`)}</Tag>
+                    {item.is_official && <Tag color="success" className="rb:mt-1">{t(`modelNew.official`)}</Tag>}
+                  </Space>}
                   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]">

web/src/views/ModelManagement/components/ModelImplement/SubModelModal.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, useImperativeHandle, useState, useMemo, useEffect } from 'react';
+import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
 import { Form, Cascader, App, type CascaderProps } from 'antd';
 import { useTranslation } from 'react-i18next';
 
-import type { SubModelModalForm, SubModelModalRef, SubModelModalProps, ModelList } from './types';
+import type { SubModelModalForm, SubModelModalRef, SubModelModalProps } from './types';
 import RbModal from '@/components/RbModal'
 import CustomSelect from '@/components/CustomSelect'
 import { modelProviderUrl, getModelNewList } from '@/api/models'
@@ -59,7 +59,8 @@ const SubModelModal = forwardRef<SubModelModalRef, SubModelModalProps>(({
           ...vo[0],
           model_name: vo[0].name,
           model_config_ids: [vo[0].id],
-          id: vo[1].value
+          id: vo[1].value,
+          api_key: vo[1].label
         })))
         handleClose()
       })

web/src/views/ModelManagement/components/ModelImplement/index.tsx

@@ -24,15 +24,15 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
     }
     subModelModalRef.current?.handleOpen()
   }
-  const handleDelete = (provider: string) => {
+  const handleDelete = (vo: any) => {
     modal.confirm({
-      title: t('common.confirmDeleteDesc', { name: provider }),
+      title: t('common.confirmDeleteDesc', { name: [vo.model_name, vo.api_key].join(' / ') }),
       content: t('application.apiKeyDeleteContent'),
       okText: t('common.delete'),
       cancelText: t('common.cancel'),
       okType: 'danger',
       onOk: () => {
-        onChange?.(value?.filter((item: any) => item.provider !== provider))
+        onChange?.(value?.filter((item: any) => item.id !== vo.id))
       }
     })
   }
@@ -70,18 +70,18 @@ const ModelImplement: FC<ModelImplementProps> = ({ type, value, onChange }) => {
       <div className="rb:bg-[#F5F6F7] rb:rounded-lg rb:p-3 rb:mt-2">
         {!value || value.length === 0
         ? <Empty size={88} />
-          : Object.entries(groupedByProvider).map(([provider, items]: [string, ModelList[]]) => {
+          : value.map((item: any) => {
           return (
-            <div key={provider} className="rb:mb-4 last:rb:mb-0">
-              <Flex justify="space-between" align="center" className="rb:mb-2 last:rb:mb-0">
-                <div className="rb:font-medium">{[...new Set(items?.map((vo) => vo.model_name))].join(', ')}</div>
+            <div key={item.id} className="rb:mb-4 rb:last:rb:mb-0 rb:bg-[#FBFDFF]  rb:rounded-lg rb:p-3">
+              <Flex gap={8} justify="space-between" align="center" className="rb:mb-2 rb:last:rb:mb-0">
+                <div className="rb:font-medium">{[item.model_name, item.api_key].join(' / ')}</div>
 
                 <div
                   className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
-                  onClick={() => handleDelete(provider)}
+                  onClick={() => handleDelete(item)}
                 ></div>
               </Flex>
-              <Tag className="rb:mb-2">{t(`modelNew.${provider}`)}</Tag>
+              <Tag className="rb:mb-2">{t(`modelNew.${item.provider}`)}</Tag>
             </div>
           )
         })}

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

@@ -65,7 +65,10 @@ const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProp
               <RbCard
                 key={item.id}
                 title={item.name}
-                subTitle={<Tag className="rb:mt-1">{t(`modelNew.${item.type}`)}</Tag>}
+                subTitle={<Space size={8}>
+                  <Tag className="rb:mt-1">{t(`modelNew.${item.type}`)}</Tag>
+                  {item.is_official && <Tag color="success" className="rb:mt-1">{t(`modelNew.official`)}</Tag>}
+                </Space>}
                 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]">