chore: catalog card style

src/pages/llmodels/components/catalog-item.tsx

@@ -1,11 +1,13 @@
+import fallbackImg from '@/assets/images/img.png';
 import IMG from '@/assets/images/small-logo-200x200.png';
 import AutoTooltip from '@/components/auto-tooltip';
 import IconFont from '@/components/icon-font';
-import { ClockCircleOutlined } from '@ant-design/icons';
-import { Divider, Tag, Typography } from 'antd';
+import TagWrapper from '@/components/tags-wrapper';
+import { Tag, Typography } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';
+import { modelCategories } from '../config';
 import { CatalogItem as CatalogItemType } from '../config/types';
 import '../style/catalog-item.less';
 
@@ -26,13 +28,13 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
     const home = data.home?.replace(/\/$/, '');
     const icon = data.icon?.replace(/^\//, '');
     if (icon) {
-      return `${home}/${icon}`;
+      return data.icon;
     }
     return IMG;
   }, [data]);
 
   const handleOnError = (e: any) => {
-    e.target.src = IMG;
+    e.target.src = fallbackImg;
   };
 
   return (
@@ -43,35 +45,56 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
       <div className="content">
         <div className="title">
           <div className="img">
-            <img src={icon} alt="" onError={handleOnError} />
+            <img
+              src={data.icon || fallbackImg}
+              alt=""
+              onError={handleOnError}
+            />
           </div>
           <AutoTooltip ghost style={{ flex: 1 }}>
             {data.name}
           </AutoTooltip>
         </div>
-        <Typography.Paragraph className="desc" ellipsis={{ rows: 2 }}>
+        <Typography.Paragraph
+          className="desc"
+          ellipsis={{
+            rows: 2,
+            tooltip: (
+              <div
+                className="custome-scrollbar"
+                style={{
+                  display: 'flex',
+                  justifyContent: 'flex-start',
+                  maxHeight: 300,
+                  maxWidth: 300,
+                  overflow: 'auto'
+                }}
+              >
+                {data.description}
+              </div>
+            )
+          }}
+        >
           {data.description}
         </Typography.Paragraph>
       </div>
       <div className="item-footer">
         <div className="update-time">
           <span className="flex-center">
-            <ClockCircleOutlined
+            <IconFont
+              type="icon-new_release_outlined"
               className="m-r-5"
               style={{ color: 'var(--ant-color-text-secondary)' }}
-            />
+            ></IconFont>
             {data.release_date}
           </span>
           <span className="flex-center">
-            <IconFont type="icon-justice" className="m-r-5"></IconFont>
             {_.map(data.licenses, (license: string, index: number) => {
               return (
-                <>
-                  <span key={license}>{license}</span>
-                  {index !== data.licenses.length - 1 && (
-                    <Divider type="vertical" />
-                  )}
-                </>
+                <span key={license} className="flex-center m-r-16">
+                  <IconFont type="icon-justice" className="m-r-5"></IconFont>
+                  <span>{license}</span>
+                </span>
               );
             })}
           </span>
@@ -79,21 +102,37 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
         <div className="tags">
           {data.categories.map((sItem, i) => {
             return (
-              <Tag key={sItem} className="tag-item" color={COLORS[i]}>
-                {sItem}
+              <Tag key={sItem} className="tag-item" color="blue">
+                {_.find(modelCategories, { value: sItem })?.label || sItem}
               </Tag>
             );
           })}
+          {data.capabilities?.length > 0 &&
+            data.capabilities.map((sItem, i) => {
+              return (
+                <Tag key={sItem} className="tag-item" color="purple">
+                  {_.map(_.split(sItem, '/'), (s: string) => {
+                    return _.split(s, '_').join(' ');
+                  })
+                    .reverse()
+                    .join(' ')}
+                </Tag>
+              );
+            })}
           {data.sizes?.length > 0 && (
             <>
               <span className="dot"></span>
-              {data.sizes.map((sItem, i) => {
-                return (
-                  <Tag key={sItem} className="tag-item">
-                    {sItem}B
-                  </Tag>
-                );
-              })}
+              <div className="box">
+                <TagWrapper>
+                  {data.sizes.map((sItem, i) => {
+                    return (
+                      <Tag key={sItem} className="tag-item">
+                        {sItem}B
+                      </Tag>
+                    );
+                  })}
+                </TagWrapper>
+              </div>
             </>
           )}
         </div>