fix: ssh key, template test

src/pages/gpu-service/templates/components/template-card.tsx

@@ -1,10 +1,21 @@
+import ascendLogo from '@/assets/logo/ascend.png';
+import CambriconPNG from '@/assets/logo/cambricon.png';
+import hyponPNG from '@/assets/logo/hygon.png';
+import iluvatarWEBP from '@/assets/logo/Iluvatar.png';
+import metaxLogo from '@/assets/logo/metax.png';
+import mooreLogo from '@/assets/logo/moore-logo.png';
+import nvidiaLogo from '@/assets/logo/nvidia.png';
+import theadLogoEN from '@/assets/logo/t-head-en.png';
+import theadLogoZH from '@/assets/logo/t-head-zh.png';
+import { GPUDriverMap } from '@/pages/resources/config/gpu-driver';
 import {
   AutoTooltip,
   DropdownActions,
   IconFont,
   TemplateCard
 } from '@gpustack/core-ui';
-import { Button } from 'antd';
+import { useIntl } from '@umijs/max';
+import { Button, Tag } from 'antd';
 import styled from 'styled-components';
 import { templateActions } from '../config';
 import { ListItem } from '../config/types';
@@ -24,16 +35,21 @@ const Header = styled.div`
   justify-content: space-between;
   height: 24px;
   width: 100%;
+  .title {
+    display: flex;
+    align-items: center;
+  }
 `;
 
-const CardTitle = styled.div`
+const CardName = styled.div`
   font-weight: 500;
   font-size: 14px;
   display: flex;
   align-items: center;
   color: var(--ant-color-text);
+  margin-bottom: 8px;
   gap: 8px;
-  flex: 1;
+  width: 100%;
   min-width: 0;
 `;
 
@@ -61,12 +77,18 @@ const InfoItem = styled.div`
   }
 `;
 
+const LogoImg = styled.img`
+  object-fit: contain;
+`;
+
 interface TemplateCardProps {
   data: ListItem;
   onSelect?: (item: { action: string; data: ListItem }) => void;
 }
 
 const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
+  const intl = useIntl();
+
   const handleOnSelect = (item: any) => {
     onSelect?.({ action: item.key, data });
   };
@@ -75,6 +97,50 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
     e.stopPropagation();
   };
 
+  const renderLogo = () => {
+    switch (data.manufacturer) {
+      case GPUDriverMap.NVIDIA:
+        return <LogoImg src={nvidiaLogo} height={18} />;
+      case GPUDriverMap.AMD:
+        return (
+          <IconFont
+            type="icon-amd-logo"
+            style={{ fontSize: 36, color: 'var(--ant-color-text)' }}
+          />
+        );
+      case GPUDriverMap.ASCEND:
+        return <LogoImg src={ascendLogo} height={24} />;
+      case GPUDriverMap.HYGON:
+        return <LogoImg src={hyponPNG} height={18} />;
+      case GPUDriverMap.METAX:
+        return <LogoImg src={metaxLogo} height={20} />;
+      case GPUDriverMap.MOORE_THREADS:
+        return <LogoImg src={mooreLogo} height={22} />;
+      case GPUDriverMap.ILUVATAR:
+        return <LogoImg src={iluvatarWEBP} height={22} />;
+      case GPUDriverMap.CAMBRICON:
+        return <LogoImg src={CambriconPNG} height={22} />;
+      case GPUDriverMap.THEAD:
+        return (
+          <LogoImg
+            src={intl?.locale === 'zh-CN' ? theadLogoZH : theadLogoEN}
+            height={20}
+          />
+        );
+      case 'cpu':
+        return (
+          <Tag color="geekblue" style={{ paddingBlock: 2 }}>
+            <IconFont
+              type="icon-cpu"
+              style={{ fontSize: 22, display: 'flex' }}
+            />
+          </Tag>
+        );
+      default:
+        return null;
+    }
+  };
+
   const renderActions = () => {
     return (
       <span onClick={handleonClickAction} className="operations">
@@ -94,15 +160,6 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
     );
   };
 
-  const ports = data.ports || [];
-  const portText = ports.length
-    ? ports.map((p) => `${p.protocol?.toUpperCase()}:${p.port}`).join(', ')
-    : '-';
-
-  const resources = [data.resources?.cpu, data.resources?.ram]
-    .filter(Boolean)
-    .join(' / ');
-
   return (
     <StyledCard
       clickable={false}
@@ -112,46 +169,24 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
       ghost
       header={
         <Header>
-          <CardTitle>
-            <AutoTooltip ghost minWidth={20}>
-              {data.name || '-'}
-            </AutoTooltip>
-          </CardTitle>
+          <div className="title">{renderLogo()}</div>
           {renderActions()}
         </Header>
       }
     >
       <Content>
-        <InfoItem>
-          <span>
-            <IconFont className="icon" type="icon-model" /> 镜像:
-          </span>
+        <CardName>
           <AutoTooltip ghost minWidth={20}>
-            <span className="value">{data.image || '-'}</span>
+            {data.name || '-'}
           </AutoTooltip>
-        </InfoItem>
+        </CardName>
         <InfoItem>
           <span>
-            <IconFont className="icon" type="icon-storage-outlined" /> 挂载:
+            <IconFont className="icon" type="icon-model" />{' '}
+            {intl.formatMessage({ id: 'gpuservice.template.card.image' })}:
           </span>
           <AutoTooltip ghost minWidth={20}>
-            <span className="value">{data.volumeMount || '-'}</span>
-          </AutoTooltip>
-        </InfoItem>
-        <InfoItem>
-          <span>
-            <IconFont className="icon" type="icon-gpu1" /> 资源:
-          </span>
-          <AutoTooltip ghost minWidth={20}>
-            <span className="value">{resources || '-'}</span>
-          </AutoTooltip>
-        </InfoItem>
-        <InfoItem>
-          <span>
-            <IconFont className="icon" type="icon-network" /> 端口:
-          </span>
-          <AutoTooltip ghost minWidth={20}>
-            <span className="value">{portText}</span>
+            <span className="value">{data.spec?.image || '-'}</span>
           </AutoTooltip>
         </InfoItem>
       </Content>