style: modal style gap

src/pages/llmodels/components/deploy-modal.tsx

@@ -339,7 +339,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
               onCancel={onCancel}
               onOk={handleSumit}
               style={{
-                padding: '16px 20px',
+                padding: '16px 24px',
                 display: 'flex',
                 justifyContent: 'flex-end'
               }}
@@ -352,7 +352,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             form={form}
             onFinish={onOk}
             preserve={false}
-            style={{ padding: '16px 20px' }}
+            style={{ padding: '16px 24px' }}
           >
             <Form.Item<FormData>
               name="name"

src/pages/llmodels/components/hf-model-file.tsx

@@ -1,7 +1,7 @@
 import { convertFileSize } from '@/utils';
 import { SearchOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Col, Empty, Row, Space, Spin } from 'antd';
+import { Col, Empty, Row, Space, Spin, Tag } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
@@ -58,7 +58,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
     }
     console.log('quanType', quanType, FileType[quanType]);
     if (FileType[quanType] !== undefined) {
-      return <span className="tag-item">{quanType}</span>;
+      return <Tag className="tag-item">{quanType}</Tag>;
     }
     return null;
   };
@@ -78,7 +78,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
       <TitleWrapper>
         <span>Available Files ({dataSource.fileList.length || 0})</span>
       </TitleWrapper>
-      <div style={{ padding: '16px 20px' }}>
+      <div style={{ padding: '16px 24px' }}>
         <Spin spinning={dataSource.loading} style={{ minHeight: 100 }}>
           {dataSource.fileList.length ? (
             <Row gutter={[16, 24]}>
@@ -95,9 +95,20 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
                     >
                       <div className="title">{item.path}</div>
                       <Space className="tags">
-                        <span className="tag-item">
+                        {/* <span className="tag-item">
                           {convertFileSize(item.size)}
-                        </span>
+                        </span> */}
+                        <Tag
+                          className="tag-item"
+                          color="geekblue"
+                          style={{
+                            marginRight: 0
+                          }}
+                        >
+                          <span style={{ opacity: 0.65 }}>
+                            {convertFileSize(item.size)}
+                          </span>
+                        </Tag>
                         {getModelQuantizationType(item)}
                       </Space>
                       <div className="btn">

src/pages/llmodels/components/hf-model-item.tsx

@@ -42,6 +42,7 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
           <Space size={16}>
             {props.task && (
               <Tag
+                className="tag-item"
                 color="geekblue"
                 style={{
                   marginRight: 0

src/pages/llmodels/components/search-result.tsx

@@ -32,7 +32,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
       <Spin spinning={props.loading}>
         <div style={{ minHeight: 200 }}>
           {resultList.length ? (
-            <Row gutter={[16, 16]}>
+            <Row gutter={[16, 24]}>
               {resultList.map((item, index) => (
                 <Col span={24} key={item.name}>
                   <div

src/pages/llmodels/style/hf-model-file.less

@@ -1,3 +1,5 @@
+@padding: 24px;
+
 .hf-model-file {
   display: flex;
   flex-direction: column;
@@ -24,7 +26,7 @@
     padding: 2px 4px;
     border-radius: 4px;
     font-size: 12px;
-    height: 20px;
+    height: 22px;
     border: 1px solid var(--ant-color-border);
     color: var(--ant-color-text-secondary);
   }
@@ -36,5 +38,5 @@
 }
 
 .wrapper {
-  padding: 16px 20px;
+  padding: 16px @padding;
 }

src/pages/llmodels/style/hf-model-item.less

@@ -22,5 +22,17 @@
 
   .info {
     color: var(--ant-color-text-tertiary);
+
+    .tag-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px 4px;
+      border-radius: 4px;
+      font-size: 12px;
+      height: 22px;
+      border: 1px solid var(--ant-color-border);
+      color: var(--ant-color-text-secondary);
+    }
   }
 }

src/pages/llmodels/style/search-result.less

@@ -1,6 +1,8 @@
+@padding: 24px;
+
 .search-result-wrap {
   background-color: rgba(255, 255, 255, 100%);
-  padding: 16px 20px;
+  padding: 16px @padding;
   border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
   overflow-y: auto;
   height: calc(100vh - 194px);
@@ -22,7 +24,7 @@
 .search-bar {
   left: 0;
   right: 0;
-  padding-inline: 20px;
+  padding-inline: @padding;
   background: var(--color-white-1);
   border-bottom: 1px solid var(--ant-color-split);
   padding-bottom: 16px;

src/pages/llmodels/style/title-wrapper.less

@@ -1,3 +1,5 @@
+@padding: 16px 24px;
+
 .h3 {
   position: sticky;
   top: 0;
@@ -5,7 +7,7 @@
   display: flex;
   justify-content: space-between;
   font-size: 14px;
-  padding: 16px 20px;
+  padding: @padding;
   padding-top: 0;
   margin-bottom: 0;
   background-color: var(--color-white-1);