fix: style issues

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

@@ -7,7 +7,7 @@ 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 { manfacturerValueMap } from '@/pages/resources/config/gpu-driver';
 import {
   AutoTooltip,
   DropdownActions,
@@ -73,7 +73,7 @@ const InfoItem = styled.div`
     color: var(--ant-color-text-quaternary);
   }
   .value {
-    color: var(--ant-color-text);
+    color: var(--ant-color-text-secondary);
   }
 `;
 
@@ -99,28 +99,28 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
 
   const renderLogo = () => {
     switch (data.manufacturer) {
-      case GPUDriverMap.NVIDIA:
+      case manfacturerValueMap.NVIDIA:
         return <LogoImg src={nvidiaLogo} height={18} />;
-      case GPUDriverMap.AMD:
+      case manfacturerValueMap.AMD:
         return (
           <IconFont
             type="icon-amd-logo"
             style={{ fontSize: 36, color: 'var(--ant-color-text)' }}
           />
         );
-      case GPUDriverMap.ASCEND:
+      case manfacturerValueMap.ASCEND:
         return <LogoImg src={ascendLogo} height={24} />;
-      case GPUDriverMap.HYGON:
+      case manfacturerValueMap.HYGON:
         return <LogoImg src={hyponPNG} height={18} />;
-      case GPUDriverMap.METAX:
+      case manfacturerValueMap.METAX:
         return <LogoImg src={metaxLogo} height={20} />;
-      case GPUDriverMap.MOORE_THREADS:
+      case manfacturerValueMap.MOORE_THREADS:
         return <LogoImg src={mooreLogo} height={22} />;
-      case GPUDriverMap.ILUVATAR:
+      case manfacturerValueMap.ILUVATAR:
         return <LogoImg src={iluvatarWEBP} height={22} />;
-      case GPUDriverMap.CAMBRICON:
+      case manfacturerValueMap.CAMBRICON:
         return <LogoImg src={CambriconPNG} height={22} />;
-      case GPUDriverMap.THEAD:
+      case manfacturerValueMap.THEAD:
         return (
           <LogoImg
             src={intl?.locale === 'zh-CN' ? theadLogoZH : theadLogoEN}

src/pages/gpu-service/templates/forms/basic.tsx

@@ -18,11 +18,18 @@ import { FormData } from '../config/types';
 import Env from './env';
 import Ports from './ports';
 
-interface BasicProps {
-  page?: 'template' | 'instance';
+export interface BasicResourceMax {
+  cpu?: number | null;
+  memory?: number | null;
+  localStorage?: number | null;
 }
 
-const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
+interface BasicProps {
+  page?: 'template' | 'instance';
+  onceMaxRequest?: BasicResourceMax;
+}
+
+const Basic: React.FC<BasicProps> = ({ page = 'template', onceMaxRequest }) => {
   const { getRuleMessage } = useAppUtils();
   const intl = useIntl();
 
@@ -30,11 +37,26 @@ const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
     () =>
       Object.values(GPUsConfigs).map((item) => ({
         label: item.label,
-        value: item.value
+        value: item.gpuVendor
       })),
     []
   );
 
+  const renderMaxLabel = (
+    label: React.ReactNode,
+    max?: number | null
+  ): React.ReactNode => {
+    if (max == null) return label;
+    return (
+      <Flex gap={4} align="center">
+        {label}
+        <span>
+          ({intl.formatMessage({ id: 'common.max' }, { count: max })})
+        </span>
+      </Flex>
+    );
+  };
+
   return (
     <>
       <div data-field="template"></div>
@@ -135,9 +157,11 @@ const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
             })}
           >
             <InputNumber
-              label={intl.formatMessage({
-                id: 'gpuservice.template.containerDisk'
-              })}
+              label={renderMaxLabel(
+                intl.formatMessage({ id: 'gpuservice.template.containerDisk' }),
+                onceMaxRequest?.localStorage
+              )}
+              max={onceMaxRequest?.localStorage ?? undefined}
             />
           </Form.Item>
         </div>
@@ -149,7 +173,10 @@ const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
             normalize={(value) => (value ? `${value}` : '')}
             getValueProps={(value) => ({ value: value ? String(value) : '' })}
           >
-            <InputNumber label="CPU" />
+            <InputNumber
+              label={renderMaxLabel('CPU', onceMaxRequest?.cpu)}
+              max={onceMaxRequest?.cpu ?? undefined}
+            />
           </Form.Item>
         </div>
         <div style={{ flex: 1 }}>
@@ -161,7 +188,11 @@ const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
             })}
           >
             <InputNumber
-              label={intl.formatMessage({ id: 'gpuservice.template.memory' })}
+              label={renderMaxLabel(
+                intl.formatMessage({ id: 'gpuservice.template.memory' }),
+                onceMaxRequest?.memory
+              )}
+              max={onceMaxRequest?.memory ?? undefined}
             />
           </Form.Item>
         </div>