From 7ff21e0d6843bd8a5419a75777a810e5929abed5 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 16 Aug 2024 12:01:01 +0800
Subject: [PATCH] style: modal style gap

---
 .../seal-form/components/wrapper.less         |  2 +-
 src/locales/en-US/apikeys.ts                  |  1 +
 src/locales/zh-CN/apikeys.ts                  |  1 +
 src/pages/api-keys/components/add-apikey.tsx  | 19 ++++++++++-------
 .../llmodels/components/deploy-modal.tsx      |  4 ++--
 .../llmodels/components/hf-model-file.tsx     | 21 ++++++++++++++-----
 .../llmodels/components/hf-model-item.tsx     |  1 +
 .../llmodels/components/search-result.tsx     |  2 +-
 src/pages/llmodels/style/hf-model-file.less   |  6 ++++--
 src/pages/llmodels/style/hf-model-item.less   | 12 +++++++++++
 src/pages/llmodels/style/search-result.less   |  6 ++++--
 src/pages/llmodels/style/title-wrapper.less   |  4 +++-
 12 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/src/components/seal-form/components/wrapper.less b/src/components/seal-form/components/wrapper.less
index 28f14267..190c284a 100644
--- a/src/components/seal-form/components/wrapper.less
+++ b/src/components/seal-form/components/wrapper.less
@@ -78,7 +78,7 @@
     position: relative;
     color: var(--ant-color-text-quaternary);
     font-size: 14px;
-    padding-right: calc(var(--ant-padding-sm) - 1px);
+    // padding-right: calc(var(--ant-padding-sm) - 1px);
   }
 }
 
diff --git a/src/locales/en-US/apikeys.ts b/src/locales/en-US/apikeys.ts
index 581ac892..5ed77840 100644
--- a/src/locales/en-US/apikeys.ts
+++ b/src/locales/en-US/apikeys.ts
@@ -2,6 +2,7 @@ export default {
   'apikeys.title': 'API Keys',
   'apikeys.table.apikeys': 'keys',
   'apikeys.button.create': 'New API Key',
+  'apikeys.title.save': 'Save API Key',
   'apikeys.form.expiretime': 'Expiration',
   'apikeys.form.apikey': 'API Key',
   'apikeys.table.name': 'Key Name',
diff --git a/src/locales/zh-CN/apikeys.ts b/src/locales/zh-CN/apikeys.ts
index 6142e8ba..90303ad0 100644
--- a/src/locales/zh-CN/apikeys.ts
+++ b/src/locales/zh-CN/apikeys.ts
@@ -2,6 +2,7 @@ export default {
   'apikeys.title': 'API 密钥',
   'apikeys.table.apikeys': '密钥',
   'apikeys.button.create': '新建 API 密钥',
+  'apikeys.title.save': '保存 API 密钥',
   'apikeys.form.expiretime': '过期时间',
   'apikeys.form.apikey': 'API 密钥',
   'apikeys.table.name': '密钥名称',
diff --git a/src/pages/api-keys/components/add-apikey.tsx b/src/pages/api-keys/components/add-apikey.tsx
index 9b287f7b..8c586cbf 100644
--- a/src/pages/api-keys/components/add-apikey.tsx
+++ b/src/pages/api-keys/components/add-apikey.tsx
@@ -93,7 +93,9 @@ const AddModal: React.FC<AddModalProps> = ({
 
   return (
     <Modal
-      title={title}
+      title={
+        !showKey ? title : intl.formatMessage({ id: 'apikeys.title.save' })
+      }
       open={open}
       centered={true}
       onOk={handleSumit}
@@ -180,13 +182,15 @@ const AddModal: React.FC<AddModalProps> = ({
             </Form.Item>
           </>
         ) : (
-          <Form.Item
-            extra={
-              <Tag color="error" style={{ padding: '6px 8px', marginTop: 10 }}>
+          <Form.Item>
+            <div>
+              <Tag
+                color="error"
+                style={{ padding: '6px 8px', marginBottom: 16 }}
+              >
                 {intl.formatMessage({ id: 'apikeys.table.save.tips' })}
               </Tag>
-            }
-          >
+            </div>
             <SealInput.Input
               label={intl.formatMessage({ id: 'apikeys.form.apikey' })}
               value={apikeyValue}
@@ -194,7 +198,8 @@ const AddModal: React.FC<AddModalProps> = ({
                 <CopyButton
                   text={apikeyValue}
                   shape="default"
-                  size="small"
+                  size="middle"
+                  type="text"
                 ></CopyButton>
               }
             ></SealInput.Input>
diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx
index 890b015c..fb200a39 100644
--- a/src/pages/llmodels/components/deploy-modal.tsx
+++ b/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"
diff --git a/src/pages/llmodels/components/hf-model-file.tsx b/src/pages/llmodels/components/hf-model-file.tsx
index fe3c4b0a..34634592 100644
--- a/src/pages/llmodels/components/hf-model-file.tsx
+++ b/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">
diff --git a/src/pages/llmodels/components/hf-model-item.tsx b/src/pages/llmodels/components/hf-model-item.tsx
index 9e15faed..77615b51 100644
--- a/src/pages/llmodels/components/hf-model-item.tsx
+++ b/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
diff --git a/src/pages/llmodels/components/search-result.tsx b/src/pages/llmodels/components/search-result.tsx
index e6e10488..525c0cf6 100644
--- a/src/pages/llmodels/components/search-result.tsx
+++ b/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
diff --git a/src/pages/llmodels/style/hf-model-file.less b/src/pages/llmodels/style/hf-model-file.less
index 44f7a102..4a850893 100644
--- a/src/pages/llmodels/style/hf-model-file.less
+++ b/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;
 }
diff --git a/src/pages/llmodels/style/hf-model-item.less b/src/pages/llmodels/style/hf-model-item.less
index 1dbabcea..23442e27 100644
--- a/src/pages/llmodels/style/hf-model-item.less
+++ b/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);
+    }
   }
 }
diff --git a/src/pages/llmodels/style/search-result.less b/src/pages/llmodels/style/search-result.less
index 11ffeb8a..75ef40eb 100644
--- a/src/pages/llmodels/style/search-result.less
+++ b/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;
diff --git a/src/pages/llmodels/style/title-wrapper.less b/src/pages/llmodels/style/title-wrapper.less
index fabc437f..60fa5d39 100644
--- a/src/pages/llmodels/style/title-wrapper.less
+++ b/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);